mui · siriwatknp · Apr 25, 2023 · Apr 18, 2023 · Apr 18, 2023 · Apr 24, 2023
diff --git a/docs/data/joy/components/accordion/accordion.md b/docs/data/joy/components/accordion/accordion.md
@@ -38,7 +38,7 @@ Animation is created by targeting a CSS variable, `--radix-accordion-content-hei
 - [Accordion component documentation](https://www.radix-ui.com/docs/primitives/components/accordion)
 
 <iframe src="https://codesandbox.io/embed/joy-ui-feat-radix-accordion-4n2p04?module=%2Fdemo.tsx&fontsize=14&hidenavigation=1&theme=dark&view=preview"
-     style="width:100%; height:360px; border:0; border-radius: 8px; overflow:hidden;"
+     style="width:100%; height:360px; border:0; border-radius: 12px; overflow:hidden;"
      title="Joy UI feat. Radix UI Accordion"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -54,7 +54,7 @@ Headless UI does not provide an API to create animation so you have to use other
 - [Disclosure component documentation](https://headlessui.com/react/disclosure)
 
 <iframe src="https://codesandbox.io/embed/joy-ui-feat-headless-ui-disclosure-g2mqpr?module=%2Fdemo.tsx&fontsize=14&hidenavigation=1&theme=dark&view=preview"
-     style="width:100%; height:360px; border:0; border-radius: 8px; overflow:hidden;"
+     style="width:100%; height:360px; border:0; border-radius: 12px; overflow:hidden;"
      title="Joy UI feat. Headless UI Disclosure"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"

diff --git a/docs/data/joy/components/alert/alert.md b/docs/data/joy/components/alert/alert.md
@@ -10,19 +10,19 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
 
 <p class="description">Alerts display brief messages for the user without interrupting their use of the app.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 The Alert component can be used to provide important and potentially time-sensitive information in a way that does not interfere with the user's tasks. (Source: [ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).)
 
+{{"demo": "AlertUsage.js", "hideToolbar": true, "bg": "gradient"}}
+
 :::info
 Alerts should not be confused with alert _dialogs_ ([ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)), which _are_ intended to interrupt the user to obtain a response.
 Use the Joy UI [Modal](https://mui.com/joy-ui/react-modal/) if you need the behavior of a dialog.
 :::
 
-{{"demo": "AlertUsage.js", "hideToolbar": true, "bg": "gradient"}}
-
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Basics
 
 ```jsx

