@sitecore/sc-contenthub-blok 0.0.90 → 1.0.1

package/node_modules/@mui/material/SpeedDialAction/SpeedDialAction.js

@@ -13,6 +13,8 @@ import Fab from "../Fab/index.js";
 import Tooltip from "../Tooltip/index.js";
 import capitalize from "../utils/capitalize.js";
 import speedDialActionClasses, { getSpeedDialActionUtilityClass } from "./speedDialActionClasses.js";
+import useSlot from "../utils/useSlot.js";
+import { mergeSlotProps } from "../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -147,6 +149,8 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
     tooltipOpen: tooltipOpenProp = false,
     tooltipPlacement = 'left',
     tooltipTitle,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -154,7 +158,20 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
     tooltipPlacement
   };
   const classes = useUtilityClasses(ownerState);
-  const [tooltipOpen, setTooltipOpen] = React.useState(tooltipOpenProp);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      fab: FabProps,
+      ...slotProps,
+      tooltip: mergeSlotProps(typeof slotProps.tooltip === 'function' ? slotProps.tooltip(ownerState) : slotProps.tooltip, {
+        title: tooltipTitle,
+        open: tooltipOpenProp,
+        placement: tooltipPlacement,
+        classes: TooltipClasses
+      })
+    }
+  };
+  const [tooltipOpen, setTooltipOpen] = React.useState(externalForwardedProps.slotProps.tooltip?.open);
   const handleTooltipClose = () => {
     setTooltipOpen(false);
   };
@@ -164,32 +181,71 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const transitionStyle = {
     transitionDelay: `${delay}ms`
   };
