From d27998a05c918bd07161822580a45e7ed0708822 Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Mon, 3 Feb 2025 16:02:25 +0900
Subject: [PATCH 01/14] update checkbox style

---
 src/components/Checkbox/Checkbox.stories.tsx | 52 +++++++++++++++-----
 src/components/Checkbox/Checkbox.tsx         |  4 ++
 src/components/Checkbox/styled.ts            | 10 +++-
 3 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 991c385f9..d34bca7c5 100755
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -7,6 +7,11 @@ export default {
   title: "Components/Inputs/Checkbox",
   component: Checkbox,
   argTypes: {
+    checkBoxSize: {
+      type: "select",
+      options: ["small", "medium"],
+    },
+    disabled: { control: "boolean" },
     onChange: { action: "changed" },
   },
 };
@@ -17,18 +22,39 @@ export const Example: StoryObj<CheckBoxProps> = {
 
 export const DesignSamples: StoryObj = {
   render: () => (
-    <Flex display="flex" flexDirection="column">
-      <Checkbox checked={false}>Not checked</Checkbox>
-      <Checkbox checked={true}>Checked</Checkbox>
-      <Checkbox indeterminate={true} checked={true}>
-        Checked(indeterminate)
-      </Checkbox>
-      <Checkbox disabled checked={false}>
-        Not checked(disabled)
-      </Checkbox>
-      <Checkbox disabled checked={true}>
-        Checked(disabled)
-      </Checkbox>
-    </Flex>
+    <>
+      <Flex display="flex" gap={3}>
+        <Flex display="flex" flexDirection="column" gap={1}>
+          <Checkbox checked={false} checkBoxSize="small">
+            Not checked
+          </Checkbox>
+          <Checkbox checked={true} checkBoxSize="small">
+            Checked
+          </Checkbox>
+          <Checkbox indeterminate={true} checked={true} checkBoxSize="small">
+            Checked(indeterminate)
+          </Checkbox>
+          <Checkbox disabled checked={false} checkBoxSize="small">
+            Not checked(disabled)
+          </Checkbox>
+          <Checkbox disabled checked={true} checkBoxSize="small">
+            Checked(disabled)
+          </Checkbox>
+        </Flex>
+        <Flex display="flex" flexDirection="column" gap={1}>
+          <Checkbox checked={false}>Not checked</Checkbox>
+          <Checkbox checked={true}>Checked</Checkbox>
+          <Checkbox indeterminate={true} checked={true}>
+            Checked(indeterminate)
+          </Checkbox>
+          <Checkbox disabled checked={false}>
+            Not checked(disabled)
+          </Checkbox>
+          <Checkbox disabled checked={true}>
+            Checked(disabled)
+          </Checkbox>
+        </Flex>
+      </Flex>
+    </>
   ),
 };
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index e5636b36e..d850792ac 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -5,6 +5,8 @@ export type CheckBoxProps = React.ComponentPropsWithoutRef<"input"> & {
   indeterminate?: boolean;
   error?: boolean;
   inputRef?: React.Ref<HTMLInputElement>;
+  disabled?: boolean;
+  checkBoxSize?: "small" | "medium";
 };
 
 const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
@@ -15,6 +17,7 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
       error = false,
       disabled = false,
       inputRef,
+      checkBoxSize = "medium",
       ...rest
     },
     ref,
@@ -31,6 +34,7 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
           {...rest}
         />
         <Styled.Span
+          checkBoxSize={checkBoxSize}
           error={error}
           indeterminate={indeterminate}
           hasChild={!!children}
diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
index 3e4e7bbc9..df8fb1113 100644
--- a/src/components/Checkbox/styled.ts
+++ b/src/components/Checkbox/styled.ts
@@ -1,9 +1,11 @@
 import styled from "styled-components";
 import { getShadow } from "../../utils/getShadow";
+import { fontSize } from "../Typography/Typography";
 
 export const Checkbox = styled.input<{
   indeterminate: boolean;
   error: boolean;
+  disabled: boolean;
 }>`
   opacity: 0;
   -webkit-appearance: none;
@@ -33,6 +35,7 @@ export const Container = styled.label<{ disabled: boolean }>`
 `;
 
 export const Span = styled.span<{
+  checkBoxSize: string;
   hasChild: boolean;
   indeterminate: boolean;
   error: boolean;
@@ -43,11 +46,14 @@ export const Span = styled.span<{
     error
       ? ({ theme }) => theme.palette.danger.main
       : ({ theme }) => theme.palette.black};
+  font-size: ${({ checkBoxSize }) =>
+    checkBoxSize === "small" ? `${fontSize.sm}px` : `${fontSize.md}px`};
   &::before {
     flex-shrink: 0;
     content: "";
-    width: 18px;
-    height: 18px;
+    aspect-ratio: 1;
+    width: ${({ checkBoxSize }) =>
+      checkBoxSize === "small" ? "16px" : "18px"};
     border: 1px solid
       ${({ error, theme }) =>
         error ? theme.palette.danger.main : theme.palette.divider};

From 21e328236ba11dc05ae197c2a7980484b5cf150b Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Mon, 3 Feb 2025 16:12:17 +0900
Subject: [PATCH 02/14] add changeset

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

diff --git a/.changeset/smooth-bees-tickle.md b/.changeset/smooth-bees-tickle.md
new file mode 100644
index 000000000..af4ecc95c
--- /dev/null
+++ b/.changeset/smooth-bees-tickle.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": minor
+---
+
+update checkbox style

From 6fce86746b7f51f859e138de6f1c967751d92624 Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Mon, 3 Feb 2025 16:26:14 +0900
Subject: [PATCH 03/14] update snapshot

---
 .../__snapshots__/Checkbox.test.tsx.snap      |   6 +-
 .../__snapshots__/DualListBox.test.tsx.snap   | 152 +++++++++---------
 2 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
index 5b4831887..307ca7465 100644
--- a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -3,15 +3,15 @@
 exports[`Checkbox component testing Checkbox 1`] = `
 <DocumentFragment>
   <label
-    class="sc-gsnTZi UNiNj"
+    class="sc-dkzDqf bwjwyU"
   >
     <input
-      class="sc-bczRLJ dyzxTr"
+      class="sc-gsnTZi lbDqSh"
       readonly=""
       type="checkbox"
     />
     <span
-      class="sc-dkzDqf iyVHFI"
+      class="sc-hKMtZM euyNXk"
     />
   </label>
 </DocumentFragment>
diff --git a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
index 111246a99..0e7958905 100644
--- a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
+++ b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
@@ -14,18 +14,18 @@ exports[`DualListBox component testing DualListBox 1`] = `
       orientation="vertical"
     />
     <div
-      class="sc-fEOsli hnUSIG"
+      class="sc-bjUoiL hkPZz"
     >
       <div
-        class="sc-bjUoiL hVrQLb"
+        class="sc-idiyUo bKIXon"
       >
         <p
-          class="sc-kgflAQ irzJzh"
+          class="sc-ksZaOG cjYYKg"
           color="#041C33"
           font-size="13px"
         >
           <span
-            class="sc-kgflAQ gHoRxB"
+            class="sc-ksZaOG ANBBE"
             color="#0B82F4"
             font-size="13px"
           >
@@ -35,7 +35,7 @@ exports[`DualListBox component testing DualListBox 1`] = `
         </p>
       </div>
       <ul
-        class="sc-idiyUo"
+        class="sc-dIouRR"
       />
     </div>
   </div>
@@ -58,15 +58,15 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
           display="flex"
         >
           <label
-            class="sc-hAZoDl cnpnnO"
+            class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-ksZaOG etQTLn"
+              class="sc-hAZoDl kcKywM"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fnykZs hZrbBW"
+              class="sc-fEOsli fIXTsl"
             >
               foo
             </span>
@@ -81,15 +81,15 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
           display="flex"
         >
           <label
-            class="sc-hAZoDl cnpnnO"
+            class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-ksZaOG etQTLn"
+              class="sc-hAZoDl kcKywM"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fnykZs hZrbBW"
+              class="sc-fEOsli fIXTsl"
             >
               bar
             </span>
