import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["id"];
import React, { useLayoutEffect } from "react";
import Typography from "../../Typography";
import { useDialogContext } from "./DialogContext";
import createComponent from "../../system/createComponent";
import useId from "../../hooks/useId";
var DialogTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _useDialogContext = useDialogContext(),
      titleId = _useDialogContext.titleId,
      setTitleId = _useDialogContext.setTitleId;

  var propId = props.id,
      typographyProps = _objectWithoutProperties(props, _excluded);

  var id = useId(propId, "dialog");
  useLayoutEffect(function () {
    setTitleId(id);
  }, [id]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, _extends({
    id: titleId,
    ref: ref,
    component: "h2",
    variant: "title2",
    shade: 800
  }, typographyProps)));
});
export default createComponent(DialogTitle);