[joy-ui][Templates] Update thumbnails (#39938)

Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>

Author: zanivan

docs/data/joy/getting-started/templates/email/components/EmailContent.tsx

@@ -164,7 +164,7 @@ export default function EmailContent() {
           level="title-lg"
           textColor="text.primary"
           endDecorator={
-            <Chip size="sm" variant="outlined" color="warning">
+            <Chip component="span" size="sm" variant="outlined" color="warning">
               Personal
             </Chip>
           }

docs/data/joy/getting-started/templates/files/App.tsx

@@ -384,7 +384,12 @@ export default function FilesExample() {
                       borderRadius: '9999999px',
                     }}
                   >
-                    <IconButton variant="plain" color="neutral" size="sm">
+                    <IconButton
+                      component="span"
+                      variant="plain"
+                      color="neutral"
+                      size="sm"
+                    >
                       <MoreVertRoundedIcon />
                     </IconButton>
                   </MenuButton>
@@ -444,7 +449,12 @@ export default function FilesExample() {
                       maxHeight: '32px',
                     }}
                   >
-                    <IconButton variant="plain" color="neutral" size="sm">
+                    <IconButton
+                      component="span"
+                      variant="plain"
+                      color="neutral"
+                      size="sm"
+                    >
                       <MoreVertRoundedIcon />
                     </IconButton>
                   </MenuButton>
@@ -531,7 +541,12 @@ export default function FilesExample() {
                       maxHeight: '32px',
                     }}
                   >
-                    <IconButton variant="plain" color="neutral" size="sm">
+                    <IconButton
+                      component="span"
+                      variant="plain"
+                      color="neutral"
+                      size="sm"
+                    >
                       <MoreVertRoundedIcon />
                     </IconButton>
                   </MenuButton>
@@ -606,7 +621,12 @@ export default function FilesExample() {
                       maxHeight: '32px',
                     }}
                   >
-                    <IconButton variant="plain" color="neutral" size="sm">
+                    <IconButton
+                      component="span"
+                      variant="plain"
+                      color="neutral"
+                      size="sm"
+                    >
                       <MoreVertRoundedIcon />
                     </IconButton>
                   </MenuButton>
@@ -664,7 +684,12 @@ export default function FilesExample() {
                       borderRadius: '9999999px',
                     }}
                   >
-                    <IconButton variant="plain" color="neutral" size="sm">
+                    <IconButton
+                      component="span"
+                      variant="plain"
+                      color="neutral"
+                      size="sm"
+                    >
                       <MoreVertRoundedIcon />
                     </IconButton>
                   </MenuButton>
@@ -725,7 +750,12 @@ export default function FilesExample() {
                       borderRadius: '9999999px',
                     }}
                   >
-                    <IconButton variant="plain" color="neutral" size="sm">
+                    <IconButton
+                      component="span"
+                      variant="plain"
+                      color="neutral"
+                      size="sm"
+                    >
                       <MoreVertRoundedIcon />
                     </IconButton>
                   </MenuButton>
@@ -792,7 +822,7 @@ export default function FilesExample() {
             <Typography level="title-md" sx={{ flex: 1 }}>
               torres-del-paine.png
             </Typography>
-            <IconButton variant="plain" color="neutral" size="sm">
+            <IconButton component="span" variant="plain" color="neutral" size="sm">
               <CloseRoundedIcon />
             </IconButton>
           </Box>