From c8138a1b66d6e80e13fdde8cb921325456d138b2 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 27 Nov 2023 14:25:45 +0100
Subject: [PATCH] [joy-ui][docs] Fix h1 template (#40017)

---
 .../getting-started/templates/email/App.tsx   |  9 +--
 .../email/components/EmailContent.tsx         |  3 -
 .../templates/email/components/Header.tsx     |  2 -
 .../templates/email/components/Layout.tsx     | 12 ++--
 .../templates/email/components/Mails.tsx      |  2 -
 .../templates/email/components/Navigation.tsx |  1 -
 .../templates/email/components/WriteEmail.tsx |  3 -
 .../getting-started/templates/files/App.tsx   |  7 ---
 .../templates/files/components/Header.tsx     |  3 -
 .../templates/files/components/Layout.tsx     | 12 ++--
 .../templates/files/components/Menu.tsx       |  9 +--
 .../templates/files/components/Navigation.tsx |  1 -
 .../templates/files/components/TableFiles.tsx |  7 +--
 .../templates/framesx-web-blocks/App.tsx      |  2 -
 .../framesx-web-blocks/blocks/HeroLeft01.tsx  |  1 -
 .../framesx-web-blocks/blocks/HeroLeft03.tsx  |  1 -
 .../framesx-web-blocks/blocks/HeroLeft04.tsx  |  1 -
 .../framesx-web-blocks/blocks/HeroLeft05.tsx  |  1 -
 .../framesx-web-blocks/blocks/HeroLeft06.tsx  |  1 -
 .../messages/components/AvatarWithStatus.tsx  |  8 +--
 .../messages/components/ChatBubble.tsx        | 10 +---
 .../messages/components/ChatListItem.tsx      |  9 +--
 .../messages/components/ChatsPane.tsx         |  9 +--
 .../messages/components/ColorSchemeToggle.tsx | 11 ++--
 .../messages/components/MessageInput.tsx      |  7 +--
 .../messages/components/MessagesPane.tsx      |  5 +-
 .../components/MessagesPaneHeader.tsx         |  5 +-
 .../templates/messages/components/MuiLogo.tsx |  5 +-
 .../messages/components/MyMessages.tsx        |  6 +-
 .../templates/messages/components/Sidebar.tsx | 18 +-----
 .../templates/messages/useScript.ts           |  4 +-
 .../templates/messages/utils.ts               | 24 ++++----
 .../templates/order-dashboard/App.tsx         | 21 +++----
 .../components/ColorSchemeToggle.tsx          | 11 ++--
 .../order-dashboard/components/MuiLogo.tsx    |  5 +-
 .../order-dashboard/components/OrderList.tsx  |  2 +-
 .../order-dashboard/components/OrderTable.tsx | 19 ++-----
 .../order-dashboard/components/Sidebar.tsx    |  5 +-
 .../templates/order-dashboard/useScript.ts    |  4 +-
 .../templates/order-dashboard/utils.ts        | 12 ++--
 .../templates/profile-dashboard/App.tsx       | 11 +---
 .../components/ColorSchemeToggle.tsx          |  9 +--
 .../components/CountrySelector.tsx            |  5 +-
 .../profile-dashboard/components/DropZone.tsx | 12 +---
 .../components/EditorToolbar.tsx              |  6 +-
 .../components/FileUpload.tsx                 | 24 ++++----
 .../profile-dashboard/components/MuiLogo.tsx  |  5 +-
 .../components/MyProfile.tsx                  | 56 +++----------------
 .../profile-dashboard/components/Sidebar.tsx  |  9 +--
 .../templates/profile-dashboard/useScript.ts  |  4 +-
 .../templates/profile-dashboard/utils.ts      | 12 ++--
 .../templates/rental-dashboard/App.tsx        |  3 -
 .../components/ColorSchemeToggle.tsx          | 11 ++--
 .../components/CountrySelector.tsx            |  5 +-
 .../components/HeaderSection.tsx              |  1 -
 .../rental-dashboard/components/MuiLogo.tsx   |  5 +-
 .../components/RentalCard.tsx                 | 10 +---
 .../components/ToggleGroup.tsx                |  3 +-
 .../templates/sign-in-side/App.tsx            | 14 ++---
 .../getting-started/templates/team/App.tsx    |  3 -
 .../templates/team/components/Header.tsx      |  2 -
 .../templates/team/components/Layout.tsx      | 14 ++---
 .../templates/team/components/Navigation.tsx  |  1 -
 63 files changed, 152 insertions(+), 351 deletions(-)

diff --git a/docs/data/joy/getting-started/templates/email/App.tsx b/docs/data/joy/getting-started/templates/email/App.tsx
index 3863d2c15bb20a..50c05cf57a3ac7 100644
--- a/docs/data/joy/getting-started/templates/email/App.tsx
+++ b/docs/data/joy/getting-started/templates/email/App.tsx
@@ -7,13 +7,11 @@ import Typography from '@mui/joy/Typography';
 import Button from '@mui/joy/Button';
 import Stack from '@mui/joy/Stack';
 
-// Icons import
 import CreateRoundedIcon from '@mui/icons-material/CreateRounded';
 import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
 import PeopleAltRoundedIcon from '@mui/icons-material/PeopleAltRounded';
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 
-// custom
 import Layout from './components/Layout';
 import Navigation from './components/Navigation';
 import Mails from './components/Mails';
@@ -108,12 +106,7 @@ export default function EmailExample() {
               justifyContent: 'space-between',
             }}
           >
-            <Box
-              sx={{
-                alignItems: 'center',
-                gap: 1,
-              }}
-            >
+            <Box sx={{ alignItems: 'center', gap: 1 }}>
               <Typography level="title-lg" textColor="text.secondary">
                 My inbox
               </Typography>
diff --git a/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx b/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
index 730300d012f94f..4efb1aaba21f42 100644
--- a/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
@@ -12,7 +12,6 @@ import Divider from '@mui/joy/Divider';
 import Avatar from '@mui/joy/Avatar';
 import Tooltip from '@mui/joy/Tooltip';
 
