From e0dc55c637b363e235ad300b22018460593881fe Mon Sep 17 00:00:00 2001
From: Rids <74712581+Ridsko@users.noreply.github.com>
Date: Wed, 26 Apr 2023 04:47:33 +0200
Subject: [PATCH 1/7] Utrecht design tokens install

---
 pwa/package-lock.json | 2 +-
 pwa/package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/pwa/package-lock.json b/pwa/package-lock.json
index abd7ad0dd..94238c96d 100644
--- a/pwa/package-lock.json
+++ b/pwa/package-lock.json
@@ -57,7 +57,7 @@
         "@typescript-eslint/eslint-plugin": "^5.55.0",
         "@typescript-eslint/parser": "^5.55.0",
         "@utrecht/component-library-react": "1.0.0-alpha.283",
-        "@utrecht/design-tokens": "1.0.0-alpha.467",
+        "@utrecht/design-tokens": "^1.0.0-alpha.467",
         "eslint": "^8.36.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-react": "^7.32.2",
diff --git a/pwa/package.json b/pwa/package.json
index 925027a59..f1d73d49d 100644
--- a/pwa/package.json
+++ b/pwa/package.json
@@ -72,7 +72,7 @@
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
     "@utrecht/component-library-react": "1.0.0-alpha.283",
-    "@utrecht/design-tokens": "1.0.0-alpha.467",
+    "@utrecht/design-tokens": "^1.0.0-alpha.467",
     "eslint": "^8.36.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",

From 0adb53e7c2833d05104466b6d524eefd5fe01e1e Mon Sep 17 00:00:00 2001
From: Rids <74712581+Ridsko@users.noreply.github.com>
Date: Wed, 26 Apr 2023 04:50:24 +0200
Subject: [PATCH 2/7] Import designtokens in themeprovider

---
 pwa/src/styling/themeProvider/ThemeProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pwa/src/styling/themeProvider/ThemeProvider.tsx b/pwa/src/styling/themeProvider/ThemeProvider.tsx
index f74b97d47..4fad28beb 100644
--- a/pwa/src/styling/themeProvider/ThemeProvider.tsx
+++ b/pwa/src/styling/themeProvider/ThemeProvider.tsx
@@ -3,8 +3,8 @@ import * as styles from "./ThemeProvider.module.css";
 import "./../../styling/design-tokens/component-overrides.css";
 import { useForm } from "react-hook-form";
 import { themes } from "../../data/themes";
+import "@utrecht/design-tokens/dist/index.css";
 import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field";
-import { Heading2 } from "@gemeente-denhaag/components-react";
 import { SelectSingle } from "@conduction/components";
 import { Document } from "@utrecht/component-library-react/dist/css-module";
 

From 38cfe224a0387637e47b4bb167923ebfd330ef12 Mon Sep 17 00:00:00 2001
From: Rids <74712581+Ridsko@users.noreply.github.com>
Date: Wed, 26 Apr 2023 17:50:42 +0200
Subject: [PATCH 3/7] Work in progress

---
 pwa/package-lock.json                         | 23 +++++++++++++-----
 pwa/package.json                              |  1 +
 .../design-tokens/component-overrides.css     | 24 +++++++++----------
 .../styling/themeProvider/ThemeProvider.tsx   |  3 ++-
 .../SearchComponentTemplate.tsx               | 14 ++++-------
 5 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/pwa/package-lock.json b/pwa/package-lock.json
index 94238c96d..189be9245 100644
--- a/pwa/package-lock.json
+++ b/pwa/package-lock.json
@@ -21,6 +21,7 @@
         "@gemeente-denhaag/textarea": "^0.1.1-alpha.174",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
+        "@utrecht/component-library-css": "^1.0.0-alpha.487",
         "axios": "^0.25.0",
         "clsx": "^1.1.1",
         "dateformat": "^5.0.3",
@@ -5110,6 +5111,11 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@utrecht/component-library-css": {
+      "version": "1.0.0-alpha.487",
+      "resolved": "https://registry.npmjs.org/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.487.tgz",
+      "integrity": "sha512-dV1rMi/Dhm528t2H0YcZn+jDcKG+kKPIkDUbMxm6muLqj3c1qiKZol61m5gYnn7/pakNzKnvZeW5x5EJzwRIkQ=="
+    },
     "node_modules/@utrecht/component-library-react": {
       "version": "1.0.0-alpha.283",
       "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.283.tgz",
@@ -5139,9 +5145,9 @@
       }
     },
     "node_modules/@utrecht/design-tokens": {
-      "version": "1.0.0-alpha.467",
-      "resolved": "https://registry.npmjs.org/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.467.tgz",
-      "integrity": "sha512-B8JAEsTpEuchusmfGQiYs0A+QS49dz14KZEQxGdIj8gSplOvK2rI6uwghPC9kJCUZ5HiYKHvs4YHdTBz58rtbw==",
+      "version": "1.0.0-alpha.480",
+      "resolved": "https://registry.npmjs.org/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.480.tgz",
+      "integrity": "sha512-07r9Ifxv8OjjqRcrZy1mfqQ26IHFatwAcoYlV3YeYan2meYFzADgd0hgr2E70gT/0Xa2dpc/Jrd/gd1p/ymCsw==",
       "dev": true
     },
     "node_modules/@vercel/webpack-asset-relocator-loader": {
@@ -22143,6 +22149,11 @@
         "eslint-visitor-keys": "^3.3.0"
       }
     },
