Fix newlines in callouts

docs/data/base/components/badge/badge-pt.md

@@ -56,7 +56,9 @@ The `BadgeUnstyled` component is composed of a root `<span>` that houses the ele
 
 ### Slot props
 
-:::info The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details. :::
+:::info
+The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details.
+:::
 
 Use the `component` prop to override the root slot with a custom element:
 
@@ -70,15 +72,19 @@ Use the `components` prop to override any interior slots in addition to the root
 <BadgeUnstyled components={{ Root: 'div', Badge: 'div' }} />
 ```
 
-:::warning If the root element is customized with both the `component` and `components` props, then `component` will take precedence. :::
+:::warning
+If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+:::
 
 Use the `componentsProps` prop to pass custom props to internal slots. The following code snippet applies a CSS class called `my-badge` to the badge slot:
 
 ```jsx
 <BadgeUnstyled componentsProps={{ badge: { className: 'my-badge' } }} />
 ```
 
-:::warning Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`). :::
+:::warning
+Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
+:::
 
 ## Hook
 
@@ -90,9 +96,11 @@ The `useBadge` hook lets you apply the functionality of `BadgeUnstyled` to a ful
 
 Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
 
-:::info Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+:::info
+Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
 
-You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots). :::
+You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots).
+:::
 
 ## Customization
 

docs/data/base/components/badge/badge-zh.md

@@ -56,7 +56,9 @@ The `BadgeUnstyled` component is composed of a root `<span>` that houses the ele
 
 ### Slot props
 
-:::info The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details. :::
+:::info
+The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details.
+:::
 
 Use the `component` prop to override the root slot with a custom element:
 
@@ -70,15 +72,19 @@ Use the `components` prop to override any interior slots in addition to the root
 <BadgeUnstyled components={{ Root: 'div', Badge: 'div' }} />
 ```
 
-:::warning If the root element is customized with both the `component` and `components` props, then `component` will take precedence. :::
+:::warning
+If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+:::
 
 Use the `componentsProps` prop to pass custom props to internal slots. The following code snippet applies a CSS class called `my-badge` to the badge slot:
 
 ```jsx
 <BadgeUnstyled componentsProps={{ badge: { className: 'my-badge' } }} />
 ```
 
-:::warning Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`). :::
+:::warning
+Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
+:::
 
 ## Hook
 
@@ -90,9 +96,11 @@ The `useBadge` hook lets you apply the functionality of `BadgeUnstyled` to a ful
 
 Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
 
-:::info Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+:::info
+Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
 
-You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots). :::
+You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots).
+:::
 
 ## Customization
 

docs/data/base/components/button/button-pt.md

@@ -50,7 +50,9 @@ The `ButtonUnstyled` component is composed of a root `<button>` slot with no int
 
 ### Slot props
 
-:::info The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details. :::
+:::info
+The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details.
+:::
 
 Use the `component` prop to override the root slot with a custom element:
 
@@ -66,21 +68,27 @@ Use the `components` prop to override any interior slots in addition to the root
 <ButtonUnstyled components={{ Root: 'div' }} />
 ```
 
-:::warning If the root element is customized with both the `component` and `components` props, then `component` will take precedence. :::
+:::warning
+If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+:::
 
 Use the `componentsProps` prop to pass custom props to internal slots. The following code snippet applies a CSS class called `my-button` to the root slot:
 
 ```jsx
 <ButtonUnstyled componentsProps={{ root: { className: 'my-button' } }} />
 ```
 
-:::warning Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`). :::
+:::warning
+Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
+:::
 
 Compare the attributes on the `<span>` in this demo with the `ButtonUnstyled` from the previous demo:
 
 {{"demo": "UnstyledButtonsSpan.js"}}
 
-:::warning If a `ButtonUnstyled` is customized with a non-button element (i.e. `<ButtonUnstyled component="span" />`), it will not submit the form it's in when clicked. Similarly, `<ButtonUnstyled component="span" type="reset">` will not reset its parent form. :::
+:::warning
+If a `ButtonUnstyled` is customized with a non-button element (i.e. `<ButtonUnstyled component="span" />`), it will not submit the form it's in when clicked. Similarly, `<ButtonUnstyled component="span" type="reset">` will not reset its parent form.
+:::
 
 ## Hook
 
@@ -92,9 +100,11 @@ The `useButton` hook lets you apply the functionality of `ButtonUnstyled` to a f
 
 Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
 
-:::info Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+:::info
+Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
 
-You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots). :::
+You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots).
+:::
 
 The `useButton` hook requires the `ref` of the element it's used on.
 

docs/data/base/components/button/button-zh.md

@@ -50,7 +50,9 @@ The `ButtonUnstyled` component is composed of a root `<button>` slot with no int
 
 ### Slot props
 
-:::info The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details. :::
+:::info
+The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details.
+:::
 
 Use the `component` prop to override the root slot with a custom element:
 
