@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.75 kB
JavaScript
import{styled as t,Radio as o}from"@mui/material";import"react/jsx-runtime";import{iconSizeMap as e}from"../../BrandCore/Icon/Icon.js";import{space as r}from"../../BrandCore/primitiveVariables.js";const i=t(o)(({theme:t,sizing:o})=>({padding:0,backgroundColor:t.custom.palette.input.default,border:`1px solid ${t.custom.palette.stroke.default}`,position:"relative",transition:t.custom.easing.input,flexShrink:0,height:"default"===o?r[300]:r[400],width:"default"===o?r[300]:r[400],"& svg":{transition:t.custom.easing.input,fill:"none",width:"default"===o&&e.sm,height:"default"===o&&e.sm},"&:before":{content:'""',position:"absolute",inset:0,borderRadius:t.custom.radius.round},"&:hover":{backgroundColor:t.custom.palette.input.default,"&:before":{backgroundColor:t.custom.palette.interaction.hover}},"&:active":{backgroundColor:t.custom.palette.input.default,borderColor:t.custom.palette.stroke.focus,boxShadow:t.custom.boxShadow.input.focus,"&:before":{backgroundColor:t.custom.palette.interaction.press}},"&.Mui-disabled":{backgroundColor:t.custom.palette.input.disabled,borderColor:t.custom.palette.stroke.disabled,"& svg":{"&:first-of-type":{fill:"transparent"},fill:t.custom.palette.icon.disabled}},"&.Mui-focusVisible":{borderColor:t.custom.palette.stroke.focus,boxShadow:t.custom.boxShadow.input.focus,"&:before":{backgroundColor:t.custom.palette.interaction.press}},"&.Mui-checked":{backgroundColor:t.custom.palette.purple[500],"& svg":{"&:first-of-type":{fill:"transparent"},fill:t.custom.palette.icon.lockedWhite},"&.Mui-disabled":{backgroundColor:t.custom.palette.input.disabled,borderColor:t.custom.palette.stroke.disabled,"& svg":{"&:first-of-type":{fill:"transparent"},fill:t.custom.palette.icon.disabled}}}}));export{i as StyledRadio};