@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.26 kB
JavaScript
;var e=require("@mui/material"),t=require("../ButtonBase/Button.variant-helpers.js"),i=require("../styleblocks/focusedStyle.js"),l=require("../styleblocks/selectedStyle.js"),a=require("./pill.helpers.js");const s=e.styled(e.Box,{shouldForwardProp:e=>!["active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions"].includes(e)})(({theme:e,active:s,disabled:d,sizing:r,onDelete:n,freezeInteractions:o,loading:c})=>({display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"fill-available",height:t.buttonHeightMap[r||"md"],paddingLeft:e.spacing(e.custom.padding.sm),paddingRight:n?e.spacing(e.custom.padding.xs):e.spacing(e.custom.padding.sm),borderRadius:e.spacing(e.custom.radius.md),transition:"all 180ms ease",cursor:o?"auto":"pointer",...a.pillDefaultState(e),...s&&l.selectedState(e),...(d||c)&&a.pillDisabledState(e),"&:hover":{...a.pillDefaultStateHover(e),...(d||c)&&a.pillDisabledState(e),...s&&l.selectedStateHover(e),...o&&a.pillDefaultState(e),...o&&s&&l.selectedState(e)},"&:active":{...a.pillDefaultStateActive(e),...(d||c)&&a.pillDisabledState(e),...s&&l.selectedStateActive(e),...o&&a.pillDefaultState(e),...o&&s&&l.selectedState(e)},"&:focus-visible":{...i.focusedInputState(e)}}));module.exports=s;