@@ -104,15 +104,15 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
           display="flex"
         >
           <label
-            class="sc-hAZoDl cnpnnO"
+            class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-ksZaOG etQTLn"
+              class="sc-hAZoDl kcKywM"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fnykZs hZrbBW"
+              class="sc-fEOsli fIXTsl"
             >
               hoge
             </span>
@@ -127,15 +127,15 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
           display="flex"
         >
           <label
-            class="sc-hAZoDl cnpnnO"
+            class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-ksZaOG etQTLn"
+              class="sc-hAZoDl kcKywM"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fnykZs hZrbBW"
+              class="sc-fEOsli fIXTsl"
             >
               fuga
             </span>
@@ -149,18 +149,18 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
       orientation="vertical"
     />
     <div
-      class="sc-fEOsli hnUSIG"
+      class="sc-bjUoiL hkPZz"
     >
       <div
-        class="sc-bjUoiL hVrQLb"
+        class="sc-idiyUo bKIXon"
       >
         <p
-          class="sc-kgflAQ irzJzh"
+          class="sc-ksZaOG cjYYKg"
           color="#041C33"
           font-size="13px"
         >
           <span
-            class="sc-kgflAQ gHoRxB"
+            class="sc-ksZaOG ANBBE"
             color="#0B82F4"
             font-size="13px"
           >
@@ -170,7 +170,7 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
         </p>
       </div>
       <ul
-        class="sc-idiyUo"
+        class="sc-dIouRR"
       />
     </div>
   </div>
@@ -193,16 +193,16 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           display="flex"
         >
           <label
-            class="sc-hAZoDl cnpnnO"
+            class="sc-fnykZs irugyB"
           >
             <input
               checked=""
-              class="sc-ksZaOG etQTLn"
+              class="sc-hAZoDl kcKywM"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fnykZs hZrbBW"
+              class="sc-fEOsli fIXTsl"
             >
               foo
             </span>
@@ -217,16 +217,16 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           display="flex"
         >
           <label
-            class="sc-hAZoDl cnpnnO"
+            class="sc-fnykZs irugyB"
           >
             <input
               checked=""
-              class="sc-ksZaOG etQTLn"
+              class="sc-hAZoDl kcKywM"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fnykZs hZrbBW"
+              class="sc-fEOsli fIXTsl"
             >
               bar
             </span>
@@ -241,16 +241,16 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           display="flex"
         >
           <label
-            class="sc-hAZoDl cnpnnO"
+            class="sc-fnykZs irugyB"
           >
             <input
               checked=""
-              class="sc-ksZaOG etQTLn"
+              class="sc-hAZoDl kcKywM"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fnykZs hZrbBW"
+              class="sc-fEOsli fIXTsl"
             >
               hoge
             </span>
@@ -265,16 +265,16 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           display="flex"
         >
           <label
-            class="sc-hAZoDl cnpnnO"
+            class="sc-fnykZs irugyB"
           >
             <input
               checked=""
-              class="sc-ksZaOG etQTLn"
+              class="sc-hAZoDl kcKywM"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fnykZs hZrbBW"
+              class="sc-fEOsli fIXTsl"
             >
               fuga
             </span>
@@ -288,18 +288,18 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
       orientation="vertical"
     />
     <div
-      class="sc-fEOsli hnUSIG"
+      class="sc-bjUoiL hkPZz"
     >
       <div
-        class="sc-bjUoiL hVrQLb"
+        class="sc-idiyUo bKIXon"
       >
         <p
-          class="sc-kgflAQ irzJzh"
+          class="sc-ksZaOG cjYYKg"
           color="#041C33"
           font-size="13px"
         >
           <span
-            class="sc-kgflAQ gHoRxB"
+            class="sc-ksZaOG ANBBE"
             color="#0B82F4"
             font-size="13px"
           >
@@ -309,17 +309,17 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
         </p>
       </div>
       <ul
-        class="sc-idiyUo"
+        class="sc-dIouRR"
       >
         <li
-          class="sc-dIouRR dpFGJS"
+          class="sc-hHLeRK dPqaSF"
         >
           foo
           <div
-            class="sc-dmRaPn fQPlCU"
+            class="sc-kgflAQ hZAlxa"
           >
             <button
-              class="sc-hHLeRK kuTMAn"
+              class="sc-dmRaPn goJXcP"
               type="button"
             >
               <span
@@ -340,14 +340,14 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           </div>
         </li>
         <li
-          class="sc-dIouRR dpFGJS"
+          class="sc-hHLeRK dPqaSF"
         >
           bar
           <div
-            class="sc-dmRaPn fQPlCU"
+            class="sc-kgflAQ hZAlxa"
           >
             <button
-              class="sc-hHLeRK kuTMAn"
+              class="sc-dmRaPn goJXcP"
               type="button"
             >
               <span
@@ -368,14 +368,14 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           </div>
         </li>
         <li
-          class="sc-dIouRR dpFGJS"
+          class="sc-hHLeRK dPqaSF"
         >
           hoge
           <div
-            class="sc-dmRaPn fQPlCU"
+            class="sc-kgflAQ hZAlxa"
           >
             <button
-              class="sc-hHLeRK kuTMAn"
+              class="sc-dmRaPn goJXcP"
               type="button"
             >
               <span
@@ -396,14 +396,14 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           </div>
         </li>
         <li
-          class="sc-dIouRR bBTgfH"
+          class="sc-hHLeRK jXxJVM"
         >
           fuga
           <div
-            class="sc-dmRaPn fQPlCU"
+            class="sc-kgflAQ hZAlxa"
           >
             <button
-              class="sc-hHLeRK kuTMAn"
+              class="sc-dmRaPn goJXcP"
               type="button"
             >
               <span
@@ -546,18 +546,18 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
       orientation="vertical"
     />
     <div
-      class="sc-fEOsli hnUSIG"
+      class="sc-bjUoiL hkPZz"
     >
       <div
-        class="sc-bjUoiL hVrQLb"
+        class="sc-idiyUo bKIXon"
       >
         <p
-          class="sc-kgflAQ irzJzh"
+          class="sc-ksZaOG cjYYKg"
           color="#041C33"
           font-size="13px"
         >
           <span
-            class="sc-kgflAQ gHoRxB"
+            class="sc-ksZaOG ANBBE"
             color="#0B82F4"
             font-size="13px"
           >
@@ -567,17 +567,17 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
         </p>
       </div>
       <ul
-        class="sc-idiyUo"
+        class="sc-dIouRR"
       >
         <li
-          class="sc-dIouRR bBTgfH"
+          class="sc-hHLeRK jXxJVM"
         >
           foo
           <div
-            class="sc-dmRaPn fQPlCU"
+            class="sc-kgflAQ hZAlxa"
           >
             <button
-              class="sc-hHLeRK kuTMAn"
+              class="sc-dmRaPn goJXcP"
               type="button"
             >
               <span
@@ -617,18 +617,18 @@ exports[`DualListBox component testing DualListBox selectedItems 1`] = `
       orientation="vertical"
     />
     <div
-      class="sc-fEOsli hnUSIG"
+      class="sc-bjUoiL hkPZz"
     >
       <div
-        class="sc-bjUoiL hVrQLb"
+        class="sc-idiyUo bKIXon"
       >
         <p
-          class="sc-kgflAQ irzJzh"
+          class="sc-ksZaOG cjYYKg"
           color="#041C33"
           font-size="13px"
         >
           <span
-            class="sc-kgflAQ gHoRxB"
+            class="sc-ksZaOG ANBBE"
             color="#0B82F4"
             font-size="13px"
           >
@@ -638,17 +638,17 @@ exports[`DualListBox component testing DualListBox selectedItems 1`] = `
         </p>
       </div>
       <ul
-        class="sc-idiyUo"
+        class="sc-dIouRR"
       >
         <li
-          class="sc-dIouRR dpFGJS"
+          class="sc-hHLeRK dPqaSF"
         >
           foo
           <div
-            class="sc-dmRaPn fQPlCU"
+            class="sc-kgflAQ hZAlxa"
           >
             <button
-              class="sc-hHLeRK kuTMAn"
+              class="sc-dmRaPn goJXcP"
               type="button"
             >
               <span
