Enhance FormMessage and styleguide for improved accessibility and user feedback

- Add orange AlertCircle icon to FormMessage component for better visibility of validation errors.
- Update styleguide to demonstrate new alert components with icons for error, success, and warning messages.
- Refactor CSS for status messages and form error messages to improve layout and accessibility compliance.

app/components/ui/form/FormMessage.vue

@@ -2,6 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { inject } from 'vue'
 import { useFieldError } from 'vee-validate'
+import { AlertCircle } from 'lucide-vue-next'
 import { cn } from '~/lib/utils'
 import type { FormItemContext } from '.'
 import { FORM_ITEM_INJECT_KEY } from '.'
@@ -9,6 +10,7 @@ import { FORM_ITEM_INJECT_KEY } from '.'
 /**
  * FormMessage component - Displays validation error messages
  * Only renders when there is an error for the associated field
+ * Includes orange AlertCircle icon for better accessibility
  */
 
 interface Props {
@@ -38,7 +40,8 @@ const error = useFieldError()
       :id="`${formItemContext?.id}-message`"
       :class="cn('form-error', props.class)"
     >
-      {{ error }}
+      <AlertCircle class="h-6 w-6 text-warning flex-shrink-0" />
+      <span>{{ error }}</span>
     </p>
   </Transition>
 </template>