@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.63 kB
JavaScript
import{styled as e,Box as t,ListItemButton as o,formControlLabelClasses as i,checkboxClasses as a}from"@mui/material";const r=e(t)(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(e.custom.margin.md),width:"100%",minWidth:440,maxWidth:500,boxSizing:"border-box"})),n=e(t)(({theme:e})=>({display:"flex",alignItems:"center",height:56,width:"100%"})),s=e(t)(({theme:e})=>({display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",width:"100%",gap:e.spacing(e.custom.margin.xs)})),c=e(o)(({theme:e})=>({borderRadius:e.spacing(e.custom.radius.md),padding:0,backgroundColor:e.custom.palette.interaction.none,height:"100%",display:"flex",flexGrow:1,flexBasis:0,flexDirection:"column",alignItems:"center",justifyContent:"space-between","&:hover":{backgroundColor:e.custom.palette.interaction.hover,[`& .${i.root}`]:{[`& .${a.root}`]:{backgroundColor:e.custom.palette.blue[0]}}},"&:active":{backgroundColor:e.custom.palette.interaction.press},"&.Mui-selected":{backgroundColor:e.custom.palette.interaction.press},"&.Mui-disabled":{opacity:1}})),l=e(t)(({theme:e,color:t})=>({width:24,aspectRatio:"1",borderRadius:"100%",backgroundColor:t})),d=e(t)(({theme:e})=>({height:36,display:"flex",alignItems:"center",justifyContent:"center"}));e(t)(({theme:e,color:t,animateBars:o})=>({flex:1,backgroundColor:t,borderRadius:e.spacing(e.custom.radius.sm),transition:o?"height 1s ease-in-out":void 0,height:"100%"}));export{c as LikertActionControllerWrapper,s as LikertGraphActionsControllerContainer,n as LikertGraphBarContainer,r as LikertGraphContainer,d as LikertGraphLabel,l as SwatchIndicator};