From b09fcb69ed4ed3a149bc53ed14521638cdb292b1 Mon Sep 17 00:00:00 2001
From: JoeriRoijenga <jroijenga@quintor.nl>
Date: Tue, 17 Dec 2024 11:13:33 +0100
Subject: [PATCH 1/9] FIX: styling on pre-heading and radio-group is now
 correct

---
 packages/components-css/src/pre-heading/index.scss    | 2 ++
 packages/components-css/src/radio-group/index.scss    | 4 ++++
 packages/components-css/src/unordered-list/index.scss | 2 +-
 packages/storybook/config/preview.tsx                 | 5 +++--
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components-css/src/pre-heading/index.scss b/packages/components-css/src/pre-heading/index.scss
index 9d8b71a3e..0290382f1 100644
--- a/packages/components-css/src/pre-heading/index.scss
+++ b/packages/components-css/src/pre-heading/index.scss
@@ -13,6 +13,8 @@
 .rhc-pre-heading {
   --utrecht-pre-heading-color: var(--utrecht-heading-1-color, inherit);
   --utrecht-pre-heading-font-weight: var(--rhc-font-weight-regular, inherit);
+  --utrecht-pre-heading-font-size: var(--rhc-font-size-xs-desktop, inherit);
+  --utrecht-pre-heading-line-height: var(--rhc-line-height-md, inherit);
 
   grid-area: preheading;
 }
diff --git a/packages/components-css/src/radio-group/index.scss b/packages/components-css/src/radio-group/index.scss
index d91a47b3b..db6eb4529 100644
--- a/packages/components-css/src/radio-group/index.scss
+++ b/packages/components-css/src/radio-group/index.scss
@@ -8,3 +8,7 @@
 .rhc-radio-group {
   @include mixin.rhc-radio-group;
 }
+
+.utrecht-form-label {
+  line-height: 150%;
+}
diff --git a/packages/components-css/src/unordered-list/index.scss b/packages/components-css/src/unordered-list/index.scss
index dd3c0ac42..16c2f505a 100644
--- a/packages/components-css/src/unordered-list/index.scss
+++ b/packages/components-css/src/unordered-list/index.scss
@@ -8,7 +8,7 @@
   font-family: var(--utrecht-unordered-list-font-family);
   font-size: var(--utrecht-unordered-list-font-size);
   font-weight: var(--utrecht-unordered-list-font-weight);
-  line-height: var(--utrecht-unordered-list-line-heigh);
+  line-height: var(--utrecht-unordered-list-line-height);
   padding-inline-start: var(--utrecht-unordered-list-padding-inline-start);
 }
 
diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
index 0bf39317f..adbecfe24 100644
--- a/packages/storybook/config/preview.tsx
+++ b/packages/storybook/config/preview.tsx
@@ -9,7 +9,7 @@ import '@rijkshuisstijl-community/components-css/dist/index.css';
 import { defineCustomElements } from '@rijkshuisstijl-community/web-components-stencil/loader/index';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Preview } from '@storybook/react';
-import { UtrechtDocument } from '@utrecht/web-component-library-react';
+// import { UtrechtDocument } from '@utrecht/web-component-library-react';
 import { defineCustomElements as defineUtrechtCustomElements } from '@utrecht/web-component-library-stencil/loader/index';
 
 // Initialize web components
@@ -28,7 +28,8 @@ const preview: Preview = {
       },
       defaultTheme: 'RijkshuisstijlCommunity',
     }),
