@ceed/cds 1.34.1 → 1.36.0-next.1

package/dist/components/layout/Box.md

@@ -5,19 +5,22 @@
 Box is the most fundamental and essential layout component. It acts as a general-purpose container that wraps other components, and you can apply styles directly through CSS-in-JS. It also includes built-in Framer Motion support, making it easy to add animations. It is also a polymorphic component that can render as any HTML element.
 
 ```tsx
-<Box {...args} sx={{
-  width: 200,
-  height: 200,
-  backgroundColor: 'primary.50',
-  border: '2px solid',
-  borderColor: 'primary.200',
-  borderRadius: 'md',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography>Box 컴포넌트</Typography>
-</Box>
+<Box
+    {...args}
+    sx={{
+      width: 200,
+      height: 200,
+      backgroundColor: "primary.50",
+      border: "2px solid",
+      borderColor: "primary.200",
+      borderRadius: "md",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }}
+  >
+    <Typography>Box 컴포넌트</Typography>
+  </Box>
 ```
 
 | Field     | Description | Default |
@@ -51,37 +54,45 @@ function MyComponent() {
 The most basic way to use Box.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Box sx={{
-  p: 2,
-  bgcolor: 'background.body',
-  border: '1px solid',
-  borderColor: 'divider'
-}}>
-<Typography>기본 Box</Typography>
-</Box>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "background.body",
+        border: "1px solid",
+        borderColor: "divider"
+      }}
+    >
+      <Typography>기본 Box</Typography>
+    </Box>
 
-<Box sx={{
-  p: 2,
-  bgcolor: 'primary.50',
-  borderRadius: 'sm'
-}}>
-<Typography>배경색과 둥근 모서리</Typography>
-</Box>
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "primary.50",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography>배경색과 둥근 모서리</Typography>
+    </Box>
 
-<Box sx={{
-  p: 2,
-  border: '2px solid',
-  borderColor: 'primary.main',
-  borderRadius: 'md'
-}}>
-<Typography>테두리가 있는 Box</Typography>
-</Box>
-</div>
+    <Box
+      sx={{
+        p: 2,
+        border: "2px solid",
+        borderColor: "primary.main",
+        borderRadius: "md"
+      }}
+    >
+      <Typography>테두리가 있는 Box</Typography>
+    </Box>
+  </div>
 ```
 
 ### Colors
@@ -89,51 +100,63 @@ The most basic way to use Box.
 You can apply various background colors.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Box sx={{
-  p: 2,
-  bgcolor: 'primary.50',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">Primary</Typography>
-</Box>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "primary.50",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">Primary</Typography>
+    </Box>
 
-<Box sx={{
-  p: 2,
-  bgcolor: 'neutral.50',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">Neutral</Typography>
-</Box>
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "neutral.50",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">Neutral</Typography>
+    </Box>
 
-<Box sx={{
-  p: 2,
-  bgcolor: 'danger.50',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">Danger</Typography>
-</Box>
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "danger.50",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">Danger</Typography>
+    </Box>
 
-<Box sx={{
-  p: 2,
-  bgcolor: 'success.50',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">Success</Typography>
-</Box>
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "success.50",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">Success</Typography>
+    </Box>
 
-<Box sx={{
-  p: 2,
-  bgcolor: 'warning.50',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">Warning</Typography>
-</Box>
-</div>
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "warning.50",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">Warning</Typography>
+    </Box>
+  </div>
 ```
 
 ### Spacing
@@ -141,76 +164,94 @@ You can apply various background colors.
 You can adjust padding and margin.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1rem'
