@ceed/ads 1.35.1 → 1.37.0-next.1

package/dist/components/data-display/Tooltip.md

@@ -253,7 +253,7 @@ Used with interactive elements.
 | `onClose`   | `() => void`                                                                                                  | -           | Callback when tooltip should close             |
 | `color`     | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`                                                | `'neutral'` | Tooltip color scheme                           |
 | `variant`   | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                                                                  | `'solid'`   | Visual style                                   |
-| `size`      | `'sm' \| 'md' \| 'lg'`                                                                                        | `'md'`      | Tooltip size                                   |
+| `size`      | `'sm' \| 'md' \| 'lg'`                                                                                        | `'sm'`      | Tooltip size                                   |
 | `sx`        | `SxProps`                                                                                                     | -           | Custom styles using the MUI system             |
 
 > **Note**: Tooltip also accepts all Joy UI Tooltip props and Framer Motion props.

package/dist/components/data-display/Typography.md

@@ -43,51 +43,51 @@ Typography levels are divided into three groups: **Headings**, **Titles**, and *
 
 ```tsx
 <>
-  <Stack direction="row" spacing={2}>
-    <Typography level="h1">h1</Typography>
-    <Typography {...args} level="h1" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="h2">h2</Typography>
-    <Typography {...args} level="h2" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="h3">h3</Typography>
-    <Typography {...args} level="h3" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="h4">h4</Typography>
-    <Typography {...args} level="h4" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="title-lg">title-lg</Typography>
-    <Typography {...args} level="title-lg" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="title-md">title-md</Typography>
-    <Typography {...args} level="title-md" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="title-sm">title-sm</Typography>
-    <Typography {...args} level="title-sm" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="body-lg">body-lg</Typography>
-    <Typography {...args} level="body-lg" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="body-md">body-md</Typography>
-    <Typography {...args} level="body-md" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="body-sm">body-sm</Typography>
-    <Typography {...args} level="body-sm" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="body-xs">body-xs</Typography>
-    <Typography {...args} level="body-xs" />
-  </Stack>
-</>
+    <Stack direction="row" spacing={2}>
+      <Typography level="h1">h1</Typography>
+      <Typography {...args} level="h1" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="h2">h2</Typography>
+      <Typography {...args} level="h2" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="h3">h3</Typography>
+      <Typography {...args} level="h3" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="h4">h4</Typography>
+      <Typography {...args} level="h4" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="title-lg">title-lg</Typography>
+      <Typography {...args} level="title-lg" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="title-md">title-md</Typography>
+      <Typography {...args} level="title-md" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="title-sm">title-sm</Typography>
+      <Typography {...args} level="title-sm" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="body-lg">body-lg</Typography>
+      <Typography {...args} level="body-lg" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="body-md">body-md</Typography>
+      <Typography {...args} level="body-md" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="body-sm">body-sm</Typography>
+      <Typography {...args} level="body-sm" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="body-xs">body-xs</Typography>
+      <Typography {...args} level="body-xs" />
+    </Stack>
+  </>
 ```
 
 ### Style Reference
@@ -112,11 +112,11 @@ Heading levels define page structure and hierarchy. They use the display font fa
 
 ```tsx
 <>
-  <Typography level="h1">h1 - Main page heading</Typography>
-  <Typography level="h2">h2 - Section heading</Typography>
-  <Typography level="h3">h3 - Subsection heading</Typography>
-  <Typography level="h4">h4 - Detail heading</Typography>
-</>
+    <Typography level="h1">h1 - Main page heading</Typography>
+    <Typography level="h2">h2 - Section heading</Typography>
+    <Typography level="h3">h3 - Subsection heading</Typography>
+    <Typography level="h4">h4 - Detail heading</Typography>
+  </>
 ```
 
 ```tsx
