@ceed/cds 1.34.1 → 1.35.0

package/dist/components/surfaces/Sheet.md

@@ -7,20 +7,26 @@ Sheet is a foundational surface component that serves as a container for groupin
 Sheet is built on top of Joy UI's Sheet component and inherits all of its styling capabilities, including support for the `sx` prop for custom styling, responsive design tokens, and Framer Motion animation props.
 
 ```tsx
-<Sheet {...args} sx={{
-  p: 3,
-  maxWidth: 400,
-  borderRadius: 'md'
-}}>
-<Typography level="title-md" sx={{
-  mb: 2
-}}>
-Sheet 컴포넌트
-</Typography>
-<Typography level="body-md">
-  이것은 Sheet 컴포넌트의 기본 예제입니다. 다양한 콘텐츠를 담을 수 있는 표면을 제공합니다.
-</Typography>
-</Sheet>
+<Sheet
+    {...args}
+    sx={{
+      p: 3,
+      maxWidth: 400,
+      borderRadius: "md"
+    }}
+  >
+    <Typography
+      level="title-md"
+      sx={{
+        mb: 2
+      }}
+    >
+      Sheet 컴포넌트
+    </Typography>
+    <Typography level="body-md">
+      이것은 Sheet 컴포넌트의 기본 예제입니다. 다양한 콘텐츠를 담을 수 있는 표면을 제공합니다.
+    </Typography>
+  </Sheet>
 ```
 
 | Field   | Description | Default    |
@@ -37,9 +43,7 @@ function MyComponent() {
   return (
     <Sheet variant="outlined" sx={{ p: 3, borderRadius: 'md' }}>
       <Typography level="title-md">Sheet Title</Typography>
-      <Typography level="body-md">
-        Content goes inside the sheet.
-      </Typography>
+      <Typography level="body-md">Content goes inside the sheet.</Typography>
     </Sheet>
   );
 }
