diff --git a/biome.json b/biome.json
index be41be3..5215472 100644
--- a/biome.json
+++ b/biome.json
@@ -24,9 +24,6 @@
       },
       "security": {
         "noDangerouslySetInnerHtml": "off"
-      },
-      "style": {
-        "noNamespace": "error"
       }
     },
     "ignore": [
diff --git a/examples/package.json b/examples/package.json
index a1bf377..e7036ab 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -8,23 +8,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sakura-ui/core": "^0.3.0",
-    "@sakura-ui/forms": "^0.2.1",
-    "@sakura-ui/tailwind-theme-plugin": "^0.2.1",
+    "@sakura-ui/core": "workspace:*",
+    "@sakura-ui/forms": "workspace:*",
+    "@sakura-ui/helper": "workspace:*",
+    "@sakura-ui/tailwind-theme-plugin": "workspace:*",
     "clsx": "^2.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "react-router-dom": "^6.23.1",
-    "tailwindcss": "^3.4.11"
+    "tailwindcss": "catalog:"
   },
   "devDependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "typescript": "^5.4.5",
+    "autoprefixer": "catalog:",
+    "postcss": "catalog:",
     "vite": "^5.4.11"
   }
 }
diff --git a/examples/src/pages/Forms.tsx b/examples/src/pages/Forms.tsx
index 8596a07..26af264 100644
--- a/examples/src/pages/Forms.tsx
+++ b/examples/src/pages/Forms.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { H1, H2, Button } from '@sakura-ui/core'
+import clsx from 'clsx'
+import { H1, H2, Button, MenuButton, NavigationItem } from '@sakura-ui/core'
 import {
   CheckboxGroup,
   Radio,
@@ -14,212 +15,156 @@ import {
 } from '@sakura-ui/forms'
 
 const Forms = () => {
+  const style = `
+    min-h-screen
+    text-sumi-900
+    text-base
+  `
+
+  const containerStyle = `
+    max-w-xs
+    sm:max-w-screen-sm
+    md:max-w-screen-md
+    lg:max-w-screen-lg
+    xl:max-w-[1120px]
+    mx-auto
+  `
+
+  const styleSp = 'hidden sm:block'
+
   return (
-    <div className="px-8 w-full">
-      <H1>SakuraUI Forms sample</H1>
-      <form>
-        <LabelControl labelText="Select with helper" helperText="Helper text">
-          <Select>
-            <option value="1">Select value1</option>
-            <option value="2">Select value2</option>
-            <option value="3">Select value3</option>
-          </Select>
-        </LabelControl>
-        <LabelControl
-          labelText="Select(md) with helper"
-          helperText="Helper text"
-        >
-          <Select size="md">
-            <option value="1">Select value1</option>
-            <option value="2">Select value2</option>
-            <option value="3">Select value3</option>
-          </Select>
-        </LabelControl>
-        <LabelControl
-          labelText="Select(sm) with helper"
-          helperText="Helper text"
-        >
-          <Select size="sm">
-            <option value="1">Select value1</option>
-            <option value="2">Select value2</option>
-            <option value="3">Select value3</option>
-          </Select>
-        </LabelControl>
-        <FieldsetControl labelText="Radio">
-          <Radio className="block" value={0}>
-            Radio1
-          </Radio>
-          <Radio className="block" value={1}>
-            Radio2
-          </Radio>
-          <Radio className="block" value={2}>
-            Radio3
-          </Radio>
-        </FieldsetControl>
-        <CheckboxGroup
-          labelText="Checkbox group"
-          items={[
-            { value: '0', label: 'Checkbox1' },
-            { value: '1', label: 'Checkbox2' },
-            { value: '2', label: 'Checkbox3' }
-          ]}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            console.log(`${e.target.value}, ${e.target.checked}`)
-          }
-        />
-        <LabelControl labelText="Text" helperText="Helper text">
-          <Input />
-        </LabelControl>
-        <LabelControl labelText="Text(md)" helperText="Helper text">
-          <Input size="md" />
-        </LabelControl>
-        <LabelControl labelText="Text(sm)" helperText="Helper text">
-          <Input size="sm" />
-        </LabelControl>
-        <LabelControl
-          labelText="Text2"
-          helperText="Helper text"
-          isInvalid={true}
-          errorMessage="error message"
-        >
-          <Input />
-        </LabelControl>
-        <LabelControl
-          labelText="Select file"
-          helperText="SVG, PNG, JPG or GIF (MAX. 800x400px)."
-        >
-          <FileInput className="w-96" />
-        </LabelControl>
-        <Button type="submit">Submit</Button>
-      </form>
-      <div className="my-4">
-        <H2>Controlled forms</H2>
-        <div className="flex space-x-4">
-          <LabelControl labelText="Select">
-            <Select>
-              <option value="1">Select value1</option>
-              <option value="2">Select value2</option>
-              <option value="3">Select value3</option>
-            </Select>
-          </LabelControl>
-          <LabelControl labelText="Select required" isRequired={true}>
-            <Select>
-              <option value="1">Select value1</option>
-              <option value="2">Select value2</option>
-              <option value="3">Select value3</option>
-            </Select>
-          </LabelControl>
+    <div className={style}>
+      <header className="max-w-[1120px] mx-auto">
+        <div className="p-6 xl:px-0 flex items-center justify-between">
+          <div className="text-3xl font-bold">
+            <a className="" href="/">
+              Sakura-UI
+            </a>
+          </div>
+          <nav>
+            <ul className="flex sm:gap-8">
+              <li className={styleSp}>
+                <NavigationItem href="/">Home</NavigationItem>
+              </li>
+              <li className={styleSp}>
+                <NavigationItem href="forms">Forms</NavigationItem>
+              </li>
+              <li className={clsx(styleSp, 'py-2')} aria-hidden="true">
+                |
+              </li>
+              <li>
+                <MenuButton>
+                  <div className="fixed top-24 left-0 right-0 max-h-[calc(100vh-6rem)] overflow-y-scroll">
+                    <nav className="p-6 xl:px-0 bg-white flex flex-col sm:flex-row gap-4 sm:gap-10 justify-center">
+                      <ul>
+                        <li>
+                          <NavigationItem href="/">Home</NavigationItem>
+                        </li>
+                        <li>
+                          <NavigationItem href="forms">Forms</NavigationItem>
+                        </li>
+                      </ul>
+                    </nav>
+                  </div>
+                </MenuButton>
+              </li>
+            </ul>
+          </nav>
         </div>
-        <div className="flex space-x-4">
-          <LabelControl labelText="Select with helper" helperText="Helper text">
-            <Select>
-              <option value="1">Select value1</option>
-              <option value="2">Select value2</option>
-              <option value="3">Select value3</option>
-            </Select>
-          </LabelControl>
-          <LabelControl
-            labelText="Select with error"
-            isInvalid={true}
-            errorMessage="Error message"
-          >
-            <Select>
-              <option value="1">Select value1</option>
-              <option value="2">Select value2</option>
-              <option value="3">Select value3</option>
-            </Select>
-          </LabelControl>
-          <LabelControl
-            labelText="Select with helper and error"
-            helperText="Helper text"
-            isInvalid={true}
-            errorMessage="Error message"
+      </header>
+      <main className={containerStyle}>
+        <H1>SakuraUI Forms sample</H1>
+        <div className="my-4 flex flex-col items-start gap-8">
+          <H2>Controlled forms</H2>
+          <div className="flex space-x-4">
+            <LabelControl labelText="Select">
+              <Select>
+                <option value="1">Select value1</option>
+                <option value="2">Select value2</option>
+                <option value="3">Select value3</option>
+              </Select>
+            </LabelControl>
+            <LabelControl labelText="Select required" isRequired={true}>
+              <Select>
+                <option value="1">Select value1</option>
+                <option value="2">Select value2</option>
+                <option value="3">Select value3</option>
+              </Select>
+            </LabelControl>
+          </div>
+          <div className="flex space-x-4">
+            <LabelControl
+              labelText="Select with helper"
+              helperText="Helper text"
+            >
+              <Select>
+                <option value="1">Select value1</option>
+                <option value="2">Select value2</option>
+                <option value="3">Select value3</option>
+              </Select>
+            </LabelControl>
+            <LabelControl
+              labelText="Select with error"
+              isInvalid={true}
+              errorMessage="Error message"
+            >
+              <Select>
+                <option value="1">Select value1</option>
+                <option value="2">Select value2</option>
+                <option value="3">Select value3</option>
+              </Select>
+            </LabelControl>
+            <LabelControl
+              labelText="Select with helper and error"
+              helperText="Helper text"
+              isInvalid={true}
+              errorMessage="Error message"
+            >
+              <Select>
+                <option value="1">Select value1</option>
+                <option value="2">Select value2</option>
+                <option value="3">Select value3</option>
+              </Select>
+            </LabelControl>
+          </div>
+          <div className="flex space-x-4">
+            <LabelControl labelText="Select(size=lg)">
+              <Select>
+                <option value="1">Select value1</option>
+                <option value="2">Select value2</option>
+                <option value="3">Select value3</option>
+              </Select>
+            </LabelControl>
+            <LabelControl labelText="Select(size=md)">
+              <Select size="md">
+                <option value="1">Select value1</option>
+                <option value="2">Select value2</option>
+                <option value="3">Select value3</option>
+              </Select>
+            </LabelControl>
+            <LabelControl labelText="Select(size=sm)">
+              <Select size="sm">
+                <option value="1">Select value1</option>
+                <option value="2">Select value2</option>
+                <option value="3">Select value3</option>
+              </Select>
+            </LabelControl>
+          </div>
+          <FieldsetControl labelText="Radio">
+            <Radio className="block" value={0}>
+              Radio1
+            </Radio>
+            <Radio className="block" value={1}>
+              Radio2
+            </Radio>
+            <Radio className="block" value={2}>
+              Radio3
+            </Radio>
+          </FieldsetControl>
+          <FieldsetControl
+            direction="flex-row"
+            labelText="Radio(size=lg) flex-row"
           >
-            <Select>
-              <option value="1">Select value1</option>
-              <option value="2">Select value2</option>
-              <option value="3">Select value3</option>
-            </Select>
-          </LabelControl>
-        </div>
-        <div className="flex space-x-4">
-          <LabelControl labelText="Select(size=lg)">
-            <Select>
-              <option value="1">Select value1</option>
-              <option value="2">Select value2</option>
-              <option value="3">Select value3</option>
-            </Select>
-          </LabelControl>
-          <LabelControl labelText="Select(size=md)">
-            <Select size="md">
-              <option value="1">Select value1</option>
-              <option value="2">Select value2</option>
-              <option value="3">Select value3</option>
-            </Select>
-          </LabelControl>
-          <LabelControl labelText="Select(size=sm)">
-            <Select size="sm">
-              <option value="1">Select value1</option>
-              <option value="2">Select value2</option>
-              <option value="3">Select value3</option>
-            </Select>
-          </LabelControl>
-        </div>
-        <FieldsetControl labelText="Radio">
-          <Radio className="block" value={0}>
-            Radio1
-          </Radio>
-          <Radio className="block" value={1}>
-            Radio2
-          </Radio>
-          <Radio className="block" value={2}>
-            Radio3
-          </Radio>
-        </FieldsetControl>
-        <FieldsetControl
-          direction="flex-row"
-          labelText="Radio(size=lg) flex-row"
-        >
-          <Radio className="block" value={0}>
-            Radio1
-          </Radio>
-          <Radio className="block" value={1}>
-            Radio2
-          </Radio>
-          <Radio className="block" value={2}>
-            Radio3
-          </Radio>
-        </FieldsetControl>
-        <FieldsetControl
-          direction="flex-row"
-          labelText="Radio(size=md) flex-row"
-        >
-          <Radio size="md" className="block" value={0}>
-            Radio1
-          </Radio>
-          <Radio size="md" className="block" value={1}>
-            Radio2
-          </Radio>
-          <Radio size="md" className="block" value={2}>
-            Radio3
-          </Radio>
-        </FieldsetControl>
-        <FieldsetControl
-          direction="flex-row"
-          labelText="Radio(size=sm) flex-row"
-        >
-          <Radio size="sm" className="block" value={0}>
-            Radio1
-          </Radio>
-          <Radio size="sm" className="block" value={1}>
-            Radio2
-          </Radio>
-          <Radio size="sm" className="block" value={2}>
-            Radio3
-          </Radio>
-        </FieldsetControl>
-        <div className="flex gap-6">
-          <FieldsetControl labelText="Radio(size=lg)">
             <Radio className="block" value={0}>
               Radio1
             </Radio>
@@ -230,7 +175,10 @@ const Forms = () => {
               Radio3
             </Radio>
           </FieldsetControl>
-          <FieldsetControl labelText="Radio(size=md)">
+          <FieldsetControl
+            direction="flex-row"
+            labelText="Radio(size=md) flex-row"
+          >
             <Radio size="md" className="block" value={0}>
               Radio1
             </Radio>
@@ -241,7 +189,10 @@ const Forms = () => {
               Radio3
             </Radio>
           </FieldsetControl>
-          <FieldsetControl labelText="Radio(size=sm)">
+          <FieldsetControl
+            direction="flex-row"
+            labelText="Radio(size=sm) flex-row"
+          >
             <Radio size="sm" className="block" value={0}>
               Radio1
             </Radio>
@@ -252,91 +203,85 @@ const Forms = () => {
               Radio3
             </Radio>
           </FieldsetControl>
-        </div>
-        <div className="flex gap-6">
-          <RadioGroup
-            labelText="Radio group(size=lg)"
-            items={[
-              { value: '0', label: 'Radio1' },
-              { value: '1', label: 'Radio2' },
-              { value: '2', label: 'Radio3' }
-            ]}
-            defaultValue="1"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              console.log(e.target.value)
-            }
-          />
-          <RadioGroup
-            size="md"
-            labelText="Radio group(size=md)"
-            items={[
-              { value: '0', label: 'Radio1' },
-              { value: '1', label: 'Radio2' },
-              { value: '2', label: 'Radio3' }
-            ]}
-            defaultValue="1"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              console.log(e.target.value)
-            }
-          />
-          <RadioGroup
-            size="sm"
-            labelText="Radio group(size=sm)"
-            items={[
-              { value: '0', label: 'Radio1' },
-              { value: '1', label: 'Radio2' },
-              { value: '2', label: 'Radio3' }
-            ]}
-            defaultValue="1"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              console.log(e.target.value)
-            }
-          />
-        </div>
-        <FieldsetControl
-          direction="flex-row"
-          labelText="Checkbox(size=lg) flex-row"
-        >
-          <Checkbox className="block" value={0}>
-            Checkbox1
-          </Checkbox>
-          <Checkbox className="block" value={1}>
-            Checkbox2
-          </Checkbox>
-          <Checkbox className="block" value={2}>
-            Checkbox3
-          </Checkbox>
-        </FieldsetControl>
-        <FieldsetControl
-          direction="flex-row"
-          labelText="Checkbox(size=md) flex-row"
-        >
-          <Checkbox size="md" className="block" value={0}>
-            Checkbox1
-          </Checkbox>
-          <Checkbox size="md" className="block" value={1}>
-            Checkbox2
-          </Checkbox>
-          <Checkbox size="md" className="block" value={2}>
-            Checkbox3
-          </Checkbox>
-        </FieldsetControl>
-        <FieldsetControl
-          direction="flex-row"
-          labelText="Checkbox(size=sm) flex-row"
-        >
-          <Checkbox size="sm" className="block" value={0}>
-            Checkbox1
-          </Checkbox>
-          <Checkbox size="sm" className="block" value={1}>
-            Checkbox2
-          </Checkbox>
-          <Checkbox size="sm" className="block" value={2}>
-            Checkbox3
-          </Checkbox>
-        </FieldsetControl>
-        <div className="flex gap-6">
-          <FieldsetControl labelText="Checkbox(size=lg)">
+          <div className="flex gap-6">
+            <FieldsetControl labelText="Radio(size=lg)">
+              <Radio className="block" value={0}>
+                Radio1
+              </Radio>
+              <Radio className="block" value={1}>
+                Radio2
+              </Radio>
+              <Radio className="block" value={2}>
+                Radio3
+              </Radio>
+            </FieldsetControl>
+            <FieldsetControl labelText="Radio(size=md)">
+              <Radio size="md" className="block" value={0}>
+                Radio1
+              </Radio>
+              <Radio size="md" className="block" value={1}>
+                Radio2
+              </Radio>
+              <Radio size="md" className="block" value={2}>
+                Radio3
+              </Radio>
+            </FieldsetControl>
+            <FieldsetControl labelText="Radio(size=sm)">
+              <Radio size="sm" className="block" value={0}>
+                Radio1
+              </Radio>
+              <Radio size="sm" className="block" value={1}>
+                Radio2
+              </Radio>
+              <Radio size="sm" className="block" value={2}>
+                Radio3
+              </Radio>
+            </FieldsetControl>
+          </div>
+          <div className="flex gap-6">
+            <RadioGroup
+              labelText="Radio group(size=lg)"
+              items={[
+                { value: '0', label: 'Radio1' },
+                { value: '1', label: 'Radio2' },
+                { value: '2', label: 'Radio3' }
+              ]}
+              defaultValue="1"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                console.log(e.target.value)
+              }
+            />
+            <RadioGroup
+              size="md"
+              labelText="Radio group(size=md)"
+              items={[
+                { value: '0', label: 'Radio1' },
+                { value: '1', label: 'Radio2' },
+                { value: '2', label: 'Radio3' }
+              ]}
+              defaultValue="1"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                console.log(e.target.value)
+              }
+            />
+            <RadioGroup
+              size="sm"
+              labelText="Radio group(size=sm)"
+              items={[
+                { value: '0', label: 'Radio1' },
+                { value: '1', label: 'Radio2' },
+                { value: '2', label: 'Radio3' }
+              ]}
+              defaultValue="1"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                console.log(e.target.value)
+              }
+            />
+          </div>
+          <FieldsetControl
+            direction="flex-row"
+            labelText="Checkbox(size=lg) flex-row"
+          >
             <Checkbox className="block" value={0}>
               Checkbox1
             </Checkbox>
