@ceed/ads 1.30.0 → 1.30.1

package/dist/components/layout/Box.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Box는 가장 기본적이고 중요한 레이아웃 컴포넌트입니다. 다른 컴포넌트들을 감싸는 범용 컨테이너 역할을 하며, CSS-in-JS를 통해 스타일을 직접 적용할 수 있습니다. Framer Motion이 내장되어 있어 애니메이션 효과도 쉽게 추가할 수 있습니다. 모든 HTML 요소로 변환 가능한 다형성(polymorphic) 컴포넌트이기도 합니다.
+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={{
@@ -44,11 +44,9 @@ function MyComponent() {
 }
 ```
 
-## Examples
+## Box Basic Usage
 
-### Basic Usage
-
-가장 기본적인 Box 사용법입니다.
+The most basic way to use Box.
 
 ```tsx
 <div style={{
@@ -84,9 +82,9 @@ function MyComponent() {
 </div>
 ```
 
-### Colors
+## Box Colors
 
-다양한 배경색을 적용할 수 있습니다.
+You can apply various background colors.
 
 ```tsx
 <div style={{
@@ -136,9 +134,9 @@ function MyComponent() {
 </div>
 ```
 
-### Spacing
+## Box Spacing
 
-패딩과 마진을 조절할 수 있습니다.
+You can adjust padding and margin.
 
 ```tsx
 <div style={{
@@ -213,9 +211,9 @@ function MyComponent() {
 </div>
 ```
 
-### Border Radius
+## Box Border Radius
 
-모서리 둥글기를 다양하게 설정할 수 있습니다.
+You can configure different corner radius values.
 
 ```tsx
 <div style={{
@@ -297,9 +295,9 @@ function MyComponent() {
 </div>
 ```
 
-### Shadows
+## Box Shadows
 
-그림자 효과를 추가할 수 있습니다.
+You can add shadow effects.
 
 ```tsx
 <div style={{
@@ -388,9 +386,9 @@ function MyComponent() {
 </div>
 ```
 
-### Flex Layouts
+## Box Flex Layouts
 
-Flexbox를 사용한 레이아웃을 쉽게 만들 수 있습니다.
+You can easily build layouts using Flexbox.
 
 ```tsx
 <div style={{
@@ -497,9 +495,9 @@ Flexbox를 사용한 레이아웃을 쉽게 만들 수 있습니다.
 </div>
 ```
 
-### Responsive Layout
+## Box Responsive Layout
 
-반응형 레이아웃을 구현할 수 있습니다.
+You can create responsive layouts.
 
 ```tsx
 <div style={{
@@ -549,9 +547,9 @@ Flexbox를 사용한 레이아웃을 쉽게 만들 수 있습니다.
 </div>
 ```
 
-### Polymorphic Components
+## Box Polymorphic Components
 
-component prop을 사용하여 다양한 HTML 요소로 렌더링할 수 있습니다.
+You can render it as different HTML elements using the `component` prop.
 
 ```tsx
 <div style={{
@@ -601,9 +599,9 @@ component prop을 사용하여 다양한 HTML 요소로 렌더링할 수 있습
 </div>
 ```
 
-### Motion Animations
+## Box Motion Animations
 
-내장된 Framer Motion을 사용한 애니메이션 효과입니다.
+Animation effects using built-in Framer Motion.
 
 ```tsx
 <div style={{
@@ -653,9 +651,9 @@ component prop을 사용하여 다양한 HTML 요소로 렌더링할 수 있습
 </div>
 ```
 
-### Complex Layouts
+## Box Complex Layouts
 
-Box를 조합하여 복잡한 레이아웃을 만들 수 있습니다.
+You can combine Box components to build complex layouts.
 
 ```tsx
 <div style={{
@@ -790,16 +788,16 @@ Box를 조합하여 복잡한 레이아웃을 만들 수 있습니다.
 
 ### SX Prop
 
-Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타일을 객체 형태로 직접 적용할 수 있습니다.
+The most powerful feature of Box is the `sx` prop. It allows you to apply CSS styles directly as an object.
 
 ```tsx
 <Box
   sx={{
     p: 2,                    // padding: 16px
-    m: { xs: 1, md: 2 },     // 반응형 마진
-    bgcolor: 'primary.50',   // 테마 색상
-    borderRadius: 'md',      // 테마 border-radius
-    '&:hover': {            // hover 상태
+    m: { xs: 1, md: 2 },     // responsive margin
+    bgcolor: 'primary.50',   // theme color
+    borderRadius: 'md',      // theme border-radius
+    '&:hover': {            // hover state
       bgcolor: 'primary.100',
     },
   }}
@@ -810,7 +808,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 
 ### Responsive Design
 
-객체 구문을 사용해 브레이크포인트별 스타일을 지정할 수 있습니다.
+You can define styles per breakpoint using object syntax.
 
 ```tsx
 <Box
@@ -826,7 +824,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 
 ### Theme Integration
 
-디자인 시스템의 토큰을 직접 사용할 수 있습니다.
+You can use design system tokens directly.
 
 ```tsx
 <Box
@@ -843,7 +841,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 
 ### Framer Motion
 
-애니메이션 props를 직접 사용할 수 있습니다.
+You can use animation props directly.
 
 ```tsx
 <Box
@@ -856,9 +854,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 </Box>
 ```
 
-## Common Use Cases
-
-### Layout Container
+## Box Layout Container
 
 ```tsx
 <Box sx={{ maxWidth: 1200, mx: 'auto', p: 3 }}>
@@ -867,7 +863,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 </Box>
 ```
 
-### Card-like Components
+## Box Card-like Components
 
 ```tsx
 <Box
@@ -885,7 +881,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 </Box>
 ```
 
-### Flexbox Layouts
+## Box Flexbox Layouts
 
 ```tsx
 <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
@@ -897,7 +893,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 </Box>
 ```
 
-### Grid Layouts
+## Box Grid Layouts
 
 ```tsx
 <Box
@@ -915,7 +911,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 </Box>
 ```
 
-### Centered Content
+## Box Centered Content
 
 ```tsx
 <Box
@@ -930,7 +926,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 </Box>
 ```
 
-### Sticky/Fixed Positioning
+## Box Sticky and Fixed Positioning
 
 ```tsx
 <Box
@@ -947,34 +943,46 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 </Box>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop        | Type          | Default | Description                        |
+| ----------- | ------------- | ------- | ---------------------------------- |
+| `children`  | `ReactNode`   | -       | Content inside the box             |
+| `component` | `ElementType` | `'div'` | Root element type                  |
+| `sx`        | `SxProps`     | -       | Custom styles using the MUI system |
+
+Box is a general-purpose container that renders as a `<div>` by default. It accepts all standard HTML attributes and Joy UI's `sx` prop for responsive styling.
+
 ## Best Practices
 
-1. **의미 있는 HTML 요소 사용**: `component` prop을 활용해 의미론적으로 올바른 HTML 요소를 선택하세요.
+1. **Use meaningful HTML elements**: Use the `component` prop to choose semantically appropriate HTML elements.
 
-2. **테마 토큰 활용**: 하드코딩된 값 대신 테마의 spacing, color, border-radius 등을 사용하세요.
+2. **Use theme tokens**: Use theme spacing, color, border-radius, and similar values instead of hardcoded values.
 
-3. **반응형 고려**: 다양한 화면 크기에서 잘 동작하도록 반응형 값을 사용하세요.
+3. **Design responsively**: Use responsive values so the component works well across different screen sizes.
 
-4. **성능 최적화**:
-   - 인라인 객체 생성을 피하고 가능하면 객체를 메모화하세요
-   - 복잡한 애니메이션은 필요할 때만 사용하세요
+4. **Optimize performance**:
+   - Avoid creating inline objects repeatedly, and memoize them when possible
+   - Use complex animations only when necessary
 
-5. **접근성**:
-   - 적절한 semantic HTML 요소를 선택하세요
-   - 필요시 ARIA 속성을 추가하세요
-   - 충분한 색상 대비를 유지하세요
+5. **Consider accessibility**:
+   - Choose appropriate semantic HTML elements
+   - Add ARIA attributes when needed
+   - Maintain sufficient color contrast
 
-6. **재사용성**:
-   - 자주 사용하는 스타일 조합은 별도 컴포넌트로 분리하세요
-   - 공통 스타일은 테마에 정의하세요
+6. **Promote reusability**:
+   - Extract frequently used style combinations into separate components
+   - Define shared styles in the theme
 
-7. **일관성**:
-   - 팀 내에서 일관된 spacing과 naming convention을 사용하세요
-   - 디자인 시스템의 가이드라인을 따르세요
+7. **Maintain consistency**:
+   - Use consistent spacing and naming conventions across the team
+   - Follow the design system guidelines
 
 ## Spacing Scale
 
-Box에서 사용할 수 있는 spacing 값들:
+Spacing values available in Box:
 
 - `0.5` = 4px
 - `1` = 8px
@@ -987,11 +995,11 @@ Box에서 사용할 수 있는 spacing 값들:
 
 ## Color Tokens
 
-주요 색상 토큰들:
+Primary color tokens:
 
 - **Background**: `background.body`, `background.surface`, `background.level1`
 - **Primary**: `primary.50`, `primary.100`, `primary.500`, `primary.main`
 - **Neutral**: `neutral.50`, `neutral.100`, `neutral.500`, `neutral.main`
 - **Text**: `text.primary`, `text.secondary`, `text.tertiary`
 
-Box는 ADS의 모든 레이아웃과 스타일링의 기초가 되는 컴포넌트입니다. 강력한 sx prop과 내장된 애니메이션 기능을 활용해 다양한 UI 요구사항을 충족할 수 있습니다.
+Box is the foundational component for all layout and styling in ADS. Its powerful `sx` prop and built-in animation support make it flexible enough to satisfy a wide range of UI requirements.

package/dist/components/layout/Container.md

@@ -33,9 +33,7 @@ function PageLayout() {
 }
 ```
 
-## Examples
-
-### Desktop
+## Container Desktop
 
 Maximum width optimized for desktop screens (widest setting).
 
@@ -49,7 +47,7 @@ Maximum width optimized for desktop screens (widest setting).
 />
 ```
 
-### Laptop
+## Container Laptop
 
 Medium maximum width suitable for laptop screens.
 
@@ -63,7 +61,7 @@ Medium maximum width suitable for laptop screens.
 />
 ```
 
-### Tablet
+## Container Tablet
 
 Narrower maximum width for tablet-optimized layouts.
 
@@ -96,9 +94,7 @@ Narrower maximum width for tablet-optimized layouts.
 - **Navigation bars**: Usually span full width
 - **Background elements**: Elements that should fill the screen
 
-## Common Use Cases
-
-### Page Layout with Header
+## Container for Page Layout
 
 ```tsx
 function PageWithHeader() {
@@ -123,7 +119,7 @@ function PageWithHeader() {
 }
 ```
 
-### Centered Form Layout
+## Container for Centered Form
 
 ```tsx
 function CenteredForm() {
@@ -154,7 +150,7 @@ function CenteredForm() {
 }
 ```
 
-### Article/Blog Layout
+## Container for Article/Blog Layout
 
 ```tsx
 function ArticlePage({ article }) {
@@ -180,7 +176,7 @@ function ArticlePage({ article }) {
 }
 ```
 
-### Dashboard with Cards
+## Container for Dashboard Layout
 
 ```tsx
 function Dashboard() {
@@ -237,7 +233,7 @@ function Dashboard() {
 }
 ```
 
-### Responsive Container Selection
+## Container Responsive Selection
 
 ```tsx
 function ResponsiveLayout({ children }) {
@@ -255,7 +251,7 @@ function ResponsiveLayout({ children }) {
 }
 ```
 
-### Nested Containers
+## Nested Containers
 
 ```tsx
 function PageWithSections() {