@ceed/cds 1.28.1 → 1.29.1

package/dist/components/layout/Grid.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Grid 컴포넌트는 CSS Grid를 기반으로 한 강력한 레이아웃 시스템입니다. 12열 그리드 시스템을 사용하여 반응형 레이아웃을 쉽게 구현할 수 있으며, 다양한 브레이크포인트에서 다른 레이아웃을 적용할 수 있습니다. 복잡한 대시보드, 제품 카탈로그, 카드 레이아웃 등 다양한 용도로 활용할 수 있습니다.
+The Grid component is a powerful layout system built on CSS Grid. It uses a 12-column grid system, making it easy to create responsive layouts and apply different layouts at different breakpoints. It is well suited for complex dashboards, product catalogs, card layouts, and more.
 
 ```tsx
 <Grid container spacing={args.spacing}>
@@ -57,7 +57,7 @@ function MyComponent() {
 
 ### Basic Usage
 
-12열 그리드 시스템의 기본 사용법입니다.
+The basic usage of the 12-column grid system.
 
 ```tsx
 <div style={{
@@ -89,7 +89,7 @@ function MyComponent() {
 
 ### Responsive Grid
 
-다양한 화면 크기에서 다른 레이아웃을 적용하는 반응형 그리드입니다.
+A responsive grid that applies different layouts across different screen sizes.
 
 ```tsx
 <div>
@@ -137,7 +137,7 @@ function MyComponent() {
 
 ### Different Spacing
 
-다양한 간격을 적용한 그리드 레이아웃입니다.
+Grid layouts with different spacing values.
 
 ```tsx
 <div style={{
@@ -201,7 +201,7 @@ function MyComponent() {
 
 ### Nested Grid
 
-그리드 안에 또 다른 그리드를 중첩하여 사용할 수 있습니다.
+You can nest one grid inside another.
 
 ```tsx
 <div>
@@ -265,7 +265,7 @@ function MyComponent() {
 
 ### Auto Layout
 
-자동 레이아웃을 사용한 그리드입니다.
+A grid using auto layout.
 
 ```tsx
 <div style={{
@@ -309,7 +309,7 @@ function MyComponent() {
 
 ### Complex Layouts
 
-실제 사용 사례를 보여주는 복잡한 레이아웃 예제입니다.
+Complex layout examples based on real use cases.
 
 ```tsx
 <div style={{
@@ -435,7 +435,7 @@ function MyComponent() {
 
 ### Breakpoint Demo
 
-각 브레이크포인트에서 어떻게 동작하는지 보여주는 예제입니다.
+An example showing how Grid behaves at each breakpoint.
 
 ```tsx
 <div>
@@ -491,61 +491,49 @@ function MyComponent() {
 
 ## Grid System
 
-### 12열 시스템
+### 12-Column System
 
-Grid는 12열 시스템을 기반으로 합니다. 각 아이템은 1-12열을 차지할 수 있습니다.
+Grid is based on a 12-column system. Each item can span 1 to 12 columns.
 
 ```tsx
 <Grid container spacing={2}>
-  <Grid item xs={12}>
-    전체 너비 (12/12)
-  </Grid>
-  <Grid item xs={6}>
-    절반 너비 (6/12)
-  </Grid>
-  <Grid item xs={6}>
-    절반 너비 (6/12)
-  </Grid>
-  <Grid item xs={4}>
-    3분의 1 너비 (4/12)
-  </Grid>
-  <Grid item xs={4}>
-    3분의 1 너비 (4/12)
-  </Grid>
-  <Grid item xs={4}>
-    3분의 1 너비 (4/12)
-  </Grid>
+  <Grid item xs={12}>전체 너비 (12/12)</Grid>
+  <Grid item xs={6}>절반 너비 (6/12)</Grid>
+  <Grid item xs={6}>절반 너비 (6/12)</Grid>
+  <Grid item xs={4}>3분의 1 너비 (4/12)</Grid>
+  <Grid item xs={4}>3분의 1 너비 (4/12)</Grid>
+  <Grid item xs={4}>3분의 1 너비 (4/12)</Grid>
 </Grid>
 ```
 
 ### Container & Item
 
-- `container`: Grid 컨테이너를 만들 때 사용
-- `item`: Grid 아이템을 만들 때 사용
-- 한 컴포넌트가 동시에 container와 item이 될 수 있습니다 (중첩 그리드)
+- `container`: Used to create a Grid container
+- `item`: Used to create a Grid item
+- A single component can be both a `container` and an `item` at the same time (nested grid)
 
 ## Breakpoints
 
-Grid는 다음 브레이크포인트를 지원합니다:
+Grid supports the following breakpoints:
 
-| 브레이크포인트 | 크기      | 설명                |
-| ------- | ------- | ----------------- |
-| `xs`    | 0px+    | 모바일 (세로)          |
-| `sm`    | 600px+  | 모바일 (가로) / 작은 태블릿 |
-| `md`    | 900px+  | 태블릿               |
-| `lg`    | 1200px+ | 데스크톱              |
-| `xl`    | 1536px+ | 큰 데스크톱            |
+| Breakpoint | Size    | Description                       |
+| ---------- | ------- | --------------------------------- |
+| `xs`       | 0px+    | Mobile (portrait)                 |
+| `sm`       | 600px+  | Mobile (landscape) / small tablet |
+| `md`       | 900px+  | Tablet                            |
+| `lg`       | 1200px+ | Desktop                           |
+| `xl`       | 1536px+ | Large desktop                     |
 
-### 반응형 사용법
+### Responsive Usage
 
 ```tsx
 <Grid container spacing={2}>
   <Grid item xs={12} sm={6} md={4} lg={3}>
     {/*
-      xs: 100% (12/12) - 모바일에서 전체 너비
-      sm: 50% (6/12)   - 작은 화면에서 절반 너비
-      md: 33% (4/12)   - 태블릿에서 3분의 1 너비
-      lg: 25% (3/12)   - 데스크톱에서 4분의 1 너비
+      xs: 100% (12/12) - full width on mobile
+      sm: 50% (6/12)   - half width on small screens
+      md: 33% (4/12)   - one-third width on tablets
+      lg: 25% (3/12)   - one-quarter width on desktop
     */}
     반응형 아이템
   </Grid>
@@ -554,21 +542,21 @@ Grid는 다음 브레이크포인트를 지원합니다:
 
 ## Spacing
 
-`spacing` prop을 사용하여 그리드 아이템 간의 간격을 조절할 수 있습니다.
+You can control the spacing between grid items using the `spacing` prop.
 
-| 값   | 크기   | 설명          |
-| --- | ---- | ----------- |
-| `0` | 0px  | 간격 없음       |
-| `1` | 8px  | 아주 작은 간격    |
-| `2` | 16px | 작은 간격 (기본값) |
-| `3` | 24px | 중간 간격       |
-| `4` | 32px | 큰 간격        |
-| `5` | 40px | 아주 큰 간격     |
-| `6` | 48px | 최대 간격       |
+| Value | Size | Description             |
+| ----- | ---- | ----------------------- |
+| `0`   | 0px  | No spacing              |
+| `1`   | 8px  | Very small spacing      |
+| `2`   | 16px | Small spacing (default) |
+| `3`   | 24px | Medium spacing          |
+| `4`   | 32px | Large spacing           |
+| `5`   | 40px | Very large spacing      |
+| `6`   | 48px | Maximum spacing         |
 
 ## Auto Layout
 
-열 수를 명시하지 않고 자동으로 배치되도록 할 수 있습니다:
+You can let items size and position automatically without explicitly defining the column count:
 
 ```tsx
 <Grid container spacing={2}>
@@ -664,9 +652,7 @@ Grid는 다음 브레이크포인트를 지원합니다:
   </Grid>
 
   <Grid item xs={12}>
-    <Button type="submit" fullWidth>
-      Submit
-    </Button>
+    <Button type="submit" fullWidth>Submit</Button>
   </Grid>
 </Grid>
 ```
@@ -680,7 +666,7 @@ Grid는 다음 브레이크포인트를 지원합니다:
       <Box
         sx={{
           position: 'relative',
-          paddingTop: '100%', // 1:1 비율 유지
+          paddingTop: '100%', // maintain a 1:1 ratio
           overflow: 'hidden',
           borderRadius: 'sm',
         }}
@@ -705,38 +691,58 @@ Grid는 다음 브레이크포인트를 지원합니다:
 
 ## Best Practices
 
-1. **의미 있는 구조**: Grid를 사용할 때 HTML의 의미구조를 고려하여 적절한 요소를 선택하세요.
+1. **Use meaningful structure**: Choose appropriate elements while considering semantic HTML structure when using Grid.
+
+2. **Design responsively first**: Start with mobile layouts and scale up to larger screens.
+
+3. **Keep spacing consistent**: Use consistent spacing values across the project.
+
+4. **Optimize performance**:
+   - Avoid unnecessarily deep nesting
+   - Consider virtualization when rendering many items
+
+5. **Consider accessibility**:
+   - Use appropriate semantic tags
+   - Arrange content so keyboard navigation remains logical
 
-2. **반응형 우선 설계**: 모바일부터 시작하여 큰 화면으로 확장하는 방식으로 설계하세요.
+6. **Prioritize content**: Let the grid adapt to the content instead of forcing content into the grid.
 
-3. **일관된 간격**: 프로젝트 전반에서 일관된 spacing 값을 사용하세요.
+7. **Debug effectively**: Apply background colors to Grid items during development to inspect the layout more easily.
 
-4. **성능 최적화**:
-   - 불필요하게 깊은 중첩은 피하세요
-   - 많은 아이템이 있을 때는 가상화를 고려하세요
+## Props and Customization
 
-5. **접근성**:
-   - 적절한 시맨틱 태그를 사용하세요
-   - 키보드 탐색이 논리적으로 이뤄지도록 배치하세요
+### Key Props
 
-6. **콘텐츠 우선**: 그리드가 콘텐츠를 억지로 맞추는 것이 아니라 콘텐츠에 맞춰 조정되도록 하세요.
+| Prop        | Type                                                     | Default | Description                          |
+| ----------- | -------------------------------------------------------- | ------- | ------------------------------------ |
+| `children`  | `ReactNode`                                              | -       | Grid children (items)                |
+| `container` | `boolean`                                                | `false` | Sets the element as a grid container |
+| `xs`        | `number \| 'auto' \| boolean`                            | -       | Column span at xs breakpoint         |
+| `sm`        | `number \| 'auto' \| boolean`                            | -       | Column span at sm breakpoint         |
+| `md`        | `number \| 'auto' \| boolean`                            | -       | Column span at md breakpoint         |
+| `lg`        | `number \| 'auto' \| boolean`                            | -       | Column span at lg breakpoint         |
+| `xl`        | `number \| 'auto' \| boolean`                            | -       | Column span at xl breakpoint         |
+| `spacing`   | `number \| string`                                       | `0`     | Gap between grid items               |
+| `direction` | `'row' \| 'row-reverse' \| 'column' \| 'column-reverse'` | `'row'` | Flex direction                       |
+| `columns`   | `number`                                                 | `12`    | Total number of columns              |
+| `sx`        | `SxProps`                                                | -       | Custom styles                        |
 
-7. **디버깅**: 개발 중에는 Grid 아이템에 배경색을 적용해 레이아웃을 쉽게 확인하세요.
+> **Note**: Grid accepts all Joy UI Grid (MUI) props.
 
 ## Troubleshooting
 
-### 흔한 문제들
+### Common Issues
 
-1. **아이템이 예상과 다르게 배치됨**
-   - 12를 넘지 않도록 열 수를 확인하세요
-   - container와 item props가 올바르게 설정되었는지 확인하세요
+1. **Items are positioned differently than expected**
+   - Check that the total column count does not exceed 12
+   - Make sure the `container` and `item` props are set correctly
 
-2. **간격이 적용되지 않음**
-   - container에 spacing prop이 설정되었는지 확인하세요
-   - 자식 요소들이 Grid item으로 감싸져 있는지 확인하세요
+2. **Spacing is not applied**
+   - Verify that the `spacing` prop is set on the container
+   - Verify that child elements are wrapped in Grid items
 
-3. **반응형이 동작하지 않음**
-   - 브레이크포인트 값이 올바른지 확인하세요
-   - 각 브레이크포인트에서 의도한 합계가 12 이하인지 확인하세요
+3. **Responsive behavior is not working**
+   - Check that the breakpoint values are correct
+   - Make sure the intended total at each breakpoint is 12 or less
 
-Grid는 복잡한 레이아웃을 구현하는 강력한 도구입니다. 반응형 디자인과 일관된 간격을 통해 사용자 경험을 향상시킬 수 있습니다.
+Grid is a powerful tool for building complex layouts. Responsive design and consistent spacing help improve the overall user experience.

package/dist/components/layout/Stack.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Stack 컴포넌트는 자식 요소들을 하나의 차원(수직 또는 수평)에서 일정한 간격으로 배치하는 레이아웃 컴포넌트입니다. Flexbox를 기반으로 하여 간단하고 직관적인 API로 복잡한 레이아웃을 쉽게 구현할 수 있습니다. 내비게이션 바, 폼 레이아웃, 카드 내부 구조 등 다양한 UI 패턴에서 활용됩니다.
+The Stack component is a layout component that arranges child elements in one dimension, either vertically or horizontally, with consistent spacing. Built on Flexbox, it provides a simple and intuitive API for creating complex layouts with ease. It is useful across many UI patterns, including navigation bars, form layouts, and card internals.
 
 ```tsx
 <Stack {...args}>
@@ -39,7 +39,7 @@ function MyComponent() {
 
 ### Basic Usage
 
-세로(column)와 가로(row) 배치의 기본 사용법입니다.
+The basic usage for vertical (`column`) and horizontal (`row`) layouts.
 
 ```tsx
 <div style={{
@@ -77,7 +77,7 @@ function MyComponent() {
 
 ### Directions
 
-다양한 배치 방향을 사용할 수 있습니다.
+You can use different layout directions.
 
 ```tsx
 <div style={{
@@ -146,7 +146,7 @@ function MyComponent() {
 
 ### Different Spacing
 
-다양한 간격을 적용할 수 있습니다.
+You can apply different spacing values.
 
 ```tsx
 <div style={{
@@ -210,7 +210,7 @@ function MyComponent() {
 
 ### Alignment
 
-요소들의 정렬을 다양하게 조절할 수 있습니다.
+You can control element alignment in different ways.
 
 ```tsx
 <div style={{
@@ -279,7 +279,7 @@ function MyComponent() {
 
 ### Responsive Direction
 
-화면 크기에 따라 배치 방향을 변경할 수 있습니다.
+You can change the layout direction based on screen size.
 
 ```tsx
 <div>
@@ -337,7 +337,7 @@ function MyComponent() {
 
 ### Nested Stacks
 
-Stack을 중첩하여 더 복잡한 레이아웃을 만들 수 있습니다.
+You can nest Stack components to build more complex layouts.
 
 ```tsx
 <div>
@@ -395,7 +395,7 @@ Stack을 중첩하여 더 복잡한 레이아웃을 만들 수 있습니다.
 
 ### Real World Examples
 
-실제 사용 사례를 보여주는 예제들입니다.
+Examples that demonstrate real-world use cases.
 
 ```tsx
 <div style={{
@@ -640,7 +640,7 @@ Stack을 중첩하여 더 복잡한 레이아웃을 만들 수 있습니다.
 
 ### direction
 
-요소들의 배치 방향을 설정합니다.
+Sets the layout direction of the elements.
 
 ```tsx
 <Stack direction="row">가로 배치</Stack>
@@ -648,7 +648,7 @@ Stack을 중첩하여 더 복잡한 레이아웃을 만들 수 있습니다.
 <Stack direction="row-reverse">가로 역순</Stack>
 <Stack direction="column-reverse">세로 역순</Stack>
 
-// 반응형 방향
+// responsive direction
 <Stack direction={{ xs: 'column', sm: 'row' }}>
   반응형 배치
 </Stack>
@@ -656,26 +656,26 @@ Stack을 중첩하여 더 복잡한 레이아웃을 만들 수 있습니다.
 
 ### spacing
 
-요소들 간의 간격을 설정합니다.
+Sets the spacing between elements.
 
-| 값     | 크기   | 설명          |
-| ----- | ---- | ----------- |
-| `0`   | 0px  | 간격 없음       |
-| `0.5` | 4px  | 아주 작은 간격    |
-| `1`   | 8px  | 작은 간격       |
-| `1.5` | 12px | 작은-중간 간격    |
-| `2`   | 16px | 중간 간격 (기본값) |
-| `3`   | 24px | 큰 간격        |
-| `4`   | 32px | 아주 큰 간격     |
-| `5`   | 40px | 매우 큰 간격     |
-| `6`   | 48px | 최대 간격       |
+| Value | Size | Description              |
+| ----- | ---- | ------------------------ |
+| `0`   | 0px  | No spacing               |
+| `0.5` | 4px  | Very small spacing       |
+| `1`   | 8px  | Small spacing            |
+| `1.5` | 12px | Small-to-medium spacing  |
+| `2`   | 16px | Medium spacing (default) |
+| `3`   | 24px | Large spacing            |
+| `4`   | 32px | Very large spacing       |
+| `5`   | 40px | Extra large spacing      |
+| `6`   | 48px | Maximum spacing          |
 
 ```tsx
 <Stack spacing={2}>기본 간격</Stack>
 <Stack spacing={0}>간격 없음</Stack>
 <Stack spacing={4}>큰 간격</Stack>
 
-// 반응형 간격
+// responsive spacing
 <Stack spacing={{ xs: 1, sm: 2, md: 3 }}>
   반응형 간격
 </Stack>
@@ -683,7 +683,7 @@ Stack을 중첩하여 더 복잡한 레이아웃을 만들 수 있습니다.
 
 ### alignItems
 
-교차축(cross axis) 정렬을 설정합니다.
+Sets alignment along the cross axis.
 
 ```tsx
 <Stack alignItems="center">중앙 정렬</Stack>
@@ -695,7 +695,7 @@ Stack을 중첩하여 더 복잡한 레이아웃을 만들 수 있습니다.
 
 ### justifyContent
 
-주축(main axis) 정렬을 설정합니다.
+Sets alignment along the main axis.
 
 ```tsx
 <Stack justifyContent="center">중앙 정렬</Stack>
@@ -707,7 +707,7 @@ Stack을 중첩하여 더 복잡한 레이아웃을 만들 수 있습니다.
 
 ## Responsive Behavior
 
-Stack은 모든 props에서 반응형 값을 지원합니다:
+Stack supports responsive values for all props:
 
 ```tsx
 <Stack
@@ -715,7 +715,7 @@ Stack은 모든 props에서 반응형 값을 지원합니다:
   spacing={{ xs: 1, sm: 2, md: 3 }}
   alignItems={{ xs: 'stretch', md: 'center' }}
 >
-  {/* 화면 크기별로 다른 레이아웃 */}
+  {/* different layouts for different screen sizes */}
 </Stack>
 ```
 
@@ -724,7 +724,12 @@ Stack은 모든 props에서 반응형 값을 지원합니다:
 ### Navigation Bar
 
 ```tsx
-<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: 2 }}>
+<Stack
+  direction="row"
+  justifyContent="space-between"
+  alignItems="center"
+  sx={{ p: 2 }}
+>
   <Typography level="title-lg">Logo</Typography>
   <Stack direction="row" spacing={2}>
     <Button variant="plain">Home</Button>
@@ -776,21 +781,17 @@ Stack은 모든 props에서 반응형 값을 지원합니다:
         <Chip variant="soft">New</Chip>
       </Stack>
 
-      <Typography level="body-md">Product description goes here...</Typography>
+      <Typography level="body-md">
+        Product description goes here...
+      </Typography>
 
       <Stack direction="row" spacing={1}>
-        <Chip size="sm" variant="outlined">
-          Tag 1
-        </Chip>
-        <Chip size="sm" variant="outlined">
-          Tag 2
-        </Chip>
+        <Chip size="sm" variant="outlined">Tag 1</Chip>
+        <Chip size="sm" variant="outlined">Tag 2</Chip>
       </Stack>
 
       <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <Typography level="title-lg" color="primary">
-          $99.99
-        </Typography>
+        <Typography level="title-lg" color="primary">$99.99</Typography>
         <Button>Add to Cart</Button>
       </Stack>
     </Stack>
@@ -812,7 +813,9 @@ Stack은 모든 props에서 반응형 값을 지원합니다:
     </Stack>
   </Stack>
 
-  <Typography level="body-md">Passionate about creating great user experiences...</Typography>
+  <Typography level="body-md">
+    Passionate about creating great user experiences...
+  </Typography>
 
   <Stack direction="row" spacing={1}>
     <Chip variant="soft">React</Chip>
@@ -821,9 +824,7 @@ Stack은 모든 props에서 반응형 값을 지원합니다:
   </Stack>
 
   <Stack direction="row" spacing={2}>
-    <Button variant="outlined" fullWidth>
-      Follow
-    </Button>
+    <Button variant="outlined" fullWidth>Follow</Button>
     <Button fullWidth>Message</Button>
   </Stack>
 </Stack>
@@ -884,53 +885,72 @@ Stack은 모든 props에서 반응형 값을 지원합니다:
 
 ## Best Practices
 
-1. **적절한 간격**: 콘텐츠의 계층구조에 맞는 적절한 spacing을 선택하세요.
+1. **Choose appropriate spacing**: Use spacing values that match the content hierarchy.
 
-2. **반응형 고려**: 다양한 화면 크기에서 잘 작동하도록 반응형 props를 활용하세요.
+2. **Design responsively**: Use responsive props so layouts work well across different screen sizes.
 
-3. **의미있는 정렬**: alignItems와 justifyContent를 사용해 의미있는 정렬을 적용하세요.
+3. **Use meaningful alignment**: Use `alignItems` and `justifyContent` to create intentional alignment.
 
-4. **중첩 최소화**: 과도한 중첩은 피하고, 필요한 경우에만 Stack을 중첩하세요.
+4. **Minimize nesting**: Avoid excessive nesting and only nest Stack when it is actually needed.
 
-5. **성능 고려**: 많은 아이템이 있는 경우 가상화를 고려하세요.
+5. **Consider performance**: Use virtualization when rendering many items.
 
-6. **접근성**:
-   - 논리적인 탭 순서가 되도록 요소를 배치하세요
-   - 적절한 시맨틱 태그와 함께 사용하세요
+6. **Consider accessibility**:
+   - Arrange elements to preserve a logical tab order
+   - Use appropriate semantic tags alongside Stack
 
-7. **일관성**: 프로젝트 전반에서 일관된 spacing 값을 사용하세요.
+7. **Maintain consistency**: Use consistent spacing values across the project.
 
 ## When to Use Stack vs Other Layout Components
 
 ### Stack vs Flexbox (Box)
 
-- **Stack**: 단순한 1차원 레이아웃, 일정한 간격이 필요한 경우
-- **Box with flex**: 복잡한 flexbox 속성이 필요한 경우
+- **Stack**: For simple one-dimensional layouts with consistent spacing
+- **Box with flex**: For cases that need more complex Flexbox behavior
 
 ### Stack vs Grid
 
-- **Stack**: 1차원 레이아웃 (세로 또는 가로)
-- **Grid**: 2차원 레이아웃 (행과 열)
+- **Stack**: One-dimensional layouts (vertical or horizontal)
+- **Grid**: Two-dimensional layouts (rows and columns)
 
 ### Stack vs Space (if available)
 
-- **Stack**: 컨테이너와 간격을 함께 제공
-- **Space**: 간격만 제공 (자식들 사이에)
+- **Stack**: Provides both a container and spacing
+- **Space**: Provides spacing only (between children)
+
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                     | Default    | Description                               |
+| ---------------- | -------------------------------------------------------- | ---------- | ----------------------------------------- |
+| `children`       | `ReactNode`                                              | -          | Stack children                            |
+| `direction`      | `'row' \| 'row-reverse' \| 'column' \| 'column-reverse'` | `'column'` | Flex direction                            |
+| `spacing`        | `number \| string`                                       | `0`        | Gap between children                      |
+| `alignItems`     | `string`                                                 | -          | CSS align-items                           |
+| `justifyContent` | `string`                                                 | -          | CSS justify-content                       |
+| `flexWrap`       | `'nowrap' \| 'wrap' \| 'wrap-reverse'`                   | `'nowrap'` | Flex wrapping behavior                    |
+| `divider`        | `ReactNode`                                              | -          | Element inserted between each child       |
+| `component`      | `ElementType`                                            | `'div'`    | Root element type                         |
+| `useFlexGap`     | `boolean`                                                | `false`    | Use CSS gap instead of margin for spacing |
+| `sx`             | `SxProps`                                                | -          | Custom styles                             |
+
+> **Note**: Stack accepts all Joy UI Stack props.
 
 ## Troubleshooting
 
-### 흔한 문제들
+### Common Issues
 
-1. **간격이 적용되지 않음**
-   - 자식 요소들이 직접적인 자식인지 확인하세요
-   - Fragment나 다른 래퍼가 방해하지 않는지 확인하세요
+1. **Spacing is not applied**
+   - Make sure the elements are direct children
+   - Check whether a Fragment or another wrapper is interfering
 
-2. **정렬이 예상과 다름**
-   - direction에 따라 주축과 교차축이 바뀐다는 점을 기억하세요
-   - alignItems와 justifyContent의 차이를 이해하세요
+2. **Alignment is different from what you expected**
+   - Remember that the main axis and cross axis change based on `direction`
+   - Understand the difference between `alignItems` and `justifyContent`
 
-3. **반응형이 동작하지 않음**
-   - 객체 문법 `{ xs: 'column', md: 'row' }`가 올바른지 확인하세요
-   - 브레이크포인트 값이 올바른지 확인하세요
+3. **Responsive behavior is not working**
+   - Check that object syntax like `{ xs: 'column', md: 'row' }` is correct
+   - Verify that the breakpoint values are correct
 
-Stack은 직관적이고 강력한 레이아웃 도구입니다. 간단한 API로 복잡한 레이아웃을 쉽게 구현할 수 있어 많은 UI 패턴에서 활용됩니다.
+Stack is an intuitive and powerful layout tool. Its simple API makes complex layouts easy to build, so it fits a wide range of UI patterns.