From 239bb989c1a59ebc5fee778b020b1ffaf3c65279 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 10:44:42 +0900
Subject: [PATCH 01/28] Init Select comp

---
 .../src/components/Select/Select.stories.tsx  | 26 +++++++++++++++++++
 .../Select/__tests__/index.browser.test.tsx   | 11 ++++++++
 .../src/components/Select/index.tsx           |  3 +++
 3 files changed, 40 insertions(+)
 create mode 100644 packages/components/src/components/Select/Select.stories.tsx
 create mode 100644 packages/components/src/components/Select/__tests__/index.browser.test.tsx
 create mode 100644 packages/components/src/components/Select/index.tsx

diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
new file mode 100644
index 00000000..136fde52
--- /dev/null
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Select } from '.'
+
+type Story = StoryObj<typeof meta>
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Select> = {
+  title: 'Devfive/Select',
+  component: Select,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '10px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Input text',
+  },
+}
+
+export default meta
diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
new file mode 100644
index 00000000..59b8f575
--- /dev/null
+++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Select } from '..'
+
+describe('Select', () => {
+  it('should render', () => {
+    const { container } = render(<Select />)
+    expect(container).toMatchSnapshot()
+  })
+})
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
new file mode 100644
index 00000000..6ed60685
--- /dev/null
+++ b/packages/components/src/components/Select/index.tsx
@@ -0,0 +1,3 @@
+export function Select() {
+  return <></>
+}

From 7da5e9019ddc9e0a9e1486656dbd8b0478d81a2f Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 11:51:32 +0900
Subject: [PATCH 02/28] Create basic Select structure

---
 .../src/components/Select/Select.stories.tsx  |  24 ++-
 .../src/components/Select/index.tsx           | 144 +++++++++++++++++-
 2 files changed, 162 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index 136fde52..26b8a040 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -1,6 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react-vite'
 
-import { Select } from '.'
+import {
+  Select,
+  SelectContainer,
+  SelectDivider,
+  SelectOption,
+  SelectTrigger,
+} from '.'
 
 type Story = StoryObj<typeof meta>
 
@@ -18,9 +24,19 @@ const meta: Meta<typeof Select> = {
 }
 
 export const Default: Story = {
-  args: {
-    placeholder: 'Input text',
-  },
+  args: {},
+  render: (args) => (
+    <Select {...args}>
+      <SelectTrigger>Select</SelectTrigger>
+      <SelectContainer>
+        <SelectOption>Option 1</SelectOption>
+        <SelectOption>Option 2</SelectOption>
+        <SelectDivider />
+        <SelectOption>Option 3</SelectOption>
+        <SelectOption disabled>Option 4</SelectOption>
+      </SelectContainer>
+    </Select>
+  ),
 }
 
 export default meta
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 6ed60685..41d44742 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -1,3 +1,143 @@
-export function Select() {
-  return <></>
+'use client'
+
+import { Box, css, Flex, VStack } from '@devup-ui/react'
+import clsx from 'clsx'
+import { ComponentProps, createContext, useContext, useState } from 'react'
+
+import { Button } from '../Button'
+
+interface SelectProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+}
+
+const SelectContext = createContext<{
+  open: boolean
+  setOpen: (open: boolean) => void
+} | null>(null)
+
+export const useSelect = () => {
+  const context = useContext(SelectContext)
+  if (!context) {
+    throw new Error('useSelect must be used within a Select')
+  }
+  return context
+}
+
+export function Select({
+  children,
+  open: openProp,
+  onOpenChange,
+}: SelectProps) {
+  const [open, setOpen] = useState(openProp ?? false)
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open)
+    onOpenChange?.(open)
+  }
+  return (
+    <SelectContext.Provider value={{ open, setOpen: handleOpenChange }}>
+      <Box display="inline-block" pos="relative">
+        {children}
+      </Box>
+    </SelectContext.Provider>
+  )
+}
+
+export function SelectTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { open, setOpen } = useSelect()
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <Button
+      className={clsx(
+        css({
+          pos: 'relative',
+          borderRadius: '8px',
+        }),
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}
+
+export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
+  const { open } = useSelect()
+  if (!open) return null
+  return (
+    <VStack
+      bg="$inputBg"
+      border="1px solid $border"
+      borderRadius="8px"
+      bottom="-4px"
+      boxShadow="0 2px 2px 0 $base10"
+      gap="6px"
+      p="10px"
+      pos="absolute"
+      styleOrder={1}
+      transform="translateY(100%)"
+      userSelect="none"
+      w="232px"
+      {...props}
+    >
+      {children}
+    </VStack>
+  )
+}
+
+interface SelectOptionProps extends ComponentProps<'div'> {
+  disabled?: boolean
+}
+
+export function SelectOption({
+  disabled,
+  onClick,
+  children,
+  ...props
+}: SelectOptionProps) {
+  const { setOpen } = useSelect()
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (onClick) {
+      onClick(e)
+      return
+    }
+    setOpen(false)
+  }
+
+  return (
+    <Flex
+      _hover={
+        !disabled && {
+          bg: '$primaryBg',
+        }
+      }
+      alignItems="center"
+      borderRadius="8px"
+      color={disabled ? '$selectDisabled' : '$title'}
+      cursor={disabled ? 'default' : 'pointer'}
+      h="40px"
+      onClick={disabled ? undefined : handleClick}
+      px="10px"
+      styleOrder={1}
+      transition="background-color 0.1s ease-in-out"
+      typography="inputText"
+      {...props}
+    >
+      {children}
+    </Flex>
+  )
+}
+
+export function SelectDivider({ ...props }: ComponentProps<'div'>) {
+  return <Box bg="$border" h="1px" styleOrder={1} w="100%" {...props} />
 }

From 48760a690c04dd1ac8a3f95338b017dc09017046 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 13:59:20 +0900
Subject: [PATCH 03/28] Add value selection in Select

---
 .../src/components/Select/Checkbox.tsx        |  30 +++++
 .../src/components/Select/IconCheck.tsx       |  22 ++++
 .../src/components/Select/index.tsx           | 110 +++++++++++++++++-
 3 files changed, 157 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/components/Select/Checkbox.tsx
 create mode 100644 packages/components/src/components/Select/IconCheck.tsx

diff --git a/packages/components/src/components/Select/Checkbox.tsx b/packages/components/src/components/Select/Checkbox.tsx
new file mode 100644
index 00000000..3b306b9f
--- /dev/null
+++ b/packages/components/src/components/Select/Checkbox.tsx
@@ -0,0 +1,30 @@
+import { Box, css } from '@devup-ui/react'
+
+import { IconCheck } from './IconCheck'
+
+interface CheckboxProps {
+  isChecked: boolean
+}
+
+export function Checkbox({ isChecked }: CheckboxProps) {
+  return (
+    <Box
+      bg={isChecked ? '$primary' : '$border'}
+      borderRadius="4px"
+      boxSize="18px"
+      pos="relative"
+      transition="background-color 0.1s ease-in-out"
+    >
+      {isChecked && (
+        <IconCheck
+          className={css({
+            position: 'absolute',
+            top: '55%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          })}
+        />
+      )}
+    </Box>
+  )
+}
diff --git a/packages/components/src/components/Select/IconCheck.tsx b/packages/components/src/components/Select/IconCheck.tsx
new file mode 100644
index 00000000..fd2e2395
--- /dev/null
+++ b/packages/components/src/components/Select/IconCheck.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react'
+
+export function IconCheck({ ...props }: ComponentProps<'svg'>) {
+  return (
+    <svg
+      color="white"
+      fill="none"
+      height="10"
+      viewBox="0 0 12 10"
+      width="12"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M11.6044 0.825663C12.1054 1.28367 12.1344 2.05481 11.6692 2.54805L5.4787 9.11055C5.24011 9.36348 4.90375 9.50497 4.55315 9.49987C4.20254 9.49477 3.87058 9.34356 3.63968 9.0838L0.30635 5.3338C-0.143922 4.82725 -0.0917767 4.05729 0.42282 3.61405C0.937417 3.17081 1.7196 3.22214 2.16987 3.7287L4.59876 6.4612L9.85463 0.889455C10.3199 0.396214 11.1033 0.367654 11.6044 0.825663Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 41d44742..8b84d8f1 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -5,16 +5,24 @@ import clsx from 'clsx'
 import { ComponentProps, createContext, useContext, useState } from 'react'
 
 import { Button } from '../Button'
+import { IconCheck } from './IconCheck'
+
+type SelectType = 'default' | 'radio' | 'checkbox'
+type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
 
 interface SelectProps {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   children: React.ReactNode
+  type?: SelectType
 }
 
 const SelectContext = createContext<{
   open: boolean
   setOpen: (open: boolean) => void
+  value: SelectValue<SelectType>
+  setValue: (value: string) => void
+  type: SelectType
 } | null>(null)
 
 export const useSelect = () => {
@@ -26,17 +34,44 @@ export const useSelect = () => {
 }
 
 export function Select({
+  type = 'default',
   children,
   open: openProp,
   onOpenChange,
 }: SelectProps) {
   const [open, setOpen] = useState(openProp ?? false)
+  const [value, setValue] = useState<SelectValue<typeof type>>(
+    type === 'checkbox' ? [] : '',
+  )
+
   const handleOpenChange = (open: boolean) => {
     setOpen(open)
     onOpenChange?.(open)
   }
+
+  const handleValueChange = (nextValue: string) => {
+    if (type === 'default') return
+    if (type === 'radio') {
+      setValue(nextValue)
+      return
+    }
+    if (Array.isArray(value) && value.includes(nextValue)) {
+      setValue(value.filter((v) => v !== nextValue))
+    } else {
+      setValue([...value, nextValue])
+    }
+  }
+
   return (
-    <SelectContext.Provider value={{ open, setOpen: handleOpenChange }}>
+    <SelectContext.Provider
+      value={{
+        open,
+        setOpen: handleOpenChange,
+        value,
+        setValue: handleValueChange,
+        type,
+      }}
+    >
       <Box display="inline-block" pos="relative">
         {children}
       </Box>
@@ -105,15 +140,26 @@ export function SelectOption({
   children,
   ...props
 }: SelectOptionProps) {
-  const { setOpen } = useSelect()
+  const { setOpen, setValue, value, type } = useSelect()
+
+  const handleClose = () => {
+    if (type === 'checkbox') return
+    setOpen(false)
+  }
+
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (onClick) {
       onClick(e)
       return
     }
-    setOpen(false)
+    setValue(children as string)
+    handleClose()
   }
 
+  const isChecked = Array.isArray(value)
+    ? value.includes(children as string)
+    : value === children
+
   return (
     <Flex
       _hover={
@@ -123,16 +169,70 @@ export function SelectOption({
       }
       alignItems="center"
       borderRadius="8px"
-      color={disabled ? '$selectDisabled' : '$title'}
+      color={disabled ? '$selectDisabled' : isChecked ? '$primary' : '$title'}
       cursor={disabled ? 'default' : 'pointer'}
+      gap={
+        {
+          checkbox: '10px',
+          radio: '6px',
+          default: '0',
+        }[type]
+      }
       h="40px"
       onClick={disabled ? undefined : handleClick}
       px="10px"
       styleOrder={1}
       transition="background-color 0.1s ease-in-out"
-      typography="inputText"
+      typography={isChecked ? 'inputBold' : 'inputText'}
       {...props}
     >
+      {
+        {
+          checkbox: (
+            <Box
+              bg={isChecked ? '$primary' : '$border'}
+              borderRadius="4px"
+              boxSize="18px"
+              pos="relative"
+              transition="background-color 0.1s ease-in-out"
+            >
+              {isChecked && (
+                <IconCheck
+                  className={css({
+                    position: 'absolute',
+                    top: '55%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                  })}
+                />
+              )}
+            </Box>
+          ),
+          radio: (
+            <>
+              {isChecked && (
+                <Box
+                  borderRadius="4px"
+                  boxSize="18px"
+                  pos="relative"
+                  transition="background-color 0.1s ease-in-out"
+                >
+                  <IconCheck
+                    className={css({
+                      position: 'absolute',
+                      top: '55%',
+                      left: '50%',
+                      transform: 'translate(-50%, -50%)',
+                      color: '$primary',
+                    })}
+                  />
+                </Box>
+              )}
+            </>
+          ),
+          default: null,
+        }[type]
+      }
       {children}
     </Flex>
   )

From cbebb9e8ec3240feb3a3d174f5975c36f153ed17 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 14:13:43 +0900
Subject: [PATCH 04/28] Add outside click close function

---
 .../src/components/Select/index.tsx           | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 8b84d8f1..97d9305f 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -2,7 +2,14 @@
 
 import { Box, css, Flex, VStack } from '@devup-ui/react'
 import clsx from 'clsx'
-import { ComponentProps, createContext, useContext, useState } from 'react'
+import {
+  ComponentProps,
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 
 import { Button } from '../Button'
 import { IconCheck } from './IconCheck'
@@ -39,11 +46,22 @@ export function Select({
   open: openProp,
   onOpenChange,
 }: SelectProps) {
+  const ref = useRef<HTMLDivElement>(null)
   const [open, setOpen] = useState(openProp ?? false)
   const [value, setValue] = useState<SelectValue<typeof type>>(
     type === 'checkbox' ? [] : '',
   )
 
+  useEffect(() => {
+    if (!ref.current) return
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (ref.current?.contains(e.target as Node)) return
+      setOpen(false)
+    }
+    document.addEventListener('click', handleOutsideClick)
+    return () => document.removeEventListener('click', handleOutsideClick)
+  }, [open, setOpen])
+
   const handleOpenChange = (open: boolean) => {
     setOpen(open)
     onOpenChange?.(open)
@@ -72,7 +90,7 @@ export function Select({
         type,
       }}
     >
-      <Box display="inline-block" pos="relative">
+      <Box ref={ref} display="inline-block" pos="relative">
         {children}
       </Box>
     </SelectContext.Provider>
@@ -108,6 +126,7 @@ export function SelectTrigger({
 
 export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
   const { open } = useSelect()
+
   if (!open) return null
   return (
     <VStack

From 3a1b7afa7b5b7be579df30f7892725e167180703 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 14:24:01 +0900
Subject: [PATCH 05/28] Update devup.json

---
 packages/components/devup.json | 1143 ++++++++++++++++----------------
 1 file changed, 579 insertions(+), 564 deletions(-)

diff --git a/packages/components/devup.json b/packages/components/devup.json
index 7d9385b9..40781c5d 100644
--- a/packages/components/devup.json
+++ b/packages/components/devup.json
@@ -1,569 +1,584 @@
 {
-  "theme": {
-    "colors": {
-      "light": {
-        "primary": "#674DC7",
-        "primaryHover": "#4D38AE",
-        "primaryActive": "#312395",
-        "primaryBg": "#F4F3FA",
-        "secondary": "#E3E0F2",
-        "link": "#7C8EE1",
-        "text": "#272727",
-        "background": "#F5F5F5",
-        "containerBackground": "#FFFFFF",
-        "border": "#E4E4E4",
-        "success": "#2CA353",
-        "warning": "#FF9800",
-        "error": "#D52B2E",
-        "info": "#2196F3",
-        "white": "#FFFFFF",
-        "black": "#000000",
-        "title": "#1A1A1A",
-        "caption": "#787878",
-        "black50": "#00000080",
-        "placeHolder": "#9D9D9D",
-        "base50": "#FFFFFF80",
-        "footerBackground": "#2F313B",
-        "footerAward": "#EAEAED",
-        "footerBody": "#FFFFFF",
-        "footerTitle": "#F2F2F2",
-        "footerCaption": "#CACACA",
-        "white10": "#FFFFFF1A",
-        "base": "#FFFFFF",
-        "negativeBase": "#000000",
-        "inputPlaceholder": "#A9A8AB",
-        "inputBg": "#FFFFFF",
-        "inputIcon": "#C3C2C8",
-        "inputDisabledBg": "#F0F0F3",
-        "inputDisabledText": "#D6D7DE",
-        "inputCaption": "#9B9BA6",
-        "negative20": "#00000033",
-        "negative10": "#0000001A",
-        "toggleBg": "#E4E4E4",
-        "primary50": "#614FC480",
-        "primary20": "#614FC433",
-        "tableSearch": "#FFED8A",
-        "black5": "#0000000D",
-        "filterBg": "#EFEEF2",
-        "footerLink": "#B7B5C0",
-        "familysiteBg": "#828389",
-        "familysiteTxt": "#272727",
-        "familyHover": "#A0A1A5",
-        "footerNavTitle": "#98989D",
-        "snackBg": "#29292CCC",
-        "snackLink": "#B2B0EF",
-        "containerHover": "#EEEEEE",
-        "kakoBg": "#FFE232",
-        "kakaoHover": "#F0C81A",
-        "textFixed": "#272727",
-        "primaryFocus": "#9385D3",
-        "containerPush": "#DADAE1",
-        "selectDisabled": "#C4C5D1",
-        "selectBoxBg": "#00000012",
-        "iconBold": "#8D8C9A",
-        "borderBold": "#BCBCBC",
-        "gnbBg": "#FFFFFFCC"
-      },
-      "dark": {
-        "primary": "#8163E1",
-        "primaryHover": "#A290E7",
-        "primaryActive": "#BEB3ED",
-        "primaryBg": "#F4F3FA0D",
-        "secondary": "#272331",
-        "link": "#006BFF",
-        "text": "#F6F6F6",
-        "background": "#000000",
-        "containerBackground": "#1E1E1E",
-        "border": "#434343",
-        "success": "#4CAF50",
-        "warning": "#FF9800",
-        "error": "#FF5B5E",
-        "info": "#2196F3",
-        "white": "#FFFFFF",
-        "black": "#000000",
-        "title": "#FAFAFA",
-        "caption": "#787878",
-        "black50": "#00000080",
-        "placeHolder": "#9D9D9D",
-        "base50": "#00000080",
-        "footerBackground": "#D8D8D8",
-        "footerAward": "#3D3D3D",
-        "footerBody": "#404040",
-        "footerTitle": "#1F1F1F",
-        "footerCaption": "#7D7D7D",
-        "white10": "#0000001A",
-        "base": "#000000",
-        "negativeBase": "#FFFFFF",
-        "inputPlaceholder": "#CBCBCB",
-        "inputBg": "#2E2E2E",
-        "inputIcon": "#696A6F",
-        "inputDisabledBg": "#414244",
-        "inputDisabledText": "#373737",
-        "inputCaption": "#C3C2C8",
-        "negative20": "#FFFFFF66",
-        "negative10": "#FFFFFF1A",
-        "toggleBg": "#383838",
-        "primary50": "#7D6DD880",
-        "primary20": "#7D6DD833",
-        "tableSearch": "#B55100",
-        "black5": "#0000000D",
-        "filterBg": "#4B494F",
-        "footerLink": "#5E6063",
-        "familysiteBg": "#B0B0B0",
-        "familysiteTxt": "#272727",
-        "familyHover": "#94969E",
-        "footerNavTitle": "#747276",
-        "snackBg": "#29292CCC",
-        "snackLink": "#7C8EE1",
-        "containerHover": "#3A3A3A",
-        "kakoBg": "#FFE232",
-        "kakaoHover": "#FFE232",
-        "textFixed": "#272727",
-        "primaryFocus": "#927CE4",
-        "containerPush": "#606066",
-        "selectDisabled": "#45464D",
-        "selectBoxBg": "#FFFFFF12",
-        "iconBold": "#666577",
-        "borderBold": "#535353",
-        "gnbBg": "#000000CC"
-      }
-    },
-    "typography": {
-      "buttonM": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "16px",
-          "lineHeight": 1.2,
-          "letterSpacing": "0px"
+    "theme": {
+        "colors": {
+            "light": {
+                "primary": "#674DC7",
+                "primaryHover": "#4D38AE",
+                "primaryActive": "#312395",
+                "primaryBg": "#F4F3FA",
+                "secondary": "#E3E0F2",
+                "link": "#7C8EE1",
+                "text": "#272727",
+                "background": "#F5F5F5",
+                "containerBackground": "#FFFFFF",
+                "border": "#E4E4E4",
+                "success": "#2CA353",
+                "warning": "#FF9800",
+                "error": "#D52B2E",
+                "info": "#2196F3",
+                "white": "#FFFFFF",
+                "black": "#000000",
+                "title": "#1A1A1A",
+                "caption": "#787878",
+                "black50": "#00000080",
+                "placeHolder": "#9D9D9D",
+                "base50": "#FFFFFF80",
+                "footerBackground": "#2F313B",
+                "footerAward": "#EAEAED",
+                "footerBody": "#FFFFFF",
+                "footerTitle": "#F2F2F2",
+                "footerCaption": "#CACACA",
+                "white10": "#FFFFFF1A",
+                "base": "#FFFFFF",
+                "negativeBase": "#000000",
+                "inputPlaceholder": "#A9A8AB",
+                "inputBg": "#FFFFFF",
+                "inputIcon": "#C3C2C8",
+                "inputDisabledBg": "#F0F0F3",
+                "inputDisabledText": "#D6D7DE",
+                "inputCaption": "#9B9BA6",
+                "negative20": "#00000033",
+                "negative10": "#0000001A",
+                "toggleBg": "#E4E4E4",
+                "primary50": "#614FC480",
+                "primary20": "#614FC433",
+                "tableSearch": "#FFED8A",
+                "black5": "#0000000D",
+                "filterBg": "#EFEEF2",
+                "footerLink": "#B7B5C0",
+                "familysiteBg": "#828389",
+                "familysiteTxt": "#272727",
+                "familyHover": "#A0A1A5",
+                "footerNavTitle": "#98989D",
+                "snackBg": "#29292CCC",
+                "snackLink": "#B2B0EF",
+                "containerHover": "#EEEEEE",
+                "kakoBg": "#FFE232",
+                "kakaoHover": "#F0C81A",
+                "textFixed": "#272727",
+                "primaryFocus": "#9385D3",
+                "containerPush": "#DADAE1",
+                "selectDisabled": "#C4C5D1",
+                "selectBoxBg": "#00000012",
+                "iconBold": "#8D8C9A",
+                "borderBold": "#BCBCBC",
+                "gnbBg": "#FFFFFFCC"
+            },
+            "dark": {
+                "primary": "#8163E1",
+                "primaryHover": "#A290E7",
+                "primaryActive": "#BEB3ED",
+                "primaryBg": "#F4F3FA0D",
+                "secondary": "#272331",
+                "link": "#006BFF",
+                "text": "#F6F6F6",
+                "background": "#202020",
+                "containerBackground": "#1E1E1E",
+                "border": "#434343",
+                "success": "#4CAF50",
+                "warning": "#FF9800",
+                "error": "#FF5B5E",
+                "info": "#2196F3",
+                "white": "#FFFFFF",
+                "black": "#000000",
+                "title": "#FAFAFA",
+                "caption": "#787878",
+                "black50": "#00000080",
+                "placeHolder": "#9D9D9D",
+                "base50": "#00000080",
+                "footerBackground": "#D8D8D8",
+                "footerAward": "#3D3D3D",
+                "footerBody": "#404040",
+                "footerTitle": "#1F1F1F",
+                "footerCaption": "#7D7D7D",
+                "white10": "#0000001A",
+                "base": "#000000",
+                "negativeBase": "#FFFFFF",
+                "inputPlaceholder": "#CBCBCB",
+                "inputBg": "#2E2E2E",
+                "inputIcon": "#696A6F",
+                "inputDisabledBg": "#414244",
+                "inputDisabledText": "#373737",
+                "inputCaption": "#C3C2C8",
+                "negative20": "#FFFFFF66",
+                "negative10": "#FFFFFF1A",
+                "toggleBg": "#383838",
+                "primary50": "#7D6DD880",
+                "primary20": "#7D6DD833",
+                "tableSearch": "#B55100",
+                "black5": "#0000000D",
+                "filterBg": "#4B494F",
+                "footerLink": "#5E6063",
+                "familysiteBg": "#B0B0B0",
+                "familysiteTxt": "#272727",
+                "familyHover": "#94969E",
+                "footerNavTitle": "#747276",
+                "snackBg": "#29292CCC",
+                "snackLink": "#7C8EE1",
+                "containerHover": "#3A3A3A",
+                "kakoBg": "#FFE232",
+                "kakaoHover": "#FFE232",
+                "textFixed": "#272727",
+                "primaryFocus": "#927CE4",
+                "containerPush": "#606066",
+                "selectDisabled": "#45464D",
+                "selectBoxBg": "#FFFFFF12",
+                "iconBold": "#666577",
+                "borderBold": "#535353",
+                "gnbBg": "#000000CC"
+            }
         },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "18px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.01em"
+        "typography": {
+            "buttonM": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "16px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "0px"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "18px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.01em"
+                },
+                null
+            ],
+            "inputBold": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "14px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "15px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null
+            ],
+            "buttonS": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "15px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "0px"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "16px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.01em"
+                },
+                null
+            ],
+            "buttonxs": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "14px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "15px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.03em"
+                },
+                null
+            ],
+            "inputPlaceholder": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "13px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "14px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null
+            ],
+            "inputText": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "14px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "15px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.03em"
+                },
+                null
+            ],
+            "inlineLabelL": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 500,
+                    "fontSize": "16px",
+                    "lineHeight": 1.3,
+                    "letterSpacing": "-0.03em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 500,
+                    "fontSize": "18px",
+                    "lineHeight": 1.3,
+                    "letterSpacing": "-0.03em"
+                },
+                null
+            ],
+            "inlineLabelS": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 500,
+                "fontSize": "12px",
+                "lineHeight": 1.3,
+                "letterSpacing": "-0.03em"
+            },
+            "body": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "15px",
+                    "lineHeight": "24px",
+                    "letterSpacing": "-0.01em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "16px",
+                    "lineHeight": "24px",
+                    "letterSpacing": "-0.01em"
+                },
+                null
+            ],
+            "inputPhBold": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "13px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "14px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null
+            ],
+            "uploadButton": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 600,
+                "fontSize": "14px",
+                "lineHeight": "24px",
+                "letterSpacing": "-0.01em"
+            },
+            "pagination": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 600,
+                "fontSize": "14px",
+                "lineHeight": 1.2,
+                "letterSpacing": "-0.02em"
+            },
+            "paginationSelected": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 900,
+                "fontSize": "15px",
+                "lineHeight": 1.2,
+                "letterSpacing": "-0.02em"
+            },
+            "langMenu": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 500,
+                "fontSize": "15px",
+                "lineHeight": 1.2,
+                "letterSpacing": "-0.02em"
+            },
+            "langButton": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "14px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "16px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null
+            ],
+            "tableTitle": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "15px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.01em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "16px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.01em"
+                },
+                null
+            ],
+            "footerL": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 500,
+                "fontSize": "14px",
+                "lineHeight": 1.3,
+                "letterSpacing": "-0.02em"
+            },
+            "footerM": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 300,
+                "fontSize": "13px",
+                "lineHeight": "18px",
+                "letterSpacing": "-0.01em"
+            },
+            "footerMsemibold": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 600,
+                "fontSize": "13px",
+                "lineHeight": "18px",
+                "letterSpacing": "-0.01em"
+            },
+            "footerS": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 300,
+                "fontSize": "12px",
+                "lineHeight": 1.2,
+                "letterSpacing": "-0.02em"
+            },
+            "footerxl": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 700,
+                "fontSize": "15px",
+                "lineHeight": 1.3,
+                "letterSpacing": "-0.02em"
+            },
+            "footerSsemibold": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 600,
+                "fontSize": "12px",
+                "lineHeight": 1.2,
+                "letterSpacing": "-0.02em"
+            },
+            "footerxs": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 300,
+                "fontSize": "10px",
+                "lineHeight": 1.2,
+                "letterSpacing": "-0.02em"
+            },
+            "footerXSsemibold": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 600,
+                "fontSize": "10px",
+                "lineHeight": "18px",
+                "letterSpacing": "-0.02em"
+            },
+            "footerNav": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 500,
+                "fontSize": "15px",
+                "lineHeight": 1.3,
+                "letterSpacing": "-0.02em"
+            },
+            "footerList": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 500,
+                "fontSize": "14px",
+                "lineHeight": 1.2,
+                "letterSpacing": "-0.02em"
+            },
+            "subMenu": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "15px",
+                    "lineHeight": "24px",
+                    "letterSpacing": "-0.01em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "16px",
+                    "lineHeight": "24px",
+                    "letterSpacing": "-0.01em"
+                },
+                null
+            ],
+            "tableText": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "14px",
+                    "lineHeight": "24px",
+                    "letterSpacing": "-0.01em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "15px",
+                    "lineHeight": 1.4,
+                    "letterSpacing": "-0.01em"
+                },
+                null
+            ],
+            "tableTextBold": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "14px",
+                    "lineHeight": "24px",
+                    "letterSpacing": "-0.01em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 600,
+                    "fontSize": "15px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.01em"
+                },
+                null
+            ],
+            "resetButton": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "14px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "15px",
+                    "lineHeight": 1.2,
+                    "letterSpacing": "-0.02em"
+                },
+                null
+            ]
         }
