chakra-ui/dist/AlertDialog/components.js

Responsive and accessible React UI components built with React and Emotion

import _extends from "@babel/runtime/helpers/extends";

/** @jsx jsx */
import { jsx } from "@emotion/core";
import { AlertDialogContent as IAlertDialogContent, AlertDialogDescription, AlertDialogLabel, AlertDialogOverlay as IAlertDialogOverlay } from "@reach/alert-dialog";
import css from "@styled-system/css";
import { forwardRef } from "react";
import Box from "../Box";
import { modalContentStyle } from "../Modal";
import { useUIMode } from "../ThemeProvider";

var AlertDialogHeader = function AlertDialogHeader(props) {
  return jsx(Box, _extends({
    py: 4,
    px: 6,
    as: AlertDialogLabel
  }, props));
};

var AlertDialogBody = function AlertDialogBody(props) {
  return jsx(Box, _extends({
    px: 6,
    py: 2,
    as: AlertDialogDescription
  }, props));
};

var AlertDialogFooter = function AlertDialogFooter(props) {
  return jsx(Box, _extends({
    ml: "auto",
    p: 6,
    as: AlertDialogDescription
  }, props));
};

var AlertDialogOverlay = function AlertDialogOverlay(props) {
  return jsx(IAlertDialogOverlay, _extends({
    css: css({
      position: "fixed",
      top: "0",
      right: "0",
      left: "0",
      bottom: "0",
      zIndex: "1",
      overflowY: "auto",
      bg: "rgba(16,22,26,.7)"
    })
  }, props));
};

var AlertDialogContent = forwardRef(function (props, ref) {
  var _useUIMode = useUIMode(),
      mode = _useUIMode.mode;

  var styleProps = modalContentStyle({
    mode: mode
  });
  return jsx(Box, _extends({
    as: IAlertDialogContent,
    width: "100%",
    position: "relative",
    display: "flex",
    flexDirection: "column",
    ref: ref
  }, styleProps, props));
});
export { AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogOverlay, AlertDialogContent };