@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 656 B
JavaScript
import{jsx as o}from"react/jsx-runtime";import{styled as r,Stack as e}from"@mui/material";import{mergeSx as p}from"merge-sx";import t from"../../../WebCore/Typography/Typography.js";const i=r(e)(({theme:o})=>({borderRadius:o.spacing(o.custom.radius.sm),border:`1px solid ${o.custom.palette.purple[100]}`,backgroundColor:o.custom.palette.purple[0],padding:`${o.spacing(o.custom.padding.xs)} ${o.spacing(o.custom.padding.sm)}`,"& p":{color:o.custom.palette.purple[1e3]}})),a=({sx:r,body:e})=>o(i,{"data-id":"pill-container",sx:p(r,{position:"absolute",zIndex:1}),children:o(t,{variation:"xxs",component:"p",weight:"bold",children:e})});export{a as default};