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