docs: move component-links import to mdx-components

.eslintrc

@@ -3,7 +3,7 @@
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 10,
-    "project": "./tsconfig.json",
+    "project": "tsconfig.json",
     "ecmaFeatures": {
       "jsx": true
     }

website/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "../eslintrc.json",
+  "parserOptions": {
+    "project": "tsconfig.json"
+  }
+}

website/pages/docs/components/accordion.mdx

@@ -7,8 +7,6 @@ description:
   reveal more information.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Accordions display a list of high-level options that can expand/collapse to
 reveal more information.
 

website/pages/docs/components/breadcrumb.mdx

@@ -8,8 +8,6 @@ description:
   many pages or products.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Breadcrumbs, or a breadcrumb navigation, can help enhance how users navigate to
 previous page levels of a website, especially if that website has many pages or
 products.

website/pages/docs/components/close-button.mdx

@@ -8,8 +8,6 @@ description:
   Toasts, Drawers and Modals
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 CloseButton is essentially a button with a close icon. It is used to handle the
 close functionality in feedback and overlay components like
 [Alerts](/docs/feedback/alert), [Toasts](/docs/feedback/toast),

website/pages/docs/components/icon.mdx

@@ -4,9 +4,6 @@ package: "@chakra-ui/icon"
 image: "components/icon.svg"
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-import IconsList from "../../../src/components/icons-list"
-
 Chakra provides multiple ways to use icons in your project:
 
 - [Using the official Chakra UI icon library](#using-the-official-chakra-ui-icons-library)

website/pages/docs/components/link.mdx

@@ -5,8 +5,6 @@ image: "components/link.svg"
 description: Links are accessible elements used primarily for navigation
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Links are accessible elements used primarily for navigation. This component is
 styled to resemble a hyperlink and semantically renders an `<a>`.
 

website/pages/docs/components/tabs.mdx

@@ -8,8 +8,6 @@ decription:
   Pattern.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 An accessible tabs component that provides keyboard interactions and ARIA
 attributes described in the
 [WAI-ARIA Tabs Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel).
@@ -315,9 +313,13 @@ tab by pressing <kbd>Space</kbd> or <kbd>Enter</kbd>.
 
 ### Lazily mounting tab panels
 
-By default, the `Tabs` component renders all tabs content to the DOM, meaning that invisible tabs are still rendered but are hidden by styles.
+By default, the `Tabs` component renders all tabs content to the DOM, meaning
+that invisible tabs are still rendered but are hidden by styles.
 
-If you want to defer rendering of each tab until that tab is selected, you can use the `isLazy` prop. This is useful if your tabs require heavy performance, or make network calls on mount that should only happen when the component is displayed.
+If you want to defer rendering of each tab until that tab is selected, you can
+use the `isLazy` prop. This is useful if your tabs require heavy performance, or
+make network calls on mount that should only happen when the component is
+displayed.
 
 ```jsx
 <Tabs isLazy>

website/pages/docs/components/transitions.mdx

@@ -7,8 +7,6 @@ description:
   to provide simple transitions.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Chakra exports four components `Fade`, `ScaleFade`, `Slide`, and `SlideFade` to
 provide simple transitions.
 

website/pages/docs/components/visually-hidden.mdx

@@ -6,8 +6,6 @@ descsription:
   content from the visual client
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 VisuallyHidden is a common techinique used in web accessibility to hide content
 from the visual client, but keep it readable for screen readers.
 

website/pages/docs/data-display/avatar.mdx

@@ -7,8 +7,6 @@ description:
   picture, initials or fallback icon.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 The Avatar component is used to represent a user, and displays the profile
 picture, initials or fallback icon.
 

website/pages/docs/data-display/badge.mdx

@@ -6,8 +6,6 @@ description:
   Badges are used to highlight an item's status for quick recognition.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Badges are used to highlight an item's status for quick recognition.
 
 <ComponentLinks

website/pages/docs/data-display/code.mdx

@@ -7,8 +7,6 @@ description:
   component with a font family of `mono` for displaying code.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Code is a component used to display inline code. It is composed from the
 [Box](/docs/layout/box) component with a font family of `mono` for displaying
 code.

website/pages/docs/data-display/divider.mdx

@@ -5,8 +5,6 @@ image: "components/divider.svg"
 description: Dividers are used to visually separate content in a list or group.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Dividers are used to visually separate content in a list or group.
 
 <ComponentLinks

website/pages/docs/data-display/image.mdx

@@ -6,8 +6,6 @@ description:
   The Image component is used to display images with support for fallback.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 The Image component is used to display images.
 
 Image composes `Box` so you can use all the style props and add responsive

website/pages/docs/data-display/kbd.mdx

@@ -4,8 +4,6 @@ package: "@chakra-ui/layout"
 image: "components/kbd.svg"
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 The keyboard key component exists to show which key or combination of keys
 performs a given action.
 

website/pages/docs/data-display/list.mdx

@@ -6,8 +6,6 @@ description:
   "List is used to display list items. It renders a <ul> element by default"
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 List is used to display list items. It renders a `<ul>` element by default.
 
 <ComponentLinks
@@ -78,11 +76,11 @@ font size of the list item.
 
 ### List Props
 
-| Name           | Type                             | Default  | Description                             |
-| -------------- | -------------------------------- | -------- | --------------------------------------- |
-| styleType      | `string`                         | `none`   | The CSS value for `list-style-type`     |
-| stylePosition  | `string`                         | `inside` | The CSS value for `list-style-position` |
-| spacing        | `StyledSystem.MarginBottomProps` |          | The space between each list item        |
+| Name          | Type                             | Default  | Description                             |
+| ------------- | -------------------------------- | -------- | --------------------------------------- |
+| styleType     | `string`                         | `none`   | The CSS value for `list-style-type`     |
+| stylePosition | `string`                         | `inside` | The CSS value for `list-style-position` |
+| spacing       | `StyledSystem.MarginBottomProps` |          | The space between each list item        |
 
 ### List Item Props
 

website/pages/docs/data-display/stat.mdx

@@ -6,8 +6,6 @@ description:
   As the name implies, the Stat component is used to display some statistics.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 As the name implies, the Stat component is used to display some statistics.
 
 <ComponentLinks

website/pages/docs/data-display/tag.mdx

@@ -5,8 +5,6 @@ image: "components/tags.svg"
 description: Tag component is used for items that need to be labeled
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Tag component is used for items that need to be labeled, categorized, or
 organized using keywords that describe them.
 

website/pages/docs/feedback/alert.mdx

@@ -6,8 +6,6 @@ description:
   Alerts are used to communicate a state that affects a system, feature or page.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Alerts are used to communicate a state that affects a system, feature or page.
 
 <ComponentLinks
@@ -128,15 +126,17 @@ kinds of layouts. Here's an example of a custom alert style and layout:
 </Alert>
 ```
 
-Alerts can also incorporate other Chakra components. Here's an example of an alert with wrapping description text:
+Alerts can also incorporate other Chakra components. Here's an example of an
+alert with wrapping description text:
 
 ```jsx
 <Alert status="success">
   <AlertIcon />
   <Box flex="1">
     <AlertTitle>Success!</AlertTitle>
     <AlertDescription display="block">
-      Your application has been received. We will review your application and respond within the next 48 hours.
+      Your application has been received. We will review your application and
+      respond within the next 48 hours.
     </AlertDescription>
   </Box>
   <CloseButton position="absolute" right="8px" top="8px" />

website/pages/docs/feedback/circular-progress.mdx

@@ -7,8 +7,6 @@ description:
   indeterminate processes.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Circular Progress is used to indicates the progress for determinate and
 indeterminate processes.
 

website/pages/docs/feedback/progress.mdx

@@ -7,8 +7,6 @@ description:
   time or consists of several steps.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Progress is used to display the progress status for a task that takes a long
 time or consists of several steps.
 

website/pages/docs/feedback/skeleton.mdx

@@ -4,8 +4,6 @@ description: Skeleton is used to display the loading state of some component
 package: "@chakra-ui/skeleton"
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Skeleton is used to display the loading state of some component.
 
 <ComponentLinks

website/pages/docs/feedback/spinner.mdx

@@ -7,8 +7,6 @@ description:
   of change or a result.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Spinners provide a visual cue that an action is processing awaiting a course of
 change or a result.
 

website/pages/docs/feedback/toast.mdx

@@ -5,8 +5,6 @@ image: "components/toast.svg"
 description: VThe toast is used to show alerts on top of an overlay
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 The toast is used to show alerts on top of an overlay. The toast will close
 itself when the close button is clicked, or after a timeout — the default is 5
 seconds. The toast component is used to give feeback to users after an action

website/pages/docs/form/button.mdx

@@ -7,8 +7,6 @@ description:
   form, opening a Dialog, canceling an action, or performing a delete operation.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 The Button component is used to trigger an action or event, such as submitting a
 form, opening a dialog, canceling an action, or performing a delete operation.
 

website/pages/docs/form/checkbox.mdx

@@ -7,8 +7,6 @@ description:
   values from several options.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 The Checkbox component is used in forms when a user needs to select multiple
 values from several options.
 

website/pages/docs/form/editable.mdx

@@ -8,8 +8,6 @@ description:
   it.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Editable Text is used for inline renaming of some text. It appears as normal UI
 text but transforms into a text input field when the user clicks on or focuses
 it.

website/pages/docs/form/form-control.mdx

@@ -6,8 +6,6 @@ description:
   form elements
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 FormControl provides context such as `isInvalid`, `isDisabled`, and `isRequired`
 to form elements.
 
@@ -67,9 +65,7 @@ By passing the `isRequired` props, the `Input` field has `aria-required` set to
 
 ```jsx
 <FormControl id="first-name" isRequired>
-  <FormLabel>
-    First name
-  </FormLabel>
+  <FormLabel>First name</FormLabel>
   <Input placeholder="First name" />
 </FormControl>
 ```

website/pages/docs/form/icon-button.mdx

@@ -4,8 +4,6 @@ package: "@chakra-ui/button"
 description: Icon button renders an icon within in a button
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 IconButton composes the `Button` component except that it renders only an icon.
 
 <ComponentLinks

website/pages/docs/form/input.mdx

@@ -6,8 +6,6 @@ description:
   Input component is a component that is used to get user input in a text field.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 The Input component is a component that is used to get user input in a text
 field.
 

website/pages/docs/form/number-input.mdx

@@ -7,8 +7,6 @@ description:
   controls for incrementing or decrementing numeric values.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 The NumberInput component is similar to the [Input](/docs/form/input) component,
 but it has controls for incrementing or decrementing numeric values.
 

website/pages/docs/form/pin-input.mdx

@@ -7,8 +7,6 @@ description:
   entering sequences of digits quickly.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 The `PinInput` component is similar to the [Input](/docs/form/input) component,
 but it is optimized for entering sequences of digits.
 

website/pages/docs/form/radio.mdx

@@ -6,8 +6,6 @@ description:
   Radios are used when only one choice may be selected in a series of options.
 ---
 
-import ComponentLinks from "../../../src/components/component-links"
-
 Radios are used when only one choice may be selected in a series of options.
 
 <ComponentLinks