@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.62 kB
JavaScript
import{jsxs as o,jsx as r,Fragment as e}from"react/jsx-runtime";import{useTheme as i}from"@mui/material";import"../../BrandCore/colorRamps.js";import"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import t from"../../BrandCore/Icon/Icon.js";import s from"../IconButton/IconButton.js";import n from"../Progress/Progress.js";import a from"../Tooltip/Tooltip.js";import p from"../Typography/Typography.js";import d from"./StyledPill.js";import l from"./useTextTruncation.js";const m=m=>{const c=i(),{label:u,secondaryLabel:g,iconLeft:f,iconRight:b,onDelete:x,active:j,slots:y,loading:h,sizing:B,disabled:C}=m,{textRef:T,isTruncated:I}=l([u]),v=o(d,{className:"loops-pill",tabIndex:0,...m,children:[h&&r(n,{sizing:B||"xl",sx:{color:c.custom.palette.icon.disabled}}),!h&&o(e,{children:[f&&r(t,{disabled:C,size:16,name:f}),"string"==typeof u?r(p,{component:"p",variation:"sm",noWrap:!0,ref:T,disabled:C,sx:{padding:`0 ${c.spacing(c.custom.padding.xs)}`},children:u}):u,"string"==typeof g?r(p,{component:"p",secondary:!0,variation:"sm",monospaced:!0,noWrap:!0,ref:T,disabled:C,sx:{padding:`0 ${c.spacing(c.custom.padding.xs)}`},children:g}):g,b&&r(t,{disabled:C,size:16,name:b}),x&&r(s,{sizing:"xs",onClick:x,shape:"round",disabled:C,variation:"default",sx:{"&.MuiIconButton-root.Mui-disabled":{"&:before":{backgroundColor:"transparent"}}},icon:r(t,{name:"cancel",sx:{color:j?c.custom.palette.blue[1e3]:c.custom.palette.icon.secondary}})})]})]});return I?r(a,{message:u,...y?.tooltip,children:v}):v};export{m as default};