From ec51f7099dc9b88fbf7217c55b2884dfa93feedb Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 28 Jan 2025 12:59:45 +0900
Subject: [PATCH 1/9] =?UTF-8?q?chore:=20CheckBox=E5=86=85=E3=81=AEhandleOn?=
 =?UTF-8?q?Click=E3=81=AF=E7=84=A1=E9=A7=84=E3=81=AAmemo=E5=8C=96=E3=81=A0?=
 =?UTF-8?q?=E3=81=A3=E3=81=9F=E3=81=AE=E3=81=A7onClick=E3=82=92=E7=9B=B4?=
 =?UTF-8?q?=E6=8E=A5=E5=88=A9=E7=94=A8=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../smarthr-ui/src/components/CheckBox/CheckBox.tsx   | 11 +++--------
 packages/smarthr-ui/src/components/Chip/Chip.tsx      |  1 +
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index 64699db917..551016b8f7 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -82,6 +82,7 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
       labelStyle,
     } = useMemo(() => {
       const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = checkbox()
+
       return {
         wrapperStyle: wrapper({ className }),
         innerWrapperStyle: innerWrapper(),
@@ -93,14 +94,8 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
       }
     }, [className, props.disabled])
 
-    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-      (e) => {
-        if (onChange) onChange(e)
-      },
-      [onChange],
-    )
-
     const inputRef = useRef<HTMLInputElement>(null)
+
     useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
       ref,
       () => inputRef.current,
@@ -124,7 +119,7 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
             type="checkbox"
             id={checkBoxId}
             checked={checked}
-            onChange={handleChange}
+            onChange={onChange}
             className={inputStyle}
             ref={inputRef}
             aria-invalid={error || undefined}
diff --git a/packages/smarthr-ui/src/components/Chip/Chip.tsx b/packages/smarthr-ui/src/components/Chip/Chip.tsx
index 40203edf70..e88a80f1c0 100644
--- a/packages/smarthr-ui/src/components/Chip/Chip.tsx
+++ b/packages/smarthr-ui/src/components/Chip/Chip.tsx
@@ -24,5 +24,6 @@ const chip = tv({
 
 export const Chip: FC<Props> = ({ size, disabled, className, ...props }) => {
   const styles = useMemo(() => chip({ size, disabled, className }), [size, disabled, className])
+
   return <span {...props} className={styles} />
 }

From 802fe1ea3f2174fb38355dff1a607dfce7cc7624 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 28 Jan 2025 13:07:32 +0900
Subject: [PATCH 2/9] =?UTF-8?q?chore:=20CheckBox=E3=81=AEAriaHiddenBox?=
 =?UTF-8?q?=E3=82=92=E5=88=87=E3=82=8A=E5=87=BA=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index 551016b8f7..1fc5b0eafd 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -124,7 +124,7 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
             ref={inputRef}
             aria-invalid={error || undefined}
           />
-          <span className={boxStyle} aria-hidden="true" />
+          <AriaHiddenBox className={boxStyle} />
           <span className={iconWrapStyle}>
             {mixed ? <FaMinusIcon className={iconStyle} /> : <FaCheckIcon className={iconStyle} />}
           </span>
@@ -139,3 +139,7 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
     )
   },
 )
+
+const AriaHiddenBox = React.memo<{ className: string }>(({ className }) => (
+  <span className={className} aria-hidden="true" />
+))