@@ -50,68 +54,97 @@ function MyComponent() {
 Sheet supports four visual variants to convey different levels of emphasis.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  flexWrap: 'wrap'
-}}>
-<Sheet variant="solid" sx={{
-  p: 3,
-  maxWidth: 250,
-  borderRadius: 'md'
-}}>
-<Typography level="title-md" sx={{
-  mb: 1,
-  color: 'white'
-}}>
-Solid
-</Typography>
-<Typography level="body-sm" sx={{
-  color: 'white'
-}}>
-배경이 채워진 스타일
-</Typography>
-</Sheet>
-
-<Sheet variant="soft" sx={{
-  p: 3,
-  maxWidth: 250,
-  borderRadius: 'md'
-}}>
-<Typography level="title-md" sx={{
-  mb: 1
-}}>
-Soft
-</Typography>
-<Typography level="body-sm">부드러운 배경 스타일</Typography>
-</Sheet>
-
-<Sheet variant="outlined" sx={{
-  p: 3,
-  maxWidth: 250,
-  borderRadius: 'md'
-}}>
-<Typography level="title-md" sx={{
-  mb: 1
-}}>
-Outlined
-</Typography>
-<Typography level="body-sm">테두리가 있는 스타일</Typography>
-</Sheet>
-
-<Sheet variant="plain" sx={{
-  p: 3,
-  maxWidth: 250,
-  borderRadius: 'md'
-}}>
-<Typography level="title-md" sx={{
-  mb: 1
-}}>
-Plain
-</Typography>
-<Typography level="body-sm">배경이 없는 평면 스타일</Typography>
-</Sheet>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Sheet
+      variant="solid"
+      sx={{
+        p: 3,
+        maxWidth: 250,
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 1,
+          color: "white"
+        }}
+      >
+        Solid
+      </Typography>
+      <Typography
+        level="body-sm"
+        sx={{
+          color: "white"
+        }}
+      >
+        배경이 채워진 스타일
+      </Typography>
+    </Sheet>
+
+    <Sheet
+      variant="soft"
+      sx={{
+        p: 3,
+        maxWidth: 250,
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 1
+        }}
+      >
+        Soft
+      </Typography>
+      <Typography level="body-sm">부드러운 배경 스타일</Typography>
+    </Sheet>
+
+    <Sheet
+      variant="outlined"
+      sx={{
+        p: 3,
+        maxWidth: 250,
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 1
+        }}
+      >
+        Outlined
+      </Typography>
+      <Typography level="body-sm">테두리가 있는 스타일</Typography>
+    </Sheet>
+
+    <Sheet
+      variant="plain"
+      sx={{
+        p: 3,
+        maxWidth: 250,
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 1
+        }}
+      >
+        Plain
+      </Typography>
+      <Typography level="body-sm">배경이 없는 평면 스타일</Typography>
+    </Sheet>
+  </div>
 ```
 
 ## Colors
@@ -119,46 +152,68 @@ Plain
 Apply semantic colors to communicate meaning -- use `danger` for errors, `success` for confirmations, `warning` for alerts, and `primary` for highlighted content.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Sheet color="primary" variant="soft" sx={{
-  p: 2,
-  borderRadius: 'md'
-}}>
-<Typography level="title-sm">Primary</Typography>
-</Sheet>
-
-<Sheet color="neutral" variant="soft" sx={{
-  p: 2,
-  borderRadius: 'md'
-}}>
-<Typography level="title-sm">Neutral</Typography>
-</Sheet>
-
-<Sheet color="danger" variant="soft" sx={{
-  p: 2,
-  borderRadius: 'md'
-}}>
-<Typography level="title-sm">Danger</Typography>
-</Sheet>
-
-<Sheet color="success" variant="soft" sx={{
-  p: 2,
-  borderRadius: 'md'
-}}>
-<Typography level="title-sm">Success</Typography>
-</Sheet>
-
-<Sheet color="warning" variant="soft" sx={{
-  p: 2,
-  borderRadius: 'md'
-}}>
-<Typography level="title-sm">Warning</Typography>
-</Sheet>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Sheet
+      color="primary"
+      variant="soft"
+      sx={{
+        p: 2,
+        borderRadius: "md"
+      }}
+    >
+      <Typography level="title-sm">Primary</Typography>
+    </Sheet>
+
+    <Sheet
+      color="neutral"
+      variant="soft"
+      sx={{
+        p: 2,
+        borderRadius: "md"
+      }}
+    >
+      <Typography level="title-sm">Neutral</Typography>
+    </Sheet>
+
+    <Sheet
+      color="danger"
+      variant="soft"
+      sx={{
+        p: 2,
+        borderRadius: "md"
+      }}
+    >
+      <Typography level="title-sm">Danger</Typography>
+    </Sheet>
+
+    <Sheet
+      color="success"
+      variant="soft"
+      sx={{
+        p: 2,
+        borderRadius: "md"
+      }}
+    >
+      <Typography level="title-sm">Success</Typography>
+    </Sheet>
+
+    <Sheet
+      color="warning"
+      variant="soft"
+      sx={{
+        p: 2,
+        borderRadius: "md"
+      }}
+    >
+      <Typography level="title-sm">Warning</Typography>
+    </Sheet>
+  </div>
 ```
 
 ## Basic
@@ -166,37 +221,50 @@ Apply semantic colors to communicate meaning -- use `danger` for errors, `succes
 The simplest form of a Sheet with minimal configuration.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  flexWrap: 'wrap'
-}}>
-<Sheet sx={{
-  p: 3,
-  maxWidth: 300,
-  borderRadius: 'md'
-}}>
-<Typography level="title-md" sx={{
-  mb: 1
-}}>
-기본 Sheet
-</Typography>
-<Typography level="body-sm">가장 기본적인 Sheet 컴포넌트입니다.</Typography>
-</Sheet>
-
-<Sheet variant="outlined" sx={{
-  p: 3,
-  maxWidth: 300,
-  borderRadius: 'md'
-}}>
-<Typography level="title-md" sx={{
-  mb: 1
-}}>
-Outlined Sheet
-</Typography>
-<Typography level="body-sm">테두리가 있는 Sheet 컴포넌트입니다.</Typography>
-</Sheet>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Sheet
+      sx={{
+        p: 3,
+        maxWidth: 300,
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 1
+        }}
+      >
+        기본 Sheet
+      </Typography>
+      <Typography level="body-sm">가장 기본적인 Sheet 컴포넌트입니다.</Typography>
+    </Sheet>
+
+    <Sheet
+      variant="outlined"
+      sx={{
+        p: 3,
+        maxWidth: 300,
+        borderRadius: "md"
+      }}
+    >
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 1
+        }}
+      >
+        Outlined Sheet
+      </Typography>
+      <Typography level="body-sm">테두리가 있는 Sheet 컴포넌트입니다.</Typography>
+    </Sheet>
+  </div>
 ```
 
 ## User Profile Card
