diff --git a/component-docs/metadatas/component.ts b/component-docs/metadatas/component.ts
index b3e9a1fe2..2b932fab2 100644
--- a/component-docs/metadatas/component.ts
+++ b/component-docs/metadatas/component.ts
@@ -13,6 +13,18 @@ export const componentMetadatas: ComponentMetadataSchema[] = [
     dependencies: ["@radix-ui/react-slot"],
     snippets: ["component/action-button.tsx"],
   },
+  {
+    name: "action-chip",
+    type: "component",
+    dependencies: ["@radix-ui/react-slot"],
+    snippets: ["component/action-chip.tsx"],
+  },
+  {
+    name: "control-chip",
+    type: "component",
+    dependencies: ["@radix-ui/react-slot"],
+    snippets: ["component/control-chip.tsx"],
+  },
   {
     name: "checkbox",
     type: "component",
diff --git a/component-docs/public/__mdx__/component/action-chip.mdx b/component-docs/public/__mdx__/component/action-chip.mdx
new file mode 100644
index 000000000..08792730f
--- /dev/null
+++ b/component-docs/public/__mdx__/component/action-chip.mdx
@@ -0,0 +1,46 @@
+```tsx copy filename="action-chip.tsx"
+import { Slot } from "@radix-ui/react-slot";
+import { actionChip, type ActionChipVariantProps } from "@seed-design/recipe/actionChip";
+import clsx from "clsx";
+import * as React from "react";
+
+import "@seed-design/stylesheet/actionChip.css";
+
+export interface ActionChipProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    ActionChipVariantProps {
+  prefixIcon?: React.ReactNode;
+
+  suffixIcon?: React.ReactNode;
+}
+
+export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
+  (
+    {
+      className,
+      size = "medium",
+      layout = "withText",
+      children,
+      prefixIcon,
+      suffixIcon,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const classNames = actionChip({ size, layout });
+    return (
+      <button ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}
+        {layout === "withText" ? (
+          <span className={classNames.label}>{children}</span>
+        ) : (
+          <Slot className={classNames.icon}>{children}</Slot>
+        )}
+        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}
+      </button>
+    );
+  },
+);
+ActionChip.displayName = "ActionChip";
+
+```
diff --git a/component-docs/public/__mdx__/component/control-chip.mdx b/component-docs/public/__mdx__/component/control-chip.mdx
new file mode 100644
index 000000000..b42582a2e
--- /dev/null
+++ b/component-docs/public/__mdx__/component/control-chip.mdx
@@ -0,0 +1,62 @@
+```tsx copy filename="control-chip.tsx"
+import { Slot } from "@radix-ui/react-slot";
+import { controlChip, type ControlChipVariantProps } from "@seed-design/recipe/controlChip";
+import clsx from "clsx";
+import * as React from "react";
+
+import "@seed-design/stylesheet/controlChip.css";
+import { UseCheckboxProps, useCheckbox } from "@seed-design/react-checkbox";
+import { visuallyHidden } from "../util/visuallyHidden";
+
+export interface ControlChipToggleProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    UseCheckboxProps,
+    ControlChipVariantProps {
+  prefixIcon?: React.ReactNode;
+
+  suffixIcon?: React.ReactNode;
+}
+
+const ControlChipToggle = React.forwardRef<HTMLInputElement, ControlChipToggleProps>(
+  (
+    {
+      className,
+      size = "medium",
+      layout = "withText",
+      children,
+      prefixIcon,
+      suffixIcon,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const classNames = controlChip({ size, layout });
+    const { rootProps, hiddenInputProps, restProps } = useCheckbox(otherProps);
+    return (
+      <label {...rootProps} className={clsx(classNames.root, className)}>
+        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}
+        {layout === "withText" ? (
+          <span className={classNames.label}>{children}</span>
+        ) : (
+          <Slot className={classNames.icon}>{children}</Slot>
+        )}
+        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}
+        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />
+      </label>
+    );
+  },
+);
+ControlChipToggle.displayName = "ControlChip.Toggle";
+
+export const ControlChip = Object.assign(
+  () => {
+    console.warn(
+      "ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.",
+    );
+  },
+  {
+    Toggle: ControlChipToggle,
+  },
+);
+
+```
diff --git a/component-docs/public/__mdx__/react/action-chip-icon-only.mdx b/component-docs/public/__mdx__/react/action-chip-icon-only.mdx
new file mode 100644
index 000000000..33f4086dd
--- /dev/null
+++ b/component-docs/public/__mdx__/react/action-chip-icon-only.mdx
@@ -0,0 +1,13 @@
+```tsx copy
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipIconOnly() {
+  return (
+    <ActionChip layout="iconOnly">
+      <IconAddFill />
+    </ActionChip>
+  );
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/action-chip-medium.mdx b/component-docs/public/__mdx__/react/action-chip-medium.mdx
new file mode 100644
index 000000000..52001497a
--- /dev/null
+++ b/component-docs/public/__mdx__/react/action-chip-medium.mdx
@@ -0,0 +1,8 @@
+```tsx copy
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipMedium() {
+  return <ActionChip size="medium">라벨</ActionChip>;
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/action-chip-prefix-icon.mdx b/component-docs/public/__mdx__/react/action-chip-prefix-icon.mdx
new file mode 100644
index 000000000..a64a909de
--- /dev/null
+++ b/component-docs/public/__mdx__/react/action-chip-prefix-icon.mdx
@@ -0,0 +1,9 @@
+```tsx copy
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipPrefixIcon() {
+  return <ActionChip prefixIcon={<IconAddFill />}>라벨</ActionChip>;
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/action-chip-preview.mdx b/component-docs/public/__mdx__/react/action-chip-preview.mdx
new file mode 100644
index 000000000..7a8b94278
--- /dev/null
+++ b/component-docs/public/__mdx__/react/action-chip-preview.mdx
@@ -0,0 +1,8 @@
+```tsx copy
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipPreview() {
+  return <ActionChip>라벨</ActionChip>;
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/action-chip-small.mdx b/component-docs/public/__mdx__/react/action-chip-small.mdx
new file mode 100644
index 000000000..35fcae153
--- /dev/null
+++ b/component-docs/public/__mdx__/react/action-chip-small.mdx
@@ -0,0 +1,8 @@
+```tsx copy
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipSmall() {
+  return <ActionChip size="small">라벨</ActionChip>;
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/control-chip-icon-only.mdx b/component-docs/public/__mdx__/react/control-chip-icon-only.mdx
new file mode 100644
index 000000000..4154e3c16
--- /dev/null
+++ b/component-docs/public/__mdx__/react/control-chip-icon-only.mdx
@@ -0,0 +1,13 @@
+```tsx copy
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ControlChipIconOnly() {
+  return (
+    <ControlChip.Toggle layout="iconOnly">
+      <IconAddFill />
+    </ControlChip.Toggle>
+  );
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/control-chip-medium.mdx b/component-docs/public/__mdx__/react/control-chip-medium.mdx
new file mode 100644
index 000000000..27a39ca06
--- /dev/null
+++ b/component-docs/public/__mdx__/react/control-chip-medium.mdx
@@ -0,0 +1,8 @@
+```tsx copy
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ActionChipMedium() {
+  return <ControlChip.Toggle size="medium">라벨</ControlChip.Toggle>;
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/control-chip-prefix-icon.mdx b/component-docs/public/__mdx__/react/control-chip-prefix-icon.mdx
new file mode 100644
index 000000000..c27c8f06c
--- /dev/null
+++ b/component-docs/public/__mdx__/react/control-chip-prefix-icon.mdx
@@ -0,0 +1,9 @@
+```tsx copy
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ControlChipPrefixIcon() {
+  return <ControlChip.Toggle prefixIcon={<IconAddFill />}>라벨</ControlChip.Toggle>;
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/control-chip-preview.mdx b/component-docs/public/__mdx__/react/control-chip-preview.mdx
new file mode 100644
index 000000000..3b86fe5ec
--- /dev/null
+++ b/component-docs/public/__mdx__/react/control-chip-preview.mdx
@@ -0,0 +1,8 @@
+```tsx copy
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ControlChipPreview() {
+  return <ControlChip.Toggle>라벨</ControlChip.Toggle>;
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/control-chip-small.mdx b/component-docs/public/__mdx__/react/control-chip-small.mdx
new file mode 100644
index 000000000..f84588611
--- /dev/null
+++ b/component-docs/public/__mdx__/react/control-chip-small.mdx
@@ -0,0 +1,8 @@
+```tsx copy
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ActionChipSmall() {
+  return <ControlChip.Toggle size="small">라벨</ControlChip.Toggle>;
+}
+
+```
diff --git a/component-docs/public/__mdx__/react/tabs-layout-fill.mdx b/component-docs/public/__mdx__/react/tabs-layout-fill.mdx
index 3dad3fb5e..22aaadeaf 100644
--- a/component-docs/public/__mdx__/react/tabs-layout-fill.mdx
+++ b/component-docs/public/__mdx__/react/tabs-layout-fill.mdx
@@ -3,26 +3,24 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se
 
 export default function TabsLayoutFill() {
   return (
-    <div style={{ width: "360px" }}>
-      <Tabs defaultValue="1" layout="fill">
-        <TabTriggerList>
-          <TabTrigger value="1">라벨1</TabTrigger>
-          <TabTrigger value="2">라벨2</TabTrigger>
-          <TabTrigger value="3">라벨3</TabTrigger>
-        </TabTriggerList>
-        <TabContentList>
-          <TabContent value="1">
-            <div>Content 1</div>
-          </TabContent>
-          <TabContent value="2">
-            <div>Content 2</div>
-          </TabContent>
-          <TabContent value="3">
-            <div>Content 3</div>
-          </TabContent>
-        </TabContentList>
-      </Tabs>
-    </div>
+    <Tabs defaultValue="1" layout="fill">
+      <TabTriggerList>
+        <TabTrigger value="1">라벨1</TabTrigger>
+        <TabTrigger value="2">라벨2</TabTrigger>
+        <TabTrigger value="3">라벨3</TabTrigger>
+      </TabTriggerList>
+      <TabContentList>
+        <TabContent value="1">
+          <div>Content 1</div>
+        </TabContent>
+        <TabContent value="2">
+          <div>Content 2</div>
+        </TabContent>
+        <TabContent value="3">
+          <div>Content 3</div>
+        </TabContent>
+      </TabContentList>
+    </Tabs>
   );
 }
 
diff --git a/component-docs/public/__mdx__/react/tabs-layout-hug.mdx b/component-docs/public/__mdx__/react/tabs-layout-hug.mdx
index fb41e2735..53b3bc3e0 100644
--- a/component-docs/public/__mdx__/react/tabs-layout-hug.mdx
+++ b/component-docs/public/__mdx__/react/tabs-layout-hug.mdx
@@ -3,26 +3,24 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se
 
 export default function TabsLayoutHug() {
   return (
-    <div style={{ width: "360px" }}>
-      <Tabs defaultValue="1" layout="hug">
-        <TabTriggerList>
-          <TabTrigger value="1">라벨1</TabTrigger>
-          <TabTrigger value="2">라벨2</TabTrigger>
-          <TabTrigger value="3">라벨3</TabTrigger>
-        </TabTriggerList>
-        <TabContentList>
-          <TabContent value="1">
-            <div>Content 1</div>
-          </TabContent>
-          <TabContent value="2">
-            <div>Content 2</div>
-          </TabContent>
-          <TabContent value="3">
-            <div>Content 3</div>
-          </TabContent>
-        </TabContentList>
-      </Tabs>
-    </div>
+    <Tabs defaultValue="1" layout="hug">
+      <TabTriggerList>
+        <TabTrigger value="1">라벨1</TabTrigger>
+        <TabTrigger value="2">라벨2</TabTrigger>
+        <TabTrigger value="3">라벨3</TabTrigger>
+      </TabTriggerList>
+      <TabContentList>
+        <TabContent value="1">
+          <div>Content 1</div>
+        </TabContent>
+        <TabContent value="2">
+          <div>Content 2</div>
+        </TabContent>
+        <TabContent value="3">
+          <div>Content 3</div>
+        </TabContent>
+      </TabContentList>
+    </Tabs>
   );
 }
 
diff --git a/component-docs/public/__mdx__/react/tabs-size-medium.mdx b/component-docs/public/__mdx__/react/tabs-size-medium.mdx
index 61518f54d..d9bc9a8f6 100644
--- a/component-docs/public/__mdx__/react/tabs-size-medium.mdx
+++ b/component-docs/public/__mdx__/react/tabs-size-medium.mdx
@@ -3,26 +3,24 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se
 
 export default function TabsSizeMedium() {
   return (
-    <div style={{ width: "360px" }}>
-      <Tabs defaultValue="1" size="medium">
-        <TabTriggerList>
-          <TabTrigger value="1">라벨1</TabTrigger>
-          <TabTrigger value="2">라벨2</TabTrigger>
-          <TabTrigger value="3">라벨3</TabTrigger>
-        </TabTriggerList>
-        <TabContentList>
-          <TabContent value="1">
-            <div>Content 1</div>
-          </TabContent>
-          <TabContent value="2">
-            <div>Content 2</div>
-          </TabContent>
-          <TabContent value="3">
-            <div>Content 3</div>
-          </TabContent>
-        </TabContentList>
-      </Tabs>
-    </div>
+    <Tabs defaultValue="1" size="medium">
+      <TabTriggerList>
+        <TabTrigger value="1">라벨1</TabTrigger>
+        <TabTrigger value="2">라벨2</TabTrigger>
+        <TabTrigger value="3">라벨3</TabTrigger>
+      </TabTriggerList>
+      <TabContentList>
+        <TabContent value="1">
+          <div>Content 1</div>
+        </TabContent>
+        <TabContent value="2">
+          <div>Content 2</div>
+        </TabContent>
+        <TabContent value="3">
+          <div>Content 3</div>
+        </TabContent>
+      </TabContentList>
+    </Tabs>
   );
 }
 
diff --git a/component-docs/public/__mdx__/react/tabs-size-small.mdx b/component-docs/public/__mdx__/react/tabs-size-small.mdx
index 57d7b8f72..18dcc9404 100644
--- a/component-docs/public/__mdx__/react/tabs-size-small.mdx
+++ b/component-docs/public/__mdx__/react/tabs-size-small.mdx
@@ -3,28 +3,24 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se
 
 export default function TabsSizeSmall() {
   return (
-    <div style={{ width: "360px" }}>
-      <Tabs defaultValue="1" size="small">
-        <TabTriggerList>
-          <TabTrigger value="1">라벨1</TabTrigger>
-          <TabTrigger value="2">라벨2</TabTrigger>
-          <TabTrigger value="3">라벨3</TabTrigger>
-        </TabTriggerList>
-        <TabContentList>
-          <TabContent value="1">
-            <div style={{ backgroundColor: "var(--seed-color-bg-layer-default)", height: "300px" }}>
-              Content 1
-            </div>
-          </TabContent>
-          <TabContent value="2">
-            <div>Content 2</div>
-          </TabContent>
-          <TabContent value="3">
-            <div>Content 3</div>
-          </TabContent>
-        </TabContentList>
-      </Tabs>
-    </div>
+    <Tabs defaultValue="1" size="small">
+      <TabTriggerList>
+        <TabTrigger value="1">라벨1</TabTrigger>
+        <TabTrigger value="2">라벨2</TabTrigger>
+        <TabTrigger value="3">라벨3</TabTrigger>
+      </TabTriggerList>
+      <TabContentList>
+        <TabContent value="1">
+          <div>Content 1</div>
+        </TabContent>
+        <TabContent value="2">
+          <div>Content 2</div>
+        </TabContent>
+        <TabContent value="3">
+          <div>Content 3</div>
+        </TabContent>
+      </TabContentList>
+    </Tabs>
   );
 }
 
diff --git a/component-docs/public/__registry__/component/action-chip.json b/component-docs/public/__registry__/component/action-chip.json
new file mode 100644
index 000000000..e9aba2e31
--- /dev/null
+++ b/component-docs/public/__registry__/component/action-chip.json
@@ -0,0 +1,13 @@
+{
+  "name": "action-chip",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "registries": [
+    {
+      "name": "action-chip.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { actionChip, type ActionChipVariantProps } from \"@seed-design/recipe/actionChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/actionChip.css\";\n\nexport interface ActionChipProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ActionChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const classNames = actionChip({ size, layout });\n    return (\n      <button ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}\n        {layout === \"withText\" ? (\n          <span className={classNames.label}>{children}</span>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}\n      </button>\n    );\n  },\n);\nActionChip.displayName = \"ActionChip\";\n"
+    }
+  ],
+  "type": "component"
+}
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/control-chip.json b/component-docs/public/__registry__/component/control-chip.json
new file mode 100644
index 000000000..1151315a8
--- /dev/null
+++ b/component-docs/public/__registry__/component/control-chip.json
@@ -0,0 +1,13 @@
+{
+  "name": "control-chip",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "registries": [
+    {
+      "name": "control-chip.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { controlChip, type ControlChipVariantProps } from \"@seed-design/recipe/controlChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/controlChip.css\";\nimport { UseCheckboxProps, useCheckbox } from \"@seed-design/react-checkbox\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nexport interface ControlChipToggleProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    UseCheckboxProps,\n    ControlChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\nconst ControlChipToggle = React.forwardRef<HTMLInputElement, ControlChipToggleProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const classNames = controlChip({ size, layout });\n    const { rootProps, hiddenInputProps, restProps } = useCheckbox(otherProps);\n    return (\n      <label {...rootProps} className={clsx(classNames.root, className)}>\n        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}\n        {layout === \"withText\" ? (\n          <span className={classNames.label}>{children}</span>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n      </label>\n    );\n  },\n);\nControlChipToggle.displayName = \"ControlChip.Toggle\";\n\nexport const ControlChip = Object.assign(\n  () => {\n    console.warn(\n      \"ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.\",\n    );\n  },\n  {\n    Toggle: ControlChipToggle,\n  },\n);\n"
+    }
+  ],
+  "type": "component"
+}
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/index.json b/component-docs/public/__registry__/component/index.json
index 16e9ac082..e2eca36b0 100644
--- a/component-docs/public/__registry__/component/index.json
+++ b/component-docs/public/__registry__/component/index.json
@@ -19,6 +19,26 @@
       "component/action-button.tsx"
     ]
   },
+  {
+    "name": "action-chip",
+    "type": "component",
+    "dependencies": [
+      "@radix-ui/react-slot"
+    ],
+    "snippets": [
+      "component/action-chip.tsx"
+    ]
+  },
+  {
+    "name": "control-chip",
+    "type": "component",
+    "dependencies": [
+      "@radix-ui/react-slot"
+    ],
+    "snippets": [
+      "component/control-chip.tsx"
+    ]
+  },
   {
     "name": "checkbox",
     "type": "component",
diff --git a/component-docs/snippets/component/action-chip.tsx b/component-docs/snippets/component/action-chip.tsx
new file mode 100644
index 000000000..167b0465a
--- /dev/null
+++ b/component-docs/snippets/component/action-chip.tsx
@@ -0,0 +1,43 @@
+import { Slot } from "@radix-ui/react-slot";
+import { actionChip, type ActionChipVariantProps } from "@seed-design/recipe/actionChip";
+import clsx from "clsx";
+import * as React from "react";
+
+import "@seed-design/stylesheet/actionChip.css";
+
+export interface ActionChipProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    ActionChipVariantProps {
+  prefixIcon?: React.ReactNode;
+
+  suffixIcon?: React.ReactNode;
+}
+
+export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
+  (
+    {
+      className,
+      size = "medium",
+      layout = "withText",
+      children,
+      prefixIcon,
+      suffixIcon,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const classNames = actionChip({ size, layout });
+    return (
+      <button ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}
+        {layout === "withText" ? (
+          <span className={classNames.label}>{children}</span>
+        ) : (
+          <Slot className={classNames.icon}>{children}</Slot>
+        )}
+        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}
+      </button>
+    );
+  },
+);
+ActionChip.displayName = "ActionChip";
diff --git a/component-docs/snippets/component/control-chip.tsx b/component-docs/snippets/component/control-chip.tsx
new file mode 100644
index 000000000..3d9af213d
--- /dev/null
+++ b/component-docs/snippets/component/control-chip.tsx
@@ -0,0 +1,71 @@
+import { Slot } from "@radix-ui/react-slot";
+import { controlChip, type ControlChipVariantProps } from "@seed-design/recipe/controlChip";
+import clsx from "clsx";
+import * as React from "react";
+
+import "@seed-design/stylesheet/controlChip.css";
+import { UseCheckboxProps, useCheckbox } from "@seed-design/react-checkbox";
+import { visuallyHidden } from "../util/visuallyHidden";
+
+export interface ControlChipToggleProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    UseCheckboxProps,
+    ControlChipVariantProps {
+  prefixIcon?: React.ReactNode;
+
+  suffixIcon?: React.ReactNode;
+}
+
+const ControlChipToggle = React.forwardRef<HTMLInputElement, ControlChipToggleProps>(
+  (
+    {
+      className,
+      size = "medium",
+      layout = "withText",
+      children,
+      prefixIcon,
+      suffixIcon,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const classNames = controlChip({ size, layout });
+    const { rootProps, hiddenInputProps, stateProps, restProps } = useCheckbox(otherProps);
+    return (
+      <label {...rootProps} className={clsx(classNames.root, className)}>
+        {prefixIcon && (
+          <Slot {...stateProps} className={classNames.prefix}>
+            {prefixIcon}
+          </Slot>
+        )}
+        {layout === "withText" ? (
+          <span {...stateProps} className={classNames.label}>
+            {children}
+          </span>
+        ) : (
+          <Slot {...stateProps} className={classNames.icon}>
+            {children}
+          </Slot>
+        )}
+        {suffixIcon && (
+          <Slot {...stateProps} className={classNames.suffix}>
+            {suffixIcon}
+          </Slot>
+        )}
+        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />
+      </label>
+    );
+  },
+);
+ControlChipToggle.displayName = "ControlChip.Toggle";
+
+export const ControlChip = Object.assign(
+  () => {
+    console.warn(
+      "ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.",
+    );
+  },
+  {
+    Toggle: ControlChipToggle,
+  },
+);
diff --git a/component-docs/snippets/example/react/action-chip-icon-only.tsx b/component-docs/snippets/example/react/action-chip-icon-only.tsx
new file mode 100644
index 000000000..b4ad6b04c
--- /dev/null
+++ b/component-docs/snippets/example/react/action-chip-icon-only.tsx
@@ -0,0 +1,10 @@
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipIconOnly() {
+  return (
+    <ActionChip layout="iconOnly">
+      <IconAddFill />
+    </ActionChip>
+  );
+}
diff --git a/component-docs/snippets/example/react/action-chip-medium.tsx b/component-docs/snippets/example/react/action-chip-medium.tsx
new file mode 100644
index 000000000..166e2ad9a
--- /dev/null
+++ b/component-docs/snippets/example/react/action-chip-medium.tsx
@@ -0,0 +1,5 @@
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipMedium() {
+  return <ActionChip size="medium">라벨</ActionChip>;
+}
diff --git a/component-docs/snippets/example/react/action-chip-prefix-icon.tsx b/component-docs/snippets/example/react/action-chip-prefix-icon.tsx
new file mode 100644
index 000000000..9cb12f86c
--- /dev/null
+++ b/component-docs/snippets/example/react/action-chip-prefix-icon.tsx
@@ -0,0 +1,6 @@
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipPrefixIcon() {
+  return <ActionChip prefixIcon={<IconAddFill />}>라벨</ActionChip>;
+}
diff --git a/component-docs/snippets/example/react/action-chip-preview.tsx b/component-docs/snippets/example/react/action-chip-preview.tsx
new file mode 100644
index 000000000..6e3b029ce
--- /dev/null
+++ b/component-docs/snippets/example/react/action-chip-preview.tsx
@@ -0,0 +1,5 @@
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipPreview() {
+  return <ActionChip>라벨</ActionChip>;
+}
diff --git a/component-docs/snippets/example/react/action-chip-small.tsx b/component-docs/snippets/example/react/action-chip-small.tsx
new file mode 100644
index 000000000..0cfaee18c
--- /dev/null
+++ b/component-docs/snippets/example/react/action-chip-small.tsx
@@ -0,0 +1,5 @@
+import { ActionChip } from "seed-design/ui/action-chip";
+
+export default function ActionChipSmall() {
+  return <ActionChip size="small">라벨</ActionChip>;
+}
diff --git a/component-docs/snippets/example/react/control-chip-icon-only.tsx b/component-docs/snippets/example/react/control-chip-icon-only.tsx
new file mode 100644
index 000000000..70c7ec9c4
--- /dev/null
+++ b/component-docs/snippets/example/react/control-chip-icon-only.tsx
@@ -0,0 +1,10 @@
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ControlChipIconOnly() {
+  return (
+    <ControlChip.Toggle layout="iconOnly">
+      <IconAddFill />
+    </ControlChip.Toggle>
+  );
+}
diff --git a/component-docs/snippets/example/react/control-chip-medium.tsx b/component-docs/snippets/example/react/control-chip-medium.tsx
new file mode 100644
index 000000000..757bb9465
--- /dev/null
+++ b/component-docs/snippets/example/react/control-chip-medium.tsx
@@ -0,0 +1,5 @@
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ActionChipMedium() {
+  return <ControlChip.Toggle size="medium">라벨</ControlChip.Toggle>;
+}
diff --git a/component-docs/snippets/example/react/control-chip-prefix-icon.tsx b/component-docs/snippets/example/react/control-chip-prefix-icon.tsx
new file mode 100644
index 000000000..b234b09cc
--- /dev/null
+++ b/component-docs/snippets/example/react/control-chip-prefix-icon.tsx
@@ -0,0 +1,6 @@
+import IconAddFill from "@seed-design/icon/IconAddFill";
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ControlChipPrefixIcon() {
+  return <ControlChip.Toggle prefixIcon={<IconAddFill />}>라벨</ControlChip.Toggle>;
+}
diff --git a/component-docs/snippets/example/react/control-chip-preview.tsx b/component-docs/snippets/example/react/control-chip-preview.tsx
new file mode 100644
index 000000000..7714c4e9b
--- /dev/null
+++ b/component-docs/snippets/example/react/control-chip-preview.tsx
@@ -0,0 +1,5 @@
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ControlChipPreview() {
+  return <ControlChip.Toggle>라벨</ControlChip.Toggle>;
+}
diff --git a/component-docs/snippets/example/react/control-chip-small.tsx b/component-docs/snippets/example/react/control-chip-small.tsx
new file mode 100644
index 000000000..dc8540815
--- /dev/null
+++ b/component-docs/snippets/example/react/control-chip-small.tsx
@@ -0,0 +1,5 @@
+import { ControlChip } from "seed-design/ui/control-chip";
+
+export default function ActionChipSmall() {
+  return <ControlChip.Toggle size="small">라벨</ControlChip.Toggle>;
+}
diff --git a/component-docs/src/pages/components/action-chip.mdx b/component-docs/src/pages/components/action-chip.mdx
new file mode 100644
index 000000000..b7b3d4a9f
--- /dev/null
+++ b/component-docs/src/pages/components/action-chip.mdx
@@ -0,0 +1,25 @@
+# Action Chip
+
+<ComponentExample name="action-chip-preview" />
+
+## 설치
+
+<Installation name="action-chip" />
+
+## 예제
+
+### Medium
+
+<ComponentExample name="action-chip-medium" />
+
+### Small
+
+<ComponentExample name="action-chip-small" />
+
+### Icon Only
+
+<ComponentExample name="action-chip-icon-only" />
+
+### Prefix Icon
+
+<ComponentExample name="action-chip-prefix-icon" />
\ No newline at end of file
diff --git a/component-docs/src/pages/components/control-chip.mdx b/component-docs/src/pages/components/control-chip.mdx
new file mode 100644
index 000000000..92c1b2654
--- /dev/null
+++ b/component-docs/src/pages/components/control-chip.mdx
@@ -0,0 +1,25 @@
+# Control Chip
+
+<ComponentExample name="control-chip-preview" />
+
+## 설치
+
+<Installation name="control-chip" />
+
+## 예제
+
+### Medium
+
+<ComponentExample name="control-chip-medium" />
+
+### Small
+
+<ComponentExample name="control-chip-small" />
+
+### Icon Only
+
+<ComponentExample name="control-chip-icon-only" />
+
+### Prefix Icon
+
+<ComponentExample name="control-chip-prefix-icon" />
\ No newline at end of file
diff --git a/examples/stackflow-spa/src/design-system/components/ActionChip.tsx b/examples/stackflow-spa/src/design-system/components/ActionChip.tsx
index 76184ef18..167b0465a 100644
--- a/examples/stackflow-spa/src/design-system/components/ActionChip.tsx
+++ b/examples/stackflow-spa/src/design-system/components/ActionChip.tsx
@@ -18,7 +18,7 @@ export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
     {
       className,
       size = "medium",
-      layout = "text",
+      layout = "withText",
       children,
       prefixIcon,
       suffixIcon,
@@ -30,7 +30,7 @@ export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
     return (
       <button ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
         {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}
-        {layout === "text" ? (
+        {layout === "withText" ? (
           <span className={classNames.label}>{children}</span>
         ) : (
           <Slot className={classNames.icon}>{children}</Slot>
diff --git a/examples/stackflow-spa/src/design-system/components/Checkbox.tsx b/examples/stackflow-spa/src/design-system/components/Checkbox.tsx
index 74f9d4f80..3992ffa1c 100644
--- a/examples/stackflow-spa/src/design-system/components/Checkbox.tsx
+++ b/examples/stackflow-spa/src/design-system/components/Checkbox.tsx
@@ -1,9 +1,8 @@
-import { type UseCheckboxProps, useCheckbox } from "@seed-design/react-checkbox";
-import { type CheckboxVariantProps, checkbox } from "@seed-design/recipe/checkbox";
+import { useCheckbox, type UseCheckboxProps } from "@seed-design/react-checkbox";
+import { checkbox, type CheckboxVariantProps } from "@seed-design/recipe/checkbox";
 import clsx from "clsx";
 import * as React from "react";
 
-import type { Assign } from "../util/types";
 import { visuallyHidden } from "../util/visuallyHidden";
 
 import "@seed-design/stylesheet/checkbox.css";
@@ -29,7 +28,8 @@ const Checkmark = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>
 ));
 
 export interface CheckboxProps
-  extends Assign<React.HTMLAttributes<HTMLInputElement>, UseCheckboxProps>,
+  extends React.HTMLAttributes<HTMLInputElement>,
+    UseCheckboxProps,
     CheckboxVariantProps {
   label: React.ReactNode;
 }
diff --git a/packages/component-spec/artifacts/action-chip.yaml b/packages/component-spec/artifacts/action-chip.yaml
index 21ce7cd84..d9461c31f 100644
--- a/packages/component-spec/artifacts/action-chip.yaml
+++ b/packages/component-spec/artifacts/action-chip.yaml
@@ -2,7 +2,7 @@ base:
   enabled:
     root:
       color: $color.bg.neutral-weak
-      borderRadius: $radii.full
+      cornerRadius: $radii.full
     label:
       color: $color.fg.neutral
       fontWeight: $font-weight.medium
@@ -10,6 +10,8 @@ base:
       color: $color.fg.neutral
     suffix:
       color: $color.fg.neutral
+    count:
+      color: $color.fg.neutral-muted
   pressed:
     root:
       color: $color.bg.neutral-weak-pressed
@@ -31,11 +33,11 @@ size=small:
       paddingY: $unit[1.5]
       gap: $unit[1]
     label:
-      fontSize: $font-size[75]
+      fontSize: $font-size[100]
     prefix:
-      size: $unit[3.5]
+      size: $unit[4]
     suffix:
-      size: $unit[3.5]
+      size: $unit[4]
 size=medium:
   enabled:
     root:
@@ -47,8 +49,8 @@ size=medium:
     prefix:
       size: $unit[4]
     suffix:
-      size: $unit[3.5]
-size=small,layout=text:
+      size: $unit[4]
+size=small,layout=with text:
   enabled:
     root:
       paddingX: $unit[3]
@@ -58,7 +60,7 @@ size=small,layout=icon only:
       minWidth: $unit[8]
     icon:
       size: $unit[4]
-size=medium,layout=text:
+size=medium,layout=with text:
   enabled:
     root:
       paddingX: $unit[3.5]
diff --git a/packages/component-spec/artifacts/control-chip.yaml b/packages/component-spec/artifacts/control-chip.yaml
new file mode 100644
index 000000000..cc1c32750
--- /dev/null
+++ b/packages/component-spec/artifacts/control-chip.yaml
@@ -0,0 +1,88 @@
+base:
+  enabled:
+    root:
+      strokeColor: $color.stroke.neutral
+      strokeWidth: 1px
+      cornerRadius: $radii.full
+    label:
+      color: $color.fg.neutral
+      fontWeight: $font-weight.medium
+    prefix:
+      color: $color.fg.neutral
+    suffix:
+      color: $color.fg.neutral
+    count:
+      color: $color.fg.neutral-muted
+  pressed:
+    root:
+      color: $color.bg.layer-default-pressed
+  selected:
+    root:
+      strokeWidth: 0
+      color: $color.bg.brand-weak
+    label:
+      color: $color.fg.brand
+    prefix:
+      color: $color.fg.brand
+    suffix:
+      color: $color.fg.brand
+    count:
+      color: $color.fg.brand
+  selected, pressed:
+    root:
+      color: $color.bg.brand-weak-pressed
+  disabled:
+    root:
+      color: $color.bg.disabled
+    label:
+      color: $color.fg.disabled
+    prefix:
+      color: $color.fg.disabled
+    suffix:
+      color: $color.fg.disabled
+    count:
+      color: $color.fg.disabled
+size=small:
+  enabled:
+    root:
+      minHeight: $unit[8]
+      paddingY: $unit[1.5]
+      gap: $unit[1]
+    label:
+      fontSize: $font-size[100]
+    prefix:
+      size: $unit[4]
+    suffix:
+      size: $unit[4]
+size=medium:
+  enabled:
+    root:
+      minHeight: $unit[9]
+      paddingY: $unit[2]
+      gap: $unit[1]
+    label:
+      fontSize: $font-size[100]
+    prefix:
+      size: $unit[4]
+    suffix:
+      size: $unit[4]
+size=small,layout=with text:
+  enabled:
+    root:
+      paddingX: $unit[3]
+size=small,layout=icon only:
+  enabled:
+    root:
+      minWidth: $unit[8]
+    icon:
+      size: $unit[4]
+size=medium,layout=with text:
+  enabled:
+    root:
+      paddingX: $unit[3.5]
+size=medium,layout=icon only:
+  enabled:
+    root:
+      minWidth: $unit[9]
+    icon:
+      size: $unit[4]
diff --git a/packages/component-spec/artifacts/switch.yaml b/packages/component-spec/artifacts/switch.yaml
index d97ba6cee..1723499d9 100644
--- a/packages/component-spec/artifacts/switch.yaml
+++ b/packages/component-spec/artifacts/switch.yaml
@@ -6,9 +6,6 @@ base:
     thumb:
       color: $color.fg.static-white
       cornerRadius: $radii.full
-      shadow:
-        - 0px 3px 8px 0px rgba(0, 0, 0, 0.15)
-        - 0px 1px 3px 0px rgba(0, 0, 0, 0.06)
   enabled,selected:
     control:
       color: $color.bg.brand-solid
@@ -29,6 +26,9 @@ size=medium:
     thumb:
       height: 27px
       width: 27px
+      shadow:
+        - 0px 3px 8px 0px rgba(0, 0, 0, 0.15)
+        - 0px 1px 3px 0px rgba(0, 0, 0, 0.06)
 size=small:
   enabled:
     root:
diff --git a/packages/react-headless/checkbox/src/index.ts b/packages/react-headless/checkbox/src/index.ts
index d5f88eb54..5eb51880d 100644
--- a/packages/react-headless/checkbox/src/index.ts
+++ b/packages/react-headless/checkbox/src/index.ts
@@ -39,30 +39,11 @@ export function useCheckboxState(props: UseCheckboxStateProps) {
 export interface UseCheckboxProps extends UseCheckboxStateProps {
   disabled?: boolean;
 
-  required?: boolean;
-
   invalid?: boolean;
-
-  name?: string;
-
-  form?: string;
-
-  value?: string;
 }
 
 export function useCheckbox(props: UseCheckboxProps) {
-  const {
-    checked,
-    defaultChecked,
-    disabled,
-    form,
-    invalid,
-    name,
-    onCheckedChange,
-    required,
-    value,
-    ...restProps
-  } = props;
+  const { checked, defaultChecked, disabled, invalid, onCheckedChange, ...restProps } = props;
 
   const {
     setIsChecked,
@@ -123,12 +104,7 @@ export function useCheckbox(props: UseCheckboxProps) {
       type: "checkbox",
       defaultChecked,
       checked: isControlled ? isChecked : undefined,
-      disabled: props.disabled,
-      required: props.required,
-      "aria-invalid": props.invalid,
-      name: props.name,
-      form: props.form,
-      value: props.value,
+      "aria-invalid": invalid,
       ...stateProps,
       onChange(event) {
         setIsChecked(event.currentTarget.checked);
diff --git a/packages/react-headless/popover/dist/commonjs/floating.d.ts b/packages/react-headless/popover/dist/commonjs/floating.d.ts
deleted file mode 100644
index 6c21524a0..000000000
--- a/packages/react-headless/popover/dist/commonjs/floating.d.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { type Placement, type Rect } from "@floating-ui/react";
-export interface PositioningOptions {
-    /**
-     * The strategy to use for positioning
-     * @default "absolute"
-     */
-    strategy?: "absolute" | "fixed";
-    /**
-     * The initial placement of the floating element
-     * @default "bottom"
-     */
-    placement?: Placement;
-    /**
-     * The gutter between the floating element and the reference element
-     */
-    gutter?: number;
-    /**
-     * Whether to flip the placement
-     * @default true
-     */
-    flip?: boolean | Placement[];
-    /**
-     * Whether the popover should slide when it overflows.
-     * @default true
-     */
-    slide?: boolean;
-    /**
-     * The virtual padding around the viewport edges to check for overflow
-     * @default 8
-     */
-    overflowPadding?: number;
-    /**
-     * The minimum padding between the arrow and the floating element's corner.
-     * @default 4
-     */
-    arrowPadding?: number;
-}
-export interface UsePositionedFloatingProps extends PositioningOptions {
-    /**
-     * Whether the floating element is initially open
-     */
-    defaultOpen?: boolean;
-    /**
-     * Whether the floating element is open
-     */
-    open?: boolean;
-    /**
-     * Callback when the floating element is opened or closed
-     */
-    onOpenChange?: (open: boolean) => void;
-}
-export declare function usePositionedFloating(props: UsePositionedFloatingProps): {
-    open: boolean | undefined;
-    refs: {
-        arrow: HTMLElement | null;
-        setArrow: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
-        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null> & import("react").MutableRefObject<import("@floating-ui/react").ReferenceType | null>;
-        floating: import("react").MutableRefObject<HTMLElement | null>;
-        setReference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
-        setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
-        domReference: import("react").MutableRefObject<Element | null>;
-        setPositionReference(node: import("@floating-ui/react").ReferenceType | null): void;
-    };
-    rects: {
-        arrow: {
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-        } | null;
-        reference: Rect;
-        floating: Rect;
-    };
-    context: {
-        x: number;
-        y: number;
-        placement: Placement;
-        strategy: import("@floating-ui/utils").Strategy;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
-        isPositioned: boolean;
-        update: () => void;
-        floatingStyles: import("react").CSSProperties;
-        open: boolean;
-        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
-        events: import("@floating-ui/react").FloatingEvents;
-        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
-        nodeId: string | undefined;
-        floatingId: string;
-        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    };
-    floatingStyles: import("react").CSSProperties;
-    arrowStyles: {
-        readonly [x: string]: number | "" | "absolute" | "rotate(90deg)" | "rotate(180deg)" | "rotate(270deg)" | "100%" | undefined;
-        readonly position: "absolute";
-        readonly left: number | undefined;
-        readonly top: number | undefined;
-        readonly transform: "" | "rotate(90deg)" | "rotate(180deg)" | "rotate(270deg)";
-    };
-};
-//# sourceMappingURL=floating.d.ts.map
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/commonjs/floating.d.ts.map b/packages/react-headless/popover/dist/commonjs/floating.d.ts.map
deleted file mode 100644
index 61aa59fae..000000000
--- a/packages/react-headless/popover/dist/commonjs/floating.d.ts.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"floating.d.ts","sourceRoot":"","sources":["../../src/floating.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,SAAS,EACd,KAAK,IAAI,EACV,MAAM,oBAAoB,CAAC;AAG5B,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmDD,MAAM,WAAW,0BAA2B,SAAQ,kBAAkB;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AASD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDtE"}
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/commonjs/floating.js b/packages/react-headless/popover/dist/commonjs/floating.js
deleted file mode 100644
index 740e312f8..000000000
--- a/packages/react-headless/popover/dist/commonjs/floating.js
+++ /dev/null
@@ -1,103 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePositionedFloating = usePositionedFloating;
-const react_1 = require("@floating-ui/react");
-const react_2 = require("react");
-const defaultPositioningOptions = {
-    strategy: "absolute",
-    placement: "bottom",
-    flip: true,
-    slide: true,
-    overflowPadding: 8,
-    arrowPadding: 4,
-};
-function getArrowRect(arrowElement) {
-    return arrowElement?.getClientRects().item(0) ?? null;
-}
-function getArrowMiddleware(arrowElement, opts) {
-    if (!arrowElement)
-        return;
-    return (0, react_1.arrow)({ element: arrowElement, padding: opts.arrowPadding });
-}
-function getOffsetMiddleware(arrowOffset, opts) {
-    const offsetMainAxis = (opts.gutter ?? 0) + arrowOffset;
-    return (0, react_1.offset)(offsetMainAxis);
-}
-function getFlipMiddleware(opts) {
-    if (!opts.flip)
-        return;
-    return (0, react_1.flip)({
-        padding: opts.overflowPadding,
-        fallbackPlacements: opts.flip === true ? undefined : opts.flip,
-    });
-}
-function getShiftMiddleware(opts) {
-    if (!opts.slide)
-        return;
-    return (0, react_1.shift)({
-        mainAxis: opts.slide,
-        padding: opts.overflowPadding,
-        limiter: (0, react_1.limitShift)(),
-    });
-}
-const rectMiddleware = {
-    name: "rects",
-    fn({ rects }) {
-        return {
-            data: rects,
-        };
-    },
-};
-const ARROW_FLOATING_STYLE = {
-    top: "",
-    right: "rotate(90deg)",
-    bottom: "rotate(180deg)",
-    left: "rotate(270deg)",
-};
-function usePositionedFloating(props) {
-    const options = { ...defaultPositioningOptions, ...props };
-    const [uncontrolledOpen, setUncontrolledOpen] = (0, react_2.useState)(props.defaultOpen);
-    const [arrowEl, setArrowEl] = (0, react_2.useState)(null);
-    const arrowRect = (0, react_2.useMemo)(() => getArrowRect(arrowEl), [arrowEl]);
-    const arrowOffset = arrowRect?.height ?? 0;
-    const open = props.open ?? uncontrolledOpen;
-    const onOpenChange = props.onOpenChange ?? setUncontrolledOpen;
-    const { refs, context, floatingStyles, middlewareData } = (0, react_1.useFloating)({
-        strategy: options.strategy,
-        open,
-        placement: options.placement,
-        onOpenChange: onOpenChange,
-        whileElementsMounted: react_1.autoUpdate,
-        middleware: [
-            getOffsetMiddleware(arrowOffset, options),
-            getFlipMiddleware(options),
-            getShiftMiddleware(options),
-            getArrowMiddleware(arrowEl, options),
-            rectMiddleware,
-        ],
-    });
-    const side = context.placement.split("-")[0];
-    const arrowStyles = {
-        position: "absolute",
-        left: middlewareData.arrow?.x,
-        top: middlewareData.arrow?.y,
-        [side]: "100%",
-        transform: ARROW_FLOATING_STYLE[side],
-    };
-    return {
-        open,
-        refs: {
-            ...refs,
-            arrow: arrowEl,
-            setArrow: setArrowEl,
-        },
-        rects: {
-            ...middlewareData.rects,
-            arrow: arrowRect,
-        },
-        context,
-        floatingStyles,
-        arrowStyles,
-    };
-}
-//# sourceMappingURL=floating.js.map
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/commonjs/floating.js.map b/packages/react-headless/popover/dist/commonjs/floating.js.map
deleted file mode 100644
index 76c276ef4..000000000
--- a/packages/react-headless/popover/dist/commonjs/floating.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"floating.js","sourceRoot":"","sources":["../../src/floating.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/commonjs/floating.ts b/packages/react-headless/popover/dist/commonjs/floating.ts
new file mode 100644
index 000000000..2fdb48ffc
--- /dev/null
+++ b/packages/react-headless/popover/dist/commonjs/floating.ts
@@ -0,0 +1,175 @@
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  limitShift,
+  offset,
+  shift,
+  useFloating,
+  type ElementRects,
+  type Middleware,
+  type Placement,
+  type Rect,
+} from "@floating-ui/react";
+import { useMemo, useState } from "react";
+
+export interface PositioningOptions {
+  /**
+   * The strategy to use for positioning
+   * @default "absolute"
+   */
+  strategy?: "absolute" | "fixed";
+  /**
+   * The initial placement of the floating element
+   * @default "bottom"
+   */
+  placement?: Placement;
+  /**
+   * The gutter between the floating element and the reference element
+   */
+  gutter?: number;
+  /**
+   * Whether to flip the placement
+   * @default true
+   */
+  flip?: boolean | Placement[];
+  /**
+   * Whether the popover should slide when it overflows.
+   * @default true
+   */
+  slide?: boolean;
+  /**
+   * The virtual padding around the viewport edges to check for overflow
+   * @default 8
+   */
+  overflowPadding?: number;
+  /**
+   * The minimum padding between the arrow and the floating element's corner.
+   * @default 4
+   */
+  arrowPadding?: number;
+}
+
+const defaultPositioningOptions: PositioningOptions = {
+  strategy: "absolute",
+  placement: "bottom",
+  flip: true,
+  slide: true,
+  overflowPadding: 8,
+  arrowPadding: 4,
+};
+
+function getArrowRect(arrowElement: HTMLElement | null): Rect | null {
+  return arrowElement?.getClientRects().item(0) ?? null;
+}
+
+function getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {
+  if (!arrowElement) return;
+  return arrow({ element: arrowElement, padding: opts.arrowPadding });
+}
+
+function getOffsetMiddleware(arrowOffset: number, opts: PositioningOptions) {
+  const offsetMainAxis = (opts.gutter ?? 0) + arrowOffset;
+  return offset(offsetMainAxis);
+}
+
+function getFlipMiddleware(opts: PositioningOptions) {
+  if (!opts.flip) return;
+  return flip({
+    padding: opts.overflowPadding,
+    fallbackPlacements: opts.flip === true ? undefined : opts.flip,
+  });
+}
+
+function getShiftMiddleware(opts: PositioningOptions) {
+  if (!opts.slide) return;
+  return shift({
+    mainAxis: opts.slide,
+    padding: opts.overflowPadding,
+    limiter: limitShift(),
+  });
+}
+
+const rectMiddleware: Middleware = {
+  name: "rects",
+  fn({ rects }) {
+    return {
+      data: rects,
+    };
+  },
+};
+
+export interface UsePositionedFloatingProps extends PositioningOptions {
+  /**
+   * Whether the floating element is initially open
+   */
+  defaultOpen?: boolean;
+  /**
+   * Whether the floating element is open
+   */
+  open?: boolean;
+  /**
+   * Callback when the floating element is opened or closed
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+const ARROW_FLOATING_STYLE = {
+  top: "",
+  right: "rotate(90deg)",
+  bottom: "rotate(180deg)",
+  left: "rotate(270deg)",
+} as const;
+
+export function usePositionedFloating(props: UsePositionedFloatingProps) {
+  const options = { ...defaultPositioningOptions, ...props };
+
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen);
+  const [arrowEl, setArrowEl] = useState<HTMLElement | null>(null);
+  const arrowRect = useMemo(() => getArrowRect(arrowEl), [arrowEl]);
+  const arrowOffset = arrowRect?.height ?? 0;
+
+  const open = props.open ?? uncontrolledOpen;
+  const onOpenChange = props.onOpenChange ?? setUncontrolledOpen;
+
+  const { refs, context, floatingStyles, middlewareData } = useFloating({
+    strategy: options.strategy,
+    open,
+    placement: options.placement,
+    onOpenChange: onOpenChange,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      getOffsetMiddleware(arrowOffset, options),
+      getFlipMiddleware(options),
+      getShiftMiddleware(options),
+      getArrowMiddleware(arrowEl, options),
+      rectMiddleware,
+    ],
+  });
+
+  const side = context.placement.split("-")[0] as "top" | "bottom" | "left" | "right";
+
+  const arrowStyles = {
+    position: "absolute",
+    left: middlewareData.arrow?.x,
+    top: middlewareData.arrow?.y,
+    [side]: "100%",
+    transform: ARROW_FLOATING_STYLE[side],
+  } as const;
+
+  return {
+    open,
+    refs: {
+      ...refs,
+      arrow: arrowEl,
+      setArrow: setArrowEl,
+    },
+    rects: {
+      ...(middlewareData.rects as ElementRects),
+      arrow: arrowRect,
+    },
+    context,
+    floatingStyles,
+    arrowStyles,
+  };
+}
diff --git a/packages/react-headless/popover/dist/commonjs/index.d.ts b/packages/react-headless/popover/dist/commonjs/index.d.ts
deleted file mode 100644
index cae040ff9..000000000
--- a/packages/react-headless/popover/dist/commonjs/index.d.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { type UsePositionedFloatingProps } from "./floating.js";
-export interface UsePopoverProps extends UsePositionedFloatingProps {
-}
-export declare function usePopover(props?: UsePopoverProps): {
-    open: boolean | undefined;
-    refs: {
-        anchor: (instance: HTMLElement | null) => void;
-        trigger: (instance: HTMLElement | null) => void;
-        positioner: (instance: HTMLElement | null) => void;
-        arrow: (instance: HTMLElement | null) => void;
-    };
-    rects: {
-        arrow: {
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-        } | null;
-        reference: import("@floating-ui/utils").Rect;
-        floating: import("@floating-ui/utils").Rect;
-    };
-    anchorProps: {
-        [x: string]: unknown;
-    };
-    triggerProps: {
-        readonly "aria-haspopup": "dialog";
-        readonly "aria-expanded": boolean | undefined;
-    };
-    positionerProps: {
-        style: import("react").CSSProperties;
-    };
-    arrowProps: {
-        style: {
-            readonly [x: string]: number | "" | "absolute" | "rotate(90deg)" | "rotate(180deg)" | "rotate(270deg)" | "100%" | undefined;
-            readonly position: "absolute";
-            readonly left: number | undefined;
-            readonly top: number | undefined;
-            readonly transform: "" | "rotate(90deg)" | "rotate(180deg)" | "rotate(270deg)";
-        };
-    };
-};
-//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/commonjs/index.d.ts.map b/packages/react-headless/popover/dist/commonjs/index.d.ts.map
deleted file mode 100644
index 5ba6222d7..000000000
--- a/packages/react-headless/popover/dist/commonjs/index.d.ts.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAIvF,MAAM,WAAW,eAAgB,SAAQ,0BAA0B;CAAG;AAEtE,wBAAgB,UAAU,CAAC,KAAK,GAAE,eAAoB;;;gBAanB,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;iBACrC,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;oBACpC,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;eAC9C,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBnE"}
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/commonjs/index.js b/packages/react-headless/popover/dist/commonjs/index.js
deleted file mode 100644
index 8ba1e24a6..000000000
--- a/packages/react-headless/popover/dist/commonjs/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePopover = usePopover;
-const react_1 = require("@floating-ui/react");
-const floating_js_1 = require("./floating.js");
-function usePopover(props = {}) {
-    const { open, refs, context, floatingStyles, arrowStyles, rects } = (0, floating_js_1.usePositionedFloating)(props);
-    const role = (0, react_1.useRole)(context);
-    const click = (0, react_1.useClick)(context);
-    const dismiss = (0, react_1.useDismiss)(context);
-    const triggerInteractions = (0, react_1.useInteractions)([role, click, dismiss]);
-    const anchorInteractions = (0, react_1.useInteractions)([role, dismiss]);
-    return {
-        open,
-        refs: {
-            anchor: refs.setReference,
-            trigger: refs.setReference,
-            positioner: refs.setFloating,
-            arrow: refs.setArrow,
-        },
-        rects,
-        anchorProps: {
-            ...anchorInteractions.getReferenceProps(),
-        },
-        triggerProps: {
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            ...triggerInteractions.getReferenceProps(),
-        },
-        positionerProps: {
-            ...triggerInteractions.getFloatingProps(),
-            style: floatingStyles,
-        },
-        arrowProps: {
-            style: arrowStyles,
-        },
-    };
-}
-//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/commonjs/index.js.map b/packages/react-headless/popover/dist/commonjs/index.js.map
deleted file mode 100644
index f8ace9d77..000000000
--- a/packages/react-headless/popover/dist/commonjs/index.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AAOA,gCAmCC;AA1CD,8CAAoF;AACpF,+CAAuF;AAMvF,SAAgB,UAAU,CAAC,QAAyB,EAAE;IACpD,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,IAAA,mCAAqB,EAAC,KAAK,CAAC,CAAC;IAEjG,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,IAAA,gBAAQ,EAAC,OAAO,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,CAAC,CAAC;IAEpC,MAAM,mBAAmB,GAAG,IAAA,uBAAe,EAAC,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACpE,MAAM,kBAAkB,GAAG,IAAA,uBAAe,EAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5D,OAAO;QACL,IAAI;QACJ,IAAI,EAAE;YACJ,MAAM,EAAE,IAAI,CAAC,YAAsD;YACnE,OAAO,EAAE,IAAI,CAAC,YAAsD;YACpE,UAAU,EAAE,IAAI,CAAC,WAAqD;YACtE,KAAK,EAAE,IAAI,CAAC,QAAkD;SAC/D;QACD,KAAK;QACL,WAAW,EAAE;YACX,GAAG,kBAAkB,CAAC,iBAAiB,EAAE;SAC1C;QACD,YAAY,EAAE;YACZ,eAAe,EAAE,QAAQ;YACzB,eAAe,EAAE,IAAI;YACrB,GAAG,mBAAmB,CAAC,iBAAiB,EAAE;SAClC;QACV,eAAe,EAAE;YACf,GAAG,mBAAmB,CAAC,gBAAgB,EAAE;YACzC,KAAK,EAAE,cAAc;SACtB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,WAAW;SACnB;KACF,CAAC;AACJ,CAAC"}
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/commonjs/index.ts b/packages/react-headless/popover/dist/commonjs/index.ts
new file mode 100644
index 000000000..b1f99f16b
--- /dev/null
+++ b/packages/react-headless/popover/dist/commonjs/index.ts
@@ -0,0 +1,43 @@
+import { useClick, useDismiss, useInteractions, useRole } from "@floating-ui/react";
+import { usePositionedFloating, type UsePositionedFloatingProps } from "./floating.js";
+
+// TODO: useRole이 임의로 id를 생성하는 문제가 있음. 동작만 참고하고 role="dialog"에 맞게 aria attribute 설정을 직접 해야 함.
+
+export interface UsePopoverProps extends UsePositionedFloatingProps {}
+
+export function usePopover(props: UsePopoverProps = {}) {
+  const { open, refs, context, floatingStyles, arrowStyles, rects } = usePositionedFloating(props);
+
+  const role = useRole(context);
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+
+  const triggerInteractions = useInteractions([role, click, dismiss]);
+  const anchorInteractions = useInteractions([role, dismiss]);
+
+  return {
+    open,
+    refs: {
+      anchor: refs.setReference as (instance: HTMLElement | null) => void,
+      trigger: refs.setReference as (instance: HTMLElement | null) => void,
+      positioner: refs.setFloating as (instance: HTMLElement | null) => void,
+      arrow: refs.setArrow as (instance: HTMLElement | null) => void,
+    },
+    rects,
+    anchorProps: {
+      ...anchorInteractions.getReferenceProps(),
+    },
+    triggerProps: {
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      ...triggerInteractions.getReferenceProps(),
+    } as const,
+    positionerProps: {
+      ...triggerInteractions.getFloatingProps(),
+      style: floatingStyles,
+    },
+    arrowProps: {
+      style: arrowStyles,
+    },
+  };
+}
diff --git a/packages/react-headless/popover/dist/esm/floating.d.ts b/packages/react-headless/popover/dist/esm/floating.d.ts
deleted file mode 100644
index 6c21524a0..000000000
--- a/packages/react-headless/popover/dist/esm/floating.d.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { type Placement, type Rect } from "@floating-ui/react";
-export interface PositioningOptions {
-    /**
-     * The strategy to use for positioning
-     * @default "absolute"
-     */
-    strategy?: "absolute" | "fixed";
-    /**
-     * The initial placement of the floating element
-     * @default "bottom"
-     */
-    placement?: Placement;
-    /**
-     * The gutter between the floating element and the reference element
-     */
-    gutter?: number;
-    /**
-     * Whether to flip the placement
-     * @default true
-     */
-    flip?: boolean | Placement[];
-    /**
-     * Whether the popover should slide when it overflows.
-     * @default true
-     */
-    slide?: boolean;
-    /**
-     * The virtual padding around the viewport edges to check for overflow
-     * @default 8
-     */
-    overflowPadding?: number;
-    /**
-     * The minimum padding between the arrow and the floating element's corner.
-     * @default 4
-     */
-    arrowPadding?: number;
-}
-export interface UsePositionedFloatingProps extends PositioningOptions {
-    /**
-     * Whether the floating element is initially open
-     */
-    defaultOpen?: boolean;
-    /**
-     * Whether the floating element is open
-     */
-    open?: boolean;
-    /**
-     * Callback when the floating element is opened or closed
-     */
-    onOpenChange?: (open: boolean) => void;
-}
-export declare function usePositionedFloating(props: UsePositionedFloatingProps): {
-    open: boolean | undefined;
-    refs: {
-        arrow: HTMLElement | null;
-        setArrow: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
-        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null> & import("react").MutableRefObject<import("@floating-ui/react").ReferenceType | null>;
-        floating: import("react").MutableRefObject<HTMLElement | null>;
-        setReference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
-        setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
-        domReference: import("react").MutableRefObject<Element | null>;
-        setPositionReference(node: import("@floating-ui/react").ReferenceType | null): void;
-    };
-    rects: {
-        arrow: {
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-        } | null;
-        reference: Rect;
-        floating: Rect;
-    };
-    context: {
-        x: number;
-        y: number;
-        placement: Placement;
-        strategy: import("@floating-ui/utils").Strategy;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
-        isPositioned: boolean;
-        update: () => void;
-        floatingStyles: import("react").CSSProperties;
-        open: boolean;
-        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
-        events: import("@floating-ui/react").FloatingEvents;
-        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
-        nodeId: string | undefined;
-        floatingId: string;
-        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    };
-    floatingStyles: import("react").CSSProperties;
-    arrowStyles: {
-        readonly [x: string]: number | "" | "absolute" | "rotate(90deg)" | "rotate(180deg)" | "rotate(270deg)" | "100%" | undefined;
-        readonly position: "absolute";
-        readonly left: number | undefined;
-        readonly top: number | undefined;
-        readonly transform: "" | "rotate(90deg)" | "rotate(180deg)" | "rotate(270deg)";
-    };
-};
-//# sourceMappingURL=floating.d.ts.map
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/esm/floating.d.ts.map b/packages/react-headless/popover/dist/esm/floating.d.ts.map
deleted file mode 100644
index 61aa59fae..000000000
--- a/packages/react-headless/popover/dist/esm/floating.d.ts.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"floating.d.ts","sourceRoot":"","sources":["../../src/floating.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,SAAS,EACd,KAAK,IAAI,EACV,MAAM,oBAAoB,CAAC;AAG5B,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmDD,MAAM,WAAW,0BAA2B,SAAQ,kBAAkB;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AASD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDtE"}
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/esm/floating.js b/packages/react-headless/popover/dist/esm/floating.js
deleted file mode 100644
index bea7d01a3..000000000
--- a/packages/react-headless/popover/dist/esm/floating.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import { arrow, autoUpdate, flip, limitShift, offset, shift, useFloating, } from "@floating-ui/react";
-import { useMemo, useState } from "react";
-const defaultPositioningOptions = {
-    strategy: "absolute",
-    placement: "bottom",
-    flip: true,
-    slide: true,
-    overflowPadding: 8,
-    arrowPadding: 4,
-};
-function getArrowRect(arrowElement) {
-    return arrowElement?.getClientRects().item(0) ?? null;
-}
-function getArrowMiddleware(arrowElement, opts) {
-    if (!arrowElement)
-        return;
-    return arrow({ element: arrowElement, padding: opts.arrowPadding });
-}
-function getOffsetMiddleware(arrowOffset, opts) {
-    const offsetMainAxis = (opts.gutter ?? 0) + arrowOffset;
-    return offset(offsetMainAxis);
-}
-function getFlipMiddleware(opts) {
-    if (!opts.flip)
-        return;
-    return flip({
-        padding: opts.overflowPadding,
-        fallbackPlacements: opts.flip === true ? undefined : opts.flip,
-    });
-}
-function getShiftMiddleware(opts) {
-    if (!opts.slide)
-        return;
-    return shift({
-        mainAxis: opts.slide,
-        padding: opts.overflowPadding,
-        limiter: limitShift(),
-    });
-}
-const rectMiddleware = {
-    name: "rects",
-    fn({ rects }) {
-        return {
-            data: rects,
-        };
-    },
-};
-const ARROW_FLOATING_STYLE = {
-    top: "",
-    right: "rotate(90deg)",
-    bottom: "rotate(180deg)",
-    left: "rotate(270deg)",
-};
-export function usePositionedFloating(props) {
-    const options = { ...defaultPositioningOptions, ...props };
-    const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen);
-    const [arrowEl, setArrowEl] = useState(null);
-    const arrowRect = useMemo(() => getArrowRect(arrowEl), [arrowEl]);
-    const arrowOffset = arrowRect?.height ?? 0;
-    const open = props.open ?? uncontrolledOpen;
-    const onOpenChange = props.onOpenChange ?? setUncontrolledOpen;
-    const { refs, context, floatingStyles, middlewareData } = useFloating({
-        strategy: options.strategy,
-        open,
-        placement: options.placement,
-        onOpenChange: onOpenChange,
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            getOffsetMiddleware(arrowOffset, options),
-            getFlipMiddleware(options),
-            getShiftMiddleware(options),
-            getArrowMiddleware(arrowEl, options),
-            rectMiddleware,
-        ],
-    });
-    const side = context.placement.split("-")[0];
-    const arrowStyles = {
-        position: "absolute",
-        left: middlewareData.arrow?.x,
-        top: middlewareData.arrow?.y,
-        [side]: "100%",
-        transform: ARROW_FLOATING_STYLE[side],
-    };
-    return {
-        open,
-        refs: {
-            ...refs,
-            arrow: arrowEl,
-            setArrow: setArrowEl,
-        },
-        rects: {
-            ...middlewareData.rects,
-            arrow: arrowRect,
-        },
-        context,
-        floatingStyles,
-        arrowStyles,
-    };
-}
-//# sourceMappingURL=floating.js.map
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/esm/floating.js.map b/packages/react-headless/popover/dist/esm/floating.js.map
deleted file mode 100644
index 4089d012c..000000000
--- a/packages/react-headless/popover/dist/esm/floating.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"floating.js","sourceRoot":"","sources":["../../src/floating.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,UAAU,EACV,IAAI,EACJ,UAAU,EACV,MAAM,EACN,KAAK,EACL,WAAW,GAKZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAuC1C,MAAM,yBAAyB,GAAuB;IACpD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,eAAe,EAAE,CAAC;IAClB,YAAY,EAAE,CAAC;CAChB,CAAC;AAEF,SAAS,YAAY,CAAC,YAAgC;IACpD,OAAO,YAAY,EAAE,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;AACxD,CAAC;AAED,SAAS,kBAAkB,CAAC,YAAgC,EAAE,IAAwB;IACpF,IAAI,CAAC,YAAY;QAAE,OAAO;IAC1B,OAAO,KAAK,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;AACtE,CAAC;AAED,SAAS,mBAAmB,CAAC,WAAmB,EAAE,IAAwB;IACxE,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,WAAW,CAAC;IACxD,OAAO,MAAM,CAAC,cAAc,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAwB;IACjD,IAAI,CAAC,IAAI,CAAC,IAAI;QAAE,OAAO;IACvB,OAAO,IAAI,CAAC;QACV,OAAO,EAAE,IAAI,CAAC,eAAe;QAC7B,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;KAC/D,CAAC,CAAC;AACL,CAAC;AAED,SAAS,kBAAkB,CAAC,IAAwB;IAClD,IAAI,CAAC,IAAI,CAAC,KAAK;QAAE,OAAO;IACxB,OAAO,KAAK,CAAC;QACX,QAAQ,EAAE,IAAI,CAAC,KAAK;QACpB,OAAO,EAAE,IAAI,CAAC,eAAe;QAC7B,OAAO,EAAE,UAAU,EAAE;KACtB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,OAAO;IACb,EAAE,CAAC,EAAE,KAAK,EAAE;QACV,OAAO;YACL,IAAI,EAAE,KAAK;SACZ,CAAC;IACJ,CAAC;CACF,CAAC;AAiBF,MAAM,oBAAoB,GAAG;IAC3B,GAAG,EAAE,EAAE;IACP,KAAK,EAAE,eAAe;IACtB,MAAM,EAAE,gBAAgB;IACxB,IAAI,EAAE,gBAAgB;CACd,CAAC;AAEX,MAAM,UAAU,qBAAqB,CAAC,KAAiC;IACrE,MAAM,OAAO,GAAG,EAAE,GAAG,yBAAyB,EAAE,GAAG,KAAK,EAAE,CAAC;IAE3D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAC5E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAClE,MAAM,WAAW,GAAG,SAAS,EAAE,MAAM,IAAI,CAAC,CAAC;IAE3C,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,gBAAgB,CAAC;IAC5C,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,mBAAmB,CAAC;IAE/D,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC;QACpE,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,IAAI;QACJ,SAAS,EAAE,OAAO,CAAC,SAAS;QAC5B,YAAY,EAAE,YAAY;QAC1B,oBAAoB,EAAE,UAAU;QAChC,UAAU,EAAE;YACV,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;YACzC,iBAAiB,CAAC,OAAO,CAAC;YAC1B,kBAAkB,CAAC,OAAO,CAAC;YAC3B,kBAAkB,CAAC,OAAO,EAAE,OAAO,CAAC;YACpC,cAAc;SACf;KACF,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAwC,CAAC;IAEpF,MAAM,WAAW,GAAG;QAClB,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC;QAC7B,GAAG,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC,IAAI,CAAC,EAAE,MAAM;QACd,SAAS,EAAE,oBAAoB,CAAC,IAAI,CAAC;KAC7B,CAAC;IAEX,OAAO;QACL,IAAI;QACJ,IAAI,EAAE;YACJ,GAAG,IAAI;YACP,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,UAAU;SACrB;QACD,KAAK,EAAE;YACL,GAAI,cAAc,CAAC,KAAsB;YACzC,KAAK,EAAE,SAAS;SACjB;QACD,OAAO;QACP,cAAc;QACd,WAAW;KACZ,CAAC;AACJ,CAAC"}
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/esm/floating.ts b/packages/react-headless/popover/dist/esm/floating.ts
new file mode 100644
index 000000000..2fdb48ffc
--- /dev/null
+++ b/packages/react-headless/popover/dist/esm/floating.ts
@@ -0,0 +1,175 @@
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  limitShift,
+  offset,
+  shift,
+  useFloating,
+  type ElementRects,
+  type Middleware,
+  type Placement,
+  type Rect,
+} from "@floating-ui/react";
+import { useMemo, useState } from "react";
+
+export interface PositioningOptions {
+  /**
+   * The strategy to use for positioning
+   * @default "absolute"
+   */
+  strategy?: "absolute" | "fixed";
+  /**
+   * The initial placement of the floating element
+   * @default "bottom"
+   */
+  placement?: Placement;
+  /**
+   * The gutter between the floating element and the reference element
+   */
+  gutter?: number;
+  /**
+   * Whether to flip the placement
+   * @default true
+   */
+  flip?: boolean | Placement[];
+  /**
+   * Whether the popover should slide when it overflows.
+   * @default true
+   */
+  slide?: boolean;
+  /**
+   * The virtual padding around the viewport edges to check for overflow
+   * @default 8
+   */
+  overflowPadding?: number;
+  /**
+   * The minimum padding between the arrow and the floating element's corner.
+   * @default 4
+   */
+  arrowPadding?: number;
+}
+
+const defaultPositioningOptions: PositioningOptions = {
+  strategy: "absolute",
+  placement: "bottom",
+  flip: true,
+  slide: true,
+  overflowPadding: 8,
+  arrowPadding: 4,
+};
+
+function getArrowRect(arrowElement: HTMLElement | null): Rect | null {
+  return arrowElement?.getClientRects().item(0) ?? null;
+}
+
+function getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {
+  if (!arrowElement) return;
+  return arrow({ element: arrowElement, padding: opts.arrowPadding });
+}
+
+function getOffsetMiddleware(arrowOffset: number, opts: PositioningOptions) {
+  const offsetMainAxis = (opts.gutter ?? 0) + arrowOffset;
+  return offset(offsetMainAxis);
+}
+
+function getFlipMiddleware(opts: PositioningOptions) {
+  if (!opts.flip) return;
+  return flip({
+    padding: opts.overflowPadding,
+    fallbackPlacements: opts.flip === true ? undefined : opts.flip,
+  });
+}
+
+function getShiftMiddleware(opts: PositioningOptions) {
+  if (!opts.slide) return;
+  return shift({
+    mainAxis: opts.slide,
+    padding: opts.overflowPadding,
+    limiter: limitShift(),
+  });
+}
+
+const rectMiddleware: Middleware = {
+  name: "rects",
+  fn({ rects }) {
+    return {
+      data: rects,
+    };
+  },
+};
+
+export interface UsePositionedFloatingProps extends PositioningOptions {
+  /**
+   * Whether the floating element is initially open
+   */
+  defaultOpen?: boolean;
+  /**
+   * Whether the floating element is open
+   */
+  open?: boolean;
+  /**
+   * Callback when the floating element is opened or closed
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+const ARROW_FLOATING_STYLE = {
+  top: "",
+  right: "rotate(90deg)",
+  bottom: "rotate(180deg)",
+  left: "rotate(270deg)",
+} as const;
+
+export function usePositionedFloating(props: UsePositionedFloatingProps) {
+  const options = { ...defaultPositioningOptions, ...props };
+
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen);
+  const [arrowEl, setArrowEl] = useState<HTMLElement | null>(null);
+  const arrowRect = useMemo(() => getArrowRect(arrowEl), [arrowEl]);
+  const arrowOffset = arrowRect?.height ?? 0;
+
+  const open = props.open ?? uncontrolledOpen;
+  const onOpenChange = props.onOpenChange ?? setUncontrolledOpen;
+
+  const { refs, context, floatingStyles, middlewareData } = useFloating({
+    strategy: options.strategy,
+    open,
+    placement: options.placement,
+    onOpenChange: onOpenChange,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      getOffsetMiddleware(arrowOffset, options),
+      getFlipMiddleware(options),
+      getShiftMiddleware(options),
+      getArrowMiddleware(arrowEl, options),
+      rectMiddleware,
+    ],
+  });
+
+  const side = context.placement.split("-")[0] as "top" | "bottom" | "left" | "right";
+
+  const arrowStyles = {
+    position: "absolute",
+    left: middlewareData.arrow?.x,
+    top: middlewareData.arrow?.y,
+    [side]: "100%",
+    transform: ARROW_FLOATING_STYLE[side],
+  } as const;
+
+  return {
+    open,
+    refs: {
+      ...refs,
+      arrow: arrowEl,
+      setArrow: setArrowEl,
+    },
+    rects: {
+      ...(middlewareData.rects as ElementRects),
+      arrow: arrowRect,
+    },
+    context,
+    floatingStyles,
+    arrowStyles,
+  };
+}
diff --git a/packages/react-headless/popover/dist/esm/index.d.ts b/packages/react-headless/popover/dist/esm/index.d.ts
deleted file mode 100644
index cae040ff9..000000000
--- a/packages/react-headless/popover/dist/esm/index.d.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { type UsePositionedFloatingProps } from "./floating.js";
-export interface UsePopoverProps extends UsePositionedFloatingProps {
-}
-export declare function usePopover(props?: UsePopoverProps): {
-    open: boolean | undefined;
-    refs: {
-        anchor: (instance: HTMLElement | null) => void;
-        trigger: (instance: HTMLElement | null) => void;
-        positioner: (instance: HTMLElement | null) => void;
-        arrow: (instance: HTMLElement | null) => void;
-    };
-    rects: {
-        arrow: {
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-        } | null;
-        reference: import("@floating-ui/utils").Rect;
-        floating: import("@floating-ui/utils").Rect;
-    };
-    anchorProps: {
-        [x: string]: unknown;
-    };
-    triggerProps: {
-        readonly "aria-haspopup": "dialog";
-        readonly "aria-expanded": boolean | undefined;
-    };
-    positionerProps: {
-        style: import("react").CSSProperties;
-    };
-    arrowProps: {
-        style: {
-            readonly [x: string]: number | "" | "absolute" | "rotate(90deg)" | "rotate(180deg)" | "rotate(270deg)" | "100%" | undefined;
-            readonly position: "absolute";
-            readonly left: number | undefined;
-            readonly top: number | undefined;
-            readonly transform: "" | "rotate(90deg)" | "rotate(180deg)" | "rotate(270deg)";
-        };
-    };
-};
-//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/esm/index.d.ts.map b/packages/react-headless/popover/dist/esm/index.d.ts.map
deleted file mode 100644
index 5ba6222d7..000000000
--- a/packages/react-headless/popover/dist/esm/index.d.ts.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAIvF,MAAM,WAAW,eAAgB,SAAQ,0BAA0B;CAAG;AAEtE,wBAAgB,UAAU,CAAC,KAAK,GAAE,eAAoB;;;gBAanB,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;iBACrC,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;oBACpC,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;eAC9C,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBnE"}
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/esm/index.js b/packages/react-headless/popover/dist/esm/index.js
deleted file mode 100644
index 0ac3adae9..000000000
--- a/packages/react-headless/popover/dist/esm/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useClick, useDismiss, useInteractions, useRole } from "@floating-ui/react";
-import { usePositionedFloating } from "./floating.js";
-export function usePopover(props = {}) {
-    const { open, refs, context, floatingStyles, arrowStyles, rects } = usePositionedFloating(props);
-    const role = useRole(context);
-    const click = useClick(context);
-    const dismiss = useDismiss(context);
-    const triggerInteractions = useInteractions([role, click, dismiss]);
-    const anchorInteractions = useInteractions([role, dismiss]);
-    return {
-        open,
-        refs: {
-            anchor: refs.setReference,
-            trigger: refs.setReference,
-            positioner: refs.setFloating,
-            arrow: refs.setArrow,
-        },
-        rects,
-        anchorProps: {
-            ...anchorInteractions.getReferenceProps(),
-        },
-        triggerProps: {
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            ...triggerInteractions.getReferenceProps(),
-        },
-        positionerProps: {
-            ...triggerInteractions.getFloatingProps(),
-            style: floatingStyles,
-        },
-        arrowProps: {
-            style: arrowStyles,
-        },
-    };
-}
-//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/esm/index.js.map b/packages/react-headless/popover/dist/esm/index.js.map
deleted file mode 100644
index bfd824bad..000000000
--- a/packages/react-headless/popover/dist/esm/index.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAmC,MAAM,eAAe,CAAC;AAMvF,MAAM,UAAU,UAAU,CAAC,QAAyB,EAAE;IACpD,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAEjG,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAEpC,MAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACpE,MAAM,kBAAkB,GAAG,eAAe,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5D,OAAO;QACL,IAAI;QACJ,IAAI,EAAE;YACJ,MAAM,EAAE,IAAI,CAAC,YAAsD;YACnE,OAAO,EAAE,IAAI,CAAC,YAAsD;YACpE,UAAU,EAAE,IAAI,CAAC,WAAqD;YACtE,KAAK,EAAE,IAAI,CAAC,QAAkD;SAC/D;QACD,KAAK;QACL,WAAW,EAAE;YACX,GAAG,kBAAkB,CAAC,iBAAiB,EAAE;SAC1C;QACD,YAAY,EAAE;YACZ,eAAe,EAAE,QAAQ;YACzB,eAAe,EAAE,IAAI;YACrB,GAAG,mBAAmB,CAAC,iBAAiB,EAAE;SAClC;QACV,eAAe,EAAE;YACf,GAAG,mBAAmB,CAAC,gBAAgB,EAAE;YACzC,KAAK,EAAE,cAAc;SACtB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,WAAW;SACnB;KACF,CAAC;AACJ,CAAC"}
\ No newline at end of file
diff --git a/packages/react-headless/popover/dist/esm/index.ts b/packages/react-headless/popover/dist/esm/index.ts
new file mode 100644
index 000000000..b1f99f16b
--- /dev/null
+++ b/packages/react-headless/popover/dist/esm/index.ts
@@ -0,0 +1,43 @@
+import { useClick, useDismiss, useInteractions, useRole } from "@floating-ui/react";
+import { usePositionedFloating, type UsePositionedFloatingProps } from "./floating.js";
+
+// TODO: useRole이 임의로 id를 생성하는 문제가 있음. 동작만 참고하고 role="dialog"에 맞게 aria attribute 설정을 직접 해야 함.
+
+export interface UsePopoverProps extends UsePositionedFloatingProps {}
+
+export function usePopover(props: UsePopoverProps = {}) {
+  const { open, refs, context, floatingStyles, arrowStyles, rects } = usePositionedFloating(props);
+
+  const role = useRole(context);
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+
+  const triggerInteractions = useInteractions([role, click, dismiss]);
+  const anchorInteractions = useInteractions([role, dismiss]);
+
+  return {
+    open,
+    refs: {
+      anchor: refs.setReference as (instance: HTMLElement | null) => void,
+      trigger: refs.setReference as (instance: HTMLElement | null) => void,
+      positioner: refs.setFloating as (instance: HTMLElement | null) => void,
+      arrow: refs.setArrow as (instance: HTMLElement | null) => void,
+    },
+    rects,
+    anchorProps: {
+      ...anchorInteractions.getReferenceProps(),
+    },
+    triggerProps: {
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      ...triggerInteractions.getReferenceProps(),
+    } as const,
+    positionerProps: {
+      ...triggerInteractions.getFloatingProps(),
+      style: floatingStyles,
+    },
+    arrowProps: {
+      style: arrowStyles,
+    },
+  };
+}
diff --git a/packages/react-headless/popover/package.json b/packages/react-headless/popover/package.json
index b3200b826..a5f3a96f2 100644
--- a/packages/react-headless/popover/package.json
+++ b/packages/react-headless/popover/package.json
@@ -12,13 +12,11 @@
     ".": {
       "import": {
         "source": "./src/index.ts",
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
+        "default": "./dist/esm/index.ts"
       },
       "require": {
         "source": "./src/index.ts",
-        "types": "./dist/commonjs/index.d.ts",
-        "default": "./dist/commonjs/index.js"
+        "default": "./dist/commonjs/index.ts"
       }
     }
   },
@@ -59,7 +57,6 @@
     ]
   },
   "type": "module",
-  "module": "./dist/esm/index.js",
-  "main": "./dist/commonjs/index.js",
-  "types": "./dist/commonjs/index.d.ts"
+  "module": "./dist/esm/index.ts",
+  "main": "./dist/commonjs/index.ts"
 }
diff --git a/packages/recipe-generator/preset/src/__generated__/action-chip.vars.ts b/packages/recipe-generator/preset/src/__generated__/action-chip.vars.ts
index 662677e6e..138c5fa7c 100644
--- a/packages/recipe-generator/preset/src/__generated__/action-chip.vars.ts
+++ b/packages/recipe-generator/preset/src/__generated__/action-chip.vars.ts
@@ -3,7 +3,7 @@ export const vars = {
     "enabled": {
       "root": {
         "color": "var(--seed-color-bg-neutral-weak)",
-        "borderRadius": "var(--seed-radii-full)"
+        "cornerRadius": "var(--seed-radii-full)"
       },
       "label": {
         "color": "var(--seed-color-fg-neutral)",
@@ -14,6 +14,9 @@ export const vars = {
       },
       "suffix": {
         "color": "var(--seed-color-fg-neutral)"
+      },
+      "count": {
+        "color": "var(--seed-color-fg-neutral-muted)"
       }
     },
     "pressed": {
@@ -47,13 +50,13 @@ export const vars = {
         "gap": "var(--seed-unit-1)"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-75)"
+        "fontSize": "var(--seed-font-size-100)"
       },
       "prefix": {
-        "size": "var(--seed-unit-3\\.5)"
+        "size": "var(--seed-unit-4)"
       },
       "suffix": {
-        "size": "var(--seed-unit-3\\.5)"
+        "size": "var(--seed-unit-4)"
       }
     }
   },
@@ -71,11 +74,11 @@ export const vars = {
         "size": "var(--seed-unit-4)"
       },
       "suffix": {
-        "size": "var(--seed-unit-3\\.5)"
+        "size": "var(--seed-unit-4)"
       }
     }
   },
-  "sizeSmallLayoutText": {
+  "sizeSmallLayoutWithText": {
     "enabled": {
       "root": {
         "paddingX": "var(--seed-unit-3)"
@@ -92,7 +95,7 @@ export const vars = {
       }
     }
   },
-  "sizeMediumLayoutText": {
+  "sizeMediumLayoutWithText": {
     "enabled": {
       "root": {
         "paddingX": "var(--seed-unit-3\\.5)"
diff --git a/packages/recipe-generator/preset/src/__generated__/control-chip.vars.ts b/packages/recipe-generator/preset/src/__generated__/control-chip.vars.ts
new file mode 100644
index 000000000..7f7fb9139
--- /dev/null
+++ b/packages/recipe-generator/preset/src/__generated__/control-chip.vars.ts
@@ -0,0 +1,139 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral)",
+        "strokeWidth": "1px",
+        "cornerRadius": "var(--seed-radii-full)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "prefix": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffix": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "count": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "strokeWidth": 0,
+        "color": "var(--seed-color-bg-brand-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "prefix": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "suffix": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "count": {
+        "color": "var(--seed-color-fg-brand)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-weak-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefix": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffix": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "count": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-unit-8)",
+        "paddingY": "var(--seed-unit-1\\.5)",
+        "gap": "var(--seed-unit-1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-100)"
+      },
+      "prefix": {
+        "size": "var(--seed-unit-4)"
+      },
+      "suffix": {
+        "size": "var(--seed-unit-4)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-unit-9)",
+        "paddingY": "var(--seed-unit-2)",
+        "gap": "var(--seed-unit-1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-100)"
+      },
+      "prefix": {
+        "size": "var(--seed-unit-4)"
+      },
+      "suffix": {
+        "size": "var(--seed-unit-4)"
+      }
+    }
+  },
+  "sizeSmallLayoutWithText": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-unit-3)"
+      }
+    }
+  },
+  "sizeSmallLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-unit-8)"
+      },
+      "icon": {
+        "size": "var(--seed-unit-4)"
+      }
+    }
+  },
+  "sizeMediumLayoutWithText": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-unit-3\\.5)"
+      }
+    }
+  },
+  "sizeMediumLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-unit-9)"
+      },
+      "icon": {
+        "size": "var(--seed-unit-4)"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/recipe-generator/preset/src/__generated__/switch.vars.ts b/packages/recipe-generator/preset/src/__generated__/switch.vars.ts
index 2201a7396..fa229d602 100644
--- a/packages/recipe-generator/preset/src/__generated__/switch.vars.ts
+++ b/packages/recipe-generator/preset/src/__generated__/switch.vars.ts
@@ -2,13 +2,12 @@ export const vars = {
   "base": {
     "enabled": {
       "control": {
-        "color": "var(--seed-color-palette-gray-500)",
+        "color": "var(--seed-color-palette-gray-600)",
         "cornerRadius": "var(--seed-radii-full)"
       },
       "thumb": {
         "color": "var(--seed-color-fg-static-white)",
-        "cornerRadius": "var(--seed-radii-full)",
-        "shadow": "0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.06)"
+        "cornerRadius": "var(--seed-radii-full)"
       }
     },
     "enabledSelected": {
@@ -39,7 +38,8 @@ export const vars = {
       },
       "thumb": {
         "height": "27px",
-        "width": "27px"
+        "width": "27px",
+        "shadow": "0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.06)"
       }
     }
   },
diff --git a/packages/recipe-generator/preset/src/action-chip.recipe.ts b/packages/recipe-generator/preset/src/action-chip.recipe.ts
index 2c9ee7805..891a8120f 100644
--- a/packages/recipe-generator/preset/src/action-chip.recipe.ts
+++ b/packages/recipe-generator/preset/src/action-chip.recipe.ts
@@ -20,7 +20,7 @@ const actionChip = defineRecipe({
       WebkitFontSmoothing: "antialiased",
       MozOsxFontSmoothing: "grayscale",
 
-      borderRadius: vars.base.enabled.root.borderRadius,
+      borderRadius: vars.base.enabled.root.cornerRadius,
       [pseudo(focus)]: {
         outline: "none",
       },
@@ -100,17 +100,17 @@ const actionChip = defineRecipe({
       },
     },
     layout: {
-      text: {},
+      withText: {},
       iconOnly: {},
     },
   },
   compoundVariants: [
     {
       size: "medium",
-      layout: "text",
+      layout: "withText",
       css: {
         root: {
-          paddingInline: vars.sizeMediumLayoutText.enabled.root.paddingX,
+          paddingInline: vars.sizeMediumLayoutWithText.enabled.root.paddingX,
         },
       },
     },
@@ -129,10 +129,10 @@ const actionChip = defineRecipe({
     },
     {
       size: "small",
-      layout: "text",
+      layout: "withText",
       css: {
         root: {
-          paddingInline: vars.sizeSmallLayoutText.enabled.root.paddingX,
+          paddingInline: vars.sizeSmallLayoutWithText.enabled.root.paddingX,
         },
       },
     },
diff --git a/packages/recipe-generator/preset/src/control-chip.recipe.ts b/packages/recipe-generator/preset/src/control-chip.recipe.ts
new file mode 100644
index 000000000..2f7a4b91c
--- /dev/null
+++ b/packages/recipe-generator/preset/src/control-chip.recipe.ts
@@ -0,0 +1,173 @@
+import { rem } from "@seed-design/recipe-generator-core";
+
+import { vars } from "./__generated__/control-chip.vars";
+import { defineRecipe } from "./helper";
+import { active, checked, disabled, focus, pseudo } from "./pseudo";
+
+const controlChip = defineRecipe({
+  name: "controlChip",
+  slots: ["root", "label", "icon", "prefix", "suffix", "count"],
+  base: {
+    root: {
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      boxSizing: "border-box",
+      cursor: "pointer",
+      border: "none",
+      textTransform: "none",
+      textAlign: "start",
+      WebkitFontSmoothing: "antialiased",
+      MozOsxFontSmoothing: "grayscale",
+
+      borderRadius: vars.base.enabled.root.cornerRadius,
+      borderStyle: "solid",
+      borderWidth: vars.base.enabled.root.strokeWidth,
+      borderColor: vars.base.enabled.root.strokeColor,
+
+      [pseudo(focus)]: {
+        outline: "none",
+      },
+      [pseudo(active)]: {
+        background: vars.base.pressed.root.color,
+      },
+      [pseudo(checked)]: {
+        background: vars.base.selected.root.color,
+        borderWidth: vars.base.selected.root.strokeWidth as 0,
+      },
+      [pseudo(checked, active)]: {
+        background: vars.base.selectedPressed.root.color,
+      },
+      [pseudo(disabled)]: {
+        background: vars.base.disabled.root.color,
+        cursor: "not-allowed",
+      },
+    },
+    label: {
+      lineHeight: 1,
+
+      color: vars.base.enabled.label.color,
+      fontWeight: vars.base.enabled.label.fontWeight,
+      [pseudo(checked)]: {
+        color: vars.base.selected.label.color,
+      },
+      [pseudo(disabled)]: {
+        color: vars.base.disabled.label.color,
+      },
+    },
+    prefix: {
+      display: "inline-flex",
+
+      color: vars.base.enabled.prefix.color,
+      [pseudo(checked)]: {
+        color: vars.base.selected.prefix.color,
+      },
+      [pseudo(disabled)]: {
+        color: vars.base.disabled.prefix.color,
+      },
+    },
+    suffix: {
+      display: "inline-flex",
+
+      color: vars.base.enabled.suffix.color,
+      [pseudo(checked)]: {
+        color: vars.base.selected.suffix.color,
+      },
+      [pseudo(disabled)]: {
+        color: vars.base.disabled.suffix.color,
+      },
+    },
+  },
+  variants: {
+    size: {
+      medium: {
+        root: {
+          minHeight: vars.sizeMedium.enabled.root.minHeight,
+          paddingBlock: vars.sizeMedium.enabled.root.paddingY,
+          gap: vars.sizeMedium.enabled.root.gap,
+        },
+        label: {
+          fontSize: vars.sizeMedium.enabled.label.fontSize,
+        },
+        prefix: {
+          width: rem(vars.sizeMedium.enabled.prefix.size),
+          height: rem(vars.sizeMedium.enabled.prefix.size),
+        },
+        suffix: {
+          width: rem(vars.sizeMedium.enabled.suffix.size),
+          height: rem(vars.sizeMedium.enabled.suffix.size),
+        },
+      },
+      small: {
+        root: {
+          minHeight: vars.sizeSmall.enabled.root.minHeight,
+          paddingBlock: vars.sizeSmall.enabled.root.paddingY,
+          gap: vars.sizeSmall.enabled.root.gap,
+        },
+        label: {
+          fontSize: vars.sizeSmall.enabled.label.fontSize,
+        },
+        prefix: {
+          width: rem(vars.sizeSmall.enabled.prefix.size),
+          height: rem(vars.sizeSmall.enabled.prefix.size),
+        },
+        suffix: {
+          width: rem(vars.sizeSmall.enabled.suffix.size),
+          height: rem(vars.sizeSmall.enabled.suffix.size),
+        },
+      },
+    },
+    layout: {
+      withText: {},
+      iconOnly: {},
+    },
+  },
+  compoundVariants: [
+    {
+      size: "medium",
+      layout: "withText",
+      css: {
+        root: {
+          paddingInline: vars.sizeMediumLayoutWithText.enabled.root.paddingX,
+        },
+      },
+    },
+    {
+      size: "medium",
+      layout: "iconOnly",
+      css: {
+        root: {
+          minWidth: vars.sizeMediumLayoutIconOnly.enabled.root.minWidth,
+        },
+        icon: {
+          width: vars.sizeMediumLayoutIconOnly.enabled.icon.size,
+          height: vars.sizeMediumLayoutIconOnly.enabled.icon.size,
+        },
+      },
+    },
+    {
+      size: "small",
+      layout: "withText",
+      css: {
+        root: {
+          paddingInline: vars.sizeSmallLayoutWithText.enabled.root.paddingX,
+        },
+      },
+    },
+    {
+      size: "small",
+      layout: "iconOnly",
+      css: {
+        root: {
+          minWidth: vars.sizeSmallLayoutIconOnly.enabled.root.minWidth,
+        },
+        icon: {
+          width: vars.sizeSmallLayoutIconOnly.enabled.icon.size,
+          height: vars.sizeSmallLayoutIconOnly.enabled.icon.size,
+        },
+      },
+    },
+  ],
+});
+
+export default controlChip;
diff --git a/packages/recipe-generator/preset/src/index.ts b/packages/recipe-generator/preset/src/index.ts
index 269e8ac39..d3c372d34 100644
--- a/packages/recipe-generator/preset/src/index.ts
+++ b/packages/recipe-generator/preset/src/index.ts
@@ -13,6 +13,7 @@ import chipTab from "./chip-tab.recipe";
 import chipTabs from "./chip-tabs.recipe";
 import progressCircle from "./progress-circle.recipe";
 import expandButton from "./expand-button.recipe";
+import controlChip from "./control-chip.recipe";
 
 const recipes = {
   avatar,
@@ -21,6 +22,7 @@ const recipes = {
   dialog,
   checkbox,
   actionChip,
+  controlChip,
   callout,
   switch: switchRecipe,
   helpBubble,
diff --git a/packages/recipe-generator/preset/src/switch.recipe.ts b/packages/recipe-generator/preset/src/switch.recipe.ts
index aaa7eeecf..136c78342 100644
--- a/packages/recipe-generator/preset/src/switch.recipe.ts
+++ b/packages/recipe-generator/preset/src/switch.recipe.ts
@@ -1,6 +1,6 @@
 import { vars } from "./__generated__/switch.vars";
 import { defineRecipe } from "./helper";
-import { active, checked, disabled, pseudo } from "./pseudo";
+import { checked, disabled, pseudo } from "./pseudo";
 
 const switchRecipe = defineRecipe({
   name: "switch",
@@ -43,8 +43,6 @@ const switchRecipe = defineRecipe({
       borderRadius: vars.base.enabled.thumb.cornerRadius,
       background: vars.base.enabled.thumb.color,
 
-      boxShadow: vars.base.enabled.thumb.shadow,
-
       transition: "transform 150ms cubic-bezier(0.35, 0, 0.35, 1)",
     },
   },
@@ -59,6 +57,7 @@ const switchRecipe = defineRecipe({
         thumb: {
           width: vars.sizeMedium.enabled.thumb.width,
           height: vars.sizeMedium.enabled.thumb.height,
+          boxShadow: vars.sizeMedium.enabled.thumb.shadow,
 
           [pseudo(checked)]: {
             transform: `translateX(calc(${vars.sizeMedium.enabled.root.width} - ${vars.sizeMedium.enabled.root.height}))`,
diff --git a/packages/recipe/lib/actionChip.d.ts b/packages/recipe/lib/actionChip.d.ts
index 5e9f05fad..1281c5417 100644
--- a/packages/recipe/lib/actionChip.d.ts
+++ b/packages/recipe/lib/actionChip.d.ts
@@ -1,6 +1,6 @@
 interface ActionChipVariant {
   size: "medium" | "small";
-  layout: "text" | "iconOnly"
+  layout: "withText" | "iconOnly"
 }
 
 type ActionChipVariantMap = {
diff --git a/packages/recipe/lib/actionChip.mjs b/packages/recipe/lib/actionChip.mjs
index f89bb63ad..d87b32ec3 100644
--- a/packages/recipe/lib/actionChip.mjs
+++ b/packages/recipe/lib/actionChip.mjs
@@ -32,7 +32,7 @@ const defaultVariant = {};
 const compoundVariants = [
   {
     "size": "medium",
-    "layout": "text"
+    "layout": "withText"
   },
   {
     "size": "medium",
@@ -40,7 +40,7 @@ const compoundVariants = [
   },
   {
     "size": "small",
-    "layout": "text"
+    "layout": "withText"
   },
   {
     "size": "small",
@@ -54,7 +54,7 @@ export const actionChipVariantMap = {
     "small"
   ],
   "layout": [
-    "text",
+    "withText",
     "iconOnly"
   ]
 };
diff --git a/packages/recipe/lib/controlChip.d.ts b/packages/recipe/lib/controlChip.d.ts
new file mode 100644
index 000000000..c6de73b61
--- /dev/null
+++ b/packages/recipe/lib/controlChip.d.ts
@@ -0,0 +1,18 @@
+interface ControlChipVariant {
+  size: "medium" | "small";
+  layout: "withText" | "iconOnly"
+}
+
+type ControlChipVariantMap = {
+  [key in keyof ControlChipVariant]: Array<ControlChipVariant[key]>;
+};
+
+export type ControlChipVariantProps = Partial<ControlChipVariant>;
+
+export type ControlChipSlotName = "root" | "label" | "icon" | "prefix" | "suffix" | "count";
+
+export const controlChipVariantMap: ControlChipVariantMap;
+
+export function controlChip(
+  props?: ControlChipVariantProps,
+): Record<ControlChipSlotName, string>;
\ No newline at end of file
diff --git a/packages/recipe/lib/controlChip.mjs b/packages/recipe/lib/controlChip.mjs
new file mode 100644
index 000000000..a4f71c36e
--- /dev/null
+++ b/packages/recipe/lib/controlChip.mjs
@@ -0,0 +1,73 @@
+import { createClassName } from "./className.mjs";
+
+const controlChipSlotNames = [
+  [
+    "root",
+    "controlChip__root"
+  ],
+  [
+    "label",
+    "controlChip__label"
+  ],
+  [
+    "icon",
+    "controlChip__icon"
+  ],
+  [
+    "prefix",
+    "controlChip__prefix"
+  ],
+  [
+    "suffix",
+    "controlChip__suffix"
+  ],
+  [
+    "count",
+    "controlChip__count"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [
+  {
+    "size": "medium",
+    "layout": "withText"
+  },
+  {
+    "size": "medium",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "small",
+    "layout": "withText"
+  },
+  {
+    "size": "small",
+    "layout": "iconOnly"
+  }
+];
+
+export const controlChipVariantMap = {
+  "size": [
+    "medium",
+    "small"
+  ],
+  "layout": [
+    "withText",
+    "iconOnly"
+  ]
+};
+
+export const controlChipVariantKeys = Object.keys(controlChipVariantMap);
+
+export function controlChip(props) {
+  return Object.fromEntries(
+    controlChipSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, { ...defaultVariant, ...props }, compoundVariants),
+      ];
+    }),
+  );
+}
\ No newline at end of file
diff --git a/packages/stylesheet/actionChip.css b/packages/stylesheet/actionChip.css
index d509e9b89..5524e4733 100644
--- a/packages/stylesheet/actionChip.css
+++ b/packages/stylesheet/actionChip.css
@@ -59,8 +59,8 @@
     height: var(--seed-unit-4);
 }
 .actionChip__suffix--size_medium {
-    width: var(--seed-unit-3\.5);
-    height: var(--seed-unit-3\.5);
+    width: var(--seed-unit-4);
+    height: var(--seed-unit-4);
 }
 .actionChip__root--size_small {
     min-height: var(--seed-unit-8);
@@ -68,17 +68,17 @@
     gap: var(--seed-unit-1);
 }
 .actionChip__label--size_small {
-    font-size: var(--seed-font-size-75);
+    font-size: var(--seed-font-size-100);
 }
 .actionChip__prefix--size_small {
-    width: var(--seed-unit-3\.5);
-    height: var(--seed-unit-3\.5);
+    width: var(--seed-unit-4);
+    height: var(--seed-unit-4);
 }
 .actionChip__suffix--size_small {
-    width: var(--seed-unit-3\.5);
-    height: var(--seed-unit-3\.5);
+    width: var(--seed-unit-4);
+    height: var(--seed-unit-4);
 }
-.actionChip__root--size_medium-layout_text {
+.actionChip__root--size_medium-layout_withText {
     padding-inline: var(--seed-unit-3\.5);
 }
 .actionChip__root--size_medium-layout_iconOnly {
@@ -88,7 +88,7 @@
     width: var(--seed-unit-4);
     height: var(--seed-unit-4);
 }
-.actionChip__root--size_small-layout_text {
+.actionChip__root--size_small-layout_withText {
     padding-inline: var(--seed-unit-3);
 }
 .actionChip__root--size_small-layout_iconOnly {
diff --git a/packages/stylesheet/controlChip.css b/packages/stylesheet/controlChip.css
new file mode 100644
index 000000000..c1aca1688
--- /dev/null
+++ b/packages/stylesheet/controlChip.css
@@ -0,0 +1,116 @@
+.controlChip__root {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    border: none;
+    text-transform: none;
+    text-align: start;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    border-radius: var(--seed-radii-full);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--seed-color-stroke-neutral);
+}
+.controlChip__root:is(:focus, [data-focus]) {
+    outline: none;
+}
+.controlChip__root:is(:active, [data-active]) {
+    background: var(--seed-color-bg-layer-default-pressed);
+}
+.controlChip__root:is(:checked, [data-checked]) {
+    background: var(--seed-color-bg-brand-weak);
+    border-width: 0;
+}
+.controlChip__root:is(:checked, [data-checked]):is(:active, [data-active]) {
+    background: var(--seed-color-bg-brand-weak-pressed);
+}
+.controlChip__root:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--seed-color-bg-disabled);
+    cursor: not-allowed;
+}
+.controlChip__label {
+    line-height: 1;
+    color: var(--seed-color-fg-neutral);
+    font-weight: var(--seed-font-weight-medium);
+}
+.controlChip__label:is(:checked, [data-checked]) {
+    color: var(--seed-color-fg-brand);
+}
+.controlChip__label:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.controlChip__prefix {
+    display: inline-flex;
+    color: var(--seed-color-fg-neutral);
+}
+.controlChip__prefix:is(:checked, [data-checked]) {
+    color: var(--seed-color-fg-brand);
+}
+.controlChip__prefix:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.controlChip__suffix {
+    display: inline-flex;
+    color: var(--seed-color-fg-neutral);
+}
+.controlChip__suffix:is(:checked, [data-checked]) {
+    color: var(--seed-color-fg-brand);
+}
+.controlChip__suffix:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.controlChip__root--size_medium {
+    min-height: var(--seed-unit-9);
+    padding-block: var(--seed-unit-2);
+    gap: var(--seed-unit-1);
+}
+.controlChip__label--size_medium {
+    font-size: var(--seed-font-size-100);
+}
+.controlChip__prefix--size_medium {
+    width: var(--seed-unit-4);
+    height: var(--seed-unit-4);
+}
+.controlChip__suffix--size_medium {
+    width: var(--seed-unit-4);
+    height: var(--seed-unit-4);
+}
+.controlChip__root--size_small {
+    min-height: var(--seed-unit-8);
+    padding-block: var(--seed-unit-1\.5);
+    gap: var(--seed-unit-1);
+}
+.controlChip__label--size_small {
+    font-size: var(--seed-font-size-100);
+}
+.controlChip__prefix--size_small {
+    width: var(--seed-unit-4);
+    height: var(--seed-unit-4);
+}
+.controlChip__suffix--size_small {
+    width: var(--seed-unit-4);
+    height: var(--seed-unit-4);
+}
+.controlChip__root--size_medium-layout_withText {
+    padding-inline: var(--seed-unit-3\.5);
+}
+.controlChip__root--size_medium-layout_iconOnly {
+    min-width: var(--seed-unit-9);
+}
+.controlChip__icon--size_medium-layout_iconOnly {
+    width: var(--seed-unit-4);
+    height: var(--seed-unit-4);
+}
+.controlChip__root--size_small-layout_withText {
+    padding-inline: var(--seed-unit-3);
+}
+.controlChip__root--size_small-layout_iconOnly {
+    min-width: var(--seed-unit-8);
+}
+.controlChip__icon--size_small-layout_iconOnly {
+    width: var(--seed-unit-4);
+    height: var(--seed-unit-4);
+}
\ No newline at end of file
diff --git a/packages/stylesheet/switch.css b/packages/stylesheet/switch.css
index 397d1a4ab..884579cdf 100644
--- a/packages/stylesheet/switch.css
+++ b/packages/stylesheet/switch.css
@@ -15,12 +15,9 @@
     display: block;
     position: relative;
     border-radius: var(--seed-radii-full);
-    background: var(--seed-color-palette-gray-500);
+    background: var(--seed-color-palette-gray-600);
     transition: background-color 50ms cubic-bezier(0.35, 0, 0.35, 1) 20ms;
 }
-.switch__control:is(:active, [data-active]) {
-    background: var(--seed-color-palette-gray-500);
-}
 .switch__control:is(:checked, [data-checked]) {
     background: var(--seed-color-bg-brand-solid);
 }
@@ -30,7 +27,6 @@
 .switch__thumb {
     border-radius: var(--seed-radii-full);
     background: var(--seed-color-fg-static-white);
-    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.06);
     transition: transform 150ms cubic-bezier(0.35, 0, 0.35, 1);
 }
 .switch__control--size_medium {
@@ -41,6 +37,7 @@
 .switch__thumb--size_medium {
     width: 27px;
     height: 27px;
+    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.06);
 }
 .switch__thumb--size_medium:is(:checked, [data-checked]) {
     transform: translateX(calc(51px - 31px));