-    (Story: any) => <UtrechtDocument>{Story()}</UtrechtDocument>,
+    (Story: any) => Story(),
+    // (Story: any) => <UtrechtDocument>{Story()}</UtrechtDocument>,
   ],
   parameters: {
     previewTabs: {

From 4fa465870d0dc2c975477bb116a28484a2a7723f Mon Sep 17 00:00:00 2001
From: JoeriRoijenga <jroijenga@quintor.nl>
Date: Wed, 18 Dec 2024 13:19:38 +0100
Subject: [PATCH 2/9] FIX: styling correct on accordion, article and card
 component

---
 packages/components-css/src/accordion/index.scss | 7 +++++++
 packages/components-css/src/article/index.scss   | 7 +++++++
 packages/components-css/src/card/_mixin.scss     | 3 +++
 3 files changed, 17 insertions(+)

diff --git a/packages/components-css/src/accordion/index.scss b/packages/components-css/src/accordion/index.scss
index b36ac3b4b..7a8b5b075 100644
--- a/packages/components-css/src/accordion/index.scss
+++ b/packages/components-css/src/accordion/index.scss
@@ -66,3 +66,10 @@
   justify-content: center;
   margin-block: var(--rhc-accordion-button-icon-margin-block);
 }
+
+.utrecht-accordion__panel {
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  font-weight: var(--rhc-font-weight-regular, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
+}
diff --git a/packages/components-css/src/article/index.scss b/packages/components-css/src/article/index.scss
index 33b976582..8fb6a3e6a 100644
--- a/packages/components-css/src/article/index.scss
+++ b/packages/components-css/src/article/index.scss
@@ -1 +1,8 @@
 // if needed add styles here for the Article components.
+
+.utrecht-article {
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  font-weight: var(--rhc-font-weight-regular, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
+}
diff --git a/packages/components-css/src/card/_mixin.scss b/packages/components-css/src/card/_mixin.scss
index 9bb331fb7..ad5d22af1 100644
--- a/packages/components-css/src/card/_mixin.scss
+++ b/packages/components-css/src/card/_mixin.scss
@@ -5,7 +5,10 @@
   column-gap: var(--rhc-card-as-link-column-gap, 16px);
   display: inline-flex;
   flex-direction: column;
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
   inline-size: var(--rhc-card-as-link-inline-size, 328px);
+  line-height: var(--rhc-line-height-md, inherit);
   position: relative;
   text-decoration: none;
 }

From 98ae0751a341df0e1f564e0f2b125ca3779efe84 Mon Sep 17 00:00:00 2001
From: JoeriRoijenga <jroijenga@quintor.nl>
Date: Wed, 18 Dec 2024 15:06:56 +0100
Subject: [PATCH 3/9] FIX: figure and file input styling

---
 packages/components-css/src/figure/index.scss     | 4 ++++
 packages/components-css/src/file-input/index.scss | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/packages/components-css/src/figure/index.scss b/packages/components-css/src/figure/index.scss
index 45a7f28f0..272bf05f5 100644
--- a/packages/components-css/src/figure/index.scss
+++ b/packages/components-css/src/figure/index.scss
@@ -11,7 +11,11 @@
 }
 
 .utrecht-figure__caption {
+  --utrecht-figure-caption-font-size: var(--rhc-font-size-xs-desktop, inherit);
+  --utrecht-figure-caption-line-height: var(--rhc-line-height-md, inherit);
+
   border-inline-start: var(--utrecht-figure-caption-border-width) solid var(--utrecht-figure-caption-border-color);
+  font-family: var(--rhc-font-family-primary, inherit);
   padding-block-end: var(--utrecht-figure-caption-padding-block-end);
   padding-block-start: var(--utrecht-figure-caption-padding-block-start);
   padding-inline-start: var(--utrecht-figure-caption-padding-inline-start);
diff --git a/packages/components-css/src/file-input/index.scss b/packages/components-css/src/file-input/index.scss
index 44990a177..4b2b5f1e6 100644
--- a/packages/components-css/src/file-input/index.scss
+++ b/packages/components-css/src/file-input/index.scss
@@ -1,6 +1,8 @@
 .rhc-file-input {
   display: flex;
   flex-direction: column;
+  font-family: var(--rhc-font-family-primary, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
   row-gap: var(--rhc-file-input-row-gap);
 }
 

From 23c0e9364c0c54c16c9d2774b6194fe416f20742 Mon Sep 17 00:00:00 2001
From: JoeriRoijenga <jroijenga@quintor.nl>
Date: Fri, 20 Dec 2024 08:56:24 +0100
Subject: [PATCH 4/9] FIX multiple component stylings

---
 packages/components-css/src/footer/index.scss             | 1 +
 .../src/form-field-error-message/index.scss               | 2 ++
 packages/components-css/src/form-field/index.scss         | 4 ++++
 packages/components-css/src/link-list/index.scss          | 3 +++
 packages/components-css/src/link/_mixin.scss              | 3 +++
 packages/components-css/src/skip-link/_mixin.scss         | 3 +++
 packages/components-css/src/table/index.scss              | 8 ++++++++
 7 files changed, 24 insertions(+)

diff --git a/packages/components-css/src/footer/index.scss b/packages/components-css/src/footer/index.scss
index 84e851f5e..33686b727 100644
--- a/packages/components-css/src/footer/index.scss
+++ b/packages/components-css/src/footer/index.scss
@@ -50,6 +50,7 @@
 .rhc-page-footer__section,
 .rhc-page-footer__title {
   break-inside: avoid;
+  line-height: var(--rhc-line-height-md, inherit);
   padding-block-end: var(--rhc-page-footer-padding-block-end);
 }
 
diff --git a/packages/components-css/src/form-field-error-message/index.scss b/packages/components-css/src/form-field-error-message/index.scss
index 74258cc83..f6bdd6070 100644
--- a/packages/components-css/src/form-field-error-message/index.scss
+++ b/packages/components-css/src/form-field-error-message/index.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 .utrecht-form-field-error-message {
+  --utrecht-form-field-error-message-line-height: normal;
+
   &--icon-container {
     display: flex;
     &-icon {
diff --git a/packages/components-css/src/form-field/index.scss b/packages/components-css/src/form-field/index.scss
index 6cab4174f..6039ca52b 100644
--- a/packages/components-css/src/form-field/index.scss
+++ b/packages/components-css/src/form-field/index.scss
@@ -2,6 +2,10 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
+.utrecht-form-field {
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
+}
 
 .utrecht-rich-text .utrecht-form-field {
   margin-block-end: var(--utrecht-form-field-margin-block-end);
diff --git a/packages/components-css/src/link-list/index.scss b/packages/components-css/src/link-list/index.scss
index 057f8c23d..03179120d 100644
--- a/packages/components-css/src/link-list/index.scss
+++ b/packages/components-css/src/link-list/index.scss
@@ -13,4 +13,7 @@
 
 .utrecht-link-list__item {
   display: inline-flex;
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
 }
diff --git a/packages/components-css/src/link/_mixin.scss b/packages/components-css/src/link/_mixin.scss
index 14306b36d..6025ecb33 100644
--- a/packages/components-css/src/link/_mixin.scss
+++ b/packages/components-css/src/link/_mixin.scss
@@ -8,6 +8,9 @@
 
   column-gap: var(--utrecht-link-column-gap, inherit);
   display: inline-flex;
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
 }
 
 @mixin rhc-link--icon {
diff --git a/packages/components-css/src/skip-link/_mixin.scss b/packages/components-css/src/skip-link/_mixin.scss
index 7a5cd08c1..ca5ea22df 100644
--- a/packages/components-css/src/skip-link/_mixin.scss
+++ b/packages/components-css/src/skip-link/_mixin.scss
@@ -7,7 +7,10 @@
   box-shadow: var(--utrecht-skip-link-box-block-end-shadow-offset-x)
     var(--utrecht-skip-link-box-block-end-shadow-offset-y) var(--utrecht-skip-link-box-block-end-shadow-blur-radius)
     var(--utrecht-skip-link-box-block-end-shadow-spread-radius) var(--utrecht-skip-link-box-block-end-shadow-color);
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
   font-weight: var(--utrecht-skip-link-font-weight, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
   position: revert;
   text-underline-offset: var(--utrecht-skip-link-text-underline-offset, inherit);
 }
diff --git a/packages/components-css/src/table/index.scss b/packages/components-css/src/table/index.scss
index 15e4332c2..0b00a8b53 100644
--- a/packages/components-css/src/table/index.scss
+++ b/packages/components-css/src/table/index.scss
@@ -12,6 +12,8 @@
   }
   &__cell {
     color: var(--rhc-color-foreground-lint);
+    font-size: var(--rhc-font-size-xs-desktop, inherit);
+    line-height: var(--rhc-line-height-md, inherit);
   }
 
   &__header {
@@ -34,7 +36,13 @@
       --_utrecht-table-cell-text-align: start;
     }
 
+    &-cell {
+      --utrecht-table-cell-line-height: var(--rhc-line-height-md, inherit);
+    }
+
     &--cell {
+      --utrecht-table-cell-line-height: var(--rhc-line-height-md, inherit);
+
       &-row {
         --utrecht-table-header-cell-font-weight: --utrecht-table-row-border-block-end-width;
 

From 7ae66e94cc5e490171a261b6446e2dad258c7d4b Mon Sep 17 00:00:00 2001
From: JoeriRoijenga <jroijenga@quintor.nl>
Date: Fri, 20 Dec 2024 09:13:55 +0100
Subject: [PATCH 5/9] FIX: added design token instead of css

---
 packages/components-css/src/table/index.scss      | 2 --
 proprietary/design-tokens/figma/figma.tokens.json | 8 ++++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/components-css/src/table/index.scss b/packages/components-css/src/table/index.scss
index 0b00a8b53..64e99b1d9 100644
--- a/packages/components-css/src/table/index.scss
+++ b/packages/components-css/src/table/index.scss
@@ -12,8 +12,6 @@
   }
   &__cell {
     color: var(--rhc-color-foreground-lint);
-    font-size: var(--rhc-font-size-xs-desktop, inherit);
-    line-height: var(--rhc-line-height-md, inherit);
   }
 
   &__header {
diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
index 62ccdadb0..c76c1a9a9 100644
--- a/proprietary/design-tokens/figma/figma.tokens.json
+++ b/proprietary/design-tokens/figma/figma.tokens.json
@@ -6172,6 +6172,10 @@
           "padding-inline-start": {
             "value": "{rhc.space.200}",
             "type": "spacing"
+          },
+          "line-height": {
+            "value": "{rhc.line-height.md}",
+            "type": "lineHeights"
           }
         },
         "data-cell": {
@@ -6305,6 +6309,10 @@
               "type": "color"
             }
           }
+        },
+        "font-size": {
+            "value": "{rhc.font-size.xs.desktop}",
+            "type": "fontSizes"
         }
       }
     }

From 109cfde8e9cbbe7caa3d8bdfa2eb94a3e1e0d641 Mon Sep 17 00:00:00 2001
From: JoeriRoijenga <jroijenga@quintor.nl>
Date: Fri, 20 Dec 2024 10:32:00 +0100
Subject: [PATCH 6/9] FIX: added design token instead of css

---
 packages/components-css/src/figure/index.scss          |  3 ---
 .../src/form-field-error-message/index.scss            |  2 --
 proprietary/design-tokens/figma/figma.tokens.json      | 10 ++++++++++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/components-css/src/figure/index.scss b/packages/components-css/src/figure/index.scss
index 272bf05f5..679854a58 100644
--- a/packages/components-css/src/figure/index.scss
+++ b/packages/components-css/src/figure/index.scss
@@ -11,9 +11,6 @@
 }
 
 .utrecht-figure__caption {
-  --utrecht-figure-caption-font-size: var(--rhc-font-size-xs-desktop, inherit);
-  --utrecht-figure-caption-line-height: var(--rhc-line-height-md, inherit);
-
   border-inline-start: var(--utrecht-figure-caption-border-width) solid var(--utrecht-figure-caption-border-color);
   font-family: var(--rhc-font-family-primary, inherit);
   padding-block-end: var(--utrecht-figure-caption-padding-block-end);
diff --git a/packages/components-css/src/form-field-error-message/index.scss b/packages/components-css/src/form-field-error-message/index.scss
index f6bdd6070..74258cc83 100644
--- a/packages/components-css/src/form-field-error-message/index.scss
+++ b/packages/components-css/src/form-field-error-message/index.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 .utrecht-form-field-error-message {
-  --utrecht-form-field-error-message-line-height: normal;
-
   &--icon-container {
     display: flex;
     &-icon {
diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
index c76c1a9a9..e8cf362da 100644
--- a/proprietary/design-tokens/figma/figma.tokens.json
+++ b/proprietary/design-tokens/figma/figma.tokens.json
@@ -3338,6 +3338,10 @@
           "line-height": {
             "value": "{rhc.line-height.paragraph}",
             "type": "lineHeights"
+          },
+          "font-size": {
+            "value": "{rhc.font-size.xs.desktop}",
+            "type": "fontSizes"
           }
         },
         "img": {
@@ -3565,6 +3569,12 @@
             "value": "{rhc.space.100}",
             "type": "spacing"
           }
+        },
+        "error-message": {
+          "line-height": {
+              "value": "normal",
+              "type": "lineHeights"
+          }
         }
       }
     }

From 8e5f8b45eeb94e93f14164a63184b3163a7787fe Mon Sep 17 00:00:00 2001
From: JoeriRoijenga <jroijenga@quintor.nl>
Date: Mon, 23 Dec 2024 10:24:52 +0100
Subject: [PATCH 7/9] FIX: fixed breadcrumbs, link and blockquote styling

---
 packages/components-css/src/blockquote/_mixin.scss    | 1 +
 packages/components-css/src/blockquote/index.scss     | 3 +++
 packages/components-css/src/breadcrumb-nav/index.scss | 5 ++++-
 packages/components-css/src/dot-badge/_mixin.scss     | 2 ++
 packages/components-css/src/figure/index.scss         | 5 +++++
 packages/components-css/src/link-list/index.scss      | 3 +++
 6 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/components-css/src/blockquote/_mixin.scss b/packages/components-css/src/blockquote/_mixin.scss
index bfc86375c..3df2b89bf 100644
--- a/packages/components-css/src/blockquote/_mixin.scss
+++ b/packages/components-css/src/blockquote/_mixin.scss
@@ -17,6 +17,7 @@
   border-style: solid;
   display: flex;
   flex-direction: column;
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
   padding-block-end: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-block-end));
   padding-block-start: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-block-start));
   padding-inline-end: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-inline-end));
