import { jsx } from 'react/jsx-runtime';
import { Box } from '@chakra-ui/react';

const Auth0Modal = ({ children, minHeight = "540px" }) => /* @__PURE__ */ jsx(
  Box,
  {
    minHeight: "100vh",
    height: "fit-content",
    backgroundPosition: "50%",
    backgroundSize: "cover",
    backgroundColor: "#F3F3F3",
    backgroundImage: "url('https://redpanda-ui-static-assets.s3.us-east-2.amazonaws.com/signup.webp')",
    children: /* @__PURE__ */ jsx(
      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: "center",
        justifyContent: "center",
        justifyItems: "center",
        gridColumnGap: "160px",
        columnGap: "160px",
        width: "100%",
        padding: "80px",
        minHeight: "100vh",
        height: "fit-content",
        children: /* @__PURE__ */ jsx(
          Box,
          {
            as: "section",
            display: "flex",
            flexDirection: "column",
            height: "auto",
            whiteSpace: "normal",
            borderRadius: "5px",
            position: "relative",
            width: "400px",
            gridArea: "left",
            children: /* @__PURE__ */ jsx(
              Box,
              {
                flexGrow: "1",
                display: "flex",
                flexDirection: "column",
                overflow: "hidden",
                position: "relative",
                fontSize: "16px",
                color: "#1e212a",
                backgroundColor: "white",
                boxShadow: "0 12px 40px rgba(0,0,0,0.12)",
                borderRadius: "5px",
                border: "0 solid transparent",
                children: /* @__PURE__ */ jsx(
                  Box,
                  {
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    minHeight,
                    position: "relative",
                    children
                  }
                )
              }
            )
          }
        )
      }
    )
  }
);

export { Auth0Modal as default };
//# sourceMappingURL=Auth0Modal.js.map
