Merged in chore/SW-3145-move-country (pull request #2545)

chore: SW-3145 Moved country into design system

* chore: SW-3145 Moved country into design system


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/Form/ErrorMessage/Error.tsx

@@ -0,0 +1,18 @@
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+
+import styles from './error.module.css'
+import { Typography } from '../../Typography'
+
+export function Error({ children }: React.PropsWithChildren) {
+  return (
+    <Typography
+      className={styles.message}
+      variant="Body/Supporting text (caption)/smRegular"
+    >
+      <span>
+        <MaterialIcon icon="info" color="Icon/Feedback/Error" />
+        {children}
+      </span>
+    </Typography>
+  )
+}

packages/design-system/lib/components/Form/ErrorMessage/error.module.css

@@ -0,0 +1,7 @@
+.message {
+  align-items: center;
+  color: var(--Text-Interactive-Error);
+  display: flex;
+  gap: var(--Space-x05);
+  margin: var(--Space-x1) 0 0;
+}

packages/design-system/lib/components/Form/ErrorMessage/errorMessage.ts

@@ -0,0 +1,18 @@
+import type { FieldValuesFromFieldErrors } from '@hookform/error-message'
+import type {
+  FieldErrors,
+  FieldName,
+  FieldValues,
+  Message,
+  MultipleFieldErrors,
+} from 'react-hook-form'
+
+export type ErrorMessageProps<TFieldErrors> = {
+  errors?: FieldErrors<FieldValues>
+  name: FieldName<FieldValuesFromFieldErrors<TFieldErrors>>
+  messageLabel?: Message
+  render?: (data: {
+    message: Message
+    messages?: MultipleFieldErrors
+  }) => React.ReactNode
+}

packages/design-system/lib/components/Form/ErrorMessage/index.tsx

@@ -0,0 +1,19 @@
+import { ErrorMessage as RHFErrorMessage } from '@hookform/error-message'
+
+import { Error } from './Error'
+
+import type { ErrorMessageProps } from './errorMessage'
+
+export function ErrorMessage<T>({
+  errors,
+  name,
+  messageLabel,
+}: ErrorMessageProps<T>) {
+  return (
+    <RHFErrorMessage
+      errors={errors}
+      name={name}
+      render={({ message }) => <Error>{messageLabel ?? message}</Error>}
+    />
+  )
+}