diff --git a/docs/data/joy/components/autocomplete/autocomplete.md b/docs/data/joy/components/autocomplete/autocomplete.md
@@ -10,14 +10,14 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
 
 <p class="description">The autocomplete is a text input enhanced by a panel of suggested options when users start typing.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 `Autocomplete` is an enhanced version of text input that shows suggested options as the users type and also let them select an option from the list.
 
 {{"demo": "Playground.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Usage
 
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:

diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md
@@ -9,14 +9,14 @@ githubLabel: 'component: avatar'
 
 <p class="description">An avatar is a graphical representation of a user's identity.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 The Avatar component can be used to display graphical information about a user in places such as menus, tables, and chats.
 
 {{"demo": "AvatarUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Basics
 
 ```jsx

diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md
@@ -10,15 +10,15 @@ unstyled: /base/react-badge/
 
 <p class="description">The Badge component generates a small label that is attached to its child element.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 A badge is a small descriptor for UI elements.
 It typically sits on or near an element and indicates the status of that element by displaying a number, icon, or other short set of characters.
 
 {{"demo": "BadgeUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Basics
 
 ```jsx

diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
@@ -9,15 +9,15 @@ githubLabel: 'component: breadcrumbs'
 
 <p class="description">A breadcrumb trail is a navigational tool that helps users keep track of their location within an app.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 The Breadcrumbs component consists of a list of links that show the user the hierarchy of a given page in relation to the app's structure.
 It provides a simple visual aid for better context and ease of navigation between higher- and lower-level pages.
 
 {{"demo": "BreadcrumbsUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Basics
 
 ```jsx

diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
@@ -11,15 +11,15 @@ unstyled: /base/react-button/
 
 <p class="description">Buttons let users take actions and make choices with a single tap.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 Buttons communicate actions that users can take.
 The Joy UI Button component replaces the native HTML `<button>` element, and offers expanded options for styling and accessibility.
 
 {{"demo": "ButtonUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Basics
 
 ```jsx

diff --git a/docs/data/joy/components/checkbox/checkbox.md b/docs/data/joy/components/checkbox/checkbox.md
@@ -10,24 +10,24 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 
 <p class="description">Checkboxes give users binary choices when presented with multiple options in a series.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 Checkboxes provide users with a graphical representation of a binary choice (yes or no, on or off).
 They are most commonly presented in a series, giving the user multiple choices to make.
 
 The Joy UI Checkbox component replaces the native HTML `<input type="checkbox">` element, and offers expanded options for styling and accessibility.
 
+{{"demo": "CheckboxUsage.js", "hideToolbar": true, "bg": "gradient"}}
+
 :::success
 When should you use checkboxes rather than switches or radio buttons?
 
 - Use a switch to provide the user with **a single binary choice**—checkboxes are preferable when you need to give the user multiple binary choices.
 - Use radio buttons to give the user **mutually exclusive options**—checkboxes are preferable when you need to let the user select one, some, all, or none from a series of options.
   :::
 
-{{"demo": "CheckboxUsage.js", "hideToolbar": true, "bg": "gradient"}}
-
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Basics
 
 ```jsx

diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md
@@ -9,18 +9,14 @@ githubLabel: 'component: chip'
 
 <p class="description">Chip generates a compact element that can represent an input, attribute, or action.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 Chips are most frequently used in two main use cases: as pills of informative content or as filtering options.
 
 {{"demo": "ChipUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-:::info
-To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
-:::
-
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:

diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -9,6 +9,8 @@ githubLabel: 'component: CircularProgress'
 
 <p class="description">The Circular Progress component showcases the duration of a process or an indefinite wait period.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 A circular progress indicator, often referred to as a spinner, is a visual representation of the progress of an operation or task.
@@ -18,8 +20,6 @@ Use [determinate](#determinate) mode to indicate how long a given operation will
 
 {{"demo": "CircularProgressUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 :::info
 The component's animations rely primarily on CSS to ensure that it functions even before JavaScript loads.
 :::

diff --git a/docs/data/joy/components/css-baseline/css-baseline.md b/docs/data/joy/components/css-baseline/css-baseline.md
@@ -57,7 +57,9 @@ export default function MyApp() {
 }
 ```
 
+:::warning
 ⚠️ Make sure you import `ScopedCssBaseline` first to avoid box-sizing conflicts as in the above example.
+:::
 
 ## Approach
 

diff --git a/docs/data/joy/components/divider/divider.md b/docs/data/joy/components/divider/divider.md
@@ -9,14 +9,14 @@ githubLabel: 'component: divider'
 
 <p class="description">A divider is a thin line that groups content in lists and layouts.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 Dividers separate content into clear groups.
 
 {{"demo": "DividerUsage.js", "hideToolbar": "true", "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
@@ -33,20 +33,19 @@ export default function MyApp() {
 
 Use the `Divider` to wrap elements that will be added to it.
 
+{{"demo": "DividerText.js"}}
+
 :::warning
 When using the `Divider` component for visual decoration, such as in a heading, explicitly specify `role="presentation"` on it to make sure screen readers can announce its content:
 
 ```js
 <Divider component="div" role="presentation">
   {/* any elements nested inside the role="presentation" preserve their semantics. */}
-  <Typography variant="h2">My Heading</Typography>
 </Divider>
 ```
 
 :::
 
-{{"demo": "DividerText.js"}}
-
 ### Vertical divider
 
 Use the `orientation` prop to render a vertical divider.

diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
@@ -9,14 +9,14 @@ unstyled: /base/react-input/
 
 <p class="description">The Input component facilitates the entry of text data from the user.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 The Input component enhances the functionality of the native HTML `<input>` tag by providing expanded customization options and accessibility features.
 
 {{"demo": "InputUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Basics
 
 ```jsx

diff --git a/docs/data/joy/components/linear-progress/linear-progress.md b/docs/data/joy/components/linear-progress/linear-progress.md
@@ -9,6 +9,8 @@ githubLabel: 'component: LinearProgress'
 
 <p class="description">Linear Progress indicators, commonly known as loaders, express an unspecified wait time or display the length of a process.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.
@@ -20,8 +22,6 @@ The animations of the components rely on CSS as much as possible to work even be
 
 {{"demo": "LinearProgressUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:

diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md
@@ -10,15 +10,15 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/link/
 
 <p class="description">The <code>Link</code> component allows you to customize anchor tags with theme colors and typography styles.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 The `Link` component represents the HTML `<a>` element.
 It accepts the same props as the [`Typography`](/joy-ui/react-typography/) component, as well as the system props.
 
 {{"demo": "LinkUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:

diff --git a/docs/data/joy/components/modal/modal.md b/docs/data/joy/components/modal/modal.md
@@ -10,6 +10,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 
 <p class="description">The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 Joy UI provides three modal-related components:
@@ -28,8 +30,6 @@ Joy UI provides three modal-related components:
 - ⌨️ Manages focus correctly between the modal and its parent app.
 - ♿️ Adds the appropriate ARIA roles automatically.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 :::info
 The term "modal" is sometimes used interchangeably with "dialog," but this is incorrect.
 

diff --git a/docs/data/joy/components/radio-button/radio-button.md b/docs/data/joy/components/radio-button/radio-button.md
@@ -1,6 +1,6 @@
 ---
 product: joy-ui
-title: React Radio Group component
+title: React Radio Button component
 components: Radio, RadioGroup
 githubLabel: 'component: radio'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
@@ -10,13 +10,17 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 
 <p class="description">Radio buttons enable the user to select one option from a set.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 Radio buttons let users make a mutually exclusive choice (e.g., this or that).
 Only one selection is allowed from the available set of options.
 
 Radio buttons should have the most commonly used option selected by default.
 
+{{"demo": "RadioUsage.js", "hideToolbar": true, "bg": "gradient"}}
+
 :::success
 When should you use radio buttons rather than checkboxes, switches, or selects?
 
@@ -26,14 +30,6 @@ When should you use radio buttons rather than checkboxes, switches, or selects?
 - If available options can be collapsed, consider using a Select component to conserve space.
   :::
 
-{{"demo": "RadioUsage.js", "hideToolbar": true, "bg": "gradient"}}
-
-:::info
-To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
-:::
-
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Basics
 
 ```jsx

diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
@@ -11,18 +11,14 @@ unstyled: /base/react-select/
 
 <p class="description">Select components are used for collecting user provided information from a list of options.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 The `Select` component is used to trigger a popup that displays a list of `Option` components.
 
 {{"demo": "SelectUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-:::info
-To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
-:::
-
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
@@ -8,15 +8,15 @@ components: Sheet
 
 <p class="description">Sheet is a generic container that supports Joy UI's global variants.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Introduction
 
 The `Sheet` container is a generic container.
 It's a sibling to the [`Box`](/system/react-box/) component, and equivalent to Material UI's [`Paper`](/material-ui/react-paper/), with the difference being that it supports Joy UI's global variants out of the box.
 
 {{"demo": "SheetUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,7 +57,9 @@ export default function MyApp() { @@
     }
     ```
+    :::warning
     ⚠️ Make sure you import `ScopedCssBaseline` first to avoid box-sizing conflicts as in the above example.
+    :::
     ## Approach
@@ Expand Down @@