@@ -132,10 +132,10 @@ Title levels are used for UI labels, card titles, and other emphasized text that
 
 ```tsx
 <>
-  <Typography level="title-lg">title-lg - Large title</Typography>
-  <Typography level="title-md">title-md - Medium title</Typography>
-  <Typography level="title-sm">title-sm - Small title</Typography>
-</>
+    <Typography level="title-lg">title-lg - Large title</Typography>
+    <Typography level="title-md">title-md - Medium title</Typography>
+    <Typography level="title-sm">title-sm - Small title</Typography>
+  </>
 ```
 
 ```tsx
@@ -150,11 +150,11 @@ Body levels are used for readable content and descriptions. The default level `b
 
 ```tsx
 <>
-  <Typography level="body-lg">body-lg - Large body text</Typography>
-  <Typography level="body-md">body-md - Regular body text</Typography>
-  <Typography level="body-sm">body-sm - Small body text</Typography>
-  <Typography level="body-xs">body-xs - Extra small text</Typography>
-</>
+    <Typography level="body-lg">body-lg - Large body text</Typography>
+    <Typography level="body-md">body-md - Regular body text</Typography>
+    <Typography level="body-sm">body-sm - Small body text</Typography>
+    <Typography level="body-xs">body-xs - Extra small text</Typography>
+  </>
 ```
 
 ```tsx
@@ -210,12 +210,12 @@ Typography supports five semantic colors via the `color` prop. Use `textColor` t
 
 ```tsx
 <>
-  <Typography color="primary">Primary color</Typography>
-  <Typography color="neutral">Neutral color</Typography>
-  <Typography color="danger">Danger color</Typography>
-  <Typography color="success">Success color</Typography>
-  <Typography color="warning">Warning color</Typography>
-</>
+    <Typography color="primary">Primary color</Typography>
+    <Typography color="neutral">Neutral color</Typography>
+    <Typography color="danger">Danger color</Typography>
+    <Typography color="success">Success color</Typography>
+    <Typography color="warning">Warning color</Typography>
+  </>
 ```
 
 ```tsx
@@ -235,16 +235,16 @@ Use the `component` prop to render Typography as a different HTML element or Rea
 
 ```tsx
 <>
-  <Typography level="h1" component="h2">
-    h1 style rendered as h2 tag
-  </Typography>
-  <Typography level="body-md" component="span">
-    body-md rendered as span
-  </Typography>
-  <Typography level="title-md" component="label">
-    title-md rendered as label
-  </Typography>
-</>
+    <Typography level="h1" component="h2">
+      h1 style rendered as h2 tag
+    </Typography>
+    <Typography level="body-md" component="span">
+      body-md rendered as span
+    </Typography>
+    <Typography level="title-md" component="label">
+      title-md rendered as label
+    </Typography>
+  </>
 ```
 
 ```tsx
@@ -283,16 +283,12 @@ Use `startDecorator` and `endDecorator` to add icons or other elements before or
 
 ```tsx
 <>
-  <Typography startDecorator={<InfoOutlined />}>
-    Text with start decorator
-  </Typography>
-  <Typography endDecorator={<ArrowForward />}>
-    Text with end decorator
-  </Typography>
-  <Typography startDecorator={<InfoOutlined />} endDecorator={<ArrowForward />}>
-    Text with both decorators
-  </Typography>
-</>
+    <Typography startDecorator={<InfoOutlined />}>Text with start decorator</Typography>
+    <Typography endDecorator={<ArrowForward />}>Text with end decorator</Typography>
+    <Typography startDecorator={<InfoOutlined />} endDecorator={<ArrowForward />}>
+      Text with both decorators
+    </Typography>
+  </>
 ```
 
 ```tsx
@@ -317,18 +313,20 @@ import ArrowForward from '@mui/icons-material/ArrowForward';
 Use the `noWrap` prop to truncate overflowing text with an ellipsis. Pair it with a `maxWidth` to constrain the text width.
 
 ```tsx
-<Typography noWrap sx={{
-  maxWidth: 200
-}}>
-This is a long text that will be truncated with an ellipsis when it
-exceeds the maximum width of the container.
-</Typography>
+<Typography
+    noWrap
+    sx={{
+      maxWidth: 200
+    }}
+  >
+    This is a long text that will be truncated with an ellipsis when it exceeds the maximum width of
+    the container.
+  </Typography>
 ```
 
 ```tsx
 <Typography noWrap sx={{ maxWidth: 200 }}>
-  This is a long text that will be truncated with an ellipsis when it exceeds
-  the maximum width.
+  This is a long text that will be truncated with an ellipsis when it exceeds the maximum width.
 </Typography>
 ```
 