From 719bd534965d354dcb0b57419d3dda74b0f4a3a2 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 28 Jan 2025 13:09:43 +0900
Subject: [PATCH 3/9] =?UTF-8?q?chore:=20CheckBox=E3=81=AEstyles=E3=82=92me?=
 =?UTF-8?q?mo=E5=8C=96=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CheckBox/CheckBox.tsx      | 38 ++++++++-----------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index 1fc5b0eafd..72dd22fd92 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -72,25 +72,17 @@ const checkbox = tv({
 
 export const CheckBox = forwardRef<HTMLInputElement, Props>(
   ({ checked, mixed = false, error, onChange, className, children, ...props }, ref) => {
-    const {
-      wrapperStyle,
-      innerWrapperStyle,
-      boxStyle,
-      inputStyle,
-      iconWrapStyle,
-      iconStyle,
-      labelStyle,
-    } = useMemo(() => {
+    const styles = useMemo(() => {
       const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = checkbox()
 
       return {
-        wrapperStyle: wrapper({ className }),
-        innerWrapperStyle: innerWrapper(),
-        boxStyle: box(),
-        inputStyle: input(),
-        iconWrapStyle: iconWrap(),
-        iconStyle: icon(),
-        labelStyle: label({ disabled: props.disabled }),
+        wrapper: wrapper({ className }),
+        innerWrapper: innerWrapper(),
+        box: box(),
+        input: input(),
+        iconWrap: iconWrap(),
+        icon: icon(),
+        label: label({ disabled: props.disabled }),
       }
     }, [className, props.disabled])
 
@@ -111,8 +103,8 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
     const checkBoxId = props.id || defaultId
 
     return (
-      <span className={wrapperStyle}>
-        <span className={innerWrapperStyle}>
+      <span className={styles.wrapper}>
+        <span className={styles.innerWrapper}>
           <input
             {...props}
             data-smarthr-ui-input="true"
@@ -120,18 +112,18 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
             id={checkBoxId}
             checked={checked}
             onChange={onChange}
-            className={inputStyle}
+            className={styles.input}
             ref={inputRef}
             aria-invalid={error || undefined}
           />
-          <AriaHiddenBox className={boxStyle} />
-          <span className={iconWrapStyle}>
-            {mixed ? <FaMinusIcon className={iconStyle} /> : <FaCheckIcon className={iconStyle} />}
+          <AriaHiddenBox className={styles.box} />
+          <span className={styles.iconWrap}>
+            {mixed ? <FaMinusIcon className={styles.icon} /> : <FaCheckIcon className={styles.icon} />}
           </span>
         </span>
 
         {children && (
-          <label className={labelStyle} htmlFor={checkBoxId}>
+          <label className={styles.label} htmlFor={checkBoxId}>
             {children}
           </label>
         )}

From d9cbf26c574d55aef8204dd1f0ac2360cc44dd9e Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 28 Jan 2025 13:15:53 +0900
Subject: [PATCH 4/9] =?UTF-8?q?chore:=20CheckBox=E3=81=AECheckIconArea?=
 =?UTF-8?q?=E3=82=92=E5=88=87=E3=82=8A=E5=87=BA=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CheckBox/CheckBox.tsx           | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index 72dd22fd92..aeb1f60210 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -71,7 +71,7 @@ const checkbox = tv({
 })
 
 export const CheckBox = forwardRef<HTMLInputElement, Props>(
-  ({ checked, mixed = false, error, onChange, className, children, ...props }, ref) => {
+  ({ checked, mixed, error, onChange, className, children, ...props }, ref) => {
     const styles = useMemo(() => {
       const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = checkbox()
 
@@ -117,9 +117,7 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
             aria-invalid={error || undefined}
           />
           <AriaHiddenBox className={styles.box} />
-          <span className={styles.iconWrap}>
-            {mixed ? <FaMinusIcon className={styles.icon} /> : <FaCheckIcon className={styles.icon} />}
-          </span>
+          <CheckIconArea mixed={mixed} className={styles.iconWrap} iconStyle={styles.icon} />
         </span>
 
         {children && (
@@ -135,3 +133,11 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
 const AriaHiddenBox = React.memo<{ className: string }>(({ className }) => (
   <span className={className} aria-hidden="true" />
 ))
+
+const CheckIconArea = React.memo<Pick<Props, 'mixed'> & { className: string; iconStyle }>(
+  ({ mixed, className, iconStyle }) => (
+    <span className={className}>
+      {mixed ? <FaMinusIcon className={iconStyle} /> : <FaCheckIcon className={iconStyle} />}
+    </span>
+  ),
+)

From 1bdb6087d288f5af6c8ed4595be5d5875d04fd2d Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 28 Jan 2025 13:25:03 +0900
Subject: [PATCH 5/9] =?UTF-8?q?chore:=20CheckBox=E3=81=AEdisabled=E3=81=AB?=
 =?UTF-8?q?=E3=82=88=E3=82=8Bstyle=E5=A4=89=E6=9B=B4=E3=82=92=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CheckBox/CheckBox.tsx           | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index aeb1f60210..59480f0bb7 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -59,15 +59,9 @@ const checkbox = tv({
       'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',
     label: [
       'smarthr-ui-CheckBox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',
+      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',
     ],
   },
-  variants: {
-    disabled: {
-      true: {
-        label: 'shr-pointer-events-none shr-cursor-not-allowed shr-text-disabled',
-      },
-    },
-  },
 })
 
 export const CheckBox = forwardRef<HTMLInputElement, Props>(
@@ -82,9 +76,9 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
         input: input(),
         iconWrap: iconWrap(),
         icon: icon(),
-        label: label({ disabled: props.disabled }),
+        label: label(),
       }
-    }, [className, props.disabled])
+    }, [className])
 
     const inputRef = useRef<HTMLInputElement>(null)
 
@@ -103,7 +97,7 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
     const checkBoxId = props.id || defaultId
 
     return (
-      <span className={styles.wrapper}>
+      <span data-disabled={props.disabled?.toString()} className={styles.wrapper}>
         <span className={styles.innerWrapper}>
           <input
             {...props}

From 904d3156e4fe6aa8a1b476c38dbea692d35de79f Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 28 Jan 2025 13:32:39 +0900
Subject: [PATCH 6/9] =?UTF-8?q?chore:=20CheckBox=E3=81=AELabeledChildren?=
 =?UTF-8?q?=E3=82=92=E5=88=87=E3=82=8A=E5=87=BA=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CheckBox/CheckBox.tsx        | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index 59480f0bb7..c003797e40 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -114,11 +114,9 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
           <CheckIconArea mixed={mixed} className={styles.iconWrap} iconStyle={styles.icon} />
         </span>
 
-        {children && (
-          <label className={styles.label} htmlFor={checkBoxId}>
-            {children}
-          </label>
-        )}
+        <LabeledChildren htmlFor={checkBoxId} className={styles.label}>
+          {children}
+        </LabeledChildren>
       </span>
     )
   },
@@ -135,3 +133,12 @@ const CheckIconArea = React.memo<Pick<Props, 'mixed'> & { className: string; ico
     </span>
   ),
 )
+
+const LabeledChildren = React.memo<PropsWithChildren<{ className: string; htmlFor: string }>>(
+  ({ children, htmlFor, className }) =>
+    children && (
+      <label htmlFor={htmlFor} className={className}>
+        {children}
+      </label>
+    ),
+)

From d9400a9ad7e096c06cd310f9842303281ca67a62 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 28 Jan 2025 13:36:01 +0900
Subject: [PATCH 7/9] =?UTF-8?q?chore:=20CheckBox=E3=81=AEdisabled=E3=81=AE?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CheckBox/CheckBox.tsx         | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index c003797e40..154dcb9c83 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -1,11 +1,9 @@
 'use client'
 
 import React, {
-  ChangeEventHandler,
   ComponentPropsWithRef,
   PropsWithChildren,
   forwardRef,
-  useCallback,
   useEffect,
   useId,
   useImperativeHandle,
@@ -65,7 +63,7 @@ const checkbox = tv({
 })
 
 export const CheckBox = forwardRef<HTMLInputElement, Props>(
-  ({ checked, mixed, error, onChange, className, children, ...props }, ref) => {
+  ({ checked, mixed, error, className, children, disabled, ...props }, ref) => {
     const styles = useMemo(() => {
       const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = checkbox()
 
@@ -97,18 +95,18 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
     const checkBoxId = props.id || defaultId
 
     return (
-      <span data-disabled={props.disabled?.toString()} className={styles.wrapper}>
+      <span data-disabled={disabled?.toString()} className={styles.wrapper}>
         <span className={styles.innerWrapper}>
           <input
             {...props}
-            data-smarthr-ui-input="true"
+            ref={inputRef}
             type="checkbox"
             id={checkBoxId}
             checked={checked}
-            onChange={onChange}
-            className={styles.input}
-            ref={inputRef}
+            disabled={disabled}
             aria-invalid={error || undefined}
+            className={styles.input}
+            data-smarthr-ui-input="true"
           />
           <AriaHiddenBox className={styles.box} />
           <CheckIconArea mixed={mixed} className={styles.iconWrap} iconStyle={styles.icon} />
@@ -126,7 +124,7 @@ const AriaHiddenBox = React.memo<{ className: string }>(({ className }) => (
   <span className={className} aria-hidden="true" />
 ))
 
-const CheckIconArea = React.memo<Pick<Props, 'mixed'> & { className: string; iconStyle }>(
+const CheckIconArea = React.memo<Pick<Props, 'mixed'> & { className: string; iconStyle: string }>(
   ({ mixed, className, iconStyle }) => (
     <span className={className}>
       {mixed ? <FaMinusIcon className={iconStyle} /> : <FaCheckIcon className={iconStyle} />}

From 969edea04d6004a81dfdf1c28523e842cdb4556d Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 6 Feb 2025 13:32:23 +0900
Subject: [PATCH 8/9] chore: style -> className

---
 .../src/components/CheckBox/CheckBox.tsx       | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index 154dcb9c83..415d602e6d 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -64,7 +64,7 @@ const checkbox = tv({
 
 export const CheckBox = forwardRef<HTMLInputElement, Props>(
   ({ checked, mixed, error, className, children, disabled, ...props }, ref) => {
-    const styles = useMemo(() => {
+    const classNames = useMemo(() => {
       const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = checkbox()
 
       return {
@@ -95,8 +95,8 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
     const checkBoxId = props.id || defaultId
 
     return (
-      <span data-disabled={disabled?.toString()} className={styles.wrapper}>
-        <span className={styles.innerWrapper}>
+      <span data-disabled={disabled?.toString()} className={classNames.wrapper}>
+        <span className={classNames.innerWrapper}>
           <input
             {...props}
             ref={inputRef}
@@ -105,14 +105,18 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
             checked={checked}
             disabled={disabled}
             aria-invalid={error || undefined}
-            className={styles.input}
+            className={classNames.input}
             data-smarthr-ui-input="true"
           />
-          <AriaHiddenBox className={styles.box} />
-          <CheckIconArea mixed={mixed} className={styles.iconWrap} iconStyle={styles.icon} />
+          <AriaHiddenBox className={classNames.box} />
+          <CheckIconArea
+            mixed={mixed}
+            className={classNames.iconWrap}
+            iconStyle={classNames.icon}
+          />
         </span>
 
-        <LabeledChildren htmlFor={checkBoxId} className={styles.label}>
+        <LabeledChildren htmlFor={checkBoxId} className={classNames.label}>
           {children}
         </LabeledChildren>
       </span>

From b139c4b497fe2f4bec6f300547e3a19e6fa2f3a6 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Wed, 12 Feb 2025 10:30:12 +0900
Subject: [PATCH 9/9] =?UTF-8?q?chore:=20Checkbox=E3=81=AEclassName?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CheckBox/CheckBox.tsx      | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index 415d602e6d..778dee75a9 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -23,7 +23,7 @@ export type Props = PropsWithChildren<
   }
 >
 
-const checkbox = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper: 'smarthr-ui-CheckBox shr-inline-flex shr-items-baseline',
     box: [
@@ -65,7 +65,7 @@ const checkbox = tv({
 export const CheckBox = forwardRef<HTMLInputElement, Props>(
   ({ checked, mixed, error, className, children, disabled, ...props }, ref) => {
     const classNames = useMemo(() => {
-      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = checkbox()
+      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()
 
       return {
         wrapper: wrapper({ className }),
@@ -95,7 +95,7 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
     const checkBoxId = props.id || defaultId
 
     return (
-      <span data-disabled={disabled?.toString()} className={classNames.wrapper}>
+      <span data-disabled={disabled} className={classNames.wrapper}>
         <span className={classNames.innerWrapper}>
           <input
             {...props}
@@ -112,7 +112,7 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
           <CheckIconArea
             mixed={mixed}
             className={classNames.iconWrap}
-            iconStyle={classNames.icon}
+            iconClassName={classNames.icon}
           />
         </span>
 
@@ -128,13 +128,13 @@ const AriaHiddenBox = React.memo<{ className: string }>(({ className }) => (
   <span className={className} aria-hidden="true" />
 ))
 
-const CheckIconArea = React.memo<Pick<Props, 'mixed'> & { className: string; iconStyle: string }>(
-  ({ mixed, className, iconStyle }) => (
-    <span className={className}>
-      {mixed ? <FaMinusIcon className={iconStyle} /> : <FaCheckIcon className={iconStyle} />}
-    </span>
-  ),
-)
+const CheckIconArea = React.memo<
+  Pick<Props, 'mixed'> & { className: string; iconClassName: string }
+>(({ mixed, className, iconClassName }) => (
+  <span className={className}>
+    {mixed ? <FaMinusIcon className={iconClassName} /> : <FaCheckIcon className={iconClassName} />}
+  </span>
+))
 
 const LabeledChildren = React.memo<PropsWithChildren<{ className: string; htmlFor: string }>>(
   ({ children, htmlFor, className }) =>