From 4e85335417819236e828460b13b75dc5b0ae82e4 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Tue, 31 Oct 2023 15:23:35 +0100
Subject: [PATCH 01/26] :truck: [#467] Move Error components into own folder

---
 src/components/CoSign/Cosign.js                               | 2 +-
 src/components/CoSign/index.js                                | 2 +-
 src/components/{ => Errors}/ErrorBoundary.js                  | 3 ++-
 src/components/{ => Errors}/ErrorMessage.js                   | 0
 src/components/Form.js                                        | 2 +-
 src/components/LanguageSelection/LanguageSelection.stories.js | 2 +-
 src/components/PaymentOverview/index.js                       | 2 +-
 src/components/Sessions/RequireSession.js                     | 2 +-
 src/components/StatementCheckboxes/StatementCheckbox.js       | 2 +-
 src/components/SubmissionConfirmation.js                      | 2 +-
 src/components/Summary/GenericSummary.js                      | 2 +-
 .../appointments/CreateAppointment/CreateAppointment.js       | 2 +-
 src/components/appointments/CreateAppointment/Summary.js      | 2 +-
 src/components/appointments/ManageAppointment.js              | 2 +-
 src/components/appointments/cancel/CancelAppointment.js       | 2 +-
 src/components/auth/AuthenticationErrors/index.js             | 2 +-
 src/components/modals/FormStepSaveModal.js                    | 2 +-
 src/i18n.js                                                   | 4 ++--
 18 files changed, 19 insertions(+), 18 deletions(-)
 rename src/components/{ => Errors}/ErrorBoundary.js (98%)
 rename src/components/{ => Errors}/ErrorMessage.js (100%)

diff --git a/src/components/CoSign/Cosign.js b/src/components/CoSign/Cosign.js
index ba05ba040..6b22bbe95 100644
--- a/src/components/CoSign/Cosign.js
+++ b/src/components/CoSign/Cosign.js
@@ -4,7 +4,7 @@ import {useImmerReducer} from 'use-immer';
 
 import {ConfigContext} from 'Context';
 import {destroy} from 'api';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import {CosignSummary} from 'components/Summary';
 import useFormContext from 'hooks/useFormContext';
 
diff --git a/src/components/CoSign/index.js b/src/components/CoSign/index.js
index b57c1022c..411b754ff 100644
--- a/src/components/CoSign/index.js
+++ b/src/components/CoSign/index.js
@@ -6,7 +6,7 @@ import {useAsync} from 'react-use';
 import {ConfigContext, SubmissionContext} from 'Context';
 import {get} from 'api';
 import Body from 'components/Body';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Loader from 'components/Loader';
 import LoginOptionsDisplay from 'components/LoginOptions/LoginOptionsDisplay';
 import {getLoginUrl} from 'components/utils';
diff --git a/src/components/ErrorBoundary.js b/src/components/Errors/ErrorBoundary.js
similarity index 98%
rename from src/components/ErrorBoundary.js
rename to src/components/Errors/ErrorBoundary.js
index 7206d12b9..bdf5cfba3 100644
--- a/src/components/ErrorBoundary.js
+++ b/src/components/Errors/ErrorBoundary.js
@@ -4,11 +4,12 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import Body from 'components/Body';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
 import Link from 'components/Link';
 import MaintenanceMode from 'components/MaintenanceMode';
 import {DEBUG} from 'utils';
 
+import ErrorMessage from './ErrorMessage';
+
 const logError = (error, errorInfo) => {
   DEBUG && console.error(error, errorInfo);
 };
diff --git a/src/components/ErrorMessage.js b/src/components/Errors/ErrorMessage.js
similarity index 100%
rename from src/components/ErrorMessage.js
rename to src/components/Errors/ErrorMessage.js
diff --git a/src/components/Form.js b/src/components/Form.js
index bc530caa7..468fa06ed 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -6,7 +6,7 @@ import {useImmerReducer} from 'use-immer';
 
 import {ConfigContext} from 'Context';
 import {destroy} from 'api';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FormDisplay from 'components/FormDisplay';
 import FormStart from 'components/FormStart';
 import FormStep from 'components/FormStep';
diff --git a/src/components/LanguageSelection/LanguageSelection.stories.js b/src/components/LanguageSelection/LanguageSelection.stories.js
index 488b6dce9..67b168a3d 100644
--- a/src/components/LanguageSelection/LanguageSelection.stories.js
+++ b/src/components/LanguageSelection/LanguageSelection.stories.js
@@ -4,7 +4,7 @@ import {getWorker} from 'msw-storybook-addon';
 import React, {useState} from 'react';
 import {IntlProvider} from 'react-intl';
 
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import {I18NContext} from 'i18n';
 import {ConfigDecorator} from 'story-utils/decorators';
 
diff --git a/src/components/PaymentOverview/index.js b/src/components/PaymentOverview/index.js
index 94807713d..972363f31 100644
--- a/src/components/PaymentOverview/index.js
+++ b/src/components/PaymentOverview/index.js
@@ -5,7 +5,7 @@ import {useLocation} from 'react-router-dom';
 
 import Body from 'components/Body';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Link from 'components/Link';
 import useTitle from 'hooks/useTitle';
 
diff --git a/src/components/Sessions/RequireSession.js b/src/components/Sessions/RequireSession.js
index 33388115d..0f8570b14 100644
--- a/src/components/Sessions/RequireSession.js
+++ b/src/components/Sessions/RequireSession.js
@@ -7,7 +7,7 @@ import {ConfigContext} from 'Context';
 import {apiCall} from 'api';
 import {OFButton} from 'components/Button';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Link from 'components/Link';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 import Modal from 'components/modals/Modal';
diff --git a/src/components/StatementCheckboxes/StatementCheckbox.js b/src/components/StatementCheckboxes/StatementCheckbox.js
index d4f7bec2b..bdfdd5e5f 100644
--- a/src/components/StatementCheckboxes/StatementCheckbox.js
+++ b/src/components/StatementCheckboxes/StatementCheckbox.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 
 import Body from 'components/Body';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import {FormioComponent} from 'components/formio';
 
 import './StatementCheckbox.scss';
diff --git a/src/components/SubmissionConfirmation.js b/src/components/SubmissionConfirmation.js
index 175a79244..e6cd97e4b 100644
--- a/src/components/SubmissionConfirmation.js
+++ b/src/components/SubmissionConfirmation.js
@@ -8,7 +8,7 @@ import Anchor from 'components/Anchor';
 import Body from 'components/Body';
 import {OFButton} from 'components/Button';
 import Card from 'components/Card';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FAIcon from 'components/FAIcon';
 import Loader from 'components/Loader';
 import PaymentForm from 'components/PaymentForm';
diff --git a/src/components/Summary/GenericSummary.js b/src/components/Summary/GenericSummary.js
index b38c7ff56..249fbccc4 100644
--- a/src/components/Summary/GenericSummary.js
+++ b/src/components/Summary/GenericSummary.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import FormStepSummary from 'components/FormStepSummary';
 import {LayoutColumn} from 'components/Layout';
 import Loader from 'components/Loader';
diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.js b/src/components/appointments/CreateAppointment/CreateAppointment.js
index 2289f1d31..22fb26eb5 100644
--- a/src/components/appointments/CreateAppointment/CreateAppointment.js
+++ b/src/components/appointments/CreateAppointment/CreateAppointment.js
@@ -3,7 +3,7 @@ import {Outlet, useLocation} from 'react-router-dom';
 
 import {ConfigContext} from 'Context';
 import Card from 'components/Card';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FormDisplay from 'components/FormDisplay';
 import {LiteralsProvider} from 'components/Literal';
 import Loader from 'components/Loader';
diff --git a/src/components/appointments/CreateAppointment/Summary.js b/src/components/appointments/CreateAppointment/Summary.js
index dd649d639..0a4805d7a 100644
--- a/src/components/appointments/CreateAppointment/Summary.js
+++ b/src/components/appointments/CreateAppointment/Summary.js
@@ -7,7 +7,7 @@ import {useAsync} from 'react-use';
 import {ConfigContext} from 'Context';
 import {post} from 'api';
 import {CardTitle} from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import FormStepSummary from 'components/FormStepSummary';
 import Literal from 'components/Literal';
 import Loader from 'components/Loader';
diff --git a/src/components/appointments/ManageAppointment.js b/src/components/appointments/ManageAppointment.js
index bcf581fb1..7928f0572 100644
--- a/src/components/appointments/ManageAppointment.js
+++ b/src/components/appointments/ManageAppointment.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Route, Routes} from 'react-router-dom';
 
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import {LayoutColumn} from 'components/Layout';
 
 import {CancelAppointment, CancelAppointmentSuccess} from './cancel';