@@ -204,56 +272,64 @@ Outlined Sheet
 Sheet can be composed with other components to create rich profile cards.
 
 ```tsx
-<Sheet variant="outlined" sx={{
-  maxWidth: 400,
-  borderRadius: 'lg',
-  p: 3
-}}>
-<Stack spacing={3}>
-  <Stack direction="row" spacing={2} alignItems="center">
-    <Avatar size="lg" src="https://i.pravatar.cc/100?img=1" />
-    <Stack spacing={0.5}>
-      <Typography level="title-lg">김철수</Typography>
-      <Typography level="body-sm" sx={{
-        color: 'text.secondary'
-      }}>
-      프론트엔드 개발자
-    </Typography>
-  </Stack>
-  <Box sx={{
-    ml: 'auto'
-  }}>
-  <IconButton variant="plain" size="sm">
-    <SettingsIcon />
-  </IconButton>
-</Box>
-</Stack>
-
-<Typography level="body-md">
-  사용자 경험을 중시하는 프론트엔드 개발자입니다. React와 TypeScript를 주로 사용하며, 깔끔하고 직관적인
-  인터페이스 구현에 관심이 많습니다.
-</Typography>
-
-<Stack direction="row" spacing={1}>
-  <Chip size="sm" variant="soft">
-    React
-  </Chip>
-  <Chip size="sm" variant="soft">
-    TypeScript
-  </Chip>
-  <Chip size="sm" variant="soft">
-    Next.js
-  </Chip>
-</Stack>
-
-<Stack direction="row" spacing={2}>
-  <Button variant="outlined" fullWidth>
-    팔로우
-  </Button>
-  <Button fullWidth>메시지 보내기</Button>
-</Stack>
-</Stack>
-</Sheet>
+<Sheet
+    variant="outlined"
+    sx={{
+      maxWidth: 400,
+      borderRadius: "lg",
+      p: 3
+    }}
+  >
+    <Stack spacing={3}>
+      <Stack direction="row" spacing={2} alignItems="center">
+        <Avatar size="lg" src="https://i.pravatar.cc/100?img=1" />
+        <Stack spacing={0.5}>
+          <Typography level="title-lg">김철수</Typography>
+          <Typography
+            level="body-sm"
+            sx={{
+              color: "text.secondary"
+            }}
+          >
+            프론트엔드 개발자
+          </Typography>
+        </Stack>
+        <Box
+          sx={{
+            ml: "auto"
+          }}
+        >
+          <IconButton variant="plain" size="sm">
+            <SettingsIcon />
+          </IconButton>
+        </Box>
+      </Stack>
+
+      <Typography level="body-md">
+        사용자 경험을 중시하는 프론트엔드 개발자입니다. React와 TypeScript를 주로 사용하며, 깔끔하고
+        직관적인 인터페이스 구현에 관심이 많습니다.
+      </Typography>
+
+      <Stack direction="row" spacing={1}>
+        <Chip size="sm" variant="soft">
+          React
+        </Chip>
+        <Chip size="sm" variant="soft">
+          TypeScript
+        </Chip>
+        <Chip size="sm" variant="soft">
+          Next.js
+        </Chip>
+      </Stack>
+
+      <Stack direction="row" spacing={2}>
+        <Button variant="outlined" fullWidth>
+          팔로우
+        </Button>
+        <Button fullWidth>메시지 보내기</Button>
+      </Stack>
+    </Stack>
+  </Sheet>
 ```
 
 ## Article Card
