From ada6251d0bfc9fe3da80badd79e7ad29a1fa991e Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Thu, 12 Oct 2023 17:19:17 +0200
Subject: [PATCH 1/2] [docs] Make overview demo work in codesandbox

---
 docs/data/date-pickers/base-concepts/ComponentFamilies.js  | 5 ++---
 docs/data/date-pickers/base-concepts/ComponentFamilies.tsx | 5 ++---
 docs/data/date-pickers/overview/CommonlyUsedComponents.js  | 5 ++---
 docs/data/date-pickers/overview/CommonlyUsedComponents.tsx | 5 ++---
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.js b/docs/data/date-pickers/base-concepts/ComponentFamilies.js
index 1466da83eadb0..bd3a68987e734 100644
--- a/docs/data/date-pickers/base-concepts/ComponentFamilies.js
+++ b/docs/data/date-pickers/base-concepts/ComponentFamilies.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Link from 'next/link';
 import dayjs from 'dayjs';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -17,9 +16,9 @@ function ProLabel({ children }) {
   return (
     <Stack direction="row" spacing={0.5} component="span">
       <Tooltip title="Included in Pro package">
-        <Link href="/x/introduction/licensing/#pro-plan">
+        <a href="https://mui.com/x/introduction/licensing/#pro-plan">
           <span className="plan-pro" />
-        </Link>
+        </a>
       </Tooltip>
       <span>{children}</span>
     </Stack>
diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx b/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx
index 9d0b94fc655e3..e29229b19d406 100644
--- a/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx
+++ b/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Link from 'next/link';
 import dayjs from 'dayjs';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -17,9 +16,9 @@ function ProLabel({ children }: { children: React.ReactNode }) {
   return (
     <Stack direction="row" spacing={0.5} component="span">
       <Tooltip title="Included in Pro package">
-        <Link href="/x/introduction/licensing/#pro-plan">
+        <a href="https://mui.com/x/introduction/licensing/#pro-plan">
           <span className="plan-pro" />
-        </Link>
+        </a>
       </Tooltip>
       <span>{children}</span>
     </Stack>
diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.js b/docs/data/date-pickers/overview/CommonlyUsedComponents.js
index 998657c63796d..68d93b9cebe9d 100644
--- a/docs/data/date-pickers/overview/CommonlyUsedComponents.js
+++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Link from 'next/link';
 import Tooltip from '@mui/material/Tooltip';
 import Stack from '@mui/material/Stack';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
@@ -21,9 +20,9 @@ function Label({ componentName, valueType, isProOnly }) {
     return (
       <Stack direction="row" spacing={0.5} component="span">
         <Tooltip title="Included on Pro package">
-          <Link href="/x/introduction/licensing/#pro-plan">
+          <a href="https://mui.com/x/introduction/licensing/#pro-plan">
             <span className="plan-pro" />
-          </Link>
+          </a>
         </Tooltip>
         {content}
       </Stack>
diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
index 8bce409df5047..657cf44e8492f 100644
--- a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
+++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Link from 'next/link';
 import Tooltip from '@mui/material/Tooltip';
 import Stack from '@mui/material/Stack';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
@@ -29,9 +28,9 @@ function Label({
     return (
       <Stack direction="row" spacing={0.5} component="span">
         <Tooltip title="Included on Pro package">
-          <Link href="/x/introduction/licensing/#pro-plan">
+          <a href="https://mui.com/x/introduction/licensing/#pro-plan">
             <span className="plan-pro" />
-          </Link>
+          </a>
         </Tooltip>
         {content}
       </Stack>

From 90d3c37aa537766064a6a24bfca2d547caf50ba7 Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Fri, 13 Oct 2023 14:30:22 +0200
Subject: [PATCH 2/2] add images

---
 .../base-concepts/ComponentFamilies.js            | 15 ++++++++++++++-
 .../base-concepts/ComponentFamilies.tsx           | 15 ++++++++++++++-
 .../overview/CommonlyUsedComponents.js            | 15 ++++++++++++++-
 .../overview/CommonlyUsedComponents.tsx           | 15 ++++++++++++++-
 4 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.js b/docs/data/date-pickers/base-concepts/ComponentFamilies.js
index bd3a68987e734..de11cabb3c2e3 100644
--- a/docs/data/date-pickers/base-concepts/ComponentFamilies.js
+++ b/docs/data/date-pickers/base-concepts/ComponentFamilies.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
+import { styled } from '@mui/material/styles';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -12,12 +13,24 @@ import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInput
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 
+const ProSpan = styled('span')({
+  display: 'inline-block',
+  height: '1em',
+  width: '1em',
+  verticalAlign: 'middle',
+  marginLeft: '0.3em',
+  marginBottom: '0.08em',
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundImage: 'url(https://mui.com/static/x/pro.svg)',
+});
+
 function ProLabel({ children }) {
   return (
     <Stack direction="row" spacing={0.5} component="span">
       <Tooltip title="Included in Pro package">
         <a href="https://mui.com/x/introduction/licensing/#pro-plan">
-          <span className="plan-pro" />
+          <ProSpan />
         </a>
       </Tooltip>
       <span>{children}</span>
diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx b/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx
index e29229b19d406..a5d4ce28c561c 100644
--- a/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx
+++ b/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
+import { styled } from '@mui/material/styles';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -12,12 +13,24 @@ import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInput
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 
+const ProSpan = styled('span')({
+  display: 'inline-block',
+  height: '1em',
+  width: '1em',
+  verticalAlign: 'middle',
+  marginLeft: '0.3em',
+  marginBottom: '0.08em',
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundImage: 'url(https://mui.com/static/x/pro.svg)',
+});
+
 function ProLabel({ children }: { children: React.ReactNode }) {
   return (
     <Stack direction="row" spacing={0.5} component="span">
       <Tooltip title="Included in Pro package">
         <a href="https://mui.com/x/introduction/licensing/#pro-plan">
-          <span className="plan-pro" />
+          <ProSpan />
         </a>
       </Tooltip>
       <span>{children}</span>
diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.js b/docs/data/date-pickers/overview/CommonlyUsedComponents.js
index 68d93b9cebe9d..71e181a247898 100644
--- a/docs/data/date-pickers/overview/CommonlyUsedComponents.js
+++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import Stack from '@mui/material/Stack';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
@@ -9,6 +10,18 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 
+const ProSpan = styled('span')({
+  display: 'inline-block',
+  height: '1em',
+  width: '1em',
+  verticalAlign: 'middle',
+  marginLeft: '0.3em',
+  marginBottom: '0.08em',
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundImage: 'url(https://mui.com/static/x/pro.svg)',
+});
+
 function Label({ componentName, valueType, isProOnly }) {
   const content = (
     <span>
@@ -21,7 +34,7 @@ function Label({ componentName, valueType, isProOnly }) {
       <Stack direction="row" spacing={0.5} component="span">
         <Tooltip title="Included on Pro package">
           <a href="https://mui.com/x/introduction/licensing/#pro-plan">
-            <span className="plan-pro" />
+            <ProSpan />
           </a>
         </Tooltip>
         {content}
diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
index 657cf44e8492f..1b301e5b83817 100644
--- a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
+++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import Stack from '@mui/material/Stack';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
@@ -9,6 +10,18 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 
+const ProSpan = styled('span')({
+  display: 'inline-block',
+  height: '1em',
+  width: '1em',
+  verticalAlign: 'middle',
+  marginLeft: '0.3em',
+  marginBottom: '0.08em',
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundImage: 'url(https://mui.com/static/x/pro.svg)',
+});
+
 function Label({
   componentName,
   valueType,
@@ -29,7 +42,7 @@ function Label({
       <Stack direction="row" spacing={0.5} component="span">
         <Tooltip title="Included on Pro package">
           <a href="https://mui.com/x/introduction/licensing/#pro-plan">
-            <span className="plan-pro" />
+            <ProSpan />
           </a>
         </Tooltip>
         {content}