@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.47 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("../../BrandCore/Icon/Icon.js"),n=require("../IconButton/IconButton.js");require("../../BrandCore/primitiveVariables.js");var r=require("../Surface/Surface.js"),o=require("../Typography/Typography.js"),a=require("./_partials/ModalContentWrapper.js");module.exports=({title:d,subtitle:s,body:c,children:l,extraAction:p,hideCloseButton:m,contentPadding:u,handleClose:h})=>{const g=t.useTheme();return e.jsxs(r,{variation:"overlay",sx:{minWidth:320,width:"100%",maxWidth:600,overflow:"hidden",position:"relative"},children:[e.jsxs(t.Stack,{direction:"row",alignItems:"center",justifyContent:"space-between",gap:g.custom.margin.md,padding:g.custom.padding.md,paddingLeft:g.custom.padding.lg,children:[e.jsxs(t.Stack,{children:["string"==typeof d?e.jsx(o,{component:"p",variation:"xl",weight:"bold",children:d}):d,s&&e.jsx(o,{component:"p",variation:"md",sx:{color:g.custom.palette.text.secondary},children:s})]}),e.jsxs(t.Stack,{direction:"row",gap:g.spacing(g.custom.margin.md),height:32,children:[p,!m&&e.jsx(n,{sizing:"md",icon:e.jsx(i.default,{name:"close"}),sx:{color:g.custom.palette.icon.primary},onClick:h})]})]}),c&&e.jsx(a.ModalContentWrapper,{contentPadding:!!u,children:e.jsx(t.Stack,{gap:g.custom.padding.md,sx:{maxWidth:600},children:"string"==typeof c?e.jsx(o,{component:"p",variation:"md",children:c}):c})}),l&&e.jsx(a.ModalContentWrapper,{contentPadding:!!u,children:l})]})};