@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 870 B
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),s=require("@mui/material/styles"),o=require("merge-sx"),i=require("../../WebCore/Typography/Typography.js");module.exports=({primaryHeadlineLabel:n,secondarySlot1:a,secondarySlot2:l,slotProps:t})=>{const x=s.useTheme(),p=null!=a,c=null!=l;return e.jsxs(r.Stack,{gap:x.p.xs,sx:t?.root?.sx,children:[e.jsx(r.Box,{sx:o.mergeSx({py:x.p.xs,px:x.p.sm},t?.primaryHeadline?.sx),children:e.jsx(i,{variation:"md",component:"p",weight:"bold",children:n})}),p||c?e.jsxs(r.Stack,{direction:"row",alignItems:"center",gap:x.m.md,sx:{py:x.p.xs,px:x.p.sm},children:[p&&e.jsx(r.Box,{sx:t?.secondarySlot1?.sx,children:e.jsx(i,{variation:"sm",component:"p",weight:"bold",children:a})}),c&&e.jsx(r.Box,{sx:t?.secondarySlot2?.sx,children:e.jsx(i,{variation:"sm",component:"p",secondary:!0,children:l})})]}):null]})};