-      ],
-      "inputBold": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "14px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "15px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        }
-      ],
-      "buttonS": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "15px",
-          "lineHeight": 1.2,
-          "letterSpacing": "0px"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "16px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.01em"
-        }
-      ],
-      "buttonxs": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "14px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "15px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.03em"
-        }
-      ],
-      "inputPlaceholder": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 400,
-          "fontSize": "13px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 400,
-          "fontSize": "14px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        }
-      ],
-      "inputText": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 400,
-          "fontSize": "14px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 400,
-          "fontSize": "15px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.03em"
-        }
-      ],
-      "inlineLabelL": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 500,
-          "fontSize": "16px",
-          "lineHeight": 1.3,
-          "letterSpacing": "-0.03em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 500,
-          "fontSize": "18px",
-          "lineHeight": 1.3,
-          "letterSpacing": "-0.03em"
-        }
-      ],
-      "inlineLabelS": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 500,
-        "fontSize": "12px",
-        "lineHeight": 1.3,
-        "letterSpacing": "-0.03em"
-      },
-      "body": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 400,
-          "fontSize": "15px",
-          "lineHeight": "24px",
-          "letterSpacing": "-0.01em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 400,
-          "fontSize": "16px",
-          "lineHeight": "24px",
-          "letterSpacing": "-0.01em"
-        }
-      ],
-      "inputPhBold": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "13px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "14px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        }
-      ],
-      "uploadButton": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 600,
-        "fontSize": "14px",
-        "lineHeight": "24px",
-        "letterSpacing": "-0.01em"
-      },
-      "pagination": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 600,
-        "fontSize": "14px",
-        "lineHeight": 1.2,
-        "letterSpacing": "-0.02em"
-      },
-      "paginationSelected": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 900,
-        "fontSize": "15px",
-        "lineHeight": 1.2,
-        "letterSpacing": "-0.02em"
-      },
-      "langMenu": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 500,
-        "fontSize": "15px",
-        "lineHeight": 1.2,
-        "letterSpacing": "-0.02em"
-      },
-      "langButton": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "14px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "16px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        }
-      ],
-      "tableTitle": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "15px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.01em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "16px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.01em"
-        }
-      ],
-      "footerL": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 500,
-        "fontSize": "14px",
-        "lineHeight": 1.3,
-        "letterSpacing": "-0.02em"
-      },
-      "footerM": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 300,
-        "fontSize": "13px",
-        "lineHeight": "18px",
-        "letterSpacing": "-0.01em"
-      },
-      "footerMsemibold": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 600,
-        "fontSize": "13px",
-        "lineHeight": "18px",
-        "letterSpacing": "-0.01em"
-      },
-      "footerS": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 300,
-        "fontSize": "12px",
-        "lineHeight": 1.2,
-        "letterSpacing": "-0.02em"
-      },
-      "footerxl": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 700,
-        "fontSize": "15px",
-        "lineHeight": 1.3,
-        "letterSpacing": "-0.02em"
-      },
-      "footerSsemibold": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 600,
-        "fontSize": "12px",
-        "lineHeight": 1.2,
-        "letterSpacing": "-0.02em"
-      },
-      "footerxs": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 300,
-        "fontSize": "10px",
-        "lineHeight": 1.2,
-        "letterSpacing": "-0.02em"
-      },
-      "footerXSsemibold": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 600,
-        "fontSize": "10px",
-        "lineHeight": "18px",
-        "letterSpacing": "-0.02em"
-      },
-      "footerNav": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 500,
-        "fontSize": "15px",
-        "lineHeight": 1.3,
-        "letterSpacing": "-0.02em"
-      },
-      "footerList": {
-        "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 500,
-        "fontSize": "14px",
-        "lineHeight": 1.2,
-        "letterSpacing": "-0.02em"
-      },
-      "subMenu": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "15px",
-          "lineHeight": "24px",
-          "letterSpacing": "-0.01em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "16px",
-          "lineHeight": "24px",
-          "letterSpacing": "-0.01em"
-        }
-      ],
-      "tableText": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 400,
-          "fontSize": "14px",
-          "lineHeight": "24px",
-          "letterSpacing": "-0.01em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 400,
-          "fontSize": "15px",
-          "lineHeight": 1.4,
-          "letterSpacing": "-0.01em"
-        }
-      ],
-      "tableTextBold": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "14px",
-          "lineHeight": "24px",
-          "letterSpacing": "-0.01em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 600,
-          "fontSize": "15px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.01em"
-        }
-      ],
-      "resetButton": [
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "14px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        },
-        null,
-        null,
-        null,
-        {
-          "fontFamily": "Pretendard",
-          "fontStyle": "normal",
-          "fontWeight": 700,
-          "fontSize": "15px",
-          "lineHeight": 1.2,
-          "letterSpacing": "-0.02em"
-        }
-      ]
     }
-  }
 }
\ No newline at end of file

From 8759048d765cfe9546f1f872d49396399182a0aa Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 16:14:21 +0900
Subject: [PATCH 06/28] Update Select for sub menus

---
 .../src/components/Select/IconArrow.tsx       | 24 ++++++++++
 .../src/components/Select/Select.stories.tsx  | 26 +++++++++++
 .../src/components/Select/index.tsx           | 44 +++++++++++++------
 3 files changed, 81 insertions(+), 13 deletions(-)
 create mode 100644 packages/components/src/components/Select/IconArrow.tsx

