docs: replace \\\jsx disabled with \\\jsx for the code block

packages/react-docs/pages/components/alert/index.page.mdx

@@ -52,7 +52,7 @@ If not specified, the default icon will be used based on the `severity` prop.
 
 The `isClosable` prop is used to make an alert closable by adding a close button to it. By default, the value of `isClosable` is false. To make an alert closable, set `isClosable` to true.
 
-```jsx disabled
+```jsx
 <Alert variant="solid" severity="success" isClosable onClose={onClose}>
   <Text>This is a success alert.</Text>
 </Alert>
@@ -66,7 +66,7 @@ The `AlertCloseButton` component provides an easy way to add a close button to a
 
 Besides the default functionality of the `AlertCloseButton`, you can also pass additional props, such as `data-test` or `data-tracking` attributes, to the `AlertCloseButton` component as needed.
 
-```jsx disabled
+```jsx
 <Alert variant="solid" severity="success" onClose={onClose}>
   <Text pr="10x">This is a success alert.</Text>
   <AlertCloseButton top={3} right={7} position="absolute" data-test="alert-close-button" />

packages/react-docs/pages/components/button/index.page.mdx

@@ -34,7 +34,7 @@ You can make buttons look inactive or active by adding the `disabled` or `select
 
 If the `disabled` prop is set (or set to `true`), the button will have a `disabled` attribute and not respond to user interactions.
 
-```jsx disabled
+```jsx
 <button type="button" disabled aria-disabled="true">Button</button>
 ```
 
@@ -46,7 +46,7 @@ To customize the visual appearance of the disabled state, pass the `_disabled` s
 
 If the `selected` prop is set (or set to `true`), the button will have both `pointer-events: none` style and `tabindex="-1"` attribute. This will prevent the button from receiving pointer events and will not be reachable via sequential keyboard navigation.
 
-```jsx disabled
+```jsx
 <button type="button" aria-selected="true" tabindex="-1">Button</button>
 ```
 

packages/react-docs/pages/components/checkbox/index.page.mdx

@@ -45,7 +45,7 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 * All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `<label>` element.
 * When a label can't be used, it's necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop.
 
-```jsx disabled
+```jsx
 <Checkbox
   inputProps={{
     'aria-label': 'Label',

packages/react-docs/pages/components/color-mode/index.page.mdx

@@ -8,7 +8,7 @@ By using `TonicProvider` at root of your application, it will add `ColorModeProv
 
 To get color mode working correctly, you may have to pass `colorMode` config to `TonicProvider` with `defaultValue` set to `dark` or `light`.
 
-```jsx disabled
+```jsx
 import React from 'react';
 import { Box, TonicProvider } from '@tonic-ui/react';
 