@@ -337,19 +335,21 @@ exceeds the maximum width of the container.
 You can pass a responsive object to the `level` prop, or use `sx` to set responsive font sizes.
 
 ```tsx
-{/* Responsive level */}
-<Typography level={{ xs: 'h3', sm: 'h2', md: 'h1' }}>
-  Responsive Heading
-</Typography>
+{
+  /* Responsive level */
+}
+<Typography level={{ xs: 'h3', sm: 'h2', md: 'h1' }}>Responsive Heading</Typography>;
 
-{/* Responsive font size via sx */}
+{
+  /* Responsive font size via sx */
+}
 <Typography
   sx={{
     fontSize: { xs: '1rem', sm: '1.25rem', md: '1.5rem' },
   }}
 >
   Responsive text
-</Typography>
+</Typography>;
 ```
 
 ## Page Structure
@@ -367,17 +367,14 @@ function ArticlePage() {
       </Typography>
 
       <Typography level="body-md" sx={{ mb: 2 }}>
-        The main content of the article goes here. This text uses a readable size
-        and line spacing.
+        The main content of the article goes here. This text uses a readable size and line spacing.
       </Typography>
 
       <Typography level="h2" sx={{ mt: 4, mb: 2 }}>
         Section Title
       </Typography>
 
-      <Typography level="body-md">
-        The section content continues here.
-      </Typography>
+      <Typography level="body-md">The section content continues here.</Typography>
     </article>
   );
 }

package/dist/components/feedback/Alert.md

@@ -70,56 +70,66 @@ The most basic Alert usage.
 You can distinguish message types through various colors.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '5px'
-}}>
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '5px'
-}}>
-<Alert {...props} color="primary" variant="plain" />
-<Alert {...props} color="neutral" variant="plain" />
-<Alert {...props} color="danger" variant="plain" />
-<Alert {...props} color="success" variant="plain" />
-<Alert {...props} color="warning" variant="plain" />
-</div>
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '5px'
-}}>
-<Alert {...props} color="primary" variant="soft" />
-<Alert {...props} color="neutral" variant="soft" />
-<Alert {...props} color="danger" variant="soft" />
-<Alert {...props} color="success" variant="soft" />
-<Alert {...props} color="warning" variant="soft" />
-</div>
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '5px'
-}}>
-<Alert {...props} color="primary" variant="solid" />
-<Alert {...props} color="neutral" variant="solid" />
-<Alert {...props} color="danger" variant="solid" />
-<Alert {...props} color="success" variant="solid" />
-<Alert {...props} color="warning" variant="solid" />
-</div>
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '5px'
-}}>
-<Alert {...props} color="primary" variant="outlined" />
-<Alert {...props} color="neutral" variant="outlined" />
-<Alert {...props} color="danger" variant="outlined" />
-<Alert {...props} color="success" variant="outlined" />
-<Alert {...props} color="warning" variant="outlined" />
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "5px"
+    }}
+  >
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "5px"
+      }}
+    >
+      <Alert {...props} color="primary" variant="plain" />
+      <Alert {...props} color="neutral" variant="plain" />
+      <Alert {...props} color="danger" variant="plain" />
+      <Alert {...props} color="success" variant="plain" />
+      <Alert {...props} color="warning" variant="plain" />
+    </div>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "5px"
+      }}
+    >
+      <Alert {...props} color="primary" variant="soft" />
+      <Alert {...props} color="neutral" variant="soft" />
+      <Alert {...props} color="danger" variant="soft" />
+      <Alert {...props} color="success" variant="soft" />
+      <Alert {...props} color="warning" variant="soft" />
+    </div>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "5px"
+      }}
+    >
+      <Alert {...props} color="primary" variant="solid" />
+      <Alert {...props} color="neutral" variant="solid" />
+      <Alert {...props} color="danger" variant="solid" />
+      <Alert {...props} color="success" variant="solid" />
+      <Alert {...props} color="warning" variant="solid" />
+    </div>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "5px"
+      }}
+    >
+      <Alert {...props} color="primary" variant="outlined" />
+      <Alert {...props} color="neutral" variant="outlined" />
+      <Alert {...props} color="danger" variant="outlined" />
+      <Alert {...props} color="success" variant="outlined" />
+      <Alert {...props} color="warning" variant="outlined" />
+    </div>
+  </div>
 ```
 
 - **primary**: General informational message
@@ -214,17 +224,9 @@ function LoginForm() {
         />
       )}
 
-      {success && (
-        <Alert
-          color="success"
-          content="로그인이 완료되었습니다."
-          startDecorator={<CheckCircleIcon />}
-        />
-      )}
+      {success && <Alert color="success" content="로그인이 완료되었습니다." startDecorator={<CheckCircleIcon />} />}
 
-      <form onSubmit={handleSubmit}>
-        {/* Form fields */}
-      </form>
+      <form onSubmit={handleSubmit}>{/* Form fields */}</form>
     </Stack>
   );
 }
@@ -292,14 +294,18 @@ function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
           title: '데이터 처리 중',
           content: `진행률: ${progress}%`,
           startDecorator: <CircularProgress size="sm" />,
-          actions: <Button size="sm" onClick={onCancel}>취소</Button>
+          actions: (
+            <Button size="sm" onClick={onCancel}>
+              취소
+            </Button>
+          ),
         };
       case 'completed':
         return {
           color: 'success',
           title: '처리 완료',
           content: '모든 데이터가 성공적으로 처리되었습니다.',
-          startDecorator: <CheckCircleIcon />
+          startDecorator: <CheckCircleIcon />,
         };
       case 'failed':
         return {
@@ -307,7 +313,11 @@ function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
           title: '처리 실패',
           content: '데이터 처리 중 오류가 발생했습니다.',
           startDecorator: <ErrorIcon />,
-          actions: <Button size="sm" onClick={onRetry}>다시 시도</Button>
+          actions: (
+            <Button size="sm" onClick={onRetry}>
+              다시 시도
+            </Button>
+          ),
         };
       default:
         return null;
@@ -441,23 +451,19 @@ function DismissibleAlerts() {
   ]);
 
   const dismissAlert = (id) => {
-    setAlerts(prev => prev.filter(alert => alert.id !== id));
+    setAlerts((prev) => prev.filter((alert) => alert.id !== id));
   };
 
   return (
     <Stack spacing={2}>
-      {alerts.map(alert => (
+      {alerts.map((alert) => (
         <Alert
           key={alert.id}
           color={getAlertColor(alert.type)}
           content={alert.message}
           startDecorator={getAlertIcon(alert.type)}
           actions={
-            <IconButton
-              size="sm"
-              variant="plain"
-              onClick={() => dismissAlert(alert.id)}
-            >
+            <IconButton size="sm" variant="plain" onClick={() => dismissAlert(alert.id)}>
               <CloseIcon />
             </IconButton>
           }
@@ -479,7 +485,7 @@ function DismissibleAlerts() {
 | `actions`        | `ReactNode`                                                    | -           | Action buttons or elements displayed on the right                  |
 | `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Alert color scheme                                                 |
 | `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'soft'`    | Visual style                                                       |
