From 7355d61f25fb0ccacf35ee76dfac64ed66cdef18 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 13 May 2025 10:30:32 +0900
Subject: [PATCH 1/3] Fix Devup UI docs

- add instructions to Devup UI Docs pages. - Overview, Installation, Features, API.
---
 .../src/app/(detail)/docs/api/box/page.mdx    |   13 +-
 .../src/app/(detail)/docs/api/button/page.mdx |    9 +-
 .../src/app/(detail)/docs/api/center/page.mdx |   18 +-
 .../src/app/(detail)/docs/api/css/page.mdx    |   36 +-
 .../src/app/(detail)/docs/api/flex/page.mdx   |    9 +-
 .../src/app/(detail)/docs/api/grid/page.mdx   |   19 +-
 .../(detail)/docs/api/group-selector/page.mdx |   10 +-
 .../src/app/(detail)/docs/api/image/page.mdx  |    9 +-
 .../src/app/(detail)/docs/api/input/page.mdx  |    9 +-
 .../app/(detail)/docs/api/selector/page.mdx   |  153 +-
 .../(detail)/docs/api/style-props/page.mdx    | 2885 ++++++++++++-----
 .../src/app/(detail)/docs/api/text/page.mdx   |   16 +-
 .../app/(detail)/docs/api/v-stack/page.mdx    |   24 +-
 .../app/(detail)/docs/installation/page.mdx   |    2 +-
 14 files changed, 2309 insertions(+), 903 deletions(-)

diff --git a/apps/landing/src/app/(detail)/docs/api/box/page.mdx b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
index 18cbc723..201952e7 100644
--- a/apps/landing/src/app/(detail)/docs/api/box/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Box",
+  title: 'Box',
 }
 
 # Box
@@ -8,23 +8,22 @@ The `Box` component is a layout primitive that can be used to create any kind of
 
 It is just a `div` with some styles.
 
-
 ## How to use
 
 ```jsx
 // Before
-<Box bg={"red"}/>
+<Box bg={"red"} />
 
 // After
-<div className="d0"/>
+<div className="d0" />
 ```
 
-You can use the as prop to change the element type.
+You can use the `as` prop to change the element type.
 
 ```jsx
 // Before
-<Box as="span"/>
+<Box as="span" />
 
 // After
-<span class="d0"/>
+<span className="d0" />
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/button/page.mdx b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
index 47dde394..fc8079ee 100644
--- a/apps/landing/src/app/(detail)/docs/api/button/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
@@ -1,16 +1,17 @@
 export const metadata = {
-    title: "Button",
+  title: 'Button',
 }
 
 # Button
 
-The Button component is a simple button component that can be used to trigger actions.
+The `Button` component is a simple button component that can be used to trigger actions.
 
+## How to use
 
 ```jsx
 // Before
-<Button bg={"red"}/>
+<Button bg={"red"} />
 
 // After
-<button className="d0"/>
+<button className="d0" />
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/center/page.mdx b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
index c77a7d28..03a3963b 100644
--- a/apps/landing/src/app/(detail)/docs/api/center/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Center",
+  title: 'Center',
 }
 
 # Center
@@ -10,10 +10,18 @@ It has a `display: flex` style with `justify-content: center` and `align-items:
 
 ## How to use
 
-```jsx
+````jsx
 // Before
-<Center/>
+<Center>
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+</Center>
 
 // After, It has 3 classes on default
-<div className="d0 d1 d2"/>
-```
+<div className="d3 d4 d5">
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+</div>```
+````
diff --git a/apps/landing/src/app/(detail)/docs/api/css/page.mdx b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
index 08558de5..6c0298c2 100644
--- a/apps/landing/src/app/(detail)/docs/api/css/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
@@ -1,40 +1,38 @@
 export const metadata = {
-    title: "css",
+  title: 'css',
 }
 
 # css
 
-css function is a function that returns a string.
+`css` function is a function that returns a string.
 
-## Usage
+## How to use
 
 ### CSS Literal
-You can use the css function to create a css string.
+
+You can use `css` as a tag function to create a css string. Pass in a string of css properties as an argument, ans it will be converted
+into a class list.
+
 ```jsx
-<any css={css`
+// Before
+<any className={css`
     color: red;
 `}/>
 
-<any className={"d0"}/>
+// After
+<any className="d0"/>
 ```
 
 ### CSS Object
-You can use the css function to create a css object.
+
+You can also use the css function by passing in a css object as an argument.
+
 ```jsx
+// Before
 <any className={css({
     color: "red"
 })}/>
 
-<any className={"d0"}/>
-```
-
-Also, css function can be used in the style prop. (responsive, pseudo-class, etc.)
-```jsx
-// It works like this
-<any style={css({
-    color: ["red", "blue"],
-    _hover: {
-        color: "green"
-    }
-})}/>
+// After
+<any className="d0" />
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
index 29ed1368..8678163d 100644
--- a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Flex",
+  title: 'Flex',
 }
 
 # Flex
@@ -12,9 +12,8 @@ It has a `display: flex` style by default.
 
 ```jsx
 // Before
-<Flex/>
+<Flex />
 
-// After, It has a class on default
-<div className="d0"/>
+// After, it has a class on default
+<div className="d0" />
 ```
-
diff --git a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
index 39fba296..990a4e4a 100644
--- a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Grid",
+  title: 'Grid',
 }
 
 # Grid
@@ -10,10 +10,19 @@ It has a `display: grid` style by default.
 
 ## How to use
 
-```jsx
+````jsx
 // Before
-<Grid/>
+<Grid>
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+</Grid>
 
 // After, It has a class on default
-<div className="d0"/>
-```
+<div className="d3">
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+</div>
+    ```
+````
diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
index 533a26b6..2614ee54 100644
--- a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
@@ -1,15 +1,17 @@
 export const metadata = {
-    title: "Group Selector",
+  title: 'Group Selector',
 }
 
 # Group Selector
 
-AThe `group` selector is used to apply styles to a group of elements. It is used to apply styles to a group of elements that are siblings of each other.
+The `group` selector is used to apply styles to a group of elements. It is used to apply styles to a group of elements that are siblings of each other.
 
-## Usage
+## How to use
 
 ```jsx
 <div role="group">
-    <Box _groupHover={{bg: "red"}}/>
+  <Box _groupHover={{ bg: 'red' }} />
+  <Box _groupHover={{ bg: 'red' }} />
+  <Box _groupHover={{ bg: 'red' }} />
 </div>
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/image/page.mdx b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
index d23453f0..e180d077 100644
--- a/apps/landing/src/app/(detail)/docs/api/image/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
@@ -1,10 +1,10 @@
 export const metadata = {
-    title: "Image",
+  title: 'Image',
 }
 
 # Image
 
-The `Image` component is a layout primitive that can be used to create any kind of layout.
+The `Image` component is a layout primitive that can be used to render images.
 
 It is just a `img` with some styles.
 
@@ -12,9 +12,8 @@ It is just a `img` with some styles.
 
 ```jsx
 // Before
-<Image src={"https://via.placeholder.com/150"}/>
+<Image src={"https://via.placeholder.com/150"} />
 
 // After
-<img src={"https://via.placeholder.com/150"}/>
+<img src={"https://via.placeholder.com/150"} />
 ```
-
diff --git a/apps/landing/src/app/(detail)/docs/api/input/page.mdx b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
index d390088f..3bc59a05 100644
--- a/apps/landing/src/app/(detail)/docs/api/input/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
@@ -1,10 +1,10 @@
 export const metadata = {
-    title: "Input",
+  title: 'Input',
 }
 
 # Input
 
-The input component is a layout primitive that can be used to create any kind of layout.
+The `input` component is a layout primitive that can be used to read user input.
 
 It is just a `input` with some styles.
 
@@ -12,9 +12,8 @@ It is just a `input` with some styles.
 
 ```jsx
 // Before
-<Input/>
+<Input border={"3px solid black"} />
 
 // After
-<input/>
+<input className="d0" />
 ```
-
diff --git a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
index ecee65db..f7132687 100644
--- a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
@@ -1,75 +1,176 @@
 export const metadata = {
-    title: "Selector",
+  title: 'Selector',
 }
 
 # Selector
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Selector</th>
+      <th>Selector</th>
+      <th>Pseudo-Class</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>_active?</code></td>
+      <td>
+        <code>_active</code>
+      </td>
+      <td>
+        <code>:active</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_checked?</code></td>
+      <td>
+        <code>_checked</code>
+      </td>
+      <td>
+        <code>:checked</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_default?</code></td>
+      <td>
+        <code>_default</code>
+      </td>
+      <td>
+        <code>:default</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_disabled?</code></td>
+      <td>
+        <code>_disabled</code>
+      </td>
+      <td>
+        <code>:disabled</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_empty?</code></td>
+      <td>
+        <code>_empty</code>
+      </td>
+      <td>
+        <code>:empty</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_enabled?</code></td>
+      <td>
+        <code>_enabled</code>
+      </td>
+      <td>
+        <code>:enabled</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_first?</code></td>
+      <td>
+        <code>_first</code>
+      </td>
+      <td>
+        <code>:first</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_firstChild?</code></td>
+      <td>
+        <code>_firstChild</code>
+      </td>
+      <td>
+        <code>:first-child</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_firstOfType?</code></td>
+      <td>
+        <code>_firstOfType</code>
+      </td>
+      <td>
+        <code>:first-of-type</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_focus?</code></td>
+      <td>
+        <code>_focus</code>
+      </td>
+      <td>
+        <code>:focus</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_focusVisible?</code></td>
+      <td>
+        <code>_focusVisible</code>
+      </td>
+      <td>
+        <code>:focus-visible</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_focusWithin?</code></td>
+      <td>
+        <code>_focusWithin</code>
+      </td>
+      <td>
+        <code>:focus-within</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_hover?</code></td>
+      <td>
+        <code>_hover</code>
+      </td>
+      <td>
+        <code>:hover</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_invalid?</code></td>
+      <td>
+        <code>_invalid</code>
+      </td>
+      <td>
+        <code>:invalid</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_lastChild?</code></td>
+      <td>
+        <code>_lastChild</code>
+      </td>
+      <td>
+        <code>:last-child</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_lastOfType?</code></td>
+      <td>
+        <code>_lastOfType</code>
+      </td>
+      <td>
+        <code>:last-of-type</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_link?</code></td>
+      <td>
+        <code>_link</code>
+      </td>
+      <td>
+        <code>:link</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_onlyChild?</code></td>
+      <td>
+        <code>_onlyChild</code>
+      </td>
+      <td>
+        <code>:only-child</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_optional?</code></td>
+      <td>
+        <code>_optional</code>
+      </td>
+      <td>
+        <code>:optional</code>
+      </td>
     </tr>
     <tr>
-        <td><code>_readOnly?</code></td>
+      <td>
+        <code>_readOnly</code>
+      </td>
+      <td>
+        <code>:read-only</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
diff --git a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
index 5a7150e1..86d3462d 100644
--- a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Style Props",
+  title: 'Style Props',
 }
 
 # Style Props