@@ -261,72 +337,89 @@ Sheet can be composed with other components to create rich profile cards.
 Combine Sheet with images, chips, and actions for article-style layouts.
 
 ```tsx
-<Sheet variant="outlined" sx={{
-  maxWidth: 500,
-  borderRadius: 'lg',
-  overflow: 'hidden'
-}}>
-<Box sx={{
-  height: 200,
-  bgcolor: 'neutral.100',
-  backgroundImage: 'url(https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80)',
-  backgroundSize: 'cover',
-  backgroundPosition: 'center'
-}} />
-
-<Stack spacing={2} sx={{
-  p: 3
-}}>
-<Stack direction="row" justifyContent="space-between" alignItems="flex-start">
-  <Stack spacing={1}>
-    <Typography level="title-lg">React 18의 새로운 기능들</Typography>
-    <Typography level="body-sm" sx={{
-      color: 'text.secondary'
-    }}>
-    2024년 1월 15일 • 5분 읽기
-  </Typography>
-</Stack>
-<IconButton variant="plain" size="sm" sx={{
-  color: 'warning.500'
-}}>
-<StarIcon />
-</IconButton>
-</Stack>
-
-<Typography level="body-md">
-  React 18에서 도입된 Concurrent Features와 새로운 Hooks에 대해 자세히 알아보겠습니다. Suspense, useTransition,
-  useDeferredValue 등의 새로운 기능들이 어떻게 사용자 경험을 개선하는지 살펴보겠습니다.
-</Typography>
-
-<Stack direction="row" spacing={1}>
-  <Chip size="sm" variant="outlined">
-    React
-  </Chip>
-  <Chip size="sm" variant="outlined">
-    JavaScript
-  </Chip>
-  <Chip size="sm" variant="outlined">
-    개발
-  </Chip>
-</Stack>
-
-<Stack direction="row" justifyContent="space-between" alignItems="center">
-  <Stack direction="row" spacing={1} alignItems="center">
-    <Avatar size="sm" src="https://i.pravatar.cc/32?img=2" />
-    <Typography level="body-sm">김개발</Typography>
-  </Stack>
-
-  <Stack direction="row" spacing={1}>
-    <Button size="sm" variant="plain" startDecorator={<FavoriteIcon />}>
-      24
-    </Button>
-    <Button size="sm" variant="plain" startDecorator={<ShareIcon />}>
-      공유
-    </Button>
-  </Stack>
-</Stack>
-</Stack>
-</Sheet>
+<Sheet
+    variant="outlined"
+    sx={{
+      maxWidth: 500,
+      borderRadius: "lg",
+      overflow: "hidden"
+    }}
+  >
+    <Box
+      sx={{
+        height: 200,
+        bgcolor: "neutral.100",
+        backgroundImage:
+          "url(https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80)",
+        backgroundSize: "cover",
+        backgroundPosition: "center"
+      }}
+    />
+
+    <Stack
+      spacing={2}
+      sx={{
+        p: 3
+      }}
+    >
+      <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
+        <Stack spacing={1}>
+          <Typography level="title-lg">React 18의 새로운 기능들</Typography>
+          <Typography
+            level="body-sm"
+            sx={{
+              color: "text.secondary"
+            }}
+          >
+            2024년 1월 15일 • 5분 읽기
+          </Typography>
+        </Stack>
+        <IconButton
+          variant="plain"
+          size="sm"
+          sx={{
+            color: "warning.500"
+          }}
+        >
+          <StarIcon />
+        </IconButton>
+      </Stack>
+
+      <Typography level="body-md">
+        React 18에서 도입된 Concurrent Features와 새로운 Hooks에 대해 자세히 알아보겠습니다.
+        Suspense, useTransition, useDeferredValue 등의 새로운 기능들이 어떻게 사용자 경험을
+        개선하는지 살펴보겠습니다.
+      </Typography>
+
+      <Stack direction="row" spacing={1}>
+        <Chip size="sm" variant="outlined">
+          React
+        </Chip>
+        <Chip size="sm" variant="outlined">
+          JavaScript
+        </Chip>
+        <Chip size="sm" variant="outlined">
+          개발
+        </Chip>
+      </Stack>
+
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Stack direction="row" spacing={1} alignItems="center">
+          <Avatar size="sm" src="https://i.pravatar.cc/32?img=2" />
+          <Typography level="body-sm">김개발</Typography>
+        </Stack>
+
+        <Stack direction="row" spacing={1}>
+          <Button size="sm" variant="plain" startDecorator={<FavoriteIcon />}>
+            24
+          </Button>
+          <Button size="sm" variant="plain" startDecorator={<ShareIcon />}>
+            공유
+          </Button>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Sheet>
 ```
 
 ## Notification Panel