+    "@utrecht/component-library-css": {
+      "version": "1.0.0-alpha.487",
+      "resolved": "https://registry.npmjs.org/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.487.tgz",
+      "integrity": "sha512-dV1rMi/Dhm528t2H0YcZn+jDcKG+kKPIkDUbMxm6muLqj3c1qiKZol61m5gYnn7/pakNzKnvZeW5x5EJzwRIkQ=="
+    },
     "@utrecht/component-library-react": {
       "version": "1.0.0-alpha.283",
       "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.283.tgz",
@@ -22163,9 +22174,9 @@
       }
     },
     "@utrecht/design-tokens": {
-      "version": "1.0.0-alpha.467",
-      "resolved": "https://registry.npmjs.org/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.467.tgz",
-      "integrity": "sha512-B8JAEsTpEuchusmfGQiYs0A+QS49dz14KZEQxGdIj8gSplOvK2rI6uwghPC9kJCUZ5HiYKHvs4YHdTBz58rtbw==",
+      "version": "1.0.0-alpha.480",
+      "resolved": "https://registry.npmjs.org/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.480.tgz",
+      "integrity": "sha512-07r9Ifxv8OjjqRcrZy1mfqQ26IHFatwAcoYlV3YeYan2meYFzADgd0hgr2E70gT/0Xa2dpc/Jrd/gd1p/ymCsw==",
       "dev": true
     },
     "@vercel/webpack-asset-relocator-loader": {
diff --git a/pwa/package.json b/pwa/package.json
index f1d73d49d..3fb3b2d84 100644
--- a/pwa/package.json
+++ b/pwa/package.json
@@ -36,6 +36,7 @@
     "@gemeente-denhaag/textarea": "^0.1.1-alpha.174",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@utrecht/component-library-css": "^1.0.0-alpha.487",
     "axios": "^0.25.0",
     "clsx": "^1.1.1",
     "dateformat": "^5.0.3",
diff --git a/pwa/src/styling/design-tokens/component-overrides.css b/pwa/src/styling/design-tokens/component-overrides.css
index c75c3d7aa..782e381e6 100644
--- a/pwa/src/styling/design-tokens/component-overrides.css
+++ b/pwa/src/styling/design-tokens/component-overrides.css
@@ -21,7 +21,7 @@
   --denhaag-focus-border: var(--web-app-focus-border);
   --denhaag-heading-line-height: var(--web-app-line-height-md);
   --denhaag-heading-color: var(--web-app-color-heading);
-  --utrecht-heading-font-weight: var(--web-app-font-weight-bold);
+  /* --utrecht-heading-font-weight: var(--web-app-font-weight-bold);
   --utrecht-heading-font-family: var(--web-app-primary-font-family);
   --utrecht-heading-color: var(--web-app-color-primary-text);
   --utrecht-heading-5-font-size: var(--web-app-font-size-md);
@@ -38,14 +38,14 @@
   --utrecht-paragraph-font-weight: var(--web-app-font-weight-normal);
   --utrecht-paragraph-font-size: var(--web-app-font-size-md);
   --utrecht-paragraph-font-family: var(--web-app-content-font-family);
-  --utrecht-paragraph-color: var(--web-app-color-primary-text);
+  --utrecht-paragraph-color: var(--web-app-color-primary-text); */
 
   --denhaag-button-secondary-action-disabled-color: var(--web-app-color-disabled);
   --denhaag-button-secondary-action-disabled-border-color: var(--web-app-color-disabled);
   --denhaag-button-secondary-action-disabled-background-color: var(--web-app-color-white);
-  --utrecht-button-secondary-action-disabled-color: var(--web-app-color-disabled);
+  /* --utrecht-button-secondary-action-disabled-color: var(--web-app-color-disabled);
   --utrecht-button-secondary-action-disabled-border-color: var(--web-app-color-disabled);
-  --utrecht-button-secondary-action-disabled-background-color: var(--web-app-color-white);
+  --utrecht-button-secondary-action-disabled-background-color: var(--web-app-color-white); */
 
   --denhaag-button-secondary-action-hover-color: var(--web-app-color-secondary-action-hover);
   --denhaag-button-secondary-action-hover-border-color: var(--web-app-color-secondary-action-hover);
@@ -53,13 +53,13 @@
   --denhaag-button-secondary-action-border-color: var(--web-app-color-secondary-action);
   --denhaag-button-secondary-action-color: var(--web-app-color-secondary-action);
   --denhaag-button-secondary-action-background-color: var(--web-app-color-white);
-  --utrecht-button-secondary-action-hover-border-color: var(--web-app-color-secondary-action-hover);
+  /* --utrecht-button-secondary-action-hover-border-color: var(--web-app-color-secondary-action-hover);
   --utrecht-button-secondary-action-hover-color: var(--web-app-color-secondary-action-hover);
   --utrecht-button-secondary-action-hover-background-color: var(--web-app-color-white);
   --utrecht-button-secondary-action-border-color: var(--web-app-color-secondary-action);
   --utrecht-button-secondary-action-color: var(--web-app-color-secondary-action);
   --utrecht-button-secondary-action-background-color: var(--web-app-color-white);
-  --utrecht-button-secondary-action-border-width: var(--web-app-border-radius-md);
+  --utrecht-button-secondary-action-border-width: var(--web-app-border-radius-md); */
 
   --denhaag-button-large-size-padding-block: var(--web-app-size-xs);
   --denhaag-button-border-width: var(--web-app-size-4xs);
@@ -79,7 +79,7 @@
   --denhaag-button-medium-size-padding-inline: var(--denhaag-button-padding-inline);
   --denhaag-button-medium-size-padding-block: var(--denhaag-button-padding-block);
   --denhaag-button-focus-border-color: var(--web-app-focus-border-color);
-  --utrecht-button-disabled-color: var(--web-app-color-white);
+  /* --utrecht-button-disabled-color: var(--web-app-color-white);
   --utrecht-button-disabled-background-color: var(--web-app-color-disabled);
   --utrecht-button-focus-border-width: var(--web-app-focus-border-width);
   --utrecht-button-primary-action-hover-color: var(--web-app-color-white);
@@ -98,7 +98,7 @@
   --utrecht-button-padding-block-start: var(--web-app-size-sm);
   --utrecht-button-padding-inline-end: var(--web-app-size-md);
   --utrecht-button-padding-inline-start: var(--web-app-size-md);
-  --utrecht-button-border-width: 0;
+  --utrecht-button-border-width: 0; */
 
   /* --denhaag-link-focus-outline: var(--web-app-focus-border); */
   --denhaag-link-disabled-color: var(--web-app-color-disabled);
@@ -110,10 +110,10 @@
   --denhaag-link-icon-margin-end: var(--web-app-size-xs);
   --denhaag-link-icon-margin-start: var(--web-app-size-xs);
   --denhaag-link-padding: var(--web-app-size-xs);
-  --utrecht-link-hover-color: var(--web-app-color-link-active);
+  /* --utrecht-link-hover-color: var(--web-app-color-link-active);
   --utrecht-link-focus-color: var(--web-app-color-link-active);
   --utrecht-link-color: var(--web-app-color-link);
-  --utrecht-link-text-decoration: underline;
+  --utrecht-link-text-decoration: underline; */
 
   --denhaag-tabs-tab-indicator-border-color: var(--web-app-color-link);
   --denhaag-tabs-tab-padding-inline-end: var(--web-app-size-xs);
@@ -164,7 +164,7 @@
   --denhaag-form-group-helper-text-color: var(--web-app-color-primary-text);
   --denhaag-form-group-label-color: var(--web-app-color-link-active);
 
-  --utrecht-form-input-font-family: var(--web-app-content-font-family);
+  /* --utrecht-form-input-font-family: var(--web-app-content-font-family);
   --utrecht-form-label-radio-color: var(--web-app-color-primary-text);
   --utrecht-form-label-checkbox-color: var(--web-app-color-primary-text);
   --utrecht-form-label-font-size: var(--web-app-font-size-md);
@@ -185,7 +185,7 @@
   --utrecht-form-input-padding-inline-end: var(--web-app-size-md);
   --utrecht-form-input-padding-block-start: var(--web-app-size-sm);
   --utrecht-form-input-padding-block-end: var(--web-app-size-sm);
-  --utrecht-form-input-border-width: var(--web-app-size-4xs);
+  --utrecht-form-input-border-width: var(--web-app-size-4xs); */
 
   --denhaag-divider-border-color: var(--web-app-color-disabled);
   --denhaag-divider-margin-inline-end: var(--web-app-size-md);
diff --git a/pwa/src/styling/themeProvider/ThemeProvider.tsx b/pwa/src/styling/themeProvider/ThemeProvider.tsx
index 4fad28beb..d9fe51217 100644
--- a/pwa/src/styling/themeProvider/ThemeProvider.tsx
+++ b/pwa/src/styling/themeProvider/ThemeProvider.tsx
@@ -2,8 +2,9 @@ import * as React from "react";
 import * as styles from "./ThemeProvider.module.css";
 import "./../../styling/design-tokens/component-overrides.css";
 import { useForm } from "react-hook-form";
-import { themes } from "../../data/themes";
+import "@utrecht/component-library-css";
 import "@utrecht/design-tokens/dist/index.css";
+import { themes } from "../../data/themes";
 import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field";
 import { SelectSingle } from "@conduction/components";
 import { Document } from "@utrecht/component-library-react/dist/css-module";
diff --git a/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx b/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx
index a03ee0ecf..5e739f04d 100644
--- a/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx
+++ b/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx
@@ -1,12 +1,11 @@
 import * as React from "react";
 import * as styles from "./SearchComponentTemplate.module.css";
-import { FormField, FormFieldInput } from "@gemeente-denhaag/components-react";
+import { FormField, FormLabel, Textbox } from "@utrecht/component-library-react/dist/css-module";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
 import { FiltersContext, IFilters } from "../../../context/filters";
 import { navigate } from "gatsby";
 import { ArrowRightIcon, SearchIcon } from "@gemeente-denhaag/icons";
-import { InputText } from "@conduction/components";
 import { Button } from "@utrecht/component-library-react";
 import { ButtonLink } from "../../../components";
 
@@ -50,14 +49,9 @@ export const SearchComponentTemplate: React.FC<SearchComponentTemplateProps> = (
   return (
     <form onSubmit={handleSubmit(onSubmit)} className={layoutClassName}>
       <FormField>
-        <FormFieldInput>
-          <InputText
-            name="name"
-            {...{ errors, register }}
-            placeholder={t("Search all components")}
-            icon={<SearchIcon />}
-          />
-        </FormFieldInput>
+        <FormLabel htmlFor="searchid">
+          <Textbox id="searchid" name="name" placeholder={t("Search all components")} />
+        </FormLabel>
       </FormField>
       <div className={styles.buttons}>
         <Button type="submit" appearance="primary-action-button">

From 6f754093fe3c35ce468523df02827cde54498d2f Mon Sep 17 00:00:00 2001
From: Rids <74712581+Ridsko@users.noreply.github.com>
Date: Fri, 28 Apr 2023 12:55:15 +0200
Subject: [PATCH 4/7] Work in progress

---
 pwa/src/layout/Head.tsx                                      | 1 -
 pwa/src/styling/design-tokens/component-overrides.css        | 2 +-
 pwa/src/styling/design-tokens/skeleton-design-tokens.css     | 2 +-
 pwa/src/styling/themeProvider/ThemeProvider.tsx              | 5 +++--
 .../header/ComponentCardsAccordionHeaderTemplate.tsx         | 4 ++--
 .../searchComponent/SearchComponentTemplate.tsx              | 3 +--
 pwa/static/themes/rotterdam.css                              | 4 ++--
 pwa/static/themes/utrecht.css                                | 2 +-
 8 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/pwa/src/layout/Head.tsx b/pwa/src/layout/Head.tsx
index 1d1c19774..795203393 100644
--- a/pwa/src/layout/Head.tsx
+++ b/pwa/src/layout/Head.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import "../styling/index.css";
 import { Helmet } from "react-helmet";
 
 export const Head: React.FC = () => {
diff --git a/pwa/src/styling/design-tokens/component-overrides.css b/pwa/src/styling/design-tokens/component-overrides.css
index 782e381e6..c7f8ab996 100644
--- a/pwa/src/styling/design-tokens/component-overrides.css
+++ b/pwa/src/styling/design-tokens/component-overrides.css
@@ -1,4 +1,4 @@
-:root {
+.conduction-theme {
   --web-app-link-icon-gap: 0.3em;
 
   --conduction-secondary-top-nav-item-padding: var(--web-app-secondary-top-nav-item-padding);
diff --git a/pwa/src/styling/design-tokens/skeleton-design-tokens.css b/pwa/src/styling/design-tokens/skeleton-design-tokens.css
index e8f6e06c6..5074b425f 100644
--- a/pwa/src/styling/design-tokens/skeleton-design-tokens.css
+++ b/pwa/src/styling/design-tokens/skeleton-design-tokens.css
@@ -1,4 +1,4 @@
-:root {
+.conduction-theme {
   /* Sizes */
   --skeleton-size-4xs: 1px;
   --skeleton-size-3xs: 2px;
diff --git a/pwa/src/styling/themeProvider/ThemeProvider.tsx b/pwa/src/styling/themeProvider/ThemeProvider.tsx
index d9fe51217..ffb0a7a6b 100644
--- a/pwa/src/styling/themeProvider/ThemeProvider.tsx
+++ b/pwa/src/styling/themeProvider/ThemeProvider.tsx
@@ -3,11 +3,12 @@ import * as styles from "./ThemeProvider.module.css";
 import "./../../styling/design-tokens/component-overrides.css";
 import { useForm } from "react-hook-form";
 import "@utrecht/component-library-css";
-import "@utrecht/design-tokens/dist/index.css";
+// import "@utrecht/design-tokens/dist/index.css";
 import { themes } from "../../data/themes";
 import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field";
 import { SelectSingle } from "@conduction/components";
 import { Document } from "@utrecht/component-library-react/dist/css-module";
+import clsx from "clsx";
 
 export const ThemeProvider = ({ children }: React.PropsWithChildren<{}>): JSX.Element => {
   const [theme, setTheme] = React.useState<string>("rotterdam");
@@ -28,7 +29,7 @@ export const ThemeProvider = ({ children }: React.PropsWithChildren<{}>): JSX.El
   const themeData = themes.find(({ value }) => value === theme);
 
   return (
-    <Document className={themeData?.className}>
+    <Document className={clsx("conduction-theme", themeData?.className)}>
       {children}
 
       <div className={styles.container}>
diff --git a/pwa/src/templates/templateParts/componentCardsAccordion/header/ComponentCardsAccordionHeaderTemplate.tsx b/pwa/src/templates/templateParts/componentCardsAccordion/header/ComponentCardsAccordionHeaderTemplate.tsx
index 1bdeeabef..82a3ce422 100644
--- a/pwa/src/templates/templateParts/componentCardsAccordion/header/ComponentCardsAccordionHeaderTemplate.tsx
+++ b/pwa/src/templates/templateParts/componentCardsAccordion/header/ComponentCardsAccordionHeaderTemplate.tsx
@@ -6,7 +6,7 @@ import { Divider } from "@gemeente-denhaag/components-react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import _ from "lodash";
-import { BadgeCounter } from "@conduction/components";
+import { BadgeCounter } from "@utrecht/component-library-react/dist/css-module";
 import { Heading } from "@utrecht/component-library-react/dist/css-module";
 
 interface ComponentCardsAccordionHeaderTemplateProps {
@@ -30,7 +30,7 @@ export const ComponentCardsAccordionHeaderTemplate: React.FC<ComponentCardsAccor
       <div className={styles.content}>
         <FontAwesomeIcon className={styles.layerIcon} icon={faLayerGroup} />
         <span className={clsx(styles[_.camelCase(`${title} badge`)], styles.badge, maxItems && styles.maxNumber)}>
-          <BadgeCounter number={badgeLabel}>
+          <BadgeCounter>
             <Heading level={3} className={styles.title}>
               {t(title)}
             </Heading>
diff --git a/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx b/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx
index 5e739f04d..b61da722e 100644
--- a/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx
+++ b/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx
@@ -1,12 +1,11 @@
 import * as React from "react";
 import * as styles from "./SearchComponentTemplate.module.css";
-import { FormField, FormLabel, Textbox } from "@utrecht/component-library-react/dist/css-module";
+import { Button, FormField, FormLabel, Textbox } from "@utrecht/component-library-react/dist/css-module";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
 import { FiltersContext, IFilters } from "../../../context/filters";
 import { navigate } from "gatsby";
 import { ArrowRightIcon, SearchIcon } from "@gemeente-denhaag/icons";
-import { Button } from "@utrecht/component-library-react";
 import { ButtonLink } from "../../../components";
 
 interface SearchComponentTemplateProps {
diff --git a/pwa/static/themes/rotterdam.css b/pwa/static/themes/rotterdam.css
index d5fa7be3e..ca99b9cf4 100644
--- a/pwa/static/themes/rotterdam.css
+++ b/pwa/static/themes/rotterdam.css
@@ -23,14 +23,14 @@
   src: url("./../../../fonts/Bolder-RegularItalic.woff2") format("woff2");
 }
 
-:root {
+.rotterdam-theme {
   --rotterdam-color-green: #00811f;
 }
 
 /*
  * Generics global
 */
-:root {
+.rotterdam-theme {
   /* Sizes */
   --web-app-size-4xs: var(--skeleton-size-4xs);
   --web-app-size-3xs: var(--skeleton-size-3xs);
diff --git a/pwa/static/themes/utrecht.css b/pwa/static/themes/utrecht.css
index 86b7f2590..689031f33 100644
--- a/pwa/static/themes/utrecht.css
+++ b/pwa/static/themes/utrecht.css
@@ -1,7 +1,7 @@
 /*
  * Generics global
 */
-:root {
+.utrecht-theme {
   /* Sizes */
   --web-app-size-4xs: var(--skeleton-size-4xs);
   --web-app-size-3xs: var(--skeleton-size-3xs);

From 2d47adbfc496e1ab99032561395a96c892fe6b37 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Mon, 1 May 2023 12:01:43 +0200
Subject: [PATCH 5/7] build: specifiy Node 18 via nvmrc file

---
 .nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 000000000..3c032078a
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+18

From 738a8520adabdf6b3fd45245b51aabcf97d0cac4 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Mon, 1 May 2023 12:05:06 +0200
Subject: [PATCH 6/7] refactor: remove direct dependency on components-react

The CSS from the textbox component was interfering, avoid importing that component by avoiding the component library package. Instead import each component we actually need.
---
 pwa/package-lock.json                         | 668 ++++++++++++++++--
 pwa/package.json                              |  30 +-
 .../applicationCard/ApplicationCard.tsx       |   2 +-
 .../components/categoryCard/CategoryCard.tsx  |   3 +-
 .../componentCard/ComponentCard.tsx           |   2 +-
 .../organizationCard/OrganizationCard.tsx     |   2 +-
 .../ResultsDisplaySwitch.tsx                  |   2 +-
 pwa/src/templates/about/AboutTemplate.tsx     |   3 +-
 .../ApplicationsDetailTemplate.tsx            |   3 +-
 .../CategoryDetailTemplate.tsx                |   2 +-
 .../ComponentsDetailTemplate.tsx              |   3 +-
 .../components/ComponentsTemplate.tsx         |   2 +-
 pwa/src/templates/landing/LandingTemplate.tsx |   2 +-
 .../OrganizationDetailTemplate.tsx            |   3 +-
 ...CategoriesCardsAccordionHeaderTemplate.tsx |   2 +-
 .../ComponentCardsAccordionHeaderTemplate.tsx |   2 +-
 .../ComponentCategoryAccordionTemplate.tsx    |   2 +-
 ...mponentCategoryAccordionHeaderTemplate.tsx |   2 +-
 .../VerticalFiltersTemplate.tsx               |   2 +-
 .../CategoriesLandingDisplayTemplate.tsx      |   2 +-
 .../loginForm/LoginFormTemplate.tsx           |   4 +-
 .../SubmitComponentTemplate.tsx               |   2 +-
 22 files changed, 644 insertions(+), 101 deletions(-)

diff --git a/pwa/package-lock.json b/pwa/package-lock.json
index 189be9245..780330e5a 100644
--- a/pwa/package-lock.json
+++ b/pwa/package-lock.json
@@ -12,13 +12,17 @@
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
-        "@gemeente-denhaag/components-react": "^0.1.1-alpha.239",
-        "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.301",
-        "@gemeente-denhaag/form-field": "^0.1.1-alpha.177",
+        "@gemeente-denhaag/alert": "0.1.1-alpha.279",
+        "@gemeente-denhaag/button": "0.2.3-alpha.309",
+        "@gemeente-denhaag/divider": "0.2.3-alpha.309",
+        "@gemeente-denhaag/form-field": "0.1.1-alpha.185",
+        "@gemeente-denhaag/icons": "0.2.3-alpha.309",
         "@gemeente-denhaag/process-steps": "^0.1.0-alpha.130",
         "@gemeente-denhaag/sidenav": "^0.1.0-alpha.119",
+        "@gemeente-denhaag/tab": "0.2.3-alpha.309",
         "@gemeente-denhaag/table": "^0.1.1-alpha.203",
         "@gemeente-denhaag/textarea": "^0.1.1-alpha.174",
+        "@gemeente-denhaag/typography": "0.2.3-alpha.309",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
         "@utrecht/component-library-css": "^1.0.0-alpha.487",
@@ -2312,18 +2316,34 @@
       }
     },
     "node_modules/@gemeente-denhaag/alert": {
-      "version": "0.1.1-alpha.271",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/alert/-/alert-0.1.1-alpha.271.tgz",
-      "integrity": "sha512-lMFrK3t8MqYGgddIptPXcSdV1UTypI3FIVLYcDFiUdSIRlClxyJB/csFhPbSprgyByaLDJqcaqmhHAoWtBtJ8g==",
+      "version": "0.1.1-alpha.279",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/alert/-/alert-0.1.1-alpha.279.tgz",
+      "integrity": "sha512-6sXWfvJpbqCLx/WvmMp2BRqr2w6ZOulK2n5wmKEblVfINOkybewLVWTqUTxqdwNFdXQPbYdzKZhsLAebD4wA/w==",
       "dependencies": {
-        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
-        "@gemeente-denhaag/button": "0.2.3-alpha.301",
-        "@gemeente-denhaag/iconbutton": "0.2.3-alpha.301",
-        "@gemeente-denhaag/icons": "0.2.3-alpha.301",
-        "@gemeente-denhaag/typography": "0.2.3-alpha.301"
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.309",
+        "@gemeente-denhaag/button": "0.2.3-alpha.309",
+        "@gemeente-denhaag/iconbutton": "0.2.3-alpha.309",
+        "@gemeente-denhaag/icons": "0.2.3-alpha.309",
+        "@gemeente-denhaag/typography": "0.2.3-alpha.309"
       },
       "peerDependencies": {
-        "react": "^17.0.0"
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/alert/node_modules/@gemeente-denhaag/baseprops": {
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-5qn02o7J+a1/VfpM1NkbIa4q7PNRvqPnwfqB9lg9KCDnGe46WutpnUIzkpvylJhOS9xguYXA2YGvDUKpE86pkg==",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/alert/node_modules/@gemeente-denhaag/iconbutton": {
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/iconbutton/-/iconbutton-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-ehkt1mz0ONxlPIgpA5DcZc27Ab8Au6cyv8qNt1VnBJh0IH433DEFg4XRV0zfTt37PGjt/cHe+ap+NI11Tw8npg==",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@gemeente-denhaag/avatar": {
@@ -2350,14 +2370,22 @@
       }
     },
     "node_modules/@gemeente-denhaag/basedatadisplayprops": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-IB191jHucmLW9n7VL9Ded3rwCrl44Q5zzM+W6RoFRWUZqad/l1RetiF5SQMIrI3O1z7gSKrZB0Wh5ugwGSMSPw==",
       "dependencies": {
-        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.309"
       },
       "peerDependencies": {
-        "react": "^17.0.0"
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/basedatadisplayprops/node_modules/@gemeente-denhaag/baseprops": {
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-5qn02o7J+a1/VfpM1NkbIa4q7PNRvqPnwfqB9lg9KCDnGe46WutpnUIzkpvylJhOS9xguYXA2YGvDUKpE86pkg==",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@gemeente-denhaag/baseprops": {
@@ -2377,14 +2405,22 @@
       }
     },
     "node_modules/@gemeente-denhaag/button": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/button/-/button-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-XLinVuTrGYNQtkVup8TwBWRfJ/0FLkd5JcnjzD8QdUQqTblndHVbkQw9KfuUn77/R4IwrT/+wqzNRhek0Wy6gg==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/button/-/button-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-zu6DHMlzcDaa5WuIGS483jRY67kWL7furFh3MrXdms7I687zokSIYRG9F9CU5wGSo6kBSpZpnx21B7QuAk/YHw==",
       "dependencies": {
-        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.309"
       },
       "peerDependencies": {
-        "react": "^17.0.0"
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/button/node_modules/@gemeente-denhaag/baseprops": {
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-5qn02o7J+a1/VfpM1NkbIa4q7PNRvqPnwfqB9lg9KCDnGe46WutpnUIzkpvylJhOS9xguYXA2YGvDUKpE86pkg==",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@gemeente-denhaag/card": {
@@ -2400,6 +2436,14 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/card/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/checkbox": {
       "version": "0.2.3-alpha.301",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/checkbox/-/checkbox-0.2.3-alpha.301.tgz",
@@ -2411,6 +2455,14 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/checkbox/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/components-react": {
       "version": "0.1.1-alpha.239",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/components-react/-/components-react-0.1.1-alpha.239.tgz",
@@ -2452,6 +2504,95 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/components-react/node_modules/@gemeente-denhaag/alert": {
+      "version": "0.1.1-alpha.271",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/alert/-/alert-0.1.1-alpha.271.tgz",
+      "integrity": "sha512-lMFrK3t8MqYGgddIptPXcSdV1UTypI3FIVLYcDFiUdSIRlClxyJB/csFhPbSprgyByaLDJqcaqmhHAoWtBtJ8g==",
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
+        "@gemeente-denhaag/button": "0.2.3-alpha.301",
+        "@gemeente-denhaag/iconbutton": "0.2.3-alpha.301",
+        "@gemeente-denhaag/icons": "0.2.3-alpha.301",
+        "@gemeente-denhaag/typography": "0.2.3-alpha.301"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/components-react/node_modules/@gemeente-denhaag/basedatadisplayprops": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/components-react/node_modules/@gemeente-denhaag/button": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/button/-/button-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-XLinVuTrGYNQtkVup8TwBWRfJ/0FLkd5JcnjzD8QdUQqTblndHVbkQw9KfuUn77/R4IwrT/+wqzNRhek0Wy6gg==",
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/components-react/node_modules/@gemeente-denhaag/divider": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/divider/-/divider-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-YiHVXS4hgfN3bMMcVXB/n4fk41L9Es36HyZiegBqX3HRmumLJiJ24LVa4FGEzhWWy5BfsdNdtgK2AYlpz0o6tw==",
+      "dependencies": {
+        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301",
+        "@material-ui/core": "4.12.4"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/components-react/node_modules/@gemeente-denhaag/form-field": {
+      "version": "0.1.1-alpha.177",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/form-field/-/form-field-0.1.1-alpha.177.tgz",
+      "integrity": "sha512-JQ2KUGdUlebgGk+T83x3RtfPr5Ok3LjLXjC2WQaEWprL2Yo8DIuMQ/fsQ8K77sJUIZnCwniHCsFBkwX5F6pMjA==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/components-react/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/components-react/node_modules/@gemeente-denhaag/tab": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/tab/-/tab-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-mork5CQfgv0vzfEFT1QEj/BVFGCVAYCGttuAQDqCsIHCUN5pOi6n2rLw3r5BHAnbI1dl/xEDZskcyxnbvSt6Vg==",
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
+        "@material-ui/core": "4.12.4",
+        "@material-ui/lab": "4.11.3-deprecations.1"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/components-react/node_modules/@gemeente-denhaag/typography": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-TswEuavsfYwQu2UotDoqvZ9HPwDA2gUSTmdrH4Bwu0khAznK7g+fsx//7MoJP6YpQB08rar1Z+CwE3lvlu+4WA==",
+      "dependencies": {
+        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/datepicker": {
       "version": "0.1.1-alpha.221",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/datepicker/-/datepicker-0.1.1-alpha.221.tgz",
@@ -2464,21 +2605,29 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/datepicker/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/design-tokens-components": {
       "version": "0.2.3-alpha.301",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/design-tokens-components/-/design-tokens-components-0.2.3-alpha.301.tgz",
       "integrity": "sha512-Ga0bF9HXHlIykus5MQcjKLXPX0PxKgdCz22w8sAz1AoQbgWR5fPHKzehBv0RzbE1wGhVGcM3EhJeQgPQYkNOJw=="
     },
     "node_modules/@gemeente-denhaag/divider": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/divider/-/divider-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-YiHVXS4hgfN3bMMcVXB/n4fk41L9Es36HyZiegBqX3HRmumLJiJ24LVa4FGEzhWWy5BfsdNdtgK2AYlpz0o6tw==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/divider/-/divider-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-BGP91zBxCF928kTdJn2BdnnnvYQaiNvX0JKLGzP17BSWbh+5mxuEbiHWZvfABRui2HAUVB4hrFv+d4YEKAZ/DQ==",
       "dependencies": {
-        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301",
+        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.309",
         "@material-ui/core": "4.12.4"
       },
       "peerDependencies": {
-        "react": "^17.0.0"
+        "react": "^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@gemeente-denhaag/dotindicator": {
@@ -2493,11 +2642,11 @@
       }
     },
     "node_modules/@gemeente-denhaag/form-field": {
-      "version": "0.1.1-alpha.177",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/form-field/-/form-field-0.1.1-alpha.177.tgz",
-      "integrity": "sha512-JQ2KUGdUlebgGk+T83x3RtfPr5Ok3LjLXjC2WQaEWprL2Yo8DIuMQ/fsQ8K77sJUIZnCwniHCsFBkwX5F6pMjA==",
+      "version": "0.1.1-alpha.185",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/form-field/-/form-field-0.1.1-alpha.185.tgz",
+      "integrity": "sha512-kliK81O5zThFoLbVKFPMC5coeUzKYA8IFcvPCLIldwCChSlcuEUFiBbVg4arQV6vAlhe+YzTa030qSSfAvM11Q==",
       "peerDependencies": {
-        "react": "^17.0.0"
+        "react": "^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@gemeente-denhaag/formcontrol": {
@@ -2532,6 +2681,28 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/formgroup/node_modules/@gemeente-denhaag/basedatadisplayprops": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/formgroup/node_modules/@gemeente-denhaag/typography": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-TswEuavsfYwQu2UotDoqvZ9HPwDA2gUSTmdrH4Bwu0khAznK7g+fsx//7MoJP6YpQB08rar1Z+CwE3lvlu+4WA==",
+      "dependencies": {
+        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/header": {
       "version": "0.1.1-alpha.140",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/header/-/header-0.1.1-alpha.140.tgz",
@@ -2551,11 +2722,11 @@
       }
     },
     "node_modules/@gemeente-denhaag/icons": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-9AES7P2r3KO+5kVCaSDNL2BdYRRPNTHKFh5MzsuS3ulWh07BVWltGcH1pKYidfwLIuf/15UlNWmIy3tMevlKuw==",
       "peerDependencies": {
-        "react": "^17.0.0"
+        "react": "^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@gemeente-denhaag/inputlabel": {
@@ -2582,6 +2753,14 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/link/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/list": {
       "version": "0.2.3-alpha.301",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/list/-/list-0.2.3-alpha.301.tgz",
@@ -2594,6 +2773,14 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/list/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/menu": {
       "version": "0.2.3-alpha.301",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/menu/-/menu-0.2.3-alpha.301.tgz",
@@ -2606,6 +2793,14 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/menu/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/page": {
       "version": "0.1.1-alpha.140",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/page/-/page-0.1.1-alpha.140.tgz",
@@ -2625,6 +2820,36 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/process-steps/node_modules/@gemeente-denhaag/basedatadisplayprops": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/process-steps/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/process-steps/node_modules/@gemeente-denhaag/typography": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-TswEuavsfYwQu2UotDoqvZ9HPwDA2gUSTmdrH4Bwu0khAznK7g+fsx//7MoJP6YpQB08rar1Z+CwE3lvlu+4WA==",
+      "dependencies": {
+        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/radio": {
       "version": "0.2.3-alpha.301",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/radio/-/radio-0.2.3-alpha.301.tgz",
@@ -2690,16 +2915,24 @@
       }
     },
     "node_modules/@gemeente-denhaag/tab": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/tab/-/tab-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-mork5CQfgv0vzfEFT1QEj/BVFGCVAYCGttuAQDqCsIHCUN5pOi6n2rLw3r5BHAnbI1dl/xEDZskcyxnbvSt6Vg==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/tab/-/tab-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-VXWJOq9miJhh4j6kmTsa/l7OnCIDRbqUB+sSUEHjUuyTGciCkjboo7d7Rhx5KcXxJqR8X6TNAPqZfQIcDmGb9A==",
       "dependencies": {
-        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.309",
         "@material-ui/core": "4.12.4",
         "@material-ui/lab": "4.11.3-deprecations.1"
       },
       "peerDependencies": {
-        "react": "^17.0.0"
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/tab/node_modules/@gemeente-denhaag/baseprops": {
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-5qn02o7J+a1/VfpM1NkbIa4q7PNRvqPnwfqB9lg9KCDnGe46WutpnUIzkpvylJhOS9xguYXA2YGvDUKpE86pkg==",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@gemeente-denhaag/table": {
@@ -2721,6 +2954,14 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/textarea/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/textfield": {
       "version": "0.2.3-alpha.301",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/textfield/-/textfield-0.2.3-alpha.301.tgz",
@@ -2732,6 +2973,14 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/textfield/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@gemeente-denhaag/timeline": {
       "version": "0.2.3-alpha.301",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/timeline/-/timeline-0.2.3-alpha.301.tgz",
@@ -2746,7 +2995,26 @@
         "react": "^17.0.0"
       }
     },
-    "node_modules/@gemeente-denhaag/typography": {
+    "node_modules/@gemeente-denhaag/timeline/node_modules/@gemeente-denhaag/basedatadisplayprops": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/timeline/node_modules/@gemeente-denhaag/icons": {
+      "version": "0.2.3-alpha.301",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
+    "node_modules/@gemeente-denhaag/timeline/node_modules/@gemeente-denhaag/typography": {
       "version": "0.2.3-alpha.301",
       "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.301.tgz",
       "integrity": "sha512-TswEuavsfYwQu2UotDoqvZ9HPwDA2gUSTmdrH4Bwu0khAznK7g+fsx//7MoJP6YpQB08rar1Z+CwE3lvlu+4WA==",
@@ -2757,6 +3025,17 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@gemeente-denhaag/typography": {
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-JiTVM+mDCjWXt3PcCRYST4QoAMmVSoYN7Z+WShoyKWoQF889QOjWS5SEtOERKsd2CzL6n9+j0FCNssylyaMKcw==",
+      "dependencies": {
+        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.309"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@graphql-codegen/add": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/@graphql-codegen/add/-/add-3.2.3.tgz",
@@ -20152,15 +20431,29 @@
       }
     },
     "@gemeente-denhaag/alert": {
-      "version": "0.1.1-alpha.271",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/alert/-/alert-0.1.1-alpha.271.tgz",
-      "integrity": "sha512-lMFrK3t8MqYGgddIptPXcSdV1UTypI3FIVLYcDFiUdSIRlClxyJB/csFhPbSprgyByaLDJqcaqmhHAoWtBtJ8g==",
-      "requires": {
-        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
-        "@gemeente-denhaag/button": "0.2.3-alpha.301",
-        "@gemeente-denhaag/iconbutton": "0.2.3-alpha.301",
-        "@gemeente-denhaag/icons": "0.2.3-alpha.301",
-        "@gemeente-denhaag/typography": "0.2.3-alpha.301"
+      "version": "0.1.1-alpha.279",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/alert/-/alert-0.1.1-alpha.279.tgz",
+      "integrity": "sha512-6sXWfvJpbqCLx/WvmMp2BRqr2w6ZOulK2n5wmKEblVfINOkybewLVWTqUTxqdwNFdXQPbYdzKZhsLAebD4wA/w==",
+      "requires": {
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.309",
+        "@gemeente-denhaag/button": "0.2.3-alpha.309",
+        "@gemeente-denhaag/iconbutton": "0.2.3-alpha.309",
+        "@gemeente-denhaag/icons": "0.2.3-alpha.309",
+        "@gemeente-denhaag/typography": "0.2.3-alpha.309"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": {
+          "version": "0.2.3-alpha.309",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.309.tgz",
+          "integrity": "sha512-5qn02o7J+a1/VfpM1NkbIa4q7PNRvqPnwfqB9lg9KCDnGe46WutpnUIzkpvylJhOS9xguYXA2YGvDUKpE86pkg==",
+          "requires": {}
+        },
+        "@gemeente-denhaag/iconbutton": {
+          "version": "0.2.3-alpha.309",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/iconbutton/-/iconbutton-0.2.3-alpha.309.tgz",
+          "integrity": "sha512-ehkt1mz0ONxlPIgpA5DcZc27Ab8Au6cyv8qNt1VnBJh0IH433DEFg4XRV0zfTt37PGjt/cHe+ap+NI11Tw8npg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/avatar": {
@@ -20181,11 +20474,19 @@
       }
     },
     "@gemeente-denhaag/basedatadisplayprops": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-IB191jHucmLW9n7VL9Ded3rwCrl44Q5zzM+W6RoFRWUZqad/l1RetiF5SQMIrI3O1z7gSKrZB0Wh5ugwGSMSPw==",
       "requires": {
-        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.309"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": {
+          "version": "0.2.3-alpha.309",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.309.tgz",
+          "integrity": "sha512-5qn02o7J+a1/VfpM1NkbIa4q7PNRvqPnwfqB9lg9KCDnGe46WutpnUIzkpvylJhOS9xguYXA2YGvDUKpE86pkg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/baseprops": {
@@ -20201,11 +20502,19 @@
       "requires": {}
     },
     "@gemeente-denhaag/button": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/button/-/button-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-XLinVuTrGYNQtkVup8TwBWRfJ/0FLkd5JcnjzD8QdUQqTblndHVbkQw9KfuUn77/R4IwrT/+wqzNRhek0Wy6gg==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/button/-/button-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-zu6DHMlzcDaa5WuIGS483jRY67kWL7furFh3MrXdms7I687zokSIYRG9F9CU5wGSo6kBSpZpnx21B7QuAk/YHw==",
       "requires": {
-        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.309"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": {
+          "version": "0.2.3-alpha.309",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.309.tgz",
+          "integrity": "sha512-5qn02o7J+a1/VfpM1NkbIa4q7PNRvqPnwfqB9lg9KCDnGe46WutpnUIzkpvylJhOS9xguYXA2YGvDUKpE86pkg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/card": {
@@ -20216,6 +20525,14 @@
         "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
         "@gemeente-denhaag/icons": "0.2.3-alpha.301",
         "@material-ui/core": "4.12.4"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/checkbox": {
@@ -20224,6 +20541,14 @@
       "integrity": "sha512-vAKSH5dgHiqSNydEuxyX9oH8mln0H7qpEX7A9nXU/CoeIIFnMR3sOAcu8QzUgcvaPAO8NOXYbHbCxmaZXnG9GA==",
       "requires": {
         "@gemeente-denhaag/icons": "0.2.3-alpha.301"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/components-react": {
@@ -20262,6 +20587,75 @@
         "@gemeente-denhaag/textfield": "0.2.3-alpha.301",
         "@gemeente-denhaag/timeline": "0.2.3-alpha.301",
         "@gemeente-denhaag/typography": "0.2.3-alpha.301"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/alert": {
+          "version": "0.1.1-alpha.271",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/alert/-/alert-0.1.1-alpha.271.tgz",
+          "integrity": "sha512-lMFrK3t8MqYGgddIptPXcSdV1UTypI3FIVLYcDFiUdSIRlClxyJB/csFhPbSprgyByaLDJqcaqmhHAoWtBtJ8g==",
+          "requires": {
+            "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
+            "@gemeente-denhaag/button": "0.2.3-alpha.301",
+            "@gemeente-denhaag/iconbutton": "0.2.3-alpha.301",
+            "@gemeente-denhaag/icons": "0.2.3-alpha.301",
+            "@gemeente-denhaag/typography": "0.2.3-alpha.301"
+          }
+        },
+        "@gemeente-denhaag/basedatadisplayprops": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+          "requires": {
+            "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+          }
+        },
+        "@gemeente-denhaag/button": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/button/-/button-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-XLinVuTrGYNQtkVup8TwBWRfJ/0FLkd5JcnjzD8QdUQqTblndHVbkQw9KfuUn77/R4IwrT/+wqzNRhek0Wy6gg==",
+          "requires": {
+            "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+          }
+        },
+        "@gemeente-denhaag/divider": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/divider/-/divider-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-YiHVXS4hgfN3bMMcVXB/n4fk41L9Es36HyZiegBqX3HRmumLJiJ24LVa4FGEzhWWy5BfsdNdtgK2AYlpz0o6tw==",
+          "requires": {
+            "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301",
+            "@material-ui/core": "4.12.4"
+          }
+        },
+        "@gemeente-denhaag/form-field": {
+          "version": "0.1.1-alpha.177",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/form-field/-/form-field-0.1.1-alpha.177.tgz",
+          "integrity": "sha512-JQ2KUGdUlebgGk+T83x3RtfPr5Ok3LjLXjC2WQaEWprL2Yo8DIuMQ/fsQ8K77sJUIZnCwniHCsFBkwX5F6pMjA==",
+          "requires": {}
+        },
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        },
+        "@gemeente-denhaag/tab": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/tab/-/tab-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-mork5CQfgv0vzfEFT1QEj/BVFGCVAYCGttuAQDqCsIHCUN5pOi6n2rLw3r5BHAnbI1dl/xEDZskcyxnbvSt6Vg==",
+          "requires": {
+            "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
+            "@material-ui/core": "4.12.4",
+            "@material-ui/lab": "4.11.3-deprecations.1"
+          }
+        },
+        "@gemeente-denhaag/typography": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-TswEuavsfYwQu2UotDoqvZ9HPwDA2gUSTmdrH4Bwu0khAznK7g+fsx//7MoJP6YpQB08rar1Z+CwE3lvlu+4WA==",
+          "requires": {
+            "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301"
+          }
+        }
       }
     },
     "@gemeente-denhaag/datepicker": {
@@ -20271,6 +20665,14 @@
       "requires": {
         "@gemeente-denhaag/icons": "0.2.3-alpha.301",
         "date-fns": "2.28.0"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/design-tokens-components": {
@@ -20279,11 +20681,11 @@
       "integrity": "sha512-Ga0bF9HXHlIykus5MQcjKLXPX0PxKgdCz22w8sAz1AoQbgWR5fPHKzehBv0RzbE1wGhVGcM3EhJeQgPQYkNOJw=="
     },
     "@gemeente-denhaag/divider": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/divider/-/divider-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-YiHVXS4hgfN3bMMcVXB/n4fk41L9Es36HyZiegBqX3HRmumLJiJ24LVa4FGEzhWWy5BfsdNdtgK2AYlpz0o6tw==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/divider/-/divider-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-BGP91zBxCF928kTdJn2BdnnnvYQaiNvX0JKLGzP17BSWbh+5mxuEbiHWZvfABRui2HAUVB4hrFv+d4YEKAZ/DQ==",
       "requires": {
-        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301",
+        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.309",
         "@material-ui/core": "4.12.4"
       }
     },
@@ -20296,9 +20698,9 @@
       }
     },
     "@gemeente-denhaag/form-field": {
-      "version": "0.1.1-alpha.177",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/form-field/-/form-field-0.1.1-alpha.177.tgz",
-      "integrity": "sha512-JQ2KUGdUlebgGk+T83x3RtfPr5Ok3LjLXjC2WQaEWprL2Yo8DIuMQ/fsQ8K77sJUIZnCwniHCsFBkwX5F6pMjA==",
+      "version": "0.1.1-alpha.185",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/form-field/-/form-field-0.1.1-alpha.185.tgz",
+      "integrity": "sha512-kliK81O5zThFoLbVKFPMC5coeUzKYA8IFcvPCLIldwCChSlcuEUFiBbVg4arQV6vAlhe+YzTa030qSSfAvM11Q==",
       "requires": {}
     },
     "@gemeente-denhaag/formcontrol": {
@@ -20323,6 +20725,24 @@
         "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
         "@gemeente-denhaag/typography": "0.2.3-alpha.301",
         "@material-ui/core": "4.12.4"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/basedatadisplayprops": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+          "requires": {
+            "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+          }
+        },
+        "@gemeente-denhaag/typography": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-TswEuavsfYwQu2UotDoqvZ9HPwDA2gUSTmdrH4Bwu0khAznK7g+fsx//7MoJP6YpQB08rar1Z+CwE3lvlu+4WA==",
+          "requires": {
+            "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301"
+          }
+        }
       }
     },
     "@gemeente-denhaag/header": {
@@ -20342,9 +20762,9 @@
       "requires": {}
     },
     "@gemeente-denhaag/icons": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-9AES7P2r3KO+5kVCaSDNL2BdYRRPNTHKFh5MzsuS3ulWh07BVWltGcH1pKYidfwLIuf/15UlNWmIy3tMevlKuw==",
       "requires": {}
     },
     "@gemeente-denhaag/inputlabel": {
@@ -20363,6 +20783,14 @@
       "requires": {
         "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
         "@gemeente-denhaag/icons": "0.2.3-alpha.301"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/list": {
@@ -20372,6 +20800,14 @@
       "requires": {
         "@gemeente-denhaag/iconbutton": "0.2.3-alpha.301",
         "@gemeente-denhaag/icons": "0.2.3-alpha.301"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/menu": {
@@ -20381,6 +20817,14 @@
       "requires": {
         "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
         "@gemeente-denhaag/icons": "0.2.3-alpha.301"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/page": {
@@ -20397,6 +20841,30 @@
         "@gemeente-denhaag/icons": "0.2.3-alpha.301",
         "@gemeente-denhaag/step-marker": "0.0.1-alpha.2",
         "@gemeente-denhaag/typography": "0.2.3-alpha.301"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/basedatadisplayprops": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+          "requires": {
+            "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+          }
+        },
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        },
+        "@gemeente-denhaag/typography": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-TswEuavsfYwQu2UotDoqvZ9HPwDA2gUSTmdrH4Bwu0khAznK7g+fsx//7MoJP6YpQB08rar1Z+CwE3lvlu+4WA==",
+          "requires": {
+            "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301"
+          }
+        }
       }
     },
     "@gemeente-denhaag/radio": {
@@ -20449,13 +20917,21 @@
       }
     },
     "@gemeente-denhaag/tab": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/tab/-/tab-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-mork5CQfgv0vzfEFT1QEj/BVFGCVAYCGttuAQDqCsIHCUN5pOi6n2rLw3r5BHAnbI1dl/xEDZskcyxnbvSt6Vg==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/tab/-/tab-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-VXWJOq9miJhh4j6kmTsa/l7OnCIDRbqUB+sSUEHjUuyTGciCkjboo7d7Rhx5KcXxJqR8X6TNAPqZfQIcDmGb9A==",
       "requires": {
-        "@gemeente-denhaag/baseprops": "0.2.3-alpha.301",
+        "@gemeente-denhaag/baseprops": "0.2.3-alpha.309",
         "@material-ui/core": "4.12.4",
         "@material-ui/lab": "4.11.3-deprecations.1"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/baseprops": {
+          "version": "0.2.3-alpha.309",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.309.tgz",
+          "integrity": "sha512-5qn02o7J+a1/VfpM1NkbIa4q7PNRvqPnwfqB9lg9KCDnGe46WutpnUIzkpvylJhOS9xguYXA2YGvDUKpE86pkg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/table": {
@@ -20470,6 +20946,14 @@
       "integrity": "sha512-Q0ywlfzBgEpGQO4gZgqy1ju2Qly/IaRVdZlg4Li4GZdApbQw4Jdv7AcPUsjIeEcDfGXlOykiVkHkM3i13Y8jRA==",
       "requires": {
         "@gemeente-denhaag/icons": "0.2.3-alpha.301"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/textfield": {
@@ -20478,6 +20962,14 @@
       "integrity": "sha512-UKLKIPVvL2BhBwQ9zuNQa7yuBVhgxQxBrrJX9NESW1p+sUfI31AXq0xVe0m/5TmC5NMV2+2fYiuDqJNYgym8pg==",
       "requires": {
         "@gemeente-denhaag/icons": "0.2.3-alpha.301"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        }
       }
     },
     "@gemeente-denhaag/timeline": {
@@ -20489,14 +20981,38 @@
         "@gemeente-denhaag/icons": "0.2.3-alpha.301",
         "@gemeente-denhaag/typography": "0.2.3-alpha.301",
         "@material-ui/core": "4.12.4"
+      },
+      "dependencies": {
+        "@gemeente-denhaag/basedatadisplayprops": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/basedatadisplayprops/-/basedatadisplayprops-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-y4f2REskLEX9nBM9HYpxs3MlhUZ3I415gusnljPPUpG1i2urXRAGEY4N/M0Ca7xHzvcPbPlX6Sp2o9aakXUA2Q==",
+          "requires": {
+            "@gemeente-denhaag/baseprops": "0.2.3-alpha.301"
+          }
+        },
+        "@gemeente-denhaag/icons": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-P77ykOzvMWcfIkQbjWoe2nidvhJdbn3qo4hPcnzV7pCVlANisu1sgwHyaq8gy4PFO4VFOl9UNJUWvqRzJw/JMg==",
+          "requires": {}
+        },
+        "@gemeente-denhaag/typography": {
+          "version": "0.2.3-alpha.301",
+          "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.301.tgz",
+          "integrity": "sha512-TswEuavsfYwQu2UotDoqvZ9HPwDA2gUSTmdrH4Bwu0khAznK7g+fsx//7MoJP6YpQB08rar1Z+CwE3lvlu+4WA==",
+          "requires": {
+            "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301"
+          }
+        }
       }
     },
     "@gemeente-denhaag/typography": {
-      "version": "0.2.3-alpha.301",
-      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.301.tgz",
-      "integrity": "sha512-TswEuavsfYwQu2UotDoqvZ9HPwDA2gUSTmdrH4Bwu0khAznK7g+fsx//7MoJP6YpQB08rar1Z+CwE3lvlu+4WA==",
+      "version": "0.2.3-alpha.309",
+      "resolved": "https://registry.npmjs.org/@gemeente-denhaag/typography/-/typography-0.2.3-alpha.309.tgz",
+      "integrity": "sha512-JiTVM+mDCjWXt3PcCRYST4QoAMmVSoYN7Z+WShoyKWoQF889QOjWS5SEtOERKsd2CzL6n9+j0FCNssylyaMKcw==",
       "requires": {
-        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.301"
+        "@gemeente-denhaag/basedatadisplayprops": "0.2.3-alpha.309"
       }
     },
     "@graphql-codegen/add": {
diff --git a/pwa/package.json b/pwa/package.json
index 3fb3b2d84..43158f5ae 100644
--- a/pwa/package.json
+++ b/pwa/package.json
@@ -27,13 +27,17 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
-    "@gemeente-denhaag/components-react": "^0.1.1-alpha.239",
-    "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.301",
-    "@gemeente-denhaag/form-field": "^0.1.1-alpha.177",
+    "@gemeente-denhaag/alert": "0.1.1-alpha.279",
+    "@gemeente-denhaag/button": "0.2.3-alpha.309",
+    "@gemeente-denhaag/divider": "0.2.3-alpha.309",
+    "@gemeente-denhaag/form-field": "0.1.1-alpha.185",
+    "@gemeente-denhaag/icons": "0.2.3-alpha.309",
     "@gemeente-denhaag/process-steps": "^0.1.0-alpha.130",
     "@gemeente-denhaag/sidenav": "^0.1.0-alpha.119",
+    "@gemeente-denhaag/tab": "0.2.3-alpha.309",
     "@gemeente-denhaag/table": "^0.1.1-alpha.203",
     "@gemeente-denhaag/textarea": "^0.1.1-alpha.174",
+    "@gemeente-denhaag/typography": "0.2.3-alpha.309",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@utrecht/component-library-css": "^1.0.0-alpha.487",
@@ -84,11 +88,15 @@
     "typescript": "^4.6.3"
   },
   "overrides": {
-    "@gemeente-denhaag/components-react": {
+    "@gemeente-denhaag/alert": {
       "react": "^16 || ^17 || ^18",
       "react-dom": "^16 || ^17 || ^18"
     },
-    "@gemeente-denhaag/process-steps": {
+    "@gemeente-denhaag/button": {
+      "react": "^16 || ^17 || ^18",
+      "react-dom": "^16 || ^17 || ^18"
+    },
+    "@gemeente-denhaag/divider": {
       "react": "^16 || ^17 || ^18",
       "react-dom": "^16 || ^17 || ^18"
     },
@@ -100,10 +108,22 @@
       "react": "^16 || ^17 || ^18",
       "react-dom": "^16 || ^17 || ^18"
     },
+    "@gemeente-denhaag/icons": {
+      "react": "^16 || ^17 || ^18",
+      "react-dom": "^16 || ^17 || ^18"
+    },
     "@gemeente-denhaag/sidenav": {
       "react": "^16 || ^17 || ^18",
       "react-dom": "^16 || ^17 || ^18"
     },
+    "@gemeente-denhaag/process-steps": {
+      "react": "^16 || ^17 || ^18",
+      "react-dom": "^16 || ^17 || ^18"
+    },
+    "@gemeente-denhaag/tab": {
+      "react": "^16 || ^17 || ^18",
+      "react-dom": "^16 || ^17 || ^18"
+    },
     "@gemeente-denhaag/table": {
       "react": "^16 || ^17 || ^18",
       "react-dom": "^16 || ^17 || ^18"
diff --git a/pwa/src/components/applicationCard/ApplicationCard.tsx b/pwa/src/components/applicationCard/ApplicationCard.tsx
index f18eb5fa1..fd0e824ec 100644
--- a/pwa/src/components/applicationCard/ApplicationCard.tsx
+++ b/pwa/src/components/applicationCard/ApplicationCard.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./ApplicationCard.module.css";
-import { Paragraph } from "@gemeente-denhaag/components-react";
+import { Paragraph } from "@gemeente-denhaag/typography";
 import { Icon } from "@utrecht/component-library-react/dist/css-module";
 import { ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
diff --git a/pwa/src/components/categoryCard/CategoryCard.tsx b/pwa/src/components/categoryCard/CategoryCard.tsx
index d42350333..4fae3133c 100644
--- a/pwa/src/components/categoryCard/CategoryCard.tsx
+++ b/pwa/src/components/categoryCard/CategoryCard.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as styles from "./CategoryCard.module.css";
-import { Divider, Paragraph } from "@gemeente-denhaag/components-react";
+import { Divider } from "@gemeente-denhaag/divider";
+import { Paragraph } from "@gemeente-denhaag/typography";
 import { Icon } from "@utrecht/component-library-react/dist/css-module";
 import { Link } from "../link/Link";
 
diff --git a/pwa/src/components/componentCard/ComponentCard.tsx b/pwa/src/components/componentCard/ComponentCard.tsx
index 6eec9427f..9f510bd97 100644
--- a/pwa/src/components/componentCard/ComponentCard.tsx
+++ b/pwa/src/components/componentCard/ComponentCard.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./ComponentCard.module.css";
-import { Paragraph } from "@gemeente-denhaag/components-react";
+import { Paragraph } from "@gemeente-denhaag/typography";
 import { Icon } from "@utrecht/component-library-react/dist/css-module";
 import _ from "lodash";
 import { ArrowRightIcon } from "@gemeente-denhaag/icons";
diff --git a/pwa/src/components/organizationCard/OrganizationCard.tsx b/pwa/src/components/organizationCard/OrganizationCard.tsx
index 5671d2c97..3872cd88a 100644
--- a/pwa/src/components/organizationCard/OrganizationCard.tsx
+++ b/pwa/src/components/organizationCard/OrganizationCard.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./OrganizationCard.module.css";
-import { Paragraph } from "@gemeente-denhaag/components-react";
+import { Paragraph } from "@gemeente-denhaag/typography";
 import { Icon } from "@utrecht/component-library-react/dist/css-module";
 import { navigate } from "gatsby";
 import _ from "lodash";
diff --git a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx
index 50afcf6b5..7d728ac68 100644
--- a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx
+++ b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./ResultsDisplaySwitch.module.css";
-import { Button } from "@gemeente-denhaag/components-react";
+import { Button } from "@gemeente-denhaag/button";
 import { useTranslation } from "react-i18next";
 import { FiltersContext } from "../../context/filters";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
diff --git a/pwa/src/templates/about/AboutTemplate.tsx b/pwa/src/templates/about/AboutTemplate.tsx
index 57aba69bd..19a840126 100644
--- a/pwa/src/templates/about/AboutTemplate.tsx
+++ b/pwa/src/templates/about/AboutTemplate.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import * as styles from "./AboutTemplate.module.css";
 import { Container, QuoteWrapper } from "@conduction/components";
-import { Button, Paragraph } from "@gemeente-denhaag/components-react";
+import { Button } from "@gemeente-denhaag/button";
+import { Paragraph } from "@gemeente-denhaag/typography";
 import { Heading, Icon } from "@utrecht/component-library-react/dist/css-module";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gemeente-denhaag/table";
 import layersVisual from "./../../assets/images/5-lagen-visualisatie.png";
diff --git a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx
index 39a6ab6be..5d3fd453f 100644
--- a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx
+++ b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as styles from "./ApplicationsDetailTemplate.module.css";
-import { Button, Divider } from "@gemeente-denhaag/components-react";
+import { Button } from "@gemeente-denhaag/button";
+import { Divider } from "@gemeente-denhaag/divider";
 import { Container, Tag, ToolTip } from "@conduction/components";
 import { Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
 import { ArrowLeftIcon } from "@gemeente-denhaag/icons";
diff --git a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx
index daab0f2b2..480f0ac24 100644
--- a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx
+++ b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./CategoryDetailTemplate.module.css";
-import { Button } from "@gemeente-denhaag/components-react";
+import { Button } from "@gemeente-denhaag/button";
 import { BadgeCounter, Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
 import { Container, Tag } from "@conduction/components";
 import { Link } from "../../components";
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
index fef9032cc..3b12e59e1 100644
--- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
+++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as styles from "./ComponentsDetailTemplate.module.css";
-import { Button, Tab, TabContext, TabPanel, Tabs } from "@gemeente-denhaag/components-react";
+import { Button } from "@gemeente-denhaag/button";
+import { Tab, TabContext, TabPanel, Tabs } from "@gemeente-denhaag/tab";
 import { BadgeCounter, Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
 import { Container, InfoCard, Tag, NotificationPopUp as _NotificationPopUp } from "@conduction/components";
 import { navigate } from "gatsby";
diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx
index 9e74615ae..10f58f37d 100644
--- a/pwa/src/templates/components/ComponentsTemplate.tsx
+++ b/pwa/src/templates/components/ComponentsTemplate.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./ComponentsTemplate.module.css";
 import * as _ from "lodash";
-import { Alert } from "@gemeente-denhaag/components-react";
+import { Alert } from "@gemeente-denhaag/alert";
 import { Container } from "@conduction/components";
 import { ComponentResultTemplate } from "../templateParts/resultsTemplates/ComponentResultsTemplate";
 import { FiltersContext } from "../../context/filters";
diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx
index 154ceb2a2..a6bbfbc0f 100644
--- a/pwa/src/templates/landing/LandingTemplate.tsx
+++ b/pwa/src/templates/landing/LandingTemplate.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./LandingTemplate.module.css";
-import { Divider } from "@gemeente-denhaag/components-react";
+import { Divider } from "@gemeente-denhaag/divider";
 import { Container, DetailsCard, ImageAndDetailsCard } from "@conduction/components";
 import { FeedbackTemplate } from "../templateParts/feedback/FeedbackTemplate";
 import overOpenCatalogiImage from "./../../assets/svgs/SpotAPI.svg";
diff --git a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx
index d6d840e49..c3ba2ee73 100644
--- a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx
+++ b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import * as styles from "./OrganizationDetailTemplate.module.css";
 import { Container, Tag } from "@conduction/components";
-import { Divider, Tab, TabContext, TabPanel, Tabs } from "@gemeente-denhaag/components-react";
+import { Divider } from "@gemeente-denhaag/divider";
+import { Tab, TabContext, TabPanel, Tabs } from "@gemeente-denhaag/tab";
 import { BadgeCounter, Paragraph, Heading } from "@utrecht/component-library-react/dist/css-module";
 import { GitHubLogo } from "../../assets/svgs/GitHub";
 import { ComponentCardsAccordionTemplate } from "../templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate";
diff --git a/pwa/src/templates/templateParts/categoriesCardsAccordion/header/CategoriesCardsAccordionHeaderTemplate.tsx b/pwa/src/templates/templateParts/categoriesCardsAccordion/header/CategoriesCardsAccordionHeaderTemplate.tsx
index 343dd4c07..1e7971bd5 100644
--- a/pwa/src/templates/templateParts/categoriesCardsAccordion/header/CategoriesCardsAccordionHeaderTemplate.tsx
+++ b/pwa/src/templates/templateParts/categoriesCardsAccordion/header/CategoriesCardsAccordionHeaderTemplate.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./CategoriesCardsAccordionHeaderTemplate.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Divider } from "@gemeente-denhaag/components-react";
+import { Divider } from "@gemeente-denhaag/divider";
 import { BadgeCounter, Heading } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
 import { faChevronRight, faTags } from "@fortawesome/free-solid-svg-icons";
diff --git a/pwa/src/templates/templateParts/componentCardsAccordion/header/ComponentCardsAccordionHeaderTemplate.tsx b/pwa/src/templates/templateParts/componentCardsAccordion/header/ComponentCardsAccordionHeaderTemplate.tsx
index 82a3ce422..2551fc93a 100644
--- a/pwa/src/templates/templateParts/componentCardsAccordion/header/ComponentCardsAccordionHeaderTemplate.tsx
+++ b/pwa/src/templates/templateParts/componentCardsAccordion/header/ComponentCardsAccordionHeaderTemplate.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as styles from "./ComponentCardsAccordionHeaderTemplate.module.css";
 import { faChevronRight, faLayerGroup } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Divider } from "@gemeente-denhaag/components-react";
+import { Divider } from "@gemeente-denhaag/divider";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import _ from "lodash";
diff --git a/pwa/src/templates/templateParts/componentCategoryAccordion/ComponentCategoryAccordionTemplate.tsx b/pwa/src/templates/templateParts/componentCategoryAccordion/ComponentCategoryAccordionTemplate.tsx
index 25294a77a..d844984fd 100644
--- a/pwa/src/templates/templateParts/componentCategoryAccordion/ComponentCategoryAccordionTemplate.tsx
+++ b/pwa/src/templates/templateParts/componentCategoryAccordion/ComponentCategoryAccordionTemplate.tsx
@@ -3,7 +3,7 @@ import * as styles from "./ComponentCategoryAccordionTemplate.module.css";
 import { categories, TCategories } from "../../../data/categories";
 import { LayerAccordion } from "../layerAccordion/LayerAccordionTemplate";
 import { LayerAccordionFiltersTemplate } from "../layerAccordion/filters/LayerAccordionFiltersTemplate";
-import { Button } from "@gemeente-denhaag/components-react";
+import { Button } from "@gemeente-denhaag/button";
 import { baseFilters, FiltersContext } from "../../../context/filters";
 import clsx from "clsx";
 import { navigate } from "gatsby";
diff --git a/pwa/src/templates/templateParts/componentCategoryAccordion/header/ComponentCategoryAccordionHeaderTemplate.tsx b/pwa/src/templates/templateParts/componentCategoryAccordion/header/ComponentCategoryAccordionHeaderTemplate.tsx
index 80f8f48cc..7b8619812 100644
--- a/pwa/src/templates/templateParts/componentCategoryAccordion/header/ComponentCategoryAccordionHeaderTemplate.tsx
+++ b/pwa/src/templates/templateParts/componentCategoryAccordion/header/ComponentCategoryAccordionHeaderTemplate.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./ComponentCategoryAccordionHeaderTemplate.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Divider } from "@gemeente-denhaag/components-react";
+import { Divider } from "@gemeente-denhaag/divider";
 import clsx from "clsx";
 import { faChevronRight, faLayerGroup } from "@fortawesome/free-solid-svg-icons";
 import { Heading } from "@utrecht/component-library-react/dist/css-module";
diff --git a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
index d88345ad2..8f0ad6c41 100644
--- a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
+++ b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
@@ -6,7 +6,7 @@ import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/for
 import { InputCheckbox, SelectMultiple, SelectSingle } from "@conduction/components";
 import _ from "lodash";
 import clsx from "clsx";
-import { Divider } from "@gemeente-denhaag/components-react";
+import { Divider } from "@gemeente-denhaag/divider";
 import {
   upls,
   platforms,
diff --git a/pwa/src/templates/templateParts/landingDisplayTemplates/categories/CategoriesLandingDisplayTemplate.tsx b/pwa/src/templates/templateParts/landingDisplayTemplates/categories/CategoriesLandingDisplayTemplate.tsx
index 08941b640..878df7bc6 100644
--- a/pwa/src/templates/templateParts/landingDisplayTemplates/categories/CategoriesLandingDisplayTemplate.tsx
+++ b/pwa/src/templates/templateParts/landingDisplayTemplates/categories/CategoriesLandingDisplayTemplate.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./CategoriesLandingDisplayTemplate.module.css";
-import { Button } from "@gemeente-denhaag/components-react";
+import { Button } from "@gemeente-denhaag/button";
 import { Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
 import { useTranslation } from "react-i18next";
 import { CategoryCard } from "../../../../components/categoryCard/CategoryCard";
diff --git a/pwa/src/templates/templateParts/loginForm/LoginFormTemplate.tsx b/pwa/src/templates/templateParts/loginForm/LoginFormTemplate.tsx
index a1a0efafe..4a6de9b72 100644
--- a/pwa/src/templates/templateParts/loginForm/LoginFormTemplate.tsx
+++ b/pwa/src/templates/templateParts/loginForm/LoginFormTemplate.tsx
@@ -1,7 +1,9 @@
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { handleLogin } from "../../../services/auth";
-import { Alert, Button, FormField, FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/components-react";
+import { Alert } from "@gemeente-denhaag/alert";
+import { Button } from "@gemeente-denhaag/button";
+import { FormField, FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field";
 import * as styles from "./LoginFormTemplate.module.css";
 import { useTranslation } from "react-i18next";
 import { InputPassword, InputText } from "@conduction/components";
diff --git a/pwa/src/templates/templateParts/submitComponent/SubmitComponentTemplate.tsx b/pwa/src/templates/templateParts/submitComponent/SubmitComponentTemplate.tsx
index 65a25bab4..77809defc 100644
--- a/pwa/src/templates/templateParts/submitComponent/SubmitComponentTemplate.tsx
+++ b/pwa/src/templates/templateParts/submitComponent/SubmitComponentTemplate.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./SubmitComponentTemplate.module.css";
 import { ArrowRightIcon } from "@gemeente-denhaag/icons";
-import { Button } from "@gemeente-denhaag/components-react";
+import { Button } from "@gemeente-denhaag/button";
 import clsx from "clsx";
 import { navigate } from "gatsby";
 

From a3346d13db81ea9d9dd1267739a0339a868eb5f8 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Mon, 1 May 2023 16:23:06 +0200
Subject: [PATCH 7/7] refactor: import directly from component file

---
 .../components/applicationCard/ApplicationCard.tsx    |  2 +-
 pwa/src/components/componentCard/ComponentCard.tsx    |  2 +-
 .../components/organizationCard/OrganizationCard.tsx  |  2 +-
 pwa/src/styling/themeProvider/ThemeProvider.tsx       |  2 +-
 pwa/src/templates/about/AboutTemplate.tsx             |  3 ++-
 .../ApplicationsDetailTemplate.tsx                    |  4 +++-
 .../applicationsTemplate/ApplicationsTemplate.tsx     |  2 +-
 .../categoriesTemplate/CategoriesTemplate.tsx         |  2 +-
 .../categoryDetailTemplate/CategoryDetailTemplate.tsx |  3 ++-
 .../componentDetail/ComponentsDetailTemplate.tsx      | 11 +++++++----
 pwa/src/templates/components/ComponentsTemplate.tsx   |  2 +-
 .../apiDocumentation/ApiDocumentationTemplate.tsx     |  2 +-
 .../ContactDocumentationTemplate.tsx                  |  2 +-
 .../usageDocumentation/UsageDocumentationTemplate.tsx |  2 +-
 pwa/src/templates/landing/LandingTemplate.tsx         |  3 ++-
 .../organizationDetail/OrganizationDetailTemplate.tsx |  3 ++-
 .../RelationsDependenciesTemplate.tsx                 |  1 -
 .../templateParts/download/DownloadTemplate.tsx       |  9 +++++----
 .../filters/activeFilters/ActiveFiltersTemplate.tsx   |  2 +-
 .../horizontalFilters/HorizontalFiltersTemplate.tsx   |  2 +-
 .../verticalFilters/VerticalFiltersTemplate.tsx       |  3 ++-
 .../templates/templateParts/footer/FooterTemplate.tsx |  2 +-
 .../templates/templateParts/header/HeaderTemplate.tsx |  4 +++-
 .../cards/CardsLandingDisplayTemplate.tsx             |  2 +-
 .../layerAccordion/LayerAccordionTemplate.tsx         |  2 +-
 .../templateParts/loginForm/LoginFormTemplate.tsx     |  2 +-
 .../resultsTemplates/table/TableResultTemplate.tsx    |  2 +-
 27 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/pwa/src/components/applicationCard/ApplicationCard.tsx b/pwa/src/components/applicationCard/ApplicationCard.tsx
index fd0e824ec..58d027160 100644
--- a/pwa/src/components/applicationCard/ApplicationCard.tsx
+++ b/pwa/src/components/applicationCard/ApplicationCard.tsx
@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faHouse, faLaptopCode } from "@fortawesome/free-solid-svg-icons";
 import { ToolTip } from "../toolTip/ToolTip";
 import { useTranslation } from "react-i18next";
-import { Tag } from "@conduction/components";
+import { Tag } from "@conduction/components/lib/components/tag/Tag";
 import { Link } from "../../components";
 
 export interface ApplicationCardProps {
diff --git a/pwa/src/components/componentCard/ComponentCard.tsx b/pwa/src/components/componentCard/ComponentCard.tsx
index 9f510bd97..89cdb5744 100644
--- a/pwa/src/components/componentCard/ComponentCard.tsx
+++ b/pwa/src/components/componentCard/ComponentCard.tsx
@@ -10,7 +10,7 @@ import { GitHubLogo } from "../../assets/svgs/GitHub";
 import { ToolTip } from "../toolTip/ToolTip";
 import { categories as _categories, TCategories } from "../../data/categories";
 import { useTranslation } from "react-i18next";
-import { Tag } from "@conduction/components";
+import { Tag } from "@conduction/components/lib/components/tag/Tag";
 import { Link } from "../../components";
 
 export interface ComponentCardProps {
diff --git a/pwa/src/components/organizationCard/OrganizationCard.tsx b/pwa/src/components/organizationCard/OrganizationCard.tsx
index 3872cd88a..19815a22f 100644
--- a/pwa/src/components/organizationCard/OrganizationCard.tsx
+++ b/pwa/src/components/organizationCard/OrganizationCard.tsx
@@ -12,7 +12,7 @@ import { GitLabLogo } from "../../assets/svgs/GitLab";
 import { ToolTip } from "../toolTip/ToolTip";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { Tag } from "@conduction/components";
+import { Tag } from "@conduction/components/lib/components/tag/Tag";
 import { Link } from "../../components";
 
 export interface OrganizationCardProps {
diff --git a/pwa/src/styling/themeProvider/ThemeProvider.tsx b/pwa/src/styling/themeProvider/ThemeProvider.tsx
index ffb0a7a6b..5bffea34c 100644
--- a/pwa/src/styling/themeProvider/ThemeProvider.tsx
+++ b/pwa/src/styling/themeProvider/ThemeProvider.tsx
@@ -6,7 +6,7 @@ import "@utrecht/component-library-css";
 // import "@utrecht/design-tokens/dist/index.css";
 import { themes } from "../../data/themes";
 import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field";
-import { SelectSingle } from "@conduction/components";
+import { SelectSingle } from "@conduction/components/lib/components/formFields/select/select";
 import { Document } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
 
diff --git a/pwa/src/templates/about/AboutTemplate.tsx b/pwa/src/templates/about/AboutTemplate.tsx
index 19a840126..dc6633a52 100644
--- a/pwa/src/templates/about/AboutTemplate.tsx
+++ b/pwa/src/templates/about/AboutTemplate.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as styles from "./AboutTemplate.module.css";
-import { Container, QuoteWrapper } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
+import { QuoteWrapper } from "@conduction/components/lib/components/quoteWrapper/QuoteWrapper";
 import { Button } from "@gemeente-denhaag/button";
 import { Paragraph } from "@gemeente-denhaag/typography";
 import { Heading, Icon } from "@utrecht/component-library-react/dist/css-module";
diff --git a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx
index 5d3fd453f..c5ea799cb 100644
--- a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx
+++ b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx
@@ -2,7 +2,9 @@ import * as React from "react";
 import * as styles from "./ApplicationsDetailTemplate.module.css";
 import { Button } from "@gemeente-denhaag/button";
 import { Divider } from "@gemeente-denhaag/divider";
-import { Container, Tag, ToolTip } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
+import { Tag } from "@conduction/components/lib/components/tag/Tag";
+import { Tooltip } from "@conduction/components/lib/components/tooltip/Tooltip";
 import { Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
 import { ArrowLeftIcon } from "@gemeente-denhaag/icons";
 import { useTranslation } from "react-i18next";
diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx
index 785c56be4..986f4ca78 100644
--- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx
+++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./ApplicationsTemplate.module.css";
 import { Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
-import { Container } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
 import { FiltersContext } from "../../context/filters";
 import { useTranslation } from "react-i18next";
 import { ApplicationCard } from "../../components/applicationCard/ApplicationCard";
diff --git a/pwa/src/templates/categoriesTemplate/CategoriesTemplate.tsx b/pwa/src/templates/categoriesTemplate/CategoriesTemplate.tsx
index 1a6a80227..d093988ec 100644
--- a/pwa/src/templates/categoriesTemplate/CategoriesTemplate.tsx
+++ b/pwa/src/templates/categoriesTemplate/CategoriesTemplate.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./CategoriesTemplate.module.css";
 import { Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
-import { Container } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
 import { useTranslation } from "react-i18next";
 import { TEMPORARY_PORTFOLIOS } from "../../data/portfolio";
 import { CategoriesardsAccordionTemplate } from "../templateParts/categoriesCardsAccordion/CategoriesCardsAccordionTemplate";
diff --git a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx
index 480f0ac24..4bbe3ca32 100644
--- a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx
+++ b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx
@@ -2,7 +2,8 @@ import * as React from "react";
 import * as styles from "./CategoryDetailTemplate.module.css";
 import { Button } from "@gemeente-denhaag/button";
 import { BadgeCounter, Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
-import { Container, Tag } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
+import { Tag } from "@conduction/components/lib/components/tag/Tag";
 import { Link } from "../../components";
 import { ArrowLeftIcon } from "@gemeente-denhaag/icons";
 import { useTranslation } from "react-i18next";
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
index 3b12e59e1..9d2c6612e 100644
--- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
+++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -3,7 +3,13 @@ import * as styles from "./ComponentsDetailTemplate.module.css";
 import { Button } from "@gemeente-denhaag/button";
 import { Tab, TabContext, TabPanel, Tabs } from "@gemeente-denhaag/tab";
 import { BadgeCounter, Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
-import { Container, InfoCard, Tag, NotificationPopUp as _NotificationPopUp } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
+import { Tag } from "@conduction/components/lib/components/tag/Tag";
+import { InfoCard } from "@conduction/components/lib/components/card/index";
+import {
+  NotificationPopUp,
+  NotificationPopUpController,
+} from "@conduction/components/lib/components/notificationPopUp/NotificationPopUp";
 import { navigate } from "gatsby";
 import { ArrowLeftIcon, ArrowRightIcon, ExternalLinkIcon, CallIcon } from "@gemeente-denhaag/icons";
 import { useTranslation } from "react-i18next";
@@ -39,9 +45,6 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
   const [currentTab, setCurrentTab] = React.useState<number>(0);
   const [filters] = React.useContext(FiltersContext);
 
-  const NotificationPopUpController = _NotificationPopUp.controller;
-  const NotificationPopUp = _NotificationPopUp.NotificationPopUp;
-
   const { isVisible, show, hide } = NotificationPopUpController();
 
   const queryClient = new QueryClient();
diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx
index 10f58f37d..ddd60fc36 100644
--- a/pwa/src/templates/components/ComponentsTemplate.tsx
+++ b/pwa/src/templates/components/ComponentsTemplate.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as styles from "./ComponentsTemplate.module.css";
 import * as _ from "lodash";
 import { Alert } from "@gemeente-denhaag/alert";
-import { Container } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
 import { ComponentResultTemplate } from "../templateParts/resultsTemplates/ComponentResultsTemplate";
 import { FiltersContext } from "../../context/filters";
 import { useTranslation } from "react-i18next";
diff --git a/pwa/src/templates/documentation/apiDocumentation/ApiDocumentationTemplate.tsx b/pwa/src/templates/documentation/apiDocumentation/ApiDocumentationTemplate.tsx
index c66f8db38..814b598a8 100644
--- a/pwa/src/templates/documentation/apiDocumentation/ApiDocumentationTemplate.tsx
+++ b/pwa/src/templates/documentation/apiDocumentation/ApiDocumentationTemplate.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./ApiDocumentationTemplate.module.css";
-import { Container } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
 import { Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
 import { ExternalLinkIcon } from "@gemeente-denhaag/icons";
 import { Link } from "../../../components";
diff --git a/pwa/src/templates/documentation/contactDocumentation/ContactDocumentationTemplate.tsx b/pwa/src/templates/documentation/contactDocumentation/ContactDocumentationTemplate.tsx
index 96a6fb048..746ada52f 100644
--- a/pwa/src/templates/documentation/contactDocumentation/ContactDocumentationTemplate.tsx
+++ b/pwa/src/templates/documentation/contactDocumentation/ContactDocumentationTemplate.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./ContactDocumentationTemplate.module.css";
-import { Container } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
 import { Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
 import { ExternalLinkIcon } from "@gemeente-denhaag/icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
diff --git a/pwa/src/templates/documentation/usageDocumentation/UsageDocumentationTemplate.tsx b/pwa/src/templates/documentation/usageDocumentation/UsageDocumentationTemplate.tsx
index 69e1d7e5d..0ebf5d89c 100644
--- a/pwa/src/templates/documentation/usageDocumentation/UsageDocumentationTemplate.tsx
+++ b/pwa/src/templates/documentation/usageDocumentation/UsageDocumentationTemplate.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./UsageDocumentationTemplate.module.css";
-import { Container } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
 import { CodeBlock, Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module";
 import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
 import dedent from "dedent";
diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx
index a6bbfbc0f..ea6c5405f 100644
--- a/pwa/src/templates/landing/LandingTemplate.tsx
+++ b/pwa/src/templates/landing/LandingTemplate.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import * as styles from "./LandingTemplate.module.css";
 import { Divider } from "@gemeente-denhaag/divider";
-import { Container, DetailsCard, ImageAndDetailsCard } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
+import { DetailsCard, ImageAndDetailsCard } from "@conduction/components/lib/components/card/index";
 import { FeedbackTemplate } from "../templateParts/feedback/FeedbackTemplate";
 import overOpenCatalogiImage from "./../../assets/svgs/SpotAPI.svg";
 import aanDeSlagMetOpenCatalogiImage from "./../../assets/svgs/SpotForum.svg";
diff --git a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx
index c3ba2ee73..b0203eeae 100644
--- a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx
+++ b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as styles from "./OrganizationDetailTemplate.module.css";
-import { Container, Tag } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
+import { Tag } from "@conduction/components/lib/components/tag/Tag";
 import { Divider } from "@gemeente-denhaag/divider";
 import { Tab, TabContext, TabPanel, Tabs } from "@gemeente-denhaag/tab";
 import { BadgeCounter, Paragraph, Heading } from "@utrecht/component-library-react/dist/css-module";
diff --git a/pwa/src/templates/templateParts/dependenciesTemplates/relationsDependenciesTemplate/RelationsDependenciesTemplate.tsx b/pwa/src/templates/templateParts/dependenciesTemplates/relationsDependenciesTemplate/RelationsDependenciesTemplate.tsx
index b285ee269..f575a7206 100644
--- a/pwa/src/templates/templateParts/dependenciesTemplates/relationsDependenciesTemplate/RelationsDependenciesTemplate.tsx
+++ b/pwa/src/templates/templateParts/dependenciesTemplates/relationsDependenciesTemplate/RelationsDependenciesTemplate.tsx
@@ -7,7 +7,6 @@ import { getTokenValue } from "../../../../services/getTokenValue";
 import { addNewLineToString } from "../../../../services/addNewLineToString";
 import { navigate } from "gatsby";
 import { NodeToolTip } from "../../../../components/toolTip/ToolTip";
-import { NotificationPopUp as _NotificationPopUp } from "@conduction/components";
 import "vis-network/styles/vis-network.css";
 import { renderToStaticMarkup } from "react-dom/server";
 
diff --git a/pwa/src/templates/templateParts/download/DownloadTemplate.tsx b/pwa/src/templates/templateParts/download/DownloadTemplate.tsx
index 2f9ac7eee..a57fc99b1 100644
--- a/pwa/src/templates/templateParts/download/DownloadTemplate.tsx
+++ b/pwa/src/templates/templateParts/download/DownloadTemplate.tsx
@@ -1,7 +1,11 @@
 import * as React from "react";
 import * as styles from "./DownloadTemplate.module.css";
 
-import { DownloadCard, NotificationPopUp as _NotificationPopUp } from "@conduction/components";
+import { DownloadCard } from "@conduction/components/lib/components/card/index";
+import {
+  NotificationPopUp,
+  NotificationPopUpController,
+} from "@conduction/components/lib/components/notificationPopUp/NotificationPopUp";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload } from "@fortawesome/free-solid-svg-icons";
 import { ArrowLeftIcon } from "@gemeente-denhaag/icons";
@@ -20,9 +24,6 @@ export const DownloadTemplate: React.FC<DownloadTemplateProps> = ({ layoutClassN
   const { t } = useTranslation();
   const { screenSize } = React.useContext(GatsbyContext);
 
-  const NotificationPopUpController = _NotificationPopUp.controller;
-  const NotificationPopUp = _NotificationPopUp.NotificationPopUp;
-
   const { isVisible, show, hide } = NotificationPopUpController();
 
   return (
diff --git a/pwa/src/templates/templateParts/filters/activeFilters/ActiveFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/activeFilters/ActiveFiltersTemplate.tsx
index ed280e609..56cf53d8a 100644
--- a/pwa/src/templates/templateParts/filters/activeFilters/ActiveFiltersTemplate.tsx
+++ b/pwa/src/templates/templateParts/filters/activeFilters/ActiveFiltersTemplate.tsx
@@ -11,7 +11,7 @@ import {
   referentieComponenten,
   categories,
 } from "../../../../data/filters";
-import { Tag } from "@conduction/components";
+import { Tag } from "@conduction/components/lib/components/tag/Tag";
 import { useTranslation } from "react-i18next";
 import { Heading } from "@utrecht/component-library-react/dist/css-module";
 
diff --git a/pwa/src/templates/templateParts/filters/horizontalFilters/HorizontalFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/horizontalFilters/HorizontalFiltersTemplate.tsx
index 2e6ff7dd5..a721a904e 100644
--- a/pwa/src/templates/templateParts/filters/horizontalFilters/HorizontalFiltersTemplate.tsx
+++ b/pwa/src/templates/templateParts/filters/horizontalFilters/HorizontalFiltersTemplate.tsx
@@ -3,7 +3,7 @@ import * as styles from "./HorizontalFiltersTemplate.module.css";
 import { useForm } from "react-hook-form";
 import { FiltersContext } from "../../../../context/filters";
 import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field";
-import { InputText } from "@conduction/components";
+import { InputText } from "@conduction/components/lib/components/formFields/input";
 import _ from "lodash";
 
 export const HorizontalFiltersTemplate: React.FC = () => {
diff --git a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
index 8f0ad6c41..e375cb960 100644
--- a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
+++ b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
@@ -3,7 +3,8 @@ import * as styles from "./VerticalFiltersTemplate.module.css";
 import { useForm } from "react-hook-form";
 import { FiltersContext } from "../../../../context/filters";
 import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field";
-import { InputCheckbox, SelectMultiple, SelectSingle } from "@conduction/components";
+import { InputCheckbox } from "@conduction/components/lib/components/formFields/checkbox/checkbox";
+import { SelectMultiple, SelectSingle } from "@conduction/components/lib/components/formFields/select/select";
 import _ from "lodash";
 import clsx from "clsx";
 import { Divider } from "@gemeente-denhaag/divider";
diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx
index b119d246d..68aa31bc4 100644
--- a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx
+++ b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./FooterTemplate.module.css";
-import { Container } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
 import LogoConduction from "../../../assets/svgs/LogoConduction.svg";
 import { navigate } from "gatsby";
 import { Icon } from "@utrecht/component-library-react/dist/css-module";
diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
index 7cb119c1e..56a8edd5e 100644
--- a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
+++ b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
@@ -3,7 +3,9 @@ import * as styles from "./HeaderTemplate.module.css";
 import { Paragraph, Heading } from "@utrecht/component-library-react/dist/css-module";
 import { useTranslation } from "react-i18next";
 import { navigate } from "gatsby";
-import { Container, SecondaryTopNav, Breadcrumbs, PrimaryTopNav } from "@conduction/components";
+import { Container } from "@conduction/components/lib/components/container/Container";
+import { SecondaryTopNav, PrimaryTopNav } from "@conduction/components/lib/components/topNav";
+import { Breadcrumbs } from "@conduction/components/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { baseFilters, FiltersContext } from "../../../context/filters";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
diff --git a/pwa/src/templates/templateParts/landingDisplayTemplates/cards/CardsLandingDisplayTemplate.tsx b/pwa/src/templates/templateParts/landingDisplayTemplates/cards/CardsLandingDisplayTemplate.tsx
index 8676a32ec..193b0db06 100644
--- a/pwa/src/templates/templateParts/landingDisplayTemplates/cards/CardsLandingDisplayTemplate.tsx
+++ b/pwa/src/templates/templateParts/landingDisplayTemplates/cards/CardsLandingDisplayTemplate.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./CardsLandingDisplayTemplate.module.css";
 import _ from "lodash";
-import { InfoCard } from "@conduction/components";
+import { InfoCard } from "@conduction/components/lib/components/card/index";
 import { Paragraph, Heading } from "@utrecht/component-library-react/dist/css-module";
 
 interface CardsLandingDisplayTemplateProps {}
diff --git a/pwa/src/templates/templateParts/layerAccordion/LayerAccordionTemplate.tsx b/pwa/src/templates/templateParts/layerAccordion/LayerAccordionTemplate.tsx
index 10dbb6458..49ed021e3 100644
--- a/pwa/src/templates/templateParts/layerAccordion/LayerAccordionTemplate.tsx
+++ b/pwa/src/templates/templateParts/layerAccordion/LayerAccordionTemplate.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./LayerAccordionTemplate.module.css";
-import { QuoteWrapper } from "@conduction/components";
+import { QuoteWrapper } from "@conduction/components/lib/components/quoteWrapper/QuoteWrapper";
 import Collapsible from "react-collapsible";
 
 interface LayerAccordionTemplateProps {
diff --git a/pwa/src/templates/templateParts/loginForm/LoginFormTemplate.tsx b/pwa/src/templates/templateParts/loginForm/LoginFormTemplate.tsx
index 4a6de9b72..c6c061926 100644
--- a/pwa/src/templates/templateParts/loginForm/LoginFormTemplate.tsx
+++ b/pwa/src/templates/templateParts/loginForm/LoginFormTemplate.tsx
@@ -6,7 +6,7 @@ import { Button } from "@gemeente-denhaag/button";
 import { FormField, FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field";
 import * as styles from "./LoginFormTemplate.module.css";
 import { useTranslation } from "react-i18next";
-import { InputPassword, InputText } from "@conduction/components";
+import { InputPassword, InputText } from "@conduction/components/lib/components/formFields/input";
 import APIService from "../../../apiService/apiService";
 import APIContext from "../../../apiService/apiContext";
 
diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
index 7608f0010..fac7cf12e 100644
--- a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
+++ b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
@@ -10,7 +10,7 @@ import { ToolTip } from "../../../../components/toolTip/ToolTip";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faInfoCircle, faLayerGroup } from "@fortawesome/free-solid-svg-icons";
 import clsx from "clsx";
-import { Tag } from "@conduction/components";
+import { Tag } from "@conduction/components/lib/components/tag/Tag";
 import { getResultsUrl } from "../../../../services/getResultsUrl";
 import { GitHubLogo } from "../../../../assets/svgs/GitHub";
 import { GitLabLogo } from "../../../../assets/svgs/GitLab";