@ceed/cds 1.34.0 → 1.35.0

package/dist/components/surfaces/Divider.md

@@ -5,17 +5,22 @@
 The Divider component draws a line that visually separates content. It is based on Joy UI's Divider component and adds Framer Motion animation support. You can use it to separate list items, card sections, form areas, and more to improve content readability.
 
 ```tsx
-<Box sx={{
-  width: 300,
-  height: 200,
-  p: 3
-}}>
-<Typography level="body-md">위 콘텐츠</Typography>
-<Divider {...args} sx={{
-  my: 2
-}} />
-<Typography level="body-md">아래 콘텐츠</Typography>
-</Box>
+<Box
+    sx={{
+      width: 300,
+      height: 200,
+      p: 3
+    }}
+  >
+    <Typography level="body-md">위 콘텐츠</Typography>
+    <Divider
+      {...args}
+      sx={{
+        my: 2
+      }}
+    />
+    <Typography level="body-md">아래 콘텐츠</Typography>
+  </Box>
 ```
 
 | Field       | Description | Default      |
@@ -48,37 +53,50 @@ The most basic way to use Divider.
 
 ```tsx
 <Stack spacing={3}>
-  <Box>
-    <Typography level="title-md" sx={{
-      mb: 2
-    }}>
-    기본 수평 구분선
-  </Typography>
-  <Typography level="body-sm">첫 번째 콘텐츠</Typography>
-  <Divider sx={{
-    my: 1
-  }} />
-  <Typography level="body-sm">두 번째 콘텐츠</Typography>
-</Box>
-
-<Box sx={{
-  display: 'flex',
-  alignItems: 'center',
-  height: 60
-}}>
-<Typography level="title-md" sx={{
-  mr: 2
-}}>
-수직 구분선
-</Typography>
-<Divider orientation="vertical" />
-<Typography level="title-md" sx={{
-  ml: 2
-}}>
-다른 섹션
-</Typography>
-</Box>
-</Stack>
+    <Box>
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        기본 수평 구분선
+      </Typography>
+      <Typography level="body-sm">첫 번째 콘텐츠</Typography>
+      <Divider
+        sx={{
+          my: 1
+        }}
+      />
+      <Typography level="body-sm">두 번째 콘텐츠</Typography>
+    </Box>
+
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        height: 60
+      }}
+    >
+      <Typography
+        level="title-md"
+        sx={{
+          mr: 2
+        }}
+      >
+        수직 구분선
+      </Typography>
+      <Divider orientation="vertical" />
+      <Typography
+        level="title-md"
+        sx={{
+          ml: 2
+        }}
+      >
+        다른 섹션
+      </Typography>
+    </Box>
+  </Stack>
 ```
 
 ### Orientations
@@ -87,35 +105,49 @@ You can set the direction of the divider.
 
 ```tsx
 <Stack spacing={4}>
-  <Box>
-    <Typography level="title-sm" sx={{
-      mb: 2
-    }}>
-    Horizontal (기본)
-  </Typography>
-  <Typography level="body-sm">첫 번째 섹션</Typography>
-  <Divider orientation="horizontal" sx={{
-    my: 1
-  }} />
-  <Typography level="body-sm">두 번째 섹션</Typography>
-</Box>
-
-<Box sx={{
-  display: 'flex',
-  alignItems: 'center',
-  height: 80
-}}>
-<Typography level="title-sm" sx={{
-  mr: 2
-}}>
-Vertical
-</Typography>
-<Divider orientation="vertical" sx={{
-  mx: 2
-}} />
-<Typography level="title-sm">수직 구분선은 요소들을 좌우로 구분합니다</Typography>
-</Box>
-</Stack>
+    <Box>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        Horizontal (기본)
+      </Typography>
+      <Typography level="body-sm">첫 번째 섹션</Typography>
+      <Divider
+        orientation="horizontal"
+        sx={{
+          my: 1
+        }}
+      />
+      <Typography level="body-sm">두 번째 섹션</Typography>
+    </Box>
+
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        height: 80
+      }}
+    >
+      <Typography
+        level="title-sm"
+        sx={{
+          mr: 2
+        }}
+      >
+        Vertical
+      </Typography>
+      <Divider
+        orientation="vertical"
+        sx={{
+          mx: 2
+        }}
+      />
+      <Typography level="title-sm">수직 구분선은 요소들을 좌우로 구분합니다</Typography>
+    </Box>
+  </Stack>
 ```
 
 ### Colors