-// Icons import
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 import ForwardToInboxRoundedIcon from '@mui/icons-material/ForwardToInboxRounded';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -171,7 +170,6 @@ export default function EmailContent() {
         >
           Details for our Yosemite Park hike
         </Typography>
-
         <Box
           sx={{
             mt: 1,
@@ -203,7 +201,6 @@ export default function EmailContent() {
             >
               to
             </Typography>
-
             <Tooltip size="sm" title="Copy email" variant="outlined">
               <Chip size="sm" variant="soft" color="primary" onClick={() => {}}>
                 steve@mail.com
diff --git a/docs/data/joy/getting-started/templates/email/components/Header.tsx b/docs/data/joy/getting-started/templates/email/components/Header.tsx
index 9fbc266e856bfe..c227a68dad9e56 100644
--- a/docs/data/joy/getting-started/templates/email/components/Header.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Header.tsx
@@ -17,7 +17,6 @@ import Drawer from '@mui/joy/Drawer';
 import ModalClose from '@mui/joy/ModalClose';
 import DialogTitle from '@mui/joy/DialogTitle';
 
-// Icons import
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
@@ -29,7 +28,6 @@ import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 
-// Custom
 import Navigation from './Navigation';
 
 function ColorSchemeToggle() {
diff --git a/docs/data/joy/getting-started/templates/email/components/Layout.tsx b/docs/data/joy/getting-started/templates/email/components/Layout.tsx
index 505bf26d71c71c..20701467d6d287 100644
--- a/docs/data/joy/getting-started/templates/email/components/Layout.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Layout.tsx
@@ -106,16 +106,16 @@ function Main(props: BoxProps) {
   );
 }
 
-function SideDrawer({
-  onClose,
-  ...props
-}: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> }) {
+function SideDrawer(
+  props: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> },
+) {
+  const { onClose, ...other } = props;
   return (
     <Box
-      {...props}
+      {...other}
       sx={[
         { position: 'fixed', zIndex: 1200, width: '100%', height: '100%' },
-        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
       ]}
     >
       <Box
diff --git a/docs/data/joy/getting-started/templates/email/components/Mails.tsx b/docs/data/joy/getting-started/templates/email/components/Mails.tsx
index 72cc01726a5c4a..ca4c066684cccd 100644
--- a/docs/data/joy/getting-started/templates/email/components/Mails.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Mails.tsx
@@ -98,12 +98,10 @@ export default function EmailList() {
                       }}
                     />
                   </Box>
-
                   <Typography level="body-xs" textColor="text.tertiary">
                     {item.date}
                   </Typography>
                 </Box>
-
                 <div>
                   <Typography level="title-sm" sx={{ mb: 0.5 }}>
                     {item.title}
diff --git a/docs/data/joy/getting-started/templates/email/components/Navigation.tsx b/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
index f5030de22590ee..6c725c168539c9 100644
--- a/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
@@ -7,7 +7,6 @@ import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import ListItemContent from '@mui/joy/ListItemContent';
 
-// Icons import
 import InboxRoundedIcon from '@mui/icons-material/InboxRounded';
 import OutboxRoundedIcon from '@mui/icons-material/OutboxRounded';
 import DraftsRoundedIcon from '@mui/icons-material/DraftsRounded';
diff --git a/docs/data/joy/getting-started/templates/email/components/WriteEmail.tsx b/docs/data/joy/getting-started/templates/email/components/WriteEmail.tsx
index b3089673e6201f..c3fc753bf8a088 100644
--- a/docs/data/joy/getting-started/templates/email/components/WriteEmail.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/WriteEmail.tsx
@@ -47,7 +47,6 @@ const WriteEmail = React.forwardRef<HTMLDivElement, WriteEmailProps>(
           <Typography level="title-sm">New message</Typography>
           <ModalClose id="close-icon" onClick={onClose} />
         </Box>
-
         <Box
           sx={{ display: 'flex', flexDirection: 'column', gap: 2, flexShrink: 0 }}
         >
@@ -59,9 +58,7 @@ const WriteEmail = React.forwardRef<HTMLDivElement, WriteEmailProps>(
             <FormLabel>CC</FormLabel>
             <Input placeholder="email@email.com" aria-label="Message" />
           </FormControl>
-
           <Input placeholder="Subject" aria-label="Message" />
-
           <FormControl sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
             <Textarea
               placeholder="Type your message here…"
diff --git a/docs/data/joy/getting-started/templates/files/App.tsx b/docs/data/joy/getting-started/templates/files/App.tsx
index 75d6473255c0c4..fc6dee76a1dddc 100644
--- a/docs/data/joy/getting-started/templates/files/App.tsx
+++ b/docs/data/joy/getting-started/templates/files/App.tsx
@@ -30,7 +30,6 @@ import Menu from '@mui/joy/Menu';
 import MenuButton from '@mui/joy/MenuButton';
 import MenuItem from '@mui/joy/MenuItem';
 
-// Icons import
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
@@ -41,7 +40,6 @@ import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRound
 import ShareRoundedIcon from '@mui/icons-material/ShareRounded';
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 
-// custom
 import Layout from './components/Layout';
 import Navigation from './components/Navigation';
 import Header from './components/Header';
@@ -880,27 +878,22 @@ export default function FilesExample() {
                 <Typography level="body-sm" textColor="text.primary">
                   Image
                 </Typography>
-
                 <Typography level="title-sm">Size</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   3,6 MB (3,258,385 bytes)
                 </Typography>
-
                 <Typography level="title-sm">Location</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   Travel pictures
                 </Typography>
-
                 <Typography level="title-sm">Owner</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   Michael Scott
                 </Typography>
-
                 <Typography level="title-sm">Modified</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   26 October 2016
                 </Typography>
-
                 <Typography level="title-sm">Created</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   5 August 2016
diff --git a/docs/data/joy/getting-started/templates/files/components/Header.tsx b/docs/data/joy/getting-started/templates/files/components/Header.tsx
index d7698283a18c05..2fc94c3ccab355 100644
--- a/docs/data/joy/getting-started/templates/files/components/Header.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Header.tsx
@@ -17,7 +17,6 @@ import Drawer from '@mui/joy/Drawer';
 import ModalClose from '@mui/joy/ModalClose';
 import DialogTitle from '@mui/joy/DialogTitle';
 
-// Icons import
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
@@ -29,7 +28,6 @@ import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 
-// Custom
 import Navigation from './Navigation';
 
 function ColorSchemeToggle() {
@@ -139,7 +137,6 @@ export default function Header() {
           </Box>
         </Drawer>
       </Box>
-
       <Box
         sx={{
           display: 'flex',
diff --git a/docs/data/joy/getting-started/templates/files/components/Layout.tsx b/docs/data/joy/getting-started/templates/files/components/Layout.tsx
index 505bf26d71c71c..20701467d6d287 100644
--- a/docs/data/joy/getting-started/templates/files/components/Layout.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Layout.tsx
@@ -106,16 +106,16 @@ function Main(props: BoxProps) {
   );
 }
 
-function SideDrawer({
-  onClose,
-  ...props
-}: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> }) {
+function SideDrawer(
+  props: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> },
+) {
+  const { onClose, ...other } = props;
   return (
     <Box
-      {...props}
+      {...other}
       sx={[
         { position: 'fixed', zIndex: 1200, width: '100%', height: '100%' },
-        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
       ]}
     >
       <Box
diff --git a/docs/data/joy/getting-started/templates/files/components/Menu.tsx b/docs/data/joy/getting-started/templates/files/components/Menu.tsx
index 619cea164ec016..9eb339005910d4 100644
--- a/docs/data/joy/getting-started/templates/files/components/Menu.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Menu.tsx
@@ -3,15 +3,12 @@ import JoyMenu, { MenuActions } from '@mui/joy/Menu';
 import MenuItem from '@mui/joy/MenuItem';
 import { ListActionTypes } from '@mui/base/useList';
 
-function Menu({
-  control,
-  menus,
-  id,
-}: {
+export default function Menu(props: {
   control: React.ReactElement;
   id: string;
   menus: Array<{ label: string } & { [k: string]: any }>;
 }) {
+  const { control, menus, id } = props;
   const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
     null,
   );
@@ -97,5 +94,3 @@ function Menu({
     </React.Fragment>
   );
 }
-
-export default Menu;
diff --git a/docs/data/joy/getting-started/templates/files/components/Navigation.tsx b/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
index 49714ae68ab300..d554d71d59d300 100644
--- a/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
@@ -7,7 +7,6 @@ import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import ListItemContent from '@mui/joy/ListItemContent';
 
-// Icons import
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import ShareRoundedIcon from '@mui/icons-material/ShareRounded';
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
diff --git a/docs/data/joy/getting-started/templates/files/components/TableFiles.tsx b/docs/data/joy/getting-started/templates/files/components/TableFiles.tsx
index 03d00b25b77c10..5312716dfa849d 100644
--- a/docs/data/joy/getting-started/templates/files/components/TableFiles.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/TableFiles.tsx
@@ -4,13 +4,10 @@ import AvatarGroup from '@mui/joy/AvatarGroup';
 import Typography from '@mui/joy/Typography';
 import Table from '@mui/joy/Table';
 
-// Icons import
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 
-// custom
-
-function TableFiles() {
+export default function TableFiles() {
   return (
     <div>
       <Table
@@ -192,5 +189,3 @@ function TableFiles() {
     </div>
   );
 }
-
-export default TableFiles;
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
index ab65ef650aad61..b31f5fa690a8c4 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
-
 import Box from '@mui/joy/Box';
 import CssBaseline from '@mui/joy/CssBaseline';
 import IconButton from '@mui/joy/IconButton';
 
-// Icons import
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
 
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx
index 7d9c8539d0979c..962da7539ff68f 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx
@@ -29,7 +29,6 @@ export default function HeroLeft01() {
       <Typography>
         Already a member? <Link fontWeight="lg">Sign in</Link>
       </Typography>
-
       <Typography
         level="body-xs"
         sx={{
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft03.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft03.tsx
index 7a753923893bcb..44799518299485 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft03.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft03.tsx
@@ -62,7 +62,6 @@ export default function HeroLeft03() {
           designers and developers.
         </Typography>
       </Box>
-
       <Typography
         level="body-xs"
         sx={{
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft04.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft04.tsx
index 8d271104c685ba..1ce4bcc9813e30 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft04.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft04.tsx
@@ -45,7 +45,6 @@ export default function HeroLeft04() {
           Watch Video
         </Button>
       </Box>
-
       <Typography
         level="body-xs"
         sx={{
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft05.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft05.tsx
index 78f5fcf395e481..ec53b078b1de57 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft05.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft05.tsx
@@ -39,7 +39,6 @@ export default function HeroLeft05() {
           <b>Privacy Policy</b>
         </Link>
       </Typography>
-
       <Typography
         level="body-xs"
         sx={{
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft06.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft06.tsx
index a6542f55b444f6..01b0ee9414a222 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft06.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft06.tsx
@@ -46,7 +46,6 @@ export default function HeroLeft06() {
       >
         <b>John Seed</b>, Apple Inc.
       </Typography>
-
       <Typography
         level="body-xs"
         sx={{
diff --git a/docs/data/joy/getting-started/templates/messages/components/AvatarWithStatus.tsx b/docs/data/joy/getting-started/templates/messages/components/AvatarWithStatus.tsx
index 5e95af063c1c33..3bd6f3c7ce34c3 100644
--- a/docs/data/joy/getting-started/templates/messages/components/AvatarWithStatus.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/AvatarWithStatus.tsx
@@ -6,10 +6,8 @@ type AvatarWithStatusProps = AvatarProps & {
   online?: boolean;
 };
 
-export default function AvatarWithStatus({
-  online = false,
-  ...rest
-}: AvatarWithStatusProps) {
+export default function AvatarWithStatus(props: AvatarWithStatusProps) {
+  const { online = false, ...other } = props;
   return (
     <div>
       <Badge
@@ -19,7 +17,7 @@ export default function AvatarWithStatus({
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         badgeInset="4px 4px"
       >
-        <Avatar size="sm" {...rest} />
+        <Avatar size="sm" {...other} />
       </Badge>
     </div>
   );
diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx
index 903c3eefa4c4e7..72089674e88d7c 100644
--- a/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx
@@ -14,13 +14,8 @@ type ChatBubbleProps = MessageProps & {
   variant: 'sent' | 'received';
 };
 
-export default function ChatBubble({
-  content,
-  variant,
-  timestamp,
-  attachment = undefined,
-  sender,
-}: ChatBubbleProps) {
+export default function ChatBubble(props: ChatBubbleProps) {
+  const { content, variant, timestamp, attachment = undefined, sender } = props;
   const isSent = variant === 'sent';
   const [isHovered, setIsHovered] = React.useState<boolean>(false);
   const [isLiked, setIsLiked] = React.useState<boolean>(false);
@@ -117,7 +112,6 @@ export default function ChatBubble({
               >
                 {isLiked ? '❤️' : <FavoriteBorderIcon />}
               </IconButton>
-
               <IconButton
                 variant={isCelebrated ? 'soft' : 'plain'}
                 color={isCelebrated ? 'warning' : 'neutral'}
diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx
index f65704083d1b7d..913f8dc9b1be99 100644
--- a/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx
@@ -19,13 +19,8 @@ type ChatListItemProps = ListItemButtonProps & {
   setSelectedChat: (chat: ChatProps) => void;
 };
 
-export default function ChatListItem({
-  id,
-  sender,
-  messages,
-  selectedChatId,
-  setSelectedChat,
-}: ChatListItemProps) {
+export default function ChatListItem(props: ChatListItemProps) {
+  const { id, sender, messages, selectedChatId, setSelectedChat } = props;
   const selected = selectedChatId === id;
   return (
     <React.Fragment>
diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
index abf81d7e13a167..adf0c5f3fa3258 100644
--- a/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
@@ -17,11 +17,8 @@ type ChatsPaneProps = {
   selectedChatId: string;
 };
 
-export default function ChatsPane({
-  chats,
-  setSelectedChat,
-  selectedChatId,
-}: ChatsPaneProps) {
+export default function ChatsPane(props: ChatsPaneProps) {
+  const { chats, setSelectedChat, selectedChatId } = props;
   return (
     <Sheet
       sx={{
@@ -57,7 +54,6 @@ export default function ChatsPane({
         >
           Messages
         </Typography>
-
         <IconButton
           variant="plain"
           aria-label="edit"
@@ -67,7 +63,6 @@ export default function ChatsPane({
         >
           <EditNoteRoundedIcon />
         </IconButton>
-
         <IconButton
           variant="plain"
           aria-label="edit"
diff --git a/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx
index d1b512bb8a123b..d93d022fa1e859 100644
--- a/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx
@@ -5,11 +5,8 @@ import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeIcon from '@mui/icons-material/LightMode';
 
-export default function ColorSchemeToggle({
-  onClick,
-  sx,
-  ...props
-}: IconButtonProps) {
+export default function ColorSchemeToggle(props: IconButtonProps) {
+  const { onClick, sx, ...other } = props;
   const { mode, setMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -21,7 +18,7 @@ export default function ColorSchemeToggle({
         size="sm"
         variant="outlined"
         color="neutral"
-        {...props}
+        {...other}
         sx={sx}
         disabled
       />
@@ -33,7 +30,7 @@ export default function ColorSchemeToggle({
       size="sm"
       variant="outlined"
       color="neutral"
-      {...props}
+      {...other}
       onClick={(event) => {
         if (mode === 'light') {
           setMode('dark');
diff --git a/docs/data/joy/getting-started/templates/messages/components/MessageInput.tsx b/docs/data/joy/getting-started/templates/messages/components/MessageInput.tsx
index 468279d9a48568..714b9cab7c1569 100644
--- a/docs/data/joy/getting-started/templates/messages/components/MessageInput.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/MessageInput.tsx
@@ -17,11 +17,8 @@ export type MessageInputProps = {
   onSubmit: () => void;
 };
 
-export default function MessageInput({
-  textAreaValue,
-  setTextAreaValue,
-  onSubmit,
-}: MessageInputProps) {
+export default function MessageInput(props: MessageInputProps) {
+  const { textAreaValue, setTextAreaValue, onSubmit } = props;
   const textAreaRef = React.useRef<HTMLDivElement>(null);
   const handleClick = () => {
     if (textAreaValue.trim() !== '') {
diff --git a/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx b/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx
index 3912a03a7dfc73..7d3ac013f470b1 100644
--- a/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx
@@ -12,7 +12,8 @@ type MessagesPaneProps = {
   chat: ChatProps;
 };
 
-export default function MessagesPane({ chat }: MessagesPaneProps) {
+export default function MessagesPane(props: MessagesPaneProps) {
+  const { chat } = props;
   const [chatMessages, setChatMessages] = React.useState(chat.messages);
   const [textAreaValue, setTextAreaValue] = React.useState('');
 
@@ -30,7 +31,6 @@ export default function MessagesPane({ chat }: MessagesPaneProps) {
       }}
     >
       <MessagesPaneHeader sender={chat.sender} />
-
       <Box
         sx={{
           display: 'flex',
@@ -64,7 +64,6 @@ export default function MessagesPane({ chat }: MessagesPaneProps) {
           })}
         </Stack>
       </Box>
-
       <MessageInput
         textAreaValue={textAreaValue}
         setTextAreaValue={setTextAreaValue}
diff --git a/docs/data/joy/getting-started/templates/messages/components/MessagesPaneHeader.tsx b/docs/data/joy/getting-started/templates/messages/components/MessagesPaneHeader.tsx
index 5f38ebdf553229..46dbfdd036fdc1 100644
--- a/docs/data/joy/getting-started/templates/messages/components/MessagesPaneHeader.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/MessagesPaneHeader.tsx
@@ -16,7 +16,8 @@ type MessagesPaneHeaderProps = {
   sender: UserProps;
 };
 
-export default function MessagesPaneHeader({ sender }: MessagesPaneHeaderProps) {
+export default function MessagesPaneHeader(props: MessagesPaneHeaderProps) {
+  const { sender } = props;
   return (
     <Stack
       direction="row"
@@ -69,7 +70,6 @@ export default function MessagesPaneHeader({ sender }: MessagesPaneHeaderProps)
           >
             {sender.name}
           </Typography>
-
           <Typography level="body-sm">{sender.username}</Typography>
         </div>
       </Stack>
@@ -95,7 +95,6 @@ export default function MessagesPaneHeader({ sender }: MessagesPaneHeaderProps)
         >
           View profile
         </Button>
-
         <IconButton size="sm" variant="plain" color="neutral">
           <MoreVertRoundedIcon />
         </IconButton>
diff --git a/docs/data/joy/getting-started/templates/messages/components/MuiLogo.tsx b/docs/data/joy/getting-started/templates/messages/components/MuiLogo.tsx
index fb03654416ad45..b3ca3d30e5326e 100644
--- a/docs/data/joy/getting-started/templates/messages/components/MuiLogo.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/MuiLogo.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import AspectRatio, { AspectRatioProps } from '@mui/joy/AspectRatio';
 
-export default function MuiLogo({ sx, ...props }: AspectRatioProps) {
+export default function MuiLogo(props: AspectRatioProps) {
+  const { sx, ...other } = props;
   return (
     <AspectRatio
       ratio="1"
       variant="plain"
-      {...props}
+      {...other}
       sx={[
         {
           width: 36,
diff --git a/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx b/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
index df6be848131a47..4e08bc5d597e6d 100644
--- a/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Sheet from '@mui/joy/Sheet';
+
 import MessagesPane from './MessagesPane';
 import ChatsPane from './ChatsPane';
 import { ChatProps } from '../types';
@@ -23,10 +24,7 @@ export default function MyProfile() {
     >
       <Sheet
         sx={{
-          position: {
-            xs: 'fixed',
-            sm: 'sticky',
-          },
+          position: { xs: 'fixed', sm: 'sticky' },
           transform: {
             xs: 'translateX(calc(100% * (var(--MessagesPane-slideIn, 0) - 1)))',
             sm: 'none',
diff --git a/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx b/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx
index 8cc4572edc5d53..056dba50cc8fae 100644
--- a/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx
@@ -33,11 +33,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import ColorSchemeToggle from './ColorSchemeToggle';
 import { closeSidebar } from '../utils';
 
-function Toggler({
-  defaultExpanded = false,
-  renderToggle,
-  children,
-}: {
+function Toggler(props: {
   defaultExpanded?: boolean;
   children: React.ReactNode;
   renderToggle: (params: {
@@ -45,6 +41,7 @@ function Toggler({
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   }) => React.ReactNode;
 }) {
+  const { defaultExpanded = false, renderToggle, children } = props;
   const [open, setOpen] = React.useState(defaultExpanded);
   return (
     <React.Fragment>
@@ -70,10 +67,7 @@ export default function Sidebar() {
     <Sheet
       className="Sidebar"
       sx={{
-        position: {
-          xs: 'fixed',
-          md: 'sticky',
-        },
+        position: { xs: 'fixed', md: 'sticky' },
         transform: {
           xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1)))',
           md: 'none',
@@ -157,7 +151,6 @@ export default function Sidebar() {
               </ListItemContent>
             </ListItemButton>
           </ListItem>
-
           <ListItem>
             <ListItemButton>
               <DashboardRoundedIcon />
@@ -166,7 +159,6 @@ export default function Sidebar() {
               </ListItemContent>
             </ListItemButton>
           </ListItem>
-
           <ListItem>
             <ListItemButton
               role="menuitem"
@@ -179,7 +171,6 @@ export default function Sidebar() {
               </ListItemContent>
             </ListItemButton>
           </ListItem>
-
           <ListItem nested>
             <Toggler
               renderToggle={({ open, setOpen }) => (
@@ -210,7 +201,6 @@ export default function Sidebar() {
               </List>
             </Toggler>
           </ListItem>
-
           <ListItem>
             <ListItemButton selected>
               <QuestionAnswerRoundedIcon />
@@ -222,7 +212,6 @@ export default function Sidebar() {
               </Chip>
             </ListItemButton>
           </ListItem>
-
           <ListItem nested>
             <Toggler
               renderToggle={({ open, setOpen }) => (
@@ -257,7 +246,6 @@ export default function Sidebar() {
             </Toggler>
           </ListItem>
         </List>
-
         <List
           size="sm"
           sx={{
diff --git a/docs/data/joy/getting-started/templates/messages/useScript.ts b/docs/data/joy/getting-started/templates/messages/useScript.ts
index 205f011215caa6..01d2cfa7680a4c 100644
--- a/docs/data/joy/getting-started/templates/messages/useScript.ts
+++ b/docs/data/joy/getting-started/templates/messages/useScript.ts
@@ -18,7 +18,7 @@ function getScriptNode(src: string) {
   };
 }
 
-function useScript(src: string): UseScriptStatus {
+export default function useScript(src: string): UseScriptStatus {
   const [status, setStatus] = React.useState<UseScriptStatus>(() => {
     if (typeof window === 'undefined') {
       // SSR Handling - always return 'loading'
@@ -97,5 +97,3 @@ function useScript(src: string): UseScriptStatus {
 
   return status;
 }
-
-export default useScript;
diff --git a/docs/data/joy/getting-started/templates/messages/utils.ts b/docs/data/joy/getting-started/templates/messages/utils.ts
index b5f69ed9b06e3f..ac814adefca930 100644
--- a/docs/data/joy/getting-started/templates/messages/utils.ts
+++ b/docs/data/joy/getting-started/templates/messages/utils.ts
@@ -1,18 +1,18 @@
-export const openSidebar = () => {
+export function openSidebar() {
   if (typeof document !== 'undefined') {
     document.body.style.overflow = 'hidden';
     document.documentElement.style.setProperty('--SideNavigation-slideIn', '1');
   }
-};
+}
 
-export const closeSidebar = () => {
+export function closeSidebar() {
   if (typeof document !== 'undefined') {
     document.documentElement.style.removeProperty('--SideNavigation-slideIn');
     document.body.style.removeProperty('overflow');
   }
-};
+}
 
-export const toggleSidebar = () => {
+export function toggleSidebar() {
   if (typeof window !== 'undefined' && typeof document !== 'undefined') {
     const slideIn = window
       .getComputedStyle(document.documentElement)
@@ -23,23 +23,23 @@ export const toggleSidebar = () => {
       openSidebar();
     }
   }
-};
+}
 
-export const openMessagesPane = () => {
+export function openMessagesPane() {
   if (typeof document !== 'undefined') {
     document.body.style.overflow = 'hidden';
     document.documentElement.style.setProperty('--MessagesPane-slideIn', '1');
   }
-};
+}
 
-export const closeMessagesPane = () => {
+export function closeMessagesPane() {
   if (typeof document !== 'undefined') {
     document.documentElement.style.removeProperty('--MessagesPane-slideIn');
     document.body.style.removeProperty('overflow');
   }
-};
+}
 
-export const toggleMessagesPane = () => {
+export function toggleMessagesPane() {
   if (typeof window !== 'undefined' && typeof document !== 'undefined') {
     const slideIn = window
       .getComputedStyle(document.documentElement)
@@ -50,4 +50,4 @@ export const toggleMessagesPane = () => {
       openMessagesPane();
     }
   }
-};
+}
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/App.tsx b/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
index 5be8b04289b5b8..2c65ef48337e3b 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
@@ -6,7 +6,7 @@ import Button from '@mui/joy/Button';
 import Breadcrumbs from '@mui/joy/Breadcrumbs';
 import Link from '@mui/joy/Link';
 import Typography from '@mui/joy/Typography';
-// icons
+
 import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
@@ -21,7 +21,7 @@ const useEnhancedEffect =
   typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 export default function JoyOrderDashboardTemplate() {
-  const status = useScript(`https://unpkg.com/feather-icons`);
+  const status = useScript('https://unpkg.com/feather-icons');
 
   useEnhancedEffect(() => {
     // Feather icon setup: https://github.com/feathericons/feather#4-replace
@@ -42,20 +42,13 @@ export default function JoyOrderDashboardTemplate() {
           component="main"
           className="MainContent"
           sx={{
-            px: {
-              xs: 2,
-              md: 6,
-            },
+            px: { xs: 2, md: 6 },
             pt: {
               xs: 'calc(12px + var(--Header-height))',
               sm: 'calc(12px + var(--Header-height))',
               md: 3,
             },
-            pb: {
-              xs: 2,
-              sm: 2,
-              md: 3,
-            },
+            pb: { xs: 2, sm: 2, md: 3 },
             flex: 1,
             display: 'flex',
             flexDirection: 'column',
@@ -96,7 +89,7 @@ export default function JoyOrderDashboardTemplate() {
           <Box
             sx={{
               display: 'flex',
-              my: 1,
+              mb: 1,
               gap: 1,
               flexDirection: { xs: 'column', sm: 'row' },
               alignItems: { xs: 'start', sm: 'center' },
@@ -104,7 +97,9 @@ export default function JoyOrderDashboardTemplate() {
               justifyContent: 'space-between',
             }}
           >
-            <Typography level="h2">Orders</Typography>
+            <Typography level="h2" component="h1">
+              Orders
+            </Typography>
             <Button
               color="primary"
               startDecorator={<DownloadRoundedIcon />}
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx
index 9c9726f32f394c..45e221abdad18e 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx
@@ -5,11 +5,8 @@ import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeIcon from '@mui/icons-material/LightMode';
 
-export default function ColorSchemeToggle({
-  onClick,
-  sx,
-  ...props
-}: IconButtonProps) {
+export default function ColorSchemeToggle(props: IconButtonProps) {
+  const { onClick, sx, ...other } = props;
   const { mode, setMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -21,7 +18,7 @@ export default function ColorSchemeToggle({
         size="sm"
         variant="outlined"
         color="neutral"
-        {...props}
+        {...other}
         sx={sx}
         disabled
       />
@@ -33,7 +30,7 @@ export default function ColorSchemeToggle({
       size="sm"
       variant="outlined"
       color="neutral"
-      {...props}
+      {...other}
       onClick={(event) => {
         if (mode === 'light') {
           setMode('dark');
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/MuiLogo.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/MuiLogo.tsx
index bc5deec202ba9c..a45026b6e385dd 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/MuiLogo.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/MuiLogo.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import AspectRatio, { AspectRatioProps } from '@mui/joy/AspectRatio';
 
-export default function MuiLogo({ sx, ...props }: AspectRatioProps) {
+export default function MuiLogo(props: AspectRatioProps) {
+  const { sx, ...other } = props;
   return (
     <AspectRatio
       ratio="1"
       variant="plain"
-      {...props}
+      {...other}
       sx={[
         {
           width: 36,
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderList.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderList.tsx
index 0daf7b0e09d943..99798d4b649ac7 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderList.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderList.tsx
@@ -17,7 +17,7 @@ import Menu from '@mui/joy/Menu';
 import MenuButton from '@mui/joy/MenuButton';
 import MenuItem from '@mui/joy/MenuItem';
 import Dropdown from '@mui/joy/Dropdown';
-// icons
+
 import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import BlockIcon from '@mui/icons-material/Block';
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx
index 87a7147fedccf8..260f57eff506e0 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx
@@ -24,7 +24,7 @@ import Menu from '@mui/joy/Menu';
 import MenuButton from '@mui/joy/MenuButton';
 import MenuItem from '@mui/joy/MenuItem';
 import Dropdown from '@mui/joy/Dropdown';
-// icons
+
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import SearchIcon from '@mui/icons-material/Search';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
@@ -297,7 +297,6 @@ export default function OrderTable() {
           <Option value="cancelled">Cancelled</Option>
         </Select>
       </FormControl>
-
       <FormControl size="sm">
         <FormLabel>Category</FormLabel>
         <Select size="sm" placeholder="All">
@@ -307,7 +306,6 @@ export default function OrderTable() {
           <Option value="debit">Debit</Option>
         </Select>
       </FormControl>
-
       <FormControl size="sm">
         <FormLabel>Customer</FormLabel>
         <Select size="sm" placeholder="All">
@@ -327,10 +325,7 @@ export default function OrderTable() {
       <Sheet
         className="SearchAndFilters-mobile"
         sx={{
-          display: {
-            xs: 'flex',
-            sm: 'none',
-          },
+          display: { xs: 'flex', sm: 'none' },
           my: 1,
           gap: 1,
         }}
@@ -370,17 +365,11 @@ export default function OrderTable() {
         sx={{
           borderRadius: 'sm',
           py: 2,
-          display: {
-            xs: 'none',
-            sm: 'flex',
-          },
+          display: { xs: 'none', sm: 'flex' },
           flexWrap: 'wrap',
           gap: 1.5,
           '& > *': {
-            minWidth: {
-              xs: '120px',
-              md: '160px',
-            },
+            minWidth: { xs: '120px', md: '160px' },
           },
         }}
       >
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/Sidebar.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/Sidebar.tsx
index 15c5c1310c47e6..b8f63d755ce5e4 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/Sidebar.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/Sidebar.tsx
@@ -70,10 +70,7 @@ export default function Sidebar() {
     <Sheet
       className="Sidebar"
       sx={{
-        position: {
-          xs: 'fixed',
-          md: 'sticky',
-        },
+        position: { xs: 'fixed', md: 'sticky' },
         transform: {
           xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1)))',
           md: 'none',
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/useScript.ts b/docs/data/joy/getting-started/templates/order-dashboard/useScript.ts
index 205f011215caa6..01d2cfa7680a4c 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/useScript.ts
+++ b/docs/data/joy/getting-started/templates/order-dashboard/useScript.ts
@@ -18,7 +18,7 @@ function getScriptNode(src: string) {
   };
 }
 
-function useScript(src: string): UseScriptStatus {
+export default function useScript(src: string): UseScriptStatus {
   const [status, setStatus] = React.useState<UseScriptStatus>(() => {
     if (typeof window === 'undefined') {
       // SSR Handling - always return 'loading'
@@ -97,5 +97,3 @@ function useScript(src: string): UseScriptStatus {
 
   return status;
 }
-
-export default useScript;
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/utils.ts b/docs/data/joy/getting-started/templates/order-dashboard/utils.ts
index 83220658582ce6..58fdec53e099e7 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/utils.ts
+++ b/docs/data/joy/getting-started/templates/order-dashboard/utils.ts
@@ -1,18 +1,18 @@
-export const openSidebar = () => {
+export function openSidebar() {
   if (typeof document !== 'undefined') {
     document.body.style.overflow = 'hidden';
     document.documentElement.style.setProperty('--SideNavigation-slideIn', '1');
   }
-};
+}
 
-export const closeSidebar = () => {
+export function closeSidebar() {
   if (typeof document !== 'undefined') {
     document.documentElement.style.removeProperty('--SideNavigation-slideIn');
     document.body.style.removeProperty('overflow');
   }
-};
+}
 
-export const toggleSidebar = () => {
+export function toggleSidebar() {
   if (typeof window !== 'undefined' && typeof document !== 'undefined') {
     const slideIn = window
       .getComputedStyle(document.documentElement)
@@ -23,4 +23,4 @@ export const toggleSidebar = () => {
       openSidebar();
     }
   }
-};
+}
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/App.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/App.tsx
index 2f1ce23d28b844..f060c5b951fe8b 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/App.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/App.tsx
@@ -17,15 +17,8 @@ export default function JoyOrderDashboardTemplate() {
           component="main"
           className="MainContent"
           sx={{
-            pt: {
-              xs: 'calc(12px + var(--Header-height))',
-              md: 3,
-            },
-            pb: {
-              xs: 2,
-              sm: 2,
-              md: 3,
-            },
+            pt: { xs: 'calc(12px + var(--Header-height))', md: 3 },
+            pb: { xs: 2, sm: 2, md: 3 },
             flex: 1,
             display: 'flex',
             flexDirection: 'column',
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx
index d1b512bb8a123b..8ed37802582a17 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx
@@ -5,11 +5,8 @@ import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeIcon from '@mui/icons-material/LightMode';
 
-export default function ColorSchemeToggle({
-  onClick,
-  sx,
-  ...props
-}: IconButtonProps) {
+export default function ColorSchemeToggle(props: IconButtonProps) {
+  const { onClick, sx, ...other } = props;
   const { mode, setMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -21,7 +18,7 @@ export default function ColorSchemeToggle({
         size="sm"
         variant="outlined"
         color="neutral"
-        {...props}
+        {...other}
         sx={sx}
         disabled
       />
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx
index 9035176683ea57..ed38f483258652 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx
@@ -7,10 +7,11 @@ import FormLabel from '@mui/joy/FormLabel';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Typography from '@mui/joy/Typography';
 
-export default function ContrySelector({ sx, ...props }: FormControlProps) {
+export default function ContrySelector(props: FormControlProps) {
+  const { sx, ...other } = props;
   return (
     <FormControl
-      {...props}
+      {...other}
       sx={[{ display: { sm: 'contents' } }, ...(Array.isArray(sx) ? sx : [sx])]}
     >
       <FormLabel>Country</FormLabel>
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx
index d04990e770b3d6..2d132f8a5ace3a 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx
@@ -7,17 +7,12 @@ import AspectRatio from '@mui/joy/AspectRatio';
 
 import FileUploadRoundedIcon from '@mui/icons-material/FileUploadRounded';
 
-export default function DropZone({
-  icon,
-  sx,
-  ...props
-}: CardProps & {
-  icon?: React.ReactElement;
-}) {
+export default function DropZone(props: CardProps & { icon?: React.ReactElement }) {
+  const { icon, sx, ...other } = props;
   return (
     <Card
       variant="soft"
-      {...props}
+      {...other}
       sx={[
         {
           borderRadius: 'sm',
@@ -44,7 +39,6 @@ export default function DropZone({
       >
         <div>{icon ?? <FileUploadRoundedIcon />}</div>
       </AspectRatio>
-
       <Typography level="body-sm" textAlign="center">
         <Link component="button" overlay>
           Click to upload
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/EditorToolbar.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/EditorToolbar.tsx
index bd916e6fa70b5c..3896e9a18bf140 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/EditorToolbar.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/EditorToolbar.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import Box, { BoxProps } from '@mui/joy/Box';
 import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
@@ -10,10 +9,11 @@ import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
 import StrikethroughSRoundedIcon from '@mui/icons-material/StrikethroughSRounded';
 import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
 
-export default function EditorToolbar({ sx, ...props }: BoxProps) {
+export default function EditorToolbar(props: BoxProps) {
+  const { sx, ...other } = props;
   return (
     <Box
-      {...props}
+      {...other}
       sx={[
         { display: 'flex', gap: 0.5, '& > button': { '--Icon-fontSize': '16px' } },
         ...(Array.isArray(sx) ? sx : [sx]),
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx
index ad9ae6f4c0a891..35b6aaf329f55f 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx
@@ -11,24 +11,20 @@ import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRound
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import RemoveCircleOutlineRoundedIcon from '@mui/icons-material/RemoveCircleOutlineRounded';
 
-export default function FileUpload({
-  icon,
-  fileName,
-  fileSize,
-  progress,
-  sx,
-  ...props
-}: CardProps & {
-  icon?: React.ReactElement;
-  fileName: string;
-  fileSize: string;
-  progress: number;
-}) {
+export default function FileUpload(
+  props: CardProps & {
+    icon?: React.ReactElement;
+    fileName: string;
+    fileSize: string;
+    progress: number;
+  },
+) {
+  const { icon, fileName, fileSize, progress, sx, ...other } = props;
   return (
     <Card
       variant="outlined"
       orientation="horizontal"
-      {...props}
+      {...other}
       sx={[
         {
           gap: 1.5,
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/MuiLogo.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/MuiLogo.tsx
index fb03654416ad45..b3ca3d30e5326e 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/MuiLogo.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/MuiLogo.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import AspectRatio, { AspectRatioProps } from '@mui/joy/AspectRatio';
 
-export default function MuiLogo({ sx, ...props }: AspectRatioProps) {
+export default function MuiLogo(props: AspectRatioProps) {
+  const { sx, ...other } = props;
   return (
     <AspectRatio
       ratio="1"
       variant="plain"
-      {...props}
+      {...other}
       sx={[
         {
           width: 36,
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx
index d0dc35646e2b36..f37b12279b4fcb 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx
@@ -37,31 +37,16 @@ import EditorToolbar from './EditorToolbar';
 
 export default function MyProfile() {
   return (
-    <Box
-      sx={{
-        flex: 1,
-        width: '100%',
-      }}
-    >
+    <Box sx={{ flex: 1, width: '100%' }}>
       <Box
         sx={{
           position: 'sticky',
-          top: {
-            sm: -100,
-            md: -110,
-          },
+          top: { sm: -100, md: -110 },
           bgcolor: 'background.body',
           zIndex: 9995,
         }}
       >
-        <Box
-          sx={{
-            px: {
-              xs: 2,
-              md: 6,
-            },
-          }}
-        >
+        <Box sx={{ px: { xs: 2, md: 6 } }}>
           <Breadcrumbs
             size="sm"
             aria-label="breadcrumbs"
@@ -89,13 +74,7 @@ export default function MyProfile() {
               My profile
             </Typography>
           </Breadcrumbs>
-          <Typography
-            level="h2"
-            sx={{
-              mt: 1,
-              mb: 2,
-            }}
-          >
+          <Typography level="h2" component="h1" sx={{ mt: 1, mb: 2 }}>
             My profile
           </Typography>
         </Box>
@@ -109,10 +88,7 @@ export default function MyProfile() {
             tabFlex={1}
             size="sm"
             sx={{
-              pl: {
-                xs: 0,
-                md: 4,
-              },
+              pl: { xs: 0, md: 4 },
               justifyContent: 'left',
               [`&& .${tabClasses.root}`]: {
                 flex: 'initial',
@@ -142,21 +118,14 @@ export default function MyProfile() {
           </TabList>
         </Tabs>
       </Box>
-
       <Stack
         spacing={4}
         sx={{
           display: 'flex',
           maxWidth: '800px',
           mx: 'auto',
-          px: {
-            xs: 2,
-            md: 6,
-          },
-          py: {
-            xs: 2,
-            md: 3,
-          },
+          px: { xs: 2, md: 6 },
+          py: { xs: 2, md: 3 },
         }}
       >
         <Card>
@@ -207,13 +176,7 @@ export default function MyProfile() {
               <Stack spacing={1}>
                 <FormLabel>Name</FormLabel>
                 <FormControl
-                  sx={{
-                    display: {
-                      sm: 'flex-column',
-                      md: 'flex-row',
-                    },
-                    gap: 2,
-                  }}
+                  sx={{ display: { sm: 'flex-column', md: 'flex-row' }, gap: 2 }}
                 >
                   <Input size="sm" placeholder="First name" />
                   <Input size="sm" placeholder="Last name" sx={{ flexGrow: 1 }} />
@@ -317,7 +280,6 @@ export default function MyProfile() {
                 </FormControl>
               </Stack>
             </Stack>
-
             <FormControl>
               <FormLabel>Role</FormLabel>
               <Input size="sm" defaultValue="UI Developer" />
@@ -333,7 +295,6 @@ export default function MyProfile() {
                 sx={{ flexGrow: 1 }}
               />
             </FormControl>
-
             <div>
               <CountrySelector />
             </div>
@@ -410,7 +371,6 @@ export default function MyProfile() {
               Share a few snippets of your work.
             </Typography>
           </Box>
-
           <Divider />
           <Stack spacing={2} sx={{ my: 1 }}>
             <DropZone />
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/Sidebar.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/Sidebar.tsx
index 50c6caba5d3e76..79d4941f7e001b 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/Sidebar.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/Sidebar.tsx
@@ -70,10 +70,7 @@ export default function Sidebar() {
     <Sheet
       className="Sidebar"
       sx={{
-        position: {
-          xs: 'fixed',
-          md: 'sticky',
-        },
+        position: { xs: 'fixed', md: 'sticky' },
         transform: {
           xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1)))',
           md: 'none',
@@ -179,7 +176,6 @@ export default function Sidebar() {
               </ListItemContent>
             </ListItemButton>
           </ListItem>
-
           <ListItem nested>
             <Toggler
               renderToggle={({ open, setOpen }) => (
@@ -210,7 +206,6 @@ export default function Sidebar() {
               </List>
             </Toggler>
           </ListItem>
-
           <ListItem>
             <ListItemButton
               role="menuitem"
@@ -226,7 +221,6 @@ export default function Sidebar() {
               </Chip>
             </ListItemButton>
           </ListItem>
-
           <ListItem nested>
             <Toggler
               defaultExpanded
@@ -256,7 +250,6 @@ export default function Sidebar() {
             </Toggler>
           </ListItem>
         </List>
-
         <List
           size="sm"
           sx={{
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/useScript.ts b/docs/data/joy/getting-started/templates/profile-dashboard/useScript.ts
index 205f011215caa6..01d2cfa7680a4c 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/useScript.ts
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/useScript.ts
@@ -18,7 +18,7 @@ function getScriptNode(src: string) {
   };
 }
 
-function useScript(src: string): UseScriptStatus {
+export default function useScript(src: string): UseScriptStatus {
   const [status, setStatus] = React.useState<UseScriptStatus>(() => {
     if (typeof window === 'undefined') {
       // SSR Handling - always return 'loading'
@@ -97,5 +97,3 @@ function useScript(src: string): UseScriptStatus {
 
   return status;
 }
-
-export default useScript;
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/utils.ts b/docs/data/joy/getting-started/templates/profile-dashboard/utils.ts
index 83220658582ce6..58fdec53e099e7 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/utils.ts
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/utils.ts
@@ -1,18 +1,18 @@
-export const openSidebar = () => {
+export function openSidebar() {
   if (typeof document !== 'undefined') {
     document.body.style.overflow = 'hidden';
     document.documentElement.style.setProperty('--SideNavigation-slideIn', '1');
   }
-};
+}
 
-export const closeSidebar = () => {
+export function closeSidebar() {
   if (typeof document !== 'undefined') {
     document.documentElement.style.removeProperty('--SideNavigation-slideIn');
     document.body.style.removeProperty('overflow');
   }
-};
+}
 
-export const toggleSidebar = () => {
+export function toggleSidebar() {
   if (typeof window !== 'undefined' && typeof document !== 'undefined') {
     const slideIn = window
       .getComputedStyle(document.documentElement)
@@ -23,4 +23,4 @@ export const toggleSidebar = () => {
       openSidebar();
     }
   }
-};
+}
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/App.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/App.tsx
index 1cc862e208fff5..ad33a09ca31c9f 100644
--- a/docs/data/joy/getting-started/templates/rental-dashboard/App.tsx
+++ b/docs/data/joy/getting-started/templates/rental-dashboard/App.tsx
@@ -37,7 +37,6 @@ export default function RentalDashboard() {
           <HeaderSection />
           <Search />
         </Stack>
-
         <Box
           sx={{
             gridRow: 'span 3',
@@ -48,7 +47,6 @@ export default function RentalDashboard() {
               'url("https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3731&q=80")',
           }}
         />
-
         <Stack spacing={2} sx={{ px: { xs: 2, md: 4 }, pt: 2, minHeight: 0 }}>
           <Filters />
           <Stack spacing={2} sx={{ overflow: 'auto' }}>
@@ -91,7 +89,6 @@ export default function RentalDashboard() {
             />
           </Stack>
         </Stack>
-
         <Pagination />
       </Box>
     </CssVarsProvider>
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx
index d1b512bb8a123b..d93d022fa1e859 100644
--- a/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx
+++ b/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx
@@ -5,11 +5,8 @@ import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeIcon from '@mui/icons-material/LightMode';
 
-export default function ColorSchemeToggle({
-  onClick,
-  sx,
-  ...props
-}: IconButtonProps) {
+export default function ColorSchemeToggle(props: IconButtonProps) {
+  const { onClick, sx, ...other } = props;
   const { mode, setMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -21,7 +18,7 @@ export default function ColorSchemeToggle({
         size="sm"
         variant="outlined"
         color="neutral"
-        {...props}
+        {...other}
         sx={sx}
         disabled
       />
@@ -33,7 +30,7 @@ export default function ColorSchemeToggle({
       size="sm"
       variant="outlined"
       color="neutral"
-      {...props}
+      {...other}
       onClick={(event) => {
         if (mode === 'light') {
           setMode('dark');
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx
index 1c46f611d79ae5..9c5999e16a1c3a 100644
--- a/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx
+++ b/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx
@@ -7,9 +7,10 @@ import FormLabel from '@mui/joy/FormLabel';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Typography from '@mui/joy/Typography';
 
-export default function ContrySelector({ sx, ...props }: FormControlProps) {
+export default function ContrySelector(props: FormControlProps) {
+  const { sx, ...other } = props;
   return (
-    <FormControl {...props} sx={sx}>
+    <FormControl {...other} sx={sx}>
       <FormLabel>Country</FormLabel>
       <Autocomplete
         autoHighlight
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/HeaderSection.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/HeaderSection.tsx
index 45fc2554b81781..ffdbf0ee4c02ff 100644
--- a/docs/data/joy/getting-started/templates/rental-dashboard/components/HeaderSection.tsx
+++ b/docs/data/joy/getting-started/templates/rental-dashboard/components/HeaderSection.tsx
@@ -8,7 +8,6 @@ export default function HeaderSection() {
       <Stack direction="row" justifyContent="space-between" sx={{ width: '100%' }}>
         <Typography level="h2">Rental properties</Typography>
       </Stack>
-
       <Typography level="body-md" color="neutral">
         Book your next stay at one of our properties.
       </Typography>
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/MuiLogo.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/MuiLogo.tsx
index fb03654416ad45..b3ca3d30e5326e 100644
--- a/docs/data/joy/getting-started/templates/rental-dashboard/components/MuiLogo.tsx
+++ b/docs/data/joy/getting-started/templates/rental-dashboard/components/MuiLogo.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import AspectRatio, { AspectRatioProps } from '@mui/joy/AspectRatio';
 
-export default function MuiLogo({ sx, ...props }: AspectRatioProps) {
+export default function MuiLogo(props: AspectRatioProps) {
+  const { sx, ...other } = props;
   return (
     <AspectRatio
       ratio="1"
       variant="plain"
-      {...props}
+      {...other}
       sx={[
         {
           width: 36,
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/RentalCard.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/RentalCard.tsx
index cfb0f31072901e..3c3fcba1e2b731 100644
--- a/docs/data/joy/getting-started/templates/rental-dashboard/components/RentalCard.tsx
+++ b/docs/data/joy/getting-started/templates/rental-dashboard/components/RentalCard.tsx
@@ -23,13 +23,8 @@ type RentalCardProps = {
   title: React.ReactNode;
 };
 
-export default function RentalCard({
-  category,
-  title,
-  rareFind = false,
-  liked = false,
-  image,
-}: RentalCardProps) {
+export default function RentalCard(props: RentalCardProps) {
+  const { category, title, rareFind = false, liked = false, image } = props;
   const [isLiked, setIsLiked] = React.useState(liked);
   return (
     <Card
@@ -129,7 +124,6 @@ export default function RentalCard({
             <FavoriteRoundedIcon />
           </IconButton>
         </Stack>
-
         <Stack
           spacing="0.25rem 1rem"
           direction="row"
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/ToggleGroup.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/ToggleGroup.tsx
index c0c606f9b8a96b..ae4ff99ccf15d0 100644
--- a/docs/data/joy/getting-started/templates/rental-dashboard/components/ToggleGroup.tsx
+++ b/docs/data/joy/getting-started/templates/rental-dashboard/components/ToggleGroup.tsx
@@ -12,7 +12,8 @@ type ToggleGroupProps = {
   options: Option[];
 };
 
-export default function ToggleGroup({ options }: ToggleGroupProps) {
+export default function ToggleGroup(props: ToggleGroupProps) {
+  const { options } = props;
   const [selectedOption, setSelectedOption] = React.useState(options[0].value);
 
   return (
diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
index 77865e8a5c8522..fffa8e437615a0 100644
--- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
+++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
@@ -27,7 +27,8 @@ interface SignInFormElement extends HTMLFormElement {
   readonly elements: FormElements;
 }
 
-function ColorSchemeToggle({ onClick, ...props }: IconButtonProps) {
+function ColorSchemeToggle(props: IconButtonProps) {
+  const { onClick, ...other } = props;
   const { mode, setMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -43,7 +44,7 @@ function ColorSchemeToggle({ onClick, ...props }: IconButtonProps) {
       variant="outlined"
       color="neutral"
       aria-label="toggle light/dark mode"
-      {...props}
+      {...other}
       onClick={(event) => {
         if (mode === 'light') {
           setMode('dark');
@@ -109,13 +110,7 @@ export default function JoySignInSideTemplate() {
               justifyContent: 'space-between',
             }}
           >
-            <Box
-              sx={{
-                gap: 2,
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
+            <Box sx={{ gap: 2, display: 'flex', alignItems: 'center' }}>
               <IconButton variant="soft" color="primary" size="sm">
                 <BadgeRoundedIcon />
               </IconButton>
@@ -156,7 +151,6 @@ export default function JoySignInSideTemplate() {
                   </Link>
                 </Typography>
               </Stack>
-
               <Button
                 variant="soft"
                 color="neutral"
diff --git a/docs/data/joy/getting-started/templates/team/App.tsx b/docs/data/joy/getting-started/templates/team/App.tsx
index 16c2864030a94a..f516d8a15bab94 100644
--- a/docs/data/joy/getting-started/templates/team/App.tsx
+++ b/docs/data/joy/getting-started/templates/team/App.tsx
@@ -27,14 +27,12 @@ import AccordionSummary, {
   accordionSummaryClasses,
 } from '@mui/joy/AccordionSummary';
 
-// Icons import
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
 import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
 import PeopleAltRoundedIcon from '@mui/icons-material/PeopleAltRounded';
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import PersonRoundedIcon from '@mui/icons-material/PersonRounded';
 
-// custom
 import Layout from './components/Layout';
 import Header from './components/Header';
 import Navigation from './components/Navigation';
@@ -211,7 +209,6 @@ export default function TeamExample() {
             <Typography level="title-lg" textColor="text.secondary">
               People
             </Typography>
-
             <Button startDecorator={<PersonRoundedIcon />} size="sm">
               Add new
             </Button>
diff --git a/docs/data/joy/getting-started/templates/team/components/Header.tsx b/docs/data/joy/getting-started/templates/team/components/Header.tsx
index b50ff476c5c9c4..107e560ea42929 100644
--- a/docs/data/joy/getting-started/templates/team/components/Header.tsx
+++ b/docs/data/joy/getting-started/templates/team/components/Header.tsx
@@ -17,7 +17,6 @@ import Drawer from '@mui/joy/Drawer';
 import ModalClose from '@mui/joy/ModalClose';
 import DialogTitle from '@mui/joy/DialogTitle';
 
-// Icons import
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
@@ -29,7 +28,6 @@ import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 
-// Custom
 import TeamNav from './Navigation';
 
 function ColorSchemeToggle() {
diff --git a/docs/data/joy/getting-started/templates/team/components/Layout.tsx b/docs/data/joy/getting-started/templates/team/components/Layout.tsx
index 4af5f2a3384c2b..d3138128478d26 100644
--- a/docs/data/joy/getting-started/templates/team/components/Layout.tsx
+++ b/docs/data/joy/getting-started/templates/team/components/Layout.tsx
@@ -107,16 +107,16 @@ function Main(props: BoxProps) {
   );
 }
 
-function SideDrawer({
-  onClose,
-  ...props
-}: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> }) {
+function SideDrawer(
+  props: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> },
+) {
+  const { onClose, ...other } = props;
   return (
     <Box
-      {...props}
+      {...other}
       sx={[
         { position: 'fixed', zIndex: 1200, width: '100%', height: '100%' },
-        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
       ]}
     >
       <Box
@@ -139,7 +139,7 @@ function SideDrawer({
           bgcolor: 'background.surface',
         }}
       >
-        {props.children}
+        {other.children}
       </Sheet>
     </Box>
   );
diff --git a/docs/data/joy/getting-started/templates/team/components/Navigation.tsx b/docs/data/joy/getting-started/templates/team/components/Navigation.tsx
index 4ddf4436c84b11..a93fa7481f2a57 100644
--- a/docs/data/joy/getting-started/templates/team/components/Navigation.tsx
+++ b/docs/data/joy/getting-started/templates/team/components/Navigation.tsx
@@ -7,7 +7,6 @@ import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import ListItemContent from '@mui/joy/ListItemContent';
 
-// Icons import
 import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
 import AssignmentIndRoundedIcon from '@mui/icons-material/AssignmentIndRounded';
 import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';