-  const fab = /*#__PURE__*/_jsx(SpeedDialActionFab, {
-    size: "small",
+  const [FabSlot, fabSlotProps] = useSlot('fab', {
+    elementType: SpeedDialActionFab,
+    externalForwardedProps,
+    ownerState,
+    shouldForwardComponentProp: true,
     className: clsx(classes.fab, className),
-    tabIndex: -1,
-    role: "menuitem",
-    ownerState: ownerState,
-    ...FabProps,
-    style: {
-      ...transitionStyle,
-      ...FabProps.style
+    additionalProps: {
+      style: transitionStyle,
+      tabIndex: -1,
+      role: 'menuitem',
+      size: 'small'
+    }
+  });
+  const [TooltipSlot, tooltipSlotProps] = useSlot('tooltip', {
+    elementType: Tooltip,
+    externalForwardedProps,
+    shouldForwardComponentProp: true,
+    ref,
+    additionalProps: {
+      id
     },
+    ownerState,
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClose: event => {
+        handlers.onClose?.(event);
+        handleTooltipClose();
+      },
+      onOpen: event => {
+        handlers.onOpen?.(event);
+        handleTooltipOpen();
+      }
+    })
+  });
+  const [StaticTooltipSlot, staticTooltipSlotProps] = useSlot('staticTooltip', {
+    elementType: SpeedDialActionStaticTooltip,
+    externalForwardedProps,
+    ownerState,
+    ref,
+    className: classes.staticTooltip,
+    additionalProps: {
+      id
+    }
+  });
+  const [StaticTooltipLabelSlot, staticTooltipLabelSlotProps] = useSlot('staticTooltipLabel', {
+    elementType: SpeedDialActionStaticTooltipLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.staticTooltipLabel,
+    additionalProps: {
+      style: transitionStyle,
+      id: `${id}-label`
+    }
+  });
+  const fab = /*#__PURE__*/_jsx(FabSlot, {
+    ...fabSlotProps,
     children: icon
   });
-  if (tooltipOpenProp) {
-    return /*#__PURE__*/_jsxs(SpeedDialActionStaticTooltip, {
-      id: id,
-      ref: ref,
-      className: classes.staticTooltip,
-      ownerState: ownerState,
+  if (tooltipSlotProps.open) {
+    return /*#__PURE__*/_jsxs(StaticTooltipSlot, {
+      ...staticTooltipSlotProps,
       ...other,
-      children: [/*#__PURE__*/_jsx(SpeedDialActionStaticTooltipLabel, {
-        style: transitionStyle,
-        id: `${id}-label`,
-        className: classes.staticTooltipLabel,
-        ownerState: ownerState,
-        children: tooltipTitle
+      children: [/*#__PURE__*/_jsx(StaticTooltipLabelSlot, {
+        ...staticTooltipLabelSlotProps,
+        children: tooltipSlotProps.title
       }), /*#__PURE__*/React.cloneElement(fab, {
         'aria-labelledby': `${id}-label`
       })]
@@ -198,15 +254,12 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   if (!open && tooltipOpen) {
     setTooltipOpen(false);
   }
-  return /*#__PURE__*/_jsx(Tooltip, {
-    id: id,
-    ref: ref,
-    title: tooltipTitle,
-    placement: tooltipPlacement,
-    onClose: handleTooltipClose,
-    onOpen: handleTooltipOpen,
+  return /*#__PURE__*/_jsx(TooltipSlot, {
+    ...tooltipSlotProps,
+    title: tooltipSlotProps.title,
     open: open && tooltipOpen,
-    classes: TooltipClasses,
+    placement: tooltipSlotProps.placement,
+    classes: tooltipSlotProps.classes,
     ...other,
     children: fab
   });
@@ -232,6 +285,7 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
   /**
    * Props applied to the [`Fab`](https://mui.com/material-ui/api/fab/) component.
    * @default {}
+   * @deprecated Use `slotProps.fab` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FabProps: PropTypes.object,
   /**
@@ -247,26 +301,50 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
    * If `true`, the component is shown.
    */
   open: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    fab: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    staticTooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    staticTooltipLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    fab: PropTypes.elementType,
+    staticTooltip: PropTypes.elementType,
+    staticTooltipLabel: PropTypes.elementType,
+    tooltip: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * `classes` prop applied to the [`Tooltip`](https://mui.com/material-ui/api/tooltip/) element.
+   * @deprecated Use `slotProps.tooltip.classes` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TooltipClasses: PropTypes.object,
   /**
    * Make the tooltip always visible when the SpeedDial is open.
    * @default false
+   * @deprecated Use `slotProps.tooltip.open` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   tooltipOpen: PropTypes.bool,
   /**
    * Placement of the tooltip.
    * @default 'left'
+   * @deprecated Use `slotProps.tooltip.placement` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  tooltipPlacement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  tooltipPlacement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
   /**
    * Label to display in the tooltip.
+   * @deprecated Use `slotProps.tooltip.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   tooltipTitle: PropTypes.node
 } : void 0;

package/node_modules/@mui/material/SpeedDialIcon/SpeedDialIcon.d.ts

@@ -33,11 +33,11 @@ export interface SpeedDialIconProps
  *
  * Demos:
  *
- * - [Speed Dial](https://mui.com/material-ui/react-speed-dial/)
+ * - [Speed Dial](https://v6.mui.com/material-ui/react-speed-dial/)
  *
  * API:
  *
- * - [SpeedDialIcon API](https://mui.com/material-ui/api/speed-dial-icon/)
+ * - [SpeedDialIcon API](https://v6.mui.com/material-ui/api/speed-dial-icon/)
  */
 declare const SpeedDialIcon: ((props: SpeedDialIconProps) => React.JSX.Element) & {
   muiName: string;

package/node_modules/@mui/material/Stack/Stack.d.ts

@@ -50,11 +50,11 @@ export interface StackTypeMap<
  *
  * Demos:
  *
- * - [Stack](https://mui.com/material-ui/react-stack/)
+ * - [Stack](https://v6.mui.com/material-ui/react-stack/)
  *
  * API:
  *
- * - [Stack API](https://mui.com/material-ui/api/stack/)
+ * - [Stack API](https://v6.mui.com/material-ui/api/stack/)
  */
 declare const Stack: OverridableComponent<StackTypeMap>;
 

package/node_modules/@mui/material/Step/Step.d.ts

@@ -68,11 +68,11 @@ export type StepClasskey = keyof NonNullable<StepProps['classes']>;
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://v6.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [Step API](https://mui.com/material-ui/api/step/)
+ * - [Step API](https://v6.mui.com/material-ui/api/step/)
  */
 declare const Step: OverridableComponent<StepTypeMap>;
 

package/node_modules/@mui/material/StepButton/StepButton.d.ts

@@ -47,12 +47,12 @@ export type StepButtonTypeMap<
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://v6.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [StepButton API](https://mui.com/material-ui/api/step-button/)
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ * - [StepButton API](https://v6.mui.com/material-ui/api/step-button/)
+ * - inherits [ButtonBase API](https://v6.mui.com/material-ui/api/button-base/)
  */
 declare const StepButton: ExtendButtonBase<
   StepButtonTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>

package/node_modules/@mui/material/StepConnector/StepConnector.d.ts

@@ -24,10 +24,10 @@ export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classe
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://v6.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [StepConnector API](https://mui.com/material-ui/api/step-connector/)
+ * - [StepConnector API](https://v6.mui.com/material-ui/api/step-connector/)
  */
 export default function StepConnector(props: StepConnectorProps): React.JSX.Element;

package/node_modules/@mui/material/StepContent/StepContent.d.ts

@@ -4,7 +4,7 @@ import { CollapseProps, InternalStandardProps as StandardProps } from '..';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { StepContentClasses } from './stepContentClasses';
-import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotComponentProps } from '../utils/types';
 
 export interface StepContentSlots {
   /**
@@ -24,7 +24,7 @@ export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * Props forwared to the transition slot.
      * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
      */
-    transition: SlotProps<React.ElementType<CollapseProps>, {}, StepContentOwnerState>;
+    transition: SlotComponentProps<React.ElementType, CollapseProps, StepContentOwnerState>;
   }
 >;
 
@@ -76,10 +76,10 @@ export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://v6.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [StepContent API](https://mui.com/material-ui/api/step-content/)
+ * - [StepContent API](https://v6.mui.com/material-ui/api/step-content/)
  */
 export default function StepContent(props: StepContentProps): React.JSX.Element;

package/node_modules/@mui/material/StepIcon/StepIcon.d.ts

@@ -43,11 +43,11 @@ export type StepIconClasskey = keyof NonNullable<StepIconProps['classes']>;
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://v6.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [StepIcon API](https://mui.com/material-ui/api/step-icon/)
- * - inherits [SvgIcon API](https://mui.com/material-ui/api/svg-icon/)
+ * - [StepIcon API](https://v6.mui.com/material-ui/api/step-icon/)
+ * - inherits [SvgIcon API](https://v6.mui.com/material-ui/api/svg-icon/)
  */
 export default function StepIcon(props: StepIconProps): React.JSX.Element;

package/node_modules/@mui/material/StepLabel/StepLabel.d.ts

@@ -7,6 +7,11 @@ import { StepLabelClasses } from './stepLabelClasses';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface StepLabelSlots {
+  /**
+   * The component that renders the root.
+   * @default span
+   */
+  root: React.ElementType;
   /**
    * The component that renders the label.
    * @default span
@@ -21,7 +26,20 @@ export interface StepLabelSlots {
 export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
   StepLabelSlots,
   {
-    label: SlotProps<React.ElementType<React.HTMLProps<HTMLSpanElement>>, {}, StepLabelOwnerState>;
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the span element.
+     */
+    root: SlotProps<'span', {}, StepLabelOwnerState>;
+    /**
+     * Props forwarded to the label slot.
+     * By default, the avaible props are based on the span element.
+     */
+    label: SlotProps<'span', {}, StepLabelOwnerState>;
+    /**
+     * Props forwarded to the stepIcon slot.
+     * By default, the avaible props are based on the div element.
+     */
     stepIcon: SlotProps<React.ElementType<StepIconProps>, {}, StepLabelOwnerState>;
   }
 >;
@@ -86,11 +104,11 @@ export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://v6.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [StepLabel API](https://mui.com/material-ui/api/step-label/)
+ * - [StepLabel API](https://v6.mui.com/material-ui/api/step-label/)
  */
 declare const StepLabel: ((props: StepLabelProps) => React.JSX.Element) & {
   muiName: string;

package/node_modules/@mui/material/StepLabel/StepLabel.js

@@ -162,6 +162,16 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
       ...slotProps
     }
   };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: StepLabelRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    ref,
+    className: clsx(classes.root, className)
+  });
   const [LabelSlot, labelProps] = useSlot('label', {
     elementType: StepLabelLabel,
     externalForwardedProps,
@@ -172,11 +182,8 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(StepLabelRoot, {
-    className: clsx(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
     children: [icon || StepIconSlot ? /*#__PURE__*/_jsx(StepLabelIconContainer, {
       className: classes.iconContainer,
       ownerState: ownerState,
@@ -242,6 +249,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   slotProps: PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     stepIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
@@ -250,6 +258,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   slots: PropTypes.shape({
     label: PropTypes.elementType,
+    root: PropTypes.elementType,
     stepIcon: PropTypes.elementType
   }),
   /**

package/node_modules/@mui/material/Stepper/Stepper.d.ts

@@ -70,11 +70,11 @@ export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://v6.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [Stepper API](https://mui.com/material-ui/api/stepper/)
+ * - [Stepper API](https://v6.mui.com/material-ui/api/stepper/)
  */
 declare const Stepper: OverridableComponent<StepperTypeMap>;
 

package/node_modules/@mui/material/SvgIcon/SvgIcon.d.ts

@@ -94,12 +94,12 @@ export interface SvgIconTypeMap<
  *
  * Demos:
  *
- * - [Icons](https://mui.com/material-ui/icons/)
- * - [Material Icons](https://mui.com/material-ui/material-icons/)
+ * - [Icons](https://v6.mui.com/material-ui/icons/)
+ * - [Material Icons](https://v6.mui.com/material-ui/material-icons/)
  *
  * API:
  *
- * - [SvgIcon API](https://mui.com/material-ui/api/svg-icon/)
+ * - [SvgIcon API](https://v6.mui.com/material-ui/api/svg-icon/)
  */
 declare const SvgIcon: OverridableComponent<SvgIconTypeMap> & { muiName: string };
 

package/node_modules/@mui/material/SwipeableDrawer/SwipeArea.js

@@ -10,6 +10,7 @@ import capitalize from "../utils/capitalize.js";
 import { isHorizontal } from "../Drawer/Drawer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SwipeAreaRoot = styled('div', {
+  name: 'MuiSwipeArea',
   shouldForwardProp: rootShouldForwardProp
 })(memoTheme(({
   theme

package/node_modules/@mui/material/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -1,7 +1,32 @@
 import * as React from 'react';
-import { DrawerProps } from '../Drawer';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { DrawerProps, DrawerOwnerState, DrawerSlotsAndSlotProps } from '../Drawer';
 
-export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {
+export interface SwipeableDrawerSwipeAreaSlotPropsOverrides {}
+
+export interface SwipeableDrawerSlots {
+  /**
+   * The component used for the swipeArea slot.
+   * @default div
+   */
+  swipeArea?: React.ElementType;
+}
+
+type SwipeableDrawerSlotsAndSlotProps = DrawerSlotsAndSlotProps &
+  CreateSlotsAndSlotProps<
+    SwipeableDrawerSlots,
+    {
+      /**
+       * Props forwarded to the docked slot.
+       * By default, the avaible props are based on a div element.
+       */
+      swipeArea: SlotProps<'div', SwipeableDrawerSwipeAreaSlotPropsOverrides, DrawerOwnerState>;
+    }
+  >;
+
+export interface SwipeableDrawerProps
+  extends Omit<DrawerProps, 'onClose' | 'open' | 'slots' | 'slotProps'>,
+    SwipeableDrawerSlotsAndSlotProps {
   /**
    * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children.
    * This can be useful in scenarios where the drawer is partially visible.
@@ -67,6 +92,7 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
   open?: boolean;
   /**
    * The element is used to intercept the touch events on the edge.
+   * @deprecated use the `slotProps.swipeArea` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SwipeAreaProps?: object;
   /**
@@ -81,12 +107,12 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
  *
  * Demos:
  *
- * - [Drawer](https://mui.com/material-ui/react-drawer/)
+ * - [Drawer](https://v6.mui.com/material-ui/react-drawer/)
  *
  * API:
  *
- * - [SwipeableDrawer API](https://mui.com/material-ui/api/swipeable-drawer/)
- * - inherits [Drawer API](https://mui.com/material-ui/api/drawer/)
+ * - [SwipeableDrawer API](https://v6.mui.com/material-ui/api/swipeable-drawer/)
+ * - inherits [Drawer API](https://v6.mui.com/material-ui/api/drawer/)
  */
 declare const SwipeableDrawer: React.JSXElementConstructor<SwipeableDrawerProps>;
 

package/node_modules/@mui/material/SwipeableDrawer/SwipeableDrawer.js

@@ -14,6 +14,8 @@ import useEnhancedEffect from "../utils/useEnhancedEffect.js";
 import { useTheme } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getTransitionProps } from "../transitions/utils.js";
+import { mergeSlotProps } from "../utils/index.js";
+import useSlot from "../utils/useSlot.js";
 import SwipeArea from "./SwipeArea.js";
 
 // This value is closed to what browsers are using internally to
@@ -145,6 +147,8 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     transitionDuration = transitionDurationDefault,
     variant = 'temporary',
     // Mobile first.
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const [maybeSwiping, setMaybeSwiping] = React.useState(false);
@@ -450,6 +454,22 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       setMaybeSwiping(false);
     }
   }, [open]);
+  const [SwipeAreaSlot, swipeAreaSlotProps] = useSlot('swipeArea', {
+    ref: swipeAreaRef,
+    elementType: SwipeArea,
+    ownerState: props,
+    externalForwardedProps: {
+      slots,
+      slotProps: {
+        swipeArea: SwipeAreaProps,
+        ...slotProps
+      }
+    },
+    additionalProps: {
+      width: swipeAreaWidth,
+      anchor
+    }
+  });
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(Drawer, {
       open: variant === 'temporary' && maybeSwiping ? true : open,
@@ -467,25 +487,27 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         ...ModalPropsProp
       },
       hideBackdrop: hideBackdrop,
-      PaperProps: {
-        ...PaperProps,
-        style: {
-          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : '',
-          ...PaperProps.style
-        },
-        ref: handleRef
-      },
       anchor: anchor,
       transitionDuration: calculatedDurationRef.current || transitionDuration,
       onClose: onClose,
       ref: ref,
+      slots: slots,
+      slotProps: {
+        ...slotProps,
+        backdrop: mergeSlotProps(slotProps.backdrop ?? BackdropProps, {
+          ref: backdropRef
+        }),
+        paper: mergeSlotProps(slotProps.paper ?? PaperProps, {
+          style: {
+            pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
+          },
+          ref: handleRef
+        })
+      },
       ...other
     }), !disableSwipeToOpen && variant === 'temporary' && /*#__PURE__*/_jsx(NoSsr, {
-      children: /*#__PURE__*/_jsx(SwipeArea, {
-        anchor: anchor,
-        ref: swipeAreaRef,
-        width: swipeAreaWidth,
-        ...SwipeAreaProps
+      children: /*#__PURE__*/_jsx(SwipeAreaSlot, {
+        ...swipeAreaSlotProps
       })
     })]
   });
@@ -583,8 +605,33 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
     component: elementTypeAcceptingRef,
     style: PropTypes.object
   }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    docked: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    swipeArea: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    docked: PropTypes.elementType,
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType,
+    swipeArea: PropTypes.elementType,
+    transition: PropTypes.elementType
+  }),
   /**
    * The element is used to intercept the touch events on the edge.
+   * @deprecated use the `slotProps.swipeArea` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SwipeAreaProps: PropTypes.object,
   /**