refactor: reorganize Select stories and add size/state variants (#9639)

<img width="373" height="535" alt="스크린샷 2026-03-09 오후 2 48 10"
src="https://github.com/user-attachments/assets/7fea3fd4-0d90-4022-ad78-c53e3d5be887"
/>


## Summary
- Reorganize Select-related stories under `Components/Select/` hierarchy
(SingleSelect, MultiSelect, Select)
- Add `size` prop (`lg`/`md`) to SingleSelect, MultiSelect,
SelectTrigger for Figma Large (40px) / Medium (32px) variants
- Add `invalid` prop (red border) to SingleSelect and SelectTrigger
- Add `loading` prop (spinner) to SingleSelect
- Add `hover:bg-secondary-background-hover` to all select triggers
- Align disabled opacity to 30% per Figma spec
- Add new stories: Disabled, Invalid, Loading, MediumSize, AllStates

## Test plan
- [ ] Verify Storybook renders all stories under `Components/Select/`
- [ ] Check hover state visually on all select triggers
- [ ] Verify Medium size (32px) renders correctly
- [ ] Verify Invalid state shows red border
- [ ] Verify Loading state shows spinner
- [ ] Verify Disabled state has 30% opacity and no hover effect

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9639-refactor-reorganize-Select-stories-and-add-size-state-variants-31e6d73d36508142b835f04ab6bdaefe)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

src/components/input/MultiSelect.vue

@@ -16,20 +16,23 @@
     :pt="{
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'relative inline-flex h-10 cursor-pointer select-none',
+          'relative inline-flex cursor-pointer select-none',
+          size === 'md' ? 'h-8' : 'h-10',
           'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
+          'hover:bg-secondary-background-hover',
           'border-[2.5px] border-solid',
-          selectedCount > 0
-            ? 'border-node-component-border'
-            : 'border-transparent',
-          'focus-within:border-node-component-border',
-          { 'cursor-default opacity-60': props.disabled }
+          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
+          'focus-within:border-base-foreground',
+          props.disabled &&
+            'cursor-default opacity-30 hover:bg-secondary-background'
         )
       }),
       labelContainer: {
-        class:
-          'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
+        class: cn(
+          'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
+          size === 'md' ? 'pl-3' : 'pl-4'
+        )
       },
       label: {
         class: 'p-0'
@@ -129,12 +132,12 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm">
+      <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
         {{ label }}
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
       >
         {{ selectedCount }}
       </span>
@@ -197,6 +200,8 @@ defineOptions({
 interface Props {
   /** Input label shown on the trigger button */
   label?: string
+  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
+  size?: 'lg' | 'md'
   /** Show search box in the panel header */
   showSearchBox?: boolean
   /** Show selected count text in the panel header */
@@ -216,6 +221,7 @@ interface Props {
 }
 const {
   label,
+  size = 'lg',
   showSearchBox = false,
   showSelectedCount = false,
   showClearButton = false,