diff --git a/packages/components-css/src/blockquote/index.scss b/packages/components-css/src/blockquote/index.scss
index a11957032..6cf67833a 100644
--- a/packages/components-css/src/blockquote/index.scss
+++ b/packages/components-css/src/blockquote/index.scss
@@ -9,6 +9,9 @@
   --utrecht-blockquote-color: var(--utrecht-blockquote-content-color);
   --utrecht-blockquote-font-size: var(--utrecht-blockquote-content-font-size);
   --utrecht-document-font-family: var(--utrecht-blockquote-content-font-family);
+  --utrecht-blockquote-caption-font-size: var(--utrecht-blockquote-content-font-size);
+
+  line-height: 1.25;
 
   @include mixin.rhc-blockquote;
 }
diff --git a/packages/components-css/src/breadcrumb-nav/index.scss b/packages/components-css/src/breadcrumb-nav/index.scss
index 53b8dc023..5c6b263f9 100644
--- a/packages/components-css/src/breadcrumb-nav/index.scss
+++ b/packages/components-css/src/breadcrumb-nav/index.scss
@@ -3,8 +3,11 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
+.utrecht-breadcrumb-nav .utrecht-link:any-link {
+  line-height: var(--utrecht-breadcrumb-nav-line-height, inherit) !important;
+}
+
 .utrecht-breadcrumb-nav {
-  line-height: var(--utrecht-breadcrumb-nav-line-height, inherit);
   &__link {
     --utrecht-link-icon-inset-block-start: var(--utrecht-breadcrumb-nav-link-icon-inset-block-start, inherit);
 
diff --git a/packages/components-css/src/dot-badge/_mixin.scss b/packages/components-css/src/dot-badge/_mixin.scss
index 304b60fd5..59e1169a5 100644
--- a/packages/components-css/src/dot-badge/_mixin.scss
+++ b/packages/components-css/src/dot-badge/_mixin.scss
@@ -8,5 +8,7 @@
   border-radius: var(--rhc-dot-badge-border-radius, var(--rhc-border-radius-circle));
   color: var(--rhc-dot-badge-color, var(--rhc-color-rood-500));
   display: inline-block;
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
   inline-size: var(--rhc-dot-badge-inline-size, var(--rhc-size-quarter-lint));
+  line-height: var(--rhc-line-height-md, inherit);
 }
diff --git a/packages/components-css/src/figure/index.scss b/packages/components-css/src/figure/index.scss
index 679854a58..bb61af3ec 100644
--- a/packages/components-css/src/figure/index.scss
+++ b/packages/components-css/src/figure/index.scss
@@ -10,6 +10,11 @@
   border-start-start-radius: var(--utrecht-figure-img-border-start-start-radius);
 }
 