-| `size`           | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Alert size (affects title/content typography levels)               |
+| `size`           | `'sm' \| 'md' \| 'lg'`                                         | `'sm'`      | Alert size (affects title/content typography levels)               |
 | `startDecorator` | `ReactNode`                                                    | -           | Icon or element rendered before the content                        |
 | `invertedColors` | `boolean`                                                      | `false`     | Invert child component colors (auto `true` when `variant='solid'`) |
 | `sx`             | `SxProps`                                                      | -           | Custom styles using the MUI system                                 |
@@ -578,11 +584,7 @@ The title and content are structured appropriately for screen readers.
   title="오류 발생"
   content="입력하신 정보를 다시 확인해주세요."
   startDecorator={<ErrorIcon aria-hidden="true" />}
-  actions={
-    <Button aria-label="오류 메시지 닫기">
-      닫기
-    </Button>
-  }
+  actions={<Button aria-label="오류 메시지 닫기">닫기</Button>}
 />
 ```
 
@@ -646,13 +648,7 @@ function AutoDismissAlert() {
 
   if (!visible) return null;
 
-  return (
-    <Alert
-      color="success"
-      content="저장이 완료되었습니다."
-      startDecorator={<CheckIcon />}
-    />
-  );
+  return <Alert color="success" content="저장이 완료되었습니다." startDecorator={<CheckIcon />} />;
 }
 ```
 
@@ -663,11 +659,9 @@ function AutoDismissAlert() {
 2. **Memoization**: Consider memoizing complex Alert content.
 
 ```tsx
-const alertContent = useMemo(() => (
-  <ComplexAlertContent data={data} />
-), [data]);
+const alertContent = useMemo(() => <ComplexAlertContent data={data} />, [data]);
 
-<Alert content={alertContent} />
+<Alert content={alertContent} />;
 ```
 
 3. **Batch handling**: Manage multiple Alerts efficiently.