@@ -124,20 +156,28 @@ You can apply various colors.
 
 ```tsx
 <Stack spacing={3}>
-  {['primary', 'neutral', 'danger', 'success', 'warning'].map(color => <Box key={color}>
-  <Typography level="title-sm" sx={{
-    mb: 1,
-    textTransform: 'capitalize'
-  }}>
-  {color}
-</Typography>
-<Typography level="body-sm">위 콘텐츠</Typography>
-<Divider color={color as any} sx={{
-  my: 1
-}} />
-<Typography level="body-sm">아래 콘텐츠</Typography>
-</Box>)}
-</Stack>
+    {["primary", "neutral", "danger", "success", "warning"].map((color) => (
+      <Box key={color}>
+        <Typography
+          level="title-sm"
+          sx={{
+            mb: 1,
+            textTransform: "capitalize"
+          }}
+        >
+          {color}
+        </Typography>
+        <Typography level="body-sm">위 콘텐츠</Typography>
+        <Divider
+          color={color as any}
+          sx={{
+            my: 1
+          }}
+        />
+        <Typography level="body-sm">아래 콘텐츠</Typography>
+      </Box>
+    ))}
+  </Stack>
 ```
 
 ### With Text
@@ -146,30 +186,36 @@ You can place text in the center of the divider.
 
 ```tsx
 <Stack spacing={3}>
-  <Box>
-    <Typography level="body-md">로그인 정보</Typography>
-    <Divider sx={{
-      my: 2
-    }}>또는</Divider>
-    <Typography level="body-md">소셜 로그인</Typography>
-  </Box>
-
-  <Box>
-    <Typography level="body-md">개인 정보</Typography>
-    <Divider sx={{
-      my: 2,
-      '&::before, &::after': {
-        border: '1px solid',
-        borderColor: 'primary.500'
-      }
-    }}>
-    <Typography level="title-sm" color="primary">
-      추가 정보
-    </Typography>
-  </Divider>
-  <Typography level="body-md">추가 세부사항</Typography>
-</Box>
-</Stack>
+    <Box>
+      <Typography level="body-md">로그인 정보</Typography>
+      <Divider
+        sx={{
+          my: 2
+        }}
+      >
+        또는
+      </Divider>
+      <Typography level="body-md">소셜 로그인</Typography>
+    </Box>
+
+    <Box>
+      <Typography level="body-md">개인 정보</Typography>
+      <Divider
+        sx={{
+          my: 2,
+          "&::before, &::after": {
+            border: "1px solid",
+            borderColor: "primary.500"
+          }
+        }}
+      >
+        <Typography level="title-sm" color="primary">
+          추가 정보
+        </Typography>
+      </Divider>
+      <Typography level="body-md">추가 세부사항</Typography>
+    </Box>
+  </Stack>
 ```
 
 ### In Cards