@@ -34,7 +34,7 @@ function App(props) {
 
 The above setup is equivalent to:
 
-```jsx disabled
+```jsx
 <ColorModeProvider defaultValue="dark">
   <Box {...props} />
 </ColorModeProvider>
@@ -44,11 +44,11 @@ The above setup is equivalent to:
 
 To opt the entire page into the user's color scheme preferences declare `color-scheme` on the document's root element.
 
-```jsx disabled
+```jsx
 import { Global, css } from '@emotion/react';
 ```
 
-```jsx disabled
+```jsx
 <Global
   styles={css`
     :root, :host {
@@ -62,7 +62,7 @@ import { Global, css } from '@emotion/react';
 
 ### Use default color mode
 
-```jsx disabled
+```jsx
 <TonicProvider
   colorMode={{
     defaultValue: 'dark',
@@ -76,7 +76,7 @@ import { Global, css } from '@emotion/react';
 
 This example uses the default color mode for the first render, and then switches to the system color mode for the rest of time.
 
-```jsx disabled
+```jsx
 <TonicProvider
   colorMode={{
     defaultValue: 'dark', // optional
@@ -89,7 +89,7 @@ This example uses the default color mode for the first render, and then switches
 
 ### Controlled color mode
 
-```jsx disabled
+```jsx
 <TonicProvider
   colorMode={{
     value: 'dark',
@@ -101,7 +101,7 @@ This example uses the default color mode for the first render, and then switches
 
 ### Controlled color mode with a toggle function
 
-```jsx disabled
+```jsx
 function App({ children }) {
   const [colorMode, toggleColorMode] = useToggle();
 

packages/react-docs/pages/components/color-mode/useColorMode.page.mdx

@@ -10,7 +10,7 @@ import { useColorStyle } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx disabled
+```jsx
 import { Global, css } from '@emotion/react';
 import {
   Button,

packages/react-docs/pages/components/color-style/index.page.mdx

@@ -28,7 +28,7 @@ Tonic UI comes with a color style system that defines functional color values.
 
 By using `TonicProvider` at root of your application, it will add `ColorStyleProvider` internally to provide the color style context to all components. The default color style will be added automatically.
 
-```jsx disabled
+```jsx
 import React from 'react';
 import { Box, TonicProvider } from '@tonic-ui/react';
 import { colorStyle } from '@tonic-ui/react';
@@ -55,7 +55,7 @@ function App(props) {
 
 The above setup is equivalent to:
 
-```jsx disabled
+```jsx
 <ColorStyleProvider>
   <Box {...props} />
 </ColorStyleProvider>
@@ -81,7 +81,7 @@ To manage color style in your application, you can use the [useColorStyle](../co
 
 To override default color style, you can create a color style object in accordance to the color mode, and pass the object to `TonicProvider` with either the `value` or the `defaultValue` property.
 
-```jsx disabled
+```jsx
 import { Box, TonicProvider, colorStyle } from '@tonic-ui/react';
 import { merge } from '@tonic-ui/utils';
 import React from 'react';

packages/react-docs/pages/components/css-baseline/index.page.mdx

@@ -16,7 +16,7 @@ import { CSSBaseline } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx disabled
+```jsx
 <>
   <CSSBaseline />
   <App />

packages/react-docs/pages/components/date-pickers/date-picker/index.page.mdx

@@ -14,7 +14,7 @@ import {
 
 The following example demonstrates a simple example of the `DatePicker` component.
 
-```jsx disabled
+```jsx
 <DatePicker
   closeOnSelect={true}
   inputFormat="yyyy-MM-dd"
@@ -38,7 +38,7 @@ The following example demonstrates a simple example of the `DatePicker` componen
 
 Note that the `DateInput` component is currently not provided by the `@tonic-ui/react` package. You have to write your own or refer to the following code to [get started](../../components/input-control).
 
-```jsx disabled
+```jsx
 // import
 import { InputControl, InputAdornment } from '@tonic-ui/react';
 import { CalendarIcon } from '@tonic-ui/react-icons';

packages/react-docs/pages/components/drawer/index.page.mdx

@@ -31,7 +31,7 @@ Click the button below to toggle a drawer. The drawer will show up on either sid
 
 The `isClosable` prop is used to make a drawer closable by adding a close button to it. By default, the value of `isClosable` is false. To make a drawer closable, set `isClosable` to true.
 
-```jsx disabled
+```jsx
 <Drawer isOpen={isOpen} isClosable onClose={onClose}>
   <DrawerOverlay />
   <DrawerContent>
@@ -48,7 +48,7 @@ The `DrawerCloseButton` component provides an easy way to add a close button to
 
 Besides the default functionality of the `DrawerCloseButton`, you can also pass additional props, such as `data-test` or `data-tracking` attributes, to the `DrawerCloseButton` component as needed.
 
-```jsx disabled
+```jsx
 <Drawer isOpen={isOpen} onClose={onClose}>
   <DrawerOverlay />
   <DrawerContent>

packages/react-docs/pages/components/menu/index.page.mdx

@@ -86,7 +86,7 @@ You can also customize the indicator by passing a component as children or a fun
 
 `MenuButton` composes `Button`, `MenuToggle`, and `MenuToggleIcon` to create a button that opens the menu. It's an useful alternative to `MenuToggle` when the toggle is a button.
 
-```jsx disabled
+```jsx
 const MenuButton = (props) => {
   // Define custom styles for the menu button
   const styleProps = {

packages/react-docs/pages/components/modal/index.page.mdx

@@ -37,7 +37,7 @@ Click the button below to toggle a modal. The modal will show up in the center o
 
 The `isClosable` prop is used to make a modal closable by adding a close button to it. By default, the value of `isClosable` is false. To make a modal closable, set `isClosable` to true.
 
-```jsx disabled
+```jsx
 <Modal isOpen={isOpen} isClosable onClose={onClose}>
   <ModalOverlay />
   <ModalContent>
@@ -54,7 +54,7 @@ The `ModalCloseButton` component provides an easy way to add a close button to a
 
 Besides the default functionality of the `ModalCloseButton`, you can also pass additional props, such as `data-test` or `data-tracking` attributes, to the `ModalCloseButton` component as needed.
 
-```jsx disabled
+```jsx
 <Modal isOpen={isOpen} onClose={onClose}>
   <ModalOverlay />
   <ModalContent>

packages/react-docs/pages/components/popover/index.page.mdx

@@ -25,7 +25,7 @@ import {
 
 To create an accessible popover, it should allow users to access it using the tab key on a keyboard. When it opens, the focus status will be set to `PopoverContent`. When it closes, the focus status will return to `PopoverTrigger`.
 
-```jsx disabled
+```jsx
 <Popover>
   <PopoverTrigger>
     <Button variant="secondary">
@@ -42,7 +42,7 @@ To create an accessible popover, it should allow users to access it using the ta
 
 By default, you can only pass a single React element child to the `PopoverTrigger` component.
 
-```jsx disabled
+```jsx
 <PopoverTrigger>
   <Button variant="secondary">
     Interactive Trigger
@@ -52,21 +52,21 @@ By default, you can only pass a single React element child to the `PopoverTrigge
 
 If you need to pass more than one child element or non-element children, wrap them in an element or pass the `shouldWrapChildren` prop.
 
-```jsx disabled
+```jsx
 <PopoverTrigger outline={0} tabIndex={-1}>
   <Text display="inline-block">
     Non-interactive Trigger
   </Text>
 </PopoverTrigger>
 ```
 
-```jsx disabled
+```jsx
 <PopoverTrigger outline={0} shouldWrapChildren tabIndex={-1}>
   Non-interactive Trigger
 </PopoverTrigger>
 ```
 
-```jsx disabled
+```jsx
 <PopoverTrigger outline={0} shouldWrapChildren tabIndex={-1}>
   <MenuIcon height="5x" mr="2x" />
   <Text display="inline-block">Non-interactive Trigger</Text>
@@ -171,7 +171,7 @@ To access the internal state of the popover, you can use the Function as Child C
 
 Use the `placement` prop to control the placement of the popover.
 
-```jsx disabled
+```jsx
 <Popover placement="top" trigger="hover">
   <PopoverTrigger>
     <LinkButton>Trigger</LinkButton>

packages/react-docs/pages/components/portal-manager/index.page.mdx

@@ -14,15 +14,15 @@ import {
 
 Next, wrap your application with `PortalManager`:
 
-```jsx disabled
+```jsx
 <PortalManager>
   <App />
 </PortalManager>
 ```
 
 Once `PortalManager` is set up, any component can use the `usePortalManager` Hook to create and manage portals.
 
-```jsx disabled
+```jsx
 import { usePortalManager } from '@tonic-ui/react';
 
 function MyComponent() {
@@ -41,7 +41,7 @@ function MyComponent() {
 
 In the example above, `MyModal` is a wrapper component that represents the modal you want to render. The `onClose` prop is a function that is passed to the modal component, and can be used to close the modal.
 
-```jsx disabled
+```jsx
 const MyModal = forwardRef(
   {
     onClose,
@@ -76,15 +76,15 @@ const MyModal = forwardRef(
 
 To remove a portal, call the callback function passed by the `portal` method.
 
-```jsx disabled
+```jsx
 const id = portal((close) => (
   <MyModal onClose={close} />
 ));
 ```
 
 Or use the `remove` method by passing the portal's unique id as an argument.
 
-```jsx disabled
+```jsx
 portal.remove(id);
 ```
 

packages/react-docs/pages/components/radio/index.page.mdx

@@ -39,7 +39,7 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 * All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `<label>` element.
 * When a label can't be used, it's necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop.
 
-```jsx disabled
+```jsx
 <Radio
   inputProps={{
     'aria-label': 'Label',

packages/react-docs/pages/components/scrollbar/index.page.mdx

@@ -88,7 +88,7 @@ Check out the demo below to see how you can integrate React Virtuoso with a cust
 
 To achieve this, you'll need to create a `CustomScrollbar` component and pass it as the `Scroller` for the `Virtuoso` component.
 
-```jsx disabled
+```jsx
 <Virtuoso
   components={{
     Scroller: CustomScrollbar,
@@ -105,7 +105,7 @@ To achieve this, you'll need to create a `CustomScrollbar` component and pass it
 
 In the `CustomScrollbar` component, pass `props` and `ref` to `scrollViewProps` and `scrollViewRef`, respectively. This ensures that the props coming from React Virtuoso are passed down correctly, allowing its scrolling behavior to integrate seamlessly into the `Scrollbar`.
 
-```jsx disabled
+```jsx
 const CustomScrollbar = forwardRef((inProps, ref) => {
   const { children, ...props } = inProps;
 

packages/react-docs/pages/components/skeleton/index.page.mdx

@@ -12,7 +12,7 @@ import { Skeleton } from '@tonic-ui/react';
 
 The component is designed to be used when the data for your component might not be immediately available. For instance:
 
-```jsx disabled
+```jsx
 {image
   ? <Image src={image} width={240} height={180} />
   : <Skeleton variant="rectangle" width={240} height={120} />

packages/react-docs/pages/components/switch/index.page.mdx

@@ -41,7 +41,7 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/switch/
 * All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `<label>` element.
 * When a label can't be used, it's necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop.
 
-```jsx disabled
+```jsx
 <Switch
   inputProps={{
     'aria-label': 'Label',