@@ -66,21 +68,27 @@ Use the `components` prop to override any interior slots in addition to the root
 <ButtonUnstyled components={{ Root: 'div' }} />
 ```
 
-:::warning If the root element is customized with both the `component` and `components` props, then `component` will take precedence. :::
+:::warning
+If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+:::
 
 Use the `componentsProps` prop to pass custom props to internal slots. The following code snippet applies a CSS class called `my-button` to the root slot:
 
 ```jsx
 <ButtonUnstyled componentsProps={{ root: { className: 'my-button' } }} />
 ```
 
-:::warning Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`). :::
+:::warning
+Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
+:::
 
 Compare the attributes on the `<span>` in this demo with the `ButtonUnstyled` from the previous demo:
 
 {{"demo": "UnstyledButtonsSpan.js"}}
 
-:::warning If a `ButtonUnstyled` is customized with a non-button element (i.e. `<ButtonUnstyled component="span" />`), it will not submit the form it's in when clicked. Similarly, `<ButtonUnstyled component="span" type="reset">` will not reset its parent form. :::
+:::warning
+If a `ButtonUnstyled` is customized with a non-button element (i.e. `<ButtonUnstyled component="span" />`), it will not submit the form it's in when clicked. Similarly, `<ButtonUnstyled component="span" type="reset">` will not reset its parent form.
+:::
 
 ## Hook
 
@@ -92,9 +100,11 @@ The `useButton` hook lets you apply the functionality of `ButtonUnstyled` to a f
 
 Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
 
-:::info Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+:::info
+Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
 
-You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots). :::
+You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots).
+:::
 
 The `useButton` hook requires the `ref` of the element it's used on.
 

docs/data/base/components/form-control/form-control-pt.md

@@ -60,9 +60,11 @@ The `useFormControlUnstyledContext` hook reads the context provided by `FormCont
 
 Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
 
-:::info Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+:::info
+Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
 
-You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots). :::
+You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots).
+:::
 
 The demo below shows how to integrate this hook with its component counterpart:
 

docs/data/base/components/form-control/form-control-zh.md

@@ -60,9 +60,11 @@ The `useFormControlUnstyledContext` hook reads the context provided by `FormCont
 
 Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
 
-:::info Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+:::info
+Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
 
-You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots). :::
+You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots).
+:::
 
 The demo below shows how to integrate this hook with its component counterpart:
 

docs/data/base/components/input/input-pt.md

@@ -55,7 +55,9 @@ The `InputUnstyled` component is composed of a root `<div>` slot that houses one
 
 ### Slot props
 
-:::info The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details. :::
+:::info
+The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details.
+:::
 
 Use the `component` prop to override the root slot with a custom element:
 
@@ -69,15 +71,19 @@ Use the `components` prop to override any interior slots in addition to the root
 <InputUnstyled components={{ Root: 'aside' }} />
 ```
 
-:::warning If the root element is customized with both the `component` and `components` props, then `component` will take precedence. :::
+:::warning
+If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+:::
 
 Use the `componentsProps` prop to pass custom props to internal slots. The following code snippet applies a CSS class called `my-input` to the input slot:
 
 ```jsx
 <InputUnstyled componentsProps={{ input: { className: 'my-input' } }} />
 ```
 
-:::warning Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`). :::
+:::warning
+Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
+:::
 
 ## Hook
 
@@ -89,9 +95,11 @@ The `useInput` hook lets you apply the functionality of `InputUnstyled` to a ful
 
 Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
 
-:::info Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+:::info
+Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
 
-You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots). :::
+You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots).
+:::
 
 The demo below shows how to use the `useInput` hook to create a custom input component that receives all the necessary props:
 

docs/data/base/components/input/input-zh.md

@@ -55,7 +55,9 @@ The `InputUnstyled` component is composed of a root `<div>` slot that houses one
 
 ### Slot props
 
-:::info The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details. :::
+:::info
+The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details.
+:::
 
 Use the `component` prop to override the root slot with a custom element:
 
@@ -69,15 +71,19 @@ Use the `components` prop to override any interior slots in addition to the root
 <InputUnstyled components={{ Root: 'aside' }} />
 ```
 
-:::warning If the root element is customized with both the `component` and `components` props, then `component` will take precedence. :::
+:::warning
+If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+:::
 
 Use the `componentsProps` prop to pass custom props to internal slots. The following code snippet applies a CSS class called `my-input` to the input slot:
 
 ```jsx
 <InputUnstyled componentsProps={{ input: { className: 'my-input' } }} />
 ```
 
-:::warning Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`). :::
+:::warning
+Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
+:::
 
 ## Hook
 
@@ -89,9 +95,11 @@ The `useInput` hook lets you apply the functionality of `InputUnstyled` to a ful
 
 Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
 
-:::info Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+:::info
+Hooks give you the most room for customization, but require more work to implement. With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
 
-You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots). :::
+You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#component-slots).
+:::
 
 The demo below shows how to use the `useInput` hook to create a custom input component that receives all the necessary props: