@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.4 kB
JavaScript
;var e=require("react/jsx-runtime"),o=require("@mui/material"),t=require("react"),i=require("./IconButton.variant-helpers.js");const r=o.styled(o.IconButton)(({theme:e,variation:o,shape:t="default",sizing:r})=>({boxSizing:"border-box",transition:"all 200ms ease",overflow:"hidden","&::before":{content:'""',backgroundColor:"transparent",transition:"all 200ms ease",position:"absolute",inset:0,zIndex:1},...t&&{...i.getIconButtonRadius(t,e)},...r&&{...i.getIconButtonSizing(r)},"&.MuiIconButton-root":{"&:focus:before":{backgroundColor:e.custom.palette.interaction.none},"&:hover:before":{backgroundColor:e.custom.palette.interaction.hover},"&:active:before":{backgroundColor:e.custom.palette.interaction.press},"&:focus-visible":{boxShadow:e.custom.boxShadow.input.focus},"&.Mui-disabled":{"&:before":{backgroundColor:e.custom.palette.interaction.disabled,color:e.custom.palette.icon.disabled},"& .MuiSvgIcon-root":{fill:e.custom.palette.icon.disabled,"& path":{fill:"inherit"}}},"& .MuiSvgIcon-root":{fill:e.custom.palette.icon.primary,...r&&{...i.getIconSizing(r)},position:"relative",zIndex:2},..."default"===o&&{...i.defaultStyle(e)},..."toggle"===o&&{...i.toggle(e)},..."outlined"===o&&{...i.outlined(e)},..."raised"===o&&{...i.raised(e)},..."elevated"===o&&{...i.elevated(e)},...t&&{...i.getIconButtonRadius(t,e)}}})),n=t.forwardRef((o,t)=>e.jsx(r,{ref:t,...o}));module.exports=n;