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