@@ -178,98 +224,136 @@ You can use it to separate sections inside cards or panels.
 
 ```tsx
 <Stack direction="row" spacing={3}>
-  <Sheet variant="outlined" sx={{
-    p: 3,
-    minWidth: 250,
-    borderRadius: 'md'
-  }}>
-  <Typography level="title-lg" sx={{
-    mb: 2
-  }}>
-  사용자 정보
-</Typography>
-<Typography level="body-sm" sx={{
-  mb: 1
-}}>
-이름: 김철수
-</Typography>
-<Typography level="body-sm" sx={{
-  mb: 2
-}}>
-이메일: kim@example.com
-</Typography>
-
-<Divider sx={{
-  my: 2
-}} />
-
-<Typography level="title-md" sx={{
-  mb: 2
-}}>
-통계
-</Typography>
-<Typography level="body-sm" sx={{
-  mb: 1
-}}>
-가입일: 2024.01.15
-</Typography>
-<Typography level="body-sm">활동 점수: 1,234</Typography>
-</Sheet>
+    <Sheet
+      variant="outlined"
+      sx={{
+        p: 3,
+        minWidth: 250,
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="title-lg"
+        sx={{
+          mb: 2
+        }}
+      >
+        사용자 정보
+      </Typography>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        이름: 김철수
+      </Typography>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        이메일: kim@example.com
+      </Typography>
 
-<Sheet variant="outlined" sx={{
-  p: 3,
-  minWidth: 250,
-  borderRadius: 'md'
-}}>
-<Typography level="title-lg" sx={{
-  mb: 2
-}}>
-프로젝트 현황
-</Typography>
-
-<Box sx={{
-  display: 'flex',
-  justifyContent: 'space-between',
-  mb: 1
-}}>
-<Typography level="body-sm">완료</Typography>
-<Typography level="body-sm" color="success">
-  12
-</Typography>
-</Box>
-
-<Divider color="neutral" sx={{
-  my: 1,
-  opacity: 0.3
-}} />
-
-<Box sx={{
-  display: 'flex',
-  justifyContent: 'space-between',
-  mb: 1
-}}>
-<Typography level="body-sm">진행중</Typography>
-<Typography level="body-sm" color="warning">
-  5
-</Typography>
-</Box>
-
-<Divider color="neutral" sx={{
-  my: 1,
-  opacity: 0.3
-}} />
-
-<Box sx={{
-  display: 'flex',
-  justifyContent: 'space-between'
-}}>
-<Typography level="body-sm">대기</Typography>
-<Typography level="body-sm" color="neutral">
-  3
-</Typography>
-</Box>
-</Sheet>
-</Stack>
+      <Divider
+        sx={{
+          my: 2
+        }}
+      />
+
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        통계
+      </Typography>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        가입일: 2024.01.15
+      </Typography>
+      <Typography level="body-sm">활동 점수: 1,234</Typography>
+    </Sheet>
+
+    <Sheet
+      variant="outlined"
+      sx={{
+        p: 3,
+        minWidth: 250,
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="title-lg"
+        sx={{
+          mb: 2
+        }}
+      >
+        프로젝트 현황
+      </Typography>
+
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          mb: 1
+        }}
+      >
+        <Typography level="body-sm">완료</Typography>
+        <Typography level="body-sm" color="success">
+          12
+        </Typography>
+      </Box>
+
+      <Divider
+        color="neutral"
+        sx={{
+          my: 1,
+          opacity: 0.3
+        }}
+      />
+
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          mb: 1
+        }}
+      >
+        <Typography level="body-sm">진행중</Typography>
+        <Typography level="body-sm" color="warning">
+          5
+        </Typography>
+      </Box>
+
+      <Divider
+        color="neutral"
+        sx={{
+          my: 1,
+          opacity: 0.3
+        }}
+      />
+
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between"
+        }}
+      >
+        <Typography level="body-sm">대기</Typography>
+        <Typography level="body-sm" color="neutral">
+          3
+        </Typography>
+      </Box>
+    </Sheet>
+  </Stack>
 ```
 
 ### List Separators
@@ -277,43 +361,52 @@ You can use it to separate sections inside cards or panels.
 You can use it as a separator between list items.
 
 ```tsx
-<Sheet variant="outlined" sx={{
-  maxWidth: 400,
-  borderRadius: 'md'
-}}>
-<Stack>
-  <Box sx={{
-    p: 2
-  }}>
-  <Typography level="body-md">첫 번째 항목</Typography>
-  <Typography level="body-xs" color="neutral">
-    첫 번째 항목에 대한 설명입니다.
-  </Typography>
-</Box>
-
-<Divider />
-
-<Box sx={{
-  p: 2
-}}>
-<Typography level="body-md">두 번째 항목</Typography>
-<Typography level="body-xs" color="neutral">
-  두 번째 항목에 대한 설명입니다.
-</Typography>
-</Box>
-
-<Divider />
-
-<Box sx={{
-  p: 2
-}}>
-<Typography level="body-md">세 번째 항목</Typography>
-<Typography level="body-xs" color="neutral">
-  세 번째 항목에 대한 설명입니다.
-</Typography>
-</Box>
-</Stack>
-</Sheet>
+<Sheet
+    variant="outlined"
+    sx={{
+      maxWidth: 400,
+      borderRadius: "md"
+    }}
+  >
+    <Stack>
+      <Box
+        sx={{
+          p: 2
+        }}
+      >
+        <Typography level="body-md">첫 번째 항목</Typography>
+        <Typography level="body-xs" color="neutral">
+          첫 번째 항목에 대한 설명입니다.
+        </Typography>
+      </Box>
+
+      <Divider />
+
+      <Box
+        sx={{
+          p: 2
+        }}
+      >
+        <Typography level="body-md">두 번째 항목</Typography>
+        <Typography level="body-xs" color="neutral">
+          두 번째 항목에 대한 설명입니다.
+        </Typography>
+      </Box>
+
+      <Divider />
+
+      <Box
+        sx={{
+          p: 2
+        }}
+      >
+        <Typography level="body-md">세 번째 항목</Typography>
+        <Typography level="body-xs" color="neutral">
+          세 번째 항목에 대한 설명입니다.
+        </Typography>
+      </Box>
+    </Stack>
+  </Sheet>
 ```
 
 ### Responsive Orientation