@@ -7,1652 +7,2907 @@ export const metadata = {
 ## Animation
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>animation</code></td>
-        <td><code>animation</code></td>
+      <td>
+        <code>animation</code>
+      </td>
+      <td>
+        <code>animation</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationComposition</code></td>
-        <td><code>animation-composition</code></td>
+      <td>
+        <code>animationComposition</code>
+      </td>
+      <td>
+        <code>animation-composition</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationDelay</code></td>
-        <td><code>animation-delay</code></td>
+      <td>
+        <code>animationDelay</code>
+      </td>
+      <td>
+        <code>animation-delay</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationDirection</code></td>
-        <td><code>animation-direction</code></td>
+      <td>
+        <code>animationDirection</code>
+      </td>
+      <td>
+        <code>animation-direction</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationDir</code></td>
-        <td><code>animation-direction</code></td>
+      <td>
+        <code>animationDir</code>
+      </td>
+      <td>
+        <code>animation-direction</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationDuration</code></td>
-        <td><code>animation-duration</code></td>
+      <td>
+        <code>animationDuration</code>
+      </td>
+      <td>
+        <code>animation-duration</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationFillMode</code></td>
-        <td><code>animation-fill-mode</code></td>
+      <td>
+        <code>animationFillMode</code>
+      </td>
+      <td>
+        <code>animation-fill-mode</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationIterationCount</code></td>
-        <td><code>animation-iteration-count</code></td>
+      <td>
+        <code>animationIterationCount</code>
+      </td>
+      <td>
+        <code>animation-iteration-count</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationName</code></td>
-        <td><code>animation-name</code></td>
+      <td>
+        <code>animationName</code>
+      </td>
+      <td>
+        <code>animation-name</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationPlayState</code></td>
-        <td><code>animation-play-state</code></td>
+      <td>
+        <code>animationPlayState</code>
+      </td>
+      <td>
+        <code>animation-play-state</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationTimingFunction</code></td>
-        <td><code>animation-timing-function</code></td>
+      <td>
+        <code>animationTimingFunction</code>
+      </td>
+      <td>
+        <code>animation-timing-function</code>
+      </td>
     </tr>
     <tr>
-        <td><code>animationTimeline</code></td>
-        <td><code>animation-timeline</code></td>
+      <td>
+        <code>animationTimeline</code>
+      </td>
+      <td>
+        <code>animation-timeline</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Background
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>background, bg</code></td>
-        <td><code>background</code></td>
+      <td>
+        <code>background, bg</code>
+      </td>
+      <td>
+        <code>background</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundAttachment, bgAttachment</code></td>
-        <td><code>background-attachment</code></td>
+      <td>
+        <code>backgroundAttachment, bgAttachment</code>
+      </td>
+      <td>
+        <code>background-attachment</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundBlendMode</code></td>
-        <td><code>background-blend-mode</code></td>
+      <td>
+        <code>backgroundBlendMode</code>
+      </td>
+      <td>
+        <code>background-blend-mode</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundClip, bgClip</code></td>
-        <td><code>background-clip</code></td>
+      <td>
+        <code>backgroundClip, bgClip</code>
+      </td>
+      <td>
+        <code>background-clip</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundColor, bgColor</code></td>
-        <td><code>background-color</code></td>
+      <td>
+        <code>backgroundColor, bgColor</code>
+      </td>
+      <td>
+        <code>background-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundImage, bgImage</code></td>
-        <td><code>background-image</code></td>
+      <td>
+        <code>backgroundImage, bgImage</code>
+      </td>
+      <td>
+        <code>background-image</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundOrigin, bgOrigin</code></td>
-        <td><code>background-origin</code></td>
+      <td>
+        <code>backgroundOrigin, bgOrigin</code>
+      </td>
+      <td>
+        <code>background-origin</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundPosition, bgPosition</code></td>
-        <td><code>background-position</code></td>
+      <td>
+        <code>backgroundPosition, bgPosition</code>
+      </td>
+      <td>
+        <code>background-position</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundPositionX, bgPositionX</code></td>
-        <td><code>background-position-x</code></td>
+      <td>
+        <code>backgroundPositionX, bgPositionX</code>
+      </td>
+      <td>
+        <code>background-position-x</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundPositionY, bgPositionY</code></td>
-        <td><code>background-position-y</code></td>
+      <td>
+        <code>backgroundPositionY, bgPositionY</code>
+      </td>
+      <td>
+        <code>background-position-y</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundRepeat, bgRepeat</code></td>
-        <td><code>background-repeat</code></td>
+      <td>
+        <code>backgroundRepeat, bgRepeat</code>
+      </td>
+      <td>
+        <code>background-repeat</code>
+      </td>
     </tr>
     <tr>
-        <td><code>backgroundSize, bgSize</code></td>
-        <td><code>background-size</code></td>
+      <td>
+        <code>backgroundSize, bgSize</code>
+      </td>
+      <td>
+        <code>background-size</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Blending
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>backgroundBlendMode</code></td>
-        <td><code>background-blend-mode</code></td>
+      <td>
+        <code>backgroundBlendMode</code>
+      </td>
+      <td>
+        <code>background-blend-mode</code>
+      </td>
     </tr>
     <tr>
-        <td><code>isolation</code></td>
-        <td><code>isolation</code></td>
+      <td>
+        <code>isolation</code>
+      </td>
+      <td>
+        <code>isolation</code>
+      </td>
     </tr>
     <tr>
-        <td><code>mixBlendMode</code></td>
-        <td><code>mix-blend-mode</code></td>
+      <td>
+        <code>mixBlendMode</code>
+      </td>
+      <td>
+        <code>mix-blend-mode</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Border
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>border</code></td>
-        <td><code>border</code></td>
+      <td>
+        <code>border</code>
+      </td>
+      <td>
+        <code>border</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderBottom</code></td>
-        <td><code>border-bottom</code></td>
+      <td>
+        <code>borderBottom</code>
+      </td>
+      <td>
+        <code>border-bottom</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderBottomColor</code></td>
-        <td><code>border-bottom-color</code></td>
+      <td>
+        <code>borderBottomColor</code>
+      </td>
+      <td>
+        <code>border-bottom-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderBottomLeftRadius</code></td>
-        <td><code>border-bottom-left-radius</code></td>
+      <td>
+        <code>borderBottomLeftRadius</code>
+      </td>
+      <td>
+        <code>border-bottom-left-radius</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderBottomRightRadius</code></td>
-        <td><code>border-bottom-right-radius</code></td>
+      <td>
+        <code>borderBottomRightRadius</code>
+      </td>
+      <td>
+        <code>border-bottom-right-radius</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderBottomStyle</code></td>
-        <td><code>border-bottom-style</code></td>
+      <td>
+        <code>borderBottomStyle</code>
+      </td>
+      <td>
+        <code>border-bottom-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderBottomWidth</code></td>
-        <td><code>border-bottom-width</code></td>
+      <td>
+        <code>borderBottomWidth</code>
+      </td>
+      <td>
+        <code>border-bottom-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderCollapse</code></td>
-        <td><code>border-collapse</code></td>
+      <td>
+        <code>borderCollapse</code>
+      </td>
+      <td>
+        <code>border-collapse</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderColor</code></td>
-        <td><code>border-color</code></td>
+      <td>
+        <code>borderColor</code>
+      </td>
+      <td>
+        <code>border-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderImage</code></td>
-        <td><code>border-image</code></td>
+      <td>
+        <code>borderImage</code>
+      </td>
+      <td>
+        <code>border-image</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderImageOutset</code></td>
-        <td><code>border-image-outset</code></td>
+      <td>
+        <code>borderImageOutset</code>
+      </td>
+      <td>
+        <code>border-image-outset</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderImageRepeat</code></td>
-        <td><code>border-image-repeat</code></td>
+      <td>
+        <code>borderImageRepeat</code>
+      </td>
+      <td>
+        <code>border-image-repeat</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderImageSlice</code></td>
-        <td><code>border-image-slice</code></td>
+      <td>
+        <code>borderImageSlice</code>
+      </td>
+      <td>
+        <code>border-image-slice</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderImageSource</code></td>
-        <td><code>border-image-source</code></td>
+      <td>
+        <code>borderImageSource</code>
+      </td>
+      <td>
+        <code>border-image-source</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderImageWidth</code></td>
-        <td><code>border-image-width</code></td>
+      <td>
+        <code>borderImageWidth</code>
+      </td>
+      <td>
+        <code>border-image-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderLeft</code></td>
-        <td><code>border-left</code></td>
+      <td>
+        <code>borderLeft</code>
+      </td>
+      <td>
+        <code>border-left</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderLeftColor</code></td>
-        <td><code>border-left-color</code></td>
+      <td>
+        <code>borderLeftColor</code>
+      </td>
+      <td>
+        <code>border-left-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderLeftStyle</code></td>
-        <td><code>border-left-style</code></td>
+      <td>
+        <code>borderLeftStyle</code>
+      </td>
+      <td>
+        <code>border-left-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderLeftWidth</code></td>
-        <td><code>border-left-width</code></td>
+      <td>
+        <code>borderLeftWidth</code>
+      </td>
+      <td>
+        <code>border-left-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderRadius</code></td>
-        <td><code>border-radius</code></td>
+      <td>
+        <code>borderRadius</code>
+      </td>
+      <td>
+        <code>border-radius</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderRight</code></td>
-        <td><code>border-right</code></td>
+      <td>
+        <code>borderRight</code>
+      </td>
+      <td>
+        <code>border-right</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderRightColor</code></td>
-        <td><code>border-right-color</code></td>
+      <td>
+        <code>borderRightColor</code>
+      </td>
+      <td>
+        <code>border-right-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderRightStyle</code></td>
-        <td><code>border-right-style</code></td>
+      <td>
+        <code>borderRightStyle</code>
+      </td>
+      <td>
+        <code>border-right-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderRightWidth</code></td>
-        <td><code>border-right-width</code></td>
+      <td>
+        <code>borderRightWidth</code>
+      </td>
+      <td>
+        <code>border-right-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderStyle</code></td>
-        <td><code>border-style</code></td>
+      <td>
+        <code>borderStyle</code>
+      </td>
+      <td>
+        <code>border-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderTop</code></td>
-        <td><code>border-top</code></td>
+      <td>
+        <code>borderTop</code>
+      </td>
+      <td>
+        <code>border-top</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderTopColor</code></td>
-        <td><code>border-top-color</code></td>
+      <td>
+        <code>borderTopColor</code>
+      </td>
+      <td>
+        <code>border-top-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderTopLeftRadius</code></td>
-        <td><code>border-top-left-radius</code></td>
+      <td>
+        <code>borderTopLeftRadius</code>
+      </td>
+      <td>
+        <code>border-top-left-radius</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderTopRightRadius</code></td>
-        <td><code>border-top-right-radius</code></td>
+      <td>
+        <code>borderTopRightRadius</code>
+      </td>
+      <td>
+        <code>border-top-right-radius</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderTopStyle</code></td>
-        <td><code>border-top-style</code></td>
+      <td>
+        <code>borderTopStyle</code>
+      </td>
+      <td>
+        <code>border-top-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderTopWidth</code></td>
-        <td><code>border-top-width</code></td>
+      <td>
+        <code>borderTopWidth</code>
+      </td>
+      <td>
+        <code>border-top-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderWidth</code></td>
-        <td><code>border-width</code></td>
+      <td>
+        <code>borderWidth</code>
+      </td>
+      <td>
+        <code>border-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>boxShadow</code></td>
-        <td><code>box-shadow</code></td>
+      <td>
+        <code>boxShadow</code>
+      </td>
+      <td>
+        <code>box-shadow</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
-
 ## Box Align
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>justifyContent</code></td>
-        <td><code>justify-content</code></td>
+      <td>
+        <code>justifyContent</code>
+      </td>
+      <td>
+        <code>justify-content</code>
+      </td>
     </tr>
     <tr>
-        <td><code>alignContent</code></td>
-        <td><code>align-content</code></td>
+      <td>
+        <code>alignContent</code>
+      </td>
+      <td>
+        <code>align-content</code>
+      </td>
     </tr>
     <tr>
-        <td><code>placeContent</code></td>
-        <td><code>place-content</code></td>
+      <td>
+        <code>placeContent</code>
+      </td>
+      <td>
+        <code>place-content</code>
+      </td>
     </tr>
     <tr>
-        <td><code>justifyItems</code></td>
-        <td><code>justify-items</code></td>
+      <td>
+        <code>justifyItems</code>
+      </td>
+      <td>
+        <code>justify-items</code>
+      </td>
     </tr>
     <tr>
-        <td><code>alignItems</code></td>
-        <td><code>align-items</code></td>
+      <td>
+        <code>alignItems</code>
+      </td>
+      <td>
+        <code>align-items</code>
+      </td>
     </tr>
     <tr>
-        <td><code>placeItems</code></td>
-        <td><code>place-items</code></td>
+      <td>
+        <code>placeItems</code>
+      </td>
+      <td>
+        <code>place-items</code>
+      </td>
     </tr>
     <tr>
-        <td><code>justifySelf</code></td>
-        <td><code>justify-self</code></td>
+      <td>
+        <code>justifySelf</code>
+      </td>
+      <td>
+        <code>justify-self</code>
+      </td>
     </tr>
     <tr>
-        <td><code>alignSelf</code></td>
-        <td><code>align-self</code></td>
+      <td>
+        <code>alignSelf</code>
+      </td>
+      <td>
+        <code>align-self</code>
+      </td>
     </tr>
     <tr>
-        <td><code>placeSelf</code></td>
-        <td><code>place-self</code></td>
+      <td>
+        <code>placeSelf</code>
+      </td>
+      <td>
+        <code>place-self</code>
+      </td>
     </tr>
     <tr>
-        <td><code>rowGap</code></td>
-        <td><code>row-gap</code></td>
+      <td>
+        <code>rowGap</code>
+      </td>
+      <td>
+        <code>row-gap</code>
+      </td>
     </tr>
     <tr>
-        <td><code>columnGap</code></td>
-        <td><code>column-gap</code></td>
+      <td>
+        <code>columnGap</code>
+      </td>
+      <td>
+        <code>column-gap</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gap</code></td>
-        <td><code>gap</code></td>
+      <td>
+        <code>gap</code>
+      </td>
+      <td>
+        <code>gap</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Box Model
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>margin</code></td>
-        <td><code>margin</code></td>
+      <td>
+        <code>margin</code>
+      </td>
+      <td>
+        <code>margin</code>
+      </td>
     </tr>
     <tr>
-        <td><code>marginBottom</code></td>
-        <td><code>margin-bottom</code></td>
+      <td>
+        <code>marginBottom</code>
+      </td>
+      <td>
+        <code>margin-bottom</code>
+      </td>
     </tr>
     <tr>
-        <td><code>marginLeft</code></td>
-        <td><code>margin-left</code></td>
+      <td>
+        <code>marginLeft</code>
+      </td>
+      <td>
+        <code>margin-left</code>
+      </td>
     </tr>
     <tr>
-        <td><code>marginRight</code></td>
-        <td><code>margin-right</code></td>
+      <td>
+        <code>marginRight</code>
+      </td>
+      <td>
+        <code>margin-right</code>
+      </td>
     </tr>
     <tr>
-        <td><code>marginTop</code></td>
-        <td><code>margin-top</code></td>
+      <td>
+        <code>marginTop</code>
+      </td>
+      <td>
+        <code>margin-top</code>
+      </td>
     </tr>
     <tr>
-        <td><code>m</code></td>
-        <td><code>margin</code></td>
+      <td>
+        <code>m</code>
+      </td>
+      <td>
+        <code>margin</code>
+      </td>
     </tr>
     <tr>
-        <td><code>mx</code></td>
-        <td><code>margin-left</code>, <code>margin-right</code></td>
+      <td>
+        <code>mx</code>
+      </td>
+      <td>
+        <code>margin-left</code>, <code>margin-right</code>
+      </td>
     </tr>
     <tr>
-        <td><code>my</code></td>
-        <td><code>margin-top</code>, <code>margin-bottom</code></td>
+      <td>
+        <code>my</code>
+      </td>
+      <td>
+        <code>margin-top</code>, <code>margin-bottom</code>
+      </td>
     </tr>
     <tr>
-        <td><code>mb</code></td>
-        <td><code>margin-bottom</code></td>
+      <td>
+        <code>mb</code>
+      </td>
+      <td>
+        <code>margin-bottom</code>
+      </td>
     </tr>
     <tr>
-        <td><code>ml</code></td>
-        <td><code>margin-left</code></td>
+      <td>
+        <code>ml</code>
+      </td>
+      <td>
+        <code>margin-left</code>
+      </td>
     </tr>
     <tr>
-        <td><code>mr</code></td>
-        <td><code>margin-right</code></td>
+      <td>
+        <code>mr</code>
+      </td>
+      <td>
+        <code>margin-right</code>
+      </td>
     </tr>
     <tr>
-        <td><code>mt</code></td>
-        <td><code>margin-top</code></td>
+      <td>
+        <code>mt</code>
+      </td>
+      <td>
+        <code>margin-top</code>
+      </td>
     </tr>
     <tr>
-        <td><code>padding</code></td>
-        <td><code>padding</code></td>
+      <td>
+        <code>padding</code>
+      </td>
+      <td>
+        <code>padding</code>
+      </td>
     </tr>
     <tr>
-        <td><code>paddingBottom</code></td>
-        <td><code>padding-bottom</code></td>
+      <td>
+        <code>paddingBottom</code>
+      </td>
+      <td>
+        <code>padding-bottom</code>
+      </td>
     </tr>
     <tr>
-        <td><code>paddingLeft</code></td>
-        <td><code>padding-left</code></td>
+      <td>
+        <code>paddingLeft</code>
+      </td>
+      <td>
+        <code>padding-left</code>
+      </td>
     </tr>
     <tr>
-        <td><code>paddingRight</code></td>
-        <td><code>padding-right</code></td>
+      <td>
+        <code>paddingRight</code>
+      </td>
+      <td>
+        <code>padding-right</code>
+      </td>
     </tr>
     <tr>
-        <td><code>paddingTop</code></td>
-        <td><code>padding-top</code></td>
+      <td>
+        <code>paddingTop</code>
+      </td>
+      <td>
+        <code>padding-top</code>
+      </td>
     </tr>
     <tr>
-        <td><code>p</code></td>
-        <td><code>padding</code></td>
+      <td>
+        <code>p</code>
+      </td>
+      <td>
+        <code>padding</code>
+      </td>
     </tr>
     <tr>
-        <td><code>px</code></td>
-        <td><code>padding-left</code>, <code>padding-right</code></td>
+      <td>
+        <code>px</code>
+      </td>
+      <td>
+        <code>padding-left</code>, <code>padding-right</code>
+      </td>
     </tr>
     <tr>
-        <td><code>py</code></td>
-        <td><code>padding-top</code>, <code>padding-bottom</code></td>
+      <td>
+        <code>py</code>
+      </td>
+      <td>
+        <code>padding-top</code>, <code>padding-bottom</code>
+      </td>
     </tr>
     <tr>
-        <td><code>pb</code></td>
-        <td><code>padding-bottom</code></td>
+      <td>
+        <code>pb</code>
+      </td>
+      <td>
+        <code>padding-bottom</code>
+      </td>
     </tr>
     <tr>
-        <td><code>pl</code></td>
-        <td><code>padding-left</code></td>
+      <td>
+        <code>pl</code>
+      </td>
+      <td>
+        <code>padding-left</code>
+      </td>
     </tr>
     <tr>
-        <td><code>pr</code></td>
-        <td><code>padding-right</code></td>
+      <td>
+        <code>pr</code>
+      </td>
+      <td>
+        <code>padding-right</code>
+      </td>
     </tr>
     <tr>
-        <td><code>pt</code></td>
-        <td><code>padding-top</code></td>
+      <td>
+        <code>pt</code>
+      </td>
+      <td>
+        <code>padding-top</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## BoxSizing
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>aspectRatio</code></td>
-        <td><code>aspect-ratio</code></td>
+      <td>
+        <code>aspectRatio</code>
+      </td>
+      <td>
+        <code>aspect-ratio</code>
+      </td>
     </tr>
     <tr>
-        <td><code>boxSizing</code></td>
-        <td><code>box-sizing</code></td>
+      <td>
+        <code>boxSizing</code>
+      </td>
+      <td>
+        <code>box-sizing</code>
+      </td>
     </tr>
     <tr>
-        <td><code>containIntrinsicBlockSize</code></td>
-        <td><code>contain-intrinsic-block-size</code></td>
+      <td>
+        <code>containIntrinsicBlockSize</code>
+      </td>
+      <td>
+        <code>contain-intrinsic-block-size</code>
+      </td>
     </tr>
     <tr>
-        <td><code>containIntrinsicHeight</code></td>
-        <td><code>contain-intrinsic-height</code></td>
+      <td>
+        <code>containIntrinsicHeight</code>
+      </td>
+      <td>
+        <code>contain-intrinsic-height</code>
+      </td>
     </tr>
     <tr>
-        <td><code>containIntrinsicInlineSize</code></td>
-        <td><code>contain-intrinsic-inline-size</code></td>
+      <td>
+        <code>containIntrinsicInlineSize</code>
+      </td>
+      <td>
+        <code>contain-intrinsic-inline-size</code>
+      </td>
     </tr>
     <tr>
-        <td><code>containIntrinsicSize</code></td>
-        <td><code>contain-intrinsic-size</code></td>
+      <td>
+        <code>containIntrinsicSize</code>
+      </td>
+      <td>
+        <code>contain-intrinsic-size</code>
+      </td>
     </tr>
     <tr>
-        <td><code>containIntrinsicWidth</code></td>
-        <td><code>contain-intrinsic-width</code></td>
+      <td>
+        <code>containIntrinsicWidth</code>
+      </td>
+      <td>
+        <code>contain-intrinsic-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>height</code></td>
-        <td><code>height</code></td>
+      <td>
+        <code>height</code>
+      </td>
+      <td>
+        <code>height</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maxHeight</code></td>
-        <td><code>max-height</code></td>
+      <td>
+        <code>maxHeight</code>
+      </td>
+      <td>
+        <code>max-height</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maxWidth</code></td>
-        <td><code>max-width</code></td>
+      <td>
+        <code>maxWidth</code>
+      </td>
+      <td>
+        <code>max-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>minHeight</code></td>
-        <td><code>min-height</code></td>
+      <td>
+        <code>minHeight</code>
+      </td>
+      <td>
+        <code>min-height</code>
+      </td>
     </tr>
     <tr>
-        <td><code>minWidth</code></td>
-        <td><code>min-width</code></td>
+      <td>
+        <code>minWidth</code>
+      </td>
+      <td>
+        <code>min-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>width</code></td>
-        <td><code>width</code></td>
+      <td>
+        <code>width</code>
+      </td>
+      <td>
+        <code>width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>h</code></td>
-        <td><code>height</code></td>
+      <td>
+        <code>h</code>
+      </td>
+      <td>
+        <code>height</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maxH</code></td>
-        <td><code>max-height</code></td>
+      <td>
+        <code>maxH</code>
+      </td>
+      <td>
+        <code>max-height</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maxW</code></td>
-        <td><code>max-width</code></td>
+      <td>
+        <code>maxW</code>
+      </td>
+      <td>
+        <code>max-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>minH</code></td>
-        <td><code>min-height</code></td>
+      <td>
+        <code>minH</code>
+      </td>
+      <td>
+        <code>min-height</code>
+      </td>
     </tr>
     <tr>
-        <td><code>minW</code></td>
-        <td><code>min-width</code></td>
+      <td>
+        <code>minW</code>
+      </td>
+      <td>
+        <code>min-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>w</code></td>
-        <td><code>width</code></td>
+      <td>
+        <code>w</code>
+      </td>
+      <td>
+        <code>width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>boxSize</code></td>
-        <td><code>width</code>, <code>height</code></td>
+      <td>
+        <code>boxSize</code>
+      </td>
+      <td>
+        <code>width</code>, <code>height</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Color
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>colorScheme</code></td>
-        <td><code>color-scheme</code></td>
+      <td>
+        <code>colorScheme</code>
+      </td>
+      <td>
+        <code>color-scheme</code>
+      </td>
     </tr>
     <tr>
-        <td><code>forcedColorAdjust</code></td>
-        <td><code>forced-color-adjust</code></td>
+      <td>
+        <code>forcedColorAdjust</code>
+      </td>
+      <td>
+        <code>forced-color-adjust</code>
+      </td>
     </tr>
     <tr>
-        <td><code>printColorAdjust</code></td>
-        <td><code>print-color-adjust</code></td>
+      <td>
+        <code>printColorAdjust</code>
+      </td>
+      <td>
+        <code>print-color-adjust</code>
+      </td>
     </tr>
     <tr>
-        <td><code>color</code></td>
-        <td><code>color</code></td>
+      <td>
+        <code>color</code>
+      </td>
+      <td>
+        <code>color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>opacity</code></td>
-        <td><code>opacity</code></td>
+      <td>
+        <code>opacity</code>
+      </td>
+      <td>
+        <code>opacity</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Display
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>display</code></td>
-        <td><code>display</code></td>
+      <td>
+        <code>display</code>
+      </td>
+      <td>
+        <code>display</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## FilterEffect
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>backdropFilter</code></td>
-        <td><code>backdrop-filter</code></td>
+      <td>
+        <code>backdropFilter</code>
+      </td>
+      <td>
+        <code>backdrop-filter</code>
+      </td>
     </tr>
     <tr>
-        <td><code>filter</code></td>
-        <td><code>filter</code></td>
+      <td>
+        <code>filter</code>
+      </td>
+      <td>
+        <code>filter</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Flex
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>flex</code></td>
-        <td><code>flex</code></td>
+      <td>
+        <code>flex</code>
+      </td>
+      <td>
+        <code>flex</code>
+      </td>
     </tr>
     <tr>
-        <td><code>flexBasis</code></td>
-        <td><code>flex-basis</code></td>
+      <td>
+        <code>flexBasis</code>
+      </td>
+      <td>
+        <code>flex-basis</code>
+      </td>
     </tr>
     <tr>
-        <td><code>flexDirection</code></td>
-        <td><code>flex-direction</code></td>
+      <td>
+        <code>flexDirection</code>
+      </td>
+      <td>
+        <code>flex-direction</code>
+      </td>
     </tr>
     <tr>
-        <td><code>flexFlow</code></td>
-        <td><code>flex-flow</code></td>
+      <td>
+        <code>flexFlow</code>
+      </td>
+      <td>
+        <code>flex-flow</code>
+      </td>
     </tr>
     <tr>
-        <td><code>flexGrow</code></td>
-        <td><code>flex-grow</code></td>
+      <td>
+        <code>flexGrow</code>
+      </td>
+      <td>
+        <code>flex-grow</code>
+      </td>
     </tr>
     <tr>
-        <td><code>flexShrink</code></td>
-        <td><code>flex-shrink</code></td>
+      <td>
+        <code>flexShrink</code>
+      </td>
+      <td>
+        <code>flex-shrink</code>
+      </td>
     </tr>
     <tr>
-        <td><code>flexWrap</code></td>
-        <td><code>flex-wrap</code></td>
+      <td>
+        <code>flexWrap</code>
+      </td>
+      <td>
+        <code>flex-wrap</code>
+      </td>
     </tr>
     <tr>
-        <td><code>order</code></td>
-        <td><code>order</code></td>
+      <td>
+        <code>order</code>
+      </td>
+      <td>
+        <code>order</code>
+      </td>
     </tr>
     <tr>
-        <td><code>flexDir</code></td>
-        <td><code>flex-direction</code></td>
+      <td>
+        <code>flexDir</code>
+      </td>
+      <td>
+        <code>flex-direction</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Font
 
-
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>font</code></td>
-        <td><code>font</code></td>
+      <td>
+        <code>font</code>
+      </td>
+      <td>
+        <code>font</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontFamily</code></td>
-        <td><code>font-family</code></td>
+      <td>
+        <code>fontFamily</code>
+      </td>
+      <td>
+        <code>font-family</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontFeatureSettings</code></td>
-        <td><code>font-feature-settings</code></td>
+      <td>
+        <code>fontFeatureSettings</code>
+      </td>
+      <td>
+        <code>font-feature-settings</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontKerning</code></td>
-        <td><code>font-kerning</code></td>
+      <td>
+        <code>fontKerning</code>
+      </td>
+      <td>
+        <code>font-kerning</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontLanguageOverride</code></td>
-        <td><code>font-language-override</code></td>
+      <td>
+        <code>fontLanguageOverride</code>
+      </td>
+      <td>
+        <code>font-language-override</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontOpticalSizing</code></td>
-        <td><code>font-optical-sizing</code></td>
+      <td>
+        <code>fontOpticalSizing</code>
+      </td>
+      <td>
+        <code>font-optical-sizing</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontSize</code></td>
-        <td><code>font-size</code></td>
+      <td>
+        <code>fontSize</code>
+      </td>
+      <td>
+        <code>font-size</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontSizeAdjust</code></td>
-        <td><code>font-size-adjust</code></td>
+      <td>
+        <code>fontSizeAdjust</code>
+      </td>
+      <td>
+        <code>font-size-adjust</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontStretch</code></td>
-        <td><code>font-stretch</code></td>
+      <td>
+        <code>fontStretch</code>
+      </td>
+      <td>
+        <code>font-stretch</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontStyle</code></td>
-        <td><code>font-style</code></td>
+      <td>
+        <code>fontStyle</code>
+      </td>
+      <td>
+        <code>font-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontSynthesis</code></td>
-        <td><code>font-synthesis</code></td>
+      <td>
+        <code>fontSynthesis</code>
+      </td>
+      <td>
+        <code>font-synthesis</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontVariant</code></td>
-        <td><code>font-variant</code></td>
+      <td>
+        <code>fontVariant</code>
+      </td>
+      <td>
+        <code>font-variant</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontVariantAlternates</code></td>
-        <td><code>font-variant-alternates</code></td>
+      <td>
+        <code>fontVariantAlternates</code>
+      </td>
+      <td>
+        <code>font-variant-alternates</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontVariantCaps</code></td>
-        <td><code>font-variant-caps</code></td>
+      <td>
+        <code>fontVariantCaps</code>
+      </td>
+      <td>
+        <code>font-variant-caps</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontVariantEastAsian</code></td>
-        <td><code>font-variant-east-asian</code></td>
+      <td>
+        <code>fontVariantEastAsian</code>
+      </td>
+      <td>
+        <code>font-variant-east-asian</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontVariantLigatures</code></td>
-        <td><code>font-variant-ligatures</code></td>
+      <td>
+        <code>fontVariantLigatures</code>
+      </td>
+      <td>
+        <code>font-variant-ligatures</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontVariantNumeric</code></td>
-        <td><code>font-variant-numeric</code></td>
+      <td>
+        <code>fontVariantNumeric</code>
+      </td>
+      <td>
+        <code>font-variant-numeric</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontVariantPosition</code></td>
-        <td><code>font-variant-position</code></td>
+      <td>
+        <code>fontVariantPosition</code>
+      </td>
+      <td>
+        <code>font-variant-position</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontVariationSettings</code></td>
-        <td><code>font-variation-settings</code></td>
+      <td>
+        <code>fontVariationSettings</code>
+      </td>
+      <td>
+        <code>font-variation-settings</code>
+      </td>
     </tr>
     <tr>
-        <td><code>fontWeight</code></td>
-        <td><code>font-weight</code></td>
+      <td>
+        <code>fontWeight</code>
+      </td>
+      <td>
+        <code>font-weight</code>
+      </td>
     </tr>
     <tr>
-        <td><code>lineHeight</code></td>
-        <td><code>line-height</code></td>
+      <td>
+        <code>lineHeight</code>
+      </td>
+      <td>
+        <code>line-height</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Grid
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>gridTemplateColumns</code></td>
-        <td><code>grid-template-columns</code></td>
+      <td>
+        <code>gridTemplateColumns</code>
+      </td>
+      <td>
+        <code>grid-template-columns</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridTemplateRows</code></td>
-        <td><code>grid-template-rows</code></td>
+      <td>
+        <code>gridTemplateRows</code>
+      </td>
+      <td>
+        <code>grid-template-rows</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridTemplateAreas</code></td>
-        <td><code>grid-template-areas</code></td>
+      <td>
+        <code>gridTemplateAreas</code>
+      </td>
+      <td>
+        <code>grid-template-areas</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridTemplate</code></td>
-        <td><code>grid-template</code></td>
+      <td>
+        <code>gridTemplate</code>
+      </td>
+      <td>
+        <code>grid-template</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridAutoColumns</code></td>
-        <td><code>grid-auto-columns</code></td>
+      <td>
+        <code>gridAutoColumns</code>
+      </td>
+      <td>
+        <code>grid-auto-columns</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridAutoRows</code></td>
-        <td><code>grid-auto-rows</code></td>
+      <td>
+        <code>gridAutoRows</code>
+      </td>
+      <td>
+        <code>grid-auto-rows</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridAutoFlow</code></td>
-        <td><code>grid-auto-flow</code></td>
+      <td>
+        <code>gridAutoFlow</code>
+      </td>
+      <td>
+        <code>grid-auto-flow</code>
+      </td>
     </tr>
     <tr>
-        <td><code>grid</code></td>
-        <td><code>grid</code></td>
+      <td>
+        <code>grid</code>
+      </td>
+      <td>
+        <code>grid</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridRowStart</code></td>
-        <td><code>grid-row-start</code></td>
+      <td>
+        <code>gridRowStart</code>
+      </td>
+      <td>
+        <code>grid-row-start</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridColumnStart</code></td>
-        <td><code>grid-column-start</code></td>
+      <td>
+        <code>gridColumnStart</code>
+      </td>
+      <td>
+        <code>grid-column-start</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridRowEnd</code></td>
-        <td><code>grid-row-end</code></td>
+      <td>
+        <code>gridRowEnd</code>
+      </td>
+      <td>
+        <code>grid-row-end</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridColumnEnd</code></td>
-        <td><code>grid-column-end</code></td>
+      <td>
+        <code>gridColumnEnd</code>
+      </td>
+      <td>
+        <code>grid-column-end</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridRow</code></td>
-        <td><code>grid-row</code></td>
+      <td>
+        <code>gridRow</code>
+      </td>
+      <td>
+        <code>grid-row</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridColumn</code></td>
-        <td><code>grid-column</code></td>
+      <td>
+        <code>gridColumn</code>
+      </td>
+      <td>
+        <code>grid-column</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridArea</code></td>
-        <td><code>grid-area</code></td>
+      <td>
+        <code>gridArea</code>
+      </td>
+      <td>
+        <code>grid-area</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridRowGap</code></td>
-        <td><code>grid-row-gap</code></td>
+      <td>
+        <code>gridRowGap</code>
+      </td>
+      <td>
+        <code>grid-row-gap</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridColumnGap</code></td>
-        <td><code>grid-column-gap</code></td>
+      <td>
+        <code>gridColumnGap</code>
+      </td>
+      <td>
+        <code>grid-column-gap</code>
+      </td>
     </tr>
     <tr>
-        <td><code>gridGap</code></td>
-        <td><code>grid-gap</code></td>
+      <td>
+        <code>gridGap</code>
+      </td>
+      <td>
+        <code>grid-gap</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Image
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>imageOrientation</code></td>
-        <td><code>image-orientation</code></td>
+      <td>
+        <code>imageOrientation</code>
+      </td>
+      <td>
+        <code>image-orientation</code>
+      </td>
     </tr>
     <tr>
-        <td><code>imageRendering</code></td>
-        <td><code>image-rendering</code></td>
+      <td>
+        <code>imageRendering</code>
+      </td>
+      <td>
+        <code>image-rendering</code>
+      </td>
     </tr>
     <tr>
-        <td><code>imageResolution</code></td>
-        <td><code>image-resolution</code></td>
+      <td>
+        <code>imageResolution</code>
+      </td>
+      <td>
+        <code>image-resolution</code>
+      </td>
     </tr>
     <tr>
-        <td><code>objectFit</code></td>
-        <td><code>object-fit</code></td>
+      <td>
+        <code>objectFit</code>
+      </td>
+      <td>
+        <code>object-fit</code>
+      </td>
     </tr>
     <tr>
-        <td><code>objectPosition</code></td>
-        <td><code>object-position</code></td>
+      <td>
+        <code>objectPosition</code>
+      </td>
+      <td>
+        <code>object-position</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Inline
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>alignmentBaseline</code></td>
-        <td><code>alignment-baseline</code></td>
+      <td>
+        <code>alignmentBaseline</code>
+      </td>
+      <td>
+        <code>alignment-baseline</code>
+      </td>
     </tr>
     <tr>
-        <td><code>dominantBaseline</code></td>
-        <td><code>dominant-baseline</code></td>
+      <td>
+        <code>dominantBaseline</code>
+      </td>
+      <td>
+        <code>dominant-baseline</code>
+      </td>
     </tr>
     <tr>
-        <td><code>initialLetter</code></td>
-        <td><code>initial-letter</code></td>
+      <td>
+        <code>initialLetter</code>
+      </td>
+      <td>
+        <code>initial-letter</code>
+      </td>
     </tr>
     <tr>
-        <td><code>lineHeight</code></td>
-        <td><code>line-height</code></td>
+      <td>
+        <code>lineHeight</code>
+      </td>
+      <td>
+        <code>line-height</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## List
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>listStyleImage</code></td>
-        <td><code>list-style-image</code></td>
+      <td>
+        <code>listStyleImage</code>
+      </td>
+      <td>
+        <code>list-style-image</code>
+      </td>
     </tr>
     <tr>
-        <td><code>listStyleType</code></td>
-        <td><code>list-style-type</code></td>
+      <td>
+        <code>listStyleType</code>
+      </td>
+      <td>
+        <code>list-style-type</code>
+      </td>
     </tr>
     <tr>
-        <td><code>listStylePosition</code></td>
-        <td><code>list-style-position</code></td>
+      <td>
+        <code>listStylePosition</code>
+      </td>
+      <td>
+        <code>list-style-position</code>
+      </td>
     </tr>
     <tr>
-        <td><code>listStyle</code></td>
-        <td><code>list-style</code></td>
+      <td>
+        <code>listStyle</code>
+      </td>
+      <td>
+        <code>list-style</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Masking
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>clipPath</code></td>
-        <td><code>clip-path</code></td>
+      <td>
+        <code>clipPath</code>
+      </td>
+      <td>
+        <code>clip-path</code>
+      </td>
     </tr>
     <tr>
-        <td><code>clipRule</code></td>
-        <td><code>clip-rule</code></td>
+      <td>
+        <code>clipRule</code>
+      </td>
+      <td>
+        <code>clip-rule</code>
+      </td>
     </tr>
     <tr>
-        <td><code>mask</code></td>
-        <td><code>mask</code></td>
+      <td>
+        <code>mask</code>
+      </td>
+      <td>
+        <code>mask</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskBorder</code></td>
-        <td><code>mask-border</code></td>
+      <td>
+        <code>maskBorder</code>
+      </td>
+      <td>
+        <code>mask-border</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskBorderMode</code></td>
-        <td><code>mask-border-mode</code></td>
+      <td>
+        <code>maskBorderMode</code>
+      </td>
+      <td>
+        <code>mask-border-mode</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskBorderOutset</code></td>
-        <td><code>mask-border-outset</code></td>
+      <td>
+        <code>maskBorderOutset</code>
+      </td>
+      <td>
+        <code>mask-border-outset</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskBorderRepeat</code></td>
-        <td><code>mask-border-repeat</code></td>
+      <td>
+        <code>maskBorderRepeat</code>
+      </td>
+      <td>
+        <code>mask-border-repeat</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskBorderSlice</code></td>
-        <td><code>mask-border-slice</code></td>
+      <td>
+        <code>maskBorderSlice</code>
+      </td>
+      <td>
+        <code>mask-border-slice</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskBorderSource</code></td>
-        <td><code>mask-border-source</code></td>
+      <td>
+        <code>maskBorderSource</code>
+      </td>
+      <td>
+        <code>mask-border-source</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskBorderWidth</code></td>
-        <td><code>mask-border-width</code></td>
+      <td>
+        <code>maskBorderWidth</code>
+      </td>
+      <td>
+        <code>mask-border-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskClip</code></td>
-        <td><code>mask-clip</code></td>
+      <td>
+        <code>maskClip</code>
+      </td>
+      <td>
+        <code>mask-clip</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskComposite</code></td>
-        <td><code>mask-composite</code></td>
+      <td>
+        <code>maskComposite</code>
+      </td>
+      <td>
+        <code>mask-composite</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskImage</code></td>
-        <td><code>mask-image</code></td>
+      <td>
+        <code>maskImage</code>
+      </td>
+      <td>
+        <code>mask-image</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskMode</code></td>
-        <td><code>mask-mode</code></td>
+      <td>
+        <code>maskMode</code>
+      </td>
+      <td>
+        <code>mask-mode</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskOrigin</code></td>
-        <td><code>mask-origin</code></td>
+      <td>
+        <code>maskOrigin</code>
+      </td>
+      <td>
+        <code>mask-origin</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskPosition</code></td>
-        <td><code>mask-position</code></td>
+      <td>
+        <code>maskPosition</code>
+      </td>
+      <td>
+        <code>mask-position</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskRepeat</code></td>
-        <td><code>mask-repeat</code></td>
+      <td>
+        <code>maskRepeat</code>
+      </td>
+      <td>
+        <code>mask-repeat</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskSize</code></td>
-        <td><code>mask-size</code></td>
+      <td>
+        <code>maskSize</code>
+      </td>
+      <td>
+        <code>mask-size</code>
+      </td>
     </tr>
     <tr>
-        <td><code>maskType</code></td>
-        <td><code>mask-type</code></td>
+      <td>
+        <code>maskType</code>
+      </td>
+      <td>
+        <code>mask-type</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Motion Path
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>offset</code></td>
-        <td><code>offset</code></td>
+      <td>
+        <code>offset</code>
+      </td>
+      <td>
+        <code>offset</code>
+      </td>
     </tr>
     <tr>
-        <td><code>offsetAnchor</code></td>
-        <td><code>offset-anchor</code></td>
+      <td>
+        <code>offsetAnchor</code>
+      </td>
+      <td>
+        <code>offset-anchor</code>
+      </td>
     </tr>
     <tr>
-        <td><code>offsetDistance</code></td>
-        <td><code>offset-distance</code></td>
+      <td>
+        <code>offsetDistance</code>
+      </td>
+      <td>
+        <code>offset-distance</code>
+      </td>
     </tr>
     <tr>
-        <td><code>offsetPath</code></td>
-        <td><code>offset-path</code></td>
+      <td>
+        <code>offsetPath</code>
+      </td>
+      <td>
+        <code>offset-path</code>
+      </td>
     </tr>
     <tr>
-        <td><code>offsetPosition</code></td>
-        <td><code>offset-position</code></td>
+      <td>
+        <code>offsetPosition</code>
+      </td>
+      <td>
+        <code>offset-position</code>
+      </td>
     </tr>
     <tr>
-        <td><code>offsetRotate</code></td>
-        <td><code>offset-rotate</code></td>
+      <td>
+        <code>offsetRotate</code>
+      </td>
+      <td>
+        <code>offset-rotate</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Overflow
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>overflow</code></td>
-        <td><code>overflow</code></td>
+      <td>
+        <code>overflow</code>
+      </td>
+      <td>
+        <code>overflow</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overflowBlock</code></td>
-        <td><code>overflow-block</code></td>
+      <td>
+        <code>overflowBlock</code>
+      </td>
+      <td>
+        <code>overflow-block</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overflowClipMargin</code></td>
-        <td><code>overflow-clip-margin</code></td>
+      <td>
+        <code>overflowClipMargin</code>
+      </td>
+      <td>
+        <code>overflow-clip-margin</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overflowInline</code></td>
-        <td><code>overflow-inline</code></td>
+      <td>
+        <code>overflowInline</code>
+      </td>
+      <td>
+        <code>overflow-inline</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overflowX</code></td>
-        <td><code>overflow-x</code></td>
+      <td>
+        <code>overflowX</code>
+      </td>
+      <td>
+        <code>overflow-x</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overflowY</code></td>
-        <td><code>overflow-y</code></td>
+      <td>
+        <code>overflowY</code>
+      </td>
+      <td>
+        <code>overflow-y</code>
+      </td>
     </tr>
     <tr>
-        <td><code>scrollBehavior</code></td>
-        <td><code>scroll-behavior</code></td>
+      <td>
+        <code>scrollBehavior</code>
+      </td>
+      <td>
+        <code>scroll-behavior</code>
+      </td>
     </tr>
     <tr>
-        <td><code>scrollbarGutter</code></td>
-        <td><code>scrollbar-gutter</code></td>
+      <td>
+        <code>scrollbarGutter</code>
+      </td>
+      <td>
+        <code>scrollbar-gutter</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textOverflow</code></td>
-        <td><code>text-overflow</code></td>
+      <td>
+        <code>textOverflow</code>
+      </td>
+      <td>
+        <code>text-overflow</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## OverflowBehavior
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>overscrollBehavior</code></td>
-        <td><code>overscroll-behavior</code></td>
+      <td>
+        <code>overscrollBehavior</code>
+      </td>
+      <td>
+        <code>overscroll-behavior</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overscrollBehaviorBlock</code></td>
-        <td><code>overscroll-behavior-block</code></td>
+      <td>
+        <code>overscrollBehaviorBlock</code>
+      </td>
+      <td>
+        <code>overscroll-behavior-block</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overscrollBehaviorInline</code></td>
-        <td><code>overscroll-behavior-inline</code></td>
+      <td>
+        <code>overscrollBehaviorInline</code>
+      </td>
+      <td>
+        <code>overscroll-behavior-inline</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overscrollBehaviorX</code></td>
-        <td><code>overscroll-behavior-x</code></td>
+      <td>
+        <code>overscrollBehaviorX</code>
+      </td>
+      <td>
+        <code>overscroll-behavior-x</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overscrollBehaviorY</code></td>
-        <td><code>overscroll-behavior-y</code></td>
+      <td>
+        <code>overscrollBehaviorY</code>
+      </td>
+      <td>
+        <code>overscroll-behavior-y</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Position
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>top</code></td>
-        <td><code>top</code></td>
+      <td>
+        <code>top</code>
+      </td>
+      <td>
+        <code>top</code>
+      </td>
     </tr>
     <tr>
-        <td><code>right</code></td>
-        <td><code>right</code></td>
+      <td>
+        <code>right</code>
+      </td>
+      <td>
+        <code>right</code>
+      </td>
     </tr>
     <tr>
-        <td><code>bottom</code></td>
-        <td><code>bottom</code></td>
+      <td>
+        <code>bottom</code>
+      </td>
+      <td>
+        <code>bottom</code>
+      </td>
     </tr>
     <tr>
-        <td><code>left</code></td>
-        <td><code>left</code></td>
+      <td>
+        <code>left</code>
+      </td>
+      <td>
+        <code>left</code>
+      </td>
     </tr>
     <tr>
-        <td><code>inset</code></td>
-        <td><code>inset</code></td>
+      <td>
+        <code>inset</code>
+      </td>
+      <td>
+        <code>inset</code>
+      </td>
     </tr>
     <tr>
-        <td><code>insetInline</code></td>
-        <td><code>inset-inline</code></td>
+      <td>
+        <code>insetInline</code>
+      </td>
+      <td>
+        <code>inset-inline</code>
+      </td>
     </tr>
     <tr>
-        <td><code>insetInlineStart</code></td>
-        <td><code>inset-inline-start</code></td>
+      <td>
+        <code>insetInlineStart</code>
+      </td>
+      <td>
+        <code>inset-inline-start</code>
+      </td>
     </tr>
     <tr>
-        <td><code>insetInlineEnd</code></td>
-        <td><code>inset-inline-end</code></td>
+      <td>
+        <code>insetInlineEnd</code>
+      </td>
+      <td>
+        <code>inset-inline-end</code>
+      </td>
     </tr>
     <tr>
-        <td><code>insetBlock</code></td>
-        <td><code>inset-block</code></td>
+      <td>
+        <code>insetBlock</code>
+      </td>
+      <td>
+        <code>inset-block</code>
+      </td>
     </tr>
     <tr>
-        <td><code>insetBlockStart</code></td>
-        <td><code>inset-block-start</code></td>
+      <td>
+        <code>insetBlockStart</code>
+      </td>
+      <td>
+        <code>inset-block-start</code>
+      </td>
     </tr>
     <tr>
-        <td><code>insetBlockEnd</code></td>
-        <td><code>inset-block-end</code></td>
+      <td>
+        <code>insetBlockEnd</code>
+      </td>
+      <td>
+        <code>inset-block-end</code>
+      </td>
     </tr>
     <tr>
-        <td><code>float</code></td>
-        <td><code>float</code></td>
+      <td>
+        <code>float</code>
+      </td>
+      <td>
+        <code>float</code>
+      </td>
     </tr>
     <tr>
-        <td><code>clear</code></td>
-        <td><code>clear</code></td>
+      <td>
+        <code>clear</code>
+      </td>
+      <td>
+        <code>clear</code>
+      </td>
     </tr>
     <tr>
-        <td><code>position</code></td>
-        <td><code>position</code></td>
+      <td>
+        <code>position</code>
+      </td>
+      <td>
+        <code>position</code>
+      </td>
     </tr>
     <tr>
-        <td><code>pos</code></td>
-        <td><code>position</code></td>
+      <td>
+        <code>pos</code>
+      </td>
+      <td>
+        <code>position</code>
+      </td>
     </tr>
     <tr>
-        <td><code>zIndex</code></td>
-        <td><code>z-index</code></td>
+      <td>
+        <code>zIndex</code>
+      </td>
+      <td>
+        <code>z-index</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Scrollbar
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>scrollbarWidth</code></td>
-        <td><code>scrollbar-width</code></td>
+      <td>
+        <code>scrollbarWidth</code>
+      </td>
+      <td>
+        <code>scrollbar-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>scrollbarColor</code></td>
-        <td><code>scrollbar-color</code></td>
+      <td>
+        <code>scrollbarColor</code>
+      </td>
+      <td>
+        <code>scrollbar-color</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Shape
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>shapeOutside</code></td>
-        <td><code>shape-outside</code></td>
+      <td>
+        <code>shapeOutside</code>
+      </td>
+      <td>
+        <code>shape-outside</code>
+      </td>
     </tr>
     <tr>
-        <td><code>shapeMargin</code></td>
-        <td><code>shape-margin</code></td>
+      <td>
+        <code>shapeMargin</code>
+      </td>
+      <td>
+        <code>shape-margin</code>
+      </td>
     </tr>
     <tr>
-        <td><code>shapeImageThreshold</code></td>
-        <td><code>shape-image-threshold</code></td>
+      <td>
+        <code>shapeImageThreshold</code>
+      </td>
+      <td>
+        <code>shape-image-threshold</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Table
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>borderCollapse</code></td>
-        <td><code>border-collapse</code></td>
+      <td>
+        <code>borderCollapse</code>
+      </td>
+      <td>
+        <code>border-collapse</code>
+      </td>
     </tr>
     <tr>
-        <td><code>borderSpacing</code></td>
-        <td><code>border-spacing</code></td>
+      <td>
+        <code>borderSpacing</code>
+      </td>
+      <td>
+        <code>border-spacing</code>
+      </td>
     </tr>
     <tr>
-        <td><code>captionSide</code></td>
-        <td><code>caption-side</code></td>
+      <td>
+        <code>captionSide</code>
+      </td>
+      <td>
+        <code>caption-side</code>
+      </td>
     </tr>
     <tr>
-        <td><code>emptyCells</code></td>
-        <td><code>empty-cells</code></td>
+      <td>
+        <code>emptyCells</code>
+      </td>
+      <td>
+        <code>empty-cells</code>
+      </td>
     </tr>
     <tr>
-        <td><code>tableLayout</code></td>
-        <td><code>table-layout</code></td>
+      <td>
+        <code>tableLayout</code>
+      </td>
+      <td>
+        <code>table-layout</code>
+      </td>
     </tr>
     <tr>
-        <td><code>verticalAlign</code></td>
-        <td><code>vertical-align</code></td>
+      <td>
+        <code>verticalAlign</code>
+      </td>
+      <td>
+        <code>vertical-align</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Text
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>hangingPunctuation</code></td>
-        <td><code>hanging-punctuation</code></td>
+      <td>
+        <code>hangingPunctuation</code>
+      </td>
+      <td>
+        <code>hanging-punctuation</code>
+      </td>
     </tr>
     <tr>
-        <td><code>hyphenateLimitChars</code></td>
-        <td><code>hyphenate-limit-chars</code></td>
+      <td>
+        <code>hyphenateLimitChars</code>
+      </td>
+      <td>
+        <code>hyphenate-limit-chars</code>
+      </td>
     </tr>
     <tr>
-        <td><code>hyphens</code></td>
-        <td><code>hyphens</code></td>
+      <td>
+        <code>hyphens</code>
+      </td>
+      <td>
+        <code>hyphens</code>
+      </td>
     </tr>
     <tr>
-        <td><code>lineBreak</code></td>
-        <td><code>line-break</code></td>
+      <td>
+        <code>lineBreak</code>
+      </td>
+      <td>
+        <code>line-break</code>
+      </td>
     </tr>
     <tr>
-        <td><code>overflowWrap</code></td>
-        <td><code>overflow-wrap</code></td>
+      <td>
+        <code>overflowWrap</code>
+      </td>
+      <td>
+        <code>overflow-wrap</code>
+      </td>
     </tr>
     <tr>
-        <td><code>tabSize</code></td>
-        <td><code>tab-size</code></td>
+      <td>
+        <code>tabSize</code>
+      </td>
+      <td>
+        <code>tab-size</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textAlignLast</code></td>
-        <td><code>text-align-last</code></td>
+      <td>
+        <code>textAlignLast</code>
+      </td>
+      <td>
+        <code>text-align-last</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textJustify</code></td>
-        <td><code>text-justify</code></td>
+      <td>
+        <code>textJustify</code>
+      </td>
+      <td>
+        <code>text-justify</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textSizeAdjust</code></td>
-        <td><code>text-size-adjust</code></td>
+      <td>
+        <code>textSizeAdjust</code>
+      </td>
+      <td>
+        <code>text-size-adjust</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textWrap</code></td>
-        <td><code>text-wrap</code></td>
+      <td>
+        <code>textWrap</code>
+      </td>
+      <td>
+        <code>text-wrap</code>
+      </td>
     </tr>
     <tr>
-        <td><code>whiteSpaceCollapse</code></td>
-        <td><code>white-space-collapse</code></td>
+      <td>
+        <code>whiteSpaceCollapse</code>
+      </td>
+      <td>
+        <code>white-space-collapse</code>
+      </td>
     </tr>
     <tr>
-        <td><code>wordBreak</code></td>
-        <td><code>word-break</code></td>
+      <td>
+        <code>wordBreak</code>
+      </td>
+      <td>
+        <code>word-break</code>
+      </td>
     </tr>
     <tr>
-        <td><code>letterSpacing</code></td>
-        <td><code>letter-spacing</code></td>
+      <td>
+        <code>letterSpacing</code>
+      </td>
+      <td>
+        <code>letter-spacing</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textAlign</code></td>
-        <td><code>text-align</code></td>
+      <td>
+        <code>textAlign</code>
+      </td>
+      <td>
+        <code>text-align</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textDecoration</code></td>
-        <td><code>text-decoration</code></td>
+      <td>
+        <code>textDecoration</code>
+      </td>
+      <td>
+        <code>text-decoration</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textDecorationColor</code></td>
-        <td><code>text-decoration-color</code></td>
+      <td>
+        <code>textDecorationColor</code>
+      </td>
+      <td>
+        <code>text-decoration-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textDecorationLine</code></td>
-        <td><code>text-decoration-line</code></td>
+      <td>
+        <code>textDecorationLine</code>
+      </td>
+      <td>
+        <code>text-decoration-line</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textDecorationStyle</code></td>
-        <td><code>text-decoration-style</code></td>
+      <td>
+        <code>textDecorationStyle</code>
+      </td>
+      <td>
+        <code>text-decoration-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textEmphasis</code></td>
-        <td><code>text-emphasis</code></td>
+      <td>
+        <code>textEmphasis</code>
+      </td>
+      <td>
+        <code>text-emphasis</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textEmphasisColor</code></td>
-        <td><code>text-emphasis-color</code></td>
+      <td>
+        <code>textEmphasisColor</code>
+      </td>
+      <td>
+        <code>text-emphasis-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textEmphasisPosition</code></td>
-        <td><code>text-emphasis-position</code></td>
+      <td>
+        <code>textEmphasisPosition</code>
+      </td>
+      <td>
+        <code>text-emphasis-position</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textEmphasisStyle</code></td>
-        <td><code>text-emphasis-style</code></td>
+      <td>
+        <code>textEmphasisStyle</code>
+      </td>
+      <td>
+        <code>text-emphasis-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textIndent</code></td>
-        <td><code>text-indent</code></td>
+      <td>
+        <code>textIndent</code>
+      </td>
+      <td>
+        <code>text-indent</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textRendering</code></td>
-        <td><code>text-rendering</code></td>
+      <td>
+        <code>textRendering</code>
+      </td>
+      <td>
+        <code>text-rendering</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textShadow</code></td>
-        <td><code>text-shadow</code></td>
+      <td>
+        <code>textShadow</code>
+      </td>
+      <td>
+        <code>text-shadow</code>
+      </td>
     </tr>
     <tr>
-        <td><code>textTransform</code></td>
-        <td><code>text-transform</code></td>
+      <td>
+        <code>textTransform</code>
+      </td>
+      <td>
+        <code>text-transform</code>
+      </td>
     </tr>
     <tr>
-        <td><code>whiteSpace</code></td>
-        <td><code>white-space</code></td>
+      <td>
+        <code>whiteSpace</code>
+      </td>
+      <td>
+        <code>white-space</code>
+      </td>
     </tr>
     <tr>
-        <td><code>wordSpacing</code></td>
-        <td><code>word-spacing</code></td>
+      <td>
+        <code>wordSpacing</code>
+      </td>
+      <td>
+        <code>word-spacing</code>
+      </td>
     </tr>
     <tr>
-        <td><code>content</code></td>
-        <td><code>content</code></td>
+      <td>
+        <code>content</code>
+      </td>
+      <td>
+        <code>content</code>
+      </td>
     </tr>
     <tr>
-        <td><code>typography</code></td>
-        <td>Theme</td>
+      <td>
+        <code>typography</code>
+      </td>
+      <td>Theme</td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Transform
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>backfaceVisibility</code></td>
-        <td><code>backface-visibility</code></td>
+      <td>
+        <code>backfaceVisibility</code>
+      </td>
+      <td>
+        <code>backface-visibility</code>
+      </td>
     </tr>
     <tr>
-        <td><code>perspective</code></td>
-        <td><code>perspective</code></td>
+      <td>
+        <code>perspective</code>
+      </td>
+      <td>
+        <code>perspective</code>
+      </td>
     </tr>
     <tr>
-        <td><code>perspectiveOrigin</code></td>
-        <td><code>perspective-origin</code></td>
+      <td>
+        <code>perspectiveOrigin</code>
+      </td>
+      <td>
+        <code>perspective-origin</code>
+      </td>
     </tr>
     <tr>
-        <td><code>rotate</code></td>
-        <td><code>rotate</code></td>
+      <td>
+        <code>rotate</code>
+      </td>
+      <td>
+        <code>rotate</code>
+      </td>
     </tr>
     <tr>
-        <td><code>scale</code></td>
-        <td><code>scale</code></td>
+      <td>
+        <code>scale</code>
+      </td>
+      <td>
+        <code>scale</code>
+      </td>
     </tr>
     <tr>
-        <td><code>transform</code></td>
-        <td><code>transform</code></td>
+      <td>
+        <code>transform</code>
+      </td>
+      <td>
+        <code>transform</code>
+      </td>
     </tr>
     <tr>
-        <td><code>transformBox</code></td>
-        <td><code>transform-box</code></td>
+      <td>
+        <code>transformBox</code>
+      </td>
+      <td>
+        <code>transform-box</code>
+      </td>
     </tr>
     <tr>
-        <td><code>transformOrigin</code></td>
-        <td><code>transform-origin</code></td>
+      <td>
+        <code>transformOrigin</code>
+      </td>
+      <td>
+        <code>transform-origin</code>
+      </td>
     </tr>
     <tr>
-        <td><code>transformStyle</code></td>
-        <td><code>transform-style</code></td>
+      <td>
+        <code>transformStyle</code>
+      </td>
+      <td>
+        <code>transform-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>translate</code></td>
-        <td><code>translate</code></td>
+      <td>
+        <code>translate</code>
+      </td>
+      <td>
+        <code>translate</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Transition
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>transition</code></td>
-        <td><code>transition</code></td>
+      <td>
+        <code>transition</code>
+      </td>
+      <td>
+        <code>transition</code>
+      </td>
     </tr>
     <tr>
-        <td><code>transitionDelay</code></td>
-        <td><code>transition-delay</code></td>
+      <td>
+        <code>transitionDelay</code>
+      </td>
+      <td>
+        <code>transition-delay</code>
+      </td>
     </tr>
     <tr>
-        <td><code>transitionDuration</code></td>
-        <td><code>transition-duration</code></td>
+      <td>
+        <code>transitionDuration</code>
+      </td>
+      <td>
+        <code>transition-duration</code>
+      </td>
     </tr>
     <tr>
-        <td><code>transitionProperty</code></td>
-        <td><code>transition-property</code></td>
+      <td>
+        <code>transitionProperty</code>
+      </td>
+      <td>
+        <code>transition-property</code>
+      </td>
     </tr>
     <tr>
-        <td><code>transitionTimingFunction</code></td>
-        <td><code>transition-timing-function</code></td>
+      <td>
+        <code>transitionTimingFunction</code>
+      </td>
+      <td>
+        <code>transition-timing-function</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
-
-## Ui
+## UI
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>accentColor</code></td>
-        <td><code>accent-color</code></td>
+      <td>
+        <code>accentColor</code>
+      </td>
+      <td>
+        <code>accent-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>appearance</code></td>
-        <td><code>appearance</code></td>
+      <td>
+        <code>appearance</code>
+      </td>
+      <td>
+        <code>appearance</code>
+      </td>
     </tr>
     <tr>
-        <td><code>caret</code></td>
-        <td><code>caret</code></td>
+      <td>
+        <code>caret</code>
+      </td>
+      <td>
+        <code>caret</code>
+      </td>
     </tr>
     <tr>
-        <td><code>caretColor</code></td>
-        <td><code>caret-color</code></td>
+      <td>
+        <code>caretColor</code>
+      </td>
+      <td>
+        <code>caret-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>caretShape</code></td>
-        <td><code>caret-shape</code></td>
+      <td>
+        <code>caretShape</code>
+      </td>
+      <td>
+        <code>caret-shape</code>
+      </td>
     </tr>
     <tr>
-        <td><code>cursor</code></td>
-        <td><code>cursor</code></td>
+      <td>
+        <code>cursor</code>
+      </td>
+      <td>
+        <code>cursor</code>
+      </td>
     </tr>
     <tr>
-        <td><code>outline</code></td>
-        <td><code>outline</code></td>
+      <td>
+        <code>outline</code>
+      </td>
+      <td>
+        <code>outline</code>
+      </td>
     </tr>
     <tr>
-        <td><code>outlineColor</code></td>
-        <td><code>outline-color</code></td>
+      <td>
+        <code>outlineColor</code>
+      </td>
+      <td>
+        <code>outline-color</code>
+      </td>
     </tr>
     <tr>
-        <td><code>outlineStyle</code></td>
-        <td><code>outline-style</code></td>
+      <td>
+        <code>outlineStyle</code>
+      </td>
+      <td>
+        <code>outline-style</code>
+      </td>
     </tr>
     <tr>
-        <td><code>outlineWidth</code></td>
-        <td><code>outline-width</code></td>
+      <td>
+        <code>outlineWidth</code>
+      </td>
+      <td>
+        <code>outline-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>outlineOffset</code></td>
-        <td><code>outline-offset</code></td>
+      <td>
+        <code>outlineOffset</code>
+      </td>
+      <td>
+        <code>outline-offset</code>
+      </td>
     </tr>
     <tr>
-        <td><code>pointerEvents</code></td>
-        <td><code>pointer-events</code></td>
+      <td>
+        <code>pointerEvents</code>
+      </td>
+      <td>
+        <code>pointer-events</code>
+      </td>
     </tr>
     <tr>
-        <td><code>resize</code></td>
-        <td><code>resize</code></td>
+      <td>
+        <code>resize</code>
+      </td>
+      <td>
+        <code>resize</code>
+      </td>
     </tr>
     <tr>
-        <td><code>userSelect</code></td>
-        <td><code>user-select</code></td>
+      <td>
+        <code>userSelect</code>
+      </td>
+      <td>
+        <code>user-select</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## ViewTransition
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th> Props</th>
-        <th>Style Property</th>
+      <th> Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>viewTransitionName</code></td>
-        <td><code>view-transition-name</code></td>
+      <td>
+        <code>viewTransitionName</code>
+      </td>
+      <td>
+        <code>view-transition-name</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 ## Svg
 
 <table>
-    <thead>
+  <thead>
     <tr>
-        <th>Props</th>
-        <th>Style Property</th>
+      <th>Props</th>
+      <th>Style Property</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     <tr>
-        <td><code>fill</code></td>
-        <td><code>fill</code></td>
+      <td>
+        <code>fill</code>
+      </td>
+      <td>
+        <code>fill</code>
+      </td>
     </tr>
     <tr>
-        <td><code>stroke</code></td>
-        <td><code>stroke</code></td>
+      <td>
+        <code>stroke</code>
+      </td>
+      <td>
+        <code>stroke</code>
+      </td>
     </tr>
     <tr>
-        <td><code>strokeWidth</code></td>
-        <td><code>stroke-width</code></td>
+      <td>
+        <code>strokeWidth</code>
+      </td>
+      <td>
+        <code>stroke-width</code>
+      </td>
     </tr>
     <tr>
-        <td><code>strokeOpacity</code></td>
-        <td><code>stroke-opacity</code></td>
+      <td>
+        <code>strokeOpacity</code>
+      </td>
+      <td>
+        <code>stroke-opacity</code>
+      </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
diff --git a/apps/landing/src/app/(detail)/docs/api/text/page.mdx b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
index 6d1bc469..e23e8c7c 100644
--- a/apps/landing/src/app/(detail)/docs/api/text/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
@@ -1,5 +1,19 @@
 export const metadata = {
-    title: "Text",
+  title: 'Text',
 }
 
 # Text
+
+The `Text` component is a layout primitive that can be used like `span` to create texts.
+
+It is just a `span` with some styles.
+
+## How to use
+
+```jsx
+// Before
+<Text color={'red'}>This is Text component.</Text>
+
+// After
+<span className="d0">This is Text component.</span>
+```
diff --git a/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx b/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
index 006ebe12..5cff7f3c 100644
--- a/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
@@ -1,5 +1,27 @@
 export const metadata = {
-    title: "VStack",
+  title: 'VStack',
 }
 
 # VStack
+
+The `VStack` component is a layout component that uses flexbox to vertically layout its children.
+
+It has a `display: flex` style with `flex-direction: column`.
+
+## How to use
+
+```jsx
+// Before
+<VStack>
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+</VStack>
+
+// After, it has 2 classes on default
+<div className="d3 d4">
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+</div>
+```
diff --git a/apps/landing/src/app/(detail)/docs/installation/page.mdx b/apps/landing/src/app/(detail)/docs/installation/page.mdx
index d76b0ab7..4789d56a 100644
--- a/apps/landing/src/app/(detail)/docs/installation/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/installation/page.mdx
@@ -9,7 +9,7 @@ export const metadata = {
 Install the package in your project directory with npm.
 
 ```bash
-npm install @deuvp-ui/react
+npm install @devup-ui/react
 ```
 
 ### Using Devup UI with Next.js

From 2f140fe01bcd9e55ed068ddedce46a58df355a7f Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 13 May 2025 14:42:34 +0900
Subject: [PATCH 2/3] Add Devup UI Docs

- added instructions for Devup pages.
---
 .../src/app/(detail)/docs/api/box/page.mdx    |   2 +-
 .../src/app/(detail)/docs/api/image/page.mdx  |   2 +-
 .../app/(detail)/docs/api/selector/page.mdx   |   4 +-
 .../(detail)/docs/api/style-props/page.mdx    | 120 +++++++++---------
 .../src/app/(detail)/docs/api/text/page.mdx   |   2 +-
 .../(detail)/docs/devup/breakpoints/page.mdx  |  25 +++-
 .../app/(detail)/docs/devup/colors/page.mdx   |  30 ++++-
 .../(detail)/docs/devup/devup-json/page.mdx   |  35 ++++-
 .../(detail)/docs/devup/figma-plugin/page.mdx |   7 +
 .../(detail)/docs/devup/typography/page.mdx   |  21 ++-
 10 files changed, 179 insertions(+), 69 deletions(-)
 create mode 100644 apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx

diff --git a/apps/landing/src/app/(detail)/docs/api/box/page.mdx b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
index 201952e7..48d2d646 100644
--- a/apps/landing/src/app/(detail)/docs/api/box/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
@@ -22,7 +22,7 @@ You can use the `as` prop to change the element type.
 
 ```jsx
 // Before
-<Box as="span" />
+<Box as={"span"} />
 
 // After
 <span className="d0" />
diff --git a/apps/landing/src/app/(detail)/docs/api/image/page.mdx b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
index e180d077..866d1d58 100644
--- a/apps/landing/src/app/(detail)/docs/api/image/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
@@ -15,5 +15,5 @@ It is just a `img` with some styles.
 <Image src={"https://via.placeholder.com/150"} />
 
 // After
-<img src={"https://via.placeholder.com/150"} />
+<img src="https://via.placeholder.com/150" />
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
index f7132687..14a22c42 100644
--- a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
@@ -7,8 +7,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Selector</th>
-      <th>Pseudo-Class</th>
+      <th width="300px">Selector</th>
+      <th width="300px">Pseudo-Class</th>
     </tr>
   </thead>
   <tbody>
diff --git a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
index 86d3462d..1b184f42 100644
--- a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
@@ -9,8 +9,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -118,8 +118,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -227,8 +227,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -264,8 +264,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -541,8 +541,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -650,8 +650,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -855,8 +855,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1028,8 +1028,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1081,8 +1081,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1102,8 +1102,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1131,8 +1131,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1216,8 +1216,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1397,8 +1397,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1554,8 +1554,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1607,8 +1607,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1652,8 +1652,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1697,8 +1697,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1862,8 +1862,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -1923,8 +1923,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2008,8 +2008,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2061,8 +2061,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2202,8 +2202,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2231,8 +2231,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2268,8 +2268,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2329,8 +2329,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2580,8 +2580,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2673,8 +2673,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2726,8 +2726,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2851,8 +2851,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th> Props</th>
-      <th>Style Property</th>
+      <th width="300px"> Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
@@ -2872,8 +2872,8 @@ export const metadata = {
 <table>
   <thead>
     <tr>
-      <th>Props</th>
-      <th>Style Property</th>
+      <th width="300px">Props</th>
+      <th width="300px">Style Property</th>
     </tr>
   </thead>
   <tbody>
diff --git a/apps/landing/src/app/(detail)/docs/api/text/page.mdx b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
index e23e8c7c..92d8a8b1 100644
--- a/apps/landing/src/app/(detail)/docs/api/text/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
@@ -12,7 +12,7 @@ It is just a `span` with some styles.
 
 ```jsx
 // Before
-<Text color={'red'}>This is Text component.</Text>
+<Text color={"red"}>This is Text component.</Text>
 
 // After
 <span className="d0">This is Text component.</span>
diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
index abac7d91..2c2bb7b8 100644
--- a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
@@ -1,5 +1,28 @@
 export const metadata = {
-    title: "Breakpoints",
+  title: 'Breakpoints',
 }
 
 # Breakpoints
+
+You can add responsive design by using an array of maximum 5 elements. The viewport ranges of each style
+value in the array are listed below:
+
+- 1st element: ~ 479px,
+- 2nd element: 480px ~ 767px,
+- 3rd element: 768px ~ 991px,
+- 4th element: 992px ~ 1279px,
+- 5th element: 1280px ~
+
+## How to use
+
+```jsx
+<Box bg={['red', 'blue', 'green', 'yellow', 'purple']} w={25} h={25}>
+  <Text>Hello</Text>
+</Box>
+```
+
+If any of the five elements are set to `null`, Devup UI uses the previous value for responsive design.
+For example, if the array in the example above is changed into `['red', null, 'green', null, 'purple']`,
+the background color of `Box` component will be red from 0px to 767px, green from 768px to 1279px, purple from 1280px.
+
+If the length of the array is less than 5, Devup UI makes responsive design according to the index of the element.
diff --git a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
index 2a4b8e0c..7d3de62b 100644
--- a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
@@ -1,5 +1,33 @@
 export const metadata = {
-    title: "Colors",
+  title: 'Colors',
 }
 
 # Colors
+
+You can directly pass color values to the primitive components.
+
+```jsx
+<Box bg="#ff0000" w={25} h={25} />
+```
+
+But, when your project gets larger and more complicated, it could be better to use variables to style your project.
+Pass in the variables that you created in `devup.json`.
+
+```json
+{
+  "theme": {
+    "colors": {
+      "light": {
+        "primary": "#FF0000"
+      },
+      "dark": {
+        "primary": "#FF0000"
+      }
+    }
+  }
+}
+```
+
+```jsx
+<Box bg="$primary" w={25} h={25} />
+```
diff --git a/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx b/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
index ec8d0e3e..52c77683 100644
--- a/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
@@ -1,5 +1,38 @@
 export const metadata = {
-    title: "devup.json",
+  title: 'devup.json',
 }
 
 # devup.json
+
+You can use `devup.json` file to create themes. Create `devup.json` at the root of your project.
+The structure of the JSON object should like this:
+
+```json
+{
+  "theme": {
+    "colors": {
+      "light": {
+        "primary": "#6159D4",
+        "secondary": "#85A5F2"
+      },
+      "dark": {
+        "primary": "#737FE4",
+        "secondary": "#2A4586"
+      }
+    },
+    "typography": {
+      "h1": {
+        "fontFamily": "Pretendard",
+        "fontStyle": "normal",
+        "fontWeight": 800,
+        "fontSize": "52px",
+        "lineHeight": 1.3
+      }
+    }
+  }
+}
+```
+
+When you pass in the variables as props, Devup will parse it in accordance with `devup.json` file.
+
+To see examples, check out Colors and Typography pages.
diff --git a/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx b/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx
new file mode 100644
index 00000000..bb2dd907
--- /dev/null
+++ b/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx
@@ -0,0 +1,7 @@
+export const metadata = {
+  title: 'Figma Plugin',
+}
+
+# Figma Plugin
+
+Devup UI provides a plugin for Figma which can convert layers into code snippets.
diff --git a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
index 08629951..c89cdbd1 100644
--- a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
@@ -1,5 +1,24 @@
 export const metadata = {
-    title: "Typography",
+  title: 'Typography',
 }
 
 # Typography
+
+You can create a typography theme in your `devup.json` file and pass variables to `typography` props.
+
+```json
+{
+  "theme": {
+    "typography": {
+      "h1": {
+        "fontSize": "24px",
+        "fontWeight": "bold"
+      }
+    }
+  }
+}
+```
+
+```jsx
+<Text typography="h1">Hello</Text>
+```

From 2f77c461e3278612863ca852d94a7f77e4535c2e Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 13 May 2025 15:45:15 +0900
Subject: [PATCH 3/3] Fix typo

---
 apps/landing/src/app/(detail)/docs/devup/colors/page.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
index 7d3de62b..8d3a6ec5 100644
--- a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
@@ -7,7 +7,7 @@ export const metadata = {
 You can directly pass color values to the primitive components.
 
 ```jsx
-<Box bg="#ff0000" w={25} h={25} />
+<Box bg="#FF0000" w={25} h={25} />
 ```
 
 But, when your project gets larger and more complicated, it could be better to use variables to style your project.