@@ -347,7 +292,10 @@ const Forms = () => {
               Checkbox3
             </Checkbox>
           </FieldsetControl>
-          <FieldsetControl labelText="Checkbox(size=md)">
+          <FieldsetControl
+            direction="flex-row"
+            labelText="Checkbox(size=md) flex-row"
+          >
             <Checkbox size="md" className="block" value={0}>
               Checkbox1
             </Checkbox>
@@ -358,7 +306,10 @@ const Forms = () => {
               Checkbox3
             </Checkbox>
           </FieldsetControl>
-          <FieldsetControl labelText="Checkbox(size=sm)">
+          <FieldsetControl
+            direction="flex-row"
+            labelText="Checkbox(size=sm) flex-row"
+          >
             <Checkbox size="sm" className="block" value={0}>
               Checkbox1
             </Checkbox>
@@ -369,186 +320,226 @@ const Forms = () => {
               Checkbox3
             </Checkbox>
           </FieldsetControl>
-        </div>
-        <div className="flex gap-6">
-          <CheckboxGroup
-            labelText="Checkbox group(size=sm)"
-            items={[
-              { value: '0', label: 'Checkbox1' },
-              { value: '1', label: 'Checkbox2' },
-              { value: '2', label: 'Checkbox3' }
-            ]}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              console.log(`${e.target.value}, ${e.target.checked}`)
-            }
-          />
-          <CheckboxGroup
-            size="md"
-            labelText="Checkbox group(size=md)"
-            items={[
-              { value: '0', label: 'Checkbox1' },
-              { value: '1', label: 'Checkbox2' },
-              { value: '2', label: 'Checkbox3' }
-            ]}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              console.log(`${e.target.value}, ${e.target.checked}`)
-            }
-          />
-          <CheckboxGroup
-            size="sm"
-            labelText="Checkbox group(size=sm)"
-            items={[
-              { value: '0', label: 'Checkbox1' },
-              { value: '1', label: 'Checkbox2' },
-              { value: '2', label: 'Checkbox3' }
-            ]}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              console.log(`${e.target.value}, ${e.target.checked}`)
-            }
-          />
-        </div>
-        <div className="flex space-x-4">
-          <LabelControl labelText="Text">
-            <Input />
-          </LabelControl>
-          <LabelControl labelText="Text required" isRequired={true}>
-            <Input />
-          </LabelControl>
-        </div>
-        <div className="flex space-x-4">
-          <LabelControl labelText="Text with helper" helperText="Helper text">
-            <Input />
-          </LabelControl>
-          <LabelControl
-            labelText="Text with error"
-            isInvalid={true}
-            errorMessage="Error message"
-          >
-            <Input />
-          </LabelControl>
-          <LabelControl
-            labelText="Text with helper and error"
-            helperText="Helper text"
-            isInvalid={true}
-            errorMessage="Error message"
-          >
-            <Input />
-          </LabelControl>
-        </div>
-        <div className="flex space-x-4">
-          <LabelControl labelText="Text(size=lg)">
-            <Input />
-          </LabelControl>
-          <LabelControl labelText="Text(size=md)">
-            <Input size="md" />
-          </LabelControl>
-          <LabelControl labelText="Text(size=sm)">
-            <Input size="sm" />
-          </LabelControl>
-        </div>
-        <div className="flex space-x-4">
-          <LabelControl labelText="File input" helperText="Helper text">
-            <FileInput />
-          </LabelControl>
-          <LabelControl
-            labelText="File input"
-            helperText="Helper text"
-            isInvalid={true}
-            errorMessage="Error message"
-          >
-            <FileInput />
-          </LabelControl>
-        </div>
-        <div className="flex space-x-4">
-          <LabelControl labelText="File input" helperText="size=lg">
-            <FileInput />
-          </LabelControl>
-          <LabelControl labelText="File input" helperText="size=md">
-            <FileInput size="md" />
-          </LabelControl>
-          <LabelControl labelText="File input" helperText="size=sm">
-            <FileInput size="sm" />
-          </LabelControl>
-        </div>
-        <div className="flex space-x-4">
-          <LabelControl labelText="Textarea">
-            <Textarea rows={4} />
-          </LabelControl>
-          <LabelControl labelText="Textarea required" isRequired={true}>
-            <Textarea rows={4} />
-          </LabelControl>
-          <LabelControl labelText="Textarea with maxLength">
-            <Textarea rows={4} maxLength={50} />
-          </LabelControl>
-        </div>
-        <div className="flex space-x-4">
-          <LabelControl
-            labelText="Textarea with helper"
-            helperText="Helper text"
-          >
-            <Textarea rows={4} />
-          </LabelControl>
-          <LabelControl
-            labelText="Textarea with error"
-            isInvalid={true}
-            errorMessage="Error message"
-          >
-            <Textarea rows={4} />
-          </LabelControl>
-          <LabelControl
-            labelText="Textarea with helper and error"
-            helperText="Helper text"
-            isInvalid={true}
-            errorMessage="Error message"
-          >
-            <Textarea rows={4} />
-          </LabelControl>
-        </div>
-        <div>
-          <H2>Disabled forms</H2>
-          <div className="flex space-x-4 bg-sumi-200">
-            <fieldset disabled>
-              <LabelControl
-                labelText="Text with helper"
-                helperText="Helper text"
-              >
-                <Input />
-              </LabelControl>
-              <LabelControl
-                labelText="Textarea disabled"
-                helperText="Helper text"
-              >
-                <Textarea rows={4} />
-              </LabelControl>
-              <LabelControl labelText="Select">
-                <Select>
-                  <option value="1">Select value1</option>
-                  <option value="2">Select value2</option>
-                  <option value="3">Select value3</option>
-                </Select>
-              </LabelControl>
-              <FieldsetControl direction="flex-row" labelText="Radio flex-row">
-                <Radio className="block" value={0}>
-                  Radio1
-                </Radio>
-                <Radio className="block" value={1}>
-                  Radio2
-                </Radio>
-                <Radio className="block" value={2}>
-                  Radio3
-                </Radio>
-              </FieldsetControl>
-              <FieldsetControl
-                direction="flex-row"
-                labelText="Checkbox flex-row"
-              >
-                <Checkbox>Check1</Checkbox>
-                <Checkbox>Check2</Checkbox>
-              </FieldsetControl>
-            </fieldset>
+          <div className="flex gap-6">
+            <FieldsetControl labelText="Checkbox(size=lg)">
+              <Checkbox className="block" value={0}>
+                Checkbox1
+              </Checkbox>
+              <Checkbox className="block" value={1}>
+                Checkbox2
+              </Checkbox>
+              <Checkbox className="block" value={2}>
+                Checkbox3
+              </Checkbox>
+            </FieldsetControl>
+            <FieldsetControl labelText="Checkbox(size=md)">
+              <Checkbox size="md" className="block" value={0}>
+                Checkbox1
+              </Checkbox>
+              <Checkbox size="md" className="block" value={1}>
+                Checkbox2
+              </Checkbox>
+              <Checkbox size="md" className="block" value={2}>
+                Checkbox3
+              </Checkbox>
+            </FieldsetControl>
+            <FieldsetControl labelText="Checkbox(size=sm)">
+              <Checkbox size="sm" className="block" value={0}>
+                Checkbox1
+              </Checkbox>
+              <Checkbox size="sm" className="block" value={1}>
+                Checkbox2
+              </Checkbox>
+              <Checkbox size="sm" className="block" value={2}>
+                Checkbox3
+              </Checkbox>
+            </FieldsetControl>
+          </div>
+          <div className="flex gap-6">
+            <CheckboxGroup
+              labelText="Checkbox group(size=sm)"
+              items={[
+                { value: '0', label: 'Checkbox1' },
+                { value: '1', label: 'Checkbox2' },
+                { value: '2', label: 'Checkbox3' }
+              ]}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                console.log(`${e.target.value}, ${e.target.checked}`)
+              }
+            />
+            <CheckboxGroup
+              size="md"
+              labelText="Checkbox group(size=md)"
+              items={[
+                { value: '0', label: 'Checkbox1' },
+                { value: '1', label: 'Checkbox2' },
+                { value: '2', label: 'Checkbox3' }
+              ]}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                console.log(`${e.target.value}, ${e.target.checked}`)
+              }
+            />
+            <CheckboxGroup
+              size="sm"
+              labelText="Checkbox group(size=sm)"
+              items={[
+                { value: '0', label: 'Checkbox1' },
+                { value: '1', label: 'Checkbox2' },
+                { value: '2', label: 'Checkbox3' }
+              ]}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                console.log(`${e.target.value}, ${e.target.checked}`)
+              }
+            />
+          </div>
+          <div className="flex space-x-4">
+            <LabelControl labelText="Text">
+              <Input />
+            </LabelControl>
+            <LabelControl labelText="Text required" isRequired={true}>
+              <Input />
+            </LabelControl>
+          </div>
+          <div className="flex space-x-4">
+            <LabelControl labelText="Text with helper" helperText="Helper text">
+              <Input />
+            </LabelControl>
+            <LabelControl
+              labelText="Text with error"
+              isInvalid={true}
+              errorMessage="Error message"
+            >
+              <Input />
+            </LabelControl>
+            <LabelControl
+              labelText="Text with helper and error"
+              helperText="Helper text"
+              isInvalid={true}
+              errorMessage="Error message"
+            >
+              <Input />
+            </LabelControl>
+          </div>
+          <div className="flex space-x-4">
+            <LabelControl labelText="Text(size=lg)">
+              <Input />
+            </LabelControl>
+            <LabelControl labelText="Text(size=md)">
+              <Input size="md" />
+            </LabelControl>
+            <LabelControl labelText="Text(size=sm)">
+              <Input size="sm" />
+            </LabelControl>
+          </div>
+          <div className="flex space-x-4">
+            <LabelControl labelText="File input" helperText="Helper text">
+              <FileInput />
+            </LabelControl>
+            <LabelControl
+              labelText="File input"
+              helperText="Helper text"
+              isInvalid={true}
+              errorMessage="Error message"
+            >
+              <FileInput />
+            </LabelControl>
+          </div>
+          <div className="flex space-x-4">
+            <LabelControl labelText="File input" helperText="size=lg">
+              <FileInput />
+            </LabelControl>
+            <LabelControl labelText="File input" helperText="size=md">
+              <FileInput size="md" />
+            </LabelControl>
+            <LabelControl labelText="File input" helperText="size=sm">
+              <FileInput size="sm" />
+            </LabelControl>
+          </div>
+          <div className="flex space-x-4">
+            <LabelControl labelText="Textarea">
+              <Textarea rows={4} />
+            </LabelControl>
+            <LabelControl labelText="Textarea required" isRequired={true}>
+              <Textarea rows={4} />
+            </LabelControl>
+            <LabelControl labelText="Textarea with maxLength">
+              <Textarea rows={4} maxLength={50} />
+            </LabelControl>
+          </div>
+          <div className="flex space-x-4">
+            <LabelControl
+              labelText="Textarea with helper"
+              helperText="Helper text"
+            >
+              <Textarea rows={4} />
+            </LabelControl>
+            <LabelControl
+              labelText="Textarea with error"
+              isInvalid={true}
+              errorMessage="Error message"
+            >
+              <Textarea rows={4} />
+            </LabelControl>
+            <LabelControl
+              labelText="Textarea with helper and error"
+              helperText="Helper text"
+              isInvalid={true}
+              errorMessage="Error message"
+            >
+              <Textarea rows={4} />
+            </LabelControl>
+          </div>
+          <div>
+            <H2>Disabled forms</H2>
+            <div>
+              <fieldset disabled>
+                <div className="flex flex-col gap-8">
+                  <LabelControl
+                    labelText="Text with helper"
+                    helperText="Helper text"
+                  >
+                    <Input />
+                  </LabelControl>
+                  <LabelControl
+                    labelText="Textarea disabled"
+                    helperText="Helper text"
+                  >
+                    <Textarea rows={4} />
+                  </LabelControl>
+                  <LabelControl labelText="Select">
+                    <Select>
+                      <option value="1">Select value1</option>
+                      <option value="2">Select value2</option>
+                      <option value="3">Select value3</option>
+                    </Select>
+                  </LabelControl>
+                  <FieldsetControl
+                    direction="flex-row"
+                    labelText="Radio flex-row"
+                  >
+                    <Radio className="block" value={0}>
+                      Radio1
+                    </Radio>
+                    <Radio className="block" value={1}>
+                      Radio2
+                    </Radio>
+                    <Radio className="block" value={2}>
+                      Radio3
+                    </Radio>
+                  </FieldsetControl>
+                  <FieldsetControl
+                    direction="flex-row"
+                    labelText="Checkbox flex-row"
+                  >
+                    <Checkbox>Check1</Checkbox>
+                    <Checkbox>Check2</Checkbox>
+                  </FieldsetControl>
+                </div>
+              </fieldset>
+            </div>
           </div>
         </div>
-      </div>
+      </main>
     </div>
   )
 }