@@ -322,51 +415,64 @@ You can change the orientation based on screen size.
 
 ```tsx
 <Stack spacing={3}>
-  <Typography level="title-md">화면 크기에 따라 방향이 바뀌는 구분선</Typography>
-
-  <Box sx={{
-    display: 'flex',
-    flexDirection: {
-      xs: 'column',
-      sm: 'row'
-    },
-    alignItems: 'center',
-    gap: 2,
-    p: 3,
-    bgcolor: 'background.level1',
-    borderRadius: 'md'
-  }}>
-  <Typography level="body-md" sx={{
-    textAlign: 'center'
-  }}>
-  첫 번째 섹션
-</Typography>
-
-<Divider orientation={{
-  xs: 'horizontal',
-  sm: 'vertical'
-} as any} sx={{
-  width: {
-    xs: '100%',
-    sm: 'auto'
-  },
-  height: {
-    xs: 'auto',
-    sm: 40
-  }
-}} />
-
-<Typography level="body-md" sx={{
-  textAlign: 'center'
-}}>
-두 번째 섹션
-</Typography>
-</Box>
-
-<Typography level="body-xs" color="neutral">
-  * 화면 크기를 조절하여 구분선 방향 변화를 확인하세요
-</Typography>
-</Stack>
+    <Typography level="title-md">화면 크기에 따라 방향이 바뀌는 구분선</Typography>
+
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: {
+          xs: "column",
+          sm: "row"
+        },
+        alignItems: "center",
+        gap: 2,
+        p: 3,
+        bgcolor: "background.level1",
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="body-md"
+        sx={{
+          textAlign: "center"
+        }}
+      >
+        첫 번째 섹션
+      </Typography>
+
+      <Divider
+        orientation={
+          {
+            xs: "horizontal",
+            sm: "vertical"
+          } as any
+        }
+        sx={{
+          width: {
+            xs: "100%",
+            sm: "auto"
+          },
+          height: {
+            xs: "auto",
+            sm: 40
+          }
+        }}
+      />
+
+      <Typography
+        level="body-md"
+        sx={{
+          textAlign: "center"
+        }}
+      >
+        두 번째 섹션
+      </Typography>
+    </Box>
+
+    <Typography level="body-xs" color="neutral">
+      * 화면 크기를 조절하여 구분선 방향 변화를 확인하세요
+    </Typography>
+  </Stack>
 ```
 
 ### With Motion
@@ -375,67 +481,91 @@ You can apply Framer Motion animations.
 
 ```tsx
 <Stack spacing={3}>
-  <Typography level="title-md">Framer Motion 애니메이션이 적용된 구분선</Typography>
-
-  <Box sx={{
-    p: 3,
-    bgcolor: 'background.level1',
-    borderRadius: 'md'
-  }}>
-  <Typography level="body-md" sx={{
-    mb: 2
-  }}>
-  위 콘텐츠
-</Typography>
-
-<Divider initial={{
-  scaleX: 0
-}} animate={{
-  scaleX: 1
-}} transition={{
-  duration: 1,
-  ease: 'easeOut'
-}} sx={{
-  my: 2,
-  transformOrigin: 'left'
-}} />
-
-<Typography level="body-md">아래 콘텐츠 (구분선이 애니메이션과 함께 나타남)</Typography>
-</Box>
-
-<Box sx={{
-  display: 'flex',
-  alignItems: 'center',
-  p: 3,
-  bgcolor: 'background.level1',
-  borderRadius: 'md'
-}}>
-<Typography level="body-md" sx={{
-  mr: 3
-}}>
-좌측 콘텐츠
-</Typography>
-
-<Divider orientation="vertical" initial={{
-  scaleY: 0
-}} animate={{
-  scaleY: 1
-}} transition={{
-  duration: 1,
-  delay: 0.5
-}} sx={{
-  mx: 2,
-  height: 40,
-  transformOrigin: 'top'
-}} />
-
-<Typography level="body-md" sx={{
-  ml: 3
-}}>
-우측 콘텐츠
-</Typography>
-</Box>
-</Stack>
+    <Typography level="title-md">Framer Motion 애니메이션이 적용된 구분선</Typography>
+
+    <Box
+      sx={{
+        p: 3,
+        bgcolor: "background.level1",
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="body-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        위 콘텐츠
+      </Typography>
+
+      <Divider
+        initial={{
+          scaleX: 0
+        }}
+        animate={{
+          scaleX: 1
+        }}
+        transition={{
+          duration: 1,
+          ease: "easeOut"
+        }}
+        sx={{
+          my: 2,
+          transformOrigin: "left"
+        }}
+      />
+
+      <Typography level="body-md">아래 콘텐츠 (구분선이 애니메이션과 함께 나타남)</Typography>
+    </Box>
+
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        p: 3,
+        bgcolor: "background.level1",
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="body-md"
+        sx={{
+          mr: 3
+        }}
+      >
+        좌측 콘텐츠
+      </Typography>
+
+      <Divider
+        orientation="vertical"
+        initial={{
+          scaleY: 0
+        }}
+        animate={{
+          scaleY: 1
+        }}
+        transition={{
+          duration: 1,
+          delay: 0.5
+        }}
+        sx={{
+          mx: 2,
+          height: 40,
+          transformOrigin: "top"
+        }}
+      />
+
+      <Typography
+        level="body-md"
+        sx={{
+          ml: 3
+        }}
+      >
+        우측 콘텐츠
+      </Typography>
+    </Box>
+  </Stack>
 ```
 
 ### Custom Styling
