From 390d8b767cbe4191c64954cc7f10330eacd8c120 Mon Sep 17 00:00:00 2001
From: Kari Salminen <kari.salminen@anders.com>
Date: Sat, 4 Nov 2023 17:58:34 +0200
Subject: [PATCH] feat: upgrade to HDS v3.1.0 and HCRC that uses HDS v3.1.0 &
 update tests

- upgrade to hds-react 3.1.0
- upgrade to react-helsinki-headless-cms 1.0.0-alpha229
- UI components:
  - <Footer> was rebuilt in HDS v3 so needed to make changes to it
  - rename flipHorizontal to flipVertical per HDS v3 release notes
- tests:
  - update snapshots
    - NOTE: **snapshot updating** updated **suspiciously** e.g.
      "tag_hds-tag__label__I6mc8" to **"undefined"**, maybe there's
      something broken?
  - fix browser tests because language selector changed in HCRC's
    Navigation component which is now actually using HDS v3's Header
    component underneath
- storybook:
  - fix "yarn build-storybook" and "yarn storybook" failing under
    packages/components
    - NOTE: the storybook looks broken but at least it builds and runs
  - add "crypto-browserify" because it was needed by HDS v3
  - fix graphql code generation creating unusable enumeration values
    by making sure the enum keys don't start with a digit
 - miscellaneous fixes
  - fix use(Events|Hobbies|Sports)RHHCConfig.tsx by adding missing
    second argument organisationPrefixes with value
    CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES to
    getEventCardProps

See react-helsinki-headless-cms 1.0.0-alpha229 PR:
https://github.com/City-of-Helsinki/react-helsinki-headless-cms/pull/131

refs LIIKUNTA-584
---
 README.md                                     |  10 +-
 apps/events-helsinki/README.md                |   2 +-
 apps/events-helsinki/package.json             |   7 +-
 ...calCaseWithUnderscoreBeforeLeadingDigit.js |   1 +
 .../CategoryFilter.test.tsx.snap              |  35 +-
 .../src/domain/error/ErrorHero.tsx            |   2 +-
 .../__snapshots__/ResultsInfo.test.tsx.snap   |  17 +-
 .../src/hooks/useEventsRHHCConfig.tsx         |   7 +-
 apps/hobbies-helsinki/package.json            |   7 +-
 ...calCaseWithUnderscoreBeforeLeadingDigit.js |   1 +
 .../CategoryFilter.test.tsx.snap              |  35 +-
 .../src/domain/error/ErrorHero.tsx            |   2 +-
 .../__snapshots__/ResultsInfo.test.tsx.snap   |  17 +-
 .../src/hooks/useHobbiesRHHCConfig.tsx        |   7 +-
 apps/sports-helsinki/package.json             |   7 +-
 ...calCaseWithUnderscoreBeforeLeadingDigit.js |   1 +
 .../CategoryFilter.test.tsx.snap              |  35 +-
 .../src/domain/error/ErrorHero.tsx            |   2 +-
 .../__snapshots__/ResultsInfo.test.tsx.snap   |  17 +-
 .../src/hooks/useSportsRHHCConfig.tsx         |   7 +-
 .../browser-tests/page-model/header.ts        |  32 +-
 packages/components/.storybook/main.js        |   1 +
 packages/components/codegen.ts                |  29 +
 packages/components/codegen.yml               |  16 -
 packages/components/package.json              |   9 +-
 ...calCaseWithUnderscoreBeforeLeadingDigit.js |   1 +
 ...seWithUnderscoreBeforeLeadingDigit.test.ts |  23 +
 ...calCaseWithUnderscoreBeforeLeadingDigit.js |  21 +
 .../DateSelectorMenu.test.tsx.snap            |  51 +-
 .../components/filterButton/FilterButton.tsx  |   6 +-
 .../__snapshots__/FilterButton.test.tsx.snap  |  24 +-
 .../__snapshots__/AgeFilter.test.tsx.snap     |  24 +-
 .../__snapshots__/DateFilter.test.tsx.snap    |  48 +-
 .../__snapshots__/PlaceFilter.test.tsx.snap   |  24 +-
 .../PublisherFilter.test.tsx.snap             |  24 +-
 .../__snapshots__/TextFilter.test.tsx.snap    |  24 +-
 .../src/components/footer/Footer.tsx          |  40 +-
 .../__snapshots__/KeywordButton.test.tsx.snap |   4 +-
 .../AutoSuggestMenu.test.tsx.snap             |  18 +-
 .../__snapshots__/SearchSelect.test.tsx.snap  |  17 +-
 .../components/src/constants/constants.ts     |  20 +-
 .../src/types/generated/graphql.tsx           |   4 +-
 yarn.lock                                     | 589 +++++++++++++++---
 43 files changed, 828 insertions(+), 440 deletions(-)
 create mode 120000 apps/events-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
 create mode 120000 apps/hobbies-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
 create mode 120000 apps/sports-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
 create mode 100644 packages/components/codegen.ts
 delete mode 100644 packages/components/codegen.yml
 create mode 120000 packages/components/pascalCaseWithUnderscoreBeforeLeadingDigit.js
 create mode 100644 packages/components/src/codegen/__tests__/pascalCaseWithUnderscoreBeforeLeadingDigit.test.ts
 create mode 100644 packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js

diff --git a/README.md b/README.md
index 4f210273a..cbd42e9cd 100644
--- a/README.md
+++ b/README.md
@@ -192,7 +192,8 @@ While `deps:check` will give you a detailed info about about dep versions across
 
 ### Symbolic links
 
-Monorepo uses symbolic links to share assets and locales between apps and packages, e.g.:
+Monorepo uses symbolic links to share assets, locales and GraphQL schema generation
+related code between apps and packages, e.g.:
 
 Shared assets:
 
@@ -204,6 +205,13 @@ Locales:
 
 - packages/common-i18n/src/locales/default → packages/common-i18n/src/locales/fi/
 
+GraphQL schema generation related code:
+
+- apps/events-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js → packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
+- apps/hobbies-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js → packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
+- apps/sports-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js → packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
+- packages/components/pascalCaseWithUnderscoreBeforeLeadingDigit.js → packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
+
 You can find all used symbolic links in the monorepo by running in the monorepo's root:
 
 ```bash
diff --git a/apps/events-helsinki/README.md b/apps/events-helsinki/README.md
index b8017a2a2..9f8aebb9b 100644
--- a/apps/events-helsinki/README.md
+++ b/apps/events-helsinki/README.md
@@ -86,7 +86,7 @@ Transpiles the TypeScript code and reports the errors.
 
 ### `yarn generate:graphql`
 
-Uses the codegen tool to generate Graphql Schema file out from the graphql files inside the app. Note that the [graphql.tsx](../../packages/components/src/types/generated/graphql.tsx) inside the packages/components -directory contains the common types and hooks, so it would most likely make sense to copy the generated result and override the graphql file in the common components-package.
+Uses the codegen tool to generate Graphql Schema file out from the graphql files inside the app. Note that the [graphql.tsx](../../packages/components/src/types/generated/graphql.tsx) inside the packages/components -directory contains the common types and hooks, so you should always copy the generated result and override the graphql file in the common components-package.
 
 ## Headless CMS React Component (HCRC) -library implementation
 
diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json
index 957329d31..5bc04ae93 100644
--- a/apps/events-helsinki/package.json
+++ b/apps/events-helsinki/package.json
@@ -23,7 +23,7 @@
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --cache --cache-location ../../.cache/eslint/events-helsinki.eslintcache",
     "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
     "get-translations": "node ./scripts/get-translations.js",
-    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.yml",
+    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.ts",
     "?test:browser": "echo 'Run browser-tests locally. You need to have production build of the application running locally (yarn build & yarn start)",
     "test:browser": "testcafe \"chrome --window-size='1249,720'\" browser-tests/ --live --dev",
     "test:browser:wsl2win": "testcafe 'path:`/mnt/c/Program Files/Google/Chrome/Application/chrome.exe`' browser-tests/ --live --dev",
@@ -56,7 +56,7 @@
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
     "graphql": "16.7.1",
-    "hds-react": "2.15.0",
+    "hds-react": "3.1.0",
     "i18next": "23.2.3",
     "ics": "^3.2.0",
     "lodash": "4.17.21",
@@ -72,7 +72,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha224",
+    "react-helsinki-headless-cms": "1.0.0-alpha229",
     "react-i18next": "13.0.1",
     "react-scroll": "^1.8.9",
     "react-toastify": "^9.1.3",
@@ -115,6 +115,7 @@
     "@typescript-eslint/parser": "^5.60.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.5.0",
+    "change-case-all": "1.0.15",
     "cross-env": "7.0.3",
     "domain": "0.0.1",
     "es-check": "7.1.1",
diff --git a/apps/events-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js b/apps/events-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
new file mode 120000
index 000000000..33a37856e
--- /dev/null
+++ b/apps/events-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
@@ -0,0 +1 @@
+../../packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
\ No newline at end of file
diff --git a/apps/events-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap b/apps/events-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
index 333c18680..41088b605 100644
--- a/apps/events-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
+++ b/apps/events-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
@@ -17,23 +17,19 @@ exports[`matches snapshot 1`] = `
         class="LinkBase-module_iconLeft__Joa9y LinkBase_hds-icon-left__e0wBz"
       >
         <svg
+          aria-hidden="true"
+          aria-label="home"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M1 13L12 2L23 13L21.5 14.5L20 13V21H4V13L2.5 14.5L1 13ZM12 5L6 11V19L8.999 18.999L9 12H15L14.999 18.999L18 19V11L12 5ZM13 14H11L10.999 18.999H12.999L13 14Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <path
-              d="M0 0h24v24H0z"
-            />
-            <path
-              d="M1 13L12 2l11 11-1.5 1.5L20 13v8H4v-8l-1.5 1.5L1 13zm11-8l-6 6v8l2.999-.001L9 12h6l-.001 6.999L18 19v-8l-6-6zm1 9h-2l-.001 4.999h2L13 14z"
-              fill="currentColor"
-            />
-          </g>
+          />
         </svg>
       </span>
       <span