+.utrecht-figure {
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
+}
+
 .utrecht-figure__caption {
   border-inline-start: var(--utrecht-figure-caption-border-width) solid var(--utrecht-figure-caption-border-color);
   font-family: var(--rhc-font-family-primary, inherit);
diff --git a/packages/components-css/src/link-list/index.scss b/packages/components-css/src/link-list/index.scss
index 03179120d..65a8f16af 100644
--- a/packages/components-css/src/link-list/index.scss
+++ b/packages/components-css/src/link-list/index.scss
@@ -15,5 +15,8 @@
   display: inline-flex;
   font-family: var(--rhc-font-family-primary, inherit);
   font-size: var(--rhc-font-size-xs-desktop, inherit);
+}
+
+.utrecht-link-list__item .utrecht-link:any-link {
   line-height: var(--rhc-line-height-md, inherit);
 }

From d1c0f600bee648b081a77cedd358ad6efdb3cbd2 Mon Sep 17 00:00:00 2001
From: JoeriRoijenga <jroijenga@quintor.nl>
Date: Mon, 23 Dec 2024 11:12:13 +0100
Subject: [PATCH 8/9] FIX: added UtrechtDocument again

---
 packages/storybook/config/preview.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
index adbecfe24..0bf39317f 100644
--- a/packages/storybook/config/preview.tsx
+++ b/packages/storybook/config/preview.tsx
@@ -9,7 +9,7 @@ import '@rijkshuisstijl-community/components-css/dist/index.css';
 import { defineCustomElements } from '@rijkshuisstijl-community/web-components-stencil/loader/index';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Preview } from '@storybook/react';
