'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('@chakra-ui/react');

const DEFAULT_BACKGROUND_IMG_URL = "https://redpanda-ui-static-assets.s3.us-east-2.amazonaws.com/signup.webp";
const Auth0Modal = ({
  children,
  minHeight = "540px",
  imageURL = DEFAULT_BACKGROUND_IMG_URL
}) => {
  const [isMin500AndMax600, isMax600, isMax500] = react.useMediaQuery([
    "screen and (max-width: 600px) and (min-width: 500px)",
    "(max-width: 600px)",
    "(max-width: 500px)"
  ]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    react.Box,
    {
      minHeight: isMax600 ? "100%" : "100vh",
      height: "fit-content",
      backgroundPosition: "50%",
      backgroundSize: "cover",
      backgroundColor: isMax600 ? "#FFFFFF" : "#F3F3F3",
      backgroundImage: `url(${imageURL})`,
      children: /* @__PURE__ */ jsxRuntime.jsx(
        react.Box,
        {
          as: "main",
          display: "grid",
          gridTemplateRows: "[ left-start center-start right-start ] 1fr [ left-end center-end right-end ]",
          gridTemplateColumns: "[ left-start center-start ] 1fr [ left-end right-start ] 1fr [ center-end right-end ]",
          alignItems: isMin500AndMax600 ? void 0 : "center",
          justifyContent: isMin500AndMax600 ? void 0 : "center",
          justifyItems: "center",
          gridColumnGap: "160px",
          columnGap: "160px",
          width: isMin500AndMax600 ? "auto" : "100%",
          padding: isMax600 ? "0" : "80px",
          margin: isMin500AndMax600 ? "0" : void 0,
          minHeight: isMax500 ? void 0 : "100vh",
          height: "fit-content",
          children: /* @__PURE__ */ jsxRuntime.jsx(
            react.Box,
            {
              as: "section",
              display: "flex",
              flexDirection: "column",
              height: "auto",
              whiteSpace: "normal",
              borderRadius: isMax500 ? "initial" : "5px",
              position: "relative",
              width: isMax500 ? "100vw" : "400px",
              gridArea: isMax600 ? "center" : "left",
              children: /* @__PURE__ */ jsxRuntime.jsx(
                react.Box,
                {
                  flexGrow: isMax600 ? "1" : void 0,
                  display: "flex",
                  flexDirection: "column",
                  overflow: "hidden",
                  position: "relative",
                  fontSize: "16px",
                  color: "#1e212a",
                  backgroundColor: "white",
                  boxShadow: isMax600 ? "none" : "0 12px 40px rgba(0,0,0,0.12)",
                  borderRadius: isMax600 ? "0" : "5px",
                  border: "0 solid transparent",
                  children: /* @__PURE__ */ jsxRuntime.jsx(
                    react.Box,
                    {
                      display: "flex",
                      flexGrow: 1,
                      flexDirection: "column",
                      justifyContent: isMax600 ? void 0 : "center",
                      minHeight,
                      position: "relative",
                      children
                    }
                  )
                }
              )
            }
          )
        }
      )
    }
  );
};

module.exports = Auth0Modal;
//# sourceMappingURL=Auth0Modal.cjs.map