@@ -334,32 +427,42 @@ Combine Sheet with images, chips, and actions for article-style layouts.
 Use `variant="soft"` with a semantic color to create attention-grabbing notification banners.
 
 ```tsx
-<Sheet variant="soft" color="primary" sx={{
-  maxWidth: 400,
-  borderRadius: 'lg',
-  p: 3
-}}>
-<Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={2}>
-  <Stack spacing={1}>
-    <Typography level="title-md">새로운 알림이 있습니다</Typography>
-    <Typography level="body-sm">프로젝트에 새로운 댓글이 달렸습니다. 확인해보시겠습니까?</Typography>
-  </Stack>
-  <IconButton variant="plain" size="sm">
-    <CloseIcon />
-  </IconButton>
-</Stack>
-
-<Stack direction="row" spacing={2} sx={{
-  mt: 3
-}}>
-<Button size="sm" variant="solid">
-  확인하기
-</Button>
-<Button size="sm" variant="outlined">
-  나중에
-</Button>
-</Stack>
-</Sheet>
+<Sheet
+    variant="soft"
+    color="primary"
+    sx={{
+      maxWidth: 400,
+      borderRadius: "lg",
+      p: 3
+    }}
+  >
+    <Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={2}>
+      <Stack spacing={1}>
+        <Typography level="title-md">새로운 알림이 있습니다</Typography>
+        <Typography level="body-sm">
+          프로젝트에 새로운 댓글이 달렸습니다. 확인해보시겠습니까?
+        </Typography>
+      </Stack>
+      <IconButton variant="plain" size="sm">
+        <CloseIcon />
+      </IconButton>
+    </Stack>
+
+    <Stack
+      direction="row"
+      spacing={2}
+      sx={{
+        mt: 3
+      }}
+    >
+      <Button size="sm" variant="solid">
+        확인하기
+      </Button>
+      <Button size="sm" variant="outlined">
+        나중에
+      </Button>
+    </Stack>
+  </Sheet>
 ```
 
 ## Stats Cards
