Merged in fix/BOOK-323-enter-details-scroll-error (pull request #2986)

Fix/BOOK-323 enter details scroll error

* fix(BOOK-323): scroll to invalid element on submit on enter details

* fix(BOOK-323): update error message design

* fix(BOOK-323): clean up

* fix(BOOK-323): scroll to fields in room in right order

* fix(BOOK-323): add id to translations

* fix(BOOK-323): remove undefined

* fix(BOOK-323): fix submitting state

* fix(BOOK-323): use ref in multiroom for scrolling to right element, add membershipNo

* fix(BOOK-323): fix invalid border country

* fix(BOOK-323): use error message component

* fix(BOOK-323): fix invalid focused styling on mobile

* fix(BOOK-323): remove redundant dependency in callback


Approved-by: Erik Tiekstra

packages/design-system/lib/components/MessageBanner/MessageBanner.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { MessageBanner } from './index'
+
+type MessageBannerType = 'default' | 'error' | 'info'
+type TextColor = 'default' | 'error'
+
+const meta: Meta<typeof MessageBanner> = {
+  title: 'Components/MessageBanner',
+  component: MessageBanner,
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['default', 'error', 'info'] as MessageBannerType[],
+    },
+    textColor: {
+      control: { type: 'select' },
+      options: ['default', 'error'] as TextColor[],
+    },
+    text: { control: 'text' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof MessageBanner>
+
+export const Default: Story = {
+  args: {
+    type: 'default',
+    textColor: 'default',
+    text: 'This is a default message',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    type: 'error',
+    textColor: 'default',
+    text: 'This is a warning message',
+  },
+}
+
+export const WarningErrorText: Story = {
+  args: {
+    type: 'error',
+    textColor: 'error',
+    text: 'Warning with error text color',
+  },
+}
+
+export const Info: Story = {
+  args: {
+    type: 'info',
+    textColor: 'default',
+    text: 'This is an info message',
+  },
+}
+
+export const InfoErrorText: Story = {
+  args: {
+    type: 'info',
+    textColor: 'error',
+    text: 'Info with error text color',
+  },
+}