-}}>
-<Box sx={{
-  p: 1,
-  bgcolor: 'neutral.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">패딩 1 (8px)</Typography>
-</Box>
-
-<Box sx={{
-  p: 2,
-  bgcolor: 'neutral.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">패딩 2 (16px)</Typography>
-</Box>
-
-<Box sx={{
-  p: 3,
-  bgcolor: 'neutral.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">패딩 3 (24px)</Typography>
-</Box>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "1rem"
+    }}
+  >
+    <Box
+      sx={{
+        p: 1,
+        bgcolor: "neutral.100",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">패딩 1 (8px)</Typography>
+    </Box>
 
-<Box sx={{
-  p: 4,
-  bgcolor: 'neutral.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">패딩 4 (32px)</Typography>
-</Box>
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "neutral.100",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">패딩 2 (16px)</Typography>
+    </Box>
 
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  marginTop: '2rem'
-}}>
-<Box sx={{
-  m: 1,
-  p: 2,
-  bgcolor: 'primary.50',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">마진 1</Typography>
-</Box>
+    <Box
+      sx={{
+        p: 3,
+        bgcolor: "neutral.100",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">패딩 3 (24px)</Typography>
+    </Box>
 
-<Box sx={{
-  m: 2,
-  p: 2,
-  bgcolor: 'primary.50',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">마진 2</Typography>
-</Box>
+    <Box
+      sx={{
+        p: 4,
+        bgcolor: "neutral.100",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">패딩 4 (32px)</Typography>
+    </Box>
 
-<Box sx={{
-  m: 3,
-  p: 2,
-  bgcolor: 'primary.50',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">마진 3</Typography>
-</Box>
-</div>
-</div>
+    <div
+      style={{
+        display: "flex",
+        gap: "1rem",
+        marginTop: "2rem"
+      }}
+    >
+      <Box
+        sx={{
+          m: 1,
+          p: 2,
+          bgcolor: "primary.50",
+          borderRadius: "sm"
+        }}
+      >
+        <Typography level="body-sm">마진 1</Typography>
+      </Box>
+
+      <Box
+        sx={{
+          m: 2,
+          p: 2,
+          bgcolor: "primary.50",
+          borderRadius: "sm"
+        }}
+      >
+        <Typography level="body-sm">마진 2</Typography>
+      </Box>
+
+      <Box
+        sx={{
+          m: 3,
+          p: 2,
+          bgcolor: "primary.50",
+          borderRadius: "sm"
+        }}
+      >
+        <Typography level="body-sm">마진 3</Typography>
+      </Box>
+    </div>
+  </div>
 ```
 
 ### Border Radius
@@ -218,83 +259,97 @@ You can adjust padding and margin.
 You can configure different corner radius values.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap',
-  alignItems: 'center'
-}}>
-<Box sx={{
-  width: 100,
-  height: 100,
-  bgcolor: 'primary.100',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-xs">None</Typography>
-</Box>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap",
+      alignItems: "center"
+    }}
+  >
+    <Box
+      sx={{
+        width: 100,
+        height: 100,
+        bgcolor: "primary.100",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-xs">None</Typography>
+    </Box>
 
-<Box sx={{
-  width: 100,
-  height: 100,
-  bgcolor: 'primary.100',
-  borderRadius: 'xs',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-xs">XS</Typography>
-</Box>
+    <Box
+      sx={{
+        width: 100,
+        height: 100,
+        bgcolor: "primary.100",
+        borderRadius: "xs",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-xs">XS</Typography>
+    </Box>
 
-<Box sx={{
-  width: 100,
-  height: 100,
-  bgcolor: 'primary.100',
-  borderRadius: 'sm',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-xs">SM</Typography>
-</Box>
+    <Box
+      sx={{
+        width: 100,
+        height: 100,
+        bgcolor: "primary.100",
+        borderRadius: "sm",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-xs">SM</Typography>
+    </Box>
 
-<Box sx={{
-  width: 100,
-  height: 100,
-  bgcolor: 'primary.100',
-  borderRadius: 'md',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-xs">MD</Typography>
-</Box>
+    <Box
+      sx={{
+        width: 100,
+        height: 100,
+        bgcolor: "primary.100",
+        borderRadius: "md",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-xs">MD</Typography>
+    </Box>
 
-<Box sx={{
-  width: 100,
-  height: 100,
-  bgcolor: 'primary.100',
-  borderRadius: 'lg',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-xs">LG</Typography>
-</Box>
+    <Box
+      sx={{
+        width: 100,
+        height: 100,
+        bgcolor: "primary.100",
+        borderRadius: "lg",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-xs">LG</Typography>
+    </Box>
 
-<Box sx={{
-  width: 100,
-  height: 100,
-  bgcolor: 'primary.100',
-  borderRadius: 'xl',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-xs">XL</Typography>
-</Box>
-</div>
+    <Box
+      sx={{
+        width: 100,
+        height: 100,
+        bgcolor: "primary.100",
+        borderRadius: "xl",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-xs">XL</Typography>
+    </Box>
+  </div>
 ```
 
 ### Shadows
@@ -302,90 +357,104 @@ You can configure different corner radius values.
 You can add shadow effects.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-  padding: '2rem'
-}}>
-<Box sx={{
-  width: 120,
-  height: 80,
-  bgcolor: 'background.body',
-  borderRadius: 'md',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-sm">No Shadow</Typography>
-</Box>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      flexWrap: "wrap",
+      alignItems: "center",
+      padding: "2rem"
+    }}
+  >
+    <Box
+      sx={{
+        width: 120,
+        height: 80,
+        bgcolor: "background.body",
+        borderRadius: "md",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-sm">No Shadow</Typography>
+    </Box>
 
-<Box sx={{
-  width: 120,
-  height: 80,
-  bgcolor: 'background.body',
-  borderRadius: 'md',
-  boxShadow: 'xs',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-sm">XS Shadow</Typography>
-</Box>
+    <Box
+      sx={{
+        width: 120,
+        height: 80,
+        bgcolor: "background.body",
+        borderRadius: "md",
+        boxShadow: "xs",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-sm">XS Shadow</Typography>
+    </Box>
 
-<Box sx={{
-  width: 120,
-  height: 80,
-  bgcolor: 'background.body',
-  borderRadius: 'md',
-  boxShadow: 'sm',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-sm">SM Shadow</Typography>
-</Box>
+    <Box
+      sx={{
+        width: 120,
+        height: 80,
+        bgcolor: "background.body",
+        borderRadius: "md",
+        boxShadow: "sm",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-sm">SM Shadow</Typography>
+    </Box>
 
-<Box sx={{
-  width: 120,
-  height: 80,
-  bgcolor: 'background.body',
-  borderRadius: 'md',
-  boxShadow: 'md',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-sm">MD Shadow</Typography>
-</Box>
+    <Box
+      sx={{
+        width: 120,
+        height: 80,
+        bgcolor: "background.body",
+        borderRadius: "md",
+        boxShadow: "md",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-sm">MD Shadow</Typography>
+    </Box>
 
-<Box sx={{
-  width: 120,
-  height: 80,
-  bgcolor: 'background.body',
-  borderRadius: 'md',
-  boxShadow: 'lg',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-sm">LG Shadow</Typography>
-</Box>
+    <Box
+      sx={{
+        width: 120,
+        height: 80,
+        bgcolor: "background.body",
+        borderRadius: "md",
+        boxShadow: "lg",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-sm">LG Shadow</Typography>
+    </Box>
 
-<Box sx={{
-  width: 120,
-  height: 80,
-  bgcolor: 'background.body',
-  borderRadius: 'md',
-  boxShadow: 'xl',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Typography level="body-sm">XL Shadow</Typography>
-</Box>
-</div>
+    <Box
+      sx={{
+        width: 120,
+        height: 80,
+        bgcolor: "background.body",
+        borderRadius: "md",
+        boxShadow: "xl",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Typography level="body-sm">XL Shadow</Typography>
+    </Box>
+  </div>
 ```
 
 ### Flex Layouts
@@ -393,108 +462,137 @@ You can add shadow effects.
 You can easily build layouts using Flexbox.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '2rem'
-}}>
-<div>
-  <Typography level="title-md" sx={{
-    mb: 1
-  }}>
-  Flex Row (수평 배치)
-</Typography>
-<Box sx={{
-  display: 'flex',
-  gap: 1,
-  p: 2,
-  bgcolor: 'neutral.50',
-  borderRadius: 'md'
-}}>
-<Box sx={{
-  p: 2,
-  bgcolor: 'primary.100',
-  borderRadius: 'sm',
-  flex: 1
-}}>
-<Typography level="body-sm">Item 1</Typography>
-</Box>
-<Box sx={{
-  p: 2,
-  bgcolor: 'primary.100',
-  borderRadius: 'sm',
-  flex: 1
-}}>
-<Typography level="body-sm">Item 2</Typography>
-</Box>
-<Box sx={{
-  p: 2,
-  bgcolor: 'primary.100',
-  borderRadius: 'sm',
-  flex: 1
-}}>
-<Typography level="body-sm">Item 3</Typography>
-</Box>
-</Box>
-</div>
-
-<div>
-  <Typography level="title-md" sx={{
-    mb: 1
-  }}>
-  Flex Column (수직 배치)
-</Typography>
-<Box sx={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 1,
-  p: 2,
-  bgcolor: 'neutral.50',
-  borderRadius: 'md',
-  width: 200
-}}>
-<Box sx={{
-  p: 2,
-  bgcolor: 'success.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">Item 1</Typography>
-</Box>
-<Box sx={{
-  p: 2,
-  bgcolor: 'success.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">Item 2</Typography>
-</Box>
-<Box sx={{
-  p: 2,
-  bgcolor: 'success.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">Item 3</Typography>
-</Box>
-</Box>
-</div>
-
-<div>
-  <Typography level="title-md" sx={{
-    mb: 1
-  }}>
-  Center Alignment
-</Typography>
-<Box sx={{
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: 150,
-  bgcolor: 'warning.50',
-  borderRadius: 'md'
-}}>
-<Typography level="title-lg">중앙 정렬된 콘텐츠</Typography>
-</Box>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "2rem"
+    }}
+  >
+    <div>
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 1
+        }}
+      >
+        Flex Row (수평 배치)
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          gap: 1,
+          p: 2,
+          bgcolor: "neutral.50",
+          borderRadius: "md"
+        }}
+      >
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: "primary.100",
+            borderRadius: "sm",
+            flex: 1
+          }}
+        >
+          <Typography level="body-sm">Item 1</Typography>
+        </Box>
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: "primary.100",
+            borderRadius: "sm",
+            flex: 1
+          }}
+        >
+          <Typography level="body-sm">Item 2</Typography>
+        </Box>
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: "primary.100",
+            borderRadius: "sm",
+            flex: 1
+          }}
+        >
+          <Typography level="body-sm">Item 3</Typography>
+        </Box>
+      </Box>
+    </div>
+
+    <div>
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 1
+        }}
+      >
+        Flex Column (수직 배치)
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+          p: 2,
+          bgcolor: "neutral.50",
+          borderRadius: "md",
+          width: 200
+        }}
+      >
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: "success.100",
+            borderRadius: "sm"
+          }}
+        >
+          <Typography level="body-sm">Item 1</Typography>
+        </Box>
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: "success.100",
+            borderRadius: "sm"
+          }}
+        >
+          <Typography level="body-sm">Item 2</Typography>
+        </Box>
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: "success.100",
+            borderRadius: "sm"
+          }}
+        >
+          <Typography level="body-sm">Item 3</Typography>
+        </Box>
+      </Box>
+    </div>
+
+    <div>
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 1
+        }}
+      >
+        Center Alignment
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: 150,
+          bgcolor: "warning.50",
+          borderRadius: "md"
+        }}
+      >
+        <Typography level="title-lg">중앙 정렬된 콘텐츠</Typography>
+      </Box>
+    </div>
+  </div>
 ```
 
 ### Responsive Layout
@@ -502,51 +600,62 @@ You can easily build layouts using Flexbox.
 You can create responsive layouts.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '2rem'
-}}>
-<Typography level="title-md">반응형 레이아웃 (브라우저 크기를 조절해보세요)</Typography>
-
-<Box sx={{
-  display: 'grid',
-  gridTemplateColumns: {
-    xs: '1fr',
-    sm: 'repeat(2, 1fr)',
-    md: 'repeat(3, 1fr)'
-  },
-  gap: 2,
-  p: 2,
-  bgcolor: 'neutral.50',
-  borderRadius: 'md'
-}}>
-{[1, 2, 3, 4, 5, 6].map(item => <Box key={item} sx={{
-  p: 2,
-  bgcolor: 'primary.100',
-  borderRadius: 'sm',
-  textAlign: 'center'
-}}>
-<Typography level="body-md">Item {item}</Typography>
-</Box>)}
-</Box>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "2rem"
+    }}
+  >
+    <Typography level="title-md">반응형 레이아웃 (브라우저 크기를 조절해보세요)</Typography>
 
-<Box sx={{
-  p: {
-    xs: 2,
-    md: 4
-  },
-  fontSize: {
-    xs: 'sm',
-    md: 'lg'
-  },
-  bgcolor: 'success.50',
-  borderRadius: 'md',
-  textAlign: 'center'
-}}>
-<Typography>패딩과 폰트 크기가 화면 크기에 따라 달라집니다</Typography>
-</Box>
-</div>
+    <Box
+      sx={{
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "1fr",
+          sm: "repeat(2, 1fr)",
+          md: "repeat(3, 1fr)"
+        },
+        gap: 2,
+        p: 2,
+        bgcolor: "neutral.50",
+        borderRadius: "md"
+      }}
+    >
+      {[1, 2, 3, 4, 5, 6].map((item) => (
+        <Box
+          key={item}
+          sx={{
+            p: 2,
+            bgcolor: "primary.100",
+            borderRadius: "sm",
+            textAlign: "center"
+          }}
+        >
+          <Typography level="body-md">Item {item}</Typography>
+        </Box>
+      ))}
+    </Box>
+
+    <Box
+      sx={{
+        p: {
+          xs: 2,
+          md: 4
+        },
+        fontSize: {
+          xs: "sm",
+          md: "lg"
+        },
+        bgcolor: "success.50",
+        borderRadius: "md",
+        textAlign: "center"
+      }}
+    >
+      <Typography>패딩과 폰트 크기가 화면 크기에 따라 달라집니다</Typography>
+    </Box>
+  </div>
 ```
 
 ### Polymorphic Components
@@ -554,51 +663,68 @@ You can create responsive layouts.
 You can render it as different HTML elements using the `component` prop.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '2rem'
-}}>
-<Box component="div" sx={{
-  p: 2,
-  bgcolor: 'neutral.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">component="div" (기본값)</Typography>
-</Box>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "2rem"
+    }}
+  >
+    <Box
+      component="div"
+      sx={{
+        p: 2,
+        bgcolor: "neutral.100",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">component="div" (기본값)</Typography>
+    </Box>
 
-<Box component="section" sx={{
-  p: 2,
-  bgcolor: 'primary.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">component="section"</Typography>
-</Box>
+    <Box
+      component="section"
+      sx={{
+        p: 2,
+        bgcolor: "primary.100",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">component="section"</Typography>
+    </Box>
 
-<Box component="article" sx={{
-  p: 2,
-  bgcolor: 'success.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">component="article"</Typography>
-</Box>
+    <Box
+      component="article"
+      sx={{
+        p: 2,
+        bgcolor: "success.100",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">component="article"</Typography>
+    </Box>
 
-<Box component="nav" sx={{
-  p: 2,
-  bgcolor: 'warning.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">component="nav"</Typography>
-</Box>
+    <Box
+      component="nav"
+      sx={{
+        p: 2,
+        bgcolor: "warning.100",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">component="nav"</Typography>
+    </Box>
 
-<Box component="main" sx={{
-  p: 2,
-  bgcolor: 'danger.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">component="main"</Typography>
-</Box>
-</div>
+    <Box
+      component="main"
+      sx={{
+        p: 2,
+        bgcolor: "danger.100",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography level="body-sm">component="main"</Typography>
+    </Box>
+  </div>
 ```
 
 ### Motion Animations
@@ -606,51 +732,65 @@ You can render it as different HTML elements using the `component` prop.
 Animation effects using built-in Framer Motion.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '2rem',
-  alignItems: 'center'
-}}>
-<button onClick={() => setIsVisible(!isVisible)}>{isVisible ? '숨기기' : '보이기'}</button>
-
-{isVisible && <Box sx={{
-  width: 200,
-  height: 200,
-  bgcolor: 'primary.100',
-  borderRadius: 'md',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}} initial={{
-  opacity: 0,
-  scale: 0.8
-}} animate={{
-  opacity: 1,
-  scale: 1
-}} exit={{
-  opacity: 0,
-  scale: 0.8
-}} transition={{
-  duration: 0.3
-}}>
-<Typography level="title-md">애니메이션 Box</Typography>
-</Box>}
-
-<Box sx={{
-  width: 100,
-  height: 100,
-  bgcolor: 'success.200',
-  borderRadius: 'sm',
-  cursor: 'pointer'
-}} whileHover={{
-  scale: 1.1,
-  rotate: 5
-}} whileTap={{
-  scale: 0.95
-}} />
-<Typography level="body-sm">위의 박스에 마우스를 올려보거나 클릭해보세요</Typography>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "2rem",
+      alignItems: "center"
+    }}
+  >
+    <button onClick={() => setIsVisible(!isVisible)}>{isVisible ? "숨기기" : "보이기"}</button>
+
+    {isVisible && (
+      <Box
+        sx={{
+          width: 200,
+          height: 200,
+          bgcolor: "primary.100",
+          borderRadius: "md",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+        initial={{
+          opacity: 0,
+          scale: 0.8
+        }}
+        animate={{
+          opacity: 1,
+          scale: 1
+        }}
+        exit={{
+          opacity: 0,
+          scale: 0.8
+        }}
+        transition={{
+          duration: 0.3
+        }}
+      >
+        <Typography level="title-md">애니메이션 Box</Typography>
+      </Box>
+    )}
+
+    <Box
+      sx={{
+        width: 100,
+        height: 100,
+        bgcolor: "success.200",
+        borderRadius: "sm",
+        cursor: "pointer"
+      }}
+      whileHover={{
+        scale: 1.1,
+        rotate: 5
+      }}
+      whileTap={{
+        scale: 0.95
+      }}
+    />
+    <Typography level="body-sm">위의 박스에 마우스를 올려보거나 클릭해보세요</Typography>
+  </div>
 ```
 
 ### Complex Layouts
@@ -658,132 +798,170 @@ Animation effects using built-in Framer Motion.
 You can combine Box components to build complex layouts.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '2rem'
-}}>
-<Typography level="title-lg">복잡한 레이아웃 예제</Typography>
-
-{/* Header */}
-<Box sx={{
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  p: 3,
-  bgcolor: 'primary.50',
-  borderRadius: 'lg'
-}}>
-<Typography level="title-lg">헤더</Typography>
-<Box sx={{
-  display: 'flex',
-  gap: 1
-}}>
-<Box sx={{
-  px: 2,
-  py: 1,
-  bgcolor: 'primary.200',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">메뉴 1</Typography>
-</Box>
-<Box sx={{
-  px: 2,
-  py: 1,
-  bgcolor: 'primary.200',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">메뉴 2</Typography>
-</Box>
-</Box>
-</Box>
-
-{/* Main content area */}
-<Box sx={{
-  display: 'flex',
-  gap: 3,
-  minHeight: 300
-}}>
-{/* Sidebar */}
-<Box sx={{
-  flex: '0 0 200px',
-  p: 2,
-  bgcolor: 'neutral.50',
-  borderRadius: 'md',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 1
-}}>
-<Typography level="title-sm" sx={{
-  mb: 1
-}}>
-사이드바
-</Typography>
-{['Item 1', 'Item 2', 'Item 3'].map(item => <Box key={item} sx={{
-  p: 1.5,
-  bgcolor: 'background.body',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">{item}</Typography>
-</Box>)}
-</Box>
-
-{/* Content */}
-<Box sx={{
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2
-}}>
-<Box sx={{
-  p: 3,
-  bgcolor: 'success.50',
-  borderRadius: 'md'
-}}>
-<Typography level="title-md" sx={{
-  mb: 1
-}}>
-메인 콘텐츠
-</Typography>
-<Typography level="body-md">
-  여기에 주요 콘텐츠가 들어갑니다. Box 컴포넌트를 사용하여 복잡한 레이아웃을 쉽게 만들 수 있습니다.
-</Typography>
-</Box>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "2rem"
+    }}
+  >
+    <Typography level="title-lg">복잡한 레이아웃 예제</Typography>
+
+    {/* Header */}
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        p: 3,
+        bgcolor: "primary.50",
+        borderRadius: "lg"
+      }}
+    >
+      <Typography level="title-lg">헤더</Typography>
+      <Box
+        sx={{
+          display: "flex",
+          gap: 1
+        }}
+      >
+        <Box
+          sx={{
+            px: 2,
+            py: 1,
+            bgcolor: "primary.200",
+            borderRadius: "sm"
+          }}
+        >
+          <Typography level="body-sm">메뉴 1</Typography>
+        </Box>
+        <Box
+          sx={{
+            px: 2,
+            py: 1,
+            bgcolor: "primary.200",
+            borderRadius: "sm"
+          }}
+        >
+          <Typography level="body-sm">메뉴 2</Typography>
+        </Box>
+      </Box>
+    </Box>
 
-<Box sx={{
-  display: 'flex',
-  gap: 2
-}}>
-<Box sx={{
-  flex: 1,
-  p: 2,
-  bgcolor: 'warning.50',
-  borderRadius: 'md'
-}}>
-<Typography level="body-sm">카드 1</Typography>
-</Box>
-<Box sx={{
-  flex: 1,
-  p: 2,
-  bgcolor: 'warning.50',
-  borderRadius: 'md'
-}}>
-<Typography level="body-sm">카드 2</Typography>
-</Box>
-</Box>
-</Box>
-</Box>
+    {/* Main content area */}
+    <Box
+      sx={{
+        display: "flex",
+        gap: 3,
+        minHeight: 300
+      }}
+    >
+      {/* Sidebar */}
+      <Box
+        sx={{
+          flex: "0 0 200px",
+          p: 2,
+          bgcolor: "neutral.50",
+          borderRadius: "md",
+          display: "flex",
+          flexDirection: "column",
+          gap: 1
+        }}
+      >
+        <Typography
+          level="title-sm"
+          sx={{
+            mb: 1
+          }}
+        >
+          사이드바
+        </Typography>
+        {["Item 1", "Item 2", "Item 3"].map((item) => (
+          <Box
+            key={item}
+            sx={{
+              p: 1.5,
+              bgcolor: "background.body",
+              borderRadius: "sm"
+            }}
+          >
+            <Typography level="body-sm">{item}</Typography>
+          </Box>
+        ))}
+      </Box>
+
+      {/* Content */}
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          gap: 2
+        }}
+      >
+        <Box
+          sx={{
+            p: 3,
+            bgcolor: "success.50",
+            borderRadius: "md"
+          }}
+        >
+          <Typography
+            level="title-md"
+            sx={{
+              mb: 1
+            }}
+          >
+            메인 콘텐츠
+          </Typography>
+          <Typography level="body-md">
+            여기에 주요 콘텐츠가 들어갑니다. Box 컴포넌트를 사용하여 복잡한 레이아웃을 쉽게 만들 수
+            있습니다.
+          </Typography>
+        </Box>
+
+        <Box
+          sx={{
+            display: "flex",
+            gap: 2
+          }}
+        >
+          <Box
+            sx={{
+              flex: 1,
+              p: 2,
+              bgcolor: "warning.50",
+              borderRadius: "md"
+            }}
+          >
+            <Typography level="body-sm">카드 1</Typography>
+          </Box>
+          <Box
+            sx={{
+              flex: 1,
+              p: 2,
+              bgcolor: "warning.50",
+              borderRadius: "md"
+            }}
+          >
+            <Typography level="body-sm">카드 2</Typography>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
 
-{/* Footer */}
-<Box sx={{
-  p: 2,
-  textAlign: 'center',
-  bgcolor: 'neutral.100',
-  borderRadius: 'md'
-}}>
-<Typography level="body-sm">푸터 영역</Typography>
-</Box>
-</div>
+    {/* Footer */}
+    <Box
+      sx={{
+        p: 2,
+        textAlign: "center",
+        bgcolor: "neutral.100",
+        borderRadius: "md"
+      }}
+    >
+      <Typography level="body-sm">푸터 영역</Typography>
+    </Box>
+  </div>
 ```
 
 ## Key Features
@@ -795,11 +973,12 @@ The most powerful feature of Box is the `sx` prop. It allows you to apply CSS st
 ```tsx
 <Box
   sx={{
-    p: 2,                    // padding: 16px
-    m: { xs: 1, md: 2 },     // responsive margin
-    bgcolor: 'primary.50',   // theme color
-    borderRadius: 'md',      // theme border-radius
-    '&:hover': {            // hover state
+    p: 2, // padding: 16px
+    m: { xs: 1, md: 2 }, // responsive margin
+    bgcolor: 'primary.50', // theme color
+    borderRadius: 'md', // theme border-radius
+    '&:hover': {
+      // hover state
       bgcolor: 'primary.100',
     },
   }}
@@ -907,7 +1086,7 @@ You can use animation props directly.
     gap: 2,
   }}
 >
-  {items.map(item => (
+  {items.map((item) => (
     <Box key={item.id} sx={{ p: 2, bgcolor: 'background.surface' }}>
       {item.content}
     </Box>