From 50c182d3d3944a2f1c06d1408033f75f9e7d7833 Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 19 Oct 2025 16:43:52 +0900
Subject: [PATCH 01/10] Enhance components Checkbox

---
 .../src/components/Checkbox/index.tsx         | 75 ++++++++++++++-----
 1 file changed, 55 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/components/Checkbox/index.tsx b/packages/components/src/components/Checkbox/index.tsx
index 1359438b..aea68d0f 100644
--- a/packages/components/src/components/Checkbox/index.tsx
+++ b/packages/components/src/components/Checkbox/index.tsx
@@ -1,5 +1,7 @@
+'use client'
+
 import { Box, css, Flex, Input, Text } from '@devup-ui/react'
-import { ComponentProps, useId } from 'react'
+import { ComponentProps, useId, useState } from 'react'
 
 import { CheckIcon } from './CheckIcon'
 
@@ -20,14 +22,39 @@ export function Checkbox({
   children,
   disabled,
   checked,
+  defaultChecked = false,
   colors,
   onChange,
   ...props
 }: CheckboxProps) {
   const generateId = useId()
+  const [innerChecked, setInnerChecked] = useState(defaultChecked)
+  const isChecked = checked ?? innerChecked
+
+  const handleChange = (value: boolean) => {
+    setInnerChecked(value)
+    onChange?.(value)
+  }
+
   return (
-    <Flex alignItems="center" gap="8px">
-      <Box h="18px" pos="relative" w="fit-content">
+    <Flex
+      className={css({
+        alignItems: 'center',
+        gap: '8px',
+      })}
+    >
+      <label
+        className={css({
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '16px',
+          height: '16px',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+        })}
+        htmlFor={generateId}
+      >
         <Input
           _active={
             !disabled && {
@@ -35,7 +62,7 @@ export function Checkbox({
             }
           }
           _checked={{
-            bg: 'light-dark(var(--primary, #6159D4), var(--primary, #6670F9))',
+            bg: 'var(--primary, light-dark(#6159D4, #6670F9))',
             border: 'none',
             _hover: !disabled && {
               bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))',
@@ -50,25 +77,32 @@ export function Checkbox({
           _hover={
             !disabled && {
               bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))',
-              border:
-                '1px solid light-dark(var(--primary, #6159D4), var(--primary, #6670F9))',
+              border: '1px solid var(--primary, light-dark(#6159D4, #6670F9))',
             }
           }
-          accentColor="light-dark(var(--primary, #6159D4), var(--primary, #6670F9))"
+          accentColor="var(--primary, light-dark(#6159D4, #6670F9))"
           appearance="none"
-          bg="light-dark(#FFF, var(--inputBg, #2E2E2E))"
-          border="1px solid light-dark(var(--border, #E0E0E0), var(--border, #333333))"
+          bg="var(--inputBg, light-dark(#FFF, #2E2E2E))"
+          border="1px solid var(--border, light-dark(#E0E0E0, #333333))"
           borderRadius="2px"
-          boxSize="16px"
           checked={checked}
+          className={css({
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            opacity: 1,
+            zIndex: 0,
+            pointerEvents: 'none',
+          })}
           cursor={disabled ? 'not-allowed' : 'pointer'}
           disabled={disabled}
+          display="block"
           id={generateId}
           m="0"
           onChange={
-            disabled || !onChange
-              ? undefined
-              : (e) => onChange(e.target.checked)
+            disabled ? undefined : (e) => handleChange(e.target.checked)
           }
           styleOrder={1}
           styleVars={{
@@ -81,7 +115,7 @@ export function Checkbox({
           type="checkbox"
           {...props}
         />
-        {checked && (
+        {isChecked && (
           <Box
             as={CheckIcon}
             props={{
@@ -89,16 +123,17 @@ export function Checkbox({
                 ? 'light-dark(#D6D7DE, #373737)'
                 : 'var(--checkIcon, #FFF)',
               className: css({
-                left: '50%',
                 pointerEvents: 'none',
-                pos: 'absolute',
-                top: '60%',
-                transform: 'translate(-50%, -50%)',
+                opacity: 1,
+                zIndex: 1,
               }),
             }}
+            styleVars={{
+              checkIcon: colors?.checkIcon,
+            }}
           />
         )}
-      </Box>
+      </label>
 
       <label
         className={css({
@@ -111,7 +146,7 @@ export function Checkbox({
             color={
               disabled
                 ? 'light-dark(#D6D7DE, #373737)'
-                : 'light-dark(var(--text, #2F2F2F), var(--text, #EDEDED))'
+                : 'var(--text, light-dark(#2F2F2F, #EDEDED))'
             }
             fontSize="14px"
             userSelect="none"

From ffde0ed0948e226524810d03c3e62baf496fd773 Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 19 Oct 2025 17:11:24 +0900
Subject: [PATCH 02/10] Update Checkbox component text styles

---
 packages/components/src/components/Checkbox/index.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/Checkbox/index.tsx b/packages/components/src/components/Checkbox/index.tsx
index aea68d0f..ff20fefb 100644
--- a/packages/components/src/components/Checkbox/index.tsx
+++ b/packages/components/src/components/Checkbox/index.tsx
@@ -108,9 +108,7 @@ export function Checkbox({
           styleVars={{
             primary: colors?.primary,
             border: colors?.border,
-            text: colors?.text,
             inputBg: colors?.inputBg,
-            checkIcon: colors?.checkIcon,
           }}
           type="checkbox"
           {...props}
@@ -120,7 +118,7 @@ export function Checkbox({
             as={CheckIcon}
             props={{
               color: disabled
-                ? 'light-dark(#D6D7DE, #373737)'
+                ? 'light-dark(#D6D7DE, #47474A)'
                 : 'var(--checkIcon, #FFF)',
               className: css({
                 pointerEvents: 'none',
@@ -145,10 +143,13 @@ export function Checkbox({
           <Text
             color={
               disabled
-                ? 'light-dark(#D6D7DE, #373737)'
+                ? 'light-dark(#D6D7DE, #6F6E6E)'
                 : 'var(--text, light-dark(#2F2F2F, #EDEDED))'
             }
             fontSize="14px"
+            styleVars={{
+              text: colors?.text,
+            }}
             userSelect="none"
           >
             {children}

From bdd5c397c40d9e7f804c09c714677e4c1ab71171 Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 19 Oct 2025 21:20:34 +0900
Subject: [PATCH 03/10] Fix Checkbox component test docs and snapshot

---
 .../__snapshots__/index.browser.test.tsx.snap | 98 +++++++++++--------
 .../Checkbox/__tests__/index.browser.test.tsx | 10 +-
 2 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
index aee68a05..4b70566e 100644
--- a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -5,21 +5,22 @@ exports[`Checkbox > should render basic checkbox 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_0_"
     >
       <input
         class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
         id="_r_0_"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_0_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
       >
         Test Checkbox
       </span>
@@ -33,15 +34,16 @@ exports[`Checkbox > should render checkbox with custom child 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_4_"
     >
       <input
         class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
         id="_r_4_"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_4_"
@@ -59,8 +61,9 @@ exports[`Checkbox > should render checked checkbox 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_1_"
     >
       <input
         checked=""
@@ -69,7 +72,7 @@ exports[`Checkbox > should render checked checkbox 1`] = `
         type="checkbox"
       />
       <svg
-        class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255"
+        class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255"
         height="10"
         viewBox="0 0 12 10"
         width="12"
@@ -82,13 +85,13 @@ exports[`Checkbox > should render checked checkbox 1`] = `
           fill-rule="evenodd"
         />
       </svg>
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_1_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
       >
         Test Checkbox
       </span>
@@ -102,8 +105,9 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_j_"
     >
       <input
         checked=""
@@ -113,8 +117,9 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
         type="checkbox"
       />
       <svg
-        class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255"
+        class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255"
         height="10"
+        style="--checkIcon: #000000;"
         viewBox="0 0 12 10"
         width="12"
         xmlns="http://www.w3.org/2000/svg"
@@ -126,13 +131,14 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
           fill-rule="evenodd"
         />
       </svg>
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_j_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
+        style="--text: #0000ff;"
       >
         Test Checkbox
       </span>
@@ -146,18 +152,19 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
+      for="_r_3_"
     >
       <input
         checked=""
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1    cursor-0-not-allowed--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
         id="_r_3_"
         type="checkbox"
       />
       <svg
-        class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255"
+        class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255"
         height="10"
         viewBox="0 0 12 10"
         width="12"
@@ -166,17 +173,17 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
         <path
           clip-rule="evenodd"
           d="M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z"
-          fill="light-dark(#D6D7DE, #373737)"
+          fill="light-dark(#D6D7DE, #47474A)"
           fill-rule="evenodd"
         />
       </svg>
-    </div>
+    </label>
     <label
       class="cursor-0-not-allowed--255"
       for="_r_3_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
       >
         Test Checkbox
       </span>
@@ -190,22 +197,23 @@ exports[`Checkbox > should render disabled checkbox 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
+      for="_r_2_"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1    cursor-0-not-allowed--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
         id="_r_2_"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-not-allowed--255"
       for="_r_2_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
       >
         Test Checkbox
       </span>
@@ -219,23 +227,25 @@ exports[`Checkbox > should render disabled checkbox with custom colors 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
+      for="_r_k_"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1    cursor-0-not-allowed--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
         id="_r_k_"
         style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00; --checkIcon: #000000;"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-not-allowed--255"
       for="_r_k_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
+        style="--text: #0000ff;"
       >
         Test Checkbox
       </span>
@@ -249,8 +259,9 @@ exports[`Checkbox > should render with custom colors 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_h_"
     >
       <input
         class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
@@ -258,13 +269,14 @@ exports[`Checkbox > should render with custom colors 1`] = `
         style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00;"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_h_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
+        style="--text: #0000ff;"
       >
         Test Checkbox
       </span>
@@ -278,8 +290,9 @@ exports[`Checkbox > should render with partial custom colors 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_i_"
     >
       <input
         class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
@@ -287,13 +300,14 @@ exports[`Checkbox > should render with partial custom colors 1`] = `
         style="--primary: #ff0000; --text: #0000ff;"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_i_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
+        style="--text: #0000ff;"
       >
         Test Checkbox
       </span>
diff --git a/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx b/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
index 7f8878c3..03c8dd00 100644
--- a/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
@@ -325,7 +325,7 @@ describe('Checkbox', () => {
       <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
     )
 
-    const input = container.querySelector('input')
+    const input = container.querySelector('span')
     expect(input).toHaveStyle({
       '--text': '#text-custom',
     })
@@ -352,10 +352,12 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox checked colors={customColors}>
+        Test Checkbox
+      </Checkbox>,
     )
 
-    const input = container.querySelector('input')
+    const input = container.querySelector('label svg')
     expect(input).toHaveStyle({
       '--checkIcon': '#checkIcon-custom',
     })
@@ -378,9 +380,7 @@ describe('Checkbox', () => {
     expect(input).toHaveStyle({
       '--primary': '#primary-custom',
       '--border': '#border-custom',
-      '--text': '#text-custom',
       '--inputBg': '#inputBg-custom',
-      '--checkIcon': '#checkIcon-custom',
     })
   })
 

From f929327dd363e925c51bf512ef35c9bf5ff72288 Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 19 Oct 2025 21:21:00 +0900
Subject: [PATCH 04/10] Fix Checkbox component

---
 .../src/components/Checkbox/index.tsx         | 35 +++++++------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/components/Checkbox/index.tsx b/packages/components/src/components/Checkbox/index.tsx
index ff20fefb..6489d4c2 100644
--- a/packages/components/src/components/Checkbox/index.tsx
+++ b/packages/components/src/components/Checkbox/index.tsx
@@ -37,12 +37,7 @@ export function Checkbox({
   }
 
   return (
-    <Flex
-      className={css({
-        alignItems: 'center',
-        gap: '8px',
-      })}
-    >
+    <Flex alignItems="center" gap="8px">
       <label
         className={css({
           position: 'relative',
@@ -85,50 +80,46 @@ export function Checkbox({
           bg="var(--inputBg, light-dark(#FFF, #2E2E2E))"
           border="1px solid var(--border, light-dark(#E0E0E0, #333333))"
           borderRadius="2px"
-          checked={checked}
-          className={css({
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            opacity: 1,
-            zIndex: 0,
-            pointerEvents: 'none',
-          })}
+          checked={isChecked}
           cursor={disabled ? 'not-allowed' : 'pointer'}
           disabled={disabled}
           display="block"
+          height="100%"
           id={generateId}
+          left={0}
           m="0"
           onChange={
             disabled ? undefined : (e) => handleChange(e.target.checked)
           }
+          opacity={1}
+          pointerEvents="none"
+          pos="absolute"
           styleOrder={1}
           styleVars={{
             primary: colors?.primary,
             border: colors?.border,
             inputBg: colors?.inputBg,
           }}
+          top={0}
           type="checkbox"
+          width="100%"
+          zIndex={0}
           {...props}
         />
         {isChecked && (
           <Box
             as={CheckIcon}
+            opacity="1"
+            pointerEvents="none"
             props={{
               color: disabled
                 ? 'light-dark(#D6D7DE, #47474A)'
                 : 'var(--checkIcon, #FFF)',
-              className: css({
-                pointerEvents: 'none',
-                opacity: 1,
-                zIndex: 1,
-              }),
             }}
             styleVars={{
               checkIcon: colors?.checkIcon,
             }}
+            zIndex="1"
           />
         )}
       </label>

From f7308e55b6f096793b72d46aedf2a8605bfd6372 Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 19 Oct 2025 21:27:43 +0900
Subject: [PATCH 05/10] Update Checkbox component inner variable

---
 packages/components/src/components/Checkbox/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/Checkbox/index.tsx b/packages/components/src/components/Checkbox/index.tsx
index 6489d4c2..cef7f98f 100644
--- a/packages/components/src/components/Checkbox/index.tsx
+++ b/packages/components/src/components/Checkbox/index.tsx
@@ -29,7 +29,7 @@ export function Checkbox({
 }: CheckboxProps) {
   const generateId = useId()
   const [innerChecked, setInnerChecked] = useState(defaultChecked)
-  const isChecked = checked ?? innerChecked
+  const finalChecked = checked ?? innerChecked
 
   const handleChange = (value: boolean) => {
     setInnerChecked(value)
@@ -80,7 +80,7 @@ export function Checkbox({
           bg="var(--inputBg, light-dark(#FFF, #2E2E2E))"
           border="1px solid var(--border, light-dark(#E0E0E0, #333333))"
           borderRadius="2px"
-          checked={isChecked}
+          checked={finalChecked}
           cursor={disabled ? 'not-allowed' : 'pointer'}
           disabled={disabled}
           display="block"
@@ -106,7 +106,7 @@ export function Checkbox({
           zIndex={0}
           {...props}
         />
-        {isChecked && (
+        {finalChecked && (
           <Box
             as={CheckIcon}
             opacity="1"

From ea5d9a5ca2f8ff3976029c42b60b7b4df129c5eb Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 19 Oct 2025 23:45:55 +0900
Subject: [PATCH 06/10] Update components packages

- install react-dom 19.1.1
---
 packages/components/package.json | 5 +++--
 pnpm-lock.yaml                   | 7 +++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 5a522b43..61481cea 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -43,8 +43,9 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@devup-ui/react": "workspace:*",
-    "csstype": "^3.1",
-    "react": "^19.2",
+    "csstype": "^3.1.3",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "clsx": "^2.1"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62c48bdf..b8b93ce4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -616,8 +616,11 @@ importers:
         specifier: ^3.1
         version: 3.1.3
       react:
-        specifier: ^19.2
-        version: 19.2.0
+        specifier: ^19.1.1
+        version: 19.1.1
+      react-dom:
+        specifier: ^19.1.1
+        version: 19.1.1(react@19.1.1)
     devDependencies:
       '@devup-ui/vite-plugin':
         specifier: workspace:*

From 34e84648402d21da32a1e81372690b114a8d6e1d Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 19 Oct 2025 23:46:28 +0900
Subject: [PATCH 07/10] Update Checkbox component test snapshot

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

diff --git a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
index 4b70566e..21140fa1 100644
--- a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -7,17 +7,17 @@ exports[`Checkbox > should render basic checkbox 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="_r_0_"
+      for="«r0»"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="_r_0_"
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        id="«r0»"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="_r_0_"
+      for="«r0»"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
@@ -36,17 +36,17 @@ exports[`Checkbox > should render checkbox with custom child 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="_r_4_"
+      for="«r4»"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="_r_4_"
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        id="«r4»"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="_r_4_"
+      for="«r4»"
     >
       <div>
         Custom Child
@@ -63,12 +63,12 @@ exports[`Checkbox > should render checked checkbox 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="_r_1_"
+      for="«r1»"
     >
       <input
         checked=""
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="_r_1_"
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        id="«r1»"
         type="checkbox"
       />
       <svg
@@ -88,7 +88,7 @@ exports[`Checkbox > should render checked checkbox 1`] = `
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="_r_1_"
+      for="«r1»"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
@@ -107,13 +107,13 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="_r_j_"
+      for="«rj»"
     >
       <input
         checked=""
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="_r_j_"
-        style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00; --checkIcon: #000000;"
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        id="«rj»"
+        style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;"
         type="checkbox"
       />
       <svg
@@ -134,7 +134,7 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="_r_j_"
+      for="«rj»"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
@@ -154,13 +154,13 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
-      for="_r_3_"
+      for="«r3»"
     >
       <input
         checked=""
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
-        id="_r_3_"
+        id="«r3»"
         type="checkbox"
       />
       <svg
@@ -180,7 +180,7 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
     </label>
     <label
       class="cursor-0-not-allowed--255"
-      for="_r_3_"
+      for="«r3»"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
@@ -199,18 +199,18 @@ exports[`Checkbox > should render disabled checkbox 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
-      for="_r_2_"
+      for="«r2»"
     >
       <input
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
-        id="_r_2_"
+        id="«r2»"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-not-allowed--255"
-      for="_r_2_"
+      for="«r2»"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
@@ -229,19 +229,19 @@ exports[`Checkbox > should render disabled checkbox with custom colors 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
-      for="_r_k_"
+      for="«rk»"
     >
       <input
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
-        id="_r_k_"
-        style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00; --checkIcon: #000000;"
+        id="«rk»"
+        style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-not-allowed--255"
-      for="_r_k_"
+      for="«rk»"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
@@ -261,18 +261,18 @@ exports[`Checkbox > should render with custom colors 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="_r_h_"
+      for="«rh»"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="_r_h_"
-        style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00;"
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        id="«rh»"
+        style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="_r_h_"
+      for="«rh»"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
@@ -292,18 +292,18 @@ exports[`Checkbox > should render with partial custom colors 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="_r_i_"
+      for="«ri»"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="_r_i_"
-        style="--primary: #ff0000; --text: #0000ff;"
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        id="«ri»"
+        style="--primary: #ff0000;"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="_r_i_"
+      for="«ri»"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"

From c445c4f30418144464493a38ac0f6c2579b4ff8d Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 26 Oct 2025 15:11:49 +0900
Subject: [PATCH 08/10] Update changeset docs

---
 .changeset/nine-bees-happen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nine-bees-happen.md

diff --git a/.changeset/nine-bees-happen.md b/.changeset/nine-bees-happen.md
new file mode 100644
index 00000000..aa34f38a
--- /dev/null
+++ b/.changeset/nine-bees-happen.md
@@ -0,0 +1,5 @@
+---
+'@devup-ui/components': patch
+---
+
+Enhance Checkbox component logic

From f3f40a83e11974fe8e3291f9324f4e64ecb03d32 Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 26 Oct 2025 15:12:06 +0900
Subject: [PATCH 09/10] Update pnpm-lock.yaml to upgrade react and react-dom to
 version 19.2.0 and csstype to version 3.1.3

---
 pnpm-lock.yaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8b93ce4..7c0bf275 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -613,14 +613,14 @@ importers:
         specifier: ^2.1
         version: 2.1.1
       csstype:
-        specifier: ^3.1
+        specifier: ^3.1.3
         version: 3.1.3
       react:
         specifier: ^19.1.1
-        version: 19.1.1
+        version: 19.2.0
       react-dom:
         specifier: ^19.1.1
-        version: 19.1.1(react@19.1.1)
+        version: 19.2.0(react@19.2.0)
     devDependencies:
       '@devup-ui/vite-plugin':
         specifier: workspace:*

From 73b44b6dfc6ccb2d9e1a408f5fa89e5d8222cb5c Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Sun, 26 Oct 2025 15:16:42 +0900
Subject: [PATCH 10/10] Update Checkbox component test snapshots

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

diff --git a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
index 21140fa1..2537dc45 100644
--- a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -7,17 +7,17 @@ exports[`Checkbox > should render basic checkbox 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="«r0»"
+      for="_r_0_"
     >
       <input
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="«r0»"
+        id="_r_0_"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="«r0»"
+      for="_r_0_"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
@@ -36,17 +36,17 @@ exports[`Checkbox > should render checkbox with custom child 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="«r4»"
+      for="_r_4_"
     >
       <input
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="«r4»"
+        id="_r_4_"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="«r4»"
+      for="_r_4_"
     >
       <div>
         Custom Child
@@ -63,12 +63,12 @@ exports[`Checkbox > should render checked checkbox 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="«r1»"
+      for="_r_1_"
     >
       <input
         checked=""
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="«r1»"
+        id="_r_1_"
         type="checkbox"
       />
       <svg
@@ -88,7 +88,7 @@ exports[`Checkbox > should render checked checkbox 1`] = `
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="«r1»"
+      for="_r_1_"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
@@ -107,12 +107,12 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="«rj»"
+      for="_r_j_"
     >
       <input
         checked=""
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="«rj»"
+        id="_r_j_"
         style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;"
         type="checkbox"
       />
@@ -134,7 +134,7 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="«rj»"
+      for="_r_j_"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
@@ -154,13 +154,13 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
-      for="«r3»"
+      for="_r_3_"
     >
       <input
         checked=""
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
-        id="«r3»"
+        id="_r_3_"
         type="checkbox"
       />
       <svg
@@ -180,7 +180,7 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
     </label>
     <label
       class="cursor-0-not-allowed--255"
-      for="«r3»"
+      for="_r_3_"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
@@ -199,18 +199,18 @@ exports[`Checkbox > should render disabled checkbox 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
-      for="«r2»"
+      for="_r_2_"
     >
       <input
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
-        id="«r2»"
+        id="_r_2_"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-not-allowed--255"
-      for="«r2»"
+      for="_r_2_"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
@@ -229,19 +229,19 @@ exports[`Checkbox > should render disabled checkbox with custom colors 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
-      for="«rk»"
+      for="_r_k_"
     >
       <input
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
-        id="«rk»"
+        id="_r_k_"
         style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-not-allowed--255"
-      for="«rk»"
+      for="_r_k_"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
@@ -261,18 +261,18 @@ exports[`Checkbox > should render with custom colors 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="«rh»"
+      for="_r_h_"
     >
       <input
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="«rh»"
+        id="_r_h_"
         style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="«rh»"
+      for="_r_h_"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
@@ -292,18 +292,18 @@ exports[`Checkbox > should render with partial custom colors 1`] = `
   >
     <label
       class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
-      for="«ri»"
+      for="_r_i_"
     >
       <input
         class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
-        id="«ri»"
+        id="_r_i_"
         style="--primary: #ff0000;"
         type="checkbox"
       />
     </label>
     <label
       class="cursor-0-pointer--255"
-      for="«ri»"
+      for="_r_i_"
     >
       <span
         class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"