@@ -669,14 +669,14 @@ exports[`DualListBox component testing DualListBox selectedItems 1`] = `
           </div>
         </li>
         <li
-          class="sc-dIouRR dpFGJS"
+          class="sc-hHLeRK dPqaSF"
         >
           bar
           <div
-            class="sc-dmRaPn fQPlCU"
+            class="sc-kgflAQ hZAlxa"
           >
             <button
-              class="sc-hHLeRK kuTMAn"
+              class="sc-dmRaPn goJXcP"
               type="button"
             >
               <span
@@ -697,14 +697,14 @@ exports[`DualListBox component testing DualListBox selectedItems 1`] = `
           </div>
         </li>
         <li
-          class="sc-dIouRR dpFGJS"
+          class="sc-hHLeRK dPqaSF"
         >
           hoge
           <div
-            class="sc-dmRaPn fQPlCU"
+            class="sc-kgflAQ hZAlxa"
           >
             <button
-              class="sc-hHLeRK kuTMAn"
+              class="sc-dmRaPn goJXcP"
               type="button"
             >
               <span
@@ -725,14 +725,14 @@ exports[`DualListBox component testing DualListBox selectedItems 1`] = `
           </div>
         </li>
         <li
-          class="sc-dIouRR bBTgfH"
+          class="sc-hHLeRK jXxJVM"
         >
           fuga
           <div
-            class="sc-dmRaPn fQPlCU"
+            class="sc-kgflAQ hZAlxa"
           >
             <button
-              class="sc-hHLeRK kuTMAn"
+              class="sc-dmRaPn goJXcP"
               type="button"
             >
               <span

From 54a5f9a2d044263494ec0242ee439594278d8be2 Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Mon, 3 Feb 2025 16:48:31 +0900
Subject: [PATCH 04/14] update svg icons

---
 src/components/Checkbox/styled.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
index df8fb1113..6b2d579b3 100644
--- a/src/components/Checkbox/styled.ts
+++ b/src/components/Checkbox/styled.ts
@@ -21,8 +21,8 @@ export const Checkbox = styled.input<{
     /* check icon */
     background-image: ${({ indeterminate }) =>
       indeterminate
-        ? `url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%223%22%20viewBox%3D%220%200%2010%203%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Crect%20class%3D%22a%22%20width%3D%2210%22%20height%3D%223%22%20rx%3D%220.596%22%2F%3E%3C%2Fsvg%3E')`
-        : `url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212.001%22%20height%3D%228.997%22%20viewBox%3D%220%200%2012.001%208.997%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M405.681%2C343.44l-5.154%2C5.12-1.332%2C1.323a.622.622%2C0%2C0%2C1-.877%2C0l-1.333-1.323h0l-2.943-2.924a.612.612%2C0%2C0%2C1%2C0-.871l1.332-1.324a.624.624%2C0%2C0%2C1%2C.877%2C0l2.506%2C2.49%2C4.714-4.685a.624.624%2C0%2C0%2C1%2C.877%2C0l1.333%2C1.323A.614.614%2C0%2C0%2C1%2C405.681%2C343.44Z%22%20transform%3D%22translate(-393.861%20-341.066)%22%2F%3E%3C%2Fsvg%3E')`};
+        ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHg9IjAuNDU4OTg0IiB5PSIwLjUiIHdpZHRoPSI5LjA4MjUyIiBoZWlnaHQ9IjIuMDAwMDIiIHJ4PSIwLjMiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==')`
+        : `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0yLjU5MTMgNi4yNDc0OUMyLjQ4OTY1IDYuMTQ1ODMgMi40ODk2NSA1Ljk4MTAyIDIuNTkxMyA1Ljg3OTM2TDguMzU4NTQgMC4xMTIxMjlDOC40NjAxOSAwLjAxMDQ3NTMgOC42MjUwMSAwLjAxMDQ3NTEgOC43MjY2NiAwLjExMjEyOUw5LjcwOTU4IDEuMDk1MDRDOS44MTEyMyAxLjE5NjcgOS44MTEyMyAxLjM2MTUxIDkuNzA5NTggMS40NjMxN0wzLjk0MjM0IDcuMjMwNEMzLjg0MDY5IDcuMzMyMDUgMy42NzU4NyA3LjMzMjA1IDMuNTc0MjIgNy4yMzA0TDIuNTkxMyA2LjI0NzQ5WiIgZmlsbD0id2hpdGUiLz4gPHBhdGggZD0iTTMuOTQyMzQgNy4yMzA0QzMuODQwNjkgNy4zMzIwNSAzLjY3NTg3IDcuMzMyMDUgMy41NzQyMiA3LjIzMDRMMC40NzcxMTkgNC4xMzMzQzAuMzc1NDY1IDQuMDMxNjUgMC4zNzU0NjUgMy44NjY4NCAwLjQ3NzExOSAzLjc2NTE4TDEuNDYwMDMgMi43ODIyN0MxLjU2MTY5IDIuNjgwNjEgMS43MjY1IDIuNjgwNjEgMS44MjgxNiAyLjc4MjI3TDQuOTI1MzEgNS44Nzk0MkM1LjAyNjk3IDUuOTgxMDggNS4wMjY5NyA2LjE0NTg5IDQuOTI1MzEgNi4yNDc1NUwzLjk0MjM0IDcuMjMwNFoiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==')`};
     background-repeat: no-repeat;
     background-position: center center;
   }

From 348c624bceef5defab3473277c0ec70c7f47ea8e Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Mon, 3 Feb 2025 16:50:32 +0900
Subject: [PATCH 05/14] update changeset & snapshots

---
 .changeset/fair-cherries-breathe.md              |  5 +++++
 .../__snapshots__/Checkbox.test.tsx.snap         |  2 +-
 .../__snapshots__/DualListBox.test.tsx.snap      | 16 ++++++++--------
 3 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/fair-cherries-breathe.md

diff --git a/.changeset/fair-cherries-breathe.md b/.changeset/fair-cherries-breathe.md
new file mode 100644
index 000000000..1f2ee6d50
--- /dev/null
+++ b/.changeset/fair-cherries-breathe.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+update svg icons
diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
index 307ca7465..b1d1ccfac 100644
--- a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Checkbox component testing Checkbox 1`] = `
     class="sc-dkzDqf bwjwyU"
   >
     <input
-      class="sc-gsnTZi lbDqSh"
+      class="sc-gsnTZi dKUPCs"
       readonly=""
       type="checkbox"
     />
diff --git a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
index 0e7958905..adde34cf6 100644
--- a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
+++ b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl kcKywM"
+              class="sc-hAZoDl gqGVtp"
               readonly=""
               type="checkbox"
             />
@@ -84,7 +84,7 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl kcKywM"
+              class="sc-hAZoDl gqGVtp"
               readonly=""
               type="checkbox"
             />
@@ -107,7 +107,7 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl kcKywM"
+              class="sc-hAZoDl gqGVtp"
               readonly=""
               type="checkbox"
             />
@@ -130,7 +130,7 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl kcKywM"
+              class="sc-hAZoDl gqGVtp"
               readonly=""
               type="checkbox"
             />
@@ -197,7 +197,7 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl kcKywM"
+              class="sc-hAZoDl gqGVtp"
               readonly=""
               type="checkbox"
             />
@@ -221,7 +221,7 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl kcKywM"
+              class="sc-hAZoDl gqGVtp"
               readonly=""
               type="checkbox"
             />
@@ -245,7 +245,7 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl kcKywM"
+              class="sc-hAZoDl gqGVtp"
               readonly=""
               type="checkbox"
             />
@@ -269,7 +269,7 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl kcKywM"
+              class="sc-hAZoDl gqGVtp"
               readonly=""
               type="checkbox"
             />

From c83e41ed26835c9ce73258a4fd588e188b3e4e32 Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Mon, 3 Feb 2025 21:42:47 +0900
Subject: [PATCH 06/14] rename `checkBoxSize` to `size`

