@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.91 kB
JavaScript
import{jsx as t}from"react/jsx-runtime";import{Remove as o,Check as e}from"@mui/icons-material";import{styled as i,Checkbox as a}from"@mui/material";import{iconSizeMap as s}from"../../BrandCore/Icon/Icon.js";import{space as u}from"../../BrandCore/primitiveVariables.js";const p=i(a)(({theme:t,sizing:o,variant:e})=>({height:"default"===o?u[300]:u[400],width:"default"===o?u[300]:u[400],padding:0,flex:"none",borderRadius:t.spacing(t.custom.radius.sm),border:"none",boxShadow:`0px 0px 0px 0px ${t.custom.palette.interaction.none}, inset 0px 0px 0px 1px ${t.custom.palette.stroke.default}`,backgroundColor:t.custom.palette.input.default,position:"relative",transition:`${t.custom.easing.input}`,"& svg":{transition:t.custom.easing.input,fill:"none",width:"default"===o?s.sm:s.xl,height:"default"===o?s.sm:s.xl},"&:before":{content:'""',position:"absolute",inset:0},"&:hover":{backgroundColor:t.custom.palette.input.default,"&:before":{borderRadius:t.spacing(t.custom.radius.sm),backgroundColor:t.custom.palette.interaction.hover}},"&:active":{backgroundColor:t.custom.palette.input.default,boxShadow:`${t.custom.boxShadow.input.focus}, inset 0px 0px 0px 1px ${t.custom.palette.stroke.focus}`,"&:before":{borderRadius:t.spacing(t.custom.radius.sm),backgroundColor:t.custom.palette.interaction.press}},"&.Mui-disabled":{backgroundColor:t.custom.palette.input.disabled,boxShadow:`inset 0px 0px 0px 1px ${t.custom.palette.stroke.disabled}`},"&.Mui-checked":{backgroundColor:t.custom.palette.purple[500],"& svg":{fill:t.custom.palette.icon.lockedWhite},"&.Mui-disabled":{backgroundColor:t.custom.palette.input.disabled,"& svg":{fill:t.custom.palette.icon.disabled}}},"&.MuiCheckbox-indeterminate":{backgroundColor:t.custom.palette.purple[500],"& svg":{fill:t.custom.palette.icon.lockedWhite}},"&.Mui-focusVisible":{boxShadow:`${t.custom.boxShadow.input.focus}, inset 0px 0px 0px 1px ${t.custom.palette.stroke.focus}`,"&:before":{backgroundColor:t.custom.palette.interaction.press}},..."secondary"===e?{boxShadow:`0px 0px 0px 0px ${t.custom.palette.interaction.none}, inset 0px 0px 0px 1px ${t.custom.palette.blue[500]}`,"&:hover":{backgroundColor:t.custom.palette.blue[0]},"&:active":{backgroundColor:t.custom.palette.input.default,boxShadow:`${t.custom.boxShadow.input.focus}, inset 0px 0px 0px 1px ${t.custom.palette.blue[500]}`,"&:before":{borderRadius:t.spacing(t.custom.radius.sm),backgroundColor:t.custom.palette.interaction.press}},"&.Mui-checked":{backgroundColor:t.custom.palette.blue[0],"& svg":{fill:t.custom.palette.icon.primary}},"&.Mui-disabled":{backgroundColor:t.custom.palette.input.disabled,boxShadow:`inset 0px 0px 0px 1px ${t.custom.palette.stroke.disabled}`},"&.MuiCheckbox-indeterminate":{backgroundColor:t.custom.palette.blue[0],"& svg":{fill:t.custom.palette.icon.primary}}}:void 0})),r=i=>t(p,{checkedIcon:t(e,{}),indeterminateIcon:t(o,{}),...i,disableFocusRipple:!0});export{r as default};