⬆️ [#445] Upgrade to @utrecht/components v5

Adapted the few places where we directly import the mixin
for certain components, which has been moved into the package
src and is no longer in the dist/css directory.

Other imports have been updated to refer to the package itself,
as that resolves to the CSS file inside, and we can now use
the @use rule in a bunch of places rather than sticking with
the deprecated @import.

package.json

@@ -127,7 +127,7 @@
     "@types/react-dom": "^18.3.5",
     "@typescript-eslint/parser": "^8.26.0",
     "@utrecht/component-library-react": "1.0.0-alpha.353",
-    "@utrecht/components": "^4.0.0",
+    "@utrecht/components": "^5.0.1",
     "@utrecht/design-tokens": "^2.5.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-istanbul": "^3.0.7",

src/formio/components/Checkbox.scss

@@ -1,6 +1,6 @@
 @use 'microscope-sass/lib/bem';
 
-@import '@utrecht/components/dist/custom-checkbox/css/index.css';
+@import '@utrecht/components/custom-checkbox/';
 
 // Design tokens: see src/components/checkbox-field.tokens.json
 

src/scss/components/_anchor.scss

@@ -8,9 +8,8 @@
  * :active states for some variants.
  */
 @use 'microscope-sass/lib/bem';
-
-@import '@utrecht/components/dist/link-button/css/index.css';
-@import '@utrecht/components/dist/link/css/index'; // emits the .utrecht-link {...} styles
+@use '@utrecht/components/link-button';
+@use '@utrecht/components/link'; // emits the .utrecht-link {...} styles
 
 /**
  * Extensions of the utrecht-link component with OF-specific styles.

src/scss/components/_button-group.scss

@@ -3,7 +3,7 @@
  */
 @use 'microscope-sass/lib/bem';
 
-@import '@utrecht/components/button-group/css/index';
+@import '@utrecht/components/button-group/src/index';
 
 .utrecht-button-group {
   // A button group used in an edit grid item

src/scss/components/_button.scss

@@ -1,5 +1,5 @@
-@import '@utrecht/components/dist/button/css/index.css';
-@import '@utrecht/components/dist/button-link/css/index.css';
+@use '@utrecht/components/button';
+@use '@utrecht/components/button-link';
 
 .openforms-theme {
   .utrecht-button,

src/scss/components/_date-picker.scss

@@ -1,9 +1,7 @@
 @use 'microscope-sass/lib/bem';
-@use '../mixins/prefix';
+@use '@utrecht/components/calendar';
 
-@import '@utrecht/components/dist/calendar/css/index.css';
-
-.#{prefix.prefix('datepicker')} {
+.openforms-datepicker {
   padding: 0;
   border: 0;
   border-radius: var(--of-datepicker-border-radius, 0);
@@ -28,7 +26,7 @@
   }
 }
 
-.#{prefix.prefix('datepicker-textbox')} {
+.openforms-datepicker-textbox {
   position: relative;
 
   .utrecht-textbox {

src/scss/components/_formio-component.scss

@@ -1,12 +1,10 @@
 @use 'microscope-sass/lib/bem';
 
-@use '@utrecht/components/form-field/css/mixin' as form-field;
-@use '@utrecht/components/form-fieldset/css/mixin' as form-fieldset;
+@use '@utrecht/components/form-field/src/mixin' as form-field;
+@use '@utrecht/components/form-fieldset/src/mixin' as form-fieldset;
 
 @import 'microscope-sass/lib/typography';
 
-@import '../mixins/prefix';
-
 // These styles are required because form.io doesn't re-render with new classnames,
 // instead it looks up the component ref and then adds the validation error classnames.
 // The (direct) child inside this node is the utrecht component that need to get

src/scss/components/_input.scss

@@ -1,6 +1,5 @@
 @use 'microscope-sass/lib/bem';
-
-@import '@utrecht/components/dist/textbox/css/index.css';
+@use '@utrecht/components/textbox';
 
 $input-padding: $grid-margin-2;
 

src/scss/components/_language-selection.scss

@@ -1,7 +1,6 @@
+@use '@utrecht/components/alternate-lang-nav';
 @import 'microscope-sass/lib/typography';
 
-@import '@utrecht/components/dist/alternate-lang-nav/css/index.css';
-
 /**
  * Allow using different spacing rules for this specific component
  */

src/scss/components/_list.scss

@@ -1,12 +1,9 @@
 @use 'microscope-sass/lib/bem';
-
-@import '@utrecht/components/dist/unordered-list/css/index';
+@use '@utrecht/components/unordered-list';
 
 @import 'microscope-sass/lib/typography';
 
-@import '../mixins/prefix';
-
-.#{prefix('list')} {
+.openforms-list {
   list-style: none;
   margin: 0;
   padding: 0;

src/scss/components/_select.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use 'microscope-sass/lib/bem';
-
-@import '@utrecht/components/dist/select/css/index.css';
+@use '@utrecht/components/select';
 
 /**
  * Additional styles for react-select component, using the utrecht-select as base.

src/scss/components/_textarea.scss

@@ -1,6 +1,6 @@
 @use 'microscope-sass/lib/bem';
+@use '@utrecht/components/textarea';
 
-@import '@utrecht/components/dist/textarea/css/index.css';
 @import 'microscope-sass/lib/grid';
 
 .utrecht-textarea {

src/scss/nl-design-system-community.scss

@@ -1,13 +1,13 @@
-@use '@utrecht/components/dist/document/css/index' as document;
-@use '@utrecht/components/dist/img/css/index' as img;
-@use '@utrecht/components/dist/paragraph/css/index' as paragraph;
-@use '@utrecht/components/dist/form-field/css/index' as form-field;
-@use '@utrecht/components/dist/form-fieldset/css/index' as form-fieldset;
-@use '@utrecht/components/dist/radio-button/css/index' as radio-button;
-@use '@utrecht/components/dist/alert/css/index' as alert;
-@use '@utrecht/components/dist/data-list/css/index' as data-list;
-@use '@utrecht/components/dist/unordered-list/css/index' as unordered-list;
-@use '@utrecht/components/dist/ordered-list/css/index' as ordered-list;
-@use '@utrecht/components/dist/heading-1/css/index' as heading-1;
-@use '@utrecht/components/dist/heading-2/css/index' as heading-2;
-@use '@utrecht/components/dist/heading-3/css/index' as heading-3;
+@use '@utrecht/components/document' as document;
+@use '@utrecht/components/img' as img;
+@use '@utrecht/components/paragraph' as paragraph;
+@use '@utrecht/components/form-field' as form-field;
+@use '@utrecht/components/form-fieldset' as form-fieldset;
+@use '@utrecht/components/radio-button' as radio-button;
+@use '@utrecht/components/alert' as alert;
+@use '@utrecht/components/data-list' as data-list;
+@use '@utrecht/components/unordered-list' as unordered-list;
+@use '@utrecht/components/ordered-list' as ordered-list;
+@use '@utrecht/components/heading-1' as heading-1;
+@use '@utrecht/components/heading-2' as heading-2;
+@use '@utrecht/components/heading-3' as heading-3;