'use client';
import * as React from 'react';
import { clsx } from '../../../clsx/dist/clsx.mjs';
import useSlot from '../utils/useSlot.mjs';
import { getBackdropUtilityClass } from './backdropClasses.mjs';
import { jsx } from 'react/jsx-runtime';
import { useDefaultProps } from '../DefaultPropsProvider/DefaultPropsProvider.mjs';
import Fade from '../Fade/Fade.mjs';
import composeClasses from '../../utils/esm/composeClasses/composeClasses.mjs';
import styled from '../styles/styled.mjs';

const useUtilityClasses$D = ownerState => {
  const {
    classes,
    invisible
  } = ownerState;
  const slots = {
    root: ['root', invisible && 'invisible']
  };
  return composeClasses(slots, getBackdropUtilityClass, classes);
};
const BackdropRoot = styled('div', {
  name: 'MuiBackdrop',
  slot: 'Root',
  overridesResolver: (props, styles) => {
    const {
      ownerState
    } = props;
    return [styles.root, ownerState.invisible && styles.invisible];
  }
})({
  position: 'fixed',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  right: 0,
  bottom: 0,
  top: 0,
  left: 0,
  backgroundColor: 'rgba(0, 0, 0, 0.5)',
  WebkitTapHighlightColor: 'transparent',
  variants: [{
    props: {
      invisible: true
    },
    style: {
      backgroundColor: 'transparent'
    }
  }]
});
const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
  const props = useDefaultProps({
    props: inProps,
    name: 'MuiBackdrop'
  });
  const {
    children,
    className,
    component = 'div',
    invisible = false,
    open,
    components = {},
    componentsProps = {},
    slotProps = {},
    slots = {},
    TransitionComponent: TransitionComponentProp,
    transitionDuration,
    ...other
  } = props;
  const ownerState = {
    ...props,
    component,
    invisible
  };
  const classes = useUtilityClasses$D(ownerState);
  const backwardCompatibleSlots = {
    transition: TransitionComponentProp,
    root: components.Root,
    ...slots
  };
  const backwardCompatibleSlotProps = {
    ...componentsProps,
    ...slotProps
  };
  const externalForwardedProps = {
    slots: backwardCompatibleSlots,
    slotProps: backwardCompatibleSlotProps
  };
  const [RootSlot, rootProps] = useSlot('root', {
    elementType: BackdropRoot,
    externalForwardedProps,
    className: clsx(classes.root, className),
    ownerState
  });
  const [TransitionSlot, transitionProps] = useSlot('transition', {
    elementType: Fade,
    externalForwardedProps,
    ownerState
  });
  return /*#__PURE__*/jsx(TransitionSlot, {
    in: open,
    timeout: transitionDuration,
    ...other,
    ...transitionProps,
    children: /*#__PURE__*/jsx(RootSlot, {
      "aria-hidden": true,
      ...rootProps,
      classes: classes,
      ref: ref,
      children: children
    })
  });
});

export { Backdrop as default };
//# sourceMappingURL=Backdrop.mjs.map
