From a1af05f456e718793ba5953bdcf035313f38e3f6 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Mon, 4 Nov 2024 15:19:53 +0100
Subject: [PATCH] migrate mt-field-error over to plain css

---
 .../_internal/mt-field-error/mt-field-error.vue  | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
index 5daebc71a..e6b696dce 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
@@ -1,14 +1,15 @@
 <template>
   <mt-text
+    v-if="!!error"
     as="span"
     size="2xs"
     color="color-text-critical-default"
-    v-if="!!error"
     class="mt-field__error"
     aria-label="Error message"
   >
-    <mt-icon name="solid-exclamation-circle" />
-    {{ errorMessage }}
+    <mt-icon name="solid-exclamation-circle" size="0.75rem" />
+
+    <span>{{ errorMessage }}</span>
   </mt-text>
 </template>
 
@@ -71,17 +72,12 @@ const { t } = useI18n({
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .mt-field__error {
   display: flex;
   align-items: center;
   gap: 4px;
   margin-top: 4px;
-
-  #meteor-icon-kit__solid-exclamation-circle {
-    width: 12px;
-    height: 12px;
-    color: var(--color-icon-critical-default);
-  }
+  color: var(--color-icon-critical-default);
 }
 </style>