@@ -367,77 +470,106 @@ Use `variant="soft"` with a semantic color to create attention-grabbing notifica
 Multiple Sheet instances arranged side by side make effective dashboard stat widgets.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Sheet variant="outlined" sx={{
-  minWidth: 200,
-  borderRadius: 'lg',
-  p: 3
-}}>
-<Stack spacing={1}>
-  <Typography level="body-sm" sx={{
-    color: 'text.secondary'
-  }}>
-  총 사용자
-</Typography>
-<Typography level="h2" color="primary">
-  1,234
-</Typography>
-<Typography level="body-xs" sx={{
-  color: 'success.600'
-}}>
-+12% 증가
-</Typography>
-</Stack>
-</Sheet>
-
-<Sheet variant="outlined" sx={{
-  minWidth: 200,
-  borderRadius: 'lg',
-  p: 3
-}}>
-<Stack spacing={1}>
-  <Typography level="body-sm" sx={{
-    color: 'text.secondary'
-  }}>
-  매출
-</Typography>
-<Typography level="h2" color="primary">
-  ₩5.6M
-</Typography>
-<Typography level="body-xs" sx={{
-  color: 'success.600'
-}}>
-+8% 증가
-</Typography>
-</Stack>
-</Sheet>
-
-<Sheet variant="outlined" sx={{
-  minWidth: 200,
-  borderRadius: 'lg',
-  p: 3
-}}>
-<Stack spacing={1}>
-  <Typography level="body-sm" sx={{
-    color: 'text.secondary'
-  }}>
-  주문 수
-</Typography>
-<Typography level="h2" color="primary">
-  789
-</Typography>
-<Typography level="body-xs" sx={{
-  color: 'danger.600'
-}}>
--3% 감소
-</Typography>
-</Stack>
-</Sheet>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Sheet
+      variant="outlined"
+      sx={{
+        minWidth: 200,
+        borderRadius: "lg",
+        p: 3
+      }}
+    >
+      <Stack spacing={1}>
+        <Typography
+          level="body-sm"
+          sx={{
+            color: "text.secondary"
+          }}
+        >
+          총 사용자
+        </Typography>
+        <Typography level="h2" color="primary">
+          1,234
+        </Typography>
+        <Typography
+          level="body-xs"
+          sx={{
+            color: "success.600"
+          }}
+        >
+          +12% 증가
+        </Typography>
+      </Stack>
+    </Sheet>
+
+    <Sheet
+      variant="outlined"
+      sx={{
+        minWidth: 200,
+        borderRadius: "lg",
+        p: 3
+      }}
+    >
+      <Stack spacing={1}>
+        <Typography
+          level="body-sm"
+          sx={{
+            color: "text.secondary"
+          }}
+        >
+          매출
+        </Typography>
+        <Typography level="h2" color="primary">
+          ₩5.6M
+        </Typography>
+        <Typography
+          level="body-xs"
+          sx={{
+            color: "success.600"
+          }}
+        >
+          +8% 증가
+        </Typography>
+      </Stack>
+    </Sheet>
+
+    <Sheet
+      variant="outlined"
+      sx={{
+        minWidth: 200,
+        borderRadius: "lg",
+        p: 3
+      }}
+    >
+      <Stack spacing={1}>
+        <Typography
+          level="body-sm"
+          sx={{
+            color: "text.secondary"
+          }}
+        >
+          주문 수
+        </Typography>
+        <Typography level="h2" color="primary">
+          789
+        </Typography>
+        <Typography
+          level="body-xs"
+          sx={{
+            color: "danger.600"
+          }}
+        >
+          -3% 감소
+        </Typography>
+      </Stack>
+    </Sheet>
+  </div>
 ```
 
 ## Form Sheet
@@ -445,87 +577,108 @@ Multiple Sheet instances arranged side by side make effective dashboard stat wid
 Wrap form elements inside a Sheet to create visually contained form sections.
 
 ```tsx
