Merge pull request #513 from tianenpang/docs/keyword-in-blockquote

chore(docs): bolded keywords in blockquotes

apps/docs/content/docs/components/card.mdx

@@ -45,7 +45,7 @@ import { Card } from '@nextui-org/react';
   files={cardContent.hoverable}
 />
 
-> **Note**: NextUI uses the **react-aria** [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) hook under the hood in order to handle mouse and touch events, ignore emulated mouse events in mobile browsers, and other accessibility features.
+> **Note:** NextUI uses the **react-aria** [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) hook under the hood in order to handle mouse and touch events, ignore emulated mouse events in mobile browsers, and other accessibility features.
 
 <Playground
   title="Pressable"
@@ -54,7 +54,7 @@ import { Card } from '@nextui-org/react';
   files={cardContent.pressable}
 />
 
-> **Note**: NextUI uses the **react-aria** [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook under the hood in order to handle mouse and touch events, <kbd>Enter</kbd> and <kbd>Space</kbd> keys, screen readers virtual clicks, and other accessibility features.
+> **Note:** NextUI uses the **react-aria** [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook under the hood in order to handle mouse and touch events, <kbd>Enter</kbd> and <kbd>Space</kbd> keys, screen readers virtual clicks, and other accessibility features.
 
 <Playground
   title="With divider"

apps/docs/content/docs/components/checkbox-group.mdx

@@ -35,15 +35,15 @@ import { Checkbox } from '@nextui-org/react';
   files={checkboxGroupContent.controlledVsUncontrolled}
 />
 
-> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
+> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
 
 <Playground
   title="Events"
   desc="`Checkbox.Group` accepts an `onChange` prop, which is triggered when a user adds or removes an item from the selection. The example below uses `onChange` to log how the user is interacting with the component."
   files={checkboxGroupContent.events}
 />
 
-> Accessibility: If a visible label isn't specified for a `Checkbox.Group`, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. Checkbox elements within a group should always have a visible label.
+> **A11y:** If a visible label isn't specified for a `Checkbox.Group`, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. Checkbox elements within a group should always have a visible label.
 
 <Spacer y={3} />
 

apps/docs/content/docs/components/checkbox.mdx

@@ -71,7 +71,7 @@ import { Checkbox } from '@nextui-org/react';
   files={checkboxContent.controlledVsUncontrolled}
 />
 
-> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
+> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
 
 <Playground
   title="Disable animation"

apps/docs/content/docs/components/dropdown.mdx

@@ -55,7 +55,7 @@ import { Dropdown } from '@nextui-org/react';
   files={dropdownContent.disabledKeys}
 />
 
-> **Note**: Its important to have a unique key for each item, otherwise the disabled keys will not work.
+> **Note:** Its important to have a unique key for each item, otherwise the disabled keys will not work.
 
 <Playground
   title="Variants"
@@ -90,7 +90,7 @@ import { Dropdown } from '@nextui-org/react';
   files={dropdownContent.icon}
 />
 
-> **Note**: If you use **currentColor** as the icon color, the icon will have the same color as the item text.
+> **Note:** If you use **currentColor** as the icon color, the icon will have the same color as the item text.
 
 <Playground
   title="Description"
@@ -104,7 +104,7 @@ import { Dropdown } from '@nextui-org/react';
   files={dropdownContent.sections}
 />
 
-> **A11y**: Sections without a title must provide an aria-label for accessibility.
+> **A11y:** Sections without a title must provide an aria-label for accessibility.
 
 <Playground
   title="Custom Trigger"

apps/docs/content/docs/components/popover.mdx

@@ -54,15 +54,15 @@ import { Popover } from '@nextui-org/react';
   files={popoverContent.controlledVsUncontrolled}
 />
 
-> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
+> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
 
 <Playground
   title="Custom Content"
   desc="The `Popover.Content` can be used to render any component you want. Ensure the children passed to `Popover.Trigger` is focusable. Users can tab to it using their keyboard, and it can take a `ref`. It is critical for accessiblity."
   files={popoverContent.customContent}
 />
 
-> **A11y**: When Popover opens, focus is sent to PopoverContent. When it closes, focus is returned to the trigger.
+> **A11y:** When Popover opens, focus is sent to PopoverContent. When it closes, focus is returned to the trigger.
 
 <Playground
   title="Disable animation"

apps/docs/content/docs/components/radio.mdx

@@ -29,7 +29,7 @@ import { Radio } from '@nextui-org/react';
   files={radioContent.default_radio}
 />
 
-> **Note**: Note: A Radio cannot be used outside of a Radio.Group.
+> **Note:** A Radio cannot be used outside of a Radio.Group.
 
 <Playground
   title="Disabled"
@@ -94,15 +94,15 @@ import { Radio } from '@nextui-org/react';
   files={radioContent.controlledVsUncontrolled}
 />
 
-> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
+> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
 
 <Playground
   title="Events"
   desc="`Radio.Group` accepts an `onChange` prop, which is triggered when a user checks an item from the list. The example below uses `onChange` to log how the user is interacting with the component."
   files={radioContent.events}
 />
 
-> Accessibility: If a visible label isn't specified for a `Radio.Group`, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. `Radio` elements within a group should always have a visible label.
+> **A11y:** If a visible label isn't specified for a `Radio.Group`, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. `Radio` elements within a group should always have a visible label.
 
 <Spacer y={3} />
 

apps/docs/content/docs/components/table.mdx

@@ -128,7 +128,7 @@ import { Table } from '@nextui-org/react';
   files={tableContent.sortableTable}
 />
 
-> **Note**: This example performs client side sorting by passing **load** and **sort** functions to the [@react-stately/async-list](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) hook and by comparing the data using [@react-aria/i18n](https://react-spectrum.adobe.com/react-aria/useCollator.html) **useCollector** hook. See the docs for more information on how to perform server side sorting.
+> **Note:** This example performs client side sorting by passing **load** and **sort** functions to the [@react-stately/async-list](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) hook and by comparing the data using [@react-aria/i18n](https://react-spectrum.adobe.com/react-aria/useCollator.html) **useCollector** hook. See the docs for more information on how to perform server side sorting.
 
 <Playground
   title="Disabled keys"
@@ -137,7 +137,7 @@ import { Table } from '@nextui-org/react';
   files={tableContent.disabledKeysTable}
 />
 
-> **Note**: Its important to have a unique key for each row, otherwise the disabled keys will not work.
+> **Note:** Its important to have a unique key for each row, otherwise the disabled keys will not work.
 
 <Playground
   title="Disallow empty selection"
@@ -146,7 +146,7 @@ import { Table } from '@nextui-org/react';
   files={tableContent.disallowEmptySelectionTable}
 />
 
-> **Note**: Its important to have a unique key for each row, otherwise the default selected keys will not work.
+> **Note:** Its important to have a unique key for each row, otherwise the default selected keys will not work.
 
 <Playground
   title="No animated"

apps/docs/content/docs/components/textarea.mdx

@@ -61,7 +61,7 @@ import { Textarea } from '@nextui-org/react';
   files={textareaContent.controlledUncontrolled}
 />
 
-> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
+> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
 
 <Spacer y={3} />
 

apps/docs/content/docs/theme/dark-mode.mdx

@@ -253,4 +253,4 @@ const App = () => {
 
 ```
 
-> Note: This dark mode implementation is less recommended because it occurs only on the client side, which means that the theme can flash when the page is loaded.
+> **Note:** This dark mode implementation is less recommended because it occurs only on the client side, which means that the theme can flash when the page is loaded.

apps/docs/content/docs/theme/default-theme.mdx

@@ -118,7 +118,7 @@ This table is a simple overview of the most common use case for each step. Howev
 | **800** | Low-contrast text                       |
 | **900** | High-contrast text                      |
 
-> **Note**: NextUI uses different colors for each theme type (light, dark). You can check it out by toggling the docs theme on the navbar.
+> **Note:** NextUI uses different colors for each theme type (light, dark). You can check it out by toggling the docs theme on the navbar.
 
 <Spacer y={2} />
 

apps/docs/content/docs/theme/media.mdx

@@ -75,4 +75,4 @@ Here is an example of how to use the NextUI media queries:
 `}
 />
 
-> Note: If you want to see the changes in the preview, you need to resize the browser window.
+> **Note:** If you want to see the changes in the preview, you need to resize the browser window.

apps/docs/content/docs/theme/override-styles.mdx

@@ -21,7 +21,7 @@ Here are some options depending on your goals:
 - **Using the css prop**
 - **Using the styled function**
 
-> Note: The tokens used here like `$space$1`, `$pink800`, etc.. are defined in the [default theme](/docs/theme/default-theme) section.
+> **Note:** The tokens used here like `$space$1`, `$pink800`, etc.. are defined in the [default theme](/docs/theme/default-theme) section.
 
 <Spacer y={2} />
 
@@ -119,7 +119,7 @@ return (
 }`}
 />
 
-> Note: This approach requires you to override and create your own variants like `size` and `color`.
+> **Note:** This approach requires you to override and create your own variants like `size` and `color`.
 
 > For more information about the Stitches css prop, check out the [Stitches documentation](https://stitches.dev/docs/api#styled).
 

apps/docs/content/docs/theme/utilities.mdx

@@ -300,7 +300,7 @@ export const utils = {
 };
 ```
 
-> Note: If you would like we to add more utilities, please let us know on [NextUI Discussions](https://github.com/nextui-org/nextui/discussions), or on [Discord](https://discord.gg/9b6yyZKmH4).
+> **Note:** If you would like we to add more utilities, please let us know on [NextUI Discussions](https://github.com/nextui-org/nextui/discussions), or on [Discord](https://discord.gg/9b6yyZKmH4).
 
 ### Theme Map