@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 886 B
JavaScript
import{jsxs as i,jsx as t}from"react/jsx-runtime";import{useTheme as n,Box as r}from"@mui/material";import{mergeSx as s}from"merge-sx";import m from"../../WebCore/Surface/Surface.js";const a=({children:a,headContent:c,sx:e,...d})=>{const o=n();return i(m,{...d,sx:s(e,{mx:[o.spacing(o.custom.margin.md),0],width:1,maxWidth:[512]}),children:[c&&t(r,{sx:{width:"100%",borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit",pt:o.spacing(o.custom.margin.md),px:o.spacing(o.custom.margin.md)},children:c}),t(r,{sx:{width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",pt:c?[o.spacing(o.custom.margin.md)]:[o.spacing(o.custom.padding.lg),o.spacing(o.custom.padding.xl)],px:[o.spacing(o.custom.padding.lg),o.spacing(o.custom.padding.xl)],pb:[o.spacing(o.custom.padding.lg),o.spacing(o.custom.padding.xl)]},children:a})]})};export{a as default};