"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UILayer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const CloseGrayIcon_1 = require("../Icon/CloseGrayIcon");
const UILayer = ({ renderUI, onClose, showCloseButton, renderTitleUI, renderBottomUI, padding, ...extraProps }) => {
    return ((0, jsx_runtime_1.jsxs)(LayerRender, { classes: { root: "Layer-root" }, padding: padding, onClose: onClose, ...extraProps, children: [showCloseButton && onClose && (0, jsx_runtime_1.jsx)(CloseButton, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(CloseGrayIcon_1.CloseGrayIcon, {}) }), renderTitleUI ? renderTitleUI() : null, renderUI(), renderBottomUI ? renderBottomUI() : null] }));
};
exports.UILayer = UILayer;
const LayerRender = (0, styled_components_1.default)(core_1.Dialog) `
    .MuiDialog-paper {
        background: #ffffff;
        border: 1px solid #f1f1f6;
        box-sizing: border-box;
        box-shadow: 0px 6px 8px -2px rgba(39, 41, 50, 0.08);
        border-radius: 8px;
        padding: ${(props) => (props.padding ? props.padding : "0px")} !important;

        &.MuiDialog-paperFullScreen {
            border-radius: 0px;
        }
    }
`;
const CloseButton = styled_components_1.default.div `
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
`;
//# sourceMappingURL=UILayer.js.map