-<Sheet variant="outlined" sx={{
-  maxWidth: 400,
-  borderRadius: 'lg',
-  p: 4
-}}>
-<Stack spacing={3}>
-  <Stack spacing={1}>
-    <Typography level="title-lg">문의하기</Typography>
-    <Typography level="body-sm" sx={{
-      color: 'text.secondary'
-    }}>
-    궁금한 점이 있으시면 언제든지 연락해 주세요.
-  </Typography>
-</Stack>
-
-<Stack spacing={2}>
-  <Stack spacing={1}>
-    <Typography level="body-sm" fontWeight="500">
-      이름
-    </Typography>
-    <Box sx={{
-      p: 2,
-      border: '1px solid',
-      borderColor: 'divider',
-      borderRadius: 'sm',
-      bgcolor: 'background.level1'
-    }}>
-    <Typography level="body-sm" sx={{
-      color: 'text.secondary'
-    }}>
-    이름을 입력하세요
-  </Typography>
-</Box>
-</Stack>
-
-<Stack spacing={1}>
-  <Typography level="body-sm" fontWeight="500">
-    이메일
-  </Typography>
-  <Box sx={{
-    p: 2,
-    border: '1px solid',
-    borderColor: 'divider',
-    borderRadius: 'sm',
-    bgcolor: 'background.level1'
-  }}>
-  <Typography level="body-sm" sx={{
-    color: 'text.secondary'
-  }}>
-  이메일을 입력하세요
-</Typography>
-</Box>
-</Stack>
-
-<Stack spacing={1}>
-  <Typography level="body-sm" fontWeight="500">
-    메시지
-  </Typography>
-  <Box sx={{
-    p: 2,
-    minHeight: 100,
-    border: '1px solid',
-    borderColor: 'divider',
-    borderRadius: 'sm',
-    bgcolor: 'background.level1'
-  }}>
-  <Typography level="body-sm" sx={{
-    color: 'text.secondary'
-  }}>
-  메시지를 입력하세요
-</Typography>
-</Box>
-</Stack>
-</Stack>
-
-<Stack direction="row" spacing={2} justifyContent="flex-end">
-  <Button variant="outlined">취소</Button>
-  <Button>전송</Button>
-</Stack>
-</Stack>
-</Sheet>
+<Sheet
+    variant="outlined"
+    sx={{
+      maxWidth: 400,
+      borderRadius: "lg",
+      p: 4
+    }}
+  >
+    <Stack spacing={3}>
+      <Stack spacing={1}>
+        <Typography level="title-lg">문의하기</Typography>
+        <Typography
+          level="body-sm"
+          sx={{
+            color: "text.secondary"
+          }}
+        >
+          궁금한 점이 있으시면 언제든지 연락해 주세요.
+        </Typography>
+      </Stack>
+
+      <Stack spacing={2}>
+        <Stack spacing={1}>
+          <Typography level="body-sm" fontWeight="500">
+            이름
+          </Typography>
+          <Box
+            sx={{
+              p: 2,
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: "sm",
+              bgcolor: "background.level1"
+            }}
+          >
+            <Typography
+              level="body-sm"
+              sx={{
+                color: "text.secondary"
+              }}
+            >
+              이름을 입력하세요
+            </Typography>
+          </Box>
+        </Stack>
+
+        <Stack spacing={1}>
+          <Typography level="body-sm" fontWeight="500">
+            이메일
+          </Typography>
+          <Box
+            sx={{
+              p: 2,
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: "sm",
+              bgcolor: "background.level1"
+            }}
+          >
+            <Typography
+              level="body-sm"
+              sx={{
+                color: "text.secondary"
+              }}
+            >
+              이메일을 입력하세요
+            </Typography>
+          </Box>
+        </Stack>
+
+        <Stack spacing={1}>
+          <Typography level="body-sm" fontWeight="500">
+            메시지
+          </Typography>
+          <Box
+            sx={{
+              p: 2,
+              minHeight: 100,
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: "sm",
+              bgcolor: "background.level1"
+            }}
+          >
+            <Typography
+              level="body-sm"
+              sx={{
+                color: "text.secondary"
+              }}
+            >
+              메시지를 입력하세요
+            </Typography>
+          </Box>
+        </Stack>
+      </Stack>
+
+      <Stack direction="row" spacing={2} justifyContent="flex-end">
+        <Button variant="outlined">취소</Button>
+        <Button>전송</Button>
+      </Stack>
+    </Stack>
+  </Sheet>
 ```
 
 ## Nested Sheets
@@ -533,70 +686,105 @@ Wrap form elements inside a Sheet to create visually contained form sections.
 Sheets can be nested to create layered dashboard layouts with distinct visual sections.
 
 ```tsx
