@ceed/cds 1.34.1 → 1.35.0

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

@@ -43,63 +43,63 @@ 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="marketing-lg">marketing-lg</Typography>
-    <Typography {...args} level="marketing-lg" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="marketing-md">marketing-md</Typography>
-    <Typography {...args} level="marketing-md" />
-  </Stack>
-  <Stack direction="row" spacing={2}>
-    <Typography level="marketing-sm">marketing-sm</Typography>
-    <Typography {...args} level="marketing-sm" />
-  </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>
+    <Stack direction="row" spacing={2}>
+      <Typography level="marketing-lg">marketing-lg</Typography>
+      <Typography {...args} level="marketing-lg" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="marketing-md">marketing-md</Typography>
+      <Typography {...args} level="marketing-md" />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Typography level="marketing-sm">marketing-sm</Typography>
+      <Typography {...args} level="marketing-sm" />
+    </Stack>
+  </>
 ```
 
 ### Style Reference
@@ -124,11 +124,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
@@ -144,10 +144,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
@@ -162,11 +162,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
@@ -222,12 +222,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
@@ -247,16 +247,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
@@ -295,16 +295,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
@@ -329,18 +325,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>
 ```
 
@@ -349,19 +347,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>;
 ```
 
 ## Common Use Cases
@@ -381,17 +381,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

@@ -72,56 +72,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
@@ -218,17 +228,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>
   );
 }
@@ -296,14 +298,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 {
@@ -311,7 +317,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;
@@ -445,23 +455,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>
           }
@@ -566,11 +572,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>}
 />
 ```
 
@@ -634,13 +636,7 @@ function AutoDismissAlert() {
 
   if (!visible) return null;
 
-  return (
-    <Alert
-      color="success"
-      content="저장이 완료되었습니다."
-      startDecorator={<CheckIcon />}
-    />
-  );
+  return <Alert color="success" content="저장이 완료되었습니다." startDecorator={<CheckIcon />} />;
 }
 ```
 
@@ -651,11 +647,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.