@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 690 B
JavaScript
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{styled as o,Box as t}from"@mui/material";import{mergeSx as a}from"merge-sx";import n from"../Typography/Typography.js";const s=o(t,{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"})),i=({startText:o,children:i,endText:p,slotProps:m})=>e(s,{...m?.root,children:[o&&r(n,{component:"p",variation:"sm",secondary:!0,...m?.startText,children:o}),r(t,{sx:a({display:"flex",gap:e=>e.p.xs},m?.iconContainer?.sx),children:i}),p&&r(n,{component:"p",variation:"sm",secondary:!0,...m?.endText,children:p})]});export{i as default};