-<Sheet variant="outlined" sx={{
-  maxWidth: 600,
-  borderRadius: 'lg',
-  p: 3
-}}>
-<Stack spacing={3}>
-  <Typography level="title-lg">대시보드</Typography>
-
-  <Stack direction="row" spacing={2}>
-    <Sheet variant="soft" color="primary" sx={{
-      flex: 1,
-      p: 2,
-      borderRadius: 'md'
-    }}>
-    <Typography level="body-sm" sx={{
-      color: 'primary.700'
-    }}>
-    활성 사용자
-  </Typography>
-  <Typography level="h3" sx={{
-    color: 'primary.800'
-  }}>
-  2,345
-</Typography>
-</Sheet>
-
-<Sheet variant="soft" color="success" sx={{
-  flex: 1,
-  p: 2,
-  borderRadius: 'md'
-}}>
-<Typography level="body-sm" sx={{
-  color: 'success.700'
-}}>
-완료된 작업
-</Typography>
-<Typography level="h3" sx={{
-  color: 'success.800'
-}}>
-156
-</Typography>
-</Sheet>
-</Stack>
-
-<Sheet variant="soft" sx={{
-  p: 3,
-  borderRadius: 'md'
-}}>
-<Stack spacing={2}>
-  <Typography level="title-md">최근 활동</Typography>
-
-  <Stack spacing={1}>
-    {['새로운 사용자가 가입했습니다', '프로젝트가 완료되었습니다', '댓글이 등록되었습니다'].map(activity => <Box key={activity} sx={{
-      p: 1.5,
-      bgcolor: 'background.body',
-      borderRadius: 'sm'
-    }}>
-    <Typography level="body-sm">{activity}</Typography>
-  </Box>)}
-</Stack>
-</Stack>
-</Sheet>
-</Stack>
-</Sheet>
+<Sheet
+    variant="outlined"
+    sx={{
+      maxWidth: 600,
+      borderRadius: "lg",
+      p: 3
+    }}
+  >
+    <Stack spacing={3}>
+      <Typography level="title-lg">대시보드</Typography>
+
+      <Stack direction="row" spacing={2}>
+        <Sheet
+          variant="soft"
+          color="primary"
+          sx={{
+            flex: 1,
+            p: 2,
+            borderRadius: "md"
+          }}
+        >
+          <Typography
+            level="body-sm"
+            sx={{
+              color: "primary.700"
+            }}
+          >
+            활성 사용자
+          </Typography>
+          <Typography
+            level="h3"
+            sx={{
+              color: "primary.800"
+            }}
+          >
+            2,345
+          </Typography>
+        </Sheet>
+
+        <Sheet
+          variant="soft"
+          color="success"
+          sx={{
+            flex: 1,
+            p: 2,
+            borderRadius: "md"
+          }}
+        >
+          <Typography
+            level="body-sm"
+            sx={{
+              color: "success.700"
+            }}
+          >
+            완료된 작업
+          </Typography>
+          <Typography
+            level="h3"
+            sx={{
+              color: "success.800"
+            }}
+          >
+            156
+          </Typography>
+        </Sheet>
+      </Stack>
+
+      <Sheet
+        variant="soft"
+        sx={{
+          p: 3,
+          borderRadius: "md"
+        }}
+      >
+        <Stack spacing={2}>
+          <Typography level="title-md">최근 활동</Typography>
+
+          <Stack spacing={1}>
+            {[
+              "새로운 사용자가 가입했습니다",
+              "프로젝트가 완료되었습니다",
+              "댓글이 등록되었습니다"
+            ].map((activity) => (
+              <Box
+                key={activity}
+                sx={{
+                  p: 1.5,
+                  bgcolor: "background.body",
+                  borderRadius: "sm"
+                }}
+              >
+                <Typography level="body-sm">{activity}</Typography>
+              </Box>
+            ))}
+          </Stack>
+        </Stack>
+      </Sheet>
+    </Stack>
+  </Sheet>
 ```
 
 ## Common Use Cases
@@ -616,11 +804,9 @@ function StatWidget({ label, value, change }) {
         <Typography level="h2" color="primary">
           {value}
         </Typography>
-        <Typography
-          level="body-xs"
-          sx={{ color: change > 0 ? 'success.600' : 'danger.600' }}
-        >
-          {change > 0 ? '+' : ''}{change}% from last month
+        <Typography level="body-xs" sx={{ color: change > 0 ? 'success.600' : 'danger.600' }}>
+          {change > 0 ? '+' : ''}
+          {change}% from last month
         </Typography>
       </Stack>
     </Sheet>
@@ -636,11 +822,7 @@ import WarningIcon from '@mui/icons-material/Warning';
 
 function AlertBanner({ message, onDismiss }) {
   return (
-    <Sheet
-      variant="soft"
-      color="warning"
-      sx={{ borderRadius: 'md', p: 2 }}
-    >
+    <Sheet variant="soft" color="warning" sx={{ borderRadius: 'md', p: 2 }}>
       <Stack direction="row" alignItems="center" spacing={2}>
         <WarningIcon />
         <Typography level="body-md" sx={{ flex: 1 }}>