@@ -444,75 +574,95 @@ You can customize the divider with CSS styles.
 
 ```tsx
 <Stack spacing={4}>
-  <Box>
-    <Typography level="title-sm" sx={{
-      mb: 2
-    }}>
-    둥근 모서리 구분선
-  </Typography>
-  <Typography level="body-sm">위 콘텐츠</Typography>
-  <Divider sx={{
-    my: 2,
-    borderWidth: 3,
-    borderRadius: '6px',
-    borderColor: 'primary.500'
-  }} />
-  <Typography level="body-sm">아래 콘텐츠</Typography>
-</Box>
-
-<Box>
-  <Typography level="title-sm" sx={{
-    mb: 2
-  }}>
-  그라데이션 구분선 (Box 사용)
-</Typography>
-<Typography level="body-sm">위 콘텐츠</Typography>
-<Box sx={{
-  height: 2,
-  my: 2,
-  background: 'linear-gradient(90deg, transparent, #0073e6, transparent)',
-  borderRadius: '1px'
-}} />
-<Typography level="body-sm">아래 콘텐츠</Typography>
-</Box>
-
-<Box>
-  <Typography level="title-sm" sx={{
-    mb: 2
-  }}>
-  패턴 구분선 (Box 사용)
-</Typography>
-<Typography level="body-sm">위 콘텐츠</Typography>
-<Box sx={{
-  height: 3,
-  my: 2,
-  background: `repeating-linear-gradient(
-  90deg,
-  #0073e6 0px,
-  #0073e6 10px,
-  transparent 10px,
-  transparent 20px
-)`,
-borderRadius: '1px'
-}} />
-<Typography level="body-sm">아래 콘텐츠</Typography>
-</Box>
-
-<Box>
-  <Typography level="title-sm" sx={{
-    mb: 2
-  }}>
-  그림자 효과
-</Typography>
-<Typography level="body-sm">위 콘텐츠</Typography>
-<Divider sx={{
-  my: 2,
-  borderColor: 'neutral.500',
-  filter: 'drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2))'
-}} />
-<Typography level="body-sm">아래 콘텐츠</Typography>
-</Box>
-</Stack>
+    <Box>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        둥근 모서리 구분선
+      </Typography>
+      <Typography level="body-sm">위 콘텐츠</Typography>
+      <Divider
+        sx={{
+          my: 2,
+          borderWidth: 3,
+          borderRadius: "6px",
+          borderColor: "primary.500"
+        }}
+      />
+      <Typography level="body-sm">아래 콘텐츠</Typography>
+    </Box>
+
+    <Box>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        그라데이션 구분선 (Box 사용)
+      </Typography>
+      <Typography level="body-sm">위 콘텐츠</Typography>
+      <Box
+        sx={{
+          height: 2,
+          my: 2,
+          background: "linear-gradient(90deg, transparent, #0073e6, transparent)",
+          borderRadius: "1px"
+        }}
+      />
+      <Typography level="body-sm">아래 콘텐츠</Typography>
+    </Box>
+
+    <Box>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        패턴 구분선 (Box 사용)
+      </Typography>
+      <Typography level="body-sm">위 콘텐츠</Typography>
+      <Box
+        sx={{
+          height: 3,
+          my: 2,
+          background: `repeating-linear-gradient(
+              90deg,
+              #0073e6 0px,
+              #0073e6 10px,
+              transparent 10px,
+              transparent 20px
+            )`,
+          borderRadius: "1px"
+        }}
+      />
+      <Typography level="body-sm">아래 콘텐츠</Typography>
+    </Box>
+
+    <Box>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        그림자 효과
+      </Typography>
+      <Typography level="body-sm">위 콘텐츠</Typography>
+      <Divider
+        sx={{
+          my: 2,
+          borderColor: "neutral.500",
+          filter: "drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2))"
+        }}
+      />
+      <Typography level="body-sm">아래 콘텐츠</Typography>
+    </Box>
+  </Stack>
 ```
 
 ## Key Props