diff --git a/packages/components/src/components/Select/IconArrow.tsx b/packages/components/src/components/Select/IconArrow.tsx
new file mode 100644
index 00000000..f75f5822
--- /dev/null
+++ b/packages/components/src/components/Select/IconArrow.tsx
@@ -0,0 +1,24 @@
+import { css } from '@devup-ui/react'
+import clsx from 'clsx'
+import { ComponentProps } from 'react'
+
+export function IconArrow({ className, ...props }: ComponentProps<'svg'>) {
+  return (
+    <svg
+      className={clsx(css({ color: '#8b8e9c', styleOrder: 1 }), className)}
+      fill="none"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M6.1953 12.4714C5.93495 12.211 5.93495 11.7889 6.1953 11.5286L9.7239 7.99996L6.1953 4.47136C5.93495 4.21102 5.93495 3.78891 6.1953 3.52856C6.45565 3.26821 6.87776 3.26821 7.13811 3.52856L11.1381 7.52856C11.3985 7.7889 11.3985 8.21101 11.1381 8.47136L7.13811 12.4714C6.87776 12.7317 6.45565 12.7317 6.1953 12.4714Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index 26b8a040..be5d266a 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -1,3 +1,4 @@
+import { css, Flex } from '@devup-ui/react'
 import { Meta, StoryObj } from '@storybook/react-vite'
 
 import {
@@ -7,6 +8,7 @@ import {
   SelectOption,
   SelectTrigger,
 } from '.'
+import { IconArrow } from './IconArrow'
 
 type Story = StoryObj<typeof meta>
 
@@ -34,6 +36,30 @@ export const Default: Story = {
         <SelectDivider />
         <SelectOption>Option 3</SelectOption>
         <SelectOption disabled>Option 4</SelectOption>
+        <Select>
+          <SelectTrigger asChild>
+            <SelectOption>
+              <Flex
+                alignItems="center"
+                className={css({ w: '100%' })}
+                justifyContent="space-between"
+                w="100%"
+              >
+                Option 5<IconArrow />
+              </Flex>
+            </SelectOption>
+          </SelectTrigger>
+          <SelectContainer
+            className={css({
+              right: '0',
+              top: '0',
+              transform: 'translateX(100%)',
+            })}
+          >
+            <SelectOption>Option 6</SelectOption>
+            <SelectOption>Option 7</SelectOption>
+          </SelectContainer>
+        </Select>
       </SelectContainer>
     </Select>
   ),
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 97d9305f..9c9f783a 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -3,8 +3,12 @@
 import { Box, css, Flex, VStack } from '@devup-ui/react'
 import clsx from 'clsx'
 import {
+  Children,
   ComponentProps,
   createContext,
+  JSX,
+  JSXElementConstructor,
+  ReactElement,
   useContext,
   useEffect,
   useRef,
@@ -17,7 +21,7 @@ import { IconCheck } from './IconCheck'
 type SelectType = 'default' | 'radio' | 'checkbox'
 type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
 
-interface SelectProps {
+interface SelectProps extends ComponentProps<'div'> {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   children: React.ReactNode
@@ -45,6 +49,7 @@ export function Select({
   children,
   open: openProp,
   onOpenChange,
+  ...props
 }: SelectProps) {
   const ref = useRef<HTMLDivElement>(null)
   const [open, setOpen] = useState(openProp ?? false)
@@ -90,28 +95,39 @@ export function Select({
         type,
       }}
     >
-      <Box ref={ref} display="inline-block" pos="relative">
+      <Box ref={ref} display="inline-block" pos="relative" {...props}>
         {children}
       </Box>
     </SelectContext.Provider>
   )
 }
 
+interface SelectTriggerProps extends ComponentProps<typeof Button> {
+  asChild?: boolean
+}
 export function SelectTrigger({
   className,
   children,
+  asChild,
   ...props
-}: ComponentProps<typeof Button>) {
+}: SelectTriggerProps) {
   const { open, setOpen } = useSelect()
   const handleClick = () => {
     setOpen(!open)
   }
 
+  if (asChild) {
+    const element = Children.only(children) as ReactElement<
+      ComponentProps<keyof JSX.IntrinsicElements | JSXElementConstructor<any>>
+    >
+    const Comp = element.type
+    return <Comp onClick={handleClick} {...element.props} />
+  }
+
   return (
     <Button
       className={clsx(
         css({
-          pos: 'relative',
           borderRadius: '8px',
         }),
         className,
@@ -136,9 +152,9 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
       bottom="-4px"
       boxShadow="0 2px 2px 0 $base10"
       gap="6px"
+      h="fit-content"
       p="10px"
       pos="absolute"
-      styleOrder={1}
       transform="translateY(100%)"
       userSelect="none"
       w="232px"
@@ -175,21 +191,23 @@ export function SelectOption({
     handleClose()
   }
 
-  const isChecked = Array.isArray(value)
+  const isSelected = Array.isArray(value)
     ? value.includes(children as string)
     : value === children
 
+  const changesOnHover = !disabled && !(type === 'radio' && isSelected)
+
   return (
     <Flex
       _hover={
-        !disabled && {
+        changesOnHover && {
           bg: '$primaryBg',
         }
       }
       alignItems="center"
       borderRadius="8px"
-      color={disabled ? '$selectDisabled' : isChecked ? '$primary' : '$title'}
-      cursor={disabled ? 'default' : 'pointer'}
+      color={disabled ? '$selectDisabled' : isSelected ? '$primary' : '$title'}
+      cursor={changesOnHover ? 'pointer' : 'default'}
       gap={
         {
           checkbox: '10px',
@@ -202,20 +220,20 @@ export function SelectOption({
       px="10px"
       styleOrder={1}
       transition="background-color 0.1s ease-in-out"
-      typography={isChecked ? 'inputBold' : 'inputText'}
+      typography={isSelected ? 'inputBold' : 'inputText'}
       {...props}
     >
       {
         {
           checkbox: (
             <Box
-              bg={isChecked ? '$primary' : '$border'}
+              bg={isSelected ? '$primary' : '$border'}
               borderRadius="4px"
               boxSize="18px"
               pos="relative"
               transition="background-color 0.1s ease-in-out"
             >
-              {isChecked && (
+              {isSelected && (
                 <IconCheck
                   className={css({
                     position: 'absolute',
@@ -229,7 +247,7 @@ export function SelectOption({
           ),
           radio: (
             <>
-              {isChecked && (
+              {isSelected && (
                 <Box
                   borderRadius="4px"
                   boxSize="18px"

From b7eb3d95e21da459788bd805f7255b5fe7470a22 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 16:40:02 +0900
Subject: [PATCH 07/28] Add value prop to Select context

---
 .../src/components/Select/index.tsx           | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 9c9f783a..356c63ed 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -22,6 +22,10 @@ type SelectType = 'default' | 'radio' | 'checkbox'
 type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
 
 interface SelectProps extends ComponentProps<'div'> {
+  defaultValue?: SelectValue<SelectType>
+  value?: SelectValue<SelectType>
+  onValueChange?: (value: SelectValue<SelectType>) => void
+  defaultOpen?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
   children: React.ReactNode
@@ -47,14 +51,18 @@ export const useSelect = () => {
 export function Select({
   type = 'default',
   children,
+  defaultValue,
+  value: valueProp,
+  onValueChange,
+  defaultOpen,
   open: openProp,
   onOpenChange,
   ...props
 }: SelectProps) {
   const ref = useRef<HTMLDivElement>(null)
-  const [open, setOpen] = useState(openProp ?? false)
+  const [open, setOpen] = useState(defaultOpen ?? false)
   const [value, setValue] = useState<SelectValue<typeof type>>(
-    type === 'checkbox' ? [] : '',
+    defaultValue ?? (type === 'checkbox' ? [] : ''),
   )
 
   useEffect(() => {
@@ -68,11 +76,19 @@ export function Select({
   }, [open, setOpen])
 
   const handleOpenChange = (open: boolean) => {
+    if (onOpenChange) {
+      onOpenChange(open)
+      return
+    }
     setOpen(open)
-    onOpenChange?.(open)
   }
 
   const handleValueChange = (nextValue: string) => {
+    if (onValueChange) {
+      onValueChange(nextValue)
+      return
+    }
+
     if (type === 'default') return
     if (type === 'radio') {
       setValue(nextValue)
@@ -88,9 +104,9 @@ export function Select({
   return (
     <SelectContext.Provider
       value={{
-        open,
+        open: openProp ?? open,
         setOpen: handleOpenChange,
-        value,
+        value: valueProp ?? value,
         setValue: handleValueChange,
         type,
       }}

From ad109abd352dde23486710444d43e0b912b8f920 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 17:29:43 +0900
Subject: [PATCH 08/28] Add value prop to SelectOption

---
 .../src/components/Select/Select.stories.tsx  | 13 ++++--------
 .../src/components/Select/index.tsx           | 20 ++++++++++++-------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index be5d266a..a4c83d63 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -36,15 +36,10 @@ export const Default: Story = {
         <SelectDivider />
         <SelectOption>Option 3</SelectOption>
         <SelectOption disabled>Option 4</SelectOption>
-        <Select>
+        <Select type="radio">
           <SelectTrigger asChild>
             <SelectOption>
-              <Flex
-                alignItems="center"
-                className={css({ w: '100%' })}
-                justifyContent="space-between"
-                w="100%"
-              >
+              <Flex alignItems="center" justifyContent="space-between" w="100%">
                 Option 5<IconArrow />
               </Flex>
             </SelectOption>
@@ -56,8 +51,8 @@ export const Default: Story = {
               transform: 'translateX(100%)',
             })}
           >
-            <SelectOption>Option 6</SelectOption>
-            <SelectOption>Option 7</SelectOption>
+            <SelectOption value="Option 6">Option 6</SelectOption>
+            <SelectOption value="Option 7">Option 7</SelectOption>
           </SelectContainer>
         </Select>
       </SelectContainer>
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 356c63ed..81a240d2 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -181,17 +181,20 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
   )
 }
 
-interface SelectOptionProps extends ComponentProps<'div'> {
+interface SelectOptionProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+  onClick?: (value?: string, e?: React.MouseEvent<HTMLDivElement>) => void
   disabled?: boolean
+  value?: string
 }
 
 export function SelectOption({
   disabled,
   onClick,
   children,
+  value,
   ...props
 }: SelectOptionProps) {
-  const { setOpen, setValue, value, type } = useSelect()
+  const { setOpen, setValue, value: selectedValue, type } = useSelect()
 
   const handleClose = () => {
     if (type === 'checkbox') return
@@ -200,16 +203,19 @@ export function SelectOption({
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (onClick) {
-      onClick(e)
+      onClick(value, e)
       return
     }
-    setValue(children as string)
+    if (typeof value === 'string') setValue(value)
     handleClose()
   }
 
-  const isSelected = Array.isArray(value)
-    ? value.includes(children as string)
-    : value === children
+  const isSelected = {
+    default: false,
+    radio: selectedValue === value,
+    checkbox:
+      Array.isArray(selectedValue) && value && selectedValue.includes(value),
+  }[type]
 
   const changesOnHover = !disabled && !(type === 'radio' && isSelected)
 

From d31277f4278de49414f49203ed481108f2fcebfa Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 17:35:01 +0900
Subject: [PATCH 09/28] Fix disabled radio check

---
 packages/components/src/components/Select/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 81a240d2..6d74e7bf 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -282,7 +282,7 @@ export function SelectOption({
                       top: '55%',
                       left: '50%',
                       transform: 'translate(-50%, -50%)',
-                      color: '$primary',
+                      color: 'inherit',
                     })}
                   />
                 </Box>

From b8f075644e411fd8b62e4790f6fbfe6520725d93 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Thu, 7 Aug 2025 17:54:00 +0900
Subject: [PATCH 10/28] Add controlled Select stories

---
 .../components/Select/ControlledCheckbox.tsx  | 69 +++++++++++++++++++
 .../src/components/Select/ControlledRadio.tsx | 51 ++++++++++++++
 .../src/components/Select/Select.stories.tsx  | 28 ++++++--
 .../src/components/Select/index.tsx           |  3 +-
 4 files changed, 144 insertions(+), 7 deletions(-)
 create mode 100644 packages/components/src/components/Select/ControlledCheckbox.tsx
 create mode 100644 packages/components/src/components/Select/ControlledRadio.tsx

diff --git a/packages/components/src/components/Select/ControlledCheckbox.tsx b/packages/components/src/components/Select/ControlledCheckbox.tsx
new file mode 100644
index 00000000..0b458d31
--- /dev/null
+++ b/packages/components/src/components/Select/ControlledCheckbox.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import { css, Flex } from '@devup-ui/react'
+import { useState } from 'react'
+
+import {
+  Select,
+  SelectContainer,
+  SelectDivider,
+  SelectOption,
+  SelectTrigger,
+} from '.'
+import { IconArrow } from './IconArrow'
+
+export function ControlledCheckbox() {
+  const [value, setValue] = useState<string[]>([])
+  const handleChange = (nextValue: string) => {
+    if (value.includes(nextValue)) {
+      setValue(value.filter((v) => v !== nextValue))
+    } else {
+      setValue([...value, nextValue])
+    }
+  }
+
+  const [subValue, setSubValue] = useState<string[]>([])
+  const handleSubChange = (nextValue: string) => {
+    if (subValue.includes(nextValue)) {
+      setSubValue(subValue.filter((v) => v !== nextValue))
+    } else {
+      setSubValue([...subValue, nextValue])
+    }
+  }
+
+  return (
+    <Select onValueChange={handleChange} type="checkbox" value={value}>
+      <SelectTrigger>Select {value}</SelectTrigger>
+      <SelectContainer>
+        <SelectOption value="Option 1">Option 1</SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
+        <SelectDivider />
+        <SelectOption value="Option 3">Option 3</SelectOption>
+        <SelectOption value="Option 4">Option 4</SelectOption>
+        <Select
+          onValueChange={handleSubChange}
+          type="checkbox"
+          value={subValue}
+        >
+          <SelectTrigger asChild>
+            <SelectOption>
+              <Flex alignItems="center" justifyContent="space-between" w="100%">
+                Option 5<IconArrow />
+              </Flex>
+            </SelectOption>
+          </SelectTrigger>
+          <SelectContainer
+            className={css({
+              right: '0',
+              top: '0',
+              transform: 'translateX(100%)',
+            })}
+          >
+            <SelectOption value="Option 6">Option 6</SelectOption>
+            <SelectOption value="Option 7">Option 7</SelectOption>
+          </SelectContainer>
+        </Select>
+      </SelectContainer>
+    </Select>
+  )
+}
diff --git a/packages/components/src/components/Select/ControlledRadio.tsx b/packages/components/src/components/Select/ControlledRadio.tsx
new file mode 100644
index 00000000..342a9e0a
--- /dev/null
+++ b/packages/components/src/components/Select/ControlledRadio.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { css, Flex } from '@devup-ui/react'
+import { useState } from 'react'
+
+import {
+  Select,
+  SelectContainer,
+  SelectDivider,
+  SelectOption,
+  SelectTrigger,
+} from '.'
+import { IconArrow } from './IconArrow'
+
+export function ControlledRadio() {
+  const [value, setValue] = useState('')
+  const handleChange = (value: string) => {
+    setValue(value)
+  }
+  return (
+    <Select onValueChange={handleChange} type="radio" value={value}>
+      <SelectTrigger>Select {value}</SelectTrigger>
+      <SelectContainer>
+        <SelectOption value="Option 1">Option 1</SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
+        <SelectDivider />
+        <SelectOption value="Option 3">Option 3</SelectOption>
+        <SelectOption value="Option 4">Option 4</SelectOption>
+        <Select type="radio">
+          <SelectTrigger asChild>
+            <SelectOption>
+              <Flex alignItems="center" justifyContent="space-between" w="100%">
+                Option 5<IconArrow />
+              </Flex>
+            </SelectOption>
+          </SelectTrigger>
+          <SelectContainer
+            className={css({
+              right: '0',
+              top: '0',
+              transform: 'translateX(100%)',
+            })}
+          >
+            <SelectOption value="Option 6">Option 6</SelectOption>
+            <SelectOption value="Option 7">Option 7</SelectOption>
+          </SelectContainer>
+        </Select>
+      </SelectContainer>
+    </Select>
+  )
+}
diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index a4c83d63..10e76bd6 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -8,6 +8,8 @@ import {
   SelectOption,
   SelectTrigger,
 } from '.'
+import { ControlledCheckbox } from './ControlledCheckbox'
+import { ControlledRadio } from './ControlledRadio'
 import { IconArrow } from './IconArrow'
 
 type Story = StoryObj<typeof meta>
@@ -26,16 +28,20 @@ const meta: Meta<typeof Select> = {
 }
 
 export const Default: Story = {
-  args: {},
+  args: { type: 'radio' },
   render: (args) => (
-    <Select {...args}>
+    <Select {...args} defaultValue="Option 1">
       <SelectTrigger>Select</SelectTrigger>
       <SelectContainer>
-        <SelectOption>Option 1</SelectOption>
-        <SelectOption>Option 2</SelectOption>
+        <SelectOption disabled value="Option 1">
+          Option 1
+        </SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
         <SelectDivider />
-        <SelectOption>Option 3</SelectOption>
-        <SelectOption disabled>Option 4</SelectOption>
+        <SelectOption value="Option 3">Option 3</SelectOption>
+        <SelectOption disabled value="Option 4">
+          Option 4
+        </SelectOption>
         <Select type="radio">
           <SelectTrigger asChild>
             <SelectOption>
@@ -60,4 +66,14 @@ export const Default: Story = {
   ),
 }
 
+export const ControlledRadioStory: Story = {
+  args: {},
+  render: () => <ControlledRadio />,
+}
+
+export const ControlledCheckboxStory: Story = {
+  args: {},
+  render: () => <ControlledCheckbox />,
+}
+
 export default meta
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 6d74e7bf..92fac651 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -24,7 +24,7 @@ type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
 interface SelectProps extends ComponentProps<'div'> {
   defaultValue?: SelectValue<SelectType>
   value?: SelectValue<SelectType>
-  onValueChange?: (value: SelectValue<SelectType>) => void
+  onValueChange?: (value: string) => void
   defaultOpen?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
@@ -171,6 +171,7 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
       h="fit-content"
       p="10px"
       pos="absolute"
+      styleOrder={1}
       transform="translateY(100%)"
       userSelect="none"
       w="232px"

From 28190857c047de8b18079bc215cf890ca37b8737 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 09:16:45 +0900
Subject: [PATCH 11/28] Fix type - Fix onClick - Add showCheck prop

---
 .../components/Select/ControlledCheckbox.tsx  |  2 +-
 .../src/components/Select/ControlledRadio.tsx | 30 ++++++++++++++++---
 .../src/components/Select/index.tsx           | 19 ++++++++----
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/components/Select/ControlledCheckbox.tsx b/packages/components/src/components/Select/ControlledCheckbox.tsx
index 0b458d31..95572251 100644
--- a/packages/components/src/components/Select/ControlledCheckbox.tsx
+++ b/packages/components/src/components/Select/ControlledCheckbox.tsx
@@ -46,7 +46,7 @@ export function ControlledCheckbox() {
           value={subValue}
         >
           <SelectTrigger asChild>
-            <SelectOption>
+            <SelectOption showCheck={false}>
               <Flex alignItems="center" justifyContent="space-between" w="100%">
                 Option 5<IconArrow />
               </Flex>
diff --git a/packages/components/src/components/Select/ControlledRadio.tsx b/packages/components/src/components/Select/ControlledRadio.tsx
index 342a9e0a..548bee0f 100644
--- a/packages/components/src/components/Select/ControlledRadio.tsx
+++ b/packages/components/src/components/Select/ControlledRadio.tsx
@@ -17,6 +17,10 @@ export function ControlledRadio() {
   const handleChange = (value: string) => {
     setValue(value)
   }
+  const [subValue, setSubValue] = useState('')
+  const handleSubChange = (value: string) => {
+    setSubValue(value)
+  }
   return (
     <Select onValueChange={handleChange} type="radio" value={value}>
       <SelectTrigger>Select {value}</SelectTrigger>
@@ -26,9 +30,9 @@ export function ControlledRadio() {
         <SelectDivider />
         <SelectOption value="Option 3">Option 3</SelectOption>
         <SelectOption value="Option 4">Option 4</SelectOption>
-        <Select type="radio">
+        <Select onValueChange={handleSubChange} type="radio" value={subValue}>
           <SelectTrigger asChild>
-            <SelectOption>
+            <SelectOption showCheck={false}>
               <Flex alignItems="center" justifyContent="space-between" w="100%">
                 Option 5<IconArrow />
               </Flex>
@@ -41,8 +45,26 @@ export function ControlledRadio() {
               transform: 'translateX(100%)',
             })}
           >
-            <SelectOption value="Option 6">Option 6</SelectOption>
-            <SelectOption value="Option 7">Option 7</SelectOption>
+            <SelectOption
+              onClick={(value) => {
+                if (value) {
+                  setSubValue(value)
+                }
+              }}
+              value="Option 6"
+            >
+              Option 6
+            </SelectOption>
+            <SelectOption
+              onClick={(value) => {
+                if (value) {
+                  setSubValue(value)
+                }
+              }}
+              value="Option 7"
+            >
+              Option 7
+            </SelectOption>
           </SelectContainer>
         </Select>
       </SelectContainer>
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 92fac651..05a5b482 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -183,9 +183,13 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
 }
 
 interface SelectOptionProps extends Omit<ComponentProps<'div'>, 'onClick'> {
-  onClick?: (value?: string, e?: React.MouseEvent<HTMLDivElement>) => void
+  onClick?: (
+    value: string | undefined,
+    e?: React.MouseEvent<HTMLDivElement>,
+  ) => void
   disabled?: boolean
   value?: string
+  showCheck?: boolean
 }
 
 export function SelectOption({
@@ -193,6 +197,7 @@ export function SelectOption({
   onClick,
   children,
   value,
+  showCheck = true,
   ...props
 }: SelectOptionProps) {
   const { setOpen, setValue, value: selectedValue, type } = useSelect()
@@ -202,7 +207,10 @@ export function SelectOption({
     setOpen(false)
   }
 
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  const handleClick = (
+    value: string | undefined,
+    e: React.MouseEvent<HTMLDivElement>,
+  ) => {
     if (onClick) {
       onClick(value, e)
       return
@@ -239,14 +247,14 @@ export function SelectOption({
         }[type]
       }
       h="40px"
-      onClick={disabled ? undefined : handleClick}
+      onClick={disabled ? undefined : (e) => handleClick(value, e)}
       px="10px"
       styleOrder={1}
       transition="background-color 0.1s ease-in-out"
       typography={isSelected ? 'inputBold' : 'inputText'}
       {...props}
     >
-      {
+      {showCheck &&
         {
           checkbox: (
             <Box
@@ -291,8 +299,7 @@ export function SelectOption({
             </>
           ),
           default: null,
-        }[type]
-      }
+        }[type]}
       {children}
     </Flex>
   )

From 6dbf84ba0223168b96569266e6eff0f9089bac11 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 13:25:46 +0900
Subject: [PATCH 12/28] Add test cases

---
 .../src/components/Select/Checkbox.tsx        |  30 ---
 .../src/components/Select/ControlledRadio.tsx |  73 -------
 .../{ControlledCheckbox.tsx => Default.tsx}   |  42 +---
 .../src/components/Select/Select.stories.tsx  | 134 +++++++++---
 .../__snapshots__/index.browser.test.tsx.snap |  76 +++++++
 .../Select/__tests__/index.browser.test.tsx   | 202 +++++++++++++++++-
 .../src/components/Select/index.tsx           |  13 +-
 7 files changed, 406 insertions(+), 164 deletions(-)
 delete mode 100644 packages/components/src/components/Select/Checkbox.tsx
 delete mode 100644 packages/components/src/components/Select/ControlledRadio.tsx
 rename packages/components/src/components/Select/{ControlledCheckbox.tsx => Default.tsx} (52%)
 create mode 100644 packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap

diff --git a/packages/components/src/components/Select/Checkbox.tsx b/packages/components/src/components/Select/Checkbox.tsx
deleted file mode 100644
index 3b306b9f..00000000
--- a/packages/components/src/components/Select/Checkbox.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Box, css } from '@devup-ui/react'
-
-import { IconCheck } from './IconCheck'
-
-interface CheckboxProps {
-  isChecked: boolean
-}
-
-export function Checkbox({ isChecked }: CheckboxProps) {
-  return (
-    <Box
-      bg={isChecked ? '$primary' : '$border'}
-      borderRadius="4px"
-      boxSize="18px"
-      pos="relative"
-      transition="background-color 0.1s ease-in-out"
-    >
-      {isChecked && (
-        <IconCheck
-          className={css({
-            position: 'absolute',
-            top: '55%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-          })}
-        />
-      )}
-    </Box>
-  )
-}
diff --git a/packages/components/src/components/Select/ControlledRadio.tsx b/packages/components/src/components/Select/ControlledRadio.tsx
deleted file mode 100644
index 548bee0f..00000000
--- a/packages/components/src/components/Select/ControlledRadio.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { css, Flex } from '@devup-ui/react'
-import { useState } from 'react'
-
-import {
-  Select,
-  SelectContainer,
-  SelectDivider,
-  SelectOption,
-  SelectTrigger,
-} from '.'
-import { IconArrow } from './IconArrow'
-
-export function ControlledRadio() {
-  const [value, setValue] = useState('')
-  const handleChange = (value: string) => {
-    setValue(value)
-  }
-  const [subValue, setSubValue] = useState('')
-  const handleSubChange = (value: string) => {
-    setSubValue(value)
-  }
-  return (
-    <Select onValueChange={handleChange} type="radio" value={value}>
-      <SelectTrigger>Select {value}</SelectTrigger>
-      <SelectContainer>
-        <SelectOption value="Option 1">Option 1</SelectOption>
-        <SelectOption value="Option 2">Option 2</SelectOption>
-        <SelectDivider />
-        <SelectOption value="Option 3">Option 3</SelectOption>
-        <SelectOption value="Option 4">Option 4</SelectOption>
-        <Select onValueChange={handleSubChange} type="radio" value={subValue}>
-          <SelectTrigger asChild>
-            <SelectOption showCheck={false}>
-              <Flex alignItems="center" justifyContent="space-between" w="100%">
-                Option 5<IconArrow />
-              </Flex>
-            </SelectOption>
-          </SelectTrigger>
-          <SelectContainer
-            className={css({
-              right: '0',
-              top: '0',
-              transform: 'translateX(100%)',
-            })}
-          >
-            <SelectOption
-              onClick={(value) => {
-                if (value) {
-                  setSubValue(value)
-                }
-              }}
-              value="Option 6"
-            >
-              Option 6
-            </SelectOption>
-            <SelectOption
-              onClick={(value) => {
-                if (value) {
-                  setSubValue(value)
-                }
-              }}
-              value="Option 7"
-            >
-              Option 7
-            </SelectOption>
-          </SelectContainer>
-        </Select>
-      </SelectContainer>
-    </Select>
-  )
-}
diff --git a/packages/components/src/components/Select/ControlledCheckbox.tsx b/packages/components/src/components/Select/Default.tsx
similarity index 52%
rename from packages/components/src/components/Select/ControlledCheckbox.tsx
rename to packages/components/src/components/Select/Default.tsx
index 95572251..a2cc8721 100644
--- a/packages/components/src/components/Select/ControlledCheckbox.tsx
+++ b/packages/components/src/components/Select/Default.tsx
@@ -1,7 +1,5 @@
-'use client'
-
 import { css, Flex } from '@devup-ui/react'
-import { useState } from 'react'
+import { ComponentProps } from 'react'
 
 import {
   Select,
@@ -12,41 +10,23 @@ import {
 } from '.'
 import { IconArrow } from './IconArrow'
 
-export function ControlledCheckbox() {
-  const [value, setValue] = useState<string[]>([])
-  const handleChange = (nextValue: string) => {
-    if (value.includes(nextValue)) {
-      setValue(value.filter((v) => v !== nextValue))
-    } else {
-      setValue([...value, nextValue])
-    }
-  }
-
-  const [subValue, setSubValue] = useState<string[]>([])
-  const handleSubChange = (nextValue: string) => {
-    if (subValue.includes(nextValue)) {
-      setSubValue(subValue.filter((v) => v !== nextValue))
-    } else {
-      setSubValue([...subValue, nextValue])
-    }
-  }
-
+export function Default({
+  ...props
+}: Omit<ComponentProps<typeof Select>, 'children'>) {
   return (
-    <Select onValueChange={handleChange} type="checkbox" value={value}>
-      <SelectTrigger>Select {value}</SelectTrigger>
+    <Select {...props}>
+      <SelectTrigger>Select</SelectTrigger>
       <SelectContainer>
         <SelectOption value="Option 1">Option 1</SelectOption>
         <SelectOption value="Option 2">Option 2</SelectOption>
         <SelectDivider />
         <SelectOption value="Option 3">Option 3</SelectOption>
-        <SelectOption value="Option 4">Option 4</SelectOption>
-        <Select
-          onValueChange={handleSubChange}
-          type="checkbox"
-          value={subValue}
-        >
+        <SelectOption disabled value="Option 4">
+          Option 4
+        </SelectOption>
+        <Select type="radio">
           <SelectTrigger asChild>
-            <SelectOption showCheck={false}>
+            <SelectOption>
               <Flex alignItems="center" justifyContent="space-between" w="100%">
                 Option 5<IconArrow />
               </Flex>
diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index 10e76bd6..11e7362e 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -1,5 +1,6 @@
 import { css, Flex } from '@devup-ui/react'
 import { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
 
 import {
   Select,
@@ -8,11 +9,10 @@ import {
   SelectOption,
   SelectTrigger,
 } from '.'
-import { ControlledCheckbox } from './ControlledCheckbox'
-import { ControlledRadio } from './ControlledRadio'
+import { Default as DefaultComponent } from './Default'
 import { IconArrow } from './IconArrow'
 
-type Story = StoryObj<typeof meta>
+export type Story = StoryObj<typeof meta>
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Select> = {
@@ -27,24 +27,58 @@ const meta: Meta<typeof Select> = {
   ],
 }
 
-export const Default: Story = {
+export const DefaultStory: Story = {
   args: { type: 'radio' },
-  render: (args) => (
-    <Select {...args} defaultValue="Option 1">
-      <SelectTrigger>Select</SelectTrigger>
+  render: (args) => <DefaultComponent {...args} />,
+}
+
+export const ControlledRadioStory: Story = {
+  args: {},
+  render: () => <ControlledRadio />,
+}
+
+export const ControlledCheckboxStory: Story = {
+  args: {},
+  render: () => <ControlledCheckbox />,
+}
+
+export default meta
+
+function ControlledCheckbox() {
+  const [value, setValue] = useState<string[]>([])
+  const handleChange = (nextValue: string) => {
+    if (value.includes(nextValue)) {
+      setValue(value.filter((v) => v !== nextValue))
+    } else {
+      setValue([...value, nextValue])
+    }
+  }
+
+  const [subValue, setSubValue] = useState<string[]>([])
+  const handleSubChange = (nextValue: string) => {
+    if (subValue.includes(nextValue)) {
+      setSubValue(subValue.filter((v) => v !== nextValue))
+    } else {
+      setSubValue([...subValue, nextValue])
+    }
+  }
+
+  return (
+    <Select onValueChange={handleChange} type="checkbox" value={value}>
+      <SelectTrigger>Select {value}</SelectTrigger>
       <SelectContainer>
-        <SelectOption disabled value="Option 1">
-          Option 1
-        </SelectOption>
+        <SelectOption value="Option 1">Option 1</SelectOption>
         <SelectOption value="Option 2">Option 2</SelectOption>
         <SelectDivider />
         <SelectOption value="Option 3">Option 3</SelectOption>
-        <SelectOption disabled value="Option 4">
-          Option 4
-        </SelectOption>
-        <Select type="radio">
+        <SelectOption value="Option 4">Option 4</SelectOption>
+        <Select
+          onValueChange={handleSubChange}
+          type="checkbox"
+          value={subValue}
+        >
           <SelectTrigger asChild>
-            <SelectOption>
+            <SelectOption showCheck={false}>
               <Flex alignItems="center" justifyContent="space-between" w="100%">
                 Option 5<IconArrow />
               </Flex>
@@ -63,17 +97,65 @@ export const Default: Story = {
         </Select>
       </SelectContainer>
     </Select>
-  ),
-}
-
-export const ControlledRadioStory: Story = {
-  args: {},
-  render: () => <ControlledRadio />,
+  )
 }
 
-export const ControlledCheckboxStory: Story = {
-  args: {},
-  render: () => <ControlledCheckbox />,
+function ControlledRadio() {
+  const [value, setValue] = useState('')
+  const handleChange = (value: string) => {
+    setValue(value)
+  }
+  const [subValue, setSubValue] = useState('')
+  const handleSubChange = (value: string) => {
+    setSubValue(value)
+  }
+  return (
+    <Select onValueChange={handleChange} type="radio" value={value}>
+      <SelectTrigger>Select {value}</SelectTrigger>
+      <SelectContainer>
+        <SelectOption value="Option 1">Option 1</SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
+        <SelectDivider />
+        <SelectOption value="Option 3">Option 3</SelectOption>
+        <SelectOption value="Option 4">Option 4</SelectOption>
+        <Select onValueChange={handleSubChange} type="radio" value={subValue}>
+          <SelectTrigger asChild>
+            <SelectOption showCheck={false}>
+              <Flex alignItems="center" justifyContent="space-between" w="100%">
+                Option 5<IconArrow />
+              </Flex>
+            </SelectOption>
+          </SelectTrigger>
+          <SelectContainer
+            className={css({
+              right: '0',
+              top: '0',
+              transform: 'translateX(100%)',
+            })}
+          >
+            <SelectOption
+              onClick={(value) => {
+                if (value) {
+                  setSubValue(value)
+                }
+              }}
+              value="Option 6"
+            >
+              Option 6
+            </SelectOption>
+            <SelectOption
+              onClick={(value) => {
+                if (value) {
+                  setSubValue(value)
+                }
+              }}
+              value="Option 7"
+            >
+              Option 7
+            </SelectOption>
+          </SelectContainer>
+        </Select>
+      </SelectContainer>
+    </Select>
+  )
 }
-
-export default meta
diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
new file mode 100644
index 00000000..fa9f9294
--- /dev/null
+++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -0,0 +1,76 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ControlledCheckbox > should render 1`] = `
+<div>
+  <div
+    class="display-0-inline-block--255 position-0-relative--255 "
+  >
+    <button
+      aria-expanded="false"
+      aria-label="Select toggle"
+      class="border-radius-0-8px--255 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
+      type="button"
+    >
+      <div
+        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
+      >
+        <div
+          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
+        >
+          Select 
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ControlledRadio > should render 1`] = `
+<div>
+  <div
+    class="display-0-inline-block--255 position-0-relative--255 "
+  >
+    <button
+      aria-expanded="false"
+      aria-label="Select toggle"
+      class="border-radius-0-8px--255 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
+      type="button"
+    >
+      <div
+        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
+      >
+        <div
+          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
+        >
+          Select 
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Select > should render 1`] = `
+<div>
+  <div
+    class="display-0-inline-block--255 position-0-relative--255 "
+  >
+    <button
+      aria-expanded="false"
+      aria-label="Select toggle"
+      class="border-radius-0-8px--255 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
+      type="button"
+    >
+      <div
+        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
+      >
+        <div
+          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
+        >
+          Select
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
index 59b8f575..79933400 100644
--- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
@@ -1,11 +1,207 @@
-import { render } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
+import React from 'react'
 import { describe, expect, it } from 'vitest'
 
-import { Select } from '..'
+import { Select, SelectContainer, SelectOption, SelectTrigger } from '..'
+import { Default } from '../Default'
 
 describe('Select', () => {
   it('should render', () => {
-    const { container } = render(<Select />)
+    const { container } = render(<Default />)
     expect(container).toMatchSnapshot()
   })
+
+  it('should throw error when used outside of Select context', () => {
+    expect(() => {
+      render(<SelectOption />)
+    }).toThrow()
+  })
+
+  it('should close select when clicking outside', () => {
+    const { container } = render(
+      <div data-testid="container">
+        <Default />
+      </div>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    const containerElement = container.querySelector(
+      '[data-testid="container"]',
+    )
+    fireEvent.click(selectToggle!)
+    expect(selectToggle).toHaveAttribute('aria-expanded', 'true')
+    fireEvent.click(containerElement!)
+    expect(selectToggle).toHaveAttribute('aria-expanded', 'false')
+  })
+
+  it('should call onOpenChange function when it is provided', () => {
+    const onOpenChange = vi.fn()
+    const { container } = render(
+      <Default onOpenChange={onOpenChange} type="radio" />,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+  })
+
+  it('should call onValueChange function when it is provided', () => {
+    const onValueChange = vi.fn()
+    const { container } = render(
+      <Default onValueChange={onValueChange} type="radio" />,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toBeInTheDocument()
+    fireEvent.click(option2!)
+    expect(onValueChange).toHaveBeenCalledWith('Option 2')
+  })
+
+  it('should do nothing when onValueChange is not provided and type is default', () => {
+    const { container } = render(<Default type="default" />)
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toBeInTheDocument()
+    fireEvent.click(option2!)
+    fireEvent.click(selectToggle!)
+    const option2_2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2_2?.querySelector('svg')).toBeNull()
+  })
+
+  it('should select option when type is radio and the option should have a check', () => {
+    const { container } = render(<Default type="radio" />)
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toBeInTheDocument()
+    fireEvent.click(option2!)
+    fireEvent.click(selectToggle!)
+    const option2_2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2_2?.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should have multiple check marks when type is checkbox and multiple options are selected', () => {
+    const { container } = render(<Default type="checkbox" />)
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    const option3 = container.querySelector('[data-value="Option 3"]')
+    expect(option2).toBeInTheDocument()
+    expect(option3).toBeInTheDocument()
+    fireEvent.click(option2!)
+    fireEvent.click(option3!)
+    expect(option2?.querySelector('svg')).toBeInTheDocument()
+    expect(option3?.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should not have a check mark when type is checkbox and the option is not selected', () => {
+    const { container } = render(<Default type="checkbox" />)
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toBeInTheDocument()
+    fireEvent.click(option2!)
+    fireEvent.click(option2!)
+    expect(option2?.querySelector('svg')).toBeNull()
+  })
+
+  it('should call onClick function when it is provided to SelectOption', () => {
+    const onClick = vi.fn()
+    const { container } = render(
+      <Select>
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer>
+          <SelectOption onClick={onClick} value="Option 1">
+            Option 1
+          </SelectOption>
+          <SelectOption onClick={onClick} value="Option 2">
+            Option 2
+          </SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toBeInTheDocument()
+    fireEvent.click(option2!)
+    expect(onClick).toHaveBeenCalledWith('Option 2', expect.any(Object))
+  })
+
+  it('should have a check mark when type is radio and defaultValue is provided', () => {
+    const { container } = render(
+      <Default defaultValue="Option 2" type="radio" />,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toBeInTheDocument()
+    expect(option2?.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should not have a check mark when type is radio and defaultValue is not provided', () => {
+    const { container } = render(<Default type="radio" />)
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const selectContainer = container.querySelector(
+      '[aria-label="Select container"]',
+    )
+    expect(selectContainer).toBeInTheDocument()
+    expect(selectContainer?.querySelectorAll('svg')).toHaveLength(1)
+  })
+
+  it('should have 10px gap in an option when type is checkbox', () => {
+    const { container } = render(<Default type="checkbox" />)
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toHaveClass('gap-0-10px--1')
+  })
+
+  it('should have 6px gap in an option when type is radio', () => {
+    const { container } = render(<Default type="radio" />)
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toHaveClass('gap-0-6px--1')
+  })
+
+  it('should have 0 gap in an option when type is default', () => {
+    const { container } = render(<Default type="default" />)
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toHaveClass('gap-0-0--1')
+  })
+
+  it('should have undefined gap when type is not right', () => {
+    // @ts-expect-error - test for wrong type
+    const { container } = render(<Default type="no-type" />)
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).not.toHaveClass('gap-0-0--1')
+  })
+
+  it('should handle ref.current being null by mocking useRef', () => {
+    const useRefSpy = vi
+      .spyOn(React, 'useRef')
+      .mockReturnValueOnce({ current: null })
+
+    const { container } = render(<Select>Select</Select>)
+
+    // The component should render without errors even with null ref
+    expect(container).toBeInTheDocument()
+
+    // Trigger a click outside to test the useEffect logic with null ref
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    expect(selectToggle).toHaveAttribute('aria-expanded', 'true')
+
+    // Click outside - this should trigger the useEffect but return early due to null ref
+    fireEvent.click(document.body)
+
+    // The select should still be open because the useEffect returned early
+    expect(useRefSpy).toHaveBeenCalledWith({ current: null })
+  })
 })
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 05a5b482..c8a70fe0 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -137,11 +137,20 @@ export function SelectTrigger({
       ComponentProps<keyof JSX.IntrinsicElements | JSXElementConstructor<any>>
     >
     const Comp = element.type
-    return <Comp onClick={handleClick} {...element.props} />
+    return (
+      <Comp
+        aria-expanded={open}
+        aria-label="Select toggle"
+        onClick={handleClick}
+        {...element.props}
+      />
+    )
   }
 
   return (
     <Button
+      aria-expanded={open}
+      aria-label="Select toggle"
       className={clsx(
         css({
           borderRadius: '8px',
@@ -162,6 +171,7 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
   if (!open) return null
   return (
     <VStack
+      aria-label="Select container"
       bg="$inputBg"
       border="1px solid $border"
       borderRadius="8px"
@@ -239,6 +249,7 @@ export function SelectOption({
       borderRadius="8px"
       color={disabled ? '$selectDisabled' : isSelected ? '$primary' : '$title'}
       cursor={changesOnHover ? 'pointer' : 'default'}
+      data-value={value}
       gap={
         {
           checkbox: '10px',

From e8c0203dc6958c6d820f851af168e77b24ddf277 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 13:51:42 +0900
Subject: [PATCH 13/28] Add colors prop

---
 .../src/components/Select/Default.tsx         |  4 +-
 .../src/components/Select/index.tsx           | 81 ++++++++++++++-----
 2 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/components/Select/Default.tsx b/packages/components/src/components/Select/Default.tsx
index a2cc8721..e4867358 100644
--- a/packages/components/src/components/Select/Default.tsx
+++ b/packages/components/src/components/Select/Default.tsx
@@ -17,7 +17,9 @@ export function Default({
     <Select {...props}>
       <SelectTrigger>Select</SelectTrigger>
       <SelectContainer>
-        <SelectOption value="Option 1">Option 1</SelectOption>
+        <SelectOption disabled value="Option 1">
+          Option 1
+        </SelectOption>
         <SelectOption value="Option 2">Option 2</SelectOption>
         <SelectDivider />
         <SelectOption value="Option 3">Option 3</SelectOption>
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index c8a70fe0..28816b16 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -21,17 +21,6 @@ import { IconCheck } from './IconCheck'
 type SelectType = 'default' | 'radio' | 'checkbox'
 type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
 
-interface SelectProps extends ComponentProps<'div'> {
-  defaultValue?: SelectValue<SelectType>
-  value?: SelectValue<SelectType>
-  onValueChange?: (value: string) => void
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-  children: React.ReactNode
-  type?: SelectType
-}
-
 const SelectContext = createContext<{
   open: boolean
   setOpen: (open: boolean) => void
@@ -48,6 +37,26 @@ export const useSelect = () => {
   return context
 }
 
+interface SelectProps extends ComponentProps<'div'> {
+  defaultValue?: SelectValue<SelectType>
+  value?: SelectValue<SelectType>
+  onValueChange?: (value: string) => void
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+  type?: SelectType
+  colors?: {
+    primary?: string
+    border?: string
+    inputBg?: string
+    base10?: string
+    title?: string
+    selectDisabled?: string
+    primaryBg?: string
+  }
+}
+
 export function Select({
   type = 'default',
   children,
@@ -57,6 +66,7 @@ export function Select({
   defaultOpen,
   open: openProp,
   onOpenChange,
+  colors,
   ...props
 }: SelectProps) {
   const ref = useRef<HTMLDivElement>(null)
@@ -111,7 +121,22 @@ export function Select({
         type,
       }}
     >
-      <Box ref={ref} display="inline-block" pos="relative" {...props}>
+      <Box
+        ref={ref}
+        display="inline-block"
+        pos="relative"
+        styleOrder={1}
+        styleVars={{
+          primary: colors?.primary,
+          border: colors?.border,
+          inputBg: colors?.inputBg,
+          base10: colors?.base10,
+          title: colors?.title,
+          selectDisabled: colors?.selectDisabled,
+          primaryBg: colors?.primaryBg,
+        }}
+        {...props}
+      >
         {children}
       </Box>
     </SelectContext.Provider>
@@ -172,11 +197,11 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
   return (
     <VStack
       aria-label="Select container"
-      bg="$inputBg"
-      border="1px solid $border"
+      bg="var(--inputBg, light-dark(#FFF,#2E2E2E))"
+      border="1px solid var(--border, light-dark(#E4E4E4,#434343))"
       borderRadius="8px"
       bottom="-4px"
-      boxShadow="0 2px 2px 0 $base10"
+      boxShadow="0 2px 2px 0 var(--base10, light-dark(#0000001A,#FFFFFF1A))"
       gap="6px"
       h="fit-content"
       p="10px"
@@ -242,12 +267,18 @@ export function SelectOption({
     <Flex
       _hover={
         changesOnHover && {
-          bg: '$primaryBg',
+          bg: 'var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))',
         }
       }
       alignItems="center"
       borderRadius="8px"
-      color={disabled ? '$selectDisabled' : isSelected ? '$primary' : '$title'}
+      color={
+        disabled
+          ? 'var(--selectDisabled, light-dark(#C4C5D1, #45464D))'
+          : isSelected
+            ? 'var(--primary, light-dark(#674DC7, #8163E1)'
+            : 'var(--title, light-dark(#1A1A1A,#FAFAFA))'
+      }
       cursor={changesOnHover ? 'pointer' : 'default'}
       data-value={value}
       gap={
@@ -269,7 +300,11 @@ export function SelectOption({
         {
           checkbox: (
             <Box
-              bg={isSelected ? '$primary' : '$border'}
+              bg={
+                isSelected
+                  ? 'var(--primary, light-dark(#674DC7, #8163E1)'
+                  : 'var(--border, light-dark(#E4E4E4, #434343))'
+              }
               borderRadius="4px"
               boxSize="18px"
               pos="relative"
@@ -317,5 +352,13 @@ export function SelectOption({
 }
 
 export function SelectDivider({ ...props }: ComponentProps<'div'>) {
-  return <Box bg="$border" h="1px" styleOrder={1} w="100%" {...props} />
+  return (
+    <Box
+      bg="var(--border, light-dark(#E4E4E4,#434343)"
+      h="1px"
+      styleOrder={1}
+      w="100%"
+      {...props}
+    />
+  )
 }

From d810cb7f28a7a713371fb65f731bd652cea7d0e3 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 14:25:25 +0900
Subject: [PATCH 14/28] Fix test - Fix condition in useEffect

---
 .../src/components/Select/Select.stories.tsx  |  5 +-
 .../__snapshots__/index.browser.test.tsx.snap | 52 +------------------
 .../Select/__tests__/index.browser.test.tsx   | 45 +++++++++-------
 .../src/components/Select/index.tsx           |  3 +-
 4 files changed, 31 insertions(+), 74 deletions(-)

diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index 11e7362e..e8b10a22 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -28,7 +28,10 @@ const meta: Meta<typeof Select> = {
 }
 
 export const DefaultStory: Story = {
-  args: { type: 'radio' },
+  args: {
+    type: 'default',
+    colors: {},
+  },
   render: (args) => <DefaultComponent {...args} />,
 }
 
diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
index fa9f9294..7f06fc44 100644
--- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -1,59 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ControlledCheckbox > should render 1`] = `
-<div>
-  <div
-    class="display-0-inline-block--255 position-0-relative--255 "
-  >
-    <button
-      aria-expanded="false"
-      aria-label="Select toggle"
-      class="border-radius-0-8px--255 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
-      type="button"
-    >
-      <div
-        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
-      >
-        <div
-          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
-        >
-          Select 
-        </div>
-      </div>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`ControlledRadio > should render 1`] = `
-<div>
-  <div
-    class="display-0-inline-block--255 position-0-relative--255 "
-  >
-    <button
-      aria-expanded="false"
-      aria-label="Select toggle"
-      class="border-radius-0-8px--255 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
-      type="button"
-    >
-      <div
-        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
-      >
-        <div
-          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
-        >
-          Select 
-        </div>
-      </div>
-    </button>
-  </div>
-</div>
-`;
-
 exports[`Select > should render 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 "
+    class="display-0-inline-block--1 position-0-relative--1 "
   >
     <button
       aria-expanded="false"
diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
index 79933400..38390baa 100644
--- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
@@ -6,6 +6,10 @@ import { Select, SelectContainer, SelectOption, SelectTrigger } from '..'
 import { Default } from '../Default'
 
 describe('Select', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
   it('should render', () => {
     const { container } = render(<Default />)
     expect(container).toMatchSnapshot()
@@ -183,25 +187,26 @@ describe('Select', () => {
     expect(option2).not.toHaveClass('gap-0-0--1')
   })
 
-  it('should handle ref.current being null by mocking useRef', () => {
-    const useRefSpy = vi
-      .spyOn(React, 'useRef')
-      .mockReturnValueOnce({ current: null })
-
-    const { container } = render(<Select>Select</Select>)
-
-    // The component should render without errors even with null ref
-    expect(container).toBeInTheDocument()
-
-    // Trigger a click outside to test the useEffect logic with null ref
-    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
-    fireEvent.click(selectToggle!)
-    expect(selectToggle).toHaveAttribute('aria-expanded', 'true')
-
-    // Click outside - this should trigger the useEffect but return early due to null ref
-    fireEvent.click(document.body)
-
-    // The select should still be open because the useEffect returned early
-    expect(useRefSpy).toHaveBeenCalledWith({ current: null })
+  it('should add styleVars to the container when colors are provided', () => {
+    const { container } = render(
+      <Default
+        colors={{
+          primary: 'red',
+          border: 'blue',
+          inputBg: 'green',
+          base10: 'yellow',
+          title: 'purple',
+        }}
+        data-testid="select"
+      />,
+    )
+    const select = container.querySelector('[data-testid="select"]')
+    expect(select).toHaveStyle({
+      '--primary': 'red',
+      '--border': 'blue',
+      '--inputBg': 'green',
+      '--base10': 'yellow',
+      '--title': 'purple',
+    })
   })
 })
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 28816b16..3f796d93 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -76,9 +76,8 @@ export function Select({
   )
 
   useEffect(() => {
-    if (!ref.current) return
     const handleOutsideClick = (e: MouseEvent) => {
-      if (ref.current?.contains(e.target as Node)) return
+      if (ref.current && ref.current.contains(e.target as Node)) return
       setOpen(false)
     }
     document.addEventListener('click', handleOutsideClick)

From 0aab46e7833fe6a421f754d3599a864d4bb6a863 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 14:34:33 +0900
Subject: [PATCH 15/28] Add boxSizing to Select, Input

---
 packages/components/src/components/Input/index.tsx  | 2 +-
 packages/components/src/components/Select/index.tsx | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/Input/index.tsx b/packages/components/src/components/Input/index.tsx
index 83a59c53..404ccb79 100644
--- a/packages/components/src/components/Input/index.tsx
+++ b/packages/components/src/components/Input/index.tsx
@@ -65,7 +65,7 @@ export function Input({
     <Box
       display="inline-block"
       pos="relative"
-      selectors={{ '&,&>*': { boxSizing: 'border-box' } }}
+      selectors={{ '&,& *': { boxSizing: 'border-box' } }}
     >
       {icon && (
         <Center
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 3f796d93..1499d5a1 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -124,6 +124,11 @@ export function Select({
         ref={ref}
         display="inline-block"
         pos="relative"
+        selectors={{
+          '&,& *': {
+            boxSizing: 'border-box',
+          },
+        }}
         styleOrder={1}
         styleVars={{
           primary: colors?.primary,

From f0366ced12364150a12f31dc3261e51377bf2654 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 15:09:49 +0900
Subject: [PATCH 16/28] Fix typography

---
 packages/components/src/components/Select/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 1499d5a1..984c5528 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Box, css, Flex, VStack } from '@devup-ui/react'
+import { Box, css, DevupThemeTypography, Flex, VStack } from '@devup-ui/react'
 import clsx from 'clsx'
 import {
   Children,
@@ -55,6 +55,7 @@ interface SelectProps extends ComponentProps<'div'> {
     selectDisabled?: string
     primaryBg?: string
   }
+  typography?: keyof DevupThemeTypography
 }
 
 export function Select({
@@ -67,6 +68,7 @@ export function Select({
   open: openProp,
   onOpenChange,
   colors,
+  typography,
   ...props
 }: SelectProps) {
   const ref = useRef<HTMLDivElement>(null)
@@ -139,6 +141,7 @@ export function Select({
           selectDisabled: colors?.selectDisabled,
           primaryBg: colors?.primaryBg,
         }}
+        typography={typography}
         {...props}
       >
         {children}
@@ -285,6 +288,7 @@ export function SelectOption({
       }
       cursor={changesOnHover ? 'pointer' : 'default'}
       data-value={value}
+      fontWeight={isSelected ? '700' : '400'}
       gap={
         {
           checkbox: '10px',
@@ -297,7 +301,6 @@ export function SelectOption({
       px="10px"
       styleOrder={1}
       transition="background-color 0.1s ease-in-out"
-      typography={isSelected ? 'inputBold' : 'inputText'}
       {...props}
     >
       {showCheck &&

From 805eb1ea4fe39ecc6d7c519bef607c46f4d41ff7 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 15:23:06 +0900
Subject: [PATCH 17/28] Add confirm button to SelectOption

---
 .../src/components/Select/Select.stories.tsx  |  2 +-
 .../src/components/Select/index.tsx           | 31 +++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index e8b10a22..aa679d3a 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -69,7 +69,7 @@ function ControlledCheckbox() {
   return (
     <Select onValueChange={handleChange} type="checkbox" value={value}>
       <SelectTrigger>Select {value}</SelectTrigger>
-      <SelectContainer>
+      <SelectContainer showConfirmButton>
         <SelectOption value="Option 1">Option 1</SelectOption>
         <SelectOption value="Option 2">Option 2</SelectOption>
         <SelectDivider />
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 984c5528..f9c38c2b 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -197,8 +197,15 @@ export function SelectTrigger({
   )
 }
 
-export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
-  const { open } = useSelect()
+interface SelectContainerProps extends ComponentProps<'div'> {
+  showConfirmButton?: boolean
+}
+export function SelectContainer({
+  children,
+  showConfirmButton,
+  ...props
+}: SelectContainerProps) {
+  const { open, setOpen, type } = useSelect()
 
   if (!open) return null
   return (
@@ -220,6 +227,26 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
       {...props}
     >
       {children}
+      {showConfirmButton && type === 'checkbox' && (
+        <Flex justifyContent="end" w="100%">
+          <Button
+            className={css({
+              textAlign: 'end',
+              bg: 'var(--primary, light-dark(#674DC7, #8163E1))',
+              borderRadius: '8px',
+              w: 'fit-content',
+              px: '30px',
+              py: '10px',
+              color: 'var(--white, light-dark(#FFF,#FFF))',
+              typography: 'buttonS',
+            })}
+            onClick={() => setOpen(false)}
+            variant="primary"
+          >
+            완료
+          </Button>
+        </Flex>
+      )}
     </VStack>
   )
 }

From fdaff93a13551e74f41dc4b2018b5d880276e252 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 15:24:04 +0900
Subject: [PATCH 18/28] Run changeset

---
 .changeset/great-sheep-do.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/great-sheep-do.md

diff --git a/.changeset/great-sheep-do.md b/.changeset/great-sheep-do.md
new file mode 100644
index 00000000..a994bc93
--- /dev/null
+++ b/.changeset/great-sheep-do.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Add Select component

From 758d36db66d1abed6abba78d97fecb4ce9c051cc Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Fri, 8 Aug 2025 15:38:43 +0900
Subject: [PATCH 19/28] Fix build error

---
 packages/components/src/components/Input/index.tsx  | 2 +-
 packages/components/src/components/Select/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Input/index.tsx b/packages/components/src/components/Input/index.tsx
index 404ccb79..6bdf2bf5 100644
--- a/packages/components/src/components/Input/index.tsx
+++ b/packages/components/src/components/Input/index.tsx
@@ -65,7 +65,7 @@ export function Input({
     <Box
       display="inline-block"
       pos="relative"
-      selectors={{ '&,& *': { boxSizing: 'border-box' } }}
+      selectors={{ '&, & *': { boxSizing: 'border-box' } }}
     >
       {icon && (
         <Center
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index f9c38c2b..37494aca 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -127,7 +127,7 @@ export function Select({
         display="inline-block"
         pos="relative"
         selectors={{
-          '&,& *': {
+          '&, & *': {
             boxSizing: 'border-box',
           },
         }}

From f10c9d4c720cfbd12fb003ea2bc99173be234652 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 11 Aug 2025 10:58:01 +0900
Subject: [PATCH 20/28] Update Select test cases

---
 .../__snapshots__/index.browser.test.tsx.snap | 24 ++++----
 .../__snapshots__/index.browser.test.tsx.snap |  2 +-
 .../Select/__tests__/index.browser.test.tsx   | 59 ++++++++++++++++++-
 .../src/components/Select/index.tsx           |  1 +
 4 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
index d81cafbd..1d13232f 100644
--- a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Controlled Input > should render with value 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -17,7 +17,7 @@ exports[`Controlled Input > should render with value 1`] = `
 exports[`Input > should have typography when typography is provided 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -31,7 +31,7 @@ exports[`Input > should have typography when typography is provided 1`] = `
 exports[`Input > should not have padding right when allowClear is false 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -45,7 +45,7 @@ exports[`Input > should not have padding right when allowClear is false 1`] = `
 exports[`Input > should not show clear button when value is empty 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -59,7 +59,7 @@ exports[`Input > should not show clear button when value is empty 1`] = `
 exports[`Input > should pass className prop to error message component 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -79,7 +79,7 @@ exports[`Input > should pass className prop to error message component 1`] = `
 exports[`Input > should pass className prop to icon component 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <div
       aria-label="icon"
@@ -144,7 +144,7 @@ exports[`Input > should pass props to ClearButton component 1`] = `
 exports[`Input > should render disabled icon style when disabled is true 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <div
       aria-label="icon"
@@ -178,7 +178,7 @@ exports[`Input > should render disabled icon style when disabled is true 1`] = `
 exports[`Input > should render error style when error is true 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -192,7 +192,7 @@ exports[`Input > should render error style when error is true 1`] = `
 exports[`Input > should render with allowClear prop 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -206,7 +206,7 @@ exports[`Input > should render with allowClear prop 1`] = `
 exports[`Input > should render with default props 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -220,7 +220,7 @@ exports[`Input > should render with default props 1`] = `
 exports[`Input > should render with disabled prop 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -235,7 +235,7 @@ exports[`Input > should render with disabled prop 1`] = `
 exports[`Input > should show clear button when value is not empty 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
+    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
index 7f06fc44..312b759e 100644
--- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Select > should render 1`] = `
 <div>
   <div
-    class="display-0-inline-block--1 position-0-relative--1 "
+    class="display-0-inline-block--1 position-0-relative--1 box-sizing-0-border-box-1137980104803605758-1  "
   >
     <button
       aria-expanded="false"
diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
index 38390baa..55e295fb 100644
--- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
@@ -2,7 +2,14 @@ import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 import { describe, expect, it } from 'vitest'
 
-import { Select, SelectContainer, SelectOption, SelectTrigger } from '..'
+import {
+  Select,
+  SelectContainer,
+  SelectDivider,
+  SelectOption,
+  SelectTrigger,
+  useSelect,
+} from '..'
 import { Default } from '../Default'
 
 describe('Select', () => {
@@ -209,4 +216,54 @@ describe('Select', () => {
       '--title': 'purple',
     })
   })
+
+  it('should show confirm button when type is checkbox and showConfirmButton is true', () => {
+    const { container } = render(
+      <Select type="checkbox">
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer showConfirmButton>
+          <SelectOption disabled value="Option 1">
+            Option 1
+          </SelectOption>
+          <SelectDivider />
+          <SelectOption value="Option 2">Option 2</SelectOption>
+          <SelectOption value="Option 3">Option 3</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const confirmButton = container.querySelector(
+      '[aria-label="Select confirm button"]',
+    )
+    expect(confirmButton).toBeInTheDocument()
+  })
+
+  it('should not show confirm button when type is checkbox and showConfirmButton is false', () => {
+    const { container } = render(
+      <Select type="checkbox">
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer showConfirmButton={false}>
+          <SelectOption disabled value="Option 1">
+            Option 1
+          </SelectOption>
+          <SelectDivider />
+          <SelectOption value="Option 2">Option 2</SelectOption>
+          <SelectOption value="Option 3">Option 3</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const confirmButton = container.querySelector(
+      '[aria-label="Select confirm button"]',
+    )
+    expect(confirmButton).not.toBeInTheDocument()
+  })
+
+  it('should throw error when useSelect is used outside of Select context', () => {
+    expect(() => {
+      useSelect()
+    }).toThrow()
+  })
 })
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 37494aca..65497565 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -230,6 +230,7 @@ export function SelectContainer({
       {showConfirmButton && type === 'checkbox' && (
         <Flex justifyContent="end" w="100%">
           <Button
+            aria-label="Select confirm button"
             className={css({
               textAlign: 'end',
               bg: 'var(--primary, light-dark(#674DC7, #8163E1))',

From 548011c2956ddf818fa80860853635450d8905a1 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 11 Aug 2025 19:14:03 +0900
Subject: [PATCH 21/28] Reinstall packages

---
 pnpm-lock.yaml | 406 ++++++++++++++++++++++++-------------------------
 1 file changed, 203 insertions(+), 203 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ce6e410..485029cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,22 +25,22 @@ importers:
         version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@types/node':
         specifier: ^24.2.0
-        version: 24.2.0
+        version: 24.2.1
       '@vitest/coverage-v8':
         specifier: ^3.2.4
-        version: 3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.2.0)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1))
+        version: 3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.2.1)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1))
       eslint:
         specifier: ^9.32.0
-        version: 9.32.0(jiti@2.5.1)
+        version: 9.33.0(jiti@2.5.1)
       eslint-plugin-devup:
         specifier: ^2.0.5
-        version: 2.0.5(@types/eslint@9.6.1)(@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+        version: 2.0.5(@types/eslint@9.6.1)(@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
       happy-dom:
         specifier: ^18.0.1
         version: 18.0.1
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.0)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.1)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
 
   apps/landing:
     dependencies:
@@ -98,7 +98,7 @@ importers:
         version: 3.1.2
       '@types/node':
         specifier: ^24
-        version: 24.2.0
+        version: 24.2.1
       '@types/react':
         specifier: ^19
         version: 19.1.9
@@ -138,7 +138,7 @@ importers:
         version: link:../../packages/next-plugin
       '@types/node':
         specifier: ^24
-        version: 24.2.0
+        version: 24.2.1
       '@types/react':
         specifier: ^19
         version: 19.1.9
@@ -191,7 +191,7 @@ importers:
         version: link:../../packages/vite-plugin
       '@types/node':
         specifier: ^24
-        version: 24.2.0
+        version: 24.2.1
       '@types/react':
         specifier: ^19
         version: 19.1.9
@@ -200,13 +200,13 @@ importers:
         version: 19.1.7(@types/react@19.1.9)
       '@vitejs/plugin-react':
         specifier: ^5.0.0
-        version: 5.0.0(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 5.0.0(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       typescript:
         specifier: ^5
         version: 5.9.2
       vite:
         specifier: ^6
-        version: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+        version: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
 
   apps/vite-lib:
     dependencies:
@@ -222,22 +222,22 @@ importers:
         version: link:../../packages/vite-plugin
       '@types/node':
         specifier: ^24
-        version: 24.2.0
+        version: 24.2.1
       '@types/react':
         specifier: ^19
         version: 19.1.9
       '@vitejs/plugin-react':
         specifier: ^5.0.0
-        version: 5.0.0(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 5.0.0(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       typescript:
         specifier: ^5
         version: 5.9.2
       vite:
         specifier: ^6
-        version: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+        version: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
       vite-plugin-dts:
         specifier: ^4.5.4
-        version: 4.5.4(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 4.5.4(@types/node@24.2.1)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
 
   benchmark/next-chakra-ui:
     dependencies:
@@ -265,7 +265,7 @@ importers:
     devDependencies:
       '@types/node':
         specifier: ^24
-        version: 24.2.0
+        version: 24.2.1
       '@types/react':
         specifier: ^19
         version: 19.1.9
@@ -296,7 +296,7 @@ importers:
         version: link:../../packages/next-plugin
       '@types/node':
         specifier: ^24
-        version: 24.2.0
+        version: 24.2.1
       '@types/react':
         specifier: ^19
         version: 19.1.9
@@ -327,7 +327,7 @@ importers:
         version: 1.3.3(@babel/core@7.28.0)(@types/react@19.1.9)(next@15.4.6(@babel/core@7.28.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react@19.1.1)(webpack@5.101.0)
       '@types/node':
         specifier: ^24
-        version: 24.2.0
+        version: 24.2.1
       '@types/react':
         specifier: ^19
         version: 19.1.9
@@ -367,7 +367,7 @@ importers:
     devDependencies:
       '@types/node':
         specifier: ^24
-        version: 24.2.0
+        version: 24.2.1
       '@types/react':
         specifier: ^19
         version: 19.1.9
@@ -400,37 +400,37 @@ importers:
         version: link:../vite-plugin
       '@storybook/addon-docs':
         specifier: ^9.1.1
-        version: 9.1.1(@types/react@19.1.9)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))
+        version: 9.1.1(@types/react@19.1.9)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))
       '@storybook/addon-onboarding':
         specifier: ^9.1.1
-        version: 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))
+        version: 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))
       '@storybook/react-vite':
         specifier: ^9.1.1
-        version: 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rollup@4.46.2)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rollup@4.46.2)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       '@types/react':
         specifier: ^19.1.9
         version: 19.1.9
       eslint-plugin-storybook:
         specifier: ^9.1.1
-        version: 9.1.1(eslint@9.32.0(jiti@2.5.1))(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)
+        version: 9.1.1(eslint@9.33.0(jiti@2.5.1))(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)
       rollup-plugin-preserve-directives:
         specifier: ^0.4.0
         version: 0.4.0(rollup@4.46.2)
       storybook:
         specifier: ^9.1.1
-        version: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       typescript:
         specifier: ^5.9.2
         version: 5.9.2
       vite:
         specifier: ^6
-        version: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+        version: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
       vite-plugin-dts:
         specifier: ^4.5.4
-        version: 4.5.4(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 4.5.4(@types/node@24.2.1)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.0)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.1)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
 
   packages/next-plugin:
     dependencies:
@@ -439,7 +439,7 @@ importers:
         version: link:../webpack-plugin
       browserslist:
         specifier: latest
-        version: 4.25.1
+        version: 4.25.2
       next:
         specifier: ^15.4
         version: 15.4.6(@babel/core@7.28.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -452,13 +452,13 @@ importers:
         version: 5.9.2
       vite:
         specifier: ^6
-        version: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+        version: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
       vite-plugin-dts:
         specifier: ^4.5.4
-        version: 4.5.4(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 4.5.4(@types/node@24.2.1)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.0)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.1)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
 
   packages/react:
     dependencies:
@@ -480,10 +480,10 @@ importers:
         version: 5.9.2
       vite:
         specifier: ^6
-        version: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+        version: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
       vite-plugin-dts:
         specifier: ^4.5.4
-        version: 4.5.4(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 4.5.4(@types/node@24.2.1)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
 
   packages/reset-css:
     dependencies:
@@ -499,10 +499,10 @@ importers:
         version: 5.9.2
       vite:
         specifier: ^6
-        version: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+        version: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
       vite-plugin-dts:
         specifier: ^4.5.4
-        version: 4.5.4(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 4.5.4(@types/node@24.2.1)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
 
   packages/rsbuild-plugin:
     dependencies:
@@ -518,13 +518,13 @@ importers:
         version: 5.9.2
       vite:
         specifier: ^6
-        version: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+        version: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
       vite-plugin-dts:
         specifier: ^4.5.4
-        version: 4.5.4(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 4.5.4(@types/node@24.2.1)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.0)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.1)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
 
   packages/vite-plugin:
     dependencies:
@@ -533,14 +533,14 @@ importers:
         version: link:../../bindings/devup-ui-wasm
       vite:
         specifier: ^6
-        version: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+        version: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
     devDependencies:
       typescript:
         specifier: ^5.9.2
         version: 5.9.2
       vite-plugin-dts:
         specifier: ^4.5.4
-        version: 4.5.4(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 4.5.4(@types/node@24.2.1)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
 
   packages/webpack-plugin:
     dependencies:
@@ -556,13 +556,13 @@ importers:
         version: 5.9.2
       vite:
         specifier: ^6
-        version: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+        version: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
       vite-plugin-dts:
         specifier: ^4.5.4
-        version: 4.5.4(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+        version: 4.5.4(@types/node@24.2.1)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.0)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.1)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
 
 packages:
 
@@ -1583,8 +1583,8 @@ packages:
     resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.32.0':
-    resolution: {integrity: sha512-BBpRFZK3eX6uMLKz8WxFOBIFFcGFJ/g8XuwjTHCqHROSIsopI+ddn/d5Cfh36+7+e5edVS8dbSHnBNhrLEX0zg==}
+  '@eslint/js@9.33.0':
+    resolution: {integrity: sha512-5K1/mKhWaMfreBGJTwval43JJmkip0RmM+3+IuqupeSKNC/Th2Kc7ucaq5ovTSra/OOKB9c58CGSz3QMVbWt0A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.6':
@@ -1970,8 +1970,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@napi-rs/wasm-runtime@1.0.2':
-    resolution: {integrity: sha512-4pSAVWEyZMgE9q+SYkHK+UhYRo4o7P+NYZSsuuhU0wKNzV09ujaxerrbzgv6zyLoWIggJb8ql/KRzv0H9WuAZQ==}
+  '@napi-rs/wasm-runtime@1.0.3':
+    resolution: {integrity: sha512-rZxtMsLwjdXkMUGC3WwsPwLNVqVqnTJT6MNIB6e+5fhMcSCPP0AOsNWuMQ5mdCq6HNjs/ZeWAEchpqeprqBD2Q==}
 
   '@next/env@15.4.6':
     resolution: {integrity: sha512-yHDKVTcHrZy/8TWhj0B23ylKv5ypocuCwey9ZqPyv4rPdUdRzpGCkSi03t04KBPyU96kxVtUqx6O3nE1kpxASQ==}
@@ -2450,11 +2450,11 @@ packages:
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  '@types/node@20.19.9':
-    resolution: {integrity: sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==}
+  '@types/node@20.19.10':
+    resolution: {integrity: sha512-iAFpG6DokED3roLSP0K+ybeDdIX6Bc0Vd3mLW5uDqThPWtNos3E+EqOM11mPQHKzfWHqEBuLjIlsBQQ8CsISmQ==}
 
-  '@types/node@24.2.0':
-    resolution: {integrity: sha512-3xyG3pMCq3oYCNg7/ZP+E1ooTaGB4cG8JWRsqqOYQdbWNY4zbaV0Ennrd7stjiJEFZCaybcIgpTjJWHRfBSIDw==}
+  '@types/node@24.2.1':
+    resolution: {integrity: sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ==}
 
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
@@ -2602,14 +2602,14 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
-  '@volar/language-core@2.4.22':
-    resolution: {integrity: sha512-gp4M7Di5KgNyIyO903wTClYBavRt6UyFNpc5LWfyZr1lBsTUY+QrVZfmbNF2aCyfklBOVk9YC4p+zkwoyT7ECg==}
+  '@volar/language-core@2.4.23':
+    resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==}
 
-  '@volar/source-map@2.4.22':
-    resolution: {integrity: sha512-L2nVr/1vei0xKRgO2tYVXtJYd09HTRjaZi418e85Q+QdbbqA8h7bBjfNyPPSsjnrOO4l4kaAo78c8SQUAdHvgA==}
+  '@volar/source-map@2.4.23':
+    resolution: {integrity: sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==}
 
-  '@volar/typescript@2.4.22':
-    resolution: {integrity: sha512-6ZczlJW1/GWTrNnkmZxJp4qyBt/SGVlcTuCWpI5zLrdPdCZsj66Aff9ZsfFaT3TyjG8zVYgBMYPuCm/eRkpcpQ==}
+  '@volar/typescript@2.4.23':
+    resolution: {integrity: sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==}
 
   '@vue/compiler-core@3.5.18':
     resolution: {integrity: sha512-3slwjQrrV1TO8MoXgy3aynDQ7lslj5UqDxuHnrzHtpON5CBinhWjJETciPngpin/T3OuW3tXUf86tEurusnztw==}
@@ -3105,8 +3105,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  browserslist@4.25.1:
-    resolution: {integrity: sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==}
+  browserslist@4.25.2:
+    resolution: {integrity: sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -3133,8 +3133,8 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  caniuse-lite@1.0.30001733:
-    resolution: {integrity: sha512-e4QKw/O2Kavj2VQTKZWrwzkt3IxOmIlU6ajRb6LP64LHpBo1J67k2Hi4Vu/TgJWsNtynurfS0uK3MaUTCPfu5Q==}
+  caniuse-lite@1.0.30001734:
+    resolution: {integrity: sha512-uhE1Ye5vgqju6OI71HTQqcBCZrvHugk0MjLak7Q+HfoBgoq5Bi+5YnwjP4fjDgrtYr/l8MVRBvzz9dPD4KyK0A==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -3518,8 +3518,8 @@ packages:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.32.0:
-    resolution: {integrity: sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==}
+  eslint@9.33.0:
+    resolution: {integrity: sha512-TS9bTNIryDzStCpJN93aC5VRSW3uTx9sClUn4B87pwiCaJh220otoI0X8mJKr+VcPtniMdN8GKjlwgWGUv5ZKA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -5665,7 +5665,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.28.0
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.25.1
+      browserslist: 4.25.2
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -6759,9 +6759,9 @@ snapshots:
   '@esbuild/win32-x64@0.25.8':
     optional: true
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.32.0(jiti@2.5.1))':
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.33.0(jiti@2.5.1))':
     dependencies:
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
@@ -6794,7 +6794,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.32.0': {}
+  '@eslint/js@9.33.0': {}
 
   '@eslint/object-schema@2.1.6': {}
 
@@ -6938,12 +6938,12 @@ snapshots:
 
   '@istanbuljs/schema@0.1.3': {}
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))':
     dependencies:
       glob: 10.4.5
       magic-string: 0.30.17
       react-docgen-typescript: 2.4.0(typescript@5.9.2)
-      vite: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+      vite: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
     optionalDependencies:
       typescript: 5.9.2
 
@@ -7109,23 +7109,23 @@ snapshots:
       '@types/react': 19.1.9
       react: 19.1.1
 
-  '@microsoft/api-extractor-model@7.30.7(@types/node@24.2.0)':
+  '@microsoft/api-extractor-model@7.30.7(@types/node@24.2.1)':
     dependencies:
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.14.0(@types/node@24.2.0)
+      '@rushstack/node-core-library': 5.14.0(@types/node@24.2.1)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.52.10(@types/node@24.2.0)':
+  '@microsoft/api-extractor@7.52.10(@types/node@24.2.1)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.30.7(@types/node@24.2.0)
+      '@microsoft/api-extractor-model': 7.30.7(@types/node@24.2.1)
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.14.0(@types/node@24.2.0)
+      '@rushstack/node-core-library': 5.14.0(@types/node@24.2.1)
       '@rushstack/rig-package': 0.5.3
-      '@rushstack/terminal': 0.15.4(@types/node@24.2.0)
-      '@rushstack/ts-command-line': 5.0.2(@types/node@24.2.0)
+      '@rushstack/terminal': 0.15.4(@types/node@24.2.1)
+      '@rushstack/ts-command-line': 5.0.2(@types/node@24.2.1)
       lodash: 4.17.21
       minimatch: 10.0.3
       resolve: 1.22.10
@@ -7248,7 +7248,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.9
 
-  '@napi-rs/wasm-runtime@1.0.2':
+  '@napi-rs/wasm-runtime@1.0.3':
     dependencies:
       '@emnapi/core': 1.4.5
       '@emnapi/runtime': 1.4.5
@@ -7415,7 +7415,7 @@ snapshots:
 
   '@rspack/binding-wasm32-wasi@1.4.11':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.2
+      '@napi-rs/wasm-runtime': 1.0.3
     optional: true
 
   '@rspack/binding-win32-arm64-msvc@1.4.11':
@@ -7456,7 +7456,7 @@ snapshots:
       html-entities: 2.6.0
       react-refresh: 0.17.0
 
-  '@rushstack/node-core-library@5.14.0(@types/node@24.2.0)':
+  '@rushstack/node-core-library@5.14.0(@types/node@24.2.1)':
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
@@ -7467,56 +7467,56 @@ snapshots:
       resolve: 1.22.10
       semver: 7.5.4
     optionalDependencies:
-      '@types/node': 24.2.0
+      '@types/node': 24.2.1
 
   '@rushstack/rig-package@0.5.3':
     dependencies:
       resolve: 1.22.10
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.15.4(@types/node@24.2.0)':
+  '@rushstack/terminal@0.15.4(@types/node@24.2.1)':
     dependencies:
-      '@rushstack/node-core-library': 5.14.0(@types/node@24.2.0)
+      '@rushstack/node-core-library': 5.14.0(@types/node@24.2.1)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 24.2.0
+      '@types/node': 24.2.1
 
-  '@rushstack/ts-command-line@5.0.2(@types/node@24.2.0)':
+  '@rushstack/ts-command-line@5.0.2(@types/node@24.2.1)':
     dependencies:
-      '@rushstack/terminal': 0.15.4(@types/node@24.2.0)
+      '@rushstack/terminal': 0.15.4(@types/node@24.2.1)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
     transitivePeerDependencies:
       - '@types/node'
 
-  '@storybook/addon-docs@9.1.1(@types/react@19.1.9)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))':
+  '@storybook/addon-docs@9.1.1(@types/react@19.1.9)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))':
     dependencies:
       '@mdx-js/react': 3.1.0(@types/react@19.1.9)(react@19.1.1)
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))
+      '@storybook/csf-plugin': 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))
       '@storybook/icons': 1.4.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))
+      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-onboarding@9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))':
+  '@storybook/addon-onboarding@9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
 
-  '@storybook/builder-vite@9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))':
+  '@storybook/builder-vite@9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))':
     dependencies:
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      '@storybook/csf-plugin': 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))
+      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       ts-dedent: 2.2.0
-      vite: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+      vite: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
 
-  '@storybook/csf-plugin@9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))':
+  '@storybook/csf-plugin@9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       unplugin: 1.16.1
 
   '@storybook/global@5.0.0': {}
@@ -7526,39 +7526,39 @@ snapshots:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
 
-  '@storybook/react-dom-shim@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))':
+  '@storybook/react-dom-shim@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))':
     dependencies:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
 
-  '@storybook/react-vite@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rollup@4.46.2)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))':
+  '@storybook/react-vite@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rollup@4.46.2)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       '@rollup/pluginutils': 5.2.0(rollup@4.46.2)
-      '@storybook/builder-vite': 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
-      '@storybook/react': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)
+      '@storybook/builder-vite': 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
+      '@storybook/react': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)
       find-up: 7.0.0
       magic-string: 0.30.17
       react: 19.1.1
       react-docgen: 8.0.0
       react-dom: 19.1.1(react@19.1.1)
       resolve: 1.22.10
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       tsconfig-paths: 4.2.0
-      vite: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+      vite: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  '@storybook/react@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)':
+  '@storybook/react@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))
+      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
     optionalDependencies:
       typescript: 5.9.2
 
@@ -7570,10 +7570,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tanstack/eslint-plugin-query@5.83.1(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@tanstack/eslint-plugin-query@5.83.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
-      eslint: 9.32.0(jiti@2.5.1)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.33.0(jiti@2.5.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -7700,11 +7700,11 @@ snapshots:
 
   '@types/node@12.20.55': {}
 
-  '@types/node@20.19.9':
+  '@types/node@20.19.10':
     dependencies:
       undici-types: 6.21.0
 
-  '@types/node@24.2.0':
+  '@types/node@24.2.1':
     dependencies:
       undici-types: 7.10.0
 
@@ -7738,7 +7738,7 @@ snapshots:
 
   '@types/webpack@5.28.5':
     dependencies:
-      '@types/node': 24.2.0
+      '@types/node': 24.2.1
       tapable: 2.2.2
       webpack: 5.101.0
     transitivePeerDependencies:
@@ -7749,15 +7749,15 @@ snapshots:
 
   '@types/whatwg-mimetype@3.0.2': {}
 
-  '@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
       '@typescript-eslint/scope-manager': 8.39.0
-      '@typescript-eslint/type-utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/type-utils': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
       '@typescript-eslint/visitor-keys': 8.39.0
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -7766,14 +7766,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.39.0
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
       '@typescript-eslint/visitor-keys': 8.39.0
       debug: 4.4.1
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
@@ -7796,13 +7796,13 @@ snapshots:
     dependencies:
       typescript: 5.9.2
 
-  '@typescript-eslint/type-utils@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@typescript-eslint/type-utils@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
     dependencies:
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
       debug: 4.4.1
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
       ts-api-utils: 2.1.0(typescript@5.9.2)
       typescript: 5.9.2
     transitivePeerDependencies:
@@ -7826,13 +7826,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@typescript-eslint/utils@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.5.1))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.33.0(jiti@2.5.1))
       '@typescript-eslint/scope-manager': 8.39.0
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
@@ -7844,7 +7844,7 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitejs/plugin-react@5.0.0(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))':
+  '@vitejs/plugin-react@5.0.0(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))':
     dependencies:
       '@babel/core': 7.28.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
@@ -7852,11 +7852,11 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.30
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+      vite: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.2.0)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1))':
+  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.2.1)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 1.0.2
@@ -7871,7 +7871,7 @@ snapshots:
       std-env: 3.9.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.0)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@24.2.1)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -7883,13 +7883,13 @@ snapshots:
       chai: 5.2.1
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))':
+  '@vitest/mocker@3.2.4(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+      vite: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -7917,15 +7917,15 @@ snapshots:
       loupe: 3.2.0
       tinyrainbow: 2.0.0
 
-  '@volar/language-core@2.4.22':
+  '@volar/language-core@2.4.23':
     dependencies:
-      '@volar/source-map': 2.4.22
+      '@volar/source-map': 2.4.23
 
-  '@volar/source-map@2.4.22': {}
+  '@volar/source-map@2.4.23': {}
 
-  '@volar/typescript@2.4.22':
+  '@volar/typescript@2.4.23':
     dependencies:
-      '@volar/language-core': 2.4.22
+      '@volar/language-core': 2.4.23
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
@@ -7949,7 +7949,7 @@ snapshots:
 
   '@vue/language-core@2.2.0(typescript@5.9.2)':
     dependencies:
-      '@volar/language-core': 2.4.22
+      '@volar/language-core': 2.4.23
       '@vue/compiler-dom': 3.5.18
       '@vue/compiler-vue2': 2.7.16
       '@vue/shared': 3.5.18
@@ -8771,17 +8771,17 @@ snapshots:
 
   browserslist@4.21.5:
     dependencies:
-      caniuse-lite: 1.0.30001733
+      caniuse-lite: 1.0.30001734
       electron-to-chromium: 1.5.199
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.21.5)
 
-  browserslist@4.25.1:
+  browserslist@4.25.2:
     dependencies:
-      caniuse-lite: 1.0.30001733
+      caniuse-lite: 1.0.30001734
       electron-to-chromium: 1.5.199
       node-releases: 2.0.19
-      update-browserslist-db: 1.1.3(browserslist@4.25.1)
+      update-browserslist-db: 1.1.3(browserslist@4.25.2)
 
   buffer-from@1.1.2: {}
 
@@ -8806,7 +8806,7 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  caniuse-lite@1.0.30001733: {}
+  caniuse-lite@1.0.30001734: {}
 
   ccount@2.0.1: {}
 
@@ -8893,7 +8893,7 @@ snapshots:
 
   core-js-compat@3.45.0:
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.25.2
 
   core-js@3.45.0: {}
 
@@ -9211,44 +9211,44 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-prettier@10.1.8(eslint@9.32.0(jiti@2.5.1)):
+  eslint-config-prettier@10.1.8(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
 
-  eslint-plugin-devup@2.0.5(@types/eslint@9.6.1)(@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2):
+  eslint-plugin-devup@2.0.5(@types/eslint@9.6.1)(@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2):
     dependencies:
-      '@eslint/js': 9.32.0
-      '@tanstack/eslint-plugin-query': 5.83.1(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
-      eslint: 9.32.0(jiti@2.5.1)
-      eslint-config-prettier: 10.1.8(eslint@9.32.0(jiti@2.5.1))
-      eslint-plugin-prettier: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.32.0(jiti@2.5.1)))(eslint@9.32.0(jiti@2.5.1))(prettier@3.6.2)
-      eslint-plugin-react: 7.37.5(eslint@9.32.0(jiti@2.5.1))
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.32.0(jiti@2.5.1))
-      eslint-plugin-simple-import-sort: 12.1.1(eslint@9.32.0(jiti@2.5.1))
-      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))
+      '@eslint/js': 9.33.0
+      '@tanstack/eslint-plugin-query': 5.83.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.33.0(jiti@2.5.1)
+      eslint-config-prettier: 10.1.8(eslint@9.33.0(jiti@2.5.1))
+      eslint-plugin-prettier: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.33.0(jiti@2.5.1)))(eslint@9.33.0(jiti@2.5.1))(prettier@3.6.2)
+      eslint-plugin-react: 7.37.5(eslint@9.33.0(jiti@2.5.1))
+      eslint-plugin-react-hooks: 5.2.0(eslint@9.33.0(jiti@2.5.1))
+      eslint-plugin-simple-import-sort: 12.1.1(eslint@9.33.0(jiti@2.5.1))
+      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))
       prettier: 3.6.2
-      typescript-eslint: 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      typescript-eslint: 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
     transitivePeerDependencies:
       - '@types/eslint'
       - '@typescript-eslint/eslint-plugin'
       - supports-color
       - typescript
 
-  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.32.0(jiti@2.5.1)))(eslint@9.32.0(jiti@2.5.1))(prettier@3.6.2):
+  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.33.0(jiti@2.5.1)))(eslint@9.33.0(jiti@2.5.1))(prettier@3.6.2):
     dependencies:
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
       prettier: 3.6.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.11
     optionalDependencies:
       '@types/eslint': 9.6.1
-      eslint-config-prettier: 10.1.8(eslint@9.32.0(jiti@2.5.1))
+      eslint-config-prettier: 10.1.8(eslint@9.33.0(jiti@2.5.1))
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.32.0(jiti@2.5.1)):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
 
-  eslint-plugin-react@7.37.5(eslint@9.32.0(jiti@2.5.1)):
+  eslint-plugin-react@7.37.5(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
       array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
@@ -9256,7 +9256,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.2.1
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -9270,24 +9270,24 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-simple-import-sort@12.1.1(eslint@9.32.0(jiti@2.5.1)):
+  eslint-plugin-simple-import-sort@12.1.1(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
 
-  eslint-plugin-storybook@9.1.1(eslint@9.32.0(jiti@2.5.1))(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2):
+  eslint-plugin-storybook@9.1.1(eslint@9.33.0(jiti@2.5.1))(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)))(typescript@5.9.2):
     dependencies:
-      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
-      eslint: 9.32.0(jiti@2.5.1)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      '@typescript-eslint/utils': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.33.0(jiti@2.5.1)
+      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1)):
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
-      eslint: 9.32.0(jiti@2.5.1)
+      eslint: 9.33.0(jiti@2.5.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/eslint-plugin': 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
 
   eslint-scope@5.1.1:
     dependencies:
@@ -9303,15 +9303,15 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.32.0(jiti@2.5.1):
+  eslint@9.33.0(jiti@2.5.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.5.1))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.33.0(jiti@2.5.1))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.21.0
       '@eslint/config-helpers': 0.3.1
       '@eslint/core': 0.15.2
       '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.32.0
+      '@eslint/js': 9.33.0
       '@eslint/plugin-kit': 0.3.5
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
@@ -9404,7 +9404,7 @@ snapshots:
 
   eval@0.1.8:
     dependencies:
-      '@types/node': 24.2.0
+      '@types/node': 24.2.1
       require-like: 0.1.2
 
   events@3.3.0: {}
@@ -9621,7 +9621,7 @@ snapshots:
 
   happy-dom@18.0.1:
     dependencies:
-      '@types/node': 20.19.9
+      '@types/node': 20.19.10
       '@types/whatwg-mimetype': 3.0.2
       whatwg-mimetype: 3.0.0
 
@@ -9943,7 +9943,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 24.2.0
+      '@types/node': 24.2.1
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -10579,7 +10579,7 @@ snapshots:
     dependencies:
       '@next/env': 15.4.6
       '@swc/helpers': 0.5.15
-      caniuse-lite: 1.0.30001733
+      caniuse-lite: 1.0.30001734
       postcss: 8.4.31
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
@@ -11306,13 +11306,13 @@ snapshots:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)):
+  storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)):
     dependencies:
       '@storybook/global': 5.0.0
       '@testing-library/jest-dom': 6.6.4
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       '@vitest/spy': 3.2.4
       better-opn: 3.0.2
       esbuild: 0.25.8
@@ -11561,13 +11561,13 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typescript-eslint@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2):
+  typescript-eslint@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/eslint-plugin': 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
       '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
-      eslint: 9.32.0(jiti@2.5.1)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.33.0(jiti@2.5.1)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
@@ -11654,9 +11654,9 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
-  update-browserslist-db@1.1.3(browserslist@4.25.1):
+  update-browserslist-db@1.1.3(browserslist@4.25.2):
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.25.2
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -11676,13 +11676,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-node@3.2.4(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1):
+  vite-node@3.2.4(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+      vite: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -11697,11 +11697,11 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-dts@4.5.4(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)):
+  vite-plugin-dts@4.5.4(@types/node@24.2.1)(rollup@4.46.2)(typescript@5.9.2)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)):
     dependencies:
-      '@microsoft/api-extractor': 7.52.10(@types/node@24.2.0)
+      '@microsoft/api-extractor': 7.52.10(@types/node@24.2.1)
       '@rollup/pluginutils': 5.2.0(rollup@4.46.2)
-      '@volar/typescript': 2.4.22
+      '@volar/typescript': 2.4.23
       '@vue/language-core': 2.2.0(typescript@5.9.2)
       compare-versions: 6.1.1
       debug: 4.4.1
@@ -11710,13 +11710,13 @@ snapshots:
       magic-string: 0.30.17
       typescript: 5.9.2
     optionalDependencies:
-      vite: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+      vite: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1):
+  vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1):
     dependencies:
       esbuild: 0.25.8
       fdir: 6.4.6(picomatch@4.0.3)
@@ -11725,16 +11725,16 @@ snapshots:
       rollup: 4.46.2
       tinyglobby: 0.2.14
     optionalDependencies:
-      '@types/node': 24.2.0
+      '@types/node': 24.2.1
       fsevents: 2.3.3
       jiti: 2.5.1
       terser: 5.43.1
 
-  vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.2.0)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1):
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.2.1)(happy-dom@18.0.1)(jiti@2.5.1)(terser@5.43.1):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1))
+      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -11752,12 +11752,12 @@ snapshots:
       tinyglobby: 0.2.14
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
-      vite-node: 3.2.4(@types/node@24.2.0)(jiti@2.5.1)(terser@5.43.1)
+      vite: 6.3.5(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
+      vite-node: 3.2.4(@types/node@24.2.1)(jiti@2.5.1)(terser@5.43.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12
-      '@types/node': 24.2.0
+      '@types/node': 24.2.1
       happy-dom: 18.0.1
     transitivePeerDependencies:
       - jiti
@@ -11794,7 +11794,7 @@ snapshots:
       '@webassemblyjs/wasm-parser': 1.14.1
       acorn: 8.15.0
       acorn-import-phases: 1.0.4(acorn@8.15.0)
-      browserslist: 4.25.1
+      browserslist: 4.25.2
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.18.3
       es-module-lexer: 1.7.0

From 869e0cbf4fb143b5a255bb7fa545d96d75c9c992 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 11 Aug 2025 19:21:52 +0900
Subject: [PATCH 22/28] Fix color var key

- Remove white css var
---
 packages/components/src/components/Select/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 65497565..b963583a 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -49,7 +49,7 @@ interface SelectProps extends ComponentProps<'div'> {
   colors?: {
     primary?: string
     border?: string
-    inputBg?: string
+    inputBackground?: string
     base10?: string
     title?: string
     selectDisabled?: string
@@ -135,7 +135,7 @@ export function Select({
         styleVars={{
           primary: colors?.primary,
           border: colors?.border,
-          inputBg: colors?.inputBg,
+          inputBackground: colors?.inputBackground,
           base10: colors?.base10,
           title: colors?.title,
           selectDisabled: colors?.selectDisabled,
@@ -238,7 +238,7 @@ export function SelectContainer({
               w: 'fit-content',
               px: '30px',
               py: '10px',
-              color: 'var(--white, light-dark(#FFF,#FFF))',
+              color: '#FFF',
               typography: 'buttonS',
             })}
             onClick={() => setOpen(false)}

From 437fd7f8d89b0beaee6a118e16573240b9c4a349 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 11 Aug 2025 19:23:33 +0900
Subject: [PATCH 23/28] Add test case for clicking confirm button

---
 .../src/components/Select/Default.tsx         |  51 -------
 .../src/components/Select/Select.stories.tsx  |  44 +++++-
 .../Select/__tests__/index.browser.test.tsx   | 137 ++++++++++++++----
 3 files changed, 153 insertions(+), 79 deletions(-)
 delete mode 100644 packages/components/src/components/Select/Default.tsx

diff --git a/packages/components/src/components/Select/Default.tsx b/packages/components/src/components/Select/Default.tsx
deleted file mode 100644
index e4867358..00000000
--- a/packages/components/src/components/Select/Default.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { css, Flex } from '@devup-ui/react'
-import { ComponentProps } from 'react'
-
-import {
-  Select,
-  SelectContainer,
-  SelectDivider,
-  SelectOption,
-  SelectTrigger,
-} from '.'
-import { IconArrow } from './IconArrow'
-
-export function Default({
-  ...props
-}: Omit<ComponentProps<typeof Select>, 'children'>) {
-  return (
-    <Select {...props}>
-      <SelectTrigger>Select</SelectTrigger>
-      <SelectContainer>
-        <SelectOption disabled value="Option 1">
-          Option 1
-        </SelectOption>
-        <SelectOption value="Option 2">Option 2</SelectOption>
-        <SelectDivider />
-        <SelectOption value="Option 3">Option 3</SelectOption>
-        <SelectOption disabled value="Option 4">
-          Option 4
-        </SelectOption>
-        <Select type="radio">
-          <SelectTrigger asChild>
-            <SelectOption>
-              <Flex alignItems="center" justifyContent="space-between" w="100%">
-                Option 5<IconArrow />
-              </Flex>
-            </SelectOption>
-          </SelectTrigger>
-          <SelectContainer
-            className={css({
-              right: '0',
-              top: '0',
-              transform: 'translateX(100%)',
-            })}
-          >
-            <SelectOption value="Option 6">Option 6</SelectOption>
-            <SelectOption value="Option 7">Option 7</SelectOption>
-          </SelectContainer>
-        </Select>
-      </SelectContainer>
-    </Select>
-  )
-}
diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index aa679d3a..94ffbe26 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -1,6 +1,6 @@
 import { css, Flex } from '@devup-ui/react'
 import { Meta, StoryObj } from '@storybook/react-vite'
-import { useState } from 'react'
+import { ComponentProps, useState } from 'react'
 
 import {
   Select,
@@ -9,7 +9,6 @@ import {
   SelectOption,
   SelectTrigger,
 } from '.'
-import { Default as DefaultComponent } from './Default'
 import { IconArrow } from './IconArrow'
 
 export type Story = StoryObj<typeof meta>
@@ -29,7 +28,6 @@ const meta: Meta<typeof Select> = {
 
 export const DefaultStory: Story = {
   args: {
-    type: 'default',
     colors: {},
   },
   render: (args) => <DefaultComponent {...args} />,
@@ -47,6 +45,46 @@ export const ControlledCheckboxStory: Story = {
 
 export default meta
 
+export function DefaultComponent({
+  ...props
+}: Omit<ComponentProps<typeof Select>, 'children'>) {
+  return (
+    <Select {...props}>
+      <SelectTrigger>Select</SelectTrigger>
+      <SelectContainer>
+        <SelectOption disabled value="Option 1">
+          Option 1
+        </SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
+        <SelectDivider />
+        <SelectOption value="Option 3">Option 3</SelectOption>
+        <SelectOption disabled value="Option 4">
+          Option 4
+        </SelectOption>
+        <Select type="radio">
+          <SelectTrigger asChild>
+            <SelectOption>
+              <Flex alignItems="center" justifyContent="space-between" w="100%">
+                Option 5<IconArrow />
+              </Flex>
+            </SelectOption>
+          </SelectTrigger>
+          <SelectContainer
+            className={css({
+              right: '0',
+              top: '0',
+              transform: 'translateX(100%)',
+            })}
+          >
+            <SelectOption value="Option 6">Option 6</SelectOption>
+            <SelectOption value="Option 7">Option 7</SelectOption>
+          </SelectContainer>
+        </Select>
+      </SelectContainer>
+    </Select>
+  )
+}
+
 function ControlledCheckbox() {
   const [value, setValue] = useState<string[]>([])
   const handleChange = (nextValue: string) => {
diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
index 55e295fb..341cfd49 100644
--- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
@@ -1,5 +1,5 @@
+import { css, Flex } from '@devup-ui/react'
 import { fireEvent, render } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
 
 import {
@@ -8,9 +8,45 @@ import {
   SelectDivider,
   SelectOption,
   SelectTrigger,
-  useSelect,
 } from '..'
-import { Default } from '../Default'
+import { IconArrow } from '../IconArrow'
+import { DefaultComponent } from '../Select.stories'
+
+const children = (
+  <>
+    <SelectTrigger>Select</SelectTrigger>
+    <SelectContainer>
+      <SelectOption disabled value="Option 1">
+        Option 1
+      </SelectOption>
+      <SelectOption value="Option 2">Option 2</SelectOption>
+      <SelectDivider />
+      <SelectOption value="Option 3">Option 3</SelectOption>
+      <SelectOption disabled value="Option 4">
+        Option 4
+      </SelectOption>
+      <Select type="radio">
+        <SelectTrigger asChild>
+          <SelectOption>
+            <Flex alignItems="center" justifyContent="space-between" w="100%">
+              Option 5<IconArrow />
+            </Flex>
+          </SelectOption>
+        </SelectTrigger>
+        <SelectContainer
+          className={css({
+            right: '0',
+            top: '0',
+            transform: 'translateX(100%)',
+          })}
+        >
+          <SelectOption value="Option 6">Option 6</SelectOption>
+          <SelectOption value="Option 7">Option 7</SelectOption>
+        </SelectContainer>
+      </Select>
+    </SelectContainer>
+  </>
+)
 
 describe('Select', () => {
   afterEach(() => {
@@ -18,7 +54,7 @@ describe('Select', () => {
   })
 
   it('should render', () => {
-    const { container } = render(<Default />)
+    const { container } = render(<Select>{children}</Select>)
     expect(container).toMatchSnapshot()
   })
 
@@ -31,7 +67,7 @@ describe('Select', () => {
   it('should close select when clicking outside', () => {
     const { container } = render(
       <div data-testid="container">
-        <Default />
+        <DefaultComponent />
       </div>,
     )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
@@ -47,7 +83,9 @@ describe('Select', () => {
   it('should call onOpenChange function when it is provided', () => {
     const onOpenChange = vi.fn()
     const { container } = render(
-      <Default onOpenChange={onOpenChange} type="radio" />,
+      <Select onOpenChange={onOpenChange} type="radio">
+        {children}
+      </Select>,
     )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
@@ -57,7 +95,9 @@ describe('Select', () => {
   it('should call onValueChange function when it is provided', () => {
     const onValueChange = vi.fn()
     const { container } = render(
-      <Default onValueChange={onValueChange} type="radio" />,
+      <Select onValueChange={onValueChange} type="radio">
+        {children}
+      </Select>,
     )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
@@ -68,7 +108,7 @@ describe('Select', () => {
   })
 
   it('should do nothing when onValueChange is not provided and type is default', () => {
-    const { container } = render(<Default type="default" />)
+    const { container } = render(<Select type="default">{children}</Select>)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -80,7 +120,7 @@ describe('Select', () => {
   })
 
   it('should select option when type is radio and the option should have a check', () => {
-    const { container } = render(<Default type="radio" />)
+    const { container } = render(<Select type="radio">{children}</Select>)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -92,7 +132,7 @@ describe('Select', () => {
   })
 
   it('should have multiple check marks when type is checkbox and multiple options are selected', () => {
-    const { container } = render(<Default type="checkbox" />)
+    const { container } = render(<Select type="checkbox">{children}</Select>)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -106,7 +146,7 @@ describe('Select', () => {
   })
 
   it('should not have a check mark when type is checkbox and the option is not selected', () => {
-    const { container } = render(<Default type="checkbox" />)
+    const { container } = render(<Select type="checkbox">{children}</Select>)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -141,7 +181,9 @@ describe('Select', () => {
 
   it('should have a check mark when type is radio and defaultValue is provided', () => {
     const { container } = render(
-      <Default defaultValue="Option 2" type="radio" />,
+      <Select defaultValue="Option 2" type="radio">
+        {children}
+      </Select>,
     )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
@@ -151,7 +193,7 @@ describe('Select', () => {
   })
 
   it('should not have a check mark when type is radio and defaultValue is not provided', () => {
-    const { container } = render(<Default type="radio" />)
+    const { container } = render(<Select type="radio">{children}</Select>)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const selectContainer = container.querySelector(
@@ -162,7 +204,7 @@ describe('Select', () => {
   })
 
   it('should have 10px gap in an option when type is checkbox', () => {
-    const { container } = render(<Default type="checkbox" />)
+    const { container } = render(<Select type="checkbox">{children}</Select>)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -170,7 +212,7 @@ describe('Select', () => {
   })
 
   it('should have 6px gap in an option when type is radio', () => {
-    const { container } = render(<Default type="radio" />)
+    const { container } = render(<Select type="radio">{children}</Select>)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -178,7 +220,7 @@ describe('Select', () => {
   })
 
   it('should have 0 gap in an option when type is default', () => {
-    const { container } = render(<Default type="default" />)
+    const { container } = render(<Select type="default">{children}</Select>)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -187,7 +229,7 @@ describe('Select', () => {
 
   it('should have undefined gap when type is not right', () => {
     // @ts-expect-error - test for wrong type
-    const { container } = render(<Default type="no-type" />)
+    const { container } = render(<Select type="no-type">{children}</Select>)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -196,22 +238,24 @@ describe('Select', () => {
 
   it('should add styleVars to the container when colors are provided', () => {
     const { container } = render(
-      <Default
+      <Select
         colors={{
           primary: 'red',
           border: 'blue',
-          inputBg: 'green',
+          inputBackground: 'green',
           base10: 'yellow',
           title: 'purple',
         }}
         data-testid="select"
-      />,
+      >
+        {children}
+      </Select>,
     )
     const select = container.querySelector('[data-testid="select"]')
     expect(select).toHaveStyle({
       '--primary': 'red',
       '--border': 'blue',
-      '--inputBg': 'green',
+      '--inputBackground': 'green',
       '--base10': 'yellow',
       '--title': 'purple',
     })
@@ -239,6 +283,25 @@ describe('Select', () => {
     expect(confirmButton).toBeInTheDocument()
   })
 
+  it('should close select when clicking confirm button', () => {
+    const { container } = render(
+      <Select type="checkbox">
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer showConfirmButton>
+          <SelectOption value="Option 1">Option 1</SelectOption>
+          <SelectOption value="Option 2">Option 2</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const confirmButton = container.querySelector(
+      '[aria-label="Select confirm button"]',
+    )
+    fireEvent.click(confirmButton!)
+    expect(selectToggle).toHaveAttribute('aria-expanded', 'false')
+  })
+
   it('should not show confirm button when type is checkbox and showConfirmButton is false', () => {
     const { container } = render(
       <Select type="checkbox">
@@ -261,9 +324,33 @@ describe('Select', () => {
     expect(confirmButton).not.toBeInTheDocument()
   })
 
-  it('should throw error when useSelect is used outside of Select context', () => {
-    expect(() => {
-      useSelect()
-    }).toThrow()
+  it('should render IconCheck when type is checkbox and the option is selected', () => {
+    const { container } = render(
+      <Select defaultValue={['Option 2']} type="checkbox">
+        {children}
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2?.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should not check the option when type is checkbox and the option is not selected', () => {
+    const { container } = render(
+      <Select defaultOpen type="checkbox">
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer showConfirmButton={false}>
+          <SelectOption disabled value="Option 1">
+            Option 1
+          </SelectOption>
+          <SelectDivider />
+          <SelectOption value="Option 2">Option 2</SelectOption>
+          <SelectOption value="Option 3">Option 3</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    const svg = container.querySelector('svg')
+    expect(svg).not.toBeInTheDocument()
   })
 })

From 5c9b4cd6a0e75b4c179a9da968df12a44330ae80 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 11 Aug 2025 19:59:53 +0900
Subject: [PATCH 24/28] Remove DefaultComponent in test

---
 .../components/src/components/Select/Select.stories.tsx   | 8 ++++----
 .../components/Select/__tests__/index.browser.test.tsx    | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index 94ffbe26..7f6e0064 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -45,11 +45,11 @@ export const ControlledCheckboxStory: Story = {
 
 export default meta
 
-export function DefaultComponent({
-  ...props
-}: Omit<ComponentProps<typeof Select>, 'children'>) {
+function DefaultComponent(
+  props: Omit<ComponentProps<typeof Select>, 'children'>,
+) {
   return (
-    <Select {...props}>
+    <Select {...props} onValueChange={() => {}}>
       <SelectTrigger>Select</SelectTrigger>
       <SelectContainer>
         <SelectOption disabled value="Option 1">
diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
index 341cfd49..48b28e19 100644
--- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
@@ -10,7 +10,6 @@ import {
   SelectTrigger,
 } from '..'
 import { IconArrow } from '../IconArrow'
-import { DefaultComponent } from '../Select.stories'
 
 const children = (
   <>
@@ -67,7 +66,7 @@ describe('Select', () => {
   it('should close select when clicking outside', () => {
     const { container } = render(
       <div data-testid="container">
-        <DefaultComponent />
+        <Select>{children}</Select>
       </div>,
     )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')

From 82feda0644e1a145bbd5c421e015f6f2f03078c7 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 11 Aug 2025 20:09:23 +0900
Subject: [PATCH 25/28] Fix event handler logic in Select

---
 packages/components/src/components/Select/index.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index b963583a..0390aaa3 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -87,18 +87,12 @@ export function Select({
   }, [open, setOpen])
 
   const handleOpenChange = (open: boolean) => {
-    if (onOpenChange) {
-      onOpenChange(open)
-      return
-    }
+    onOpenChange?.(open)
     setOpen(open)
   }
 
   const handleValueChange = (nextValue: string) => {
-    if (onValueChange) {
-      onValueChange(nextValue)
-      return
-    }
+    onValueChange?.(nextValue)
 
     if (type === 'default') return
     if (type === 'radio') {

From 247f40af6732f1eff3f481c080828d8ca9343189 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 11 Aug 2025 20:24:40 +0900
Subject: [PATCH 26/28] Run changeset

---
 .changeset/metal-socks-walk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/metal-socks-walk.md

diff --git a/.changeset/metal-socks-walk.md b/.changeset/metal-socks-walk.md
new file mode 100644
index 00000000..a994bc93
--- /dev/null
+++ b/.changeset/metal-socks-walk.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Add Select component

From 94e3a5cda3e8cdb09514717ec70eb12c1dabafe5 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 12 Aug 2025 09:22:27 +0900
Subject: [PATCH 27/28] Fix snapshot

---
 .../__snapshots__/index.browser.test.tsx.snap | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
index bc359719..69300a8e 100644
--- a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Controlled Input > should render with value 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -17,7 +17,7 @@ exports[`Controlled Input > should render with value 1`] = `
 exports[`Input > should have typography when typography is provided 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -31,7 +31,7 @@ exports[`Input > should have typography when typography is provided 1`] = `
 exports[`Input > should not have padding right when allowClear is false 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -45,7 +45,7 @@ exports[`Input > should not have padding right when allowClear is false 1`] = `
 exports[`Input > should not show clear button when value is empty 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -59,7 +59,7 @@ exports[`Input > should not show clear button when value is empty 1`] = `
 exports[`Input > should pass className prop to error message component 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -79,7 +79,7 @@ exports[`Input > should pass className prop to error message component 1`] = `
 exports[`Input > should pass className prop to icon component 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <div
       aria-label="icon"
@@ -144,7 +144,7 @@ exports[`Input > should pass props to ClearButton component 1`] = `
 exports[`Input > should render disabled icon style when disabled is true 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <div
       aria-label="icon"
@@ -178,7 +178,7 @@ exports[`Input > should render disabled icon style when disabled is true 1`] = `
 exports[`Input > should render error style when error is true 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -192,7 +192,7 @@ exports[`Input > should render error style when error is true 1`] = `
 exports[`Input > should render with allowClear prop 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -206,7 +206,7 @@ exports[`Input > should render with allowClear prop 1`] = `
 exports[`Input > should render with default props 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -220,7 +220,7 @@ exports[`Input > should render with default props 1`] = `
 exports[`Input > should render with disabled prop 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"
@@ -235,7 +235,7 @@ exports[`Input > should render with disabled prop 1`] = `
 exports[`Input > should show clear button when value is not empty 1`] = `
 <div>
   <div
-    class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
   >
     <input
       aria-label="input"

From ef60babfb675c2ceca9414bf5449d1dbcadf2346 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 12 Aug 2025 09:22:50 +0900
Subject: [PATCH 28/28] Fix Stepper

---
 packages/components/src/components/Stepper/index.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/components/src/components/Stepper/index.tsx b/packages/components/src/components/Stepper/index.tsx
index f7f427bf..bcfb81d7 100644
--- a/packages/components/src/components/Stepper/index.tsx
+++ b/packages/components/src/components/Stepper/index.tsx
@@ -77,9 +77,6 @@ function StepperDecreaseButton({ ...props }: ComponentProps<typeof Button>) {
         p: '0',
         boxSize: '28px',
         borderRadius: '4px',
-        selectors: {
-          '&>div>div': {},
-        },
       })}
       disabled={disabled}
       onClick={() => setValue(value - 1)}