diff --git a/examples/core/auth-nextjs-themed/.env b/examples/core/auth-nextjs-themed/.env
index 856f2860e78..50dc783ab4d 100644
--- a/examples/core/auth-nextjs-themed/.env
+++ b/examples/core/auth-nextjs-themed/.env
@@ -1,3 +1,2 @@
 
-AUTH_SECRET="cNU2IkgN6v9dVQ1EqbCe4Npqh0IbM6VEsMBpg69wiyU=" # Added by `npx auth`. Read more: https://cli.authjs.dev
-AUTH_URL="https://r3l69w-3000.csb.app"
\ No newline at end of file
+AUTH_SECRET="cNU2IkgN6v9dVQ1EqbCe4Npqh0IbM6VEsMBpg69wiyU=" # Added by `npx auth`. Read more: https://cli.authjs.dev
\ No newline at end of file
diff --git a/examples/core/auth-nextjs-themed/app/components/ChartUserByCountry.tsx b/examples/core/auth-nextjs-themed/app/components/ChartUserByCountry.tsx
index d313d944d09..200357096f8 100644
--- a/examples/core/auth-nextjs-themed/app/components/ChartUserByCountry.tsx
+++ b/examples/core/auth-nextjs-themed/app/components/ChartUserByCountry.tsx
@@ -135,14 +135,12 @@ export default function ChartUserByCountry() {
                 innerRadius: 75,
                 outerRadius: 100,
                 paddingAngle: 0,
-                highlightScope: { faded: 'global', highlighted: 'item' },
+                highlightScope: { fade: 'global', highlight: 'item' },
               },
             ]}
             height={260}
             width={260}
-            slotProps={{
-              legend: { hidden: true },
-            }}
+            hideLegend
           >
             <PieCenterLabel primaryText="50K" secondaryText="Total" />
           </PieChart>
diff --git a/examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx b/examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx
deleted file mode 100644
index 59307f43a46..00000000000
--- a/examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import Button from '@mui/material/Button';
-import CalendarTodayRoundedIcon from '@mui/icons-material/CalendarTodayRounded';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { UseDateFieldProps } from '@mui/x-date-pickers/DateField';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import {
-  BaseSingleInputFieldProps,
-  DateValidationError,
-  FieldSection,
-} from '@mui/x-date-pickers/models';
-
-interface ButtonFieldProps
-  extends UseDateFieldProps<Dayjs, false>,
-    BaseSingleInputFieldProps<Dayjs | null, Dayjs, FieldSection, false, DateValidationError> {
-  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-function ButtonField(props: ButtonFieldProps) {
-  const {
-    setOpen,
-    label,
-    id,
-    disabled,
-    InputProps: { ref } = {},
-    inputProps: { 'aria-label': ariaLabel } = {},
-  } = props;
-
-  return (
-    <Button
-      variant="outlined"
-      id={id}
-      disabled={disabled}
-      ref={ref}
-      aria-label={ariaLabel}
-      size="small"
-      onClick={() => setOpen?.((prev) => !prev)}
-      startIcon={<CalendarTodayRoundedIcon fontSize="small" />}
-      sx={{ minWidth: 'fit-content' }}
-    >
-      {label ? `${label}` : 'Pick a date'}
-    </Button>
-  );
-}
-
-export default function CustomDatePicker() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2023-04-17'));
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DatePicker
-        value={value}
-        label={value == null ? null : value.format('MMM DD, YYYY')}
-        onChange={(newValue) => setValue(newValue)}
-        slots={{ field: ButtonField }}
-        slotProps={{
-          field: { setOpen } as any,
-          nextIconButton: { size: 'small' },
-          previousIconButton: { size: 'small' },
-        }}
-        open={open}
-        onClose={() => setOpen(false)}
-        onOpen={() => setOpen(true)}
-        views={['day', 'month', 'year']}
-      />
-    </LocalizationProvider>
-  );
-}
diff --git a/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx b/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx
index e7a90bde2a4..a15ea1a1e88 100644
--- a/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx
+++ b/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx
@@ -73,11 +73,7 @@ export default function PageViewsBarChart() {
           height={250}
           margin={{ left: 50, right: 0, top: 20, bottom: 20 }}
           grid={{ horizontal: true }}
-          slotProps={{
-            legend: {
-              hidden: true,
-            },
-          }}
+          hideLegend
         />
       </CardContent>
     </Card>
diff --git a/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx b/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx
index f43d0af4b4a..79ce0171bb6 100644
--- a/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx
+++ b/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx
@@ -134,11 +134,7 @@ export default function SessionsChart() {
               fill: "url('#direct')",
             },
           }}
-          slotProps={{
-            legend: {
-              hidden: true,
-            },
-          }}
+          hideLegend
         >
           <AreaGradient color={theme.palette.primary.dark} id="organic" />
           <AreaGradient color={theme.palette.primary.main} id="referral" />
diff --git a/examples/core/auth-nextjs-themed/app/components/StatCard.tsx b/examples/core/auth-nextjs-themed/app/components/StatCard.tsx
index 0438bc8f1fd..c18e9408708 100644
--- a/examples/core/auth-nextjs-themed/app/components/StatCard.tsx
+++ b/examples/core/auth-nextjs-themed/app/components/StatCard.tsx
@@ -83,7 +83,7 @@ export default function StatCard({ title, value, interval, trend, data }: StatCa
           </Stack>
           <Box sx={{ width: '100%', height: 50 }}>
             <SparkLineChart
-              colors={[chartColor]}
+              color={chartColor}
               data={data}
               area
               showHighlight
diff --git a/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx b/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx
index d04b3fdcd74..f8ea88bb478 100644
--- a/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx
+++ b/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx
@@ -38,7 +38,7 @@ function renderSparklineCell(params: GridCellParams<SparkLineData, any>) {
         plotType="bar"
         showHighlight
         showTooltip
-        colors={['hsl(210, 98%, 42%)']}
+        color="hsl(210, 98%, 42%)"
         xAxis={{
           scaleType: 'band',
           data,
diff --git a/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx b/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx
index ab093005bf3..78534c2a14a 100644
--- a/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx
+++ b/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx
@@ -38,7 +38,7 @@ function renderSparklineCell(params: GridCellParams<SparkLineData, any>) {
         plotType="bar"
         showHighlight
         showTooltip
-        colors={['hsl(210, 98%, 42%)']}
+        color="hsl(210, 98%, 42%)"
         xAxis={{
           scaleType: 'band',
           data,
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/dataDisplay.tsx b/examples/core/auth-nextjs-themed/theme/customizations/dataDisplay.tsx
index 6199433d4ea..8f1a4d72dc8 100644
--- a/examples/core/auth-nextjs-themed/theme/customizations/dataDisplay.tsx
+++ b/examples/core/auth-nextjs-themed/theme/customizations/dataDisplay.tsx
@@ -47,6 +47,9 @@ export const dataDisplayCustomizations: Components<Theme> = {
             [`& .${svgIconClasses.root}`]: {
               color: theme.palette.text.primary,
             },
+            [`& .${typographyClasses.root}`]: {
+              color: theme.palette.text.primary,
+            },
             '&:focus-visible': {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
             },