Refactor Select Component Variants and Styles for Improved Consistency

- Updated SelectTrigger and SelectItem components to use variant props for error handling, enhancing visual feedback.
- Refactored styles in SelectContent and SelectItem for better alignment and responsiveness.
- Added new variant handling in the SelectTrigger component to streamline class management.
- Updated styleguide.vue to include examples of the Select component with error and disabled states for better documentation.

app/components/Checkout/AddressForm.vue

@@ -113,10 +113,7 @@ const parseDateFromDisplay = (displayDate: string) => {
       >
         <SelectTrigger
           id="salutation"
-          :class="cn(
-            'bg-purple-dark border-white/20 text-white',
-            getError('salutation') && 'border-red'
-          )"
+          :variant="getError('salutation') ? 'error' : 'default'"
         >
           <SelectValue placeholder="Bitte wählen" />
         </SelectTrigger>
@@ -284,10 +281,7 @@ const parseDateFromDisplay = (displayDate: string) => {
       >
         <SelectTrigger
           id="countryCode"
-          :class="cn(
-            'bg-purple-dark border-white/20 text-white',
-            getError('countryCode') && 'border-red'
-          )"
+          :variant="getError('countryCode') ? 'error' : 'default'"
         >
           <SelectValue placeholder="Bitte wählen" />
         </SelectTrigger>

app/components/Checkout/CheckoutForm.vue

@@ -147,7 +147,7 @@ function getError(field: string): string {
     <div class="space-y-2">
       <label class="text-sm font-medium text-white">Anrede *</label>
       <Select v-model="form.salutation" :disabled="loading">
-        <SelectTrigger :class="{ 'border-warning/50': hasError('salutation') }">
+        <SelectTrigger :variant="hasError('salutation') ? 'error' : 'default'">
           <SelectValue placeholder="Bitte wählen" />
         </SelectTrigger>
         <SelectContent>
@@ -272,7 +272,7 @@ function getError(field: string): string {
     <div class="space-y-2">
       <label for="countryCode" class="text-sm font-medium text-white">Land *</label>
       <Select v-model="form.countryCode" :disabled="loading">
-        <SelectTrigger :class="{ 'border-warning/50': hasError('countryCode') }">
+        <SelectTrigger :variant="hasError('countryCode') ? 'error' : 'default'">
           <SelectValue placeholder="Bitte wählen" />
         </SelectTrigger>
         <SelectContent>