@@ -47,23 +43,18 @@ exports[`matches snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
+          aria-label="angle-right"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <polygon
-              points="0 24 0 0 24 0 24 24"
-            />
-            <polygon
-              fill="currentColor"
-              points="13.5 12 8.5 7 10 5.5 16.5 12 10 18.5 8.5 17"
-            />
-          </g>
+          />
         </svg>
       </span>
     </a>
diff --git a/apps/events-helsinki/src/domain/error/ErrorHero.tsx b/apps/events-helsinki/src/domain/error/ErrorHero.tsx
index 1d64ebbed..2f4a59cb1 100644
--- a/apps/events-helsinki/src/domain/error/ErrorHero.tsx
+++ b/apps/events-helsinki/src/domain/error/ErrorHero.tsx
@@ -34,7 +34,7 @@ const NotFound: React.FC<Props> = ({
           className={classNames(styles.koros, {
             [styles.smallMargin]: smallMargin,
           })}
-          flipHorizontal={true}
+          flipVertical={true}
           type="basic"
         />
       )}
diff --git a/apps/events-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap b/apps/events-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
index 99729de33..0806ae2cf 100644
--- a/apps/events-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
+++ b/apps/events-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
@@ -10,23 +10,18 @@ exports[`events with 0 results matches snapshot for no results 1`] = `
     >
       <svg
         aria-hidden="true"
+        aria-label="search"
         class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g
-          fill="none"
+        <path
+          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"
           fill-rule="evenodd"
-        >
-          <path
-            d="M0 0h24v24H0z"
-          />
-          <path
-            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"
-          />
-        </g>
+        />
       </svg>
     </div>
     <div
diff --git a/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx b/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx
index bd8542a2d..1bc36372a 100644
--- a/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx
+++ b/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx
@@ -8,6 +8,7 @@ import {
   useEventTranslation,
   MAIN_CONTENT_ID,
   useCommonCmsConfig,
+  CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
 } from '@events-helsinki/components';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -85,7 +86,11 @@ export default function useEventsRHHCConfig(args: {
         ...rhhcDefaultConfig.utils,
         getEventCardProps: AppConfig.showEnrolmentStatusInCardDetails
           ? (item: EventFieldsFragment, locale: string) => ({
-              ...rhhcDefaultConfig.utils.getEventCardProps(item, locale),
+              ...rhhcDefaultConfig.utils.getEventCardProps(
+                item,
+                CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
+                locale
+              ),
               getLinkArrowLabel: getLinkArrowLabel({
                 item,
                 locale,
diff --git a/apps/hobbies-helsinki/package.json b/apps/hobbies-helsinki/package.json
index b093e1922..7e18f6d52 100644
--- a/apps/hobbies-helsinki/package.json
+++ b/apps/hobbies-helsinki/package.json
@@ -23,7 +23,7 @@
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --cache --cache-location ../../.cache/eslint/hobbies-helsinki.eslintcache",
     "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
     "get-translations": "node ./scripts/get-translations.js",
-    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.yml",
+    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.ts",
     "?test:browser": "echo 'Run browser-tests locally. You need to have production build of the application running locally (yarn build & yarn start)",
     "test:browser": "testcafe \"chrome --window-size='1249,720'\" browser-tests/ --live --dev",
     "test:browser:wsl2win": "testcafe 'path:`/mnt/c/Program Files/Google/Chrome/Application/chrome.exe`' browser-tests/ --live --dev",
@@ -56,7 +56,7 @@
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
     "graphql": "16.7.1",
-    "hds-react": "2.15.0",
+    "hds-react": "3.1.0",
     "i18next": "23.2.3",
     "ics": "^3.2.0",
     "lodash": "4.17.21",
@@ -72,7 +72,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha224",
+    "react-helsinki-headless-cms": "1.0.0-alpha229",
     "react-i18next": "13.0.1",
     "react-scroll": "^1.8.9",
     "react-toastify": "^9.1.3",
@@ -115,6 +115,7 @@
     "@typescript-eslint/parser": "^5.60.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.5.0",
+    "change-case-all": "1.0.15",
     "cross-env": "7.0.3",
     "domain": "0.0.1",
     "es-check": "7.1.1",
diff --git a/apps/hobbies-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js b/apps/hobbies-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
new file mode 120000
index 000000000..33a37856e
--- /dev/null
+++ b/apps/hobbies-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
@@ -0,0 +1 @@
+../../packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
\ No newline at end of file
diff --git a/apps/hobbies-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap b/apps/hobbies-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
index 333c18680..41088b605 100644
--- a/apps/hobbies-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
+++ b/apps/hobbies-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
@@ -17,23 +17,19 @@ exports[`matches snapshot 1`] = `
         class="LinkBase-module_iconLeft__Joa9y LinkBase_hds-icon-left__e0wBz"
       >
         <svg
+          aria-hidden="true"
+          aria-label="home"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M1 13L12 2L23 13L21.5 14.5L20 13V21H4V13L2.5 14.5L1 13ZM12 5L6 11V19L8.999 18.999L9 12H15L14.999 18.999L18 19V11L12 5ZM13 14H11L10.999 18.999H12.999L13 14Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <path
-              d="M0 0h24v24H0z"
-            />
-            <path
-              d="M1 13L12 2l11 11-1.5 1.5L20 13v8H4v-8l-1.5 1.5L1 13zm11-8l-6 6v8l2.999-.001L9 12h6l-.001 6.999L18 19v-8l-6-6zm1 9h-2l-.001 4.999h2L13 14z"
-              fill="currentColor"
-            />
-          </g>
+          />
         </svg>
       </span>
       <span
@@ -47,23 +43,18 @@ exports[`matches snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
+          aria-label="angle-right"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <polygon
-              points="0 24 0 0 24 0 24 24"
-            />
-            <polygon
-              fill="currentColor"
-              points="13.5 12 8.5 7 10 5.5 16.5 12 10 18.5 8.5 17"
-            />
-          </g>
+          />
         </svg>
       </span>
     </a>
diff --git a/apps/hobbies-helsinki/src/domain/error/ErrorHero.tsx b/apps/hobbies-helsinki/src/domain/error/ErrorHero.tsx
index 1d64ebbed..2f4a59cb1 100644
--- a/apps/hobbies-helsinki/src/domain/error/ErrorHero.tsx
+++ b/apps/hobbies-helsinki/src/domain/error/ErrorHero.tsx
@@ -34,7 +34,7 @@ const NotFound: React.FC<Props> = ({
           className={classNames(styles.koros, {
             [styles.smallMargin]: smallMargin,
           })}
-          flipHorizontal={true}
+          flipVertical={true}
           type="basic"
         />
       )}
diff --git a/apps/hobbies-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap b/apps/hobbies-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
index 2687e7788..67a540e89 100644
--- a/apps/hobbies-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
+++ b/apps/hobbies-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
@@ -10,23 +10,18 @@ exports[`events with 0 results matches snapshot for no results 1`] = `
     >
       <svg
         aria-hidden="true"
+        aria-label="search"
         class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g
-          fill="none"
+        <path
+          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"
           fill-rule="evenodd"
-        >
-          <path
-            d="M0 0h24v24H0z"
-          />
-          <path
-            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"
-          />
-        </g>
+        />
       </svg>
     </div>
     <div
diff --git a/apps/hobbies-helsinki/src/hooks/useHobbiesRHHCConfig.tsx b/apps/hobbies-helsinki/src/hooks/useHobbiesRHHCConfig.tsx
index 54ec18896..505ded8a6 100644
--- a/apps/hobbies-helsinki/src/hooks/useHobbiesRHHCConfig.tsx
+++ b/apps/hobbies-helsinki/src/hooks/useHobbiesRHHCConfig.tsx
@@ -8,6 +8,7 @@ import {
   useEventTranslation,
   MAIN_CONTENT_ID,
   useCommonCmsConfig,
+  CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
 } from '@events-helsinki/components';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -86,7 +87,11 @@ export default function useHobbiesRHHCConfig(args: {
         ...rhhcDefaultConfig.utils,
         getEventCardProps: AppConfig.showEnrolmentStatusInCardDetails
           ? (item: EventFieldsFragment, locale: string) => ({
-              ...rhhcDefaultConfig.utils.getEventCardProps(item, locale),
+              ...rhhcDefaultConfig.utils.getEventCardProps(
+                item,
+                CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
+                locale
+              ),
               linkArrowLabel: getLinkArrowLabel({
                 item,
                 locale,
diff --git a/apps/sports-helsinki/package.json b/apps/sports-helsinki/package.json
index d69c7ecb7..2bd9fad6e 100644
--- a/apps/sports-helsinki/package.json
+++ b/apps/sports-helsinki/package.json
@@ -24,7 +24,7 @@
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --cache --cache-location ../../.cache/eslint/sports-helsinki.eslintcache",
     "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
     "get-translations": "node ./scripts/get-translations.js",
-    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.yml",
+    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.ts",
     "?test:browser": "echo 'Run browser-tests locally. You need to have production build of the application running locally (yarn build & yarn start)",
     "test:browser": "testcafe \"chrome --window-size='1249,720'\" browser-tests/ --live --dev",
     "test:browser:wsl2win": "testcafe 'path:`/mnt/c/Program Files/Google/Chrome/Application/chrome.exe`' browser-tests/ --live --dev",
@@ -63,7 +63,7 @@
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
     "graphql": "16.7.1",
-    "hds-react": "2.15.0",
+    "hds-react": "3.1.0",
     "i18next": "23.2.3",
     "ics": "^3.2.0",
     "leaflet": "1.9.4",
@@ -80,7 +80,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha224",
+    "react-helsinki-headless-cms": "1.0.0-alpha229",
     "react-i18next": "13.0.1",
     "react-leaflet": "4.2.1",
     "react-scroll": "^1.8.9",
@@ -125,6 +125,7 @@
     "@typescript-eslint/parser": "^5.60.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.5.0",
+    "change-case-all": "1.0.15",
     "cross-env": "7.0.3",
     "domain": "0.0.1",
     "es-check": "7.1.1",
diff --git a/apps/sports-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js b/apps/sports-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
new file mode 120000
index 000000000..33a37856e
--- /dev/null
+++ b/apps/sports-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
@@ -0,0 +1 @@
+../../packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
\ No newline at end of file
diff --git a/apps/sports-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap b/apps/sports-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
index 333c18680..41088b605 100644
--- a/apps/sports-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
+++ b/apps/sports-helsinki/src/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
@@ -17,23 +17,19 @@ exports[`matches snapshot 1`] = `
         class="LinkBase-module_iconLeft__Joa9y LinkBase_hds-icon-left__e0wBz"
       >
         <svg
+          aria-hidden="true"
+          aria-label="home"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M1 13L12 2L23 13L21.5 14.5L20 13V21H4V13L2.5 14.5L1 13ZM12 5L6 11V19L8.999 18.999L9 12H15L14.999 18.999L18 19V11L12 5ZM13 14H11L10.999 18.999H12.999L13 14Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <path
-              d="M0 0h24v24H0z"
-            />
-            <path
-              d="M1 13L12 2l11 11-1.5 1.5L20 13v8H4v-8l-1.5 1.5L1 13zm11-8l-6 6v8l2.999-.001L9 12h6l-.001 6.999L18 19v-8l-6-6zm1 9h-2l-.001 4.999h2L13 14z"
-              fill="currentColor"
-            />
-          </g>
+          />
         </svg>
       </span>
       <span
@@ -47,23 +43,18 @@ exports[`matches snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
+          aria-label="angle-right"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <polygon
-              points="0 24 0 0 24 0 24 24"
-            />
-            <polygon
-              fill="currentColor"
-              points="13.5 12 8.5 7 10 5.5 16.5 12 10 18.5 8.5 17"
-            />
-          </g>
+          />
         </svg>
       </span>
     </a>
diff --git a/apps/sports-helsinki/src/domain/error/ErrorHero.tsx b/apps/sports-helsinki/src/domain/error/ErrorHero.tsx
index ebb499755..2a112058d 100644
--- a/apps/sports-helsinki/src/domain/error/ErrorHero.tsx
+++ b/apps/sports-helsinki/src/domain/error/ErrorHero.tsx
@@ -35,7 +35,7 @@ const NotFound: React.FC<Props> = ({
           className={classNames(styles.koros, {
             [styles.smallMargin]: smallMargin,
           })}
-          flipHorizontal={true}
+          flipVertical={true}
           type="basic"
         />
       )}
diff --git a/apps/sports-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap b/apps/sports-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
index 57bcb2a54..321cd3a53 100644
--- a/apps/sports-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
+++ b/apps/sports-helsinki/src/domain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
@@ -10,23 +10,18 @@ exports[`events with 0 results matches snapshot for no results 1`] = `
     >
       <svg
         aria-hidden="true"
+        aria-label="search"
         class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g
-          fill="none"
+        <path
+          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"
           fill-rule="evenodd"
-        >
-          <path
-            d="M0 0h24v24H0z"
-          />
-          <path
-            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"
-          />
-        </g>
+        />
       </svg>
     </div>
     <div
diff --git a/apps/sports-helsinki/src/hooks/useSportsRHHCConfig.tsx b/apps/sports-helsinki/src/hooks/useSportsRHHCConfig.tsx
index 5f7dc2911..6b396b6a0 100644
--- a/apps/sports-helsinki/src/hooks/useSportsRHHCConfig.tsx
+++ b/apps/sports-helsinki/src/hooks/useSportsRHHCConfig.tsx
@@ -8,6 +8,7 @@ import {
   useEventTranslation,
   MAIN_CONTENT_ID,
   useCommonCmsConfig,
+  CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
 } from '@events-helsinki/components';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -86,7 +87,11 @@ export default function useSportsRHHCConfig(args: {
         ...rhhcDefaultConfig.utils,
         getEventCardProps: AppConfig.showEnrolmentStatusInCardDetails
           ? (item: EventFieldsFragment, locale: string) => ({
-              ...rhhcDefaultConfig.utils.getEventCardProps(item, locale),
+              ...rhhcDefaultConfig.utils.getEventCardProps(
+                item,
+                CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
+                locale
+              ),
               getLinkArrowLabel: getLinkArrowLabel({
                 item,
                 locale,
diff --git a/packages/common-tests/browser-tests/page-model/header.ts b/packages/common-tests/browser-tests/page-model/header.ts
index 5d39ce780..d9a33468b 100644
--- a/packages/common-tests/browser-tests/page-model/header.ts
+++ b/packages/common-tests/browser-tests/page-model/header.ts
@@ -2,22 +2,26 @@ import { screen } from '@testing-library/testcafe';
 import { Selector, t } from 'testcafe';
 import { initTestI18n as i18n } from '../../../common-i18n/src';
 
-import { DEFAULT_LANGUAGE } from '../../../components/src/constants/constants';
-import type { AppLanguage } from '../../../components/src/types/types';
+import {
+  APP_LANGUAGE_LABELS,
+  DEFAULT_LANGUAGE,
+} from '../../../components/src/constants';
+import type { AppLanguage } from '../../../components/src/types';
+
+function getLanguageSelectorButton(language: AppLanguage) {
+  return Selector('button')
+    .withAttribute('lang', language)
+    .withText(APP_LANGUAGE_LABELS[language]);
+}
 
 class Header {
-  currentLang = DEFAULT_LANGUAGE;
-
   banner = screen.getByRole('banner');
-  languageSelectorButton = Selector('#languageSelector-button');
-  languageSelectorItem = Selector('a').withAttribute('lang', this.currentLang);
+  currentLang: AppLanguage = DEFAULT_LANGUAGE;
+  languageSelectorButton = getLanguageSelectorButton(this.currentLang);
 
   private async setLanguage(lang: AppLanguage) {
     this.currentLang = lang;
-    this.languageSelectorItem = Selector('a').withAttribute(
-      'lang',
-      this.currentLang
-    );
+    this.languageSelectorButton = getLanguageSelectorButton(this.currentLang);
   }
 
   public async changeLanguage(lang: AppLanguage) {
@@ -29,14 +33,8 @@ class Header {
     const languageSelectorButtonScreen = screen.getByRole('button', {
       name: await this.languageSelectorButton.innerText,
     });
-    const languageSelectorItemScreen = screen.getByRole('link', {
-      name: await this.languageSelectorItem.innerText,
-    });
-
-    await t
-      .click(languageSelectorButtonScreen)
-      .click(languageSelectorItemScreen);
 
+    await t.click(languageSelectorButtonScreen);
     await i18n.changeLanguage(lang);
   }
 
diff --git a/packages/components/.storybook/main.js b/packages/components/.storybook/main.js
index 73649d62c..d3849ed59 100644
--- a/packages/components/.storybook/main.js
+++ b/packages/components/.storybook/main.js
@@ -26,6 +26,7 @@ module.exports = {
       'next-i18next': 'react-i18next'
     };
     config.resolve.fallback = {
+      crypto: require.resolve("crypto-browserify"),
       zlib: false,
       stream: false,
       fs: false
diff --git a/packages/components/codegen.ts b/packages/components/codegen.ts
new file mode 100644
index 000000000..a609a05af
--- /dev/null
+++ b/packages/components/codegen.ts
@@ -0,0 +1,29 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: process.env.FEDERATION_ROUTER_ENDPOINT,
+  documents: ['../../packages/components/src/components/domain/**/*query.ts'],
+  generates: {
+    './src/components/domain/graphql/generated/graphql.tsx': {
+      plugins: [
+        'typescript',
+        'typescript-operations',
+        'typescript-react-apollo',
+      ],
+      config: {
+        withHooks: true,
+        withComponent: false,
+        flattenSelectionSet: true,
+        namingConvention: {
+          enumValues: './pascalCaseWithUnderscoreBeforeLeadingDigit',
+        },
+      },
+      hooks: {
+        afterOneFileWrite: ['prettier --write'],
+      },
+    },
+  },
+};
+
+export default config;
diff --git a/packages/components/codegen.yml b/packages/components/codegen.yml
deleted file mode 100644
index 447c03583..000000000
--- a/packages/components/codegen.yml
+++ /dev/null
@@ -1,16 +0,0 @@
-overwrite: true
-schema: ${FEDERATION_ROUTER_ENDPOINT}
-documents: '../../packages/components/src/components/domain/**/*query.ts'
-generates:
-  ./src/components/domain/graphql/generated/graphql.tsx:
-    plugins:
-      - 'typescript'
-      - 'typescript-operations'
-      - 'typescript-react-apollo'
-    config:
-      withHooks: true
-      withComponent: false
-      flattenSelectionSet: true
-    hooks:
-      afterOneFileWrite:
-        - prettier --write
diff --git a/packages/components/package.json b/packages/components/package.json
index 4d2cb3931..b52687c9b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -56,8 +56,8 @@
     "fast-deep-equal": "3.1.3",
     "file-saver": "^2.0.5",
     "graphql": "16.7.1",
-    "hds-design-tokens": "2.15.0",
-    "hds-react": "2.15.0",
+    "hds-design-tokens": "3.1.0",
+    "hds-react": "3.1.0",
     "https": "1.0.0",
     "i18next": "23.2.3",
     "i18next-browser-languagedetector": "7.1.0",
@@ -77,7 +77,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha224",
+    "react-helsinki-headless-cms": "1.0.0-alpha229",
     "react-i18next": "13.0.1",
     "react-leaflet": "4.2.1",
     "react-toastify": "^9.1.3",
@@ -104,6 +104,7 @@
     "@events-helsinki/common-tests": "workspace:^",
     "@events-helsinki/eslint-config-bases": "workspace:^",
     "@faker-js/faker": "^8.0.2",
+    "@graphql-codegen/cli": "4.0.1",
     "@mdx-js/react": "1.6.22",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.2",
@@ -142,8 +143,10 @@
     "babel-loader": "9.1.2",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-polyfill-corejs3": "0.8.1",
+    "change-case-all": "1.0.15",
     "core-js": "3.31.0",
     "cross-env": "7.0.3",
+    "crypto-browserify": "3.12.0",
     "csstype": "3.1.2",
     "dequal": "2.0.3",
     "dompurify": "3.0.3",
diff --git a/packages/components/pascalCaseWithUnderscoreBeforeLeadingDigit.js b/packages/components/pascalCaseWithUnderscoreBeforeLeadingDigit.js
new file mode 120000
index 000000000..3e94f48e8
--- /dev/null
+++ b/packages/components/pascalCaseWithUnderscoreBeforeLeadingDigit.js
@@ -0,0 +1 @@
+./src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
\ No newline at end of file
diff --git a/packages/components/src/codegen/__tests__/pascalCaseWithUnderscoreBeforeLeadingDigit.test.ts b/packages/components/src/codegen/__tests__/pascalCaseWithUnderscoreBeforeLeadingDigit.test.ts
new file mode 100644
index 000000000..ffa8b56d5
--- /dev/null
+++ b/packages/components/src/codegen/__tests__/pascalCaseWithUnderscoreBeforeLeadingDigit.test.ts
@@ -0,0 +1,23 @@
+import pascalCaseWithUnderscoreBeforeLeadingDigit from '../pascalCaseWithUnderscoreBeforeLeadingDigit';
+
+describe('pascalCaseWithUnderscoreBeforeLeadingDigit', () => {
+  it.each([
+    { inputString: '_', expectedResult: '_' },
+    { inputString: '9', expectedResult: '_9' },
+    { inputString: '123', expectedResult: '_123' },
+    { inputString: 'a123', expectedResult: 'A123' },
+    { inputString: '_test', expectedResult: 'Test' },
+    { inputString: '_test_with_parts', expectedResult: 'TestWithParts' },
+    { inputString: 'a__b_c__de___f2__3g__', expectedResult: 'ABCDeF2_3g' },
+    { inputString: '1_2_and__3', expectedResult: '_1_2And_3' },
+    { inputString: '_1536X1536', expectedResult: '_1536X1536' },
+    { inputString: '_2048X2048', expectedResult: '_2048X2048' },
+  ])(
+    "pascalCaseWithUnderscoreBeforeLeadingDigit('$inputString') == '$expectedResult'",
+    ({ inputString, expectedResult }) => {
+      expect(pascalCaseWithUnderscoreBeforeLeadingDigit(inputString)).toBe(
+        expectedResult
+      );
+    }
+  );
+});
diff --git a/packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js b/packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
new file mode 100644
index 000000000..78d2f0cc0
--- /dev/null
+++ b/packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
@@ -0,0 +1,21 @@
+const { pascalCase } = require('change-case-all');
+
+function startsWithDigit(inputString) {
+  return /^\d/.test(inputString);
+}
+
+/**
+ * Transform input string to pascal case with underscore prefix
+ * if there would be a leading digit.
+ *
+ * Added underscore prefix before a leading digit because of "yarn build-storybook" in
+ * packages/components otherwise failing with an error:
+ * "CodeGenerationError: Identifier directly after number" with e.g. key "1536X1536".
+ */
+function pascalCaseWithUnderscoreBeforeLeadingDigit(inputString) {
+  const pascalCasedInput = pascalCase(inputString);
+  const prefix = startsWithDigit(pascalCasedInput) ? '_' : '';
+  return `${prefix}${pascalCasedInput}` || inputString;
+}
+
+module.exports = pascalCaseWithUnderscoreBeforeLeadingDigit;
diff --git a/packages/components/src/components/dateSelector/__tests__/__snapshots__/DateSelectorMenu.test.tsx.snap b/packages/components/src/components/dateSelector/__tests__/__snapshots__/DateSelectorMenu.test.tsx.snap
index a92614b64..4cf9168b5 100644
--- a/packages/components/src/components/dateSelector/__tests__/__snapshots__/DateSelectorMenu.test.tsx.snap
+++ b/packages/components/src/components/dateSelector/__tests__/__snapshots__/DateSelectorMenu.test.tsx.snap
@@ -87,23 +87,18 @@ exports[`matches snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
+      aria-label="calendar-plus"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="evenodd"
+        d="M20 14V17H23V19H20V22H18V19H15V17H18V14H20ZM17 2C17.5523 2 18 2.44772 18 3V4H22V12H20V11H4V19H13V21H2V4H6V3C6 2.44772 6.44772 2 7 2C7.55228 2 8 2.44772 8 3V4H16V3C16 2.44772 16.4477 2 17 2ZM20 6H4V9H20V6Z"
+        fill="currentColor"
         fill-rule="evenodd"
-      >
-        <path
-          d="M0 0h24v24H0z"
-        />
-        <path
-          d="M20 14v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2zM17 2a1 1 0 011 1v1h4v8h-2v-1H4v8h9v2H2V4h4V3a1 1 0 112 0v1h8V3a1 1 0 011-1zm3 4H4v3h16V6z"
-          fill="currentColor"
-        />
-      </g>
+      />
     </svg>
     <div
       class="buttonText"
@@ -112,23 +107,18 @@ exports[`matches snapshot 1`] = `
     </div>
     <svg
       aria-hidden="true"
+      aria-label="angle-right"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="evenodd"
+        d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z"
+        fill="currentColor"
         fill-rule="evenodd"
-      >
-        <polygon
-          points="0 24 0 0 24 0 24 24"
-        />
-        <polygon
-          fill="currentColor"
-          points="13.5 12 8.5 7 10 5.5 16.5 12 10 18.5 8.5 17"
-        />
-      </g>
+      />
     </svg>
   </button>
   <button
@@ -137,23 +127,18 @@ exports[`matches snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
+      aria-label="angle-left"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="evenodd"
+        d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z"
+        fill="currentColor"
         fill-rule="evenodd"
-      >
-        <polygon
-          points="24 0 24 24 0 24 0 0"
-        />
-        <polygon
-          fill="currentColor"
-          points="10.5 12 15.5 17 14 18.5 7.5 12 14 5.5 15.5 7"
-        />
-      </g>
+      />
     </svg>
     <div
       class="buttonText"
diff --git a/packages/components/src/components/filterButton/FilterButton.tsx b/packages/components/src/components/filterButton/FilterButton.tsx
index 3d508900e..2f2e9afbe 100644
--- a/packages/components/src/components/filterButton/FilterButton.tsx
+++ b/packages/components/src/components/filterButton/FilterButton.tsx
@@ -1,5 +1,5 @@
 import type { TagCustomTheme } from 'hds-react';
-import { RoundedTag } from 'hds-react';
+import { Tag } from 'hds-react';
 import React from 'react';
 
 import useCommonTranslation from '../../hooks/useCommonTranslation';
@@ -26,7 +26,7 @@ const FilterButton: React.FC<Props> = ({ onRemove, text, type, value }) => {
   } as TagCustomTheme;
 
   return (
-    <RoundedTag
+    <Tag
       theme={theme}
       onDelete={handleRemove}
       deleteButtonAriaLabel={t('common:filter.ariaButtonRemove', {
@@ -35,7 +35,7 @@ const FilterButton: React.FC<Props> = ({ onRemove, text, type, value }) => {
       className={styles.filter}
     >
       {text}
-    </RoundedTag>
+    </Tag>
   );
 };
 
diff --git a/packages/components/src/components/filterButton/__tests__/__snapshots__/FilterButton.test.tsx.snap b/packages/components/src/components/filterButton/__tests__/__snapshots__/FilterButton.test.tsx.snap
index cbe698196..b5189a792 100644
--- a/packages/components/src/components/filterButton/__tests__/__snapshots__/FilterButton.test.tsx.snap
+++ b/packages/components/src/components/filterButton/__tests__/__snapshots__/FilterButton.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`matches snapshot 1`] = `
 <div
-  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 Tag-module_tag-rounded-corners__mCq3C tag_hds-tag--rounded-corners__2KR20 filter"
+  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 filter"
   id="hds-tag"
 >
   <span
-    class="Tag-module_label__zCgFr tag_hds-tag__label__I6mc8"
+    class="Tag-module_label__zCgFr undefined"
     id="hds-tag-label"
   >
     <span
@@ -17,30 +17,24 @@ exports[`matches snapshot 1`] = `
   </span>
   <button
     aria-label="Poista suodatin: text"
-    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz tag_hds-tag__delete-button__33Tgz"
+    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz"
     id="hds-tag-delete-button"
     type="button"
   >
     <svg
       aria-hidden="true"
+      aria-label="cross"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="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"
         fill-rule="evenodd"
-      >
-        <rect
-          height="24"
-          width="24"
-        />
-        <polygon
-          fill="currentColor"
-          points="18 7.5 13.5 12 18 16.5 16.5 18 12 13.5 7.5 18 6 16.5 10.5 12 6 7.5 7.5 6 12 10.5 16.5 6"
-        />
-      </g>
+      />
     </svg>
   </button>
 </div>
diff --git a/packages/components/src/components/filters/__tests__/__snapshots__/AgeFilter.test.tsx.snap b/packages/components/src/components/filters/__tests__/__snapshots__/AgeFilter.test.tsx.snap
index a64dc242e..2462a1a21 100644
--- a/packages/components/src/components/filters/__tests__/__snapshots__/AgeFilter.test.tsx.snap
+++ b/packages/components/src/components/filters/__tests__/__snapshots__/AgeFilter.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`matches snapshot 1`] = `
 <div
-  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 Tag-module_tag-rounded-corners__mCq3C tag_hds-tag--rounded-corners__2KR20 filter"
+  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 filter"
   id="hds-tag"
 >
   <span
-    class="Tag-module_label__zCgFr tag_hds-tag__label__I6mc8"
+    class="Tag-module_label__zCgFr undefined"
     id="hds-tag-label"
   >
     <span
@@ -17,30 +17,24 @@ exports[`matches snapshot 1`] = `
   </span>
   <button
     aria-label="Poista suodatin: 10 v"
-    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz tag_hds-tag__delete-button__33Tgz"
+    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz"
     id="hds-tag-delete-button"
     type="button"
   >
     <svg
       aria-hidden="true"
+      aria-label="cross"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="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"
         fill-rule="evenodd"
-      >
-        <rect
-          height="24"
-          width="24"
-        />
-        <polygon
-          fill="currentColor"
-          points="18 7.5 13.5 12 18 16.5 16.5 18 12 13.5 7.5 18 6 16.5 10.5 12 6 7.5 7.5 6 12 10.5 16.5 6"
-        />
-      </g>
+      />
     </svg>
   </button>
 </div>
diff --git a/packages/components/src/components/filters/__tests__/__snapshots__/DateFilter.test.tsx.snap b/packages/components/src/components/filters/__tests__/__snapshots__/DateFilter.test.tsx.snap
index e34f25a83..63113ccf8 100644
--- a/packages/components/src/components/filters/__tests__/__snapshots__/DateFilter.test.tsx.snap
+++ b/packages/components/src/components/filters/__tests__/__snapshots__/DateFilter.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`matches snapshot 1`] = `
 <div
-  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 Tag-module_tag-rounded-corners__mCq3C tag_hds-tag--rounded-corners__2KR20 filter"
+  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 filter"
   id="hds-tag"
 >
   <span
-    class="Tag-module_label__zCgFr tag_hds-tag__label__I6mc8"
+    class="Tag-module_label__zCgFr undefined"
     id="hds-tag-label"
   >
     <span
@@ -17,30 +17,24 @@ exports[`matches snapshot 1`] = `
   </span>
   <button
     aria-label="Poista suodatin: text"
-    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz tag_hds-tag__delete-button__33Tgz"
+    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz"
     id="hds-tag-delete-button"
     type="button"
   >
     <svg
       aria-hidden="true"
+      aria-label="cross"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="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"
         fill-rule="evenodd"
-      >
-        <rect
-          height="24"
-          width="24"
-        />
-        <polygon
-          fill="currentColor"
-          points="18 7.5 13.5 12 18 16.5 16.5 18 12 13.5 7.5 18 6 16.5 10.5 12 6 7.5 7.5 6 12 10.5 16.5 6"
-        />
-      </g>
+      />
     </svg>
   </button>
 </div>
@@ -48,11 +42,11 @@ exports[`matches snapshot 1`] = `
 
 exports[`matches snapshot 2`] = `
 <div
-  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 Tag-module_tag-rounded-corners__mCq3C tag_hds-tag--rounded-corners__2KR20 filter"
+  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 filter"
   id="hds-tag"
 >
   <span
-    class="Tag-module_label__zCgFr tag_hds-tag__label__I6mc8"
+    class="Tag-module_label__zCgFr undefined"
     id="hds-tag-label"
   >
     <span
@@ -63,30 +57,24 @@ exports[`matches snapshot 2`] = `
   </span>
   <button
     aria-label="Poista suodatin: Some filter text"
-    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz tag_hds-tag__delete-button__33Tgz"
+    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz"
     id="hds-tag-delete-button"
     type="button"
   >
     <svg
       aria-hidden="true"
+      aria-label="cross"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="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"
         fill-rule="evenodd"
-      >
-        <rect
-          height="24"
-          width="24"
-        />
-        <polygon
-          fill="currentColor"
-          points="18 7.5 13.5 12 18 16.5 16.5 18 12 13.5 7.5 18 6 16.5 10.5 12 6 7.5 7.5 6 12 10.5 16.5 6"
-        />
-      </g>
+      />
     </svg>
   </button>
 </div>
diff --git a/packages/components/src/components/filters/__tests__/__snapshots__/PlaceFilter.test.tsx.snap b/packages/components/src/components/filters/__tests__/__snapshots__/PlaceFilter.test.tsx.snap
index f2435e4f0..a634e7ce5 100644
--- a/packages/components/src/components/filters/__tests__/__snapshots__/PlaceFilter.test.tsx.snap
+++ b/packages/components/src/components/filters/__tests__/__snapshots__/PlaceFilter.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`matches snapshot 1`] = `
 <div
-  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 Tag-module_tag-rounded-corners__mCq3C tag_hds-tag--rounded-corners__2KR20 filter"
+  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 filter"
   id="hds-tag"
 >
   <span
-    class="Tag-module_label__zCgFr tag_hds-tag__label__I6mc8"
+    class="Tag-module_label__zCgFr undefined"
     id="hds-tag-label"
   >
     <span
@@ -17,30 +17,24 @@ exports[`matches snapshot 1`] = `
   </span>
   <button
     aria-label="Poista suodatin: Gräsan taitojen talo"
-    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz tag_hds-tag__delete-button__33Tgz"
+    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz"
     id="hds-tag-delete-button"
     type="button"
   >
     <svg
       aria-hidden="true"
+      aria-label="cross"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="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"
         fill-rule="evenodd"
-      >
-        <rect
-          height="24"
-          width="24"
-        />
-        <polygon
-          fill="currentColor"
-          points="18 7.5 13.5 12 18 16.5 16.5 18 12 13.5 7.5 18 6 16.5 10.5 12 6 7.5 7.5 6 12 10.5 16.5 6"
-        />
-      </g>
+      />
     </svg>
   </button>
 </div>
diff --git a/packages/components/src/components/filters/__tests__/__snapshots__/PublisherFilter.test.tsx.snap b/packages/components/src/components/filters/__tests__/__snapshots__/PublisherFilter.test.tsx.snap
index 98e258106..f91aac18d 100644
--- a/packages/components/src/components/filters/__tests__/__snapshots__/PublisherFilter.test.tsx.snap
+++ b/packages/components/src/components/filters/__tests__/__snapshots__/PublisherFilter.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`matches snapshot 1`] = `
 <div
-  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 Tag-module_tag-rounded-corners__mCq3C tag_hds-tag--rounded-corners__2KR20 filter"
+  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 filter"
   id="hds-tag"
 >
   <span
-    class="Tag-module_label__zCgFr tag_hds-tag__label__I6mc8"
+    class="Tag-module_label__zCgFr undefined"
     id="hds-tag-label"
   >
     <span
@@ -17,30 +17,24 @@ exports[`matches snapshot 1`] = `
   </span>
   <button
     aria-label="Poista suodatin: Organization name"
-    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz tag_hds-tag__delete-button__33Tgz"
+    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz"
     id="hds-tag-delete-button"
     type="button"
   >
     <svg
       aria-hidden="true"
+      aria-label="cross"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="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"
         fill-rule="evenodd"
-      >
-        <rect
-          height="24"
-          width="24"
-        />
-        <polygon
-          fill="currentColor"
-          points="18 7.5 13.5 12 18 16.5 16.5 18 12 13.5 7.5 18 6 16.5 10.5 12 6 7.5 7.5 6 12 10.5 16.5 6"
-        />
-      </g>
+      />
     </svg>
   </button>
 </div>
diff --git a/packages/components/src/components/filters/__tests__/__snapshots__/TextFilter.test.tsx.snap b/packages/components/src/components/filters/__tests__/__snapshots__/TextFilter.test.tsx.snap
index cbe698196..b5189a792 100644
--- a/packages/components/src/components/filters/__tests__/__snapshots__/TextFilter.test.tsx.snap
+++ b/packages/components/src/components/filters/__tests__/__snapshots__/TextFilter.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`matches snapshot 1`] = `
 <div
-  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 Tag-module_tag-rounded-corners__mCq3C tag_hds-tag--rounded-corners__2KR20 filter"
+  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 filter"
   id="hds-tag"
 >
   <span
-    class="Tag-module_label__zCgFr tag_hds-tag__label__I6mc8"
+    class="Tag-module_label__zCgFr undefined"
     id="hds-tag-label"
   >
     <span
@@ -17,30 +17,24 @@ exports[`matches snapshot 1`] = `
   </span>
   <button
     aria-label="Poista suodatin: text"
-    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz tag_hds-tag__delete-button__33Tgz"
+    class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz"
     id="hds-tag-delete-button"
     type="button"
   >
     <svg
       aria-hidden="true"
+      aria-label="cross"
       class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill="none"
+      <path
+        clip-rule="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"
         fill-rule="evenodd"
-      >
-        <rect
-          height="24"
-          width="24"
-        />
-        <polygon
-          fill="currentColor"
-          points="18 7.5 13.5 12 18 16.5 16.5 18 12 13.5 7.5 18 6 16.5 10.5 12 6 7.5 7.5 6 12 10.5 16.5 6"
-        />
-      </g>
+      />
     </svg>
   </button>
 </div>
diff --git a/packages/components/src/components/footer/Footer.tsx b/packages/components/src/components/footer/Footer.tsx
index 4d68f257e..7c43c38f5 100644
--- a/packages/components/src/components/footer/Footer.tsx
+++ b/packages/components/src/components/footer/Footer.tsx
@@ -1,9 +1,10 @@
-import { Footer, Link } from 'hds-react';
+import { Footer, Link, Logo, logoFi, logoSv } from 'hds-react';
 import dynamic from 'next/dynamic';
 import type { FunctionComponent } from 'react';
 import type { Menu } from 'react-helsinki-headless-cms';
 import { useMenuQuery } from 'react-helsinki-headless-cms/apollo';
 import { DEFAULT_FOOTER_MENU_NAME } from '../../constants';
+import { useCommonTranslation } from '../../hooks';
 import useFooterTranslation from '../../hooks/useFooterTranslation';
 import useLocale from '../../hooks/useLocale';
 
@@ -33,7 +34,7 @@ const FooterSection: FunctionComponent<FooterSectionProps> = ({
   consentUrl = '/cookie-consent',
 }: FooterSectionProps) => {
   const { t } = useFooterTranslation();
-
+  const { t: commonT } = useCommonTranslation();
   const locale = useLocale();
 
   const { data: footerMenuData } = useMenuQuery({
@@ -60,27 +61,28 @@ const FooterSection: FunctionComponent<FooterSectionProps> = ({
         />
       )}
       <Footer title={appName} className={styles.footer}>
-        <Footer.Utilities
-          backToTopLabel={t('footer:backToTop')}
-          onBackToTopClick={handleBackToTop}
-        ></Footer.Utilities>
         <Footer.Base
           copyrightHolder={t('footer:copyright')}
           copyrightText={t('footer:allRightsReserved')}
+          logo={
+            <Logo
+              src={locale === 'sv' ? logoSv : logoFi}
+              size="medium"
+              alt={commonT('common:cityOfHelsinki')}
+            />
+          }
+          backToTopLabel={t('footer:backToTop')}
+          onBackToTopClick={handleBackToTop}
         >
-          {footerMenu?.menuItems?.nodes?.map(
-            // NOTE: HCRC-build sometimes fails - this type should not be needed.
-            // : Menu['menuItems']['nodes'][number]
-            (navigationItem) => (
-              <Footer.Item
-                className={styles.footerLink}
-                key={navigationItem?.id}
-                as={Link}
-                href={navigationItem?.path || ''}
-                label={navigationItem?.label}
-              />
-            )
-          )}
+          {footerMenu?.menuItems?.nodes?.map((navigationItem) => (
+            <Footer.Link
+              className={styles.footerLink}
+              key={navigationItem?.id}
+              as={Link}
+              href={navigationItem?.path || ''}
+              label={navigationItem?.label ?? undefined}
+            />
+          ))}
         </Footer.Base>
       </Footer>
     </>
diff --git a/packages/components/src/components/keyword/__tests__/__snapshots__/KeywordButton.test.tsx.snap b/packages/components/src/components/keyword/__tests__/__snapshots__/KeywordButton.test.tsx.snap
index 9671abaed..162aa84cf 100644
--- a/packages/components/src/components/keyword/__tests__/__snapshots__/KeywordButton.test.tsx.snap
+++ b/packages/components/src/components/keyword/__tests__/__snapshots__/KeywordButton.test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`matches snapshot 1`] = `
 <div
-  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 Tag-module_tag-rounded-corners__mCq3C tag_hds-tag--rounded-corners__2KR20 tag-module_tag__1QCQs tag-module_withHover__3daxF keyword"
+  class="Tag-module_tag__3bo5S tag_hds-tag__3MKf3 custom-theme-1 tag-module_tag__1QCQs tag-module_withHover__3daxF keyword"
   id="hds-tag"
   role="link"
   tabindex="0"
 >
   <span
-    class="Tag-module_label__zCgFr tag_hds-tag__label__I6mc8"
+    class="Tag-module_label__zCgFr undefined"
     id="hds-tag-label"
   >
     <span>
diff --git a/packages/components/src/components/search/__tests__/__snapshots__/AutoSuggestMenu.test.tsx.snap b/packages/components/src/components/search/__tests__/__snapshots__/AutoSuggestMenu.test.tsx.snap
index f353754b5..40030291d 100644
--- a/packages/components/src/components/search/__tests__/__snapshots__/AutoSuggestMenu.test.tsx.snap
+++ b/packages/components/src/components/search/__tests__/__snapshots__/AutoSuggestMenu.test.tsx.snap
@@ -14,24 +14,18 @@ exports[`AutosuggestMenu matches snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
+        aria-label="cross"
         class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g
-          fill="none"
+        <path
+          clip-rule="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"
           fill-rule="evenodd"
-        >
-          <rect
-            height="24"
-            width="24"
-          />
-          <polygon
-            fill="currentColor"
-            points="18 7.5 13.5 12 18 16.5 16.5 18 12 13.5 7.5 18 6 16.5 10.5 12 6 7.5 7.5 6 12 10.5 16.5 6"
-          />
-        </g>
+        />
       </svg>
     </button>
   </div>
diff --git a/packages/components/src/components/select/__tests__/__snapshots__/SearchSelect.test.tsx.snap b/packages/components/src/components/select/__tests__/__snapshots__/SearchSelect.test.tsx.snap
index caccfda7a..c63894116 100644
--- a/packages/components/src/components/select/__tests__/__snapshots__/SearchSelect.test.tsx.snap
+++ b/packages/components/src/components/select/__tests__/__snapshots__/SearchSelect.test.tsx.snap
@@ -31,23 +31,18 @@ exports[`SearchSelect renders properly 1`] = `
         </span>
         <svg
           aria-hidden="true"
+          aria-label="angle-down"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Select-module_angleIcon__2-9AD"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <path
-              d="M0 0h24v24H0z"
-            />
-            <path
-              d="M12 13.5l5-5 1.5 1.5-6.5 6.5L5.5 10 7 8.5z"
-              fill="currentColor"
-            />
-          </g>
+          />
         </svg>
       </button>
       <ul
diff --git a/packages/components/src/constants/constants.ts b/packages/components/src/constants/constants.ts
index 4328f483b..7e971353b 100644
--- a/packages/components/src/constants/constants.ts
+++ b/packages/components/src/constants/constants.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { Language, LanguageCodeEnum } from '../types/generated/graphql';
-import type { AppLanguage } from '../types/types';
+import { LanguageCodeEnum } from '../types';
+import type { Language, AppLanguage } from '../types';
 
 export const MAIN_CONTENT_ID = 'main-content';
 
@@ -30,6 +30,12 @@ export const EVENT_STATUS = {
  */
 export const APP_LANGUAGES = ['en', 'fi', 'sv'] as const;
 
+export const APP_LANGUAGE_LABELS: Record<AppLanguage, string> = {
+  en: 'English',
+  fi: 'Suomi',
+  sv: 'Svenska',
+} as const;
+
 export const DEFAULT_LANGUAGE: AppLanguage = 'fi';
 
 export enum DATE_PICKER_INPUT {
@@ -83,13 +89,13 @@ export const DEFAULT_FOOTER_MENU_NAME: Record<AppLanguage, string> = {
  * because the network error in the Apollo client is
  * usually the reason to show the error page.
  */
-export const HARDCODED_LANGUAGES = [
+export const HARDCODED_LANGUAGES: Language[] = [
   {
     __typename: 'Language',
     id: 'TGFuZ3VhZ2U6Zmk=',
     locale: 'fi',
     name: 'Suomi',
-    code: 'FI' as LanguageCodeEnum,
+    code: LanguageCodeEnum.Fi,
     slug: 'fi',
   },
   {
@@ -97,7 +103,7 @@ export const HARDCODED_LANGUAGES = [
     id: 'TGFuZ3VhZ2U6ZW4=',
     locale: 'en',
     name: 'English',
-    code: 'EN' as LanguageCodeEnum,
+    code: LanguageCodeEnum.En,
     slug: 'en',
   },
   {
@@ -105,7 +111,7 @@ export const HARDCODED_LANGUAGES = [
     id: 'TGFuZ3VhZ2U6c3Y=',
     locale: 'sv',
     name: 'Svenska',
-    code: 'SV' as LanguageCodeEnum,
+    code: LanguageCodeEnum.Sv,
     slug: 'sv',
   },
-] as Language[];
+];
diff --git a/packages/components/src/types/generated/graphql.tsx b/packages/components/src/types/generated/graphql.tsx
index a10d88a8d..849676653 100644
--- a/packages/components/src/types/generated/graphql.tsx
+++ b/packages/components/src/types/generated/graphql.tsx
@@ -4803,9 +4803,9 @@ export enum MediaItemSizeEnum {
   /** MediaItem with the thumbnail size */
   Thumbnail = 'THUMBNAIL',
   /** MediaItem with the 1536x1536 size */
-  '1536X1536' = '_1536X1536',
+  _1536X1536 = '_1536X1536',
   /** MediaItem with the 2048x2048 size */
-  '2048X2048' = '_2048X2048',
+  _2048X2048 = '_2048X2048',
 }
 
 /** The status of the media item object. */
diff --git a/yarn.lock b/yarn.lock
index 5368fed12..10e30fdc5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2232,7 +2232,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.22.5
   resolution: "@babel/runtime@npm:7.22.5"
   dependencies:
@@ -3228,6 +3228,7 @@ __metadata:
     "@events-helsinki/common-tests": "workspace:^"
     "@events-helsinki/eslint-config-bases": "workspace:^"
     "@faker-js/faker": "npm:^8.0.2"
+    "@graphql-codegen/cli": "npm:4.0.1"
     "@jonkoops/matomo-tracker-react": "npm:0.7.0"
     "@mdx-js/react": "npm:1.6.22"
     "@react-leaflet/core": "npm:2.1.0"
@@ -3277,11 +3278,13 @@ __metadata:
     babel-plugin-macros: "npm:3.1.0"
     babel-plugin-polyfill-corejs3: "npm:0.8.1"
     chalk: "npm:4.1.2"
+    change-case-all: "npm:1.0.15"
     classnames: "npm:^2.3.2"
     copy-to-clipboard: "npm:^3.3.3"
     core-js: "npm:3.31.0"
     cross-env: "npm:7.0.3"
     cross-fetch: "npm:^3.1.6"
+    crypto-browserify: "npm:3.12.0"
     csstype: "npm:3.1.2"
     date-fns: "npm:^2.30.0"
     date-fns-tz: "npm:^2.0.0"
@@ -3293,8 +3296,8 @@ __metadata:
     file-saver: "npm:^2.0.5"
     graphql: "npm:16.7.1"
     happy-dom: "npm:9.20.3"
-    hds-design-tokens: "npm:2.15.0"
-    hds-react: "npm:2.15.0"
+    hds-design-tokens: "npm:3.1.0"
+    hds-react: "npm:3.1.0"
     html-react-parser: "npm:4.0.0"
     https: "npm:1.0.0"
     i18next: "npm:23.2.3"
@@ -3325,7 +3328,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha224"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha229"
     react-i18next: "npm:13.0.1"
     react-leaflet: "npm:4.2.1"
     react-toastify: "npm:^9.1.3"
@@ -5336,57 +5339,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-aria/interactions@npm:^3.2.0":
-  version: 3.15.0
-  resolution: "@react-aria/interactions@npm:3.15.0"
+"@react-aria/interactions@npm:^3.15.0":
+  version: 3.19.1
+  resolution: "@react-aria/interactions@npm:3.19.1"
   dependencies:
-    "@react-aria/ssr": "npm:^3.6.0"
-    "@react-aria/utils": "npm:^3.16.0"
-    "@react-types/shared": "npm:^3.18.0"
-    "@swc/helpers": "npm:^0.4.14"
+    "@react-aria/ssr": "npm:^3.8.0"
+    "@react-aria/utils": "npm:^3.21.1"
+    "@react-types/shared": "npm:^3.21.0"
+    "@swc/helpers": "npm:^0.5.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: f22f5e7250649affdfc1fb78ee9f6f4b8605c301d76c7eaf6e9e1168c79fe79bbbed6b6513691094097208a90a849b4ab590f1f4371e16ee2d14899856015a94
+  checksum: d5b6cf79231041366d2341700202da6ff820773c5aed5b51a5522165a90a0d321d23cab5862517f0805e0ee2554013336842d1ff7317bd21babc110bc5060fa8
   languageName: node
   linkType: hard
 
-"@react-aria/ssr@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "@react-aria/ssr@npm:3.6.0"
+"@react-aria/ssr@npm:^3.8.0":
+  version: 3.8.0
+  resolution: "@react-aria/ssr@npm:3.8.0"
   dependencies:
-    "@swc/helpers": "npm:^0.4.14"
+    "@swc/helpers": "npm:^0.5.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 3b8d3933d9f5f9e16a5b448b753c033146ff342f8cacc09db4e2a89458dce6d3a95f91769921f3932de983d5f64db10ece560f806d02a6667abd02dbd9e5ab26
+  checksum: 9349dad94dd90e40f2d139b5ce8541350b2e157918d9f04cc775af11038c2c4fd181d929396266aca19ec4b5afdf6da7ca1f1db67b4687ac75ba6e2ad816b3cd
   languageName: node
   linkType: hard
 
-"@react-aria/utils@npm:^3.16.0, @react-aria/utils@npm:^3.2.0":
-  version: 3.16.0
-  resolution: "@react-aria/utils@npm:3.16.0"
+"@react-aria/utils@npm:^3.16.0, @react-aria/utils@npm:^3.21.1":
+  version: 3.21.1
+  resolution: "@react-aria/utils@npm:3.21.1"
   dependencies:
-    "@react-aria/ssr": "npm:^3.6.0"
-    "@react-stately/utils": "npm:^3.6.0"
-    "@react-types/shared": "npm:^3.18.0"
-    "@swc/helpers": "npm:^0.4.14"
+    "@react-aria/ssr": "npm:^3.8.0"
+    "@react-stately/utils": "npm:^3.8.0"
+    "@react-types/shared": "npm:^3.21.0"
+    "@swc/helpers": "npm:^0.5.0"
     clsx: "npm:^1.1.1"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 437f2a4042752f9f5873dfb6d923671ebdcde7a99a64109febbf0f5157820ac32b8b3fdd964ac32f66ee852905b4a3ac46803f85116da0c3a9b20e983bcd604f
+  checksum: 7225137e56af85199df35338f56dffb6713b2d9cd27877650cb8af9495e6b4d1bb8a9dcc76b887373bd9954a358c50b8a2f951ec8a2c9baa5f73756897d496eb
   languageName: node
   linkType: hard
 
-"@react-aria/visually-hidden@npm:3.2.0":
-  version: 3.2.0
-  resolution: "@react-aria/visually-hidden@npm:3.2.0"
+"@react-aria/visually-hidden@npm:3.8.0":
+  version: 3.8.0
+  resolution: "@react-aria/visually-hidden@npm:3.8.0"
   dependencies:
-    "@babel/runtime": "npm:^7.6.2"
-    "@react-aria/interactions": "npm:^3.2.0"
-    "@react-aria/utils": "npm:^3.2.0"
+    "@react-aria/interactions": "npm:^3.15.0"
+    "@react-aria/utils": "npm:^3.16.0"
+    "@react-types/shared": "npm:^3.18.0"
+    "@swc/helpers": "npm:^0.4.14"
     clsx: "npm:^1.1.1"
   peerDependencies:
-    react: ^16.8.0
-  checksum: 9499a63949a7bc3ffeab7928d2e64c6e59d4828a43b35b8fb297e8a9fff78b520cd0ac84678a6397eb3d57abf8ec1aeb8be6106ba7919ca9a56e56fd13daaa1a
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b8e0f990488bc29cfbc1ff45731bae0ac11c91d9ed38304c4923fbd05c2c3a5c873db5a42e9d0b1cfd21ee77a8ff6c02be1c634999ad0d4533fa525e7006fc4a
   languageName: node
   linkType: hard
 
@@ -5531,23 +5535,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-stately/utils@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "@react-stately/utils@npm:3.6.0"
+"@react-stately/utils@npm:^3.8.0":
+  version: 3.8.0
+  resolution: "@react-stately/utils@npm:3.8.0"
   dependencies:
-    "@swc/helpers": "npm:^0.4.14"
+    "@swc/helpers": "npm:^0.5.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 395f451198065acee895e9b4cb2096618c3d1d7c2bb49bd4d45651f8c68567c54fc404b7031194ba01e10c3f286ce00d7eba8e448e74f5d7984d58afc5638869
+  checksum: acd55f85f281273c6736012e22dc9170cb8e5492956efe5c0f1e38659f4a4252df1d737754ba9fc3097208dbb08b8ab87f6db1abc91767ea3849be2d9df31936
   languageName: node
   linkType: hard
 
-"@react-types/shared@npm:^3.18.0":
-  version: 3.18.0
-  resolution: "@react-types/shared@npm:3.18.0"
+"@react-types/shared@npm:^3.18.0, @react-types/shared@npm:^3.21.0":
+  version: 3.21.0
+  resolution: "@react-types/shared@npm:3.21.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 6e5a14128b8cff0046376e69e5edb650493fd164c75754859edacbe1a98e733233f5034a925ded8520da6b3be107db8da515cf0c6eba9fdd6bfe751986b92a89
+  checksum: 10a9694e13370627a945b374378cce1795f11455d80f06a115796acb77f5e3043f23b9566dc4bbf35bbbb2e7c25a7dd39ee64ca5aeb16a044835ea9dd7b1340f
   languageName: node
   linkType: hard
 
@@ -7373,6 +7377,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/helpers@npm:^0.5.0":
+  version: 0.5.3
+  resolution: "@swc/helpers@npm:0.5.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 5276f8ec251fe9c9919474045763bef8aae23620d880fc444c1f18c3ef1f8cd118357154315c43cb6c9e7dffd6f7d5baabd9cbeaa30c818efc91b93a427a11c1
+  languageName: node
+  linkType: hard
+
 "@swc/jest@npm:0.2.26":
   version: 0.2.26
   resolution: "@swc/jest@npm:0.2.26"
@@ -9417,6 +9430,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"asn1.js@npm:^5.2.0":
+  version: 5.4.1
+  resolution: "asn1.js@npm:5.4.1"
+  dependencies:
+    bn.js: "npm:^4.0.0"
+    inherits: "npm:^2.0.1"
+    minimalistic-assert: "npm:^1.0.0"
+    safer-buffer: "npm:^2.1.0"
+  checksum: 5c36f81388e344c9417866bd20acd2d4164d2bc2827d4fd0e35714f8701a249b9c6118c70720758fe710a4723d65699c5be1e827f89e9eff1dbd1bfe910300fd
+  languageName: node
+  linkType: hard
+
 "asn1js@npm:^3.0.1, asn1js@npm:^3.0.5":
   version: 3.0.5
   resolution: "asn1js@npm:3.0.5"
@@ -9589,6 +9614,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"await-to-js@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "await-to-js@npm:3.0.0"
+  checksum: 52f33dc28ec39498dc493886240c45cacd4c357300aa122f9356b8801d03b44b07aeafdfa6030729fcba4962cb1bc209c4446a96550f8f269930969532033d18
+  languageName: node
+  linkType: hard
+
 "axe-core@npm:4.5.1":
   version: 4.5.1
   resolution: "axe-core@npm:4.5.1"
@@ -10001,6 +10033,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bn.js@npm:^4.0.0, bn.js@npm:^4.1.0, bn.js@npm:^4.11.9":
+  version: 4.12.0
+  resolution: "bn.js@npm:4.12.0"
+  checksum: bfb4590775a29dad10c8d42da5ba7fca9d4f796f6d278cb27f53c6a6272df5e58a3ca58d879487c9584db9e7a8f73ac843117183bebea2d627c1f0db95848ec8
+  languageName: node
+  linkType: hard
+
+"bn.js@npm:^5.0.0, bn.js@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "bn.js@npm:5.2.1"
+  checksum: 0c272b6eeda35a4d2a3bcf5f0cae54080eb876f5aa10789f67322ad891a27dc99f179b4362e1b5fc2e42c408fd8e0014afed4fdf30e4f346561302ea588fd095
+  languageName: node
+  linkType: hard
+
 "body-parser@npm:1.20.1":
   version: 1.20.1
   resolution: "body-parser@npm:1.20.1"
@@ -10099,6 +10145,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"brorand@npm:^1.0.1, brorand@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "brorand@npm:1.1.0"
+  checksum: f736e127fbac2d704b0b55935c297ec261112b93a178e15170da19c17500d448ebacff3b1edb075821363e8daecc739c062b40e920aa19b8cbed7f4fbe1ff6aa
+  languageName: node
+  linkType: hard
+
 "brotli-size@npm:^4.0.0":
   version: 4.0.0
   resolution: "brotli-size@npm:4.0.0"
@@ -10115,6 +10168,70 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserify-aes@npm:^1.0.0, browserify-aes@npm:^1.0.4":
+  version: 1.2.0
+  resolution: "browserify-aes@npm:1.2.0"
+  dependencies:
+    buffer-xor: "npm:^1.0.3"
+    cipher-base: "npm:^1.0.0"
+    create-hash: "npm:^1.1.0"
+    evp_bytestokey: "npm:^1.0.3"
+    inherits: "npm:^2.0.1"
+    safe-buffer: "npm:^5.0.1"
+  checksum: 20e57fc05ef1e4a1c7b1021a38d8497908a0bc59d224277bbb25af90de579bf15ef6cf9fb773af04dc67c9d5255df839a5029d79a30744c8bac0f7bc569de86e
+  languageName: node
+  linkType: hard
+
+"browserify-cipher@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "browserify-cipher@npm:1.0.1"
+  dependencies:
+    browserify-aes: "npm:^1.0.4"
+    browserify-des: "npm:^1.0.0"
+    evp_bytestokey: "npm:^1.0.0"
+  checksum: 6b18df4d19c85a24b4f5c603a7bd15ced0104fbaec70d59f5d4a96419769d0a8ed56d081e2b117a6615b27c170e3fa0b3489f684e8d8bd1e94ffabafeda57d28
+  languageName: node
+  linkType: hard
+
+"browserify-des@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "browserify-des@npm:1.0.2"
+  dependencies:
+    cipher-base: "npm:^1.0.1"
+    des.js: "npm:^1.0.0"
+    inherits: "npm:^2.0.1"
+    safe-buffer: "npm:^5.1.2"
+  checksum: 806b7373e09a5d862a0f7eeb589db4071f1636f9fca8857081acf5b87a3b39cdf3a064954a7b578be8b141a7d583364dbd0d3105dcb80f91495dff90e4cf5f76
+  languageName: node
+  linkType: hard
+
+"browserify-rsa@npm:^4.0.0, browserify-rsa@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "browserify-rsa@npm:4.1.0"
+  dependencies:
+    bn.js: "npm:^5.0.0"
+    randombytes: "npm:^2.0.1"
+  checksum: 26189fb42954a20c9f3d396d539736decc3400d179d773f701da4373057e8af03662e07f876d0211360c87b3cf3ee1e8996ca1f39e6c28c959a4faa23a60e40e
+  languageName: node
+  linkType: hard
+
+"browserify-sign@npm:^4.0.0":
+  version: 4.2.2
+  resolution: "browserify-sign@npm:4.2.2"
+  dependencies:
+    bn.js: "npm:^5.2.1"
+    browserify-rsa: "npm:^4.1.0"
+    create-hash: "npm:^1.2.0"
+    create-hmac: "npm:^1.1.7"
+    elliptic: "npm:^6.5.4"
+    inherits: "npm:^2.0.4"
+    parse-asn1: "npm:^5.1.6"
+    readable-stream: "npm:^3.6.2"
+    safe-buffer: "npm:^5.2.1"
+  checksum: 177dfcb76dfc1488e84328ab61147ab8c6e0db4af770d17447c3e085d716133048d8cb0fb10f7b05bb5152b47c23aae7bb906561b6c0ce468f9ab1b0acc35f94
+  languageName: node
+  linkType: hard
+
 "browserify-zlib@npm:^0.1.4":
   version: 0.1.4
   resolution: "browserify-zlib@npm:0.1.4"
@@ -10188,6 +10305,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"buffer-xor@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "buffer-xor@npm:1.0.3"
+  checksum: 057a5740571719edffcb209fbc5842150624b5a3d1ee427f569a85dc5785643e92870fe2506d7812b9125ce8be64e5a295450ae215a678657a738f06044a6adf
+  languageName: node
+  linkType: hard
+
 "buffer@npm:^5.5.0":
   version: 5.7.1
   resolution: "buffer@npm:5.7.1"
@@ -10708,6 +10832,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cipher-base@npm:^1.0.0, cipher-base@npm:^1.0.1, cipher-base@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "cipher-base@npm:1.0.4"
+  dependencies:
+    inherits: "npm:^2.0.1"
+    safe-buffer: "npm:^5.0.1"
+  checksum: 172fced8856f309407e10e2d6dbf0e31a67047267ec1d9ee62f595ab7edfe8e64734434799af09fa1f64f9908f272cdc623a2c2e26de525646c1beee6c263ab9
+  languageName: node
+  linkType: hard
+
 "cjs-module-lexer@npm:^1.0.0":
   version: 1.2.2
   resolution: "cjs-module-lexer@npm:1.2.2"
@@ -11392,6 +11526,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"create-ecdh@npm:^4.0.0":
+  version: 4.0.4
+  resolution: "create-ecdh@npm:4.0.4"
+  dependencies:
+    bn.js: "npm:^4.1.0"
+    elliptic: "npm:^6.5.3"
+  checksum: 9d6564526a4f7832163b0f3dc40c88ad4b0f2fb68ac3f3f9eb4ebe38b2d73b187ed18f59417fdf31a9b2d7851791632a60c6bd1f024480a4a11668a13b6517ec
+  languageName: node
+  linkType: hard
+
+"create-hash@npm:^1.1.0, create-hash@npm:^1.1.2, create-hash@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "create-hash@npm:1.2.0"
+  dependencies:
+    cipher-base: "npm:^1.0.1"
+    inherits: "npm:^2.0.1"
+    md5.js: "npm:^1.3.4"
+    ripemd160: "npm:^2.0.1"
+    sha.js: "npm:^2.4.0"
+  checksum: a5d13f75066993de16f734b54158594295a9c10643b941e3f2e3bbe72905d716059fd37b05bbfb63b4165a6d6124f204b5a0e4b54b88adf2e03750977c7ca6fd
+  languageName: node
+  linkType: hard
+
+"create-hmac@npm:^1.1.0, create-hmac@npm:^1.1.4, create-hmac@npm:^1.1.7":
+  version: 1.1.7
+  resolution: "create-hmac@npm:1.1.7"
+  dependencies:
+    cipher-base: "npm:^1.0.3"
+    create-hash: "npm:^1.1.0"
+    inherits: "npm:^2.0.1"
+    ripemd160: "npm:^2.0.0"
+    safe-buffer: "npm:^5.0.1"
+    sha.js: "npm:^2.4.8"
+  checksum: 391ca2ff28117042086e16e9343f3ad62c7c2d18221d76d838d3d31e678fa33838c3cda2a645c5189ccf104ca1e35d57aa19e4c5c653ff2c82db8b095851d7f3
+  languageName: node
+  linkType: hard
+
 "create-require@npm:^1.1.0":
   version: 1.1.1
   resolution: "create-require@npm:1.1.1"
@@ -11453,6 +11624,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crypto-browserify@npm:3.12.0":
+  version: 3.12.0
+  resolution: "crypto-browserify@npm:3.12.0"
+  dependencies:
+    browserify-cipher: "npm:^1.0.0"
+    browserify-sign: "npm:^4.0.0"
+    create-ecdh: "npm:^4.0.0"
+    create-hash: "npm:^1.1.0"
+    create-hmac: "npm:^1.1.0"
+    diffie-hellman: "npm:^5.0.0"
+    inherits: "npm:^2.0.1"
+    pbkdf2: "npm:^3.0.3"
+    public-encrypt: "npm:^4.0.0"
+    randombytes: "npm:^2.0.0"
+    randomfill: "npm:^1.0.3"
+  checksum: 919c1dc2ef93ca4739e8267895034a1fc825fe1cb19d322cb035580ad43098d874b77013dc221e2cf5fe76805092d09bbf5ae839e94055dc61af692fd99d5e7c
+  languageName: node
+  linkType: hard
+
+"crypto-js@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "crypto-js@npm:4.2.0"
+  checksum: f96db579ef2d7ed58762910509ee9b4dea44cccb71e661e35e64b35cf0dcf411680ddf600ce6557ad35356f0bcc9d755bbd11436e82fd38dea2cf1adca956453
+  languageName: node
+  linkType: hard
+
 "crypto-md5@npm:^1.0.0":
   version: 1.0.0
   resolution: "crypto-md5@npm:1.0.0"
@@ -12152,13 +12349,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"des.js@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "des.js@npm:1.0.1"
+"des.js@npm:^1.0.0, des.js@npm:^1.0.1":
+  version: 1.1.0
+  resolution: "des.js@npm:1.1.0"
   dependencies:
     inherits: "npm:^2.0.1"
     minimalistic-assert: "npm:^1.0.0"
-  checksum: db332d75d1ac2085378ff84c9c12ccb2705aeda0f5e6253bb85f3b6e6235682d11231f83e485a12ef2f1c2dee8680289ec930d2b3efdc796750d30967fdd7d9d
+  checksum: 335cc347134955ab82c5c817e387f864378626541f89c148a836396be1c12475032f4da47430ff6930e14488c6ddfbf8efc7709fafda5e968943f3fbefd3f9f0
   languageName: node
   linkType: hard
 
@@ -12233,6 +12430,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diffie-hellman@npm:^5.0.0":
+  version: 5.0.3
+  resolution: "diffie-hellman@npm:5.0.3"
+  dependencies:
+    bn.js: "npm:^4.1.0"
+    miller-rabin: "npm:^4.0.0"
+    randombytes: "npm:^2.0.0"
+  checksum: e8fa8362bfe35862da10d9d9775c38ac769fe9c7c70248c641efbd4efca9f2b26af4eee21cbdc0fa197066eca0b932b798fc67bf027541c2a739d4c4d9569b01
+  languageName: node
+  linkType: hard
+
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -12520,6 +12728,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"elliptic@npm:^6.5.3, elliptic@npm:^6.5.4":
+  version: 6.5.4
+  resolution: "elliptic@npm:6.5.4"
+  dependencies:
+    bn.js: "npm:^4.11.9"
+    brorand: "npm:^1.1.0"
+    hash.js: "npm:^1.0.0"
+    hmac-drbg: "npm:^1.0.1"
+    inherits: "npm:^2.0.4"
+    minimalistic-assert: "npm:^1.0.1"
+    minimalistic-crypto-utils: "npm:^1.0.1"
+  checksum: 4453b008cf9e741a87f8e1935398c10124291026e7f2b99a512205a645c59586deaeefbb1e7149574481ec2c4cc7f34efc6ae6ae5bc35a94431be71c0375367e
+  languageName: node
+  linkType: hard
+
 "email-validator@npm:^2.0.4":
   version: 2.0.4
   resolution: "email-validator@npm:2.0.4"
@@ -13600,6 +13823,7 @@ __metadata:
     "@typescript-eslint/parser": "npm:^5.60.1"
     babel-eslint: "npm:^10.1.0"
     babel-jest: "npm:^29.5.0"
+    change-case-all: "npm:1.0.15"
     classnames: "npm:^2.3.2"
     copy-to-clipboard: "npm:^3.3.3"
     cross-env: "npm:7.0.3"
@@ -13627,7 +13851,7 @@ __metadata:
     file-saver: "npm:^2.0.5"
     graphql: "npm:16.7.1"
     graphql-tag: "npm:2.12.6"
-    hds-react: "npm:2.15.0"
+    hds-react: "npm:3.1.0"
     history: "npm:^5.3.0"
     husky: "npm:^8.0.3"
     i18next: "npm:23.2.3"
@@ -13656,7 +13880,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha224"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha229"
     react-i18next: "npm:13.0.1"
     react-scroll: "npm:^1.8.9"
     react-toastify: "npm:^9.1.3"
@@ -13698,6 +13922,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"evp_bytestokey@npm:^1.0.0, evp_bytestokey@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "evp_bytestokey@npm:1.0.3"
+  dependencies:
+    md5.js: "npm:^1.3.4"
+    node-gyp: "npm:latest"
+    safe-buffer: "npm:^5.1.1"
+  checksum: 9422e1f77eb9507d587d94390108d5ab0c0e10189adca0164b88dd8a22821fd8eda74b4299b9faf40cd6578992a8e66a3db581ac7d02be3635d8048d08724670
+  languageName: node
+  linkType: hard
+
 "execa@npm:^3.3.0":
   version: 3.4.0
   resolution: "execa@npm:3.4.0"
@@ -15231,6 +15466,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hash-base@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "hash-base@npm:3.1.0"
+  dependencies:
+    inherits: "npm:^2.0.4"
+    readable-stream: "npm:^3.6.0"
+    safe-buffer: "npm:^5.2.0"
+  checksum: 31109e871639384b20dcd804d4a82e20008b01d1c96eaf285f70fda42df650970c008da1d3c5d898211bdc84d792c2a6f8075ce931b2fc305defcbb7b4fa27f3
+  languageName: node
+  linkType: hard
+
+"hash.js@npm:^1.0.0, hash.js@npm:^1.0.3":
+  version: 1.1.7
+  resolution: "hash.js@npm:1.1.7"
+  dependencies:
+    inherits: "npm:^2.0.3"
+    minimalistic-assert: "npm:^1.0.1"
+  checksum: e4266370d194fd31ed7bb51f5a943cf4e3b361321ea19a0dfcaab2e21400c3e581d8dec897364ed4530845c2c1b58d44dd6a9b3682cfd5ec02d0ce7bc802f1db
+  languageName: node
+  linkType: hard
+
 "hast-util-parse-selector@npm:^2.0.0":
   version: 2.2.5
   resolution: "hast-util-parse-selector@npm:2.2.5"
@@ -15251,52 +15507,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hds-core@npm:2.15.0":
-  version: 2.15.0
-  resolution: "hds-core@npm:2.15.0"
-  checksum: 1d7597b243adf75bad285ceae69790892e7b951437dfe43e7ceef6288dff036336b60c8fdf4c84108149307ba8b3426da700d199f409f3f92d81ad9d0303c7d0
-  languageName: node
-  linkType: hard
-
-"hds-core@npm:^2.17.0":
-  version: 2.17.0
-  resolution: "hds-core@npm:2.17.0"
-  checksum: 4a7c862920d8d4ae6b9e9a383e3add3c5df6b88181c5af33ba5921353c4c78d5abd7b3aa9ad3df4f8a7e9296ac7e5625e56552656681848ee1e427d01a05ca3b
-  languageName: node
-  linkType: hard
-
-"hds-design-tokens@npm:2.15.0":
-  version: 2.15.0
-  resolution: "hds-design-tokens@npm:2.15.0"
-  checksum: ee5a3a599a8d549746a24a4de2b6a047db4ea8fd7e220562c17312aa5f3faea07f29e0852dfbb088f549febdf9c41136c83eb32c61b2be47cc65dfd62432dcf8
+"hds-core@npm:3.1.0, hds-core@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "hds-core@npm:3.1.0"
+  checksum: 6c39dfd412d3687e4186e0c53643e0b7cb14f689e3bf6562fcd2481bfa6938b222c48dd6bbbd99ecf5737ebd1211d46ebbc999a06fbba47a387079931704571e
   languageName: node
   linkType: hard
 
-"hds-design-tokens@npm:^2.17.0":
-  version: 2.17.0
-  resolution: "hds-design-tokens@npm:2.17.0"
-  checksum: 7907f7913f3ebc20b5adda1e8a90407a2d9571509a711faa50a5ac03153786b9eb59108a582e1e2cec1d2f2d2d51745ba5b0203750944817cdc8067bd784eaba
+"hds-design-tokens@npm:3.1.0, hds-design-tokens@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "hds-design-tokens@npm:3.1.0"
+  checksum: 483c3212edaf3b96774a70fe5ebe24139f6a22ff52f3d030447cf523c66513b736768860dc3c267a457744a3b210364b6bebd4caf8b2a006d8b2eeca5776aa30
   languageName: node
   linkType: hard
 
-"hds-react@npm:2.15.0":
-  version: 2.15.0
-  resolution: "hds-react@npm:2.15.0"
+"hds-react@npm:3.1.0":
+  version: 3.1.0
+  resolution: "hds-react@npm:3.1.0"
   dependencies:
     "@babel/runtime": "npm:7.17.9"
     "@emotion/styled-base": "npm:^11.0.0"
     "@hookform/resolvers": "npm:^2.9.11"
     "@juggle/resize-observer": "npm:3.2.0"
     "@popperjs/core": "npm:2.11.5"
-    "@react-aria/visually-hidden": "npm:3.2.0"
+    "@react-aria/visually-hidden": "npm:3.8.0"
     "@types/cookie": "npm:^0.4.1"
     "@typescript-eslint/parser": "npm:^5.56.0"
+    await-to-js: "npm:^3.0.0"
     cookie: "npm:^0.4.1"
     crc-32: "npm:1.2.0"
     date-fns: "npm:2.16.1"
     downshift: "npm:6.0.6"
-    hds-core: "npm:2.15.0"
+    hds-core: "npm:3.1.0"
+    http-status-typed: "npm:^1.0.1"
+    jwt-decode: "npm:^3.1.2"
     kashe: "npm:1.0.4"
+    lodash.flatten: "npm:^4.4.0"
     lodash.get: "npm:^4.4.2"
     lodash.isequal: "npm:4.5.0"
     lodash.isfunction: "npm:3.0.9"
@@ -15308,6 +15554,7 @@ __metadata:
     lodash.uniqueid: "npm:4.0.1"
     lodash.xor: "npm:^4.5.0"
     memoize-one: "npm:5.2.1"
+    oidc-client-ts: "npm:^2.2.2"
     react-hook-form: "npm:^7.43.3"
     react-merge-refs: "npm:1.1.0"
     react-popper: "npm:2.2.5"
@@ -15320,7 +15567,7 @@ __metadata:
     postcss: ^8.4.21
     react: ^16.8.0 || ^17
     react-dom: ^16.8.0 || ^17
-  checksum: c130c0b12f9ee8904a28bfef204f094a8525f893a1bb35f650e8a27471913643ea57a2f01d8f2cc78b3fbf6f69f73cf584d1d8f2a857ece6cba306a875ef711a
+  checksum: 2c74e5885695088f20ac239c268921bf8f435777a5eff8d414d7b5aa6487db06b7f3084cd69e1dddc17f3118bcc46fe1ef31cae64a1b42db1718a3388bc7880e
   languageName: node
   linkType: hard
 
@@ -15384,6 +15631,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hmac-drbg@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "hmac-drbg@npm:1.0.1"
+  dependencies:
+    hash.js: "npm:^1.0.3"
+    minimalistic-assert: "npm:^1.0.0"
+    minimalistic-crypto-utils: "npm:^1.0.1"
+  checksum: 4e88d58ffc03e027990bbc31c0aa7b90dc4d2b3642ac3a8f3b71e3c43eb03416179ac601f36417312f0375cc382a9e39d80ade1ae239aff188701162bc84226d
+  languageName: node
+  linkType: hard
+
 "hobbies-helsinki@workspace:apps/hobbies-helsinki":
   version: 0.0.0-use.local
   resolution: "hobbies-helsinki@workspace:apps/hobbies-helsinki"
@@ -15433,6 +15691,7 @@ __metadata:
     "@typescript-eslint/parser": "npm:^5.60.1"
     babel-eslint: "npm:^10.1.0"
     babel-jest: "npm:^29.5.0"
+    change-case-all: "npm:1.0.15"
     classnames: "npm:^2.3.2"
     copy-to-clipboard: "npm:^3.3.3"
     cross-env: "npm:7.0.3"
@@ -15460,7 +15719,7 @@ __metadata:
     file-saver: "npm:^2.0.5"
     graphql: "npm:16.7.1"
     graphql-tag: "npm:2.12.6"
-    hds-react: "npm:2.15.0"
+    hds-react: "npm:3.1.0"
     history: "npm:^5.3.0"
     husky: "npm:^8.0.3"
     i18next: "npm:23.2.3"
@@ -15489,7 +15748,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha224"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha229"
     react-i18next: "npm:13.0.1"
     react-scroll: "npm:^1.8.9"
     react-toastify: "npm:^9.1.3"
@@ -15726,6 +15985,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"http-status-typed@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "http-status-typed@npm:1.0.1"
+  checksum: a61d505a7ebb82cfa6b16b768fde986939eb5d185ccd676a2ace644f304b9d6a722b35070548b84f3cae0e870ffab4aef5a4a5a14507895f0646c928e51afd96
+  languageName: node
+  linkType: hard
+
 "httpntlm@npm:^1.8.10":
   version: 1.8.12
   resolution: "httpntlm@npm:1.8.12"
@@ -17892,6 +18158,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jwt-decode@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "jwt-decode@npm:3.1.2"
+  checksum: b3258357db379db40da7bc5987d5224b3b1f3dfb36116b506c026cdb642e15b448e4547bedf314a249f0bafb63af062c281b7aa7986aab4dc2fa090598118a43
+  languageName: node
+  linkType: hard
+
 "k6@npm:0.0.0":
   version: 0.0.0
   resolution: "k6@npm:0.0.0"
@@ -18231,6 +18504,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.flatten@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "lodash.flatten@npm:4.4.0"
+  checksum: 6a532a4e2b1cd736eaf4938ad0f842f1166d6cf6f56b5f9535ab52cabeaca00a5cf39acb4348ac59f35ec596113c5865c3ec4219e6901e4efa97eaadb641fa17
+  languageName: node
+  linkType: hard
+
 "lodash.get@npm:^4.4.2":
   version: 4.4.2
   resolution: "lodash.get@npm:4.4.2"
@@ -18718,6 +18998,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"md5.js@npm:^1.3.4":
+  version: 1.3.5
+  resolution: "md5.js@npm:1.3.5"
+  dependencies:
+    hash-base: "npm:^3.0.0"
+    inherits: "npm:^2.0.1"
+    safe-buffer: "npm:^5.1.2"
+  checksum: 8ef352bbd030e0c1332da88131232adedf908e9fa5b3de383acc8e6e56f92e98fdb53e2903497e0c89e501a5b3838db0fb29ac1f54b389155b394e7feb06dace
+  languageName: node
+  linkType: hard
+
 "mdast-util-definitions@npm:^4.0.0":
   version: 4.0.0
   resolution: "mdast-util-definitions@npm:4.0.0"
@@ -19410,6 +19701,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"miller-rabin@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "miller-rabin@npm:4.0.1"
+  dependencies:
+    bn.js: "npm:^4.0.0"
+    brorand: "npm:^1.0.1"
+  bin:
+    miller-rabin: bin/miller-rabin
+  checksum: 7a96be873d88380a65170df45121a8da0e96f6a757793a5973cc5161000cdaae1485b06b68375d79a3334c11f985d0734bb8554003fea739371ce2433abba34a
+  languageName: node
+  linkType: hard
+
 "mime-db@npm:1.52.0, mime-db@npm:>= 1.43.0 < 2, mime-db@npm:^1.41.0":
   version: 1.52.0
   resolution: "mime-db@npm:1.52.0"
@@ -19481,13 +19784,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimalistic-assert@npm:^1.0.0":
+"minimalistic-assert@npm:^1.0.0, minimalistic-assert@npm:^1.0.1":
   version: 1.0.1
   resolution: "minimalistic-assert@npm:1.0.1"
   checksum: e2310081d82a7f8a6ee7f338d167c82b3eb5378929b9eda3a9eb633cf0f0f19c029b69e6868264447d4f726644b52fdc4dda3bc985793a1aeba9b02b13ca3f8e
   languageName: node
   linkType: hard
 
+"minimalistic-crypto-utils@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "minimalistic-crypto-utils@npm:1.0.1"
+  checksum: 7d909decd241bd658f941981ce53db4061c834daba807a5082d08fd2a0c488b8ef67904c90af38b70445e0220951a533ae3a181be5724ad342df4d9454286476
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:4.2.3, minimatch@npm:^4.2.3":
   version: 4.2.3
   resolution: "minimatch@npm:4.2.3"
@@ -20325,6 +20635,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"oidc-client-ts@npm:^2.2.2":
+  version: 2.4.0
+  resolution: "oidc-client-ts@npm:2.4.0"
+  dependencies:
+    crypto-js: "npm:^4.2.0"
+    jwt-decode: "npm:^3.1.2"
+  checksum: ab3bb5289905d9b5a01b6bbbfc723ff8c4e42a5c41a2ac99fd253d3c3258945b920905361e5a4db5637c367522bd6da2b502c899aba78b8736b3cd6fa80fb86e
+  languageName: node
+  linkType: hard
+
 "on-finished@npm:2.4.1":
   version: 2.4.1
   resolution: "on-finished@npm:2.4.1"
@@ -20647,6 +20967,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-asn1@npm:^5.0.0, parse-asn1@npm:^5.1.6":
+  version: 5.1.6
+  resolution: "parse-asn1@npm:5.1.6"
+  dependencies:
+    asn1.js: "npm:^5.2.0"
+    browserify-aes: "npm:^1.0.0"
+    evp_bytestokey: "npm:^1.0.0"
+    pbkdf2: "npm:^3.0.3"
+    safe-buffer: "npm:^5.1.1"
+  checksum: 0c7c7cd35d6e59dd79f647430ed46a19f9dbf771595fd98605ffc210d6b01bdf1d020a9ef2f84c74c7d17c3466a00ff414fea4ce05306f1d9494051f6a0d9c6d
+  languageName: node
+  linkType: hard
+
 "parse-entities@npm:^2.0.0":
   version: 2.0.0
   resolution: "parse-entities@npm:2.0.0"
@@ -20894,6 +21227,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pbkdf2@npm:^3.0.3":
+  version: 3.1.2
+  resolution: "pbkdf2@npm:3.1.2"
+  dependencies:
+    create-hash: "npm:^1.1.2"
+    create-hmac: "npm:^1.1.4"
+    ripemd160: "npm:^2.0.1"
+    safe-buffer: "npm:^5.0.1"
+    sha.js: "npm:^2.4.8"
+  checksum: 5b5e46c0e65c2041f7b2bab88f1eb1132f9f326efdb7e80866e28428e24f979a1b901a695d17ac02ae72ec36e66f6b61a4e9a3878cb106bcef53dd32aee1cc6d
+  languageName: node
+  linkType: hard
+
 "peek-stream@npm:^1.1.0":
   version: 1.1.3
   resolution: "peek-stream@npm:1.1.3"
@@ -22196,6 +22542,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"public-encrypt@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "public-encrypt@npm:4.0.3"
+  dependencies:
+    bn.js: "npm:^4.1.0"
+    browserify-rsa: "npm:^4.0.0"
+    create-hash: "npm:^1.1.0"
+    parse-asn1: "npm:^5.0.0"
+    randombytes: "npm:^2.0.1"
+    safe-buffer: "npm:^5.1.2"
+  checksum: d335b26ce380a53e383848ffa5d868388e03c513f26a7c71df7067d91543bb5b10f209b740efadede5bc1019e244b7475b1ee1aebacb206c07522a8db3ab4e23
+  languageName: node
+  linkType: hard
+
 "pump@npm:^2.0.0":
   version: 2.0.1
   resolution: "pump@npm:2.0.1"
@@ -22379,7 +22739,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"randombytes@npm:^2.1.0":
+"randombytes@npm:^2.0.0, randombytes@npm:^2.0.1, randombytes@npm:^2.0.5, randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
   dependencies:
@@ -22388,6 +22748,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"randomfill@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "randomfill@npm:1.0.4"
+  dependencies:
+    randombytes: "npm:^2.0.5"
+    safe-buffer: "npm:^5.1.0"
+  checksum: 6d50fc3c3736130c2209407871618ad6d8204db0a54705f3c1a970669760c56e0dac12b875a154fcd1b7b7ff823549d79f40e967ec7eb2e121acad7363011739
+  languageName: node
+  linkType: hard
+
 "range-parser@npm:^1.2.1, range-parser@npm:~1.2.1":
   version: 1.2.1
   resolution: "range-parser@npm:1.2.1"
@@ -22539,12 +22909,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helsinki-headless-cms@npm:1.0.0-alpha224":
-  version: 1.0.0-alpha224
-  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha224"
+"react-helsinki-headless-cms@npm:1.0.0-alpha229":
+  version: 1.0.0-alpha229
+  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha229"
   dependencies:
-    hds-core: "npm:^2.17.0"
-    hds-design-tokens: "npm:^2.17.0"
+    hds-core: "npm:^3.1.0"
+    hds-design-tokens: "npm:^3.1.0"
     html-entities: "npm:^2.4.0"
     html-react-parser: "npm:^4.2.1"
     isomorphic-dompurify: "npm:^1.8.0"
@@ -22559,7 +22929,7 @@ __metadata:
   peerDependenciesMeta:
     "@apollo/client":
       optional: true
-  checksum: 0b8e8f9dc0be0fa673a3a84f0ba3ea27640799c03c1920f794a5c484dc29c9ed9f5d0f66a360276de4306cb1aa96d743fcc9d48eb60fa85fa0d334b0ec9615a8
+  checksum: 54fa10b59189e2742aa01ae1a6c43263a1bedd7c9eb2636bc526c0f2e6849cf53776d1a98b62d851a1387a1b5dd8c878908caab546edfa52496df5419dd329c4
   languageName: node
   linkType: hard
 
@@ -22827,7 +23197,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
+"readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0, readable-stream@npm:^3.6.2":
   version: 3.6.2
   resolution: "readable-stream@npm:3.6.2"
   dependencies:
@@ -23385,6 +23755,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ripemd160@npm:^2.0.0, ripemd160@npm:^2.0.1":
+  version: 2.0.2
+  resolution: "ripemd160@npm:2.0.2"
+  dependencies:
+    hash-base: "npm:^3.0.0"
+    inherits: "npm:^2.0.1"
+  checksum: 4541eb0cc604d08c00681d03e1648911d52a2c0f944df01673420c1bf7f94722e0b604e40a7c5bf1a037efbcf4de906235ed3e6ae0f7b967eab66bec8eff8436
+  languageName: node
+  linkType: hard
+
 "rollup-plugin-bundle-size@npm:^1.0.3":
   version: 1.0.3
   resolution: "rollup-plugin-bundle-size@npm:1.0.3"
@@ -23680,7 +24060,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:^5.2.1, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
   checksum: da8a21b3336a21c152eb3ba8ab41acde5772644f026d4b6e5f9fd8afa4f0cf407c113b19a362580fab9aea8beea295465432fc7684f9ff38aac559bb1b5528cd
@@ -23712,7 +24092,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safer-buffer@npm:>= 2.1.2 < 3, safer-buffer@npm:>= 2.1.2 < 3.0.0":
+"safer-buffer@npm:>= 2.1.2 < 3, safer-buffer@npm:>= 2.1.2 < 3.0.0, safer-buffer@npm:^2.1.0":
   version: 2.1.2
   resolution: "safer-buffer@npm:2.1.2"
   checksum: d4199666e9e792968c0b88c2c35dd400f56d3eecb9affbcf5207922822eadf30cc06995bae3c5d0a653851bbd40fc0af578bf046bbf734199ce22433ba4da659
@@ -24028,7 +24408,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sha.js@npm:^2.4.11":
+"sha.js@npm:^2.4.0, sha.js@npm:^2.4.11, sha.js@npm:^2.4.8":
   version: 2.4.11
   resolution: "sha.js@npm:2.4.11"
   dependencies:
@@ -24542,6 +24922,7 @@ __metadata:
     babel-eslint: "npm:^10.1.0"
     babel-jest: "npm:^29.5.0"
     camelcase-keys: "npm:8.0.2"
+    change-case-all: "npm:1.0.15"
     classnames: "npm:^2.3.2"
     copy-to-clipboard: "npm:^3.3.3"
     cross-env: "npm:7.0.3"
@@ -24569,7 +24950,7 @@ __metadata:
     file-saver: "npm:^2.0.5"
     graphql: "npm:16.7.1"
     graphql-tag: "npm:2.12.6"
-    hds-react: "npm:2.15.0"
+    hds-react: "npm:3.1.0"
     history: "npm:^5.3.0"
     husky: "npm:^8.0.3"
     i18next: "npm:23.2.3"
@@ -24599,7 +24980,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha224"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha229"
     react-i18next: "npm:13.0.1"
     react-leaflet: "npm:4.2.1"
     react-scroll: "npm:^1.8.9"
@@ -26353,7 +26734,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:5.1.3, typescript@npm:^4.6.4 || ^5.0.0":
+"typescript@npm:5.1.3":
   version: 5.1.3
   resolution: "typescript@npm:5.1.3"
   bin:
@@ -26373,6 +26754,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^4.6.4 || ^5.0.0":
+  version: 5.2.2
+  resolution: "typescript@npm:5.2.2"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 8c5dfc6149a0d5fbad8d55fd9f5cefaf567b6dda42bce8eef7e5f27e6b11d0fc15f4aa4cad3b38394a34f3e9db8b719f5083ab114ddc649e1bc3318327ffa8ca
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A4.7.4#optional!builtin<compat/typescript>":
   version: 4.7.4
   resolution: "typescript@patch:typescript@npm%3A4.7.4#optional!builtin<compat/typescript>::version=4.7.4&hash=a1c5e5"
@@ -26383,7 +26774,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A5.1.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^4.6.4 || ^5.0.0#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A5.1.3#optional!builtin<compat/typescript>":
   version: 5.1.3
   resolution: "typescript@patch:typescript@npm%3A5.1.3#optional!builtin<compat/typescript>::version=5.1.3&hash=a1c5e5"
   bin:
@@ -26403,6 +26794,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^4.6.4 || ^5.0.0#optional!builtin<compat/typescript>":
+  version: 5.2.2
+  resolution: "typescript@patch:typescript@npm%3A5.2.2#optional!builtin<compat/typescript>::version=5.2.2&hash=a1c5e5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: b52454ea2b8ba479dd655c4e55ae57c1cec4af21c83c3aa9ab280879a53f3ef4314587b0cfe5e6dd0a082aca4409fef70d0763e762cd0a3e8b38ef70d1dbad67
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:^0.7.30":
   version: 0.7.35
   resolution: "ua-parser-js@npm:0.7.35"