@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.65 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 s from"../../BrandCore/Icon/Icon.js";import t 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:x,onDelete:b,active:j,slots:y,loading:h,sizing:B,disabled:C,slotProps:T}=m,{textRef:I,isTruncated:v}=l([u]),z=o(d,{className:"loops-pill",tabIndex:0,...m,sx:{...T?.root?.sx},children:[h&&r(n,{sizing:B||"xl",sx:{color:c.custom.palette.icon.disabled}}),!h&&o(e,{children:[f&&r(s,{disabled:C,size:16,name:f}),"string"==typeof u?r(p,{component:"p",variation:"sm",noWrap:!0,ref:I,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:I,disabled:C,sx:{padding:`0 ${c.spacing(c.custom.padding.xs)}`},children:g}):g,x&&r(s,{disabled:C,size:16,name:x}),b&&r(t,{sizing:"xs",onClick:b,shape:"round",disabled:C,variation:"default",sx:{"&.MuiIconButton-root.Mui-disabled":{"&:before":{backgroundColor:"transparent"}}},icon:r(s,{name:"cancel",sx:{color:j?c.custom.palette.blue[1e3]:c.custom.palette.icon.secondary}})})]})]});return v?r(a,{message:u,...y?.tooltip,children:z}):z};export{m as default};