chore: format mdx files

.prettierrc

@@ -4,5 +4,14 @@
   "trailingComma": "all",
   "arrowParens": "always",
   "semi": false,
-  "htmlWhitespaceSensitivity": "ignore"
+  "htmlWhitespaceSensitivity": "ignore",
+  "overrides": [
+    {
+      "files": "*.mdx",
+      "options": {
+        "printWidth": 100,
+        "proseWrap": "always"
+      }
+    }
+  ]
 }

website/src/content/pages/components/accordion.mdx

@@ -8,8 +8,7 @@ description: A collapsible component for displaying content in a vertical stack.
 
 ## Anatomy
 
-To set up the avatar correctly, you'll need to understand its anatomy and how we
-name its parts.
+To set up the avatar correctly, you'll need to understand its anatomy and how we name its parts.
 
 > Each part includes a `data-part` attribute to help identify them in the DOM.
 
@@ -19,8 +18,7 @@ name its parts.
 
 ### Multiple Panels Open
 
-For an Accordion that allows keeping multiple panels open, apply the `multiple`
-prop:
+For an Accordion that allows keeping multiple panels open, apply the `multiple` prop:
 
 <Example id="multiple" />
 
@@ -30,7 +28,8 @@ prop:
 
 ## Accessibility
 
-Complies with the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+Complies with the
+[Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
 
 ### Keyboard Support
 

website/src/content/pages/components/avatar.mdx

@@ -8,17 +8,16 @@ description: A graphical representation of the user, often used in profile secti
 
 ## Anatomy
 
-To set up the avatar correctly, you'll need to understand its anatomy and how we
-name its parts.
+To set up the avatar correctly, you'll need to understand its anatomy and how we name its parts.
 
 > Each part includes a `data-part` attribute to help identify them in the DOM.
 
 <Anatomy id="avatar" />
 
 ## Examples
 
-Learn how to use the `Avatar` component in your project. Let's take a look at
-the most basic example:
+Learn how to use the `Avatar` component in your project. Let's take a look at the most basic
+example:
 
 <Example id="basic" />
 

website/src/content/pages/components/carousel.mdx

@@ -8,32 +8,30 @@ description: A slideshow component that cycles through elements.
 
 ## Anatomy
 
-To set up the carousel correctly, you'll need to understand its anatomy and how
-we name its parts.
+To set up the carousel correctly, you'll need to understand its anatomy and how we name its parts.
 
 > Each part includes a `data-part` attribute to help identify them in the DOM.
 
 <Anatomy id="carousel" />
 
 ## Examples
 
-Learn how to use the `Carousel` component in your project. Let's take a look at
-the most basic example:
+Learn how to use the `Carousel` component in your project. Let's take a look at the most basic
+example:
 
 <Example id="basic" />
 
 ### Controlled Carousel
 
-To create a controlled Carousel component, you can manage the state of the
-carousel using the `index` prop and update it when the `onIndexChange` event
-handler is called:
+To create a controlled Carousel component, you can manage the state of the carousel using the
+`index` prop and update it when the `onIndexChange` event handler is called:
 
 <Example id="controlled" />
 
 ### Customizing the Carousel
 
-You can customize the Carousel component by setting various props. Here's an
-example of a customized Carousel:
+You can customize the Carousel component by setting various props. Here's an example of a customized
+Carousel:
 
 <Example id="customized" />
 
@@ -43,4 +41,5 @@ example of a customized Carousel:
 
 ## Accessibility
 
-Complies with the [Carousel WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/).
+Complies with the
+[Carousel WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/).

website/src/content/pages/components/checkbox.mdx

@@ -8,51 +8,48 @@ description: A control element that allows for multiple selections within a set.
 
 ## Anatomy
 
-To set up the checkbox correctly, you'll need to understand its anatomy and how
-we name its parts.
+To set up the checkbox correctly, you'll need to understand its anatomy and how we name its parts.
 
 > Each part includes a `data-part` attribute to help identify them in the DOM.
 
 <Anatomy id="checkbox" />
 
 ### Design impact on the asChild property
 
-The `Checkbox.Root` element of the checkbox is a `label` element. This is
-because the checkbox is a form control and should be associated with a label to
-provide context and meaning to the user. Otherwise, the HTML and accessibility
-structure will be invalid.
+The `Checkbox.Root` element of the checkbox is a `label` element. This is because the checkbox is a
+form control and should be associated with a label to provide context and meaning to the user.
+Otherwise, the HTML and accessibility structure will be invalid.
 
-> If you need to use the `asChild` property, make sure that the `label` element
-> is the direct child of the `Checkbox.Root` component.
+> If you need to use the `asChild` property, make sure that the `label` element is the direct child
+> of the `Checkbox.Root` component.
 
 ## Examples
 
-Learn how to use the `Checkbox` component in your project. Let's take a look at
-the most basic example:
+Learn how to use the `Checkbox` component in your project. Let's take a look at the most basic
+example:
 
 <Example id="basic" />
 
 ### Controlled Checkbox
 
-To create a controlled Checkbox component, manage the state of the checked
-status using the `checked` prop and update it when the `onCheckedChange` event
-handler is called:
+To create a controlled Checkbox component, manage the state of the checked status using the
+`checked` prop and update it when the `onCheckedChange` event handler is called:
 
 <Example id="controlled" />
 
 ### Indeterminate Checkbox
 
-In some cases, you may need a checkbox to represent a state that is neither
-checked nor unchecked, known as the indeterminate state. This can be achieved by
-setting the `checked` prop to `indeterminate`:
+In some cases, you may need a checkbox to represent a state that is neither checked nor unchecked,
+known as the indeterminate state. This can be achieved by setting the `checked` prop to
+`indeterminate`:
 
 <Example id="indeterminate" />
 
 ### Render Prop Usage
 
-For cases where you need more flexibility in rendering, the Checkbox component
-offers the use of a render prop. The render prop function gives you access to
-the checkbox's API, allowing you to customize the checkbox control's rendering:
+For cases where you need more flexibility in rendering, the Checkbox component offers the use of a
+render prop. The render prop function gives you access to the checkbox's API, allowing you to
+customize the checkbox control's rendering:
 
 <Example id="render-prop" />
 
@@ -62,7 +59,8 @@ the checkbox's API, allowing you to customize the checkbox control's rendering:
 
 ## Accessibility
 
-Complies with the [Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
+Complies with the
+[Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
 
 ### Keyboard Support
 

website/src/content/pages/components/clipboard.mdx

@@ -8,17 +8,16 @@ description: A component to copy text to the clipboard
 
 ## Anatomy
 
-To set up the Clipboard correctly, you'll need to understand its anatomy and how
-we name its parts.
+To set up the Clipboard correctly, you'll need to understand its anatomy and how we name its parts.
 
 > Each part includes a `data-part` attribute to help identify them in the DOM.
 
 <Anatomy id="clipboard" />
 
 ## Examples
 
-Learn how to use the `Clipboard` component in your project. Let's take a look at
-the most basic example:
+Learn how to use the `Clipboard` component in your project. Let's take a look at the most basic
+example:
 
 <Example id="basic" />
 

website/src/content/pages/components/collapsible.mdx

@@ -8,8 +8,9 @@ description: An interactive component that can be expanded or collapsed.
 
 ## Animation
 
-You can use CSS animations to create smooth transitions for opening and closing the Collapsible content.
-Utilize the `data-state` attribute in combination with the `--height` CSS variable to animate the open and closed states.
+You can use CSS animations to create smooth transitions for opening and closing the Collapsible
+content. Utilize the `data-state` attribute in combination with the `--height` CSS variable to
+animate the open and closed states.
 
 ```css
 @keyframes slideDown {
@@ -33,14 +34,14 @@ Utilize the `data-state` attribute in combination with the `--height` CSS variab
 
 ## Examples
 
-Learn how to use the `Collapsible` component in your project. Let's examine
-the most basic example:
+Learn how to use the `Collapsible` component in your project. Let's examine the most basic example:
 
 <Example id="basic" />
 
 ### Events
 
-You can listen for the `onExitComplete` event to know when the `Collapsible.Content` is no longer visible:
+You can listen for the `onExitComplete` event to know when the `Collapsible.Content` is no longer
+visible:
 
 <Example id="on-exit-complete" />
 
@@ -52,15 +53,15 @@ To delay the mounting of the `Collapsible.Content`, use the `lazyMount` prop:
 
 ### Unmount on Exit
 
-To remove the `Collapsible.Content` from the DOM when it is not visible, use the
-`unmountOnExit` prop:
+To remove the `Collapsible.Content` from the DOM when it is not visible, use the `unmountOnExit`
+prop:
 
 <Example id="unmount-on-exit" />
 
 ### Combining Lazy Mount and Unmount on Exit
 
-Both `lazyMount` and `unmountOnExit` can be combined to ensure that the component is
-mounted only when the `Collapsible` is expanded and unmounted when it is collapsed:
+Both `lazyMount` and `unmountOnExit` can be combined to ensure that the component is mounted only
+when the `Collapsible` is expanded and unmounted when it is collapsed:
 
 <Example id="lazy-mount-and-unmount-on-exit" />
 

website/src/content/pages/components/color-picker.mdx

@@ -8,25 +8,24 @@ description: A component that allows users to select a color from a color picker
 
 ## Anatomy
 
-To set up the color picker correctly, you'll need to understand its anatomy and
-how we name its parts.
+To set up the color picker correctly, you'll need to understand its anatomy and how we name its
+parts.
 
 > Each part includes a `data-part` attribute to help identify them in the DOM.
 
 <Anatomy id="color-picker" />
 
 ## Examples
 
-Learn how to use the `ColorPicker` component in your project. Let's take a look
-at the most basic example
+Learn how to use the `ColorPicker` component in your project. Let's take a look at the most basic
+example
 
 <Example id="basic" />
 
 ### Controlled Color Picker
 
-To create a controlled Color Picker component, manage the state of the current
-color using the `value` prop and update it when the `onValueChange` or
-`onValueChangeEnd` event handler is called:
+To create a controlled Color Picker component, manage the state of the current color using the
+`value` prop and update it when the `onValueChange` or `onValueChangeEnd` event handler is called:
 
 <Example id="controlled" />
 

website/src/content/pages/components/combobox.mdx

@@ -8,48 +8,47 @@ description: A single input field that combines the functionality of a select an
 
 ## Anatomy
 
-To set up the combobox correctly, you'll need to understand its anatomy and how
-we name its parts.
+To set up the combobox correctly, you'll need to understand its anatomy and how we name its parts.
 
 > Each part includes a `data-part` attribute to help identify them in the DOM.
 
 <Anatomy id="combobox" />
 
 ## Examples
 
-Learn how to use the `Combobox` component in your project. Let's take a look at
-the most basic example
+Learn how to use the `Combobox` component in your project. Let's take a look at the most basic
+example
 
 <Example id="basic" />
 
 ### Advanced Customization
 
-Extended example that shows usage with complex item objects, including disabled
-state for certain options.
+Extended example that shows usage with complex item objects, including disabled state for certain
+options.
 
 <Example id="advanced" />
 
 ## TypeScript Caveats in Vue
 
-Under the hood for React and Solid frameworks, we supply a complex prop type
-with a generic so that the type of the `items` prop matches the param type in
-the function signatures for props such as the `isItemDisabled` prop, say. (See
-the api reference table below) Unfortunately, generic typing is not supported in
-Vue for components that contain props with slots and/or emits. Therefore, you
-will not expect updated typing in this way.
+Under the hood for React and Solid frameworks, we supply a complex prop type with a generic so that
+the type of the `items` prop matches the param type in the function signatures for props such as the
+`isItemDisabled` prop, say. (See the api reference table below) Unfortunately, generic typing is not
+supported in Vue for components that contain props with slots and/or emits. Therefore, you will not
+expect updated typing in this way.
 
-If you have a solution or a workaround to this problem, we would love the
-contribution and request that you
-[open a Github idea discussion](https://github.com/chakra-ui/ark/discussions/new?category=ideas)
-to let us know a PoC you have to share!
+If you have a solution or a workaround to this problem, we would love the contribution and request
+that you
+[open a Github idea discussion](https://github.com/chakra-ui/ark/discussions/new?category=ideas) to
+let us know a PoC you have to share!
 
 ## API Reference
 
 <ComponentTypes id="combobox" />
 
 ## Accessibility
 
-Complies with the [Combobox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+Complies with the
+[Combobox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
 
 ### Keyboard Support