@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 684 B
JavaScript
;var e=require("react/jsx-runtime"),r=require("@mui/material"),s=require("merge-sx"),t=require("../Typography/Typography.js");const o=r.styled(r.Box,{shouldForwardProp:e=>"sx"!==e})(({theme:e,sx:r})=>({display:"flex",alignItems:"center",gap:e.spacing(.5),color:e.custom.palette.text.secondary,fontSize:"0.875rem"}));module.exports=({startText:n,children:a,endText:i,slotProps:x})=>e.jsxs(o,{...x?.root,children:[n&&e.jsx(t,{component:"p",variation:"sm",secondary:!0,...x?.startText,children:n}),e.jsx(r.Box,{sx:s.mergeSx({display:"flex",gap:e=>e.p.xs},x?.iconContainer?.sx),children:a}),i&&e.jsx(t,{component:"p",variation:"sm",secondary:!0,...x?.endText,children:i})]});