diff --git a/src/components/appointments/cancel/CancelAppointment.js b/src/components/appointments/cancel/CancelAppointment.js
index d53b57321..4e81db453 100644
--- a/src/components/appointments/cancel/CancelAppointment.js
+++ b/src/components/appointments/cancel/CancelAppointment.js
@@ -8,7 +8,7 @@ import {post} from 'api';
 import Body from 'components/Body';
 import {OFButton} from 'components/Button';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 import {EmailField} from 'components/forms';
 import {ValidationError} from 'errors';
diff --git a/src/components/auth/AuthenticationErrors/index.js b/src/components/auth/AuthenticationErrors/index.js
index d0bf82553..ee8c05953 100644
--- a/src/components/auth/AuthenticationErrors/index.js
+++ b/src/components/auth/AuthenticationErrors/index.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {useIntl} from 'react-intl';
 
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import useQuery from 'hooks/useQuery';
 
 const MAPPING_PARAMS_SERVICE = {
diff --git a/src/components/modals/FormStepSaveModal.js b/src/components/modals/FormStepSaveModal.js
index c7bee8e8f..f9482c8dc 100644
--- a/src/components/modals/FormStepSaveModal.js
+++ b/src/components/modals/FormStepSaveModal.js
@@ -11,7 +11,7 @@ import {useImmerReducer} from 'use-immer';
 import {ConfigContext} from 'Context';
 import {destroy, post} from 'api';
 import Body from 'components/Body';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Loader from 'components/Loader';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 import {EmailField} from 'components/forms';
diff --git a/src/i18n.js b/src/i18n.js
index 40ead1cda..9e333b8ee 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -8,8 +8,8 @@ import {createGlobalstate, useGlobalState} from 'state-pool';
 
 import {ConfigContext, FormioTranslations} from 'Context';
 import {get} from 'api';
-import {logError} from 'components/ErrorBoundary';
-import ErrorMessage from 'components/ErrorMessage';
+import {logError} from 'components/Errors/ErrorBoundary';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Loader from 'components/Loader';
 
 import messagesEN from './i18n/compiled/en.json';

From 787ea531d4721bc775c2a9cff4eedd18075665ec Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Tue, 31 Oct 2023 15:23:56 +0100
Subject: [PATCH 02/26] :sparkles: [#467] Added story for error message
 component

---
 src/components/Errors/Errors.stories.js | 49 +++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/Errors/Errors.stories.js

diff --git a/src/components/Errors/Errors.stories.js b/src/components/Errors/Errors.stories.js
new file mode 100644
index 000000000..14be63ff4
--- /dev/null
+++ b/src/components/Errors/Errors.stories.js
@@ -0,0 +1,49 @@
+import ErrorMessage from './ErrorMessage';
+
+const ALERT_MODIFIERS = ['info', 'warning', 'error', 'ok'];
+
+export default {
+  title: 'Private API / Error Message',
+  render: ({message, modifier}) => <ErrorMessage modifiers={[modifier]}>{message}</ErrorMessage>,
+  argTypes: {
+    modifier: {
+      options: ALERT_MODIFIERS,
+      control: {
+        type: 'radio',
+      },
+    },
+    children: {control: false},
+  },
+};
+
+export const ErrorMessageErrorStory = {
+  name: 'Error Message',
+  args: {
+    modifier: 'error',
+    message: 'Sadness, something went wrong.',
+  },
+};
+
+export const ErrorMessageOkStory = {
+  name: 'Ok Message',
+  args: {
+    modifier: 'ok',
+    message: 'Something went OK.',
+  },
+};
+
+export const ErrorMessageInfoStory = {
+  name: 'Info Message',
+  args: {
+    modifier: 'info',
+    message: 'This is an info!',
+  },
+};
+
+export const ErrorMessageWarningStory = {
+  name: 'Warning Message',
+  args: {
+    modifier: 'warning',
+    message: 'You are being warned.',
+  },
+};

From 18166051442dbb808ca56169ae0a2c6d1ad8f1bf Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 1 Nov 2023 15:37:29 +0100
Subject: [PATCH 03/26] :arrow_up: [#467] Upgrade utrecht packages

---
 package.json |  9 +++++----
 yarn.lock    | 35 +++++++++++++++++------------------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index fb2938612..5e7af9d02 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "classnames": "^2.3.1",
+    "date-fns": "^2.30.0",
     "flatpickr": "^4.6.9",
     "formik": "^2.2.9",
     "formiojs": "4.13.12",
@@ -136,10 +137,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@utrecht/component-library-css": "^1.0.0-alpha.526",
-    "@utrecht/component-library-react": "^1.0.0-alpha.353",
-    "@utrecht/components": "^1.0.0-alpha.473",
-    "@utrecht/design-tokens": "^1.0.0-alpha.505",
+    "@utrecht/component-library-css": "^1.0.0-alpha.604",
+    "@utrecht/component-library-react": "^1.0.0-alpha.413",
+    "@utrecht/components": "^1.0.0-alpha.565",
+    "@utrecht/design-tokens": "^1.0.0-alpha.597",
     "babel-jest": "^27.4.2",
     "babel-loader": "^9.1.2",
     "babel-plugin-formatjs": "^10.3.8",
diff --git a/yarn.lock b/yarn.lock
index bca88f7fe..ff9b74b6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5138,31 +5138,30 @@
     "@typescript-eslint/types" "5.60.0"
     eslint-visitor-keys "^3.3.0"
 
-"@utrecht/component-library-css@^1.0.0-alpha.526":
-  version "1.0.0-alpha.529"
-  resolved "https://registry.yarnpkg.com/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.529.tgz#f4b0e7109f76f8fa1992657b1b449e35d2c49960"
-  integrity sha512-GgwWM5KBfG0cKC21kLB/fxS7cxMAYnSJCAyVprm1vtdFhlqDATkpZ8nAy9G+M6Kybz67qpuzEhjQ9n77aEIinA==
+"@utrecht/component-library-css@^1.0.0-alpha.604":
+  version "1.0.0-alpha.604"
+  resolved "https://registry.yarnpkg.com/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.604.tgz#d8c53be9a103ef71cf2bb171b5ab6bb0233ecce8"
+  integrity sha512-2yAAOKxirmJVKpdHGhfh3lI4MdR46JN/W6oL+LlmRwmO84xTlJnWKqPuIcIijzjCHzggPWNl5O6zHPPlumWi4g==
 
-"@utrecht/component-library-react@^1.0.0-alpha.353":
-  version "1.0.0-alpha.353"
-  resolved "https://registry.yarnpkg.com/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.353.tgz#1913089f74880532a0954717240e0e7ffb032020"
-  integrity sha512-WoJOGxUtQdDn0ysU9WYQou1MQBUIfJxEUJXMuTaRO2nxcYjv1lxto9Di+PRfDcRJr0mNKVApcxu3d8yRLFNHxQ==
+"@utrecht/component-library-react@^1.0.0-alpha.413":
+  version "1.0.0-alpha.413"
+  resolved "https://registry.yarnpkg.com/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.413.tgz#42eba0303a6c07a6da2c3c375eaf9a4bd44627cc"
+  integrity sha512-FVkRn4hj30COAKsko3YipkzMhx6q25nD0huRF96pqDf5PD8S3cIJ2/o71TYmVFxnFe2kEXC8dTzrtzRy2Calbg==
   dependencies:
     clsx "1.2.1"
-    date-fns "2.30.0"
     lodash.chunk "4.2.0"
 
-"@utrecht/components@^1.0.0-alpha.473":
-  version "1.0.0-alpha.490"
-  resolved "https://registry.yarnpkg.com/@utrecht/components/-/components-1.0.0-alpha.490.tgz#8eedd4794c017d2c7d53e66c29d460bc50e1938e"
-  integrity sha512-cWX9e+OTjGLy00oZU7tQn/qPle+u9aFfH2zktkGxxiYaz/u8HQ36xnJMlpm9fEKST+9x0AJOT9RCYLCSgKxfNg==
+"@utrecht/components@^1.0.0-alpha.565":
+  version "1.0.0-alpha.565"
+  resolved "https://registry.yarnpkg.com/@utrecht/components/-/components-1.0.0-alpha.565.tgz#af5ec288882343b43e41dab3b929e8b44caac94f"
+  integrity sha512-Rs/f8YzVpeM7pXgQuTicT/rb2sYrUqAGB3rRSWq7TuvUgreENrJa9vnRytVq2I6+Z66zEuz8d2tBO0tUEijFDA==
   dependencies:
     clsx "1.2.1"
 
-"@utrecht/design-tokens@^1.0.0-alpha.505":
-  version "1.0.0-alpha.522"
-  resolved "https://registry.yarnpkg.com/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.522.tgz#ade2891d9a73b956b400674315898a7a2dd41871"
-  integrity sha512-YmOoH2eMkkTmxpUCei9Ccgcb3reWluf/9u36DDiNNwn837pjVZZz2Ldks12Vfe1Qb8wIL/Y0AT6zZ7Hwc4bCig==
+"@utrecht/design-tokens@^1.0.0-alpha.597":
+  version "1.0.0-alpha.597"
+  resolved "https://registry.yarnpkg.com/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.597.tgz#7f36889edc763a001437074d266d9b8d1fb81602"
+  integrity sha512-1DhRBv0896JkdaGiXBJL71mckrrQAZkr5CTqR5BRuHp/xbSaPtLg/JEw4uNXpsnvxZrwn1wmz/PY/wzvnBAGHw==
 
 "@vue/compiler-core@3.3.4", "@vue/compiler-core@^3.2.23":
   version "3.3.4"
@@ -7210,7 +7209,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@2.30.0:
+date-fns@^2.30.0:
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==

From b725a8578f8de30ca913c2346c7773062143a0ad Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 1 Nov 2023 15:41:04 +0100
Subject: [PATCH 04/26] :recycle: [#467] Refactor ErrorMessage to use utrecht
 Alert

---
 src/components/Errors/ErrorMessage.js | 24 +++++++-------
 src/scss/components/_alert.scss       | 45 ++-------------------------
 2 files changed, 16 insertions(+), 53 deletions(-)

diff --git a/src/components/Errors/ErrorMessage.js b/src/components/Errors/ErrorMessage.js
index 0f1cf1315..6e509b8be 100644
--- a/src/components/Errors/ErrorMessage.js
+++ b/src/components/Errors/ErrorMessage.js
@@ -1,27 +1,29 @@
+import {Alert} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Body from 'components/Body';
-import FAIcon from 'components/FAIcon';
 import useScrollIntoView from 'hooks/useScrollIntoView';
-import {getBEMClassName} from 'utils';
 
-const ErrorMessage = ({children, modifiers = ['error']}) => {
+const ICONS = {
+  error: <i className="fa fas fa-exclamation-circle" />,
+  info: <i className="fa fas fa-info-circle" />,
+  warning: <i className="fa fas fa-exclamation-triangle" />,
+  ok: <i className="fa fas fa-check-circle" />,
+};
+
+const ErrorMessage = ({children, modifier = 'error'}) => {
   const errorRef = useScrollIntoView();
   if (!children) return null;
   return (
-    <div ref={errorRef} className={getBEMClassName('alert', modifiers)}>
-      <span className={getBEMClassName('alert__icon', ['wide'])}>
-        <FAIcon icon="exclamation-circle" />
-      </span>
-      <Body component="div">{children}</Body>
-    </div>
+    <Alert type={modifier} icon={ICONS[modifier]} ref={errorRef}>
+      {children}
+    </Alert>
   );
 };
 
 ErrorMessage.propTypes = {
   children: PropTypes.node,
-  modifiers: PropTypes.arrayOf(PropTypes.string),
+  modifier: PropTypes.string,
 };
 
 export default ErrorMessage;
diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
index 2259ef0ac..f10fcf5bd 100644
--- a/src/scss/components/_alert.scss
+++ b/src/scss/components/_alert.scss
@@ -1,44 +1,5 @@
-@use 'microscope-sass/lib/bem';
+@import '@utrecht/components/dist/alert/css/index.css';
 
-@import '../mixins/prefix';
-@import '../settings';
-
-.#{prefix('alert')} {
-  @include margin(true, $properties: padding);
-  @include margin('auto', $properties: margin-bottom);
-  display: flex;
-  justify-content: flex-start;
-
-  @include bem.modifier('info') {
-    background-color: var(--of-alert-info-bg);
-  }
-
-  @include bem.modifier('error') {
-    background-color: var(--of-alert-error-bg);
-
-    .fa-icon {
-      color: var(--of-color-danger);
-    }
-  }
-
-  @include bem.modifier('warning') {
-    background-color: var(--of-alert-warning-bg);
-
-    .fa-icon {
-      color: var(--of-color-warning);
-    }
-  }
-
-  @include bem.modifier('with-margin') {
-    margin: 1rem 0;
-  }
-
-  @include bem.element('icon') {
-    display: block;
-    width: 1em;
-
-    @include bem.modifier('wide') {
-      width: 2em;
-    }
-  }
+.utrecht-alert {
+  font-family: var(--utrecht-document-font-family);
 }

From 3358882634a949d8ff684a885190c82536c1655d Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 1 Nov 2023 15:41:46 +0100
Subject: [PATCH 05/26] :memo: [#467] Update ErrorMessage Stories

---
 src/components/Errors/Errors.stories.js       |  2 +-
 .../forms/DateField/DatePickerCalendar.js     |  2 +-
 yarn.lock                                     | 19 ++++++++++++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Errors/Errors.stories.js b/src/components/Errors/Errors.stories.js
index 14be63ff4..98ccfc1dd 100644
--- a/src/components/Errors/Errors.stories.js
+++ b/src/components/Errors/Errors.stories.js
@@ -4,7 +4,7 @@ const ALERT_MODIFIERS = ['info', 'warning', 'error', 'ok'];
 
 export default {
   title: 'Private API / Error Message',
-  render: ({message, modifier}) => <ErrorMessage modifiers={[modifier]}>{message}</ErrorMessage>,
+  render: ({message, modifier}) => <ErrorMessage modifier={modifier}>{message}</ErrorMessage>,
   argTypes: {
     modifier: {
       options: ALERT_MODIFIERS,
diff --git a/src/components/forms/DateField/DatePickerCalendar.js b/src/components/forms/DateField/DatePickerCalendar.js
index 94fc4e734..b35a6c208 100644
--- a/src/components/forms/DateField/DatePickerCalendar.js
+++ b/src/components/forms/DateField/DatePickerCalendar.js
@@ -1,6 +1,6 @@
 // Calendar component documentation:
 // https://nl-design-system.github.io/utrecht/storybook-react/index.html?path=/docs/react-component-calendar--docs
-import {Calendar} from '@utrecht/component-library-react';
+import {Calendar} from '@utrecht/component-library-react/dist/Calendar.js';
 import {enGB, nl} from 'date-fns/locale';
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
diff --git a/yarn.lock b/yarn.lock
index ff9b74b6d..5c9ddc50f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1482,13 +1482,20 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
   integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.20.7", "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -2967,6 +2974,11 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
   integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
 
+"@open-formulieren/design-tokens@^0.44.1":
+  version "0.44.1"
+  resolved "https://registry.yarnpkg.com/@open-formulieren/design-tokens/-/design-tokens-0.44.1.tgz#89d6b53b8c3d8acfcb839f26ffed02cab7c9cc4e"
+  integrity sha512-K9EJ8V2qEXpoqEMg9tgqgCByxdJh8M4AN4p1ag2OCgkVckAzVrO+tjZ+0KXM1einCZ2dAGK/8Km1wu1WKiKVPA==
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
@@ -13839,6 +13851,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7, regenerator-runtime@^
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"

From 6359efea69804a9c177603905943179b79bf8d68 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Fri, 3 Nov 2023 15:38:11 +0100
Subject: [PATCH 06/26] :fire: [#467] Remove CSS override for font

---
 src/scss/components/_alert.scss          | 5 -----
 src/scss/nl-design-system-community.scss | 1 +
 src/styles.scss                          | 1 -
 3 files changed, 1 insertion(+), 6 deletions(-)
 delete mode 100644 src/scss/components/_alert.scss

diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
deleted file mode 100644
index f10fcf5bd..000000000
--- a/src/scss/components/_alert.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '@utrecht/components/dist/alert/css/index.css';
-
-.utrecht-alert {
-  font-family: var(--utrecht-document-font-family);
-}
diff --git a/src/scss/nl-design-system-community.scss b/src/scss/nl-design-system-community.scss
index 086e764ae..a1d36e943 100644
--- a/src/scss/nl-design-system-community.scss
+++ b/src/scss/nl-design-system-community.scss
@@ -4,3 +4,4 @@
 @import '@utrecht/components/dist/form-field/css/index.css';
 @import '@utrecht/components/dist/form-fieldset/css/index.css';
 @import '@utrecht/components/dist/radio-button/css/index.css';
+@import '@utrecht/components/dist/alert/css/index.css';
diff --git a/src/styles.scss b/src/styles.scss
index aa85986e3..2f662dab7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -21,7 +21,6 @@
 @import './scss/components/typography';
 @import './scss/components/fa-icon';
 
-@import './scss/components/alert';
 @import './scss/components/anchor';
 @import './scss/components/button';
 @import './scss/components/button-group';

From 60e881ceaa5b19aa777852883d7fa041edb24f00 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Fri, 3 Nov 2023 15:38:59 +0100
Subject: [PATCH 07/26] :recycle: [#467] Add a decorator to wrap stories with
 the utrecht-document class

---
 .storybook/decorators.js | 8 ++++++++
 .storybook/preview.js    | 4 ++--
 src/i18n-zod.stories.js  | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/.storybook/decorators.js b/.storybook/decorators.js
index 0bd733476..734c13074 100644
--- a/.storybook/decorators.js
+++ b/.storybook/decorators.js
@@ -8,3 +8,11 @@ export const withClearSessionStorage = Story => {
   window.sessionStorage.clear();
   return <Story />;
 };
+
+/**
+ * This decorator wraps stories so that they are inside a container with the class name "utrecht-document". This is
+ * needed so that components inherit the right font.
+ */
+export const utrechtDocumentDecorator = Story => {
+  return (<div className="utrecht-document utrecht-document--surface" ><Story/></div>);
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 476d4eda3..5f0345076 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -18,7 +18,7 @@ import 'styles.scss';
 import OpenFormsModule from 'formio/module';
 import OFLibrary from 'formio/templates';
 
-import {withClearSessionStorage} from './decorators';
+import {utrechtDocumentDecorator, withClearSessionStorage} from './decorators';
 import {reactIntl} from './reactIntl.js';
 
 initialize({
@@ -36,7 +36,7 @@ Formio.use(OpenFormsModule);
 Templates.current = OFLibrary;
 
 export default {
-  decorators: [mswDecorator, withClearSessionStorage],
+  decorators: [mswDecorator, withClearSessionStorage, utrechtDocumentDecorator],
   globals: {
     locale: reactIntl.defaultLocale,
     locales: {
diff --git a/src/i18n-zod.stories.js b/src/i18n-zod.stories.js
index b52b7986e..edeb49567 100644
--- a/src/i18n-zod.stories.js
+++ b/src/i18n-zod.stories.js
@@ -28,7 +28,7 @@ const TestComponent = ({email, number}) => {
 
   const formatted = result.error.format();
   return (
-    <div className="utrecht-document">
+    <>
       <p>Error messages should be in Dutch</p>
 
       <div>
@@ -47,7 +47,7 @@ const TestComponent = ({email, number}) => {
           ))}
         </ul>
       </div>
-    </div>
+    </>
   );
 };
 

From 39e505c6afeb972c6808b182d8a8540a72ed270f Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Fri, 3 Nov 2023 15:39:24 +0100
Subject: [PATCH 08/26] :memo: [#467] Collect ErrorMessage stories

---
 src/components/Errors/Errors.mdx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/components/Errors/Errors.mdx

diff --git a/src/components/Errors/Errors.mdx b/src/components/Errors/Errors.mdx
new file mode 100644
index 000000000..067749621
--- /dev/null
+++ b/src/components/Errors/Errors.mdx
@@ -0,0 +1,21 @@
+import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks';
+
+import * as ErrorsStories from './Errors.stories';
+
+<Meta of={ErrorsStories} />
+
+# Error Message
+
+The error message component uses the
+[Utrecht Alert component](https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-alert--docs).
+
+<Canvas>
+  <Story of={ErrorsStories.ErrorMessageOkStory} />
+  <Story of={ErrorsStories.ErrorMessageInfoStory} />
+  <Story of={ErrorsStories.ErrorMessageErrorStory} />
+  <Story of={ErrorsStories.ErrorMessageWarningStory} />
+</Canvas>
+
+## Props
+
+<ArgTypes of={ErrorsStories} />

From edb6db7fe1349fef31f4009e1911f623b23727a1 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Fri, 3 Nov 2023 15:47:30 +0100
Subject: [PATCH 09/26] :fire: Remove accidental addition of design tokens to
 yarn.lock

---
 yarn.lock | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 5c9ddc50f..78ec0c456 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2974,11 +2974,6 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
   integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
 
-"@open-formulieren/design-tokens@^0.44.1":
-  version "0.44.1"
-  resolved "https://registry.yarnpkg.com/@open-formulieren/design-tokens/-/design-tokens-0.44.1.tgz#89d6b53b8c3d8acfcb839f26ffed02cab7c9cc4e"
-  integrity sha512-K9EJ8V2qEXpoqEMg9tgqgCByxdJh8M4AN4p1ag2OCgkVckAzVrO+tjZ+0KXM1einCZ2dAGK/8Km1wu1WKiKVPA==
-
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"

From 6b2b74f42f38d73b81c66c393083e3ef4cc629e2 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Fri, 3 Nov 2023 16:01:37 +0100
Subject: [PATCH 10/26] :sparkles: [#467] Add utrecht-document class to body

---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index d2616d012..c5b679c7a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,7 +10,7 @@
     />
     <title>Open Forms SDK</title>
   </head>
-  <body>
+  <body class="utrecht-document">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

From f5c3a1bdca96771b7a7a0db922fa78b54f14f42b Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Fri, 3 Nov 2023 16:38:10 +0100
Subject: [PATCH 11/26] :recycle: [#467] Update components using ErrorMessage

---
 src/components/Sessions/RequireSession.js               | 2 +-
 src/components/StatementCheckboxes/StatementCheckbox.js | 2 +-
 src/components/auth/AuthenticationErrors/index.js       | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Sessions/RequireSession.js b/src/components/Sessions/RequireSession.js
index 0f8570b14..36005750f 100644
--- a/src/components/Sessions/RequireSession.js
+++ b/src/components/Sessions/RequireSession.js
@@ -137,7 +137,7 @@ const ExpiryModal = ({showWarning, secondsToExpiry, setWarningDismissed}) => {
         setWarningDismissed(true);
       }}
     >
-      <ErrorMessage modifiers={['warning']}>
+      <ErrorMessage modifier="warning">
         <FormattedMessage
           description="Session expiry warning message (in modal)"
           defaultMessage="Your session is about to expire {delta}. Extend your session if you wish to continue."
diff --git a/src/components/StatementCheckboxes/StatementCheckbox.js b/src/components/StatementCheckboxes/StatementCheckbox.js
index bdfdd5e5f..0964047db 100644
--- a/src/components/StatementCheckboxes/StatementCheckbox.js
+++ b/src/components/StatementCheckboxes/StatementCheckbox.js
@@ -41,7 +41,7 @@ const StatementCheckbox = ({configuration, showWarning = false}) => {
     <div className="openforms-privacy-checkbox">
       <FormioComponent component={formioDefinition} />
       {showWarning && (
-        <ErrorMessage modifiers={['warning']}>
+        <ErrorMessage modifier="warning">
           {intl.formatMessage(WARNINGS[configuration.key])}
         </ErrorMessage>
       )}
diff --git a/src/components/auth/AuthenticationErrors/index.js b/src/components/auth/AuthenticationErrors/index.js
index ee8c05953..6187fbf0d 100644
--- a/src/components/auth/AuthenticationErrors/index.js
+++ b/src/components/auth/AuthenticationErrors/index.js
@@ -75,11 +75,12 @@ const AuthenticationErrors = ({parameters}) => {
     }
   }
 
-  return <ErrorMessage modifiers={['error', 'with-margin']}>{messagesToDisplay[0]}</ErrorMessage>;
+  return <ErrorMessage modifier="error">{messagesToDisplay[0]}</ErrorMessage>;
 };
 
 AuthenticationErrors.propTypes = {
   parameters: PropTypes.object.isRequired,
 };
 
+export {MAPPING_PARAMS_SERVICE, CANCEL_LOGIN_PARAM};
 export {AuthenticationErrors, useDetectAuthErrorMessages};

From b498891dfa6b6a175a377d0c0f3e6350f878808e Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Fri, 3 Nov 2023 16:38:32 +0100
Subject: [PATCH 12/26] :sparkles: [#467] Add story for AuthenticationErrors

---
 .../AuthenticationErrors.stories.js           | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/auth/AuthenticationErrors/AuthenticationErrors.stories.js

diff --git a/src/components/auth/AuthenticationErrors/AuthenticationErrors.stories.js b/src/components/auth/AuthenticationErrors/AuthenticationErrors.stories.js
new file mode 100644
index 000000000..00600e072
--- /dev/null
+++ b/src/components/auth/AuthenticationErrors/AuthenticationErrors.stories.js
@@ -0,0 +1,28 @@
+import {AuthenticationErrors, CANCEL_LOGIN_PARAM, MAPPING_PARAMS_SERVICE} from './index';
+
+export default {
+  title: 'Private API / Authentication Errors',
+  render: ({parameter, message}) => <AuthenticationErrors parameters={{[parameter]: message}} />,
+  argTypes: {
+    parameter: {
+      options: Object.keys(MAPPING_PARAMS_SERVICE),
+      control: {
+        type: 'radio',
+      },
+    },
+    message: {
+      options: [CANCEL_LOGIN_PARAM, 'error'],
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+};
+
+export const AuthenticationErrorsStory = {
+  name: 'Authentication Error',
+  args: {
+    parameter: '_digid-message',
+    message: 'error',
+  },
+};

From e563e5fcb5bbcc644dcb92e0ea538a25e859f367 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Fri, 3 Nov 2023 16:55:49 +0100
Subject: [PATCH 13/26] :recycle: [#467] Refactor more components to use the
 ErrorMessage component

---
 src/components/MaintenanceMode.js           | 14 ++-----------
 src/components/auth/AuthenticationOutage.js | 23 +++++++--------------
 2 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/components/MaintenanceMode.js b/src/components/MaintenanceMode.js
index 8b3734e2f..b13933615 100644
--- a/src/components/MaintenanceMode.js
+++ b/src/components/MaintenanceMode.js
@@ -2,14 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Body from 'components/Body';
 import Card from 'components/Card';
-import FAIcon from 'components/FAIcon';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import {IsFormDesigner} from 'headers';
-import {getBEMClassName} from 'utils';
 
 const MaintenanceModeAlert = () => {
-  const alertClassName = getBEMClassName('alert', ['info']);
   const userIsFormDesigner = IsFormDesigner.getValue();
 
   let message;
@@ -32,14 +29,7 @@ const MaintenanceModeAlert = () => {
     );
   }
 
-  return (
-    <div className={alertClassName}>
-      <span className={getBEMClassName('alert__icon')}>
-        <FAIcon icon="info" />
-      </span>
-      <Body>{message}</Body>
-    </div>
-  );
+  return <ErrorMessage modifier="info">{message}</ErrorMessage>;
 };
 
 const MaintenanceMode = ({title, asToast = false}) => {
diff --git a/src/components/auth/AuthenticationOutage.js b/src/components/auth/AuthenticationOutage.js
index ce14c8c41..d467b1d5d 100644
--- a/src/components/auth/AuthenticationOutage.js
+++ b/src/components/auth/AuthenticationOutage.js
@@ -2,10 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Body from 'components/Body';
-import FAIcon from 'components/FAIcon';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import useQuery from 'hooks/useQuery';
-import {getBEMClassName} from 'utils';
 
 const AUTHENTICATION_OUTAGE_QUERY_PARAM = 'of-auth-problem';
 
@@ -15,20 +13,15 @@ export const useDetectAuthenticationOutage = () => {
 };
 
 const AuthenticationOutage = ({loginOption}) => (
-  <div className={getBEMClassName('alert', ['error'])}>
-    <span className={getBEMClassName('alert__icon', ['wide'])}>
-      <FAIcon icon="exclamation-circle" />
-    </span>
-    <Body>
-      <FormattedMessage
-        description="Authentication outage message"
-        defaultMessage={`
+  <ErrorMessage>
+    <FormattedMessage
+      description="Authentication outage message"
+      defaultMessage={`
           This form is temporarily unavailable because of an outage with the {label}
           authentication service. Please try again later.`}
-        values={{label: loginOption.label}}
-      />
-    </Body>
-  </div>
+      values={{label: loginOption.label}}
+    />
+  </ErrorMessage>
 );
 
 AuthenticationOutage.propTypes = {

From 61e9ee6519f908ba0279e63d0e553993528d53ae Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Mon, 6 Nov 2023 11:43:12 +0100
Subject: [PATCH 14/26] :lipstick: [#467] Reintroduce margin

---
 src/components/auth/AuthenticationErrors/index.js | 6 +++++-
 src/scss/components/_authentication-errors.scss   | 3 +++
 src/styles.scss                                   | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 src/scss/components/_authentication-errors.scss

diff --git a/src/components/auth/AuthenticationErrors/index.js b/src/components/auth/AuthenticationErrors/index.js
index 6187fbf0d..cd5b69c9f 100644
--- a/src/components/auth/AuthenticationErrors/index.js
+++ b/src/components/auth/AuthenticationErrors/index.js
@@ -75,7 +75,11 @@ const AuthenticationErrors = ({parameters}) => {
     }
   }
 
-  return <ErrorMessage modifier="error">{messagesToDisplay[0]}</ErrorMessage>;
+  return (
+    <div className="openforms-authentication-errors">
+      <ErrorMessage modifier="error">{messagesToDisplay[0]}</ErrorMessage>
+    </div>
+  );
 };
 
 AuthenticationErrors.propTypes = {
diff --git a/src/scss/components/_authentication-errors.scss b/src/scss/components/_authentication-errors.scss
new file mode 100644
index 000000000..8973e0eda
--- /dev/null
+++ b/src/scss/components/_authentication-errors.scss
@@ -0,0 +1,3 @@
+.openforms-authentication-errors {
+  margin: 1rem 0;
+}
diff --git a/src/styles.scss b/src/styles.scss
index 2f662dab7..987f00dec 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -64,3 +64,4 @@
 @import './scss/components/floating-widget';
 @import './scss/components/date-picker';
 @import './scss/components/input-container';
+@import './scss/components/authentication-errors';

From 79126814597566d442c8ae9796b8f4ae8743fb0c Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Mon, 6 Nov 2023 11:51:16 +0100
Subject: [PATCH 15/26] :sparkles: [#467] Add authentication outage story

---
 src/components/auth/AuthenticationOutage.stories.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/components/auth/AuthenticationOutage.stories.js

diff --git a/src/components/auth/AuthenticationOutage.stories.js b/src/components/auth/AuthenticationOutage.stories.js
new file mode 100644
index 000000000..bd5064f9e
--- /dev/null
+++ b/src/components/auth/AuthenticationOutage.stories.js
@@ -0,0 +1,13 @@
+import AuthenticationOutage from './AuthenticationOutage';
+
+export default {
+  title: 'Private API / Authentication Outage',
+  render: ({label}) => <AuthenticationOutage loginOption={{label}} />,
+};
+
+export const AuthenticationOutageStory = {
+  name: 'Authentication Outage',
+  args: {
+    label: 'DigiD',
+  },
+};

From 28e60a1aad1795a586dc37cb0177a62fe7938bb1 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Mon, 6 Nov 2023 12:11:02 +0100
Subject: [PATCH 16/26] :clock1: [#467] Temporary CSS override for icon colour

---
 src/scss/components/_alert.scss | 30 ++++++++++++++++++++++++++++++
 src/styles.scss                 |  1 +
 2 files changed, 31 insertions(+)
 create mode 100644 src/scss/components/_alert.scss

diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
new file mode 100644
index 000000000..46581a413
--- /dev/null
+++ b/src/scss/components/_alert.scss
@@ -0,0 +1,30 @@
+@use 'microscope-sass/lib/bem';
+
+// Temporary CSS override to get the colour of the icon to work
+.openforms-theme {
+  .utrecht-alert {
+    @include bem.modifier('error') {
+      .utrecht-alert__icon {
+        color: var(--utrecht-alert-icon-error-color);
+      }
+    }
+
+    @include bem.modifier('info') {
+      .utrecht-alert__icon {
+        color: var(--utrecht-alert-icon-info-color);
+      }
+    }
+
+    @include bem.modifier('warning') {
+      .utrecht-alert__icon {
+        color: var(--utrecht-alert-icon-warning-color);
+      }
+    }
+
+    @include bem.modifier('ok') {
+      .utrecht-alert__icon {
+        color: var(--utrecht-alert-icon-ok-color);
+      }
+    }
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 987f00dec..af8042b29 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -21,6 +21,7 @@
 @import './scss/components/typography';
 @import './scss/components/fa-icon';
 
+@import './scss/components/alert';
 @import './scss/components/anchor';
 @import './scss/components/button';
 @import './scss/components/button-group';

From 22bd87cdec1d877446867fcfed18e1f71b5e0f19 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Mon, 6 Nov 2023 12:34:19 +0100
Subject: [PATCH 17/26] :memo: [#467] Document which tokens should be replaced

---
 CHANGELOG.rst | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index aef91da2e..ec8766cf9 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -37,6 +37,14 @@ should be set:
   looks of the cursor when hovering over a submit button. For the Open Forms theme, this is now
   ``pointer``.
 
+The alert component has also been refactored to use the Utrecht alert component. In order to
+maintain the same styles as in the previous version, the following Utrecht design tokens should be
+set:
+
+* ``--utrecht-alert-warning-background-color`` with the value of ``--of-alert-warning-bg``.
+* ``--utrecht-alert-info-background-color`` with the value of ``--of-alert-info-bg``.
+* ``--utrecht-alert-error-background-color`` with the value of ``--of-alert-error-bg``.
+
 1.5.4 (2023-10-30)
 ==================
 

From 4e3f93c94399f0a866ef6e78a1ca3103fd0da079 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Mon, 6 Nov 2023 12:57:45 +0100
Subject: [PATCH 18/26] :ok_hand: [#467] PR Feedback

---
 package.json                                     |  8 ++++----
 src/components/Errors/ErrorMessage.js            |  5 ++++-
 src/components/Errors/Errors.stories.js          |  3 +--
 .../auth/AuthenticationOutage.stories.js         |  7 ++++++-
 src/scss/components/_alert.scss                  | 16 ++++++++++++++++
 src/scss/components/_authentication-errors.scss  |  5 ++++-
 6 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 5e7af9d02..a05918dca 100644
--- a/package.json
+++ b/package.json
@@ -137,10 +137,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@utrecht/component-library-css": "^1.0.0-alpha.604",
-    "@utrecht/component-library-react": "^1.0.0-alpha.413",
-    "@utrecht/components": "^1.0.0-alpha.565",
-    "@utrecht/design-tokens": "^1.0.0-alpha.597",
+    "@utrecht/component-library-css": "1.0.0-alpha.604",
+    "@utrecht/component-library-react": "1.0.0-alpha.413",
+    "@utrecht/components": "1.0.0-alpha.565",
+    "@utrecht/design-tokens": "1.0.0-alpha.597",
     "babel-jest": "^27.4.2",
     "babel-loader": "^9.1.2",
     "babel-plugin-formatjs": "^10.3.8",
diff --git a/src/components/Errors/ErrorMessage.js b/src/components/Errors/ErrorMessage.js
index 6e509b8be..01ed8fd1f 100644
--- a/src/components/Errors/ErrorMessage.js
+++ b/src/components/Errors/ErrorMessage.js
@@ -11,6 +11,8 @@ const ICONS = {
   ok: <i className="fa fas fa-check-circle" />,
 };
 
+const ALERT_MODIFIERS = ['info', 'warning', 'error', 'ok'];
+
 const ErrorMessage = ({children, modifier = 'error'}) => {
   const errorRef = useScrollIntoView();
   if (!children) return null;
@@ -23,7 +25,8 @@ const ErrorMessage = ({children, modifier = 'error'}) => {
 
 ErrorMessage.propTypes = {
   children: PropTypes.node,
-  modifier: PropTypes.string,
+  modifier: PropTypes.oneOf(ALERT_MODIFIERS),
 };
 
+export {ALERT_MODIFIERS};
 export default ErrorMessage;
diff --git a/src/components/Errors/Errors.stories.js b/src/components/Errors/Errors.stories.js
index 98ccfc1dd..dfecf72fa 100644
--- a/src/components/Errors/Errors.stories.js
+++ b/src/components/Errors/Errors.stories.js
@@ -1,6 +1,5 @@
 import ErrorMessage from './ErrorMessage';
-
-const ALERT_MODIFIERS = ['info', 'warning', 'error', 'ok'];
+import {ALERT_MODIFIERS} from './ErrorMessage';
 
 export default {
   title: 'Private API / Error Message',
diff --git a/src/components/auth/AuthenticationOutage.stories.js b/src/components/auth/AuthenticationOutage.stories.js
index bd5064f9e..e250e8cc6 100644
--- a/src/components/auth/AuthenticationOutage.stories.js
+++ b/src/components/auth/AuthenticationOutage.stories.js
@@ -2,7 +2,12 @@ import AuthenticationOutage from './AuthenticationOutage';
 
 export default {
   title: 'Private API / Authentication Outage',
-  render: ({label}) => <AuthenticationOutage loginOption={{label}} />,
+  component: AuthenticationOutage,
+  args: {
+    loginOption: {
+      label: 'DigiD',
+    },
+  },
 };
 
 export const AuthenticationOutageStory = {
diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
index 46581a413..99016b9c4 100644
--- a/src/scss/components/_alert.scss
+++ b/src/scss/components/_alert.scss
@@ -28,3 +28,19 @@
     }
   }
 }
+
+// TODO: remove in SDK 3.0
+// Backwards compatibility layer
+.utrecht-alert {
+  @include bem.modifier('error') {
+    background-color: var(--of-alert-error-bg, var(--utrecht-alert-error-background-color));
+  }
+
+  @include bem.modifier('info') {
+    background-color: var(--of-alert-info-bg, var(--utrecht-alert-info-background-color));
+  }
+
+  @include bem.modifier('warning') {
+    background-color: var(--of-alert-warning-bg, var(--utrecht-alert-warning-background-color));
+  }
+}
diff --git a/src/scss/components/_authentication-errors.scss b/src/scss/components/_authentication-errors.scss
index 8973e0eda..1ad779ded 100644
--- a/src/scss/components/_authentication-errors.scss
+++ b/src/scss/components/_authentication-errors.scss
@@ -1,3 +1,6 @@
 .openforms-authentication-errors {
-  margin: 1rem 0;
+  margin-block-end: 1rem;
+  margin-block-start: 1rem;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
 }

From bd2e86e2fe80e8799003aec3af5bd1890f16b94e Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Mon, 6 Nov 2023 15:23:16 +0100
Subject: [PATCH 19/26] :arrow_up: Upgrade design-tokens

---
 design-tokens | 2 +-
 package.json  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/design-tokens b/design-tokens
index 69ac09d49..0485a4657 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit 69ac09d49dcd64e80a980f3e73fcd85873cd396e
+Subproject commit 0485a4657b51d6e2ec50d19d7b1f2a690b432c08
diff --git a/package.json b/package.json
index a05918dca..9e3f6663a 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.24.2",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@open-formulieren/design-tokens": "^0.45.1",
+    "@open-formulieren/design-tokens": "^0.46.0",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",

From bda5ed6e5c9ded1994635e9cbca66c4e48032a45 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Mon, 6 Nov 2023 17:38:43 +0100
Subject: [PATCH 20/26] :bug: [#467] Fixing import of DatePickerCalendar
 component

---
 src/components/forms/DateField/DatePickerCalendar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/forms/DateField/DatePickerCalendar.js b/src/components/forms/DateField/DatePickerCalendar.js
index b35a6c208..760fb19a1 100644
--- a/src/components/forms/DateField/DatePickerCalendar.js
+++ b/src/components/forms/DateField/DatePickerCalendar.js
@@ -1,6 +1,6 @@
 // Calendar component documentation:
 // https://nl-design-system.github.io/utrecht/storybook-react/index.html?path=/docs/react-component-calendar--docs
-import {Calendar} from '@utrecht/component-library-react/dist/Calendar.js';
+import {Calendar} from '@utrecht/component-library-react/dist/Calendar.mjs';
 import {enGB, nl} from 'date-fns/locale';
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';

From cd4a6bb0bddeb925b14fa32e7c06e844d8721ff9 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Tue, 7 Nov 2023 11:09:47 +0100
Subject: [PATCH 21/26] :bug: [#467] Fix date picker component

---
 src/components/forms/DateField/DatePickerCalendar.js | 2 +-
 yarn.lock                                            | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/DateField/DatePickerCalendar.js b/src/components/forms/DateField/DatePickerCalendar.js
index 760fb19a1..8d77e66a7 100644
--- a/src/components/forms/DateField/DatePickerCalendar.js
+++ b/src/components/forms/DateField/DatePickerCalendar.js
@@ -1,6 +1,6 @@
 // Calendar component documentation:
 // https://nl-design-system.github.io/utrecht/storybook-react/index.html?path=/docs/react-component-calendar--docs
-import {Calendar} from '@utrecht/component-library-react/dist/Calendar.mjs';
+import {Calendar} from '@utrecht/component-library-react/dist/Calendar';
 import {enGB, nl} from 'date-fns/locale';
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
diff --git a/yarn.lock b/yarn.lock
index 78ec0c456..f3e47a7af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5145,12 +5145,12 @@
     "@typescript-eslint/types" "5.60.0"
     eslint-visitor-keys "^3.3.0"
 
-"@utrecht/component-library-css@^1.0.0-alpha.604":
+"@utrecht/component-library-css@1.0.0-alpha.604":
   version "1.0.0-alpha.604"
   resolved "https://registry.yarnpkg.com/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.604.tgz#d8c53be9a103ef71cf2bb171b5ab6bb0233ecce8"
   integrity sha512-2yAAOKxirmJVKpdHGhfh3lI4MdR46JN/W6oL+LlmRwmO84xTlJnWKqPuIcIijzjCHzggPWNl5O6zHPPlumWi4g==
 
-"@utrecht/component-library-react@^1.0.0-alpha.413":
+"@utrecht/component-library-react@1.0.0-alpha.413":
   version "1.0.0-alpha.413"
   resolved "https://registry.yarnpkg.com/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.413.tgz#42eba0303a6c07a6da2c3c375eaf9a4bd44627cc"
   integrity sha512-FVkRn4hj30COAKsko3YipkzMhx6q25nD0huRF96pqDf5PD8S3cIJ2/o71TYmVFxnFe2kEXC8dTzrtzRy2Calbg==
@@ -5158,14 +5158,14 @@
     clsx "1.2.1"
     lodash.chunk "4.2.0"
 
-"@utrecht/components@^1.0.0-alpha.565":
+"@utrecht/components@1.0.0-alpha.565":
   version "1.0.0-alpha.565"
   resolved "https://registry.yarnpkg.com/@utrecht/components/-/components-1.0.0-alpha.565.tgz#af5ec288882343b43e41dab3b929e8b44caac94f"
   integrity sha512-Rs/f8YzVpeM7pXgQuTicT/rb2sYrUqAGB3rRSWq7TuvUgreENrJa9vnRytVq2I6+Z66zEuz8d2tBO0tUEijFDA==
   dependencies:
     clsx "1.2.1"
 
-"@utrecht/design-tokens@^1.0.0-alpha.597":
+"@utrecht/design-tokens@1.0.0-alpha.597":
   version "1.0.0-alpha.597"
   resolved "https://registry.yarnpkg.com/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.597.tgz#7f36889edc763a001437074d266d9b8d1fb81602"
   integrity sha512-1DhRBv0896JkdaGiXBJL71mckrrQAZkr5CTqR5BRuHp/xbSaPtLg/JEw4uNXpsnvxZrwn1wmz/PY/wzvnBAGHw==

From 6fcf17e6210caa21a790a73bb340c8e506d3e711 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 8 Nov 2023 11:47:00 +0100
Subject: [PATCH 22/26] :arrow_down: [#467] Downgrade
 @utrecht/component-library-react because of the Calendar

---
 package.json |  2 +-
 yarn.lock    | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 9e3f6663a..fffbf04ca 100644
--- a/package.json
+++ b/package.json
@@ -138,7 +138,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@utrecht/component-library-css": "1.0.0-alpha.604",
-    "@utrecht/component-library-react": "1.0.0-alpha.413",
+    "@utrecht/component-library-react": "1.0.0-alpha.353",
     "@utrecht/components": "1.0.0-alpha.565",
     "@utrecht/design-tokens": "1.0.0-alpha.597",
     "babel-jest": "^27.4.2",
diff --git a/yarn.lock b/yarn.lock
index f3e47a7af..edae31d4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5150,12 +5150,13 @@
   resolved "https://registry.yarnpkg.com/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.604.tgz#d8c53be9a103ef71cf2bb171b5ab6bb0233ecce8"
   integrity sha512-2yAAOKxirmJVKpdHGhfh3lI4MdR46JN/W6oL+LlmRwmO84xTlJnWKqPuIcIijzjCHzggPWNl5O6zHPPlumWi4g==
 
-"@utrecht/component-library-react@1.0.0-alpha.413":
-  version "1.0.0-alpha.413"
-  resolved "https://registry.yarnpkg.com/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.413.tgz#42eba0303a6c07a6da2c3c375eaf9a4bd44627cc"
-  integrity sha512-FVkRn4hj30COAKsko3YipkzMhx6q25nD0huRF96pqDf5PD8S3cIJ2/o71TYmVFxnFe2kEXC8dTzrtzRy2Calbg==
+"@utrecht/component-library-react@1.0.0-alpha.353":
+  version "1.0.0-alpha.353"
+  resolved "https://registry.yarnpkg.com/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.353.tgz#1913089f74880532a0954717240e0e7ffb032020"
+  integrity sha512-WoJOGxUtQdDn0ysU9WYQou1MQBUIfJxEUJXMuTaRO2nxcYjv1lxto9Di+PRfDcRJr0mNKVApcxu3d8yRLFNHxQ==
   dependencies:
     clsx "1.2.1"
+    date-fns "2.30.0"
     lodash.chunk "4.2.0"
 
 "@utrecht/components@1.0.0-alpha.565":
@@ -7216,7 +7217,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@^2.30.0:
+date-fns@2.30.0, date-fns@^2.30.0:
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==

From bac71e21242d72fe629fc5927c012bd2a4532ef3 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 8 Nov 2023 11:47:33 +0100
Subject: [PATCH 23/26] :rewind: [#467] Restore old import that worked

---
 src/components/forms/DateField/DatePickerCalendar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/forms/DateField/DatePickerCalendar.js b/src/components/forms/DateField/DatePickerCalendar.js
index 8d77e66a7..94fc4e734 100644
--- a/src/components/forms/DateField/DatePickerCalendar.js
+++ b/src/components/forms/DateField/DatePickerCalendar.js
@@ -1,6 +1,6 @@
 // Calendar component documentation:
 // https://nl-design-system.github.io/utrecht/storybook-react/index.html?path=/docs/react-component-calendar--docs
-import {Calendar} from '@utrecht/component-library-react/dist/Calendar';
+import {Calendar} from '@utrecht/component-library-react';
 import {enGB, nl} from 'date-fns/locale';
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';

From 8582957509ef15c403d4d5e50731e44ebf9b4cd5 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 8 Nov 2023 12:14:25 +0100
Subject: [PATCH 24/26] :white_check_mark: [#467] Updated snapshots

---
 .../__snapshots__/test.spec.js.snap           | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/PaymentOverview/__snapshots__/test.spec.js.snap b/src/components/PaymentOverview/__snapshots__/test.spec.js.snap
index 89799e20a..c46f395d1 100644
--- a/src/components/PaymentOverview/__snapshots__/test.spec.js.snap
+++ b/src/components/PaymentOverview/__snapshots__/test.spec.js.snap
@@ -18,18 +18,17 @@ exports[`navigation without context displays a generic error message 1`] = `
   >
      
     <div
-      className="openforms-alert openforms-alert--error"
+      className="utrecht-alert utrecht-alert--error"
     >
-      <span
-        className="openforms-alert__icon openforms-alert__icon--wide"
+      <div
+        className="utrecht-alert__icon"
       >
         <i
-          aria-hidden="true"
-          className="fa fas fa-icon fa-exclamation-circle"
+          className="fa fas fa-exclamation-circle"
         />
-      </span>
+      </div>
       <div
-        className="openforms-body"
+        className="utrecht-alert__message"
       >
         We can't display any payment information - did you maybe get here by accident?
       </div>
@@ -60,18 +59,17 @@ exports[`on valid redirect renders an error message on failure 1`] = `
       className="openforms-body"
     >
       <div
-        className="openforms-alert openforms-alert--error"
+        className="utrecht-alert utrecht-alert--error"
       >
-        <span
-          className="openforms-alert__icon openforms-alert__icon--wide"
+        <div
+          className="utrecht-alert__icon"
         >
           <i
-            aria-hidden="true"
-            className="fa fas fa-icon fa-exclamation-circle"
+            className="fa fas fa-exclamation-circle"
           />
-        </span>
+        </div>
         <div
-          className="openforms-body"
+          className="utrecht-alert__message"
         >
           The payment has failed. If you aborted the payment, please complete payment from the confirmation email.
         </div>

From 63c1a14101686f87ac45248cbb5463b9806e4e12 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 8 Nov 2023 15:42:32 +0100
Subject: [PATCH 25/26] :ok_hand: [#467] PR Feedback 2

---
 CHANGELOG.rst                                   | 4 ++++
 src/scss/components/_alert.scss                 | 6 +++---
 src/scss/components/_authentication-errors.scss | 8 ++++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index ec8766cf9..e416ae5b5 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -44,6 +44,10 @@ set:
 * ``--utrecht-alert-warning-background-color`` with the value of ``--of-alert-warning-bg``.
 * ``--utrecht-alert-info-background-color`` with the value of ``--of-alert-info-bg``.
 * ``--utrecht-alert-error-background-color`` with the value of ``--of-alert-error-bg``.
+* ``--utrecht-alert-icon-error-color`` with the value of ``--of-color-danger``.
+* ``--utrecht-alert-icon-info-color`` with the value of ``--of-color-info``.
+* ``--utrecht-alert-icon-warning-color`` with the value of ``--of-color-warning``.
+* ``--utrecht-alert-icon-ok-color`` with the value of ``--of-color-success``.
 
 1.5.4 (2023-10-30)
 ==================
diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
index 99016b9c4..02671ae9b 100644
--- a/src/scss/components/_alert.scss
+++ b/src/scss/components/_alert.scss
@@ -33,14 +33,14 @@
 // Backwards compatibility layer
 .utrecht-alert {
   @include bem.modifier('error') {
-    background-color: var(--of-alert-error-bg, var(--utrecht-alert-error-background-color));
+    background-color: var(--utrecht-alert-error-background-color, var(--of-alert-error-bg));
   }
 
   @include bem.modifier('info') {
-    background-color: var(--of-alert-info-bg, var(--utrecht-alert-info-background-color));
+    background-color: var(--utrecht-alert-info-background-color, var(--of-alert-info-bg));
   }
 
   @include bem.modifier('warning') {
-    background-color: var(--of-alert-warning-bg, var(--utrecht-alert-warning-background-color));
+    background-color: var(--utrecht-alert-warning-background-color, var(--of-alert-warning-bg));
   }
 }
diff --git a/src/scss/components/_authentication-errors.scss b/src/scss/components/_authentication-errors.scss
index 1ad779ded..4c8cc5b4a 100644
--- a/src/scss/components/_authentication-errors.scss
+++ b/src/scss/components/_authentication-errors.scss
@@ -1,6 +1,6 @@
 .openforms-authentication-errors {
-  margin-block-end: 1rem;
-  margin-block-start: 1rem;
-  margin-inline-end: 0;
-  margin-inline-start: 0;
+  padding-block-end: 1rem;
+  padding-block-start: 1rem;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
 }

From 8146c193ccbedf29cbee3b9ae0abfd6e4d0647c0 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 8 Nov 2023 16:36:35 +0100
Subject: [PATCH 26/26] :recycle: [#467] Replace deleted tokens

---
 src/scss/components/_form-field.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/scss/components/_form-field.scss b/src/scss/components/_form-field.scss
index ee030dc04..f3feddd11 100644
--- a/src/scss/components/_form-field.scss
+++ b/src/scss/components/_form-field.scss
@@ -7,7 +7,10 @@
       background-color: var(--of-utrecht-form-field-background-color, unset);
 
       &.utrecht-form-field--invalid {
-        --of-utrecht-form-field-background-color: var(--of-alert-error-bg);
+        --of-utrecht-form-field-background-color: var(
+          --utrecht-alert-error-background-color,
+          var(--of-alert-error-bg)
+        );
         // apply padding in all dimensions for error state
         padding-inline-end: var(--utrecht-form-field-invalid-padding-inline-start);
         padding-block-start: var(--utrecht-form-field-invalid-padding-inline-start);
@@ -20,7 +23,10 @@
       background-color: var(--of-utrecht-form-field-background-color, unset);
 
       &.utrecht-form-fieldset--invalid {
-        --of-utrecht-form-field-background-color: var(--of-alert-error-bg);
+        --of-utrecht-form-field-background-color: var(
+          --utrecht-alert-error-background-color,
+          var(--of-alert-error-bg)
+        );
         // apply padding in all dimensions for error state
         padding-inline-end: var(--utrecht-form-field-invalid-padding-inline-start);
         padding-block-start: var(--utrecht-form-field-invalid-padding-inline-start);