[blog] Add post to introduce the Connect plugin (@danilo-leal) (#41929)

Author: DiegoAndai

docs/data/joy/components/accordion/AccordionTransition.js

@@ -9,7 +9,7 @@ import Radio from '@mui/joy/Radio';
 import Stack from '@mui/joy/Stack';
 import Typography from '@mui/joy/Typography';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function AccordionTransition() {
   const [transition, setTransition] = React.useState('0.2s ease');

docs/data/joy/components/badge/BadgeAlignment.js

@@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function BadgeAlignment() {
   const [anchorOrigin, setAnchorOrigin] = React.useState({

docs/data/joy/components/badge/BadgeAlignment.tsx

@@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function BadgeAlignment() {
   const [anchorOrigin, setAnchorOrigin] = React.useState<BadgeProps['anchorOrigin']>(

docs/data/joy/components/grid/InteractiveGrid.js

@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 export default function InteractiveGrid() {

docs/data/joy/components/grid/InteractiveGrid.tsx

@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 import { GridDirection } from '@mui/system';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 type GridItemsAlignment =

docs/data/joy/components/grid/SpacingGrid.js

@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function SpacingGrid() {
   const [spacing, setSpacing] = React.useState(2);

docs/data/joy/components/grid/SpacingGrid.tsx

@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function SpacingGrid() {
   const [spacing, setSpacing] = React.useState(2);

docs/data/joy/components/stack/InteractiveStack.js

@@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio';
 import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 const Item = styled(Sheet)(({ theme }) => ({
   ...theme.typography['body-sm'],

docs/data/joy/components/stack/InteractiveStack.tsx

@@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio';
 import Stack, { StackProps } from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 const Item = styled(Sheet)(({ theme }) => ({
   ...theme.typography['body-sm'],

docs/data/joy/customization/approaches/ButtonThemes.js

@@ -6,7 +6,7 @@ import FormLabel from '@mui/joy/FormLabel';
 import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 const githubTheme = extendTheme({
   cssVarPrefix: 'gh',