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