diff --git a/examples/src/pages/Home.tsx b/examples/src/pages/Home.tsx
index 084c3cc..c1f2690 100644
--- a/examples/src/pages/Home.tsx
+++ b/examples/src/pages/Home.tsx
@@ -72,10 +72,10 @@ const Home = () => {
           <nav>
             <ul className="flex sm:gap-8">
               <li className={styleSp}>
-                <NavigationItem href="/">Menu1</NavigationItem>
+                <NavigationItem href="/">Home</NavigationItem>
               </li>
               <li className={styleSp}>
-                <NavigationItem href="/">Menu2</NavigationItem>
+                <NavigationItem href="forms">Forms</NavigationItem>
               </li>
               <li className={clsx(styleSp, 'py-2')} aria-hidden="true">
                 |
@@ -86,10 +86,10 @@ const Home = () => {
                     <nav className="p-6 xl:px-0 bg-white flex flex-col sm:flex-row gap-4 sm:gap-10 justify-center">
                       <ul>
                         <li>
-                          <NavigationItem href="/">Menu1</NavigationItem>
+                          <NavigationItem href="/">Home</NavigationItem>
                         </li>
                         <li>
-                          <NavigationItem href="/">Menu2</NavigationItem>
+                          <NavigationItem href="forms">Forms</NavigationItem>
                         </li>
                       </ul>
                     </nav>
@@ -476,63 +476,76 @@ const Home = () => {
           <div className="my-4">
             <H2>Link Buttons</H2>
             <Button className="mr-2">Normal button</Button>
-            <Button className="mr-2" asChild>
-              <a href="https://google.com">Link button</a>
+            <Button as="a" className="mr-2" href="https://google.com">
+              Link button
             </Button>
             <IconButton
+              as="a"
               className="mr-2"
               icon="open_in_new"
               iconLayout="right"
               variant="secondary"
-              asChild
+              href="https://google.com"
+              target="_blank"
             >
-              <a href="https://google.com" target="_blank">
-                Link icon button
-              </a>
+              Link icon button
             </IconButton>
-            <Button size="md" className="mr-2" variant="secondary" asChild>
-              <a href="https://google.com">Link button</a>
+            <Button
+              as="a"
+              size="md"
+              className="mr-2"
+              variant="secondary"
+              href="https://google.com"
+            >
+              Link button
             </Button>
             <IconButton
+              as="a"
               size="md"
               className="mr-2"
               icon="open_in_new"
               iconLayout="right"
-              asChild
+              href="https://google.com"
+              target="_blank"
             >
-              <a href="https://google.com" target="_blank">
-                Link icon button
-              </a>
+              Link icon button
             </IconButton>
           </div>
           <div className="my-4">
-            <Button size="md" className="mr-2" asChild>
-              <a href="https://google.com">Link button</a>
+            <Button as="a" size="md" className="mr-2" href="https://google.com">
+              Link button
             </Button>
             <IconButton
+              as="a"
               size="sm"
               className="mr-2"
               icon="open_in_new"
               iconLayout="right"
               variant="secondary"
-              asChild
+              href="https://google.com"
+              target="_blank"
             >
-              <a href="https://google.com" target="_blank">
-                Link icon button
-              </a>
+              Link icon button
             </IconButton>
-            <Button size="sm" className="mr-2" variant="secondary" asChild>
-              <a href="https://google.com">Link button</a>
+            <Button
+              as="a"
+              size="sm"
+              className="mr-2"
+              variant="secondary"
+              href="https://google.com"
+            >
+              Link button
             </Button>
             <IconButton
+              as="a"
               size="xs"
               className="mr-2"
               icon="open_in_new"
               iconLayout="right"
+              href="https://google.com"
+              target="_blank"
             >
-              <a href="https://google.com" target="_blank">
-                Link icon button
-              </a>
+              Link icon button
             </IconButton>
           </div>
         </div>
diff --git a/examples/vite.config.ts b/examples/vite.config.mts
similarity index 100%
rename from examples/vite.config.ts
rename to examples/vite.config.mts
diff --git a/packages/core/package.json b/packages/core/package.json
index 286d125..f3c8001 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "",
   "keywords": [
     "react",
diff --git a/packages/core/src/components/Button.tsx b/packages/core/src/components/Button.tsx
index 6f7e079..999428c 100644
--- a/packages/core/src/components/Button.tsx
+++ b/packages/core/src/components/Button.tsx
@@ -1,5 +1,4 @@
-import React, { type ComponentProps } from 'react'
-import { cx } from '@sakura-ui/helper'
+import { type ComponentWithAs, cx, forwardRef } from '@sakura-ui/helper'
 import {
   type ButtonVariant,
   type ButtonSize,
@@ -7,21 +6,18 @@ import {
   getVariantStyle,
   getSizeStyle
 } from './buttonStyle'
-import { Slot } from './Slot'
 
-export type ButtonProps = {
-  className?: string
-  variant?: ButtonVariant
-  size?: ButtonSize
-} & (
-  | ({ asChild?: false } & ComponentProps<'button'>)
-  | { asChild: true; children: React.ReactNode }
-)
+export namespace Button {
+  export interface Props {
+    variant?: ButtonVariant
+    size?: ButtonSize
+  }
+}
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export const Button: ComponentWithAs<'button', Button.Props> = forwardRef(
   (props, ref) => {
     const {
-      asChild,
+      as: Component = 'button',
       variant = 'solid-fill',
       size = 'lg',
       className,
@@ -29,8 +25,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       ...restProps
     } = props
 
-    const Component = asChild ? Slot : 'button'
-
     return (
       <Component
         className={cx(
diff --git a/packages/core/src/components/Button_19.tsx b/packages/core/src/components/Button_19.tsx
new file mode 100644
index 0000000..36e2e91
--- /dev/null
+++ b/packages/core/src/components/Button_19.tsx
@@ -0,0 +1,46 @@
+import React, { type ComponentProps } from 'react'
+import { cx } from '@sakura-ui/helper'
+import {
+  type ButtonVariant,
+  type ButtonSize,
+  base,
+  getVariantStyle,
+  getSizeStyle
+} from './buttonStyle'
+
+export namespace Button {
+  export interface Props<T extends React.ElementType> {
+    as?: T
+    variant?: ButtonVariant
+    size?: ButtonSize
+  }
+}
+
+export const Button = <T extends React.ElementType = 'button'>(
+  props: Button.Props<T> & Omit<React.ComponentProps<T>, keyof Button.Props<T>>
+) => {
+  const {
+    as: Component = 'button',
+    variant = 'solid-fill',
+    size = 'lg',
+    className,
+    children,
+    ...restProps
+  } = props
+
+  return (
+    <Component
+      className={cx(
+        base,
+        getVariantStyle(variant),
+        getSizeStyle(size),
+        className
+      )}
+      {...restProps}
+    >
+      {children}
+    </Component>
+  )
+}
+
+Button.displayName = 'Button'
diff --git a/packages/core/src/components/Card.tsx b/packages/core/src/components/Card.tsx
index c827bfa..d06235f 100644
--- a/packages/core/src/components/Card.tsx
+++ b/packages/core/src/components/Card.tsx
@@ -7,9 +7,11 @@ interface IdContextType {
 
 const IdContext = React.createContext<IdContextType>({ id: '' })
 
-export interface CardProps extends React.ComponentPropsWithoutRef<'article'> {}
+export namespace Card {
+  export interface Props extends React.ComponentPropsWithoutRef<'article'> {}
+}
 
-export const Card = (props: CardProps) => {
+export const Card = (props: Card.Props) => {
   const { className, children, ...restProps } = props
 
   const id = React.useId()
@@ -39,9 +41,11 @@ export const Card = (props: CardProps) => {
   )
 }
 
-export interface CardImgProps extends React.ComponentPropsWithoutRef<'img'> {}
+export namespace CardImg {
+  export interface Props extends React.ComponentPropsWithoutRef<'img'> {}
+}
 
-export const CardImg = (props: CardImgProps) => {
+export const CardImg = (props: CardImg.Props) => {
   const { className, ...restProps } = props
 
   const style = `
@@ -53,10 +57,11 @@ export const CardImg = (props: CardImgProps) => {
   return <img className={cx(style, className)} {...restProps} />
 }
 
-export interface CardHeaderProps
-  extends React.ComponentPropsWithoutRef<'div'> {}
+export namespace CardHeader {
+  export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+}
 
-export const CardHeader = (props: CardHeaderProps) => {
+export const CardHeader = (props: CardHeader.Props) => {
   const { className, children, ...restProps } = props
 
   const ctx = React.useContext(IdContext)
@@ -78,9 +83,11 @@ export const CardHeader = (props: CardHeaderProps) => {
   )
 }
 
-export interface CardBodyProps extends React.ComponentPropsWithoutRef<'div'> {}
+export namespace CardBody {
+  export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+}
 
-export const CardBody = (props: CardBodyProps) => {
+export const CardBody = (props: CardBody.Props) => {
   const { className, children, ...restProps } = props
 
   const ctx = React.useContext(IdContext)
@@ -101,10 +108,11 @@ export const CardBody = (props: CardBodyProps) => {
   )
 }
 
-export interface CardFooterProps
-  extends React.ComponentPropsWithoutRef<'div'> {}
+export namespace CardFooter {
+  export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+}
 
-export const CardFooter = (props: CardFooterProps) => {
+export const CardFooter = (props: CardFooter.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
diff --git a/packages/core/src/components/Code.tsx b/packages/core/src/components/Code.tsx
index 8c8b280..928e780 100644
--- a/packages/core/src/components/Code.tsx
+++ b/packages/core/src/components/Code.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export interface CodeProps extends React.ComponentPropsWithoutRef<'code'> {}
+export namespace Code {
+  export interface Props extends React.ComponentPropsWithoutRef<'code'> {}
+}
 
-export const Code = (props: CodeProps) => {
+export const Code = (props: Code.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
diff --git a/packages/core/src/components/Faq.tsx b/packages/core/src/components/Faq.tsx
index 476c39f..f936756 100644
--- a/packages/core/src/components/Faq.tsx
+++ b/packages/core/src/components/Faq.tsx
@@ -1,14 +1,16 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export interface FaqProps extends React.ComponentPropsWithoutRef<'dl'> {}
+export namespace Faq {
+  export interface Props extends React.ComponentPropsWithoutRef<'dl'> {}
+}
 
 const headingStyle = `
   text-h-med-m
   sm:text-h-med
 `
 
-export const Faq = (props: FaqProps) => {
+export const Faq = (props: Faq.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -31,9 +33,11 @@ export const Faq = (props: FaqProps) => {
   )
 }
 
-export interface QuestionProps extends React.ComponentPropsWithoutRef<'dt'> {}
+export namespace Question {
+  export interface Props extends React.ComponentPropsWithoutRef<'dt'> {}
+}
 
-export const Question = (props: QuestionProps) => {
+export const Question = (props: Question.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -54,9 +58,11 @@ export const Question = (props: QuestionProps) => {
   )
 }
 
-export interface AnswerProps extends React.ComponentPropsWithoutRef<'dd'> {}
+export namespace Answer {
+  export interface Props extends React.ComponentPropsWithoutRef<'dd'> {}
+}
 
-export const Answer = (props: AnswerProps) => {
+export const Answer = (props: Answer.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
diff --git a/packages/core/src/components/Heading.tsx b/packages/core/src/components/Heading.tsx
index 1b8786a..a445b43 100644
--- a/packages/core/src/components/Heading.tsx
+++ b/packages/core/src/components/Heading.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {}
+export namespace H1 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h1'> {}
+}
 
-export const H1 = (props: HeadingProps) => {
+export const H1 = (props: H1.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -20,7 +22,11 @@ export const H1 = (props: HeadingProps) => {
   )
 }
 
-export const H2 = (props: HeadingProps) => {
+export namespace H2 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h2'> {}
+}
+
+export const H2 = (props: H2.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -37,7 +43,11 @@ export const H2 = (props: HeadingProps) => {
   )
 }
 
-export const H3 = (props: HeadingProps) => {
+export namespace H3 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h3'> {}
+}
+
+export const H3 = (props: H3.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -54,7 +64,11 @@ export const H3 = (props: HeadingProps) => {
   )
 }
 
-export const H4 = (props: HeadingProps) => {
+export namespace H4 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h4'> {}
+}
+
+export const H4 = (props: H4.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -71,7 +85,11 @@ export const H4 = (props: HeadingProps) => {
   )
 }
 
-export const H5 = (props: HeadingProps) => {
+export namespace H5 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h5'> {}
+}
+
+export const H5 = (props: H5.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -88,7 +106,11 @@ export const H5 = (props: HeadingProps) => {
   )
 }
 
-export const H6 = (props: HeadingProps) => {
+export namespace H6 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h6'> {}
+}
+
+export const H6 = (props: H6.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
diff --git a/packages/core/src/components/Icon.tsx b/packages/core/src/components/Icon.tsx
index 15f3e73..fd88cfe 100644
--- a/packages/core/src/components/Icon.tsx
+++ b/packages/core/src/components/Icon.tsx
@@ -1,12 +1,14 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export interface IconProps extends React.ComponentPropsWithRef<'span'> {
-  opticalSize?: 16 | 20 | 24 | 40 | 44 | 48
-  altText?: string
+export namespace Icon {
+  export interface Props extends React.ComponentPropsWithRef<'span'> {
+    opticalSize?: 16 | 20 | 24 | 40 | 44 | 48
+    altText?: string
+  }
 }
 
-export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
+export const Icon = React.forwardRef<HTMLElement, Icon.Props>((props, ref) => {
   const { className, altText = '', opticalSize = 24, children, ...rest } = props
 
   const size = {
diff --git a/packages/core/src/components/IconButton.tsx b/packages/core/src/components/IconButton.tsx
index ecd525d..f0a1087 100644
--- a/packages/core/src/components/IconButton.tsx
+++ b/packages/core/src/components/IconButton.tsx
@@ -1,5 +1,4 @@
-import React, { type ComponentProps } from 'react'
-import { cx } from '@sakura-ui/helper'
+import { type ComponentWithAs, cx, forwardRef } from '@sakura-ui/helper'
 import {
   base,
   getVariantStyle,
@@ -7,24 +6,21 @@ import {
   type ButtonVariant,
   type ButtonSize
 } from './buttonStyle'
-import { Slot } from './Slot'
 
-export type IconButtonProps = {
-  className?: string
-  variant?: ButtonVariant
-  size?: ButtonSize
-  iconLayout?: 'left' | 'right'
-  icon: string
-  rounded?: string
-} & (
-  | ({ asChild?: false } & ComponentProps<'button'>)
-  | { asChild: true; children: React.ReactNode }
-)
+export namespace IconButton {
+  export interface Props {
+    variant?: ButtonVariant
+    size?: ButtonSize
+    iconLayout?: 'left' | 'right'
+    icon: string
+    rounded?: string
+  }
+}
 
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  (props, ref) => {
+export const IconButton: ComponentWithAs<'button', IconButton.Props> =
+  forwardRef((props, ref) => {
     const {
-      asChild,
+      as: Component = 'button',
       variant = 'solid-fill',
       size = 'lg',
       iconLayout = 'left',
@@ -35,8 +31,6 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       ...restProps
     } = props
 
-    const Component = asChild ? Slot : 'button'
-
     const styleFontSize = `${size === 'xs' ? 'scale-105' : 'scale-125'}`
 
     const styleIcon = `
@@ -69,16 +63,16 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
         <span>
           {iconLayout === 'left' && (
             <span
-              className={cx(styleIcon, styleFontSize)}
+              className={cx(styleIcon, styleFontSize, children && 'mr-1')}
               aria-hidden={ariaHidden}
             >
               {icon}
             </span>
           )}
-          {children && <span className="mx-1">{children}</span>}
+          {children}
           {iconLayout === 'right' && (
             <span
-              className={cx(styleIcon, styleFontSize)}
+              className={cx(styleIcon, styleFontSize, children && 'ml-1')}
               aria-hidden={ariaHidden}
             >
               {icon}
@@ -87,7 +81,6 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
         </span>
       </Component>
     )
-  }
-)
+  })
 
 IconButton.displayName = 'IconButton'
diff --git a/packages/core/src/components/IconButton_19.tsx b/packages/core/src/components/IconButton_19.tsx
new file mode 100644
index 0000000..18b5a37
--- /dev/null
+++ b/packages/core/src/components/IconButton_19.tsx
@@ -0,0 +1,89 @@
+import React, { type ComponentProps } from 'react'
+import { cx } from '@sakura-ui/helper'
+import {
+  base,
+  getVariantStyle,
+  getSizeStyle,
+  type ButtonVariant,
+  type ButtonSize
+} from './buttonStyle'
+
+export namespace IconButton {
+  export interface Props<T extends React.ElementType> {
+    as?: T
+    variant?: ButtonVariant
+    size?: ButtonSize
+    iconLayout?: 'left' | 'right'
+    icon: string
+    rounded?: string
+  }
+}
+
+export const IconButton = <T extends React.ElementType = 'button'>(
+  props: IconButton.Props<T> &
+    Omit<React.ComponentProps<T>, keyof IconButton.Props<T>>
+) => {
+  const {
+    as: Component = 'button',
+    variant = 'solid-fill',
+    size = 'lg',
+    iconLayout = 'left',
+    icon,
+    rounded,
+    className,
+    children,
+    ...restProps
+  } = props
+
+  const styleFontSize = `${size === 'xs' ? 'scale-105' : 'scale-125'}`
+
+  const styleIcon = `
+      inline-block
+      align-middle
+      mb-1
+      font-icon
+      font-light
+      leading-[0px]      
+      antialiased
+    `
+
+  const styleRounded = `${rounded ? 'aspect-square !rounded-full !py-0' : ''}`
+
+  // When text is specified on a button, set the 'aria-hidden' attribute of the icon to true.
+  const ariaHidden = !!children
+
+  return (
+    <Component
+      className={cx(
+        base,
+        getVariantStyle(variant),
+        getSizeStyle(size),
+        styleRounded,
+        className
+      )}
+      {...restProps}
+    >
+      <span>
+        {iconLayout === 'left' && (
+          <span
+            className={cx(styleIcon, styleFontSize)}
+            aria-hidden={ariaHidden}
+          >
+            {icon}
+          </span>
+        )}
+        {children && <span className="mx-1">{children}</span>}
+        {iconLayout === 'right' && (
+          <span
+            className={cx(styleIcon, styleFontSize)}
+            aria-hidden={ariaHidden}
+          >
+            {icon}
+          </span>
+        )}
+      </span>
+    </Component>
+  )
+}
+
+IconButton.displayName = 'IconButton'
diff --git a/packages/core/src/components/LangSelector.tsx b/packages/core/src/components/LangSelector.tsx
index 1474995..1b16c53 100644
--- a/packages/core/src/components/LangSelector.tsx
+++ b/packages/core/src/components/LangSelector.tsx
@@ -1,27 +1,20 @@
 import React from 'react'
-import {
-  cx,
-  mod,
-  focusableSelector,
-  styleClickable,
-  styleFocusRoundedWithBg,
-  styleHoverUnderline
-} from '@sakura-ui/helper'
+import { cx, mod, focusableSelector, Style } from '@sakura-ui/helper'
 import { Language, LanguageMobile, KeyboadArrowDown } from '@/icons'
 import { PopoverMenu, PopoverMenuItem } from './PopoverMenu'
 
-interface Lang {
-  code: string
-  title: string
-  path: string
-}
-
-// Tailwind 3.4.5 or higher is required to use anchor-name.
-// https://github.com/tailwindlabs/tailwindcss/issues/13818
-export interface LangSelectorProps
-  extends React.ComponentPropsWithRef<'button'> {
-  current: string
-  langs: Lang[]
+export namespace LangSelector {
+  interface Lang {
+    code: string
+    title: string
+    path: string
+  }
+  // Tailwind 3.4.5 or higher is required to use anchor-name.
+  // https://github.com/tailwindlabs/tailwindcss/issues/13818
+  export interface Props extends React.ComponentPropsWithRef<'button'> {
+    current: string
+    langs: Lang[]
+  }
 }
 
 export const LangSelector = ({
@@ -29,7 +22,7 @@ export const LangSelector = ({
   langs,
   className,
   ...restProps
-}: LangSelectorProps) => {
+}: LangSelector.Props) => {
   const styleRoot = `
     relative
     group
@@ -46,10 +39,10 @@ export const LangSelector = ({
     sm:py-3
     text-base
     leading-snug
-    ${styleClickable}
-    ${styleFocusRoundedWithBg}
+    ${Style.clickable}
+    ${Style.focusRoundedWithBg}
+    ${Style.hoverUnderline}
     ${styleAnchorName}
-    ${styleHoverUnderline}
     flex items-center
   `
 
@@ -89,18 +82,18 @@ export const LangSelector = ({
     }
   }
 
-  const handleToggle = () => {
-    const focusable: HTMLElement | null | undefined =
-      menuRef.current?.querySelector(focusableSelector)
-    if (!focusable) return
-    focusable.focus()
-  }
-
   React.useEffect(() => {
+    const handleToggle = () => {
+      const focusable: HTMLElement | null | undefined =
+        menuRef.current?.querySelector(focusableSelector)
+      if (!focusable) return
+      focusable.focus()
+    }
+
     menuRef.current?.addEventListener('toggle', handleToggle)
 
     return () => menuRef.current?.removeEventListener('toggle', handleToggle)
-  }, [menuRef])
+  }, [])
 
   return (
     <div className={cx(className, styleRoot)}>
diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx
index 6ed7ce7..3aa6749 100644
--- a/packages/core/src/components/Link.tsx
+++ b/packages/core/src/components/Link.tsx
@@ -1,23 +1,14 @@
-import React, { type ComponentProps } from 'react'
-import { cx, styleUnderline, styleFocusRoundedWithBg } from '@sakura-ui/helper'
+import { type ComponentWithAs, cx, forwardRef, Style } from '@sakura-ui/helper'
 import { Icon } from './Icon'
-import { Slot } from './Slot'
 
-export type LinkProps = {
-  className?: string
-} & (
-  | ({ asChild?: false } & ComponentProps<'a'>)
-  | {
-      asChild: true
-      children: React.ReactNode
-    }
-)
+export namespace Link {
+  // biome-ignore lint/suspicious/noEmptyInterface: no error
+  export interface Props {}
+}
 
-export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+export const Link: ComponentWithAs<'a', Link.Props> = forwardRef(
   (props, ref) => {
-    const { asChild, className, children, ...rest } = props
-
-    const Component = asChild ? Slot : 'a'
+    const { as: Component = 'a', className, children, ...rest } = props
 
     // Make lines break at each word
     const style = `
@@ -25,21 +16,12 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       text-blue-1000
       active:text-orange-700
       visited:text-magenta-900
-      ${styleFocusRoundedWithBg}
-      ${styleUnderline}
+      ${Style.focusRoundedWithBg}
+      ${Style.underline}
       disabled:border-sumi-500
       [overflow-wrap:anywhere]
     `
 
-    // This assumes the use of next/link or gatsby-link.
-    if (asChild) {
-      return (
-        <Component className={cx(style, className)} {...rest} ref={ref}>
-          {children}
-        </Component>
-      )
-    }
-
     if (props.href?.startsWith('http') || props.target === '_blank') {
       return (
         <Component
@@ -56,6 +38,11 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
         </Component>
       )
     }
+    return (
+      <Component className={cx(style, className)} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
   }
 )
 
diff --git a/packages/core/src/components/LinkCard.tsx b/packages/core/src/components/LinkCard.tsx
index e02deba..f59a67b 100644
--- a/packages/core/src/components/LinkCard.tsx
+++ b/packages/core/src/components/LinkCard.tsx
@@ -1,16 +1,17 @@
 import React from 'react'
-import { cx, styleFocusCard } from '@sakura-ui/helper'
+import { cx, Style } from '@sakura-ui/helper'
 import { Card, CardHeader } from './Card'
 import { Icon } from './Icon'
 
 interface LinkContextType {
   href: string
 }
-
 const LinkContext = React.createContext<LinkContextType>({ href: '' })
 
-export interface LinkCardProps extends React.ComponentProps<'article'> {
-  href: string
+export namespace LinkCard {
+  export interface Props extends React.ComponentProps<'article'> {
+    href: string
+  }
 }
 
 export const LinkCard = ({
@@ -18,14 +19,14 @@ export const LinkCard = ({
   className,
   children,
   ...rest
-}: LinkCardProps) => {
+}: LinkCard.Props) => {
   const styleLink = `
     grid
     outline-offset-4
     rounded-2xl
     sm:rounded-3xl
     w-full h-full
-    ${styleFocusCard}
+    ${Style.focusCard}
   `
 
   const styleHover = `
diff --git a/packages/core/src/components/Link_19.tsx b/packages/core/src/components/Link_19.tsx
new file mode 100644
index 0000000..b913383
--- /dev/null
+++ b/packages/core/src/components/Link_19.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import { cx, Style } from '@sakura-ui/helper'
+import { Icon } from './Icon'
+
+export namespace Link {
+  export interface Props<T extends React.ElementType> {
+    as?: T
+  }
+}
+
+export const Link = <T extends React.ElementType = 'a'>(
+  props: Link.Props<T> & Omit<React.ComponentProps<T>, keyof Link.Props<T>>
+) => {
+  const { as: Component = 'a', className, children, ...restProps } = props
+
+  // Make lines break at each word
+  const style = `
+    cursor-pointer
+    text-blue-1000
+    active:text-orange-700
+    visited:text-magenta-900
+    ${Style.focusRoundedWithBg}
+    ${Style.underline}
+    disabled:border-sumi-500
+    [overflow-wrap:anywhere]
+  `
+
+  if (restProps.href?.startsWith('http') || restProps.target === '_blank') {
+    return (
+      <Component
+        className={cx(style, className)}
+        target="_blank"
+        rel="noopener noreferrer"
+        {...restProps}
+      >
+        <span>{children}</span>
+        <Icon opticalSize={16} altText="Opens in new tab" className="ml-0.5">
+          open_in_new
+        </Icon>
+      </Component>
+    )
+  }
+
+  return (
+    <Component className={cx(style, className)} {...restProps}>
+      {children}
+    </Component>
+  )
+}
+
+Link.displayName = 'Link'
diff --git a/packages/core/src/components/List.tsx b/packages/core/src/components/List.tsx
index 6482d07..598aeec 100644
--- a/packages/core/src/components/List.tsx
+++ b/packages/core/src/components/List.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export interface UlProps extends React.ComponentPropsWithoutRef<'ul'> {}
+export namespace Ul {
+  export interface Props extends React.ComponentPropsWithoutRef<'ul'> {}
+}
 
-export const Ul = (props: UlProps) => {
+export const Ul = (props: Ul.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -19,9 +21,11 @@ export const Ul = (props: UlProps) => {
   )
 }
 
-export interface OlProps extends React.ComponentPropsWithoutRef<'ol'> {}
+export namespace Ol {
+  export interface Props extends React.ComponentPropsWithoutRef<'ol'> {}
+}
 
-export const Ol = (props: OlProps) => {
+export const Ol = (props: Ol.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
diff --git a/packages/core/src/components/MenuButton.tsx b/packages/core/src/components/MenuButton.tsx
index fbf0a07..bfa0974 100644
--- a/packages/core/src/components/MenuButton.tsx
+++ b/packages/core/src/components/MenuButton.tsx
@@ -1,23 +1,17 @@
 import React from 'react'
-import {
-  cx,
-  mod,
-  focusableSelector,
-  styleClickable,
-  styleFocusRoundedWithBg,
-  styleHoverUnderline
-} from '@sakura-ui/helper'
+import { cx, mod, focusableSelector, Style } from '@sakura-ui/helper'
 import { Menu, MenuMobile, Close, CloseMobile } from '@/icons'
 
-export interface MenuButtonProps
-  extends React.ComponentPropsWithRef<'button'> {}
+export namespace MenuButton {
+  export interface Props extends React.ComponentPropsWithRef<'button'> {}
+}
 
 export const MenuButton = ({
   className,
   children,
   onChange,
   ...rest
-}: MenuButtonProps) => {
+}: MenuButton.Props) => {
   // leading 16px * 1.375(snug) + padding top 12px + padding bottom 12px + border * 2 = 48px
   const styleMenuItem = `
     w-fit
@@ -25,9 +19,9 @@ export const MenuButton = ({
     sm:py-3
     text-base
     leading-snug
-    ${styleClickable}
-    ${styleHoverUnderline}
-    ${styleFocusRoundedWithBg}
+    ${Style.clickable}
+    ${Style.hoverUnderline}
+    ${Style.focusRoundedWithBg}
   `
 
   const dialogRef = React.useRef<HTMLDialogElement>(null)
diff --git a/packages/core/src/components/NavigationItem.tsx b/packages/core/src/components/NavigationItem.tsx
index 00555c2..bfb96c3 100644
--- a/packages/core/src/components/NavigationItem.tsx
+++ b/packages/core/src/components/NavigationItem.tsx
@@ -1,29 +1,19 @@
 import React, { type ComponentProps } from 'react'
-import {
-  cx,
-  styleClickable,
-  styleHoverUnderline,
-  styleFocusRectWithBg
-} from '@sakura-ui/helper'
-import { Slot } from './Slot'
+import { cx, Style } from '@sakura-ui/helper'
 
-export type NavigationItemProps = {
-  className?: string
-} & (
-  | ({ asChild?: false } & ComponentProps<'a'>)
-  | {
-      asChild: true
-      children: React.ReactNode
-    }
-)
+export namespace NavigationItem {
+  export interface Props<T extends React.ElementType> {
+    as?: T
+  }
+}
 
-export const NavigationItem = React.forwardRef<
-  HTMLAnchorElement,
-  NavigationItemProps
->((props, ref) => {
-  const { asChild, className, children, ...rest } = props
+export const NavigationItem = <T extends React.ElementType = 'a'>(
+  props: NavigationItem.Props<T> &
+    Omit<React.ComponentProps<T>, keyof NavigationItem.Props<T>>
+) => {
+  const { as, className, children, ...rest } = props
 
-  const Component = asChild ? Slot : 'a'
+  const Component = as || 'a'
 
   // leading 16px * 1.375(snug) + padding top 12px + padding bottom 12px + border * 2 = 48px
   const style = `
@@ -32,9 +22,9 @@ export const NavigationItem = React.forwardRef<
       py-3
       text-base
       leading-snug
-      ${styleClickable}
-      ${styleHoverUnderline}
-      ${styleFocusRectWithBg}
+      ${Style.clickable}
+      ${Style.hoverUnderline}
+      ${Style.focusRectWithBg}
     `
 
   return (
@@ -42,11 +32,10 @@ export const NavigationItem = React.forwardRef<
       className={cx(style, className)}
       rel="noopener noreferrer"
       {...rest}
-      ref={ref}
     >
       {children}
     </Component>
   )
-})
+}
 
 NavigationItem.displayName = 'NavigationItem'
diff --git a/packages/core/src/components/OverflowContainer.tsx b/packages/core/src/components/OverflowContainer.tsx
index fce1d7e..82c97ec 100644
--- a/packages/core/src/components/OverflowContainer.tsx
+++ b/packages/core/src/components/OverflowContainer.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export interface OverflowContainerProps
-  extends React.ComponentPropsWithoutRef<'div'> {}
+export namespace OverflowContainer {
+  export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+}
 
-export const OverflowContainer = (props: OverflowContainerProps) => {
+export const OverflowContainer = (props: OverflowContainer.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
diff --git a/packages/core/src/components/PopoverMenu.tsx b/packages/core/src/components/PopoverMenu.tsx
index b9f421d..01266c0 100644
--- a/packages/core/src/components/PopoverMenu.tsx
+++ b/packages/core/src/components/PopoverMenu.tsx
@@ -1,9 +1,5 @@
 import React from 'react'
-import {
-  cx,
-  styleHoverUnderline,
-  styleFocusRectCondensedWithBg
-} from '@sakura-ui/helper'
+import { cx, Style } from '@sakura-ui/helper'
 import { Icon } from './Icon'
 
 export const PopoverMenu = React.forwardRef<
@@ -50,7 +46,7 @@ export const PopoverMenuItem = React.forwardRef<
     items-center
     gap-x-1.5
     hover:bg-solid-grey-50
-    ${styleFocusRectCondensedWithBg}
+    ${Style.focusRectCondensedWithBg}
   `
 
   const styleSelected = `
@@ -76,7 +72,7 @@ export const PopoverMenuItem = React.forwardRef<
         >
           check
         </Icon>
-        <span className={styleHoverUnderline}>{children}</span>
+        <span className={Style.hoverUnderline}>{children}</span>
       </a>
     </li>
   )
diff --git a/packages/core/src/components/Pre.tsx b/packages/core/src/components/Pre.tsx
index 05fc253..7421937 100644
--- a/packages/core/src/components/Pre.tsx
+++ b/packages/core/src/components/Pre.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export interface PreProps extends React.ComponentPropsWithoutRef<'pre'> {}
+export namespace Pre {
+  export interface Props extends React.ComponentPropsWithoutRef<'pre'> {}
+}
 
-export const Pre = (props: PreProps) => {
+export const Pre = (props: Pre.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
diff --git a/packages/core/src/components/Slot.tsx b/packages/core/src/components/Slot.tsx
deleted file mode 100644
index 3079a45..0000000
--- a/packages/core/src/components/Slot.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-
-export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode
-}
-
-export const Slot = React.forwardRef<HTMLElement, SlotProps>((props, ref) => {
-  const { children, ...restProps } = props
-
-  if (React.isValidElement(children)) {
-    return React.cloneElement(children, {
-      ...restProps,
-      ...children.props,
-      className: `${restProps.className ?? ''} ${children.props.className ?? ''}`,
-      ref
-    })
-  }
-
-  if (React.Children.count(children) > 1) {
-    React.Children.only(null)
-  }
-  return null
-})
diff --git a/packages/core/src/components/Table.tsx b/packages/core/src/components/Table.tsx
index c6c938d..6a5d09c 100644
--- a/packages/core/src/components/Table.tsx
+++ b/packages/core/src/components/Table.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export interface TableProps extends React.ComponentPropsWithoutRef<'table'> {}
+export namespace Table {
+  export interface Props extends React.ComponentPropsWithoutRef<'table'> {}
+}
 
 const styleBorder = `
   border
@@ -9,7 +11,7 @@ const styleBorder = `
   border-solid-grey-420
 `
 
-export const Table = (props: TableProps) => {
+export const Table = (props: Table.Props) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -19,10 +21,11 @@ export const Table = (props: TableProps) => {
   )
 }
 
-export interface CaptionProps
-  extends React.ComponentPropsWithoutRef<'caption'> {}
+export namespace Caption {
+  export interface Props extends React.ComponentPropsWithoutRef<'caption'> {}
+}
 
-export const Caption = (props: CaptionProps) => {
+export const Caption = (props: Caption.Props) => {
   const { className, children, ...restProps } = props
 
   const style = 'text-left'
@@ -33,9 +36,11 @@ export const Caption = (props: CaptionProps) => {
   )
 }
 
-export interface TheadProps extends React.ComponentPropsWithoutRef<'thead'> {}
+export namespace Thead {
+  export interface Props extends React.ComponentPropsWithoutRef<'thead'> {}
+}
 
-export const Thead = (props: TheadProps) => {
+export const Thead = (props: Thead.Props) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -45,9 +50,11 @@ export const Thead = (props: TheadProps) => {
   )
 }
 
-export interface TbodyProps extends React.ComponentPropsWithoutRef<'tbody'> {}
+export namespace Tbody {
+  export interface Props extends React.ComponentPropsWithoutRef<'tbody'> {}
+}
 
-export const Tbody = (props: TbodyProps) => {
+export const Tbody = (props: Tbody.Props) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -57,9 +64,11 @@ export const Tbody = (props: TbodyProps) => {
   )
 }
 
-export interface ThProps extends React.ComponentPropsWithoutRef<'th'> {}
+export namespace Th {
+  export interface Props extends React.ComponentPropsWithoutRef<'th'> {}
+}
 
-export const Th = (props: ThProps) => {
+export const Th = (props: Th.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -75,9 +84,11 @@ export const Th = (props: ThProps) => {
   )
 }
 
-export interface TrProps extends React.ComponentPropsWithoutRef<'tr'> {}
+export namespace Tr {
+  export interface Props extends React.ComponentPropsWithoutRef<'tr'> {}
+}
 
-export const Tr = (props: TrProps) => {
+export const Tr = (props: Tr.Props) => {
   const { className, children, ...restProps } = props
 
   const style = ''
@@ -89,9 +100,11 @@ export const Tr = (props: TrProps) => {
   )
 }
 
-export interface TdProps extends React.ComponentPropsWithoutRef<'td'> {}
+export namespace Td {
+  export interface Props extends React.ComponentPropsWithoutRef<'td'> {}
+}
 
-export const Td = (props: TdProps) => {
+export const Td = (props: Td.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
diff --git a/packages/core/src/components/buttonStyle.ts b/packages/core/src/components/buttonStyle.ts
index 9719118..b9c57d7 100644
--- a/packages/core/src/components/buttonStyle.ts
+++ b/packages/core/src/components/buttonStyle.ts
@@ -1,9 +1,4 @@
-import {
-  styleFocusRounded,
-  styleFocusRoundedWithBg,
-  styleHoverUnderline,
-  styleUnderlineNoDeco
-} from '@sakura-ui/helper'
+import { Style } from '@sakura-ui/helper'
 
 // Deprecated, replace to ButtonVariantV2
 export type ButtonVariantV1 = 'primary' | 'secondary' | 'tertiary'
@@ -37,8 +32,8 @@ const solidFill = `
   active:bg-blue-1200
   disabled:bg-sumi-500
   disabled:text-white
-  ${styleHoverUnderline}
-  ${styleFocusRounded}
+  ${Style.hoverUnderline}
+  ${Style.focusRounded}
 `
 
 const outline = `
@@ -50,8 +45,8 @@ const outline = `
   active:bg-blue-300
   disabled:bg-transparent
   disabled:text-sumi-500
-  ${styleHoverUnderline}
-  ${styleFocusRounded}
+  ${Style.hoverUnderline}
+  ${Style.focusRounded}
 `
 
 const text = `
@@ -63,8 +58,8 @@ const text = `
   active:bg-blue-300
   disabled:bg-transparent
   disabled:text-sumi-500
-  ${styleUnderlineNoDeco}
-  ${styleFocusRoundedWithBg}
+  ${Style.underlineNoDeco}
+  ${Style.focusRoundedWithBg}
 `
 
 const styles: { [key in ButtonVariant]: string } = {
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index d8924c7..c2545bc 100644
--- a/packages/core/src/components/index.ts
+++ b/packages/core/src/components/index.ts
@@ -1,39 +1,17 @@
-export { Button, type ButtonProps } from './Button'
-export { MenuButton, type MenuButtonProps } from './MenuButton'
+export { Button } from './Button'
+export { MenuButton } from './MenuButton'
 export { Card, CardImg, CardHeader, CardBody, CardFooter } from './Card'
-export type {
-  CardProps,
-  CardImgProps,
-  CardHeaderProps,
-  CardBodyProps,
-  CardFooterProps
-} from './Card'
 export { LinkCard, LinkCardHeader } from './LinkCard'
-export type { LinkCardProps, LinkCardHeaderProps } from './LinkCard'
-export { Code, type CodeProps } from './Code'
+export { Code } from './Code'
 export { Faq, Question, Answer } from './Faq'
-export type { FaqProps, QuestionProps, AnswerProps } from './Faq'
-export { H1, H2, H3, H4, H5, H6, type HeadingProps } from './Heading'
-export { Icon, type IconProps } from './Icon'
-export { IconButton, type IconButtonProps } from './IconButton'
-export { Link, type LinkProps } from './Link'
-export { Ol, Ul, type OlProps, type UlProps } from './List'
-export { NavigationItem, type NavigationItemProps } from './NavigationItem'
-export { Pre, type PreProps } from './Pre'
+export { H1, H2, H3, H4, H5, H6 } from './Heading'
+export { Icon } from './Icon'
+export { IconButton } from './IconButton'
+export { Link } from './Link'
+export { Ol, Ul } from './List'
+export { NavigationItem } from './NavigationItem'
+export { Pre } from './Pre'
 export { Table, Caption, Thead, Tbody, Th, Tr, Td } from './Table'
-export type {
-  TableProps,
-  CaptionProps,
-  TheadProps,
-  TbodyProps,
-  ThProps,
-  TrProps,
-  TdProps
-} from './Table'
-export {
-  OverflowContainer,
-  type OverflowContainerProps
-} from './OverflowContainer'
-export { LangSelector, type LangSelectorProps } from './LangSelector'
+export { OverflowContainer } from './OverflowContainer'
+export { LangSelector } from './LangSelector'
 export { PopoverMenu, PopoverMenuItem } from './PopoverMenu'
-export { Slot } from './Slot'
diff --git a/packages/core/src/icons/Close.tsx b/packages/core/src/icons/Close.tsx
index 2e525a0..5c793a2 100644
--- a/packages/core/src/icons/Close.tsx
+++ b/packages/core/src/icons/Close.tsx
@@ -4,10 +4,10 @@ export const Close = (props: IconProps) => {
   const { size, className, ...rest } = props
   return (
     <svg
+      aria-hidden={true}
       className={className}
       fill="none"
       height={size}
-      role="img"
       viewBox={`0 0 ${size} ${size}`}
       width={size}
       {...rest}
diff --git a/packages/core/src/icons/CloseMobile.tsx b/packages/core/src/icons/CloseMobile.tsx
index 21480aa..3362bf8 100644
--- a/packages/core/src/icons/CloseMobile.tsx
+++ b/packages/core/src/icons/CloseMobile.tsx
@@ -4,15 +4,16 @@ export const CloseMobile = (props: IconProps) => {
   const { size, className, ...rest } = props
   return (
     <svg
-      aria-label={`${rest['aria-label'] ?? 'Close'}`}
+      role="img"
+      aria-label={`${rest['aria-label'] ?? 'Language'}`}
       className={className}
       fill="none"
       height={size}
-      role="img"
       viewBox={`0 0 ${size} ${size}`}
       width={size}
       {...rest}
     >
+      <title>Close</title>
       <path
         d="M37.0023 38.8911H32.8164V31.1197H37.0023V32.121H33.941V34.3415H36.8149V35.3319H33.941V37.8789H37.0023V38.8911Z"
         fill="currentColor"
diff --git a/packages/core/src/icons/KeyboardArrowDown.tsx b/packages/core/src/icons/KeyboardArrowDown.tsx
index cfa0898..ab14e34 100644
--- a/packages/core/src/icons/KeyboardArrowDown.tsx
+++ b/packages/core/src/icons/KeyboardArrowDown.tsx
@@ -4,6 +4,7 @@ export const KeyboadArrowDown = (props: IconProps) => {
   const { size, className, ...rest } = props
   return (
     <svg
+      aria-hidden={true}
       className={className}
       fill="none"
       height={size}
diff --git a/packages/core/src/icons/Language.tsx b/packages/core/src/icons/Language.tsx
index 7b1375d..0d8be40 100644
--- a/packages/core/src/icons/Language.tsx
+++ b/packages/core/src/icons/Language.tsx
@@ -4,6 +4,7 @@ export const Language = (props: IconProps) => {
   const { size, className, ...rest } = props
   return (
     <svg
+      aria-hidden={true}
       className={className}
       fill="none"
       height={size}
diff --git a/packages/core/src/icons/LanguageMobile.tsx b/packages/core/src/icons/LanguageMobile.tsx
index 53adeff..74dee1d 100644
--- a/packages/core/src/icons/LanguageMobile.tsx
+++ b/packages/core/src/icons/LanguageMobile.tsx
@@ -4,11 +4,11 @@ export const LanguageMobile = (props: IconProps) => {
   const { size, className, ...rest } = props
   return (
     <svg
+      role="img"
       aria-label={`${rest['aria-label'] ?? 'Language'}`}
       className={className}
       fill="none"
       height={size}
-      role="img"
       viewBox={`0 0 ${size} ${size}`}
       width={size}
       {...rest}
diff --git a/packages/core/src/icons/Menu.tsx b/packages/core/src/icons/Menu.tsx
index 8d1b0df..f8588f2 100644
--- a/packages/core/src/icons/Menu.tsx
+++ b/packages/core/src/icons/Menu.tsx
@@ -4,6 +4,7 @@ export const Menu = (props: IconProps) => {
   const { size, className, ...rest } = props
   return (
     <svg
+      aria-hidden={true}
       className={className}
       fill="none"
       height={size}
diff --git a/packages/core/src/icons/MenuMobile.tsx b/packages/core/src/icons/MenuMobile.tsx
index 4ddca86..4a70184 100644
--- a/packages/core/src/icons/MenuMobile.tsx
+++ b/packages/core/src/icons/MenuMobile.tsx
@@ -4,11 +4,11 @@ export const MenuMobile = (props: IconProps) => {
   const { size, className, ...rest } = props
   return (
     <svg
+      role="img"
       aria-label={`${rest['aria-label'] ?? 'Menu'}`}
       className={className}
       fill="none"
       height={size}
-      role="img"
       viewBox={`0 0 ${size} ${size}`}
       width={size}
       {...rest}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 4a60492..a8711f8 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -35,39 +35,5 @@ export {
   LangSelector,
   NavigationItem,
   PopoverMenu,
-  PopoverMenuItem,
-  Slot
-} from './components'
-
-export type {
-  ButtonProps,
-  MenuButtonProps,
-  CardProps,
-  CardImgProps,
-  CardHeaderProps,
-  CardBodyProps,
-  CardFooterProps,
-  LinkCardProps,
-  LinkCardHeaderProps,
-  CodeProps,
-  FaqProps,
-  QuestionProps,
-  AnswerProps,
-  HeadingProps,
-  IconProps,
-  IconButtonProps,
-  LinkProps,
-  OlProps,
-  UlProps,
-  PreProps,
-  TableProps,
-  CaptionProps,
-  TheadProps,
-  TbodyProps,
-  ThProps,
-  TrProps,
-  TdProps,
-  OverflowContainerProps,
-  LangSelectorProps,
-  NavigationItemProps
+  PopoverMenuItem
 } from './components'
diff --git a/packages/core/tests/Button.test.tsx b/packages/core/tests/Button.test.tsx
index 78bd12c..a7dd8bd 100644
--- a/packages/core/tests/Button.test.tsx
+++ b/packages/core/tests/Button.test.tsx
@@ -1,33 +1,40 @@
 import React from 'react'
-import { describe, test, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
 import { Button } from '../src'
 
-describe('given a Button with Slot', () => {
-  test('without asChild', async () => {
+describe('Button', () => {
+  it('should render a button', async () => {
     render(<Button>Button</Button>)
 
     const button = screen.getByRole('button')
     expect(button).toBeInTheDocument()
   })
-  test('with asChild', async () => {
+
+  it('should render a link', async () => {
     render(
-      <Button asChild>
-        <a href="https://example.com">Button</a>
+      <Button as="a" href="https://example.com">
+        Button
       </Button>
     )
 
     const button = screen.getByRole('link')
     expect(button).toBeInTheDocument()
   })
-})
 
-describe('should labeled text from Button', () => {
-  test('text', async () => {
+  it('should labeled text from Button', async () => {
     render(<Button>button</Button>)
 
     const text = screen.getByText(/button/)
     expect(text).toBeInTheDocument()
   })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+
+    render(<Button ref={ref}>button</Button>)
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/core/tests/Card.test.tsx b/packages/core/tests/Card.test.tsx
index 776d884..b2450ae 100644
--- a/packages/core/tests/Card.test.tsx
+++ b/packages/core/tests/Card.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { describe, test, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
 import { Card, CardBody, CardHeader } from '../src'
 
-describe('should labeled text from Card', () => {
-  test('text', async () => {
+describe('Card', () => {
+  it('should labeled text from Card', async () => {
     render(
       <Card>
         <CardHeader>Card-Header</CardHeader>
@@ -19,24 +19,29 @@ describe('should labeled text from Card', () => {
     const text2 = screen.getByText(/Card-Body/)
     expect(text2).toBeInTheDocument()
   })
-  test('role and id', async () => {
+  it('should set the role and id correctly', async () => {
     render(
       <Card>
-        <CardHeader>Card-Header</CardHeader>
-        <CardBody>Card-Body</CardBody>
+        <CardHeader data-testid="header">Card-Header</CardHeader>
+        <CardBody data-testid="body">Card-Body</CardBody>
       </Card>
     )
 
     const card = screen.getByRole('article')
     expect(card).toBeInTheDocument()
-    expect(card).toHaveProperty('id')
 
-    const header = screen.getByLabelText('Card-Header')
+    const header = screen.getByTestId('header')
     expect(header).toBeInTheDocument()
-    expect(header).toHaveProperty('id')
+    expect(header).toHaveAttribute('id')
 
-    const body = screen.getByRole('article', { description: 'Card-Body' })
+    const headerText = screen.getByLabelText('Card-Header')
+    expect(headerText).toBeInTheDocument()
+
+    const body = screen.getByTestId('body')
     expect(body).toBeInTheDocument()
-    expect(body).toHaveProperty('id')
+    expect(body).toHaveAttribute('id')
+
+    const bodyText = screen.getByRole('article', { description: 'Card-Body' })
+    expect(bodyText).toBeInTheDocument()
   })
 })
diff --git a/packages/core/tests/IconButton.test.tsx b/packages/core/tests/IconButton.test.tsx
index 332527e..5821a29 100644
--- a/packages/core/tests/IconButton.test.tsx
+++ b/packages/core/tests/IconButton.test.tsx
@@ -1,40 +1,34 @@
 import React from 'react'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
 import { IconButton } from '../src'
 
-describe('given a IconButton with Slot', () => {
-  describe('without asChild', () => {
-    it('should render a button with icon', async () => {
-      render(<IconButton icon="home">Button with icon</IconButton>)
+describe('IconButton', () => {
+  it('should render a button with icon', async () => {
+    render(<IconButton icon="home">Button with icon</IconButton>)
 
-      const button = screen.getByRole('button')
-      expect(button).toBeInTheDocument()
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
 
-      const text = screen.getByText(/home/)
-      expect(text).toBeInTheDocument()
-    })
+    const text = screen.getByText(/home/)
+    expect(text).toBeInTheDocument()
   })
 
-  describe('with asChild', () => {
-    it('should render a link with icon', async () => {
-      render(
-        <IconButton icon="home" asChild>
-          <a href="https://googl.com">Button with icon</a>
-        </IconButton>
-      )
+  it('should render a link with icon', async () => {
+    render(
+      <IconButton as="a" icon="home" href="https://googl.com">
+        Button with icon
+      </IconButton>
+    )
 
-      const button = screen.getByRole('link')
-      expect(button).toBeInTheDocument()
+    const button = screen.getByRole('link')
+    expect(button).toBeInTheDocument()
 
-      const text = screen.getByText(/home/)
-      expect(text).toBeInTheDocument()
-    })
+    const text = screen.getByText(/home/)
+    expect(text).toBeInTheDocument()
   })
-})
 
-describe('given a IconButton', () => {
   it('should aria-hidden true', async () => {
     render(<IconButton icon="home">button</IconButton>)
 
@@ -48,4 +42,16 @@ describe('given a IconButton', () => {
     const text = screen.getByText(/home/)
     expect(text).toHaveAttribute('aria-hidden', 'false')
   })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+
+    render(
+      <IconButton icon="home" ref={ref}>
+        button
+      </IconButton>
+    )
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/core/tests/Link.test.tsx b/packages/core/tests/Link.test.tsx
new file mode 100644
index 0000000..71c1c12
--- /dev/null
+++ b/packages/core/tests/Link.test.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { Link } from '../src'
+
+describe('Link', () => {
+  it('should render a link', async () => {
+    render(<Link href="/">Button</Link>)
+
+    const link = screen.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).not.toHaveAttribute('target')
+  })
+
+  it('should render a link with icon', async () => {
+    render(<Link href="https://google.com">Button</Link>)
+
+    const link = screen.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('target')
+
+    const text = screen.getByText(/open_in_new/)
+    expect(text).toBeInTheDocument()
+  })
+
+  it('should render a link with icon', async () => {
+    render(
+      <Link href="/test" target="_blank">
+        Button
+      </Link>
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('target')
+
+    const text = screen.getByText(/open_in_new/)
+    expect(text).toBeInTheDocument()
+  })
+
+  it('should labeled text from Button', async () => {
+    render(<Link href="/">here</Link>)
+
+    const text = screen.getByText(/here/)
+    expect(text).toBeInTheDocument()
+  })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+
+    render(
+      <Link ref={ref} href="/">
+        link
+      </Link>
+    )
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/packages/core/tests/Slot.test.tsx b/packages/core/tests/Slot.test.tsx
deleted file mode 100644
index b11c1de..0000000
--- a/packages/core/tests/Slot.test.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react'
-import { describe, beforeEach, it, expect, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-
-import { Slot } from '../src'
-
-type TriggerProps = React.ComponentProps<'button'> & { as: React.ElementType }
-
-const Trigger = ({ as: Comp = 'button', ...props }: TriggerProps) => (
-  <Comp {...props} />
-)
-
-describe('given a slotted Trigger', () => {
-  describe('with onClick on itself', () => {
-    const handleClick = vi.fn()
-
-    beforeEach(() => {
-      handleClick.mockReset()
-      render(
-        <Trigger as={Slot} onClick={handleClick}>
-          <button type="button">Click me</button>
-        </Trigger>
-      )
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    it('should call the onClick passed to the Trigger', async () => {
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  describe('with onClick on the child', () => {
-    const handleClick = vi.fn()
-
-    beforeEach(() => {
-      handleClick.mockReset()
-      render(
-        <Trigger as={Slot}>
-          <button type="button" onClick={handleClick}>
-            Click me
-          </button>
-        </Trigger>
-      )
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    it("should call the child's onClick", async () => {
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  describe('with onClick on itself AND the child', () => {
-    const handleTriggerClick = vi.fn()
-    const handleChildClick = vi.fn()
-
-    beforeEach(() => {
-      handleTriggerClick.mockReset()
-      handleChildClick.mockReset()
-      render(
-        <Trigger as={Slot} onClick={handleTriggerClick}>
-          <button type="button" onClick={handleChildClick}>
-            Click me
-          </button>
-        </Trigger>
-      )
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    it("should not call the Trigger's onClick", async () => {
-      expect(handleTriggerClick).not.toHaveBeenCalledTimes(1)
-    })
-
-    it("should call the child's onClick", async () => {
-      expect(handleChildClick).toHaveBeenCalledTimes(1)
-    })
-  })
-})
diff --git a/packages/forms/package.json b/packages/forms/package.json
index b4d05ad..886f5f8 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/forms",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "",
   "keywords": [],
   "author": "glassonion1",
@@ -38,9 +38,6 @@
     "build:types": "tsc && tsc-alias",
     "test": "vitest"
   },
-  "dependencies": {
-    "@sakura-ui/helper": "workspace:*"
-  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/packages/forms/src/components/Checkbox.tsx b/packages/forms/src/components/Checkbox.tsx
index 07aeb00..0328dc6 100644
--- a/packages/forms/src/components/Checkbox.tsx
+++ b/packages/forms/src/components/Checkbox.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx, Style } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 import {
   type InputSize,
@@ -8,12 +8,14 @@ import {
   iconStyles
 } from './inputStyle'
 
-export interface CheckboxProps
-  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
-  size?: InputSize
+export namespace Checkbox {
+  export interface Props
+    extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+    size?: InputSize
+  }
 }
 
-export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+export const Checkbox = React.forwardRef<HTMLInputElement, Checkbox.Props>(
   (props, ref) => {
     const { id, className, size = 'lg', children, ...restProps } = props
     const checkboxId = id || React.useId()
@@ -47,9 +49,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       peer-checked:bg-sea-600
       peer-checked:border-none
       peer-disabled:border-sumi-500
-      peer-focus-visible:ring-2
-      peer-focus-visible:ring-offset-2
-      peer-focus-visible:ring-wood-600
+      ${Style.Peer.focusRect}
     `
 
     return (
@@ -81,7 +81,6 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
               height="24"
               viewBox="0 0 24 24"
             >
-              <title>check</title>
               <g transform={`scale(${scales[size]} ${scales[size]})`}>
                 <path d="m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z" />
               </g>
diff --git a/packages/forms/src/components/FieldsetControl.tsx b/packages/forms/src/components/FieldsetControl.tsx
index 62ca552..da20678 100644
--- a/packages/forms/src/components/FieldsetControl.tsx
+++ b/packages/forms/src/components/FieldsetControl.tsx
@@ -1,20 +1,21 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 
-export interface FieldsetControlProps
-  extends React.ComponentPropsWithRef<'fieldset'> {
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
-  direction?: 'flex-col' | 'flex-row'
+export namespace FieldsetControl {
+  export interface Props extends React.ComponentPropsWithRef<'fieldset'> {
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+    direction?: 'flex-col' | 'flex-row'
+  }
 }
 
 export const FieldsetControl = React.forwardRef<
   HTMLFieldSetElement,
-  FieldsetControlProps
+  FieldsetControl.Props
 >((props, ref) => {
   const id = React.useId()
   const {
@@ -43,29 +44,25 @@ export const FieldsetControl = React.forwardRef<
 
   return (
     <ControllerContext.Provider value={context}>
-      <fieldset className={cx('mb-4', className)} ref={ref} {...restProps}>
+      <fieldset
+        className={cx('flex flex-col items-start gap-2', className)}
+        ref={ref}
+        {...restProps}
+      >
         <legend>
-          <p
-            className={cx('block mb-2 text-label', isInvalid && 'text-sun-800')}
-          >
+          <p className={cx('block text-label', isInvalid && 'text-sun-800')}>
             {labelText}
             {isRequired && <span className="text-sun-800">&nbsp;*</span>}
           </p>
         </legend>
         <div className={cx('inline-flex', styleDirection)}>{children}</div>
         {helperText && (
-          <p id={context.helperTextId} className="text-sup text-sumi-700 mt-2">
+          <p id={context.helperTextId} className="text-sup text-sumi-700">
             {helperText}
           </p>
         )}
         {isInvalid && (
-          <p
-            id={context.errorMessageId}
-            className={cx(
-              'text-label text-sun-800',
-              helperText ? 'mt-1' : 'mt-2'
-            )}
-          >
+          <p id={context.errorMessageId} className="text-label text-sun-800">
             {errorMessage}
           </p>
         )}
diff --git a/packages/forms/src/components/FileInput.tsx b/packages/forms/src/components/FileInput.tsx
index 726a374..8e58d96 100644
--- a/packages/forms/src/components/FileInput.tsx
+++ b/packages/forms/src/components/FileInput.tsx
@@ -1,14 +1,16 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx, Style } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
-import { InputSize } from './inputStyle'
+import type { InputSize } from './inputStyle'
 
-export interface FileInputProps
-  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
-  size?: InputSize
+export namespace FileInput {
+  export interface Props
+    extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+    size?: InputSize
+  }
 }
 
-export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
+export const FileInput = React.forwardRef<HTMLInputElement, FileInput.Props>(
   (props, ref) => {
     const { id, className, size = 'lg', ...restProps } = props
     const ctx = React.useContext(ControllerContext)
@@ -34,7 +36,7 @@ export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
       file:disabled:cursor-not-allowed
     `
 
-    const secondary = `
+    const outline = `
       file:text-sea-900
       file:hover:text-sea-1000
       file:active:text-sea-1200
@@ -50,10 +52,9 @@ export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
       text-sumi-900
       rounded-lg
       outline-offset-2
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-600
       aria-invalid:text-sun-800
+      ${Style.hoverUnderline}
+      ${Style.focusRounded}
     `
 
     const sizeStyles: { [key in InputSize]: string } = {
@@ -86,7 +87,7 @@ export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
       <input
         type="file"
         id={id || ctx.id}
-        className={cx(base, secondary, sizeStyles[size], styleInput, className)}
+        className={cx(base, outline, sizeStyles[size], styleInput, className)}
         aria-describedby={ctx.helperTextId}
         aria-errormessage={ctx.errorMessageId}
         aria-invalid={ctx.isInvalid ?? false}
diff --git a/packages/forms/src/components/Input.tsx b/packages/forms/src/components/Input.tsx
index 95771ee..3046d5e 100644
--- a/packages/forms/src/components/Input.tsx
+++ b/packages/forms/src/components/Input.tsx
@@ -7,12 +7,14 @@ import {
   borderedInputSizeStyles
 } from './inputStyle'
 
-export interface InputProps
-  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
-  size?: InputSize
+export namespace Input {
+  export interface Props
+    extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+    size?: InputSize
+  }
 }
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+export const Input = React.forwardRef<HTMLInputElement, Input.Props>(
   (props, ref) => {
     const { id, className, size = 'lg', ...restProps } = props
     const ctx = React.useContext(ControllerContext)
diff --git a/packages/forms/src/components/LabelControl.tsx b/packages/forms/src/components/LabelControl.tsx
index 99c8c61..5ed9ee5 100644
--- a/packages/forms/src/components/LabelControl.tsx
+++ b/packages/forms/src/components/LabelControl.tsx
@@ -2,18 +2,19 @@ import React from 'react'
 import { cx } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 
-export interface LabelControlProps
-  extends React.ComponentPropsWithRef<'label'> {
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
+export namespace LabelControl {
+  export interface Props extends React.ComponentPropsWithRef<'label'> {
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+  }
 }
 
 export const LabelControl = React.forwardRef<
   HTMLLabelElement,
-  LabelControlProps
+  LabelControl.Props
 >((props, ref) => {
   const id = React.useId()
   const {
@@ -45,9 +46,9 @@ export const LabelControl = React.forwardRef<
 
   return (
     <ControllerContext.Provider value={context}>
-      <div className={cx('mb-4', className)}>
+      <div className={cx('flex flex-col items-start gap-2', className)}>
         <label
-          className={cx('block mb-2 text-label', isInvalid && 'text-sun-800')}
+          className={cx('block text-label', isInvalid && 'text-sun-800')}
           htmlFor={context.id}
           ref={ref}
           {...restProps}
@@ -58,16 +59,13 @@ export const LabelControl = React.forwardRef<
           )}
         </label>
         {helperText && (
-          <p id={context.helperTextId} className={cx(styleHelp, 'mb-2')}>
+          <p id={context.helperTextId} className={styleHelp}>
             {helperText}
           </p>
         )}
         {children}
         {isInvalid && (
-          <p
-            id={context.errorMessageId}
-            className={cx(styleError, helperText ? 'mt-1' : 'mt-2')}
-          >
+          <p id={context.errorMessageId} className={styleError}>
             {errorMessage}
           </p>
         )}
diff --git a/packages/forms/src/components/Radio.tsx b/packages/forms/src/components/Radio.tsx
index 5a2a15e..7535f49 100644
--- a/packages/forms/src/components/Radio.tsx
+++ b/packages/forms/src/components/Radio.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '@sakura-ui/helper'
+import { cx, Style } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 import {
   type InputSize,
@@ -8,12 +8,14 @@ import {
   iconStyles
 } from './inputStyle'
 
-export interface RadioProps
-  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
-  size?: InputSize
+export namespace Radio {
+  export interface Props
+    extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+    size?: InputSize
+  }
 }
 
-export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+export const Radio = React.forwardRef<HTMLInputElement, Radio.Props>(
   (props, ref) => {
     const { id, className, size = 'lg', children, ...restProps } = props
     const radioId = id || React.useId()
@@ -39,9 +41,7 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       peer-checked:bg-sea-600
       peer-checked:border-sea-600
       peer-disabled:border-sumi-500
-      peer-focus-visible:ring-2
-      peer-focus-visible:ring-offset-2
-      peer-focus-visible:ring-wood-600
+      ${Style.Peer.focusRect}
     `
 
     const radioSizes: { [key in InputSize]: string } = {
diff --git a/packages/forms/src/components/Select.tsx b/packages/forms/src/components/Select.tsx
index e2f3be3..24ebc9c 100644
--- a/packages/forms/src/components/Select.tsx
+++ b/packages/forms/src/components/Select.tsx
@@ -7,12 +7,14 @@ import {
   borderedInputSizeStyles
 } from './inputStyle'
 
-export interface SelectProps
-  extends Omit<React.ComponentPropsWithRef<'select'>, 'size'> {
-  size?: InputSize
+export namespace Select {
+  export interface Props
+    extends Omit<React.ComponentPropsWithRef<'select'>, 'size'> {
+    size?: InputSize
+  }
 }
 
-export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+export const Select = React.forwardRef<HTMLSelectElement, Select.Props>(
   (props, ref) => {
     const { id, className, size = 'lg', children, ...restProps } = props
     const ctx = React.useContext(ControllerContext)
@@ -45,7 +47,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
             style,
             borderedInputBaseStyles,
             borderedInputSizeStyles[size],
-            props.className
+            className
           )}
           aria-describedby={ctx.helperTextId}
           aria-errormessage={ctx.errorMessageId}
diff --git a/packages/forms/src/components/Textarea.tsx b/packages/forms/src/components/Textarea.tsx
index 909725b..457b645 100644
--- a/packages/forms/src/components/Textarea.tsx
+++ b/packages/forms/src/components/Textarea.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
-import { cx } from '@sakura-ui/helper'
+import { cx, Style } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 
-export interface TextareaProps
-  extends React.ComponentPropsWithRef<'textarea'> {}
+export namespace Textarea {
+  export interface Props extends React.ComponentPropsWithRef<'textarea'> {}
+}
 
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+export const Textarea = React.forwardRef<HTMLTextAreaElement, Textarea.Props>(
   (props, ref) => {
     const { id, className, children, onChange, maxLength, ...restProps } = props
 
@@ -32,14 +33,11 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       border
       border-solid
       border-sumi-900
-      outline-offset-2
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
       disabled:bg-transparent
       disabled:text-sumi-500
       disabled:border-sumi-500
       aria-invalid:border-sun-800
+      ${Style.focusRect}
     `
 
     return (
diff --git a/packages/forms/src/components/controlled/CheckboxGroup.tsx b/packages/forms/src/components/controlled/CheckboxGroup.tsx
index f3512c8..8177047 100644
--- a/packages/forms/src/components/controlled/CheckboxGroup.tsx
+++ b/packages/forms/src/components/controlled/CheckboxGroup.tsx
@@ -4,21 +4,23 @@ import { FieldsetControl } from '../FieldsetControl'
 import type { InputItem } from './InputItem'
 import type { InputSize } from '../inputStyle'
 
-export interface CheckboxGroupProps
-  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
-  items: InputItem[]
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
-  size?: InputSize
+export namespace CheckboxGroup {
+  export interface Props
+    extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
+    items: InputItem[]
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+    size?: InputSize
+  }
 }
 
 export const CheckboxGroup = React.forwardRef<
   HTMLFieldSetElement,
-  CheckboxGroupProps
+  CheckboxGroup.Props
 >((props, ref) => {
   const {
     items,
diff --git a/packages/forms/src/components/controlled/RadioGroup.tsx b/packages/forms/src/components/controlled/RadioGroup.tsx
index 8ff6751..5e1e65a 100644
--- a/packages/forms/src/components/controlled/RadioGroup.tsx
+++ b/packages/forms/src/components/controlled/RadioGroup.tsx
@@ -4,22 +4,24 @@ import { FieldsetControl } from '../FieldsetControl'
 import type { InputItem } from './InputItem'
 import type { InputSize } from '../inputStyle'
 
-export interface RadioGroupProps
-  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
-  items: InputItem[]
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
-  defaultValue?: string
-  size?: InputSize
+export namespace RadioGroup {
+  export interface Props
+    extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
+    items: InputItem[]
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+    defaultValue?: string
+    size?: InputSize
+  }
 }
 
 export const RadioGroup = React.forwardRef<
   HTMLFieldSetElement,
-  RadioGroupProps
+  RadioGroup.Props
 >((props, ref) => {
   const {
     items,
diff --git a/packages/forms/src/components/index.ts b/packages/forms/src/components/index.ts
index 0c73450..2cb2db9 100644
--- a/packages/forms/src/components/index.ts
+++ b/packages/forms/src/components/index.ts
@@ -1,8 +1,8 @@
-export { Checkbox, type CheckboxProps } from './Checkbox'
-export { Radio, type RadioProps } from './Radio'
-export { Select, type SelectProps } from './Select'
-export { FileInput, type FileInputProps } from './FileInput'
-export { Input, type InputProps } from './Input'
-export { Textarea, type TextareaProps } from './Textarea'
-export { LabelControl, type LabelControlProps } from './LabelControl'
-export { FieldsetControl, type FieldsetControlProps } from './FieldsetControl'
+export { Checkbox } from './Checkbox'
+export { Radio } from './Radio'
+export { Select } from './Select'
+export { FileInput } from './FileInput'
+export { Input } from './Input'
+export { Textarea } from './Textarea'
+export { LabelControl } from './LabelControl'
+export { FieldsetControl } from './FieldsetControl'
diff --git a/packages/forms/src/components/inputStyle.ts b/packages/forms/src/components/inputStyle.ts
index de3f71e..dc8615e 100644
--- a/packages/forms/src/components/inputStyle.ts
+++ b/packages/forms/src/components/inputStyle.ts
@@ -1,3 +1,5 @@
+import { Style } from '@sakura-ui/helper'
+
 export type InputSize = 'lg' | 'md' | 'sm'
 
 export const borderedInputBaseStyles = `
@@ -5,14 +7,11 @@ export const borderedInputBaseStyles = `
   border
   border-solid
   border-sumi-900
-  outline-offset-2
-  focus:outline
-  focus:outline-2
-  focus:outline-wood-500
   disabled:bg-transparent
   disabled:text-sumi-500
   disabled:border-sumi-500
   aria-invalid:border-sun-800
+  ${Style.focusRect}
 `
 
 // for text input and select
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index a1d819b..6a63bf3 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -9,15 +9,4 @@ export {
   FieldsetControl
 } from './components'
 
-export type {
-  CheckboxProps,
-  RadioProps,
-  SelectProps,
-  FileInputProps,
-  InputProps,
-  TextareaProps,
-  LabelControlProps,
-  FieldsetControlProps
-} from './components'
-
 export { CheckboxGroup, RadioGroup } from './components/controlled'
diff --git a/packages/forms/src/utils/class.ts b/packages/forms/src/utils/class.ts
deleted file mode 100644
index 600c063..0000000
--- a/packages/forms/src/utils/class.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// biome-ignore lint/suspicious/noExplicitAny:
-export const cx = (...classNames: any[]) => classNames.filter(Boolean).join(' ')
diff --git a/packages/helper/src/forward-ref.ts b/packages/helper/src/forward-ref.ts
new file mode 100644
index 0000000..fcdd77c
--- /dev/null
+++ b/packages/helper/src/forward-ref.ts
@@ -0,0 +1,41 @@
+/*
+MIT License
+Copyright (c) 2019 Segun Adebayo
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import React, {
+  type ComponentProps,
+  forwardRef as forwardReactRef
+} from 'react'
+import type { As, ComponentWithAs, RightJoinProps } from './types/component'
+
+export function forwardRef<Component extends As, Props extends object>(
+  component: React.ForwardRefRenderFunction<
+    // biome-ignore lint/suspicious/noExplicitAny:
+    any,
+    RightJoinProps<ComponentProps<Component>, Props> & {
+      as?: As
+    }
+  >
+) {
+  // @ts-ignore skip
+  return forwardReactRef(component) as unknown as ComponentWithAs<
+    Component,
+    Props
+  >
+}
diff --git a/packages/helper/src/index.ts b/packages/helper/src/index.ts
index d8e39e9..7ff22f8 100644
--- a/packages/helper/src/index.ts
+++ b/packages/helper/src/index.ts
@@ -2,19 +2,8 @@ export { focusableSelector } from './querySelector'
 export { mod } from './calc'
 export { cx } from './cx'
 export { treefy } from './treefy'
-export {
-  styleClickable,
-  styleFocusRectCondensed,
-  styleFocusRectCondensedWithBg,
-  styleFocusRect,
-  styleFocusRounded,
-  styleFocusCard,
-  styleFocusRectWithBg,
-  styleFocusRoundedWithBg,
-  styleHoverUnderline,
-  styleUnderline,
-  styleUnderlineNoDeco,
-  stylePopover,
-  stylePopoverPositionBottomRight,
-  stylePopoverPositionBottomLeft
-} from './styles'
+export { Style } from './styles'
+
+// Planned to be removed
+export { forwardRef } from './forward-ref'
+export type { ComponentWithAs } from './types/component'
diff --git a/packages/helper/src/styles.ts b/packages/helper/src/styles.ts
index 9e6d887..e8e5657 100644
--- a/packages/helper/src/styles.ts
+++ b/packages/helper/src/styles.ts
@@ -1,99 +1,116 @@
-export const styleClickable = `
-  px-2
-  min-h-[calc(44/16*1rem)]
-  border
-  border-transparent
-  rounded-lg
-  hover:bg-solid-grey-50
-`
-
-export const styleSelected = `
-  rounded-full
-  bg-yellow-50
-`
-
-const styleFocus = `
-  focus-visible:outline
-  focus-visible:outline-4
-  focus-visible:outline-black
-  focus-visible:ring-yellow-300
-`
-
-export const styleFocusRectCondensed = `
-  ${styleFocus}
-  focus-visible:-outline-offset-4
-  focus-visible:ring-[calc(6/16*1rem)]
-  focus-visible:ring-inset
-`
-
-export const styleFocusRectCondensedWithBg = `
-  ${styleFocusRectCondensed}
-  focus-visible:bg-yellow-300
-`
-
-export const styleFocusRect = `
-  ${styleFocus}
-  focus-visible:outline-offset-[calc(2/16*1rem)]
-  focus-visible:ring-[calc(2/16*1rem)]
-`
-
-export const styleFocusRounded = `
-  ${styleFocusRect}
-  focus-visible:rounded
-`
-
-export const styleFocusCard = `
-  ${styleFocusRect}
-  focus-visible:rounded-2xl
-  sm:focus-visible:rounded-3xl
-`
-
-export const styleFocusRectWithBg = `
-  ${styleFocusRect}
-  focus-visible:bg-yellow-300
-`
-
-export const styleFocusRoundedWithBg = `
-  ${styleFocusRectWithBg}
-  focus-visible:rounded
-`
-
-export const styleHoverUnderline = `
-  hover:underline
-  hover:underline-offset-[calc(3/16*1rem)]
-`
-
-export const styleUnderline = `
-  underline
-  underline-offset-[calc(3/16*1rem)]
-  hover:decoration-[calc(3/16*1rem)]
-`
-
-export const styleUnderlineNoDeco = `
-  underline
-  underline-offset-[calc(3/16*1rem)]
-`
-
-export const stylePopover = `
-  min-w-fit
-  w-auto
-  py-2
-  bg-white
-  shadow-1
-  rounded-lg
-  border
-  border-solid-grey-420
-  has-[>:nth-child(7)]:rounded-r-none
-`
-
-export const stylePopoverPositionBottomRight = `
-  absolute
-  top-11
-  right-0
-`
-
-export const stylePopoverPositionBottomLeft = `
-  absolute
-  top-11
-  left-0
-`
+export namespace Style {
+  export const clickable = `
+    px-2
+    min-h-[calc(44/16*1rem)]
+    border
+    border-transparent
+    rounded-lg
+    hover:bg-solid-grey-50
+  `
+
+  export const selected = `
+    rounded-full
+    bg-yellow-50
+  `
+
+  const focus = `
+    focus-visible:outline
+    focus-visible:outline-4
+    focus-visible:outline-black
+    focus-visible:ring-yellow-300
+  `
+
+  export const focusRectCondensed = `
+    ${focus}
+    focus-visible:-outline-offset-4
+    focus-visible:ring-[calc(6/16*1rem)]
+    focus-visible:ring-inset
+  `
+
+  export const focusRectCondensedWithBg = `
+    ${focusRectCondensed}
+    focus-visible:bg-yellow-300
+  `
+
+  export const focusRect = `
+    ${focus}
+    focus-visible:outline-offset-[calc(2/16*1rem)]
+    focus-visible:ring-[calc(2/16*1rem)]
+  `
+
+  export const focusRounded = `
+    ${focusRect}
+    focus-visible:rounded
+  `
+
+  export const focusCard = `
+    ${focusRect}
+    focus-visible:rounded-2xl
+    sm:focus-visible:rounded-3xl
+  `
+
+  export const focusRectWithBg = `
+    ${focusRect}
+    focus-visible:bg-yellow-300
+  `
+
+  export const focusRoundedWithBg = `
+    ${focusRectWithBg}
+    focus-visible:rounded
+  `
+
+  export const hoverUnderline = `
+    hover:underline
+    hover:underline-offset-[calc(3/16*1rem)]
+  `
+
+  export const underline = `
+    underline
+    underline-offset-[calc(3/16*1rem)]
+    hover:decoration-[calc(3/16*1rem)]
+  `
+
+  export const underlineNoDeco = `
+    underline
+    underline-offset-[calc(3/16*1rem)]
+  `
+
+  export const popover = `
+    min-w-fit
+    w-auto
+    py-2
+    bg-white
+    shadow-1
+    rounded-lg
+    border
+    border-solid-grey-420
+    has-[>:nth-child(7)]:rounded-r-none
+  `
+
+  export const popoverPositionBottomRight = `
+    absolute
+    top-11
+    right-0
+  `
+
+  export const popoverPositionBottomLeft = `
+    absolute
+    top-11
+    left-0
+  `
+
+  export namespace Peer {
+    export const focus = `
+      peer-focus-visible:outline
+      peer-focus-visible:outline-4
+      peer-focus-visible:outline-black
+      peer-focus-visible:ring-yellow-300
+    `
+
+    export const focusRect = `
+      ${focus}
+      peer-focus-visible:outline-offset-[calc(2/16*1rem)]
+      peer-focus-visible:ring-[calc(2/16*1rem)]
+    `
+  }
+}
diff --git a/packages/helper/src/types/component.ts b/packages/helper/src/types/component.ts
new file mode 100644
index 0000000..b919a6e
--- /dev/null
+++ b/packages/helper/src/types/component.ts
@@ -0,0 +1,79 @@
+/*
+MIT License
+Copyright (c) 2019 Segun Adebayo
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import React, { type ComponentProps } from 'react'
+
+// biome-ignore lint/suspicious/noExplicitAny:
+export type As<Props = any> = React.ElementType<Props>
+
+export type OmitCommonProps<
+  Target,
+  // biome-ignore lint/suspicious/noExplicitAny:
+  OmitAdditionalProps extends keyof any = never
+> = Omit<Target, 'as' | OmitAdditionalProps>
+
+export type RightJoinProps<
+  SourceProps extends object = object,
+  OverrideProps extends object = object
+> = OmitCommonProps<SourceProps, keyof OverrideProps> & OverrideProps
+
+type MergeWithAs<
+  ComponentProps extends object,
+  AsProps extends object,
+  AdditionalProps extends object = object,
+  AsComponent extends As = As
+> = RightJoinProps<ComponentProps, AdditionalProps> &
+  RightJoinProps<AsProps, AdditionalProps> & {
+    as?: AsComponent
+  }
+
+export type PropsWithAs<
+  Component extends As,
+  Props extends object
+> = RightJoinProps<ComponentProps<Component>, Props> & {
+  as?: As
+}
+
+export type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
+  as?: As
+}
+
+export type ComponentWithAs<
+  Component extends As,
+  Props extends object = object
+> = {
+  <AsComponent extends As = Component>(
+    props: MergeWithAs<
+      React.ComponentProps<Component>,
+      React.ComponentProps<AsComponent>,
+      Props,
+      AsComponent
+    >
+    // biome-ignore lint/correctness/noUndeclaredVariables:
+  ): JSX.Element
+  displayName?: string
+  // biome-ignore lint/suspicious/noExplicitAny:
+  propTypes?: React.WeakValidationMap<any>
+  // biome-ignore lint/suspicious/noExplicitAny:
+  contextTypes?: React.ValidationMap<any>
+  // biome-ignore lint/suspicious/noExplicitAny:
+  defaultProps?: Partial<any>
+  id?: string
+}
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
index 57d009e..f787364 100644
--- a/packages/markdown/package.json
+++ b/packages/markdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/markdown",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "description": "",
   "keywords": [
     "markdown"
diff --git a/packages/markdown/src/components/Markdown.tsx b/packages/markdown/src/components/Markdown.tsx
index d8b49f1..430719d 100644
--- a/packages/markdown/src/components/Markdown.tsx
+++ b/packages/markdown/src/components/Markdown.tsx
@@ -230,6 +230,9 @@ const Iframe = (props: IframeProps) => {
   )
 }
 
+const sleep = (time: number) =>
+  new Promise((resolve) => setTimeout(resolve, time))
+
 type Props = {
   tocTitle?: string
   showToc?: boolean
@@ -246,77 +249,93 @@ export const Markdown = ({
   const [toc, setToc] = React.useState<HeadingItem[]>([])
   const [element, setElement] = React.useState(<React.Fragment />)
 
-  React.useEffect(() => {
-    setToc(markdown2Headings(children))
-    setElement(markdown2ReactElements(children))
-  }, [children])
-
-  const markdown2Headings = (md: string) => {
+  const markdown2Headings = React.useCallback((md: string) => {
     const result: any = remark().use(headingsPlugin).processSync(md)
 
     const headings: HeadingItem[] = result.data.fm.headings.filter(
-      (obj: any) => obj.depth < 3
+      (obj: HeadingItem) => obj.depth < 3
     )
 
     return headings
-  }
+  }, [])
+
+  const markdown2ReactElements = React.useCallback(
+    (md: string) => {
+      const rhypeReactOptions = {
+        ...production,
+        components: {
+          a: Anchor,
+          article: Article,
+          button: Button,
+          code: Code,
+          dl: Faq,
+          dt: Question,
+          dd: Answer,
+          h1: H1,
+          h2: H2,
+          h3: H3,
+          h4: H4,
+          h5: H5,
+          h6: H6,
+          iframe: Iframe,
+          img: Img,
+          ul: Ul,
+          ol: Ol,
+          pre: Pre,
+          table: TableContainer,
+          caption: Caption,
+          thead: Thead,
+          tbody: Tbody,
+          th: Th,
+          tr: Tr,
+          td: Td,
+          div: Div
+        }
+      }
+
+      const elem = unified()
+        .use(remarkParse) // md    -> mdast     (Markdown Abstract Syntax Tree)
+        .use(remarkGfm) // mdast -> GFM mdast (GitHub Flavored Markdown Abstract Syntax Tree)
+        .use(remarkDirective) // support for directive syntax
+        .use(remarkBreaks)
+        .use(attrPlugin)
+        .use(youtubePlugin)
+        .use(linkButtonPlugin)
+        .use(cellPlugin)
+        .use(cardPlugin)
+        .use(faqPlugin)
+        .use(gridPlugin)
+        .use(remarkRehype, {
+          allowDangerousHtml: true
+        }) // mdast -> hast      (HTML Abstract Syntax Tree)
+        .use(rehypeRaw) // hast  -> hast
+        .use(rehypeExternalLinks, { target: '_blank' }) // hast  -> hast
+        .use(rebypeShiftHeding, { shift: shiftHeding }) // hast  -> hast
+        .use(rehypeSlug)
+        .use(rehypeReact, rhypeReactOptions as any) // hast  -> React Elements
+        .processSync(md).result
+      return elem
+    },
+    [shiftHeding]
+  )
 
-  const rhypeReactOptions = {
-    ...production,
-    components: {
-      a: Anchor,
-      article: Article,
-      button: Button,
-      code: Code,
-      dl: Faq,
-      dt: Question,
-      dd: Answer,
-      h1: H1,
-      h2: H2,
-      h3: H3,
-      h4: H4,
-      h5: H5,
-      h6: H6,
-      iframe: Iframe,
-      img: Img,
-      ul: Ul,
-      ol: Ol,
-      pre: Pre,
-      table: TableContainer,
-      caption: Caption,
-      thead: Thead,
-      tbody: Tbody,
-      th: Th,
-      tr: Tr,
-      td: Td,
-      div: Div
-    }
-  }
+  React.useEffect(() => {
+    setToc(markdown2Headings(children))
+    setElement(markdown2ReactElements(children))
+  }, [children, markdown2Headings, markdown2ReactElements])
 
-  const markdown2ReactElements = (md: string) => {
-    const elem = unified()
-      .use(remarkParse) // md    -> mdast     (Markdown Abstract Syntax Tree)
-      .use(remarkGfm) // mdast -> GFM mdast (GitHub Flavored Markdown Abstract Syntax Tree)
-      .use(remarkDirective) // support for directive syntax
-      .use(remarkBreaks)
-      .use(attrPlugin)
-      .use(youtubePlugin)
-      .use(linkButtonPlugin)
-      .use(cellPlugin)
-      .use(cardPlugin)
-      .use(faqPlugin)
-      .use(gridPlugin)
-      .use(remarkRehype, {
-        allowDangerousHtml: true
-      }) // mdast -> hast      (HTML Abstract Syntax Tree)
-      .use(rehypeRaw) // hast  -> hast
-      .use(rehypeExternalLinks, { target: '_blank' }) // hast  -> hast
-      .use(rebypeShiftHeding, { shift: shiftHeding }) // hast  -> hast
-      .use(rehypeSlug)
-      .use(rehypeReact, rhypeReactOptions as any) // hast  -> React Elements
-      .processSync(md).result
-    return elem
-  }
+  React.useEffect(() => {
+    // Necessary to make in-page links work.
+    const scrollToHash = async () => {
+      await sleep(500)
+      if (location.hash) {
+        document
+          .getElementById(decodeURI(location.hash.substring(1)))
+          ?.scrollIntoView()
+      }
+    }
+    scrollToHash()
+  }, [])
 
   const style = `
     rounded-3xl
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db48458..1712d73 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,30 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+catalogs:
+  default:
+    '@types/react':
+      specifier: ^18.3.5
+      version: 18.3.12
+    '@types/react-dom':
+      specifier: ^18.3.1
+      version: 18.3.1
+    autoprefixer:
+      specifier: ^10.4.20
+      version: 10.4.20
+    postcss:
+      specifier: ^8.4.49
+      version: 8.4.49
+    react:
+      specifier: ^18.3.1
+      version: 18.3.1
+    react-dom:
+      specifier: ^18.3.1
+      version: 18.3.1
+    tailwindcss:
+      specifier: ^3.4.15
+      version: 3.4.15
+
 importers:
 
   .:
@@ -64,35 +88,38 @@ importers:
   examples:
     dependencies:
       '@sakura-ui/core':
-        specifier: ^0.3.0-beta.1
-        version: 0.3.0-beta.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2)))
+        specifier: workspace:*
+        version: link:../packages/core
       '@sakura-ui/forms':
-        specifier: ^0.2.1
-        version: 0.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2)))
+        specifier: workspace:*
+        version: link:../packages/forms
+      '@sakura-ui/helper':
+        specifier: workspace:*
+        version: link:../packages/helper
       '@sakura-ui/tailwind-theme-plugin':
-        specifier: ^0.2.1
-        version: 0.2.2(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2)))
+        specifier: workspace:*
+        version: link:../packages/tailwind-theme-plugin
       clsx:
         specifier: ^2.1.0
         version: 2.1.1
       react:
-        specifier: ^18.3.1
+        specifier: 'catalog:'
         version: 18.3.1
       react-dom:
-        specifier: ^18.3.1
+        specifier: 'catalog:'
         version: 18.3.1(react@18.3.1)
       react-router-dom:
         specifier: ^6.23.1
         version: 6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwindcss:
-        specifier: ^3.4.11
+        specifier: 'catalog:'
         version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
     devDependencies:
       '@types/react':
-        specifier: ^18.3.5
+        specifier: 'catalog:'
         version: 18.3.12
       '@types/react-dom':
-        specifier: ^18.3.0
+        specifier: 'catalog:'
         version: 18.3.1
       '@types/react-router-dom':
         specifier: ^5.3.3
@@ -101,19 +128,20 @@ importers:
         specifier: ^3.7.0
         version: 3.7.2(vite@5.4.11(@types/node@22.10.1))
       autoprefixer:
-        specifier: ^10.4.19
+        specifier: 'catalog:'
         version: 10.4.20(postcss@8.4.49)
       postcss:
-        specifier: ^8.4.38
+        specifier: 'catalog:'
         version: 8.4.49
-      typescript:
-        specifier: ^5.4.5
-        version: 5.7.2
       vite:
         specifier: ^5.4.11
         version: 5.4.11(@types/node@22.10.1)
 
   packages/core:
+    dependencies:
+      '@sakura-ui/helper':
+        specifier: workspace:*
+        version: link:../helper
     devDependencies:
       '@testing-library/jest-dom':
         specifier: ^6.6.3
@@ -157,22 +185,22 @@ importers:
         version: 6.4.5(vitest@2.1.6(@types/node@22.10.1)(happy-dom@14.12.0)(jiti@1.21.6)(yaml@2.4.5))
       '@testing-library/react':
         specifier: ^16.0.0
-        version: 16.0.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 16.0.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.12
       '@types/react-dom':
         specifier: 'catalog:'
-        version: 18.3.0
+        version: 18.3.1
       autoprefixer:
         specifier: 'catalog:'
-        version: 10.4.19(postcss@8.4.38)
+        version: 10.4.20(postcss@8.4.49)
       happy-dom:
         specifier: ^14.12.0
         version: 14.12.0
       postcss:
         specifier: 'catalog:'
-        version: 8.4.38
+        version: 8.4.49
       react:
         specifier: 'catalog:'
         version: 18.3.1
@@ -181,7 +209,7 @@ importers:
         version: 18.3.1(react@18.3.1)
       tailwindcss:
         specifier: 'catalog:'
-        version: 3.4.4(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
 
   packages/helper:
     devDependencies:
@@ -190,13 +218,13 @@ importers:
         version: 6.4.5(vitest@2.1.6(@types/node@22.10.1)(happy-dom@14.12.0)(jiti@1.21.6)(yaml@2.4.5))
       '@testing-library/react':
         specifier: ^16.0.0
-        version: 16.0.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 16.0.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.12
       '@types/react-dom':
         specifier: 'catalog:'
-        version: 18.3.0
+        version: 18.3.1
       happy-dom:
         specifier: ^14.12.0
         version: 14.12.0
@@ -209,6 +237,12 @@ importers:
 
   packages/markdown:
     dependencies:
+      '@sakura-ui/core':
+        specifier: workspace:*
+        version: link:../core
+      '@sakura-ui/helper':
+        specifier: workspace:*
+        version: link:../helper
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
@@ -266,7 +300,7 @@ importers:
         version: 6.4.5(vitest@2.1.6(@types/node@22.10.1)(happy-dom@14.12.0)(jiti@1.21.6)(yaml@2.4.5))
       '@testing-library/react':
         specifier: ^16.0.0
-        version: 16.0.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 16.0.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/mdast':
         specifier: ^4.0.4
         version: 4.0.4
@@ -275,19 +309,19 @@ importers:
         version: 18.3.12
       '@types/react-dom':
         specifier: 'catalog:'
-        version: 18.3.0
+        version: 18.3.1
       '@types/unist':
         specifier: ^3.0.2
         version: 3.0.2
       autoprefixer:
         specifier: 'catalog:'
-        version: 10.4.19(postcss@8.4.38)
+        version: 10.4.20(postcss@8.4.49)
       happy-dom:
         specifier: ^14.12.0
         version: 14.12.0
       postcss:
         specifier: 'catalog:'
-        version: 8.4.38
+        version: 8.4.49
       react:
         specifier: 'catalog:'
         version: 18.3.1
@@ -296,7 +330,7 @@ importers:
         version: 18.3.1(react@18.3.1)
       tailwindcss:
         specifier: 'catalog:'
-        version: 3.4.11(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
 
   packages/tailwind-theme-plugin:
     devDependencies:
@@ -305,13 +339,13 @@ importers:
         version: 0.1.6
       autoprefixer:
         specifier: 'catalog:'
-        version: 10.4.19(postcss@8.4.38)
+        version: 10.4.20(postcss@8.4.49)
       postcss:
         specifier: 'catalog:'
-        version: 8.4.38
+        version: 8.4.49
       tailwindcss:
         specifier: 'catalog:'
-        version: 3.4.4(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
 
 packages:
 
@@ -820,25 +854,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@sakura-ui/core@0.3.0-beta.1':
-    resolution: {integrity: sha512-WRRspHK8x77apZsNdAlYATDUmaqh1g4epGOyaOcUDoPa1jKpyo51MzlxIv+eulz4jri7wRQjDA6X1MK4vE/asQ==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      tailwindcss: ^3.4.5
-
-  '@sakura-ui/forms@0.2.1':
-    resolution: {integrity: sha512-qHSSMwGgbWowedKcwXIiMd4CP9GvOwCx5JHGSgT691ylFbI5tq9kbIT+ikrwCTGFhNcjTGLkR/GT8rgz+upMhA==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      tailwindcss: ^3.2.7
-
-  '@sakura-ui/tailwind-theme-plugin@0.2.2':
-    resolution: {integrity: sha512-Hb3ew7zT792w2E5GYbOOcbbR71c9YJX6gJJo+5mSXVEza7mvNUZAFDCjDeUZ+n2dqN06Ii6Wq3i00olP7kq+oA==}
-    peerDependencies:
-      tailwindcss: ^3.2.7
-
   '@swc/core-darwin-arm64@1.9.3':
     resolution: {integrity: sha512-hGfl/KTic/QY4tB9DkTbNuxy5cV4IeejpPD4zo+Lzt4iLlDWIeANL4Fkg67FiVceNJboqg48CUX+APhDHO5G1w==}
     engines: {node: '>=10'}
@@ -1018,9 +1033,6 @@ packages:
   '@types/prop-types@15.7.12':
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
 
-  '@types/react-dom@18.3.0':
-    resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
-
   '@types/react-dom@18.3.1':
     resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
 
@@ -1133,13 +1145,6 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  autoprefixer@10.4.19:
-    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
   autoprefixer@10.4.20:
     resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1164,11 +1169,6 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.23.1:
-    resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
   browserslist@4.24.2:
     resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -1182,9 +1182,6 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
-  caniuse-lite@1.0.30001629:
-    resolution: {integrity: sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==}
-
   caniuse-lite@1.0.30001684:
     resolution: {integrity: sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==}
 
@@ -1328,9 +1325,6 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  electron-to-chromium@1.4.796:
-    resolution: {integrity: sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA==}
-
   electron-to-chromium@1.5.67:
     resolution: {integrity: sha512-nz88NNBsD7kQSAGGJyp8hS6xSPtWwqNogA0mjtc2nUYeEf3nURK9qpV18TuBdDmEDgVWotS8Wkzf+V52dSQ/LQ==}
 
@@ -1357,10 +1351,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
-    engines: {node: '>=6'}
-
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -1798,9 +1788,6 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  node-releases@2.0.14:
-    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
-
   node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
@@ -1931,10 +1918,6 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.4.38:
-    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.4.40:
     resolution: {integrity: sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2152,11 +2135,6 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tailwindcss@3.4.4:
-    resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -2242,12 +2220,6 @@ packages:
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
-  update-browserslist-db@1.0.16:
-    resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
   update-browserslist-db@1.1.1:
     resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
@@ -2723,22 +2695,6 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.28.0':
     optional: true
 
-  '@sakura-ui/core@0.3.0-beta.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2)))':
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
-
-  '@sakura-ui/forms@0.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2)))':
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
-
-  '@sakura-ui/tailwind-theme-plugin@0.2.2(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2)))':
-    dependencies:
-      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
-
   '@swc/core-darwin-arm64@1.9.3':
     optional: true
 
@@ -2825,7 +2781,7 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/react@16.0.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@16.0.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
       '@testing-library/dom': 10.4.0
@@ -2833,7 +2789,7 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.12
-      '@types/react-dom': 18.3.0
+      '@types/react-dom': 18.3.1
 
   '@testing-library/react@16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -2885,10 +2841,6 @@ snapshots:
 
   '@types/prop-types@15.7.12': {}
 
-  '@types/react-dom@18.3.0':
-    dependencies:
-      '@types/react': 18.3.12
-
   '@types/react-dom@18.3.1':
     dependencies:
       '@types/react': 18.3.12
@@ -3008,16 +2960,6 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  autoprefixer@10.4.19(postcss@8.4.38):
-    dependencies:
-      browserslist: 4.23.1
-      caniuse-lite: 1.0.30001629
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-value-parser: 4.2.0
-
   autoprefixer@10.4.20(postcss@8.4.49):
     dependencies:
       browserslist: 4.24.2
@@ -3042,13 +2984,6 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.23.1:
-    dependencies:
-      caniuse-lite: 1.0.30001629
-      electron-to-chromium: 1.4.796
-      node-releases: 2.0.14
-      update-browserslist-db: 1.0.16(browserslist@4.23.1)
-
   browserslist@4.24.2:
     dependencies:
       caniuse-lite: 1.0.30001684
@@ -3060,8 +2995,6 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
-  caniuse-lite@1.0.30001629: {}
-
   caniuse-lite@1.0.30001684: {}
 
   ccount@2.0.1: {}
@@ -3182,8 +3115,6 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  electron-to-chromium@1.4.796: {}
-
   electron-to-chromium@1.5.67: {}
 
   emoji-regex@8.0.0: {}
@@ -3247,8 +3178,6 @@ snapshots:
       '@esbuild/win32-ia32': 0.24.0
       '@esbuild/win32-x64': 0.24.0
 
-  escalade@3.1.2: {}
-
   escalade@3.2.0: {}
 
   escape-string-regexp@1.0.5: {}
@@ -3938,8 +3867,6 @@ snapshots:
 
   nanoid@3.3.7: {}
 
-  node-releases@2.0.14: {}
-
   node-releases@2.0.18: {}
 
   normalize-path@3.0.0: {}
@@ -4053,11 +3980,6 @@ snapshots:
       postcss: 8.4.40
       postcss-selector-parser: 6.1.0
 
-  postcss-nested@6.0.1(postcss@8.4.49):
-    dependencies:
-      postcss: 8.4.49
-      postcss-selector-parser: 6.1.0
-
   postcss-nested@6.2.0(postcss@8.4.49):
     dependencies:
       postcss: 8.4.49
@@ -4075,12 +3997,6 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.4.38:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
   postcss@8.4.40:
     dependencies:
       nanoid: 3.3.7
@@ -4418,33 +4334,6 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.3
-      lilconfig: 2.1.0
-      micromatch: 4.0.7
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.49
-      postcss-import: 15.1.0(postcss@8.4.49)
-      postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.3)(@types/node@22.10.1)(typescript@5.7.2))
-      postcss-nested: 6.0.1(postcss@8.4.49)
-      postcss-selector-parser: 6.1.0
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -4544,12 +4433,6 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  update-browserslist-db@1.0.16(browserslist@4.23.1):
-    dependencies:
-      browserslist: 4.23.1
-      escalade: 3.1.2
-      picocolors: 1.0.1
-
   update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
       browserslist: 4.24.2
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 1a2a5b7..90eb481 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,7 +1,7 @@
 packages:
   - 'packages/**'
+  - 'examples/**'
   - '!**/test/**'
-  - '!examples/**'
 
 catalog:
   '@types/react': ^18.3.5