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