feat: allow compact input

app/javascript/v3/components/Form/Input.vue

@@ -23,14 +23,16 @@
           'focus:ring-red-600 ring-red-600': hasError,
           'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
             !hasError,
+          'px-3 py-3': spacing === 'base',
+          'px-3 py-2': spacing === 'compact',
         }"
-        class="block w-full rounded-md border-0 px-3 py-3 appearance-none shadow-sm ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 outline-none dark:bg-slate-700"
+        class="block w-full border-0 rounded-md shadow-sm outline-none appearance-none ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700"
         @input="onInput"
         @blur="$emit('blur')"
       />
       <span
         v-if="errorMessage && hasError"
-        class="text-xs leading-2 text-red-400"
+        class="text-xs text-red-400 leading-2"
       >
         {{ errorMessage }}
       </span>
@@ -76,6 +78,11 @@ export default {
       type: String,
       default: '',
     },
+    spacing: {
+      type: String,
+      default: 'base',
+      validator: value => ['base', 'compact'].includes(value),
+    },
   },
   methods: {
     onInput(e) {