@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.2 kB
JavaScript
import{jsx as e}from"react/jsx-runtime";import{styled as a}from"@mui/material";import t from"@mui/material/Chip";import i from"../../../BrandCore/Icon/Icon.js";const o=e=>{switch(e){case"xs":return 16;case"sm":case"md":case"lg":default:return 24;case"xl":return 32}},r=a(t)(({theme:e,sizing:a})=>({height:o(a||"lg"),paddingLeft:e.spacing(e.custom.padding.xs),paddingRight:e.spacing(e.custom.padding.xs),borderRadius:e.spacing(e.custom.radius.sm),border:`1px solid ${e.custom.palette.stroke.default}`,backgroundColor:e.custom.palette.surface.default,margin:0,"& .MuiChip-label":{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",paddingLeft:e.spacing(e.custom.padding.xs),paddingRight:e.spacing(e.custom.padding.xs)},"&:hover":{backgroundColor:e.custom.palette.surface.default},"&:active":{backgroundColor:e.custom.palette.surface.default},"& .MuiChip-deleteIcon":{backgroundColor:e.custom.palette.surface.transparent,color:e.custom.palette.icon.primary,width:e.spacing(2),height:e.spacing(2),borderRadius:"50%",margin:0,padding:3},"&.MuiAutocomplete-tag":{margin:0,maxWidth:180}})),s=a=>e(r,{...a,deleteIcon:e(i,{name:"close"})});export{r as StyledChip,s as default,o as getChipHeight};