@ceed/ads 1.35.1 → 1.36.0

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>
           }
@@ -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.

package/dist/components/feedback/CircularProgress.md

@@ -33,10 +33,10 @@ CircularProgress supports three sizes: `sm`, `md` (default), and `lg`.
 
 ```tsx
 <>
-  <CircularProgress size="sm" />
-  <CircularProgress size="md" />
-  <CircularProgress size="lg" />
-</>
+    <CircularProgress size="sm" />
+    <CircularProgress size="md" />
+    <CircularProgress size="lg" />
+  </>
 ```
 
 ```tsx
@@ -51,12 +51,12 @@ Five semantic colors are available via the `color` prop. The default is `primary
 
 ```tsx
 <>
-  <CircularProgress color="primary" />
-  <CircularProgress color="neutral" />
-  <CircularProgress color="danger" />
-  <CircularProgress color="success" />
-  <CircularProgress color="warning" />
-</>
+    <CircularProgress color="primary" />
+    <CircularProgress color="neutral" />
+    <CircularProgress color="danger" />
+    <CircularProgress color="success" />
+    <CircularProgress color="warning" />
+  </>
 ```
 
 ```tsx
@@ -73,11 +73,11 @@ Four visual variants are supported: `solid`, `soft` (default), `outlined`, and `
 
 ```tsx
 <>
-  <CircularProgress variant="solid" />
-  <CircularProgress variant="soft" />
-  <CircularProgress variant="outlined" />
-  <CircularProgress variant="plain" />
-</>
+    <CircularProgress variant="solid" />
+    <CircularProgress variant="soft" />
+    <CircularProgress variant="outlined" />
+    <CircularProgress variant="plain" />
+  </>
 ```
 
 ```tsx
@@ -93,11 +93,11 @@ Set `determinate` to `true` and provide a `value` (0–100) to display specific
 
 ```tsx
 <>
-  <CircularProgress determinate value={25} />
-  <CircularProgress determinate value={50} />
-  <CircularProgress determinate value={75} />
-  <CircularProgress determinate value={100} />
-</>
+    <CircularProgress determinate value={25} />
+    <CircularProgress determinate value={50} />
+    <CircularProgress determinate value={75} />
+    <CircularProgress determinate value={100} />
+  </>
 ```
 
 ```tsx
@@ -113,8 +113,8 @@ Pass children to display a label inside the progress ring. This is useful for sh
 
 ```tsx
 <CircularProgress determinate value={66}>
-  <Typography level="body-xs">66%</Typography>
-</CircularProgress>
+    <Typography level="body-xs">66%</Typography>
+  </CircularProgress>
 ```
 
 ```tsx
@@ -129,13 +129,11 @@ Use CircularProgress inside a Button to indicate a loading state.
 
 ```tsx
 <>
-  <Button startDecorator={<CircularProgress variant="solid" size="sm" />}>
-    Loading…
-  </Button>
-  <Button disabled>
-    <CircularProgress variant="soft" size="sm" />
-  </Button>
-</>
+    <Button startDecorator={<CircularProgress variant="solid" size="sm" />}>Loading…</Button>
+    <Button disabled>
+      <CircularProgress variant="soft" size="sm" />
+    </Button>
+  </>
 ```
 
 ```tsx
@@ -154,10 +152,10 @@ Control the stroke thickness of the progress ring with the `thickness` prop.
 
 ```tsx
 <>
-  <CircularProgress thickness={2} />
-  <CircularProgress thickness={4} />
-  <CircularProgress thickness={8} />
-</>
+    <CircularProgress thickness={2} />
+    <CircularProgress thickness={4} />
+    <CircularProgress thickness={8} />
+  </>
 ```
 
 ```tsx
@@ -214,9 +212,7 @@ function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
   return (
     <Button
       disabled={isSubmitting}
-      startDecorator={
-        isSubmitting ? <CircularProgress variant="solid" size="sm" /> : null
-      }
+      startDecorator={isSubmitting ? <CircularProgress variant="solid" size="sm" /> : null}
     >
       {isSubmitting ? 'Submitting…' : 'Submit'}
     </Button>