@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/home-style-props-tables.json

@@ -0,0 +1,116 @@
+{
+  "meta": {
+    "id": "Style Props-Tables",
+    "title": "Tables",
+    "description": "JSX style props for styling table elements.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/tables.mdx",
+    "menu": [
+      "Home",
+      "Style Props",
+      "Tables"
+    ],
+    "route": "home/style-props/tables",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Border Spacing",
+        "href": "#border-spacing",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Border Spacing X",
+        "href": "#border-spacing-x",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Border Spacing Y",
+        "href": "#border-spacing-y",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Caption Side",
+        "href": "#caption-side",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Tables\n\nJSX style props for styling table elements.\n\n## Border Spacing\n\nControl the border-spacing property of a table.\n\n```jsx\n<chakra.table borderSpacing=\"2\">\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `borderSpacing` | `border-spacing` | `spacing`      |\n\n## Border Spacing X\n\nUse the `borderSpacingX` prop to set the horizontal border-spacing property of a\ntable.\n\n```jsx\n<chakra.table borderSpacingX=\"2\">\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n```\n\n| Prop             | CSS Property     | Token Category |\n| ---------------- | ---------------- | -------------- |\n| `borderSpacingX` | `border-spacing` | `spacing`      |\n\n## Border Spacing Y\n\nUse the `borderSpacingY` prop to set the vertical border-spacing property of a\ntable.\n\n```jsx\n<chakra.table borderSpacingY=\"2\">\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n```\n\n| Prop             | CSS Property     | Token Category |\n| ---------------- | ---------------- | -------------- |\n| `borderSpacingY` | `border-spacing` | `spacing`      |\n\n## Caption Side\n\nUse the `captionSide` prop to set the side of the caption of a table.\n\n```jsx\n<table>\n  <chakra.caption captionSide=\"bottom\">This is a caption</chakra.caption>\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</table>\n```\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| `captionSide` | `caption-side` | -              |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Tables\n\nJSX style props for styling table elements.\n\n## Border Spacing\n\nControl the border-spacing property of a table.\n\n```jsx\n<chakra.table borderSpacing=\"2\">\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `borderSpacing` | `border-spacing` | `spacing`      |\n\n## Border Spacing X\n\nUse the `borderSpacingX` prop to set the horizontal border-spacing property of a\ntable.\n\n```jsx\n<chakra.table borderSpacingX=\"2\">\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n```\n\n| Prop             | CSS Property     | Token Category |\n| ---------------- | ---------------- | -------------- |\n| `borderSpacingX` | `border-spacing` | `spacing`      |\n\n## Border Spacing Y\n\nUse the `borderSpacingY` prop to set the vertical border-spacing property of a\ntable.\n\n```jsx\n<chakra.table borderSpacingY=\"2\">\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n```\n\n| Prop             | CSS Property     | Token Category |\n| ---------------- | ---------------- | -------------- |\n| `borderSpacingY` | `border-spacing` | `spacing`      |\n\n## Caption Side\n\nUse the `captionSide` prop to set the side of the caption of a table.\n\n```jsx\n<table>\n  <chakra.caption captionSide=\"bottom\">This is a caption</chakra.caption>\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</table>\n```\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| `captionSide` | `caption-side` | -              |\n",
+      "toc": [
+        {
+          "value": "Border Spacing",
+          "href": "#border-spacing",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Border Spacing X",
+          "href": "#border-spacing-x",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Border Spacing Y",
+          "href": "#border-spacing-y",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Caption Side",
+          "href": "#caption-side",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/home-style-props-transforms.json

@@ -0,0 +1,216 @@
+{
+  "meta": {
+    "id": "Style Props-Transforms",
+    "title": "Transforms",
+    "description": "JSX style props for transforming elements.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/transforms.mdx",
+    "menu": [
+      "Home",
+      "Style Props",
+      "Transforms"
+    ],
+    "route": "home/style-props/transforms",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Scale",
+        "href": "#scale",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Scale X",
+        "href": "#scale-x",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Scale Y",
+        "href": "#scale-y",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Rotate",
+        "href": "#rotate",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Rotate X",
+        "href": "#rotate-x",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Rotate Y",
+        "href": "#rotate-y",
+        "depth": 2,
+        "numbering": [
+          1,
+          6
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Translate",
+        "href": "#translate",
+        "depth": 2,
+        "numbering": [
+          1,
+          7
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Translate X",
+        "href": "#translate-x",
+        "depth": 2,
+        "numbering": [
+          1,
+          8
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Translate Y",
+        "href": "#translate-y",
+        "depth": 2,
+        "numbering": [
+          1,
+          9
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Transforms\n\nJSX style props for transforming elements.\n\n## Scale\n\nUse the `scale` prop to control the scale of an element.\n\n```jsx\n<Box scale=\"1.2\" />\n```\n\nWhen the `scale` prop is set to `auto`, the `scaleX` and `scaleY` props are used\nto control the scale of the element.\n\n| Prop    | CSS Property | Token Category |\n| ------- | ------------ | -------------- |\n| `scale` | `scale`      | -              |\n\n## Scale X\n\nUse the `scaleX` prop to control the scaleX property of an element. This\nrequires the `scale` prop to be set to `auto`.\n\n```jsx\n<Box scale=\"auto\" scaleX=\"1.3\" />\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `scaleX` | `--scale-x`  | -              |\n\n## Scale Y\n\nUse the `scaleY` prop to control the scaleY property of an element. This\nrequires the `scale` prop to be set to `auto`.\n\n```jsx\n<Box scale=\"auto\" scaleY=\"0.4\" />\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `scaleY` | `--scale-y`  | -              |\n\n## Rotate\n\nUse the `rotate` prop to control the rotate property of an element.\n\n```jsx\n<Box rotate=\"45deg\" />\n```\n\nWhen the `rotate` prop is set to `auto`, the `rotateX` and `rotateY` props are\nused to control the rotate of the element.\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `rotate` | `rotate`     | -              |\n\n## Rotate X\n\nUse the `rotateX` prop to control the rotateX property of an element.\n\n```jsx\n<Box rotateX=\"45deg\" />\n```\n\n| Prop      | CSS Property | Token Category |\n| --------- | ------------ | -------------- |\n| `rotateX` | `--rotate-x` | -              |\n\n## Rotate Y\n\nUse the `rotateY` prop to control the rotateY property of an element.\n\n```jsx\n<Box rotateY=\"45deg\" />\n```\n\n| Prop      | CSS Property | Token Category |\n| --------- | ------------ | -------------- |\n| `rotateY` | `--rotate-y` | -              |\n\n## Translate\n\nUse the `translate` prop to control the translate property of an element.\n\n```jsx\n<Box translate=\"40px\" />\n<Box translate=\"50% -40%\" />\n```\n\nWhen the `translate` prop is set to `auto`, the `translateX` and `translateY`\nprops are used to control the translate of the element.\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `translate` | `translate`  | -              |\n\n## Translate X\n\nUse the `translateX` prop to control the translateX property of an element. This\nrequires the `translate` prop to be set to `auto`.\n\n```jsx\n// hardcoded values\n<Box translate=\"auto\" translateX=\"50%\" />\n<Box translate=\"auto\" translateX=\"20px\" />\n\n// token values\n<Box translate=\"auto\" translateX=\"4\" />\n<Box translate=\"auto\" translateX=\"-10\" />\n```\n\n| Prop         | CSS Property    | Token Category |\n| ------------ | --------------- | -------------- |\n| `translateX` | `--translate-x` | `spacing`      |\n\n## Translate Y\n\nUse the `translateY` prop to control the translateY property of an element. This\nrequires the `translate` prop to be set to `auto`.\n\n```jsx\n// hardcoded values\n<Box translate=\"auto\" translateY=\"-40%\" />\n<Box translate=\"auto\" translateY=\"4rem\" />\n\n// token values\n<Box translate=\"auto\" translateY=\"4\" />\n<Box translate=\"auto\" translateY=\"-10\" />\n```\n\n| Prop         | CSS Property    | Token Category |\n| ------------ | --------------- | -------------- |\n| `translateY` | `--translate-y` | `spacing`      |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Transforms\n\nJSX style props for transforming elements.\n\n## Scale\n\nUse the `scale` prop to control the scale of an element.\n\n```jsx\n<Box scale=\"1.2\" />\n```\n\nWhen the `scale` prop is set to `auto`, the `scaleX` and `scaleY` props are used\nto control the scale of the element.\n\n| Prop    | CSS Property | Token Category |\n| ------- | ------------ | -------------- |\n| `scale` | `scale`      | -              |\n\n## Scale X\n\nUse the `scaleX` prop to control the scaleX property of an element. This\nrequires the `scale` prop to be set to `auto`.\n\n```jsx\n<Box scale=\"auto\" scaleX=\"1.3\" />\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `scaleX` | `--scale-x`  | -              |\n\n## Scale Y\n\nUse the `scaleY` prop to control the scaleY property of an element. This\nrequires the `scale` prop to be set to `auto`.\n\n```jsx\n<Box scale=\"auto\" scaleY=\"0.4\" />\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `scaleY` | `--scale-y`  | -              |\n\n## Rotate\n\nUse the `rotate` prop to control the rotate property of an element.\n\n```jsx\n<Box rotate=\"45deg\" />\n```\n\nWhen the `rotate` prop is set to `auto`, the `rotateX` and `rotateY` props are\nused to control the rotate of the element.\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `rotate` | `rotate`     | -              |\n\n## Rotate X\n\nUse the `rotateX` prop to control the rotateX property of an element.\n\n```jsx\n<Box rotateX=\"45deg\" />\n```\n\n| Prop      | CSS Property | Token Category |\n| --------- | ------------ | -------------- |\n| `rotateX` | `--rotate-x` | -              |\n\n## Rotate Y\n\nUse the `rotateY` prop to control the rotateY property of an element.\n\n```jsx\n<Box rotateY=\"45deg\" />\n```\n\n| Prop      | CSS Property | Token Category |\n| --------- | ------------ | -------------- |\n| `rotateY` | `--rotate-y` | -              |\n\n## Translate\n\nUse the `translate` prop to control the translate property of an element.\n\n```jsx\n<Box translate=\"40px\" />\n<Box translate=\"50% -40%\" />\n```\n\nWhen the `translate` prop is set to `auto`, the `translateX` and `translateY`\nprops are used to control the translate of the element.\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `translate` | `translate`  | -              |\n\n## Translate X\n\nUse the `translateX` prop to control the translateX property of an element. This\nrequires the `translate` prop to be set to `auto`.\n\n```jsx\n// hardcoded values\n<Box translate=\"auto\" translateX=\"50%\" />\n<Box translate=\"auto\" translateX=\"20px\" />\n\n// token values\n<Box translate=\"auto\" translateX=\"4\" />\n<Box translate=\"auto\" translateX=\"-10\" />\n```\n\n| Prop         | CSS Property    | Token Category |\n| ------------ | --------------- | -------------- |\n| `translateX` | `--translate-x` | `spacing`      |\n\n## Translate Y\n\nUse the `translateY` prop to control the translateY property of an element. This\nrequires the `translate` prop to be set to `auto`.\n\n```jsx\n// hardcoded values\n<Box translate=\"auto\" translateY=\"-40%\" />\n<Box translate=\"auto\" translateY=\"4rem\" />\n\n// token values\n<Box translate=\"auto\" translateY=\"4\" />\n<Box translate=\"auto\" translateY=\"-10\" />\n```\n\n| Prop         | CSS Property    | Token Category |\n| ------------ | --------------- | -------------- |\n| `translateY` | `--translate-y` | `spacing`      |\n",
+      "toc": [
+        {
+          "value": "Scale",
+          "href": "#scale",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scale X",
+          "href": "#scale-x",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scale Y",
+          "href": "#scale-y",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Rotate",
+          "href": "#rotate",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Rotate X",
+          "href": "#rotate-x",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Rotate Y",
+          "href": "#rotate-y",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Translate",
+          "href": "#translate",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Translate X",
+          "href": "#translate-x",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Translate Y",
+          "href": "#translate-y",
+          "depth": 2,
+          "numbering": [
+            1,
+            9
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/home-style-props-transitions.json

@@ -0,0 +1,216 @@
+{
+  "meta": {
+    "id": "Style Props-Transitions",
+    "title": "Transitions",
+    "description": "JSX style props for controlling an element's transition and animation.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/transitions.mdx",
+    "menu": [
+      "Home",
+      "Style Props",
+      "Transitions"
+    ],
+    "route": "home/style-props/transitions",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Transition",
+        "href": "#transition",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Transition Timing Function",
+        "href": "#transition-timing-function",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Transition Duration",
+        "href": "#transition-duration",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Transition Delay",
+        "href": "#transition-delay",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Animation",
+        "href": "#animation",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Animation Name",
+        "href": "#animation-name",
+        "depth": 2,
+        "numbering": [
+          1,
+          6
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Animation Timing Function",
+        "href": "#animation-timing-function",
+        "depth": 2,
+        "numbering": [
+          1,
+          7
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Animation Duration",
+        "href": "#animation-duration",
+        "depth": 2,
+        "numbering": [
+          1,
+          8
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Animation Delay",
+        "href": "#animation-delay",
+        "depth": 2,
+        "numbering": [
+          1,
+          9
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Transitions\n\nJSX style props for controlling an element's transition and animation.\n\n## Transition\n\nUse the `transition` prop to control the transition of an element.\n\n```jsx\n// hardcoded value\n<Box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"background 0.2s ease-in-out\">\n  Hover me\n</Box>\n\n// shortcut value\n<Box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"backgrounds\">\n  Hover me\n</Box>\n```\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- |\n| `transition` | `transition` | -              |\n\n## Transition Timing Function\n\nUse the `transitionTimingFunction` prop to control the timing function of a\ntransition.\n\n```jsx\n<Box\n  bg=\"red.400\"\n  _hover={{ bg: \"red.500\" }}\n  transition=\"backgrounds\"\n  transitionTimingFunction=\"ease-in-out\"\n>\n  Hover me\n</Box>\n```\n\n| Prop                       | CSS Property                 | Token Category |\n| -------------------------- | ---------------------------- | -------------- |\n| `transitionTimingFunction` | `transition-timing-function` | `easings`      |\n\n## Transition Duration\n\nUse the `transitionDuration` prop to control the duration of a transition.\n\n```jsx\n<Box\n  bg=\"red.400\"\n  _hover={{ bg: \"red.500\" }}\n  transition=\"backgrounds\"\n  transitionDuration=\"fast\"\n>\n  Hover me\n</Box>\n```\n\n| Prop                 | CSS Property          | Token Category |\n| -------------------- | --------------------- | -------------- |\n| `transitionDuration` | `transition-duration` | `durations`    |\n\n## Transition Delay\n\nUse the `transitionDelay` prop to control the delay of a transition.\n\n```jsx\n<Box\n  bg=\"red.400\"\n  _hover={{ bg: \"red.500\" }}\n  transition=\"backgrounds\"\n  transitionDelay=\"fast\"\n>\n  Hover me\n</Box>\n```\n\n| Prop              | CSS Property       | Token Category |\n| ----------------- | ------------------ | -------------- |\n| `transitionDelay` | `transition-delay` | `durations`    |\n\n## Animation\n\nUse the `animation` prop to control the animation of an element.\n\n```jsx\n<Box animation=\"bounce\" />\n```\n\n| Prop        | CSS Property     | Token Category |\n| ----------- | ---------------- | -------------- |\n| `animation` | `animation-name\t` | `animations`   |\n\n## Animation Name\n\nUse the `animationName` prop to control the name of an animation. Compose\nmultiple animation names to create complex animations.\n\n:::info\n\nThe value of the `animation` prop points to a global keyframe animation. Use the\n`theme.keyframes` object to define the animation.\n\n:::\n\n```jsx\n<Box animationName=\"bounce, fade-in\" animationDuration=\"fast\" />\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `animationName` | `animation-name` | `animations`   |\n\n## Animation Timing Function\n\nUse the `animationTimingFunction` prop to control the timing function of an\nanimation.\n\n```jsx\n<Box animation=\"bounce\" animationTimingFunction=\"ease-in-out\" />\n```\n\n| Prop                      | CSS Property                | Token Category |\n| ------------------------- | --------------------------- | -------------- |\n| `animationTimingFunction` | `animation-timing-function` | `easings`      |\n\n## Animation Duration\n\nUse the `animationDuration` prop to control the duration of an animation.\n\n```jsx\n<Box animation=\"bounce\" animationDuration=\"fast\" />\n```\n\n| Prop                | CSS Property         | Token Category |\n| ------------------- | -------------------- | -------------- |\n| `animationDuration` | `animation-duration` | `durations`    |\n\n## Animation Delay\n\nUse the `animationDelay` prop to control the delay of an animation.\n\n```jsx\n<Box animation=\"bounce\" animationDelay=\"fast\" />\n```\n\n| Prop             | CSS Property      | Token Category |\n| ---------------- | ----------------- | -------------- |\n| `animationDelay` | `animation-delay` | `durations`    |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Transitions\n\nJSX style props for controlling an element's transition and animation.\n\n## Transition\n\nUse the `transition` prop to control the transition of an element.\n\n```jsx\n// hardcoded value\n<Box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"background 0.2s ease-in-out\">\n  Hover me\n</Box>\n\n// shortcut value\n<Box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"backgrounds\">\n  Hover me\n</Box>\n```\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- |\n| `transition` | `transition` | -              |\n\n## Transition Timing Function\n\nUse the `transitionTimingFunction` prop to control the timing function of a\ntransition.\n\n```jsx\n<Box\n  bg=\"red.400\"\n  _hover={{ bg: \"red.500\" }}\n  transition=\"backgrounds\"\n  transitionTimingFunction=\"ease-in-out\"\n>\n  Hover me\n</Box>\n```\n\n| Prop                       | CSS Property                 | Token Category |\n| -------------------------- | ---------------------------- | -------------- |\n| `transitionTimingFunction` | `transition-timing-function` | `easings`      |\n\n## Transition Duration\n\nUse the `transitionDuration` prop to control the duration of a transition.\n\n```jsx\n<Box\n  bg=\"red.400\"\n  _hover={{ bg: \"red.500\" }}\n  transition=\"backgrounds\"\n  transitionDuration=\"fast\"\n>\n  Hover me\n</Box>\n```\n\n| Prop                 | CSS Property          | Token Category |\n| -------------------- | --------------------- | -------------- |\n| `transitionDuration` | `transition-duration` | `durations`    |\n\n## Transition Delay\n\nUse the `transitionDelay` prop to control the delay of a transition.\n\n```jsx\n<Box\n  bg=\"red.400\"\n  _hover={{ bg: \"red.500\" }}\n  transition=\"backgrounds\"\n  transitionDelay=\"fast\"\n>\n  Hover me\n</Box>\n```\n\n| Prop              | CSS Property       | Token Category |\n| ----------------- | ------------------ | -------------- |\n| `transitionDelay` | `transition-delay` | `durations`    |\n\n## Animation\n\nUse the `animation` prop to control the animation of an element.\n\n```jsx\n<Box animation=\"bounce\" />\n```\n\n| Prop        | CSS Property     | Token Category |\n| ----------- | ---------------- | -------------- |\n| `animation` | `animation-name\t` | `animations`   |\n\n## Animation Name\n\nUse the `animationName` prop to control the name of an animation. Compose\nmultiple animation names to create complex animations.\n\n:::info\n\nThe value of the `animation` prop points to a global keyframe animation. Use the\n`theme.keyframes` object to define the animation.\n\n:::\n\n```jsx\n<Box animationName=\"bounce, fade-in\" animationDuration=\"fast\" />\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `animationName` | `animation-name` | `animations`   |\n\n## Animation Timing Function\n\nUse the `animationTimingFunction` prop to control the timing function of an\nanimation.\n\n```jsx\n<Box animation=\"bounce\" animationTimingFunction=\"ease-in-out\" />\n```\n\n| Prop                      | CSS Property                | Token Category |\n| ------------------------- | --------------------------- | -------------- |\n| `animationTimingFunction` | `animation-timing-function` | `easings`      |\n\n## Animation Duration\n\nUse the `animationDuration` prop to control the duration of an animation.\n\n```jsx\n<Box animation=\"bounce\" animationDuration=\"fast\" />\n```\n\n| Prop                | CSS Property         | Token Category |\n| ------------------- | -------------------- | -------------- |\n| `animationDuration` | `animation-duration` | `durations`    |\n\n## Animation Delay\n\nUse the `animationDelay` prop to control the delay of an animation.\n\n```jsx\n<Box animation=\"bounce\" animationDelay=\"fast\" />\n```\n\n| Prop             | CSS Property      | Token Category |\n| ---------------- | ----------------- | -------------- |\n| `animationDelay` | `animation-delay` | `durations`    |\n",
+      "toc": [
+        {
+          "value": "Transition",
+          "href": "#transition",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Transition Timing Function",
+          "href": "#transition-timing-function",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Transition Duration",
+          "href": "#transition-duration",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Transition Delay",
+          "href": "#transition-delay",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Animation",
+          "href": "#animation",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Animation Name",
+          "href": "#animation-name",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Animation Timing Function",
+          "href": "#animation-timing-function",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Animation Duration",
+          "href": "#animation-duration",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Animation Delay",
+          "href": "#animation-delay",
+          "depth": 2,
+          "numbering": [
+            1,
+            9
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}