-// import { UtrechtDocument } from '@utrecht/web-component-library-react';
+import { UtrechtDocument } from '@utrecht/web-component-library-react';
 import { defineCustomElements as defineUtrechtCustomElements } from '@utrecht/web-component-library-stencil/loader/index';
 
 // Initialize web components
@@ -28,8 +28,7 @@ const preview: Preview = {
       },
       defaultTheme: 'RijkshuisstijlCommunity',
     }),
-    (Story: any) => Story(),
-    // (Story: any) => <UtrechtDocument>{Story()}</UtrechtDocument>,
+    (Story: any) => <UtrechtDocument>{Story()}</UtrechtDocument>,
   ],
   parameters: {
     previewTabs: {

From 2c1a498f6fa19d1e4ca37c988a952b00244c58ad Mon Sep 17 00:00:00 2001
From: JoeriRoijenga <jroijenga@quintor.nl>
Date: Mon, 23 Dec 2024 15:07:07 +0100
Subject: [PATCH 9/9] FIX: removed UtrechtDocument from styling

---
 packages/storybook/config/preview.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
index 0bf39317f..f80272a35 100644
--- a/packages/storybook/config/preview.tsx
+++ b/packages/storybook/config/preview.tsx
@@ -9,7 +9,6 @@ import '@rijkshuisstijl-community/components-css/dist/index.css';
 import { defineCustomElements } from '@rijkshuisstijl-community/web-components-stencil/loader/index';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Preview } from '@storybook/react';
-import { UtrechtDocument } from '@utrecht/web-component-library-react';
 import { defineCustomElements as defineUtrechtCustomElements } from '@utrecht/web-component-library-stencil/loader/index';
 
 // Initialize web components
@@ -28,7 +27,7 @@ const preview: Preview = {
       },
       defaultTheme: 'RijkshuisstijlCommunity',
     }),
-    (Story: any) => <UtrechtDocument>{Story()}</UtrechtDocument>,
+    (Story: any) => Story(),
   ],
   parameters: {
     previewTabs: {