import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dialog } from "@material-ui/core";
import styled from "styled-components";
import { CloseGrayIcon } from "../Icon/CloseGrayIcon";
export const Layer = (_a) => {
    var { renderUI, onClose, showCloseButton, renderTitleUI, renderBottomUI, padding } = _a, extraProps = __rest(_a, ["renderUI", "onClose", "showCloseButton", "renderTitleUI", "renderBottomUI", "padding"]);
    return (_jsxs(LayerRender, Object.assign({ classes: { root: "Layer-root" }, padding: padding }, extraProps, { children: [showCloseButton && onClose && _jsx(CloseButton, Object.assign({ onClick: onClose }, { children: _jsx(CloseGrayIcon, {}, void 0) }), void 0), renderTitleUI ? renderTitleUI() : null, renderUI(), renderBottomUI ? renderBottomUI() : null] }), void 0));
};
const LayerRender = styled(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 : "32px 36px")};

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