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