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