---
 src/components/Checkbox/Checkbox.stories.tsx | 18 +++++++++++-------
 src/components/Checkbox/Checkbox.tsx         | 17 +++++++++++++----
 src/components/Checkbox/styled.ts            | 10 +++++-----
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index d34bca7c5..8190b8dc3 100755
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
-import Checkbox, { CheckBoxProps } from "./Checkbox";
+import Checkbox, { CheckBoxProps, CheckboxSize } from "./Checkbox";
 import { Flex } from "..";
 
 export default {
   title: "Components/Inputs/Checkbox",
   component: Checkbox,
   argTypes: {
-    checkBoxSize: {
+    size: {
       type: "select",
       options: ["small", "medium"],
     },
@@ -25,19 +25,23 @@ export const DesignSamples: StoryObj = {
     <>
       <Flex display="flex" gap={3}>
         <Flex display="flex" flexDirection="column" gap={1}>
-          <Checkbox checked={false} checkBoxSize="small">
+          <Checkbox checked={false} size={CheckboxSize.SMALL}>
             Not checked
           </Checkbox>
-          <Checkbox checked={true} checkBoxSize="small">
+          <Checkbox checked={true} size={CheckboxSize.SMALL}>
             Checked
           </Checkbox>
-          <Checkbox indeterminate={true} checked={true} checkBoxSize="small">
+          <Checkbox
+            indeterminate={true}
+            checked={true}
+            size={CheckboxSize.SMALL}
+          >
             Checked(indeterminate)
           </Checkbox>
-          <Checkbox disabled checked={false} checkBoxSize="small">
+          <Checkbox disabled checked={false} size={CheckboxSize.SMALL}>
             Not checked(disabled)
           </Checkbox>
-          <Checkbox disabled checked={true} checkBoxSize="small">
+          <Checkbox disabled checked={true} size={CheckboxSize.SMALL}>
             Checked(disabled)
           </Checkbox>
         </Flex>
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index d850792ac..245186ff2 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,12 +1,21 @@
 import * as React from "react";
 import * as Styled from "./styled";
 
-export type CheckBoxProps = React.ComponentPropsWithoutRef<"input"> & {
+export enum CheckboxSize {
+  SMALL = "small",
+  MEDIUM = "medium",
+}
+
+// sizeは大きさを示すプロパティとして使いたいため
+// size属性を除いたものを定義
+type CheckBoxPropsBase = Omit<React.ComponentPropsWithoutRef<"input">, "size">;
+
+export type CheckBoxProps = CheckBoxPropsBase & {
   indeterminate?: boolean;
   error?: boolean;
   inputRef?: React.Ref<HTMLInputElement>;
   disabled?: boolean;
-  checkBoxSize?: "small" | "medium";
+  size?: CheckboxSize;
 };
 
 const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
@@ -17,7 +26,7 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
       error = false,
       disabled = false,
       inputRef,
-      checkBoxSize = "medium",
+      size = CheckboxSize.MEDIUM,
       ...rest
     },
     ref,
@@ -34,7 +43,7 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
           {...rest}
         />
         <Styled.Span
-          checkBoxSize={checkBoxSize}
+          size={size}
           error={error}
           indeterminate={indeterminate}
           hasChild={!!children}
diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
index 6b2d579b3..bed62cf7d 100644
--- a/src/components/Checkbox/styled.ts
+++ b/src/components/Checkbox/styled.ts
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { getShadow } from "../../utils/getShadow";
 import { fontSize } from "../Typography/Typography";
+import { CheckboxSize } from "./Checkbox";
 
 export const Checkbox = styled.input<{
   indeterminate: boolean;
@@ -35,7 +36,7 @@ export const Container = styled.label<{ disabled: boolean }>`
 `;
 
 export const Span = styled.span<{
-  checkBoxSize: string;
+  size: CheckboxSize;
   hasChild: boolean;
   indeterminate: boolean;
   error: boolean;
@@ -46,14 +47,13 @@ export const Span = styled.span<{
     error
       ? ({ theme }) => theme.palette.danger.main
       : ({ theme }) => theme.palette.black};
-  font-size: ${({ checkBoxSize }) =>
-    checkBoxSize === "small" ? `${fontSize.sm}px` : `${fontSize.md}px`};
+  font-size: ${({ size }) =>
+    size === CheckboxSize.SMALL ? `${fontSize.sm}px` : `${fontSize.md}px`};
   &::before {
     flex-shrink: 0;
     content: "";
     aspect-ratio: 1;
-    width: ${({ checkBoxSize }) =>
-      checkBoxSize === "small" ? "16px" : "18px"};
+    width: ${({ size }) => (size === CheckboxSize.SMALL ? "16px" : "18px")};
     border: 1px solid
       ${({ error, theme }) =>
         error ? theme.palette.danger.main : theme.palette.divider};

From 94cf321758eeb70ca995eaab9751c474772f039e Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Mon, 3 Feb 2025 22:07:30 +0900
Subject: [PATCH 07/14] update disabled svg icons

---
 src/components/Checkbox/styled.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
index bed62cf7d..30343fa95 100644
--- a/src/components/Checkbox/styled.ts
+++ b/src/components/Checkbox/styled.ts
@@ -80,7 +80,7 @@ export const Span = styled.span<{
     background-image: ${({ indeterminate }) =>
       indeterminate
         ? `url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%223%22%20viewBox%3D%220%200%2010%203%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23b3bac1%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Crect%20class%3D%22a%22%20width%3D%2210%22%20height%3D%223%22%20rx%3D%220.596%22%2F%3E%3C%2Fsvg%3E')`
-        : `url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212.001%22%20height%3D%228.997%22%20viewBox%3D%220%200%2012.001%208.997%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23b3bac1%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M405.681%2C343.44l-5.154%2C5.12-1.332%2C1.323a.622.622%2C0%2C0%2C1-.877%2C0l-1.333-1.323h0l-2.943-2.924a.612.612%2C0%2C0%2C1%2C0-.871l1.332-1.324a.624.624%2C0%2C0%2C1%2C.877%2C0l2.506%2C2.49%2C4.714-4.685a.624.624%2C0%2C0%2C1%2C.877%2C0l1.333%2C1.323A.614.614%2C0%2C0%2C1%2C405.681%2C343.44Z%22%20transform%3D%22translate(-393.861%20-341.066)%22%2F%3E%3C%2Fsvg%3E')`};
+        : `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHg9IjAuNDU4OTg0IiB5PSIwLjUiIHdpZHRoPSI5LjA4MjUyIiBoZWlnaHQ9IjIuMDAwMDIiIGZpbGw9IiNCM0JBQzEiLz4gPC9zdmc+')`};
     background-repeat: no-repeat;
     background-position: center center;
   }

From 2468e06187d14383e7657a3f9c04cd0a22af32eb Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Tue, 4 Feb 2025 12:06:18 +0900
Subject: [PATCH 08/14] update shadow style

---
 src/components/Checkbox/styled.ts | 7 +------
 src/styles/index.ts               | 1 +
 src/styles/shadow.ts              | 8 ++++++++
 src/themes/createTheme.ts         | 8 ++++++--
 4 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 src/styles/shadow.ts

diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
index 30343fa95..c2a95d375 100644
--- a/src/components/Checkbox/styled.ts
+++ b/src/components/Checkbox/styled.ts
@@ -58,12 +58,7 @@ export const Span = styled.span<{
       ${({ error, theme }) =>
         error ? theme.palette.danger.main : theme.palette.divider};
     border-radius: ${({ theme }) => theme.radius * 0.5}px;
-    box-shadow: ${({ theme }) =>
-      getShadow(
-        3,
-        theme.palette.action.shadowOpacity,
-        theme.palette.action.shadowBase,
-      )};
+    box-shadow: ${({ theme }) => theme.shadow["3dShadowPrimary"]};
     background-color: ${({ theme }) => theme.palette.background.default};
     margin-right: ${({ hasChild, theme }) =>
       hasChild ? `${theme.spacing / 2}px` : "auto"};
diff --git a/src/styles/index.ts b/src/styles/index.ts
index e5892e1fa..63a7f0fba 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,3 +1,4 @@
+export { Shadow } from "./shadow";
 export { Radius } from "./radius";
 export { Space } from "./space";
 export { BreakPoint } from "./breakPoint";
diff --git a/src/styles/shadow.ts b/src/styles/shadow.ts
new file mode 100644
index 000000000..73f54147c
--- /dev/null
+++ b/src/styles/shadow.ts
@@ -0,0 +1,8 @@
+export const Shadow = {
+  "3dShadowPrimary":
+    "0px -3px 0px 0px rgba(2, 37, 117, 0.06) inset, 0px 1px 0px 0px rgba(4, 28, 51, 0.04)",
+  "3dShadowBasic":
+    "0px -3px 0px 0px rgba(4, 28, 51, 0.06) inset, 0px 1px 0px 0px rgba(4, 28, 51, 0.04)",
+  "3dShadowDanger":
+    "0px -3px 0px 0px rgba(112, 1, 78, 0.06) inset, 0px 1px 0px 0px rgba(4, 28, 51, 0.04)",
+};
diff --git a/src/themes/createTheme.ts b/src/themes/createTheme.ts
index 0c41dfe01..87bccc974 100644
--- a/src/themes/createTheme.ts
+++ b/src/themes/createTheme.ts
@@ -1,11 +1,12 @@
 import { Palette, createPalette } from "./palette";
-import { Radius, Space, Depth } from "../styles";
+import { Radius, Space, Depth, Shadow } from "../styles";
 import { DepthOptions, depth } from "../styles/depth";
 import { deepmerge } from "../utils/deepmerge";
 import { DeepPartial } from "../types";
 
 export type ThemeOptions = {
   palette?: DeepPartial<Palette>;
+  shadow?: { [key: string]: string };
   spacing?: number;
   radius?: number;
   depth?: DepthOptions;
@@ -13,6 +14,7 @@ export type ThemeOptions = {
 
 export type Theme = {
   palette: Palette;
+  shadow: { [key: string]: string };
   spacing: number;
   radius: number;
   depth: Depth;
@@ -21,16 +23,18 @@ export type Theme = {
 export function createTheme(options: ThemeOptions = {}): Theme {
   const {
     palette: paletteInput = {},
+    shadow: shadowInput,
     spacing: spacingInput,
     radius: radiusInput,
     ...other
   } = options;
 
   const palette = createPalette(paletteInput);
+  const shadow = shadowInput || Shadow;
   const spacing = spacingInput || Space;
   const radius = radiusInput || Radius;
 
-  const theme = deepmerge({ palette, spacing, depth, radius }, other);
+  const theme = deepmerge({ palette, shadow, spacing, depth, radius }, other);
 
   return theme;
 }

From 148af426010da797f73d5465fe52477f386eb88f Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Tue, 4 Feb 2025 12:10:45 +0900
Subject: [PATCH 09/14] remove unnecessary import

---
 src/components/Checkbox/styled.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
index c2a95d375..82e81784f 100644
--- a/src/components/Checkbox/styled.ts
+++ b/src/components/Checkbox/styled.ts
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { getShadow } from "../../utils/getShadow";
 import { fontSize } from "../Typography/Typography";
 import { CheckboxSize } from "./Checkbox";
 

From 4b2c0246b41172bbd084a79184532dacda7e8acf Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Tue, 4 Feb 2025 12:11:17 +0900
Subject: [PATCH 10/14] update snapshots

---
 .../__snapshots__/Checkbox.test.tsx.snap         |  2 +-
 .../__snapshots__/DualListBox.test.tsx.snap      | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
index b1d1ccfac..41568f7ff 100644
--- a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Checkbox component testing Checkbox 1`] = `
       type="checkbox"
     />
     <span
-      class="sc-hKMtZM euyNXk"
+      class="sc-hKMtZM jnEKau"
     />
   </label>
 </DocumentFragment>
diff --git a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
index adde34cf6..350565968 100644
--- a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
+++ b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
               type="checkbox"
             />
             <span
-              class="sc-fEOsli fIXTsl"
+              class="sc-fEOsli jVsyuP"
             >
               foo
             </span>
@@ -89,7 +89,7 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
               type="checkbox"
             />
             <span
-              class="sc-fEOsli fIXTsl"
+              class="sc-fEOsli jVsyuP"
             >
               bar
             </span>
@@ -112,7 +112,7 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
               type="checkbox"
             />
             <span
-              class="sc-fEOsli fIXTsl"
+              class="sc-fEOsli jVsyuP"
             >
               hoge
             </span>
@@ -135,7 +135,7 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
               type="checkbox"
             />
             <span
-              class="sc-fEOsli fIXTsl"
+              class="sc-fEOsli jVsyuP"
             >
               fuga
             </span>
@@ -202,7 +202,7 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
               type="checkbox"
             />
             <span
-              class="sc-fEOsli fIXTsl"
+              class="sc-fEOsli jVsyuP"
             >
               foo
             </span>
@@ -226,7 +226,7 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
               type="checkbox"
             />
             <span
-              class="sc-fEOsli fIXTsl"
+              class="sc-fEOsli jVsyuP"
             >
               bar
             </span>
@@ -250,7 +250,7 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
               type="checkbox"
             />
             <span
-              class="sc-fEOsli fIXTsl"
+              class="sc-fEOsli jVsyuP"
             >
               hoge
             </span>
@@ -274,7 +274,7 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
               type="checkbox"
             />
             <span
-              class="sc-fEOsli fIXTsl"
+              class="sc-fEOsli jVsyuP"
             >
               fuga
             </span>

From ef0db3600e113fcf58d07d38d8e2e2cba939feda Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Tue, 4 Feb 2025 13:47:06 +0900
Subject: [PATCH 11/14] fix disabled indeterminate style

---
 src/components/Checkbox/Checkbox.stories.tsx | 12 ++++++++
 src/components/Checkbox/styled.ts            | 30 ++++++++++----------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 8190b8dc3..e151552fc 100755
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -11,6 +11,7 @@ export default {
       type: "select",
       options: ["small", "medium"],
     },
+    checked: { control: "boolean" },
     disabled: { control: "boolean" },
     onChange: { action: "changed" },
   },
@@ -44,6 +45,14 @@ export const DesignSamples: StoryObj = {
           <Checkbox disabled checked={true} size={CheckboxSize.SMALL}>
             Checked(disabled)
           </Checkbox>
+          <Checkbox
+            disabled
+            checked={true}
+            indeterminate={true}
+            size={CheckboxSize.SMALL}
+          >
+            Checked(indeterminate, disabled)
+          </Checkbox>
         </Flex>
         <Flex display="flex" flexDirection="column" gap={1}>
           <Checkbox checked={false}>Not checked</Checkbox>
@@ -57,6 +66,9 @@ export const DesignSamples: StoryObj = {
           <Checkbox disabled checked={true}>
             Checked(disabled)
           </Checkbox>
+          <Checkbox disabled indeterminate={true} checked={true}>
+            Checked(indeterminate, disabled)
+          </Checkbox>
         </Flex>
       </Flex>
     </>
diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
index 82e81784f..64ffbb000 100644
--- a/src/components/Checkbox/styled.ts
+++ b/src/components/Checkbox/styled.ts
@@ -26,6 +26,21 @@ export const Checkbox = styled.input<{
     background-repeat: no-repeat;
     background-position: center center;
   }
+  &:disabled + span::before {
+    color: ${({ theme }) => theme.palette.text.disabled};
+  }
+  &:disabled + span::before {
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+    background-color: ${({ theme }) => theme.palette.gray.light};
+  }
+  &:disabled:checked + span::before {
+    background-image: ${({ indeterminate }) =>
+      indeterminate
+        ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHk9IjAuMzk4OTI2IiB3aWR0aD0iMTAiIGhlaWdodD0iMi4yMDIwNSIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=') !important`
+        : `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0zLjM2OTcgNy4xNTg5NEMzLjI1MjU1IDcuMDQxNzggMy4yNTI1NSA2Ljg1MTgzIDMuMzY5NyA2LjczNDY3TDEwLjAxNjUgMC4wODc4NjgxQzEwLjEzMzcgLTAuMDI5Mjg5MiAxMC4zMjM2IC0wLjAyOTI4OTQgMTAuNDQwOCAwLjA4Nzg2NzlMMTEuNTczNiAxLjIyMDY5QzExLjY5MDcgMS4zMzc4NSAxMS42OTA3IDEuNTI3OCAxMS41NzM2IDEuNjQ0OTVMNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDMuMzY5NyA3LjE1ODk0WiIgZmlsbD0iI0IzQkFDMSIvPiA8cGF0aCBkPSJNNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDAuOTMzMDgzIDQuNzIyMzJDMC44MTU5MjYgNC42MDUxNiAwLjgxNTkyNiA0LjQxNTIxIDAuOTMzMDgzIDQuMjk4MDVMMi4wNjU5IDMuMTY1MjNDMi4xODMwNiAzLjA0ODA3IDIuMzczMDEgMy4wNDgwNyAyLjQ5MDE3IDMuMTY1MjNMNi4wNTk2OCA2LjczNDc0QzYuMTc2ODQgNi44NTE5IDYuMTc2ODQgNy4wNDE4NSA2LjA1OTY4IDcuMTU5MDFMNC45MjY3OSA4LjI5MTc2WiIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=')`};
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
 `;
 
 export const Container = styled.label<{ disabled: boolean }>`
@@ -63,19 +78,4 @@ export const Span = styled.span<{
       hasChild ? `${theme.spacing / 2}px` : "auto"};
     transition: background-color 0.3s ease;
   }
-  ${Checkbox}:disabled + & {
-    color: ${({ theme }) => theme.palette.text.disabled};
-  }
-  ${Checkbox}:disabled + &::before {
-    border: 1px solid ${({ theme }) => theme.palette.divider};
-    background-color: ${({ theme }) => theme.palette.gray.light};
-  }
-  ${Checkbox}:disabled:checked + &::before {
-    background-image: ${({ indeterminate }) =>
-      indeterminate
-        ? `url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%223%22%20viewBox%3D%220%200%2010%203%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23b3bac1%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Crect%20class%3D%22a%22%20width%3D%2210%22%20height%3D%223%22%20rx%3D%220.596%22%2F%3E%3C%2Fsvg%3E')`
-        : `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHg9IjAuNDU4OTg0IiB5PSIwLjUiIHdpZHRoPSI5LjA4MjUyIiBoZWlnaHQ9IjIuMDAwMDIiIGZpbGw9IiNCM0JBQzEiLz4gPC9zdmc+')`};
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
 `;

From 190ad79f92e2649baf3b2c567c4a790e79c77eee Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Tue, 4 Feb 2025 13:48:44 +0900
Subject: [PATCH 12/14] update snapshot

---
 .../__snapshots__/Checkbox.test.tsx.snap      |  4 +--
 .../__snapshots__/DualListBox.test.tsx.snap   | 32 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
index 41568f7ff..794d4f8cb 100644
--- a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -6,12 +6,12 @@ exports[`Checkbox component testing Checkbox 1`] = `
     class="sc-dkzDqf bwjwyU"
   >
     <input
-      class="sc-gsnTZi dKUPCs"
+      class="sc-gsnTZi bFQvdx"
       readonly=""
       type="checkbox"
     />
     <span
-      class="sc-hKMtZM jnEKau"
+      class="sc-hKMtZM bGPWEL"
     />
   </label>
 </DocumentFragment>
diff --git a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
index 350565968..ece423dbb 100644
--- a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
+++ b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
@@ -61,12 +61,12 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl gqGVtp"
+              class="sc-hAZoDl kMDhuk"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli jVsyuP"
+              class="sc-fEOsli cbTaQr"
             >
               foo
             </span>
@@ -84,12 +84,12 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl gqGVtp"
+              class="sc-hAZoDl kMDhuk"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli jVsyuP"
+              class="sc-fEOsli cbTaQr"
             >
               bar
             </span>
@@ -107,12 +107,12 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl gqGVtp"
+              class="sc-hAZoDl kMDhuk"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli jVsyuP"
+              class="sc-fEOsli cbTaQr"
             >
               hoge
             </span>
@@ -130,12 +130,12 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl gqGVtp"
+              class="sc-hAZoDl kMDhuk"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli jVsyuP"
+              class="sc-fEOsli cbTaQr"
             >
               fuga
             </span>
@@ -197,12 +197,12 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl gqGVtp"
+              class="sc-hAZoDl kMDhuk"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli jVsyuP"
+              class="sc-fEOsli cbTaQr"
             >
               foo
             </span>
@@ -221,12 +221,12 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl gqGVtp"
+              class="sc-hAZoDl kMDhuk"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli jVsyuP"
+              class="sc-fEOsli cbTaQr"
             >
               bar
             </span>
@@ -245,12 +245,12 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl gqGVtp"
+              class="sc-hAZoDl kMDhuk"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli jVsyuP"
+              class="sc-fEOsli cbTaQr"
             >
               hoge
             </span>
@@ -269,12 +269,12 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl gqGVtp"
+              class="sc-hAZoDl kMDhuk"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli jVsyuP"
+              class="sc-fEOsli cbTaQr"
             >
               fuga
             </span>

From f5566df8c09cec08d2955c8a0bedbe01b3bd1418 Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Tue, 4 Feb 2025 16:54:45 +0900
Subject: [PATCH 13/14] fix checkbox icon

---
 src/components/Checkbox/Checkbox.tsx |  2 ++
 src/components/Checkbox/styled.ts    | 54 ++++++++++++++++++++--------
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 245186ff2..f60e98b6a 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -40,6 +40,7 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
           type="checkbox"
           indeterminate={indeterminate}
           disabled={disabled}
+          _size={size}
           {...rest}
         />
         <Styled.Span
@@ -47,6 +48,7 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
           error={error}
           indeterminate={indeterminate}
           hasChild={!!children}
+          disabled={disabled}
         >
           {children}
         </Styled.Span>
diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
index 64ffbb000..949779d11 100644
--- a/src/components/Checkbox/styled.ts
+++ b/src/components/Checkbox/styled.ts
@@ -6,38 +6,58 @@ export const Checkbox = styled.input<{
   indeterminate: boolean;
   error: boolean;
   disabled: boolean;
+  _size: CheckboxSize;
 }>`
   opacity: 0;
   -webkit-appearance: none;
   appearance: none;
   position: absolute;
 
+  // inputの状態に合わせたチェックアイコンのスタイルを
+  // ここに書いているのは、スタイルの継承の都合が悪かったため
   &:checked + span::before {
-    /* flex: 1 0 auto; */
-    /* background */
-    background-color: ${({ theme }) => theme.palette.primary.main};
+    box-shadow: ${({ theme }) => theme.shadow["3dShadowPrimary"]};
     border-color: ${({ theme }) => theme.palette.primary.dark};
-
-    /* check icon */
-    background-image: ${({ indeterminate }) =>
+    background-color: ${({ theme }) => theme.palette.primary.main};
+    background-image: ${({ indeterminate, _size }) =>
+      // eslint-disable-next-line no-nested-ternary
       indeterminate
-        ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHg9IjAuNDU4OTg0IiB5PSIwLjUiIHdpZHRoPSI5LjA4MjUyIiBoZWlnaHQ9IjIuMDAwMDIiIHJ4PSIwLjMiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==')`
-        : `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0yLjU5MTMgNi4yNDc0OUMyLjQ4OTY1IDYuMTQ1ODMgMi40ODk2NSA1Ljk4MTAyIDIuNTkxMyA1Ljg3OTM2TDguMzU4NTQgMC4xMTIxMjlDOC40NjAxOSAwLjAxMDQ3NTMgOC42MjUwMSAwLjAxMDQ3NTEgOC43MjY2NiAwLjExMjEyOUw5LjcwOTU4IDEuMDk1MDRDOS44MTEyMyAxLjE5NjcgOS44MTEyMyAxLjM2MTUxIDkuNzA5NTggMS40NjMxN0wzLjk0MjM0IDcuMjMwNEMzLjg0MDY5IDcuMzMyMDUgMy42NzU4NyA3LjMzMjA1IDMuNTc0MjIgNy4yMzA0TDIuNTkxMyA2LjI0NzQ5WiIgZmlsbD0id2hpdGUiLz4gPHBhdGggZD0iTTMuOTQyMzQgNy4yMzA0QzMuODQwNjkgNy4zMzIwNSAzLjY3NTg3IDcuMzMyMDUgMy41NzQyMiA3LjIzMDRMMC40NzcxMTkgNC4xMzMzQzAuMzc1NDY1IDQuMDMxNjUgMC4zNzU0NjUgMy44NjY4NCAwLjQ3NzExOSAzLjc2NTE4TDEuNDYwMDMgMi43ODIyN0MxLjU2MTY5IDIuNjgwNjEgMS43MjY1IDIuNjgwNjEgMS44MjgxNiAyLjc4MjI3TDQuOTI1MzEgNS44Nzk0MkM1LjAyNjk3IDUuOTgxMDggNS4wMjY5NyA2LjE0NTg5IDQuOTI1MzEgNi4yNDc1NUwzLjk0MjM0IDcuMjMwNFoiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==')`};
+        ? // マイナスアイコン
+          _size === CheckboxSize.SMALL
+          ? // チェックアイコン（小）
+            `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHg9IjAuNDU4OTg0IiB5PSIwLjUiIHdpZHRoPSI5LjA4MjUyIiBoZWlnaHQ9IjIuMDAwMDIiIHJ4PSIwLjMiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==')`
+          : // チェックアイコン（大）
+            `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDEwIDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHk9IjAuODk4OTI2IiB3aWR0aD0iMTAiIGhlaWdodD0iMi4yMDIwNSIgcng9IjAuMyIgZmlsbD0id2hpdGUiLz4gPC9zdmc+')`
+        : // チェックアイコン
+        _size === CheckboxSize.SMALL
+        ? // チェックアイコン（小）
+          `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0yLjU5MTMgNi4yNDc0OUMyLjQ4OTY1IDYuMTQ1ODMgMi40ODk2NSA1Ljk4MTAyIDIuNTkxMyA1Ljg3OTM2TDguMzU4NTQgMC4xMTIxMjlDOC40NjAxOSAwLjAxMDQ3NTMgOC42MjUwMSAwLjAxMDQ3NTEgOC43MjY2NiAwLjExMjEyOUw5LjcwOTU4IDEuMDk1MDRDOS44MTEyMyAxLjE5NjcgOS44MTEyMyAxLjM2MTUxIDkuNzA5NTggMS40NjMxN0wzLjk0MjM0IDcuMjMwNEMzLjg0MDY5IDcuMzMyMDUgMy42NzU4NyA3LjMzMjA1IDMuNTc0MjIgNy4yMzA0TDIuNTkxMyA2LjI0NzQ5WiIgZmlsbD0id2hpdGUiLz4gPHBhdGggZD0iTTMuOTQyMzQgNy4yMzA0QzMuODQwNjkgNy4zMzIwNSAzLjY3NTg3IDcuMzMyMDUgMy41NzQyMiA3LjIzMDRMMC40NzcxMTkgNC4xMzMzQzAuMzc1NDY1IDQuMDMxNjUgMC4zNzU0NjUgMy44NjY4NCAwLjQ3NzExOSAzLjc2NTE4TDEuNDYwMDMgMi43ODIyN0MxLjU2MTY5IDIuNjgwNjEgMS43MjY1IDIuNjgwNjEgMS44MjgxNiAyLjc4MjI3TDQuOTI1MzEgNS44Nzk0MkM1LjAyNjk3IDUuOTgxMDggNS4wMjY5NyA2LjE0NTg5IDQuOTI1MzEgNi4yNDc1NUwzLjk0MjM0IDcuMjMwNFoiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==')`
+        : // チェックアイコン（大）
+          `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0zLjM2OTcgNy4xNTg5NEMzLjI1MjU1IDcuMDQxNzggMy4yNTI1NSA2Ljg1MTgzIDMuMzY5NyA2LjczNDY3TDEwLjAxNjUgMC4wODc4NjgxQzEwLjEzMzcgLTAuMDI5Mjg5MiAxMC4zMjM2IC0wLjAyOTI4OTQgMTAuNDQwOCAwLjA4Nzg2NzlMMTEuNTczNiAxLjIyMDY5QzExLjY5MDcgMS4zMzc4NSAxMS42OTA3IDEuNTI3OCAxMS41NzM2IDEuNjQ0OTVMNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDMuMzY5NyA3LjE1ODk0WiIgZmlsbD0id2hpdGUiLz4gPHBhdGggZD0iTTQuOTI2NzkgOC4yOTE3NkM0LjgwOTYzIDguNDA4OTEgNC42MTk2OCA4LjQwODkxIDQuNTAyNTIgOC4yOTE3NkwwLjkzMzA4MyA0LjcyMjMyQzAuODE1OTI2IDQuNjA1MTYgMC44MTU5MjYgNC40MTUyMSAwLjkzMzA4MyA0LjI5ODA1TDIuMDY1OSAzLjE2NTIzQzIuMTgzMDYgMy4wNDgwNyAyLjM3MzAxIDMuMDQ4MDcgMi40OTAxNyAzLjE2NTIzTDYuMDU5NjggNi43MzQ3NEM2LjE3Njg0IDYuODUxOSA2LjE3Njg0IDcuMDQxODUgNi4wNTk2OCA3LjE1OTAxTDQuOTI2NzkgOC4yOTE3NloiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==')`};
     background-repeat: no-repeat;
     background-position: center center;
   }
-  &:disabled + span::before {
-    color: ${({ theme }) => theme.palette.text.disabled};
-  }
   &:disabled + span::before {
     border: 1px solid ${({ theme }) => theme.palette.divider};
     background-color: ${({ theme }) => theme.palette.gray.light};
   }
   &:disabled:checked + span::before {
-    background-image: ${({ indeterminate }) =>
+    box-shadow: ${({ theme }) => theme.shadow["3dShadowBasic"]};
+    background-image: ${({ indeterminate, _size }) =>
+      // eslint-disable-next-line no-nested-ternary
       indeterminate
-        ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHk9IjAuMzk4OTI2IiB3aWR0aD0iMTAiIGhlaWdodD0iMi4yMDIwNSIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=') !important`
-        : `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0zLjM2OTcgNy4xNTg5NEMzLjI1MjU1IDcuMDQxNzggMy4yNTI1NSA2Ljg1MTgzIDMuMzY5NyA2LjczNDY3TDEwLjAxNjUgMC4wODc4NjgxQzEwLjEzMzcgLTAuMDI5Mjg5MiAxMC4zMjM2IC0wLjAyOTI4OTQgMTAuNDQwOCAwLjA4Nzg2NzlMMTEuNTczNiAxLjIyMDY5QzExLjY5MDcgMS4zMzc4NSAxMS42OTA3IDEuNTI3OCAxMS41NzM2IDEuNjQ0OTVMNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDMuMzY5NyA3LjE1ODk0WiIgZmlsbD0iI0IzQkFDMSIvPiA8cGF0aCBkPSJNNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDAuOTMzMDgzIDQuNzIyMzJDMC44MTU5MjYgNC42MDUxNiAwLjgxNTkyNiA0LjQxNTIxIDAuOTMzMDgzIDQuMjk4MDVMMi4wNjU5IDMuMTY1MjNDMi4xODMwNiAzLjA0ODA3IDIuMzczMDEgMy4wNDgwNyAyLjQ5MDE3IDMuMTY1MjNMNi4wNTk2OCA2LjczNDc0QzYuMTc2ODQgNi44NTE5IDYuMTc2ODQgNy4wNDE4NSA2LjA1OTY4IDcuMTU5MDFMNC45MjY3OSA4LjI5MTc2WiIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=')`};
+        ? // マイナスアイコン（disabled）
+          _size === CheckboxSize.SMALL
+          ? // マイナスアイコン（disabled, 小）
+            `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHg9IjAuNDU4OTg0IiB5PSIwLjUiIHdpZHRoPSI5LjA4MjUyIiBoZWlnaHQ9IjIuMDAwMDIiIGZpbGw9IiNCM0JBQzEiLz4gPC9zdmc+')`
+          : // マイナスアイコン（disabled, 大）
+            `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHk9IjAuMzk4OTI2IiB3aWR0aD0iMTAiIGhlaWdodD0iMi4yMDIwNSIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=')`
+        : // チェックアイコン（disabled）
+        _size === CheckboxSize.SMALL
+        ? // チェックアイコン（disabled, 小）
+          `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0yLjU5MTMgNi4yNDc0OUMyLjQ4OTY1IDYuMTQ1ODMgMi40ODk2NSA1Ljk4MTAyIDIuNTkxMyA1Ljg3OTM2TDguMzU4NTQgMC4xMTIxMjlDOC40NjAxOSAwLjAxMDQ3NTMgOC42MjUwMSAwLjAxMDQ3NTEgOC43MjY2NiAwLjExMjEyOUw5LjcwOTU4IDEuMDk1MDRDOS44MTEyMyAxLjE5NjcgOS44MTEyMyAxLjM2MTUxIDkuNzA5NTggMS40NjMxN0wzLjk0MjM0IDcuMjMwNEMzLjg0MDY5IDcuMzMyMDUgMy42NzU4NyA3LjMzMjA1IDMuNTc0MjIgNy4yMzA0TDIuNTkxMyA2LjI0NzQ5WiIgZmlsbD0iI0IzQkFDMSIvPiA8cGF0aCBkPSJNMy45NDIzNCA3LjIzMDRDMy44NDA2OSA3LjMzMjA1IDMuNjc1ODcgNy4zMzIwNSAzLjU3NDIyIDcuMjMwNEwwLjQ3NzExOSA0LjEzMzNDMC4zNzU0NjUgNC4wMzE2NSAwLjM3NTQ2NSAzLjg2Njg0IDAuNDc3MTE5IDMuNzY1MThMMS40NjAwMyAyLjc4MjI3QzEuNTYxNjkgMi42ODA2MSAxLjcyNjUgMi42ODA2MSAxLjgyODE2IDIuNzgyMjdMNC45MjUzMSA1Ljg3OTQyQzUuMDI2OTcgNS45ODEwOCA1LjAyNjk3IDYuMTQ1ODkgNC45MjUzMSA2LjI0NzU1TDMuOTQyMzQgNy4yMzA0WiIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=')`
+        : // チェックアイコン（disabled, 大）
+          `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0zLjM2OTcgNy4xNTg5NEMzLjI1MjU1IDcuMDQxNzggMy4yNTI1NSA2Ljg1MTgzIDMuMzY5NyA2LjczNDY3TDEwLjAxNjUgMC4wODc4NjgxQzEwLjEzMzcgLTAuMDI5Mjg5MiAxMC4zMjM2IC0wLjAyOTI4OTQgMTAuNDQwOCAwLjA4Nzg2NzlMMTEuNTczNiAxLjIyMDY5QzExLjY5MDcgMS4zMzc4NSAxMS42OTA3IDEuNTI3OCAxMS41NzM2IDEuNjQ0OTVMNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDMuMzY5NyA3LjE1ODk0WiIgZmlsbD0iI0IzQkFDMSIvPiA8cGF0aCBkPSJNNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDAuOTMzMDgzIDQuNzIyMzJDMC44MTU5MjYgNC42MDUxNiAwLjgxNTkyNiA0LjQxNTIxIDAuOTMzMDgzIDQuMjk4MDVMMi4wNjU5IDMuMTY1MjNDMi4xODMwNiAzLjA0ODA3IDIuMzczMDEgMy4wNDgwNyAyLjQ5MDE3IDMuMTY1MjNMNi4wNTk2OCA2LjczNDc0QzYuMTc2ODQgNi44NTE5IDYuMTc2ODQgNy4wNDE4NSA2LjA1OTY4IDcuMTU5MDFMNC45MjY3OSA4LjI5MTc2WiIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=')`};
     background-repeat: no-repeat;
     background-position: center center;
   }
@@ -54,6 +74,7 @@ export const Span = styled.span<{
   hasChild: boolean;
   indeterminate: boolean;
   error: boolean;
+  disabled: boolean;
 }>`
   display: inline-flex;
   align-items: center;
@@ -63,6 +84,9 @@ export const Span = styled.span<{
       : ({ theme }) => theme.palette.black};
   font-size: ${({ size }) =>
     size === CheckboxSize.SMALL ? `${fontSize.sm}px` : `${fontSize.md}px`};
+  &:disabled {
+    color: ${({ theme }) => theme.palette.text.disabled};
+  }
   &::before {
     flex-shrink: 0;
     content: "";
@@ -72,7 +96,7 @@ export const Span = styled.span<{
       ${({ error, theme }) =>
         error ? theme.palette.danger.main : theme.palette.divider};
     border-radius: ${({ theme }) => theme.radius * 0.5}px;
-    box-shadow: ${({ theme }) => theme.shadow["3dShadowPrimary"]};
+    box-shadow: ${({ theme }) => theme.shadow["3dShadowBasic"]};
     background-color: ${({ theme }) => theme.palette.background.default};
     margin-right: ${({ hasChild, theme }) =>
       hasChild ? `${theme.spacing / 2}px` : "auto"};

From af6f50396a4cd673fde2ac30d26222433db047ec Mon Sep 17 00:00:00 2001
From: geckotang <macky1207@gmail.com>
Date: Tue, 4 Feb 2025 16:59:21 +0900
Subject: [PATCH 14/14] update snapshot

---
 .../__snapshots__/Checkbox.test.tsx.snap      |  4 +--
 .../__snapshots__/DualListBox.test.tsx.snap   | 32 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
index 794d4f8cb..55d2017e1 100644
--- a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -6,12 +6,12 @@ exports[`Checkbox component testing Checkbox 1`] = `
     class="sc-dkzDqf bwjwyU"
   >
     <input
-      class="sc-gsnTZi bFQvdx"
+      class="sc-gsnTZi bTjvFv"
       readonly=""
       type="checkbox"
     />
     <span
-      class="sc-hKMtZM bGPWEL"
+      class="sc-hKMtZM hGuzJQ"
     />
   </label>
 </DocumentFragment>
diff --git a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
index ece423dbb..893b86fe0 100644
--- a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
+++ b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
@@ -61,12 +61,12 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl kMDhuk"
+              class="sc-hAZoDl jBJfJS"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli cbTaQr"
+              class="sc-fEOsli inYVUk"
             >
               foo
             </span>
@@ -84,12 +84,12 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl kMDhuk"
+              class="sc-hAZoDl jBJfJS"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli cbTaQr"
+              class="sc-fEOsli inYVUk"
             >
               bar
             </span>
@@ -107,12 +107,12 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl kMDhuk"
+              class="sc-hAZoDl jBJfJS"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli cbTaQr"
+              class="sc-fEOsli inYVUk"
             >
               hoge
             </span>
@@ -130,12 +130,12 @@ exports[`DualListBox component testing DualListBox candidateItems 1`] = `
             class="sc-fnykZs irugyB"
           >
             <input
-              class="sc-hAZoDl kMDhuk"
+              class="sc-hAZoDl jBJfJS"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli cbTaQr"
+              class="sc-fEOsli inYVUk"
             >
               fuga
             </span>
@@ -197,12 +197,12 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl kMDhuk"
+              class="sc-hAZoDl jBJfJS"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli cbTaQr"
+              class="sc-fEOsli inYVUk"
             >
               foo
             </span>
@@ -221,12 +221,12 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl kMDhuk"
+              class="sc-hAZoDl jBJfJS"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli cbTaQr"
+              class="sc-fEOsli inYVUk"
             >
               bar
             </span>
@@ -245,12 +245,12 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl kMDhuk"
+              class="sc-hAZoDl jBJfJS"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli cbTaQr"
+              class="sc-fEOsli inYVUk"
             >
               hoge
             </span>
@@ -269,12 +269,12 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
           >
             <input
               checked=""
-              class="sc-hAZoDl kMDhuk"
+              class="sc-hAZoDl jBJfJS"
               readonly=""
               type="checkbox"
             />
             <span
-              class="sc-fEOsli cbTaQr"
+              class="sc-fEOsli inYVUk"
             >
               fuga
             </span>