@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.7 kB
JavaScript
import{styled as t,Stack as e}from"@mui/material";const i=(...t)=>e=>!t.includes(e),a={PlanTierCard:t(e,{shouldForwardProp:i("bordered")})(({theme:t,bordered:e})=>({backgroundColor:t.custom.palette.surface.default,borderRadius:t.spacing(t.custom.radius.lg),border:e?`4px solid ${t.custom.palette.purple[500]}`:`1px solid ${t.custom.palette.stroke.light}`,padding:e?0:3,boxShadow:t.custom.elevation.raised,display:"flex",flex:1,minWidth:"280px",maxWidth:"480px",position:"relative"})),Top:t(e)(({theme:t})=>({gap:t.spacing(t.custom.padding.lg),padding:t.spacing(t.custom.padding.md),paddingBottom:0})),Head:t(e,{shouldForwardProp:i("height")})(({theme:t,height:e})=>({gap:t.spacing(t.custom.padding.md),transition:"height 0.3s ease-out",...e&&{minHeight:`${e}px`}})),PlanTitle:t(e)(({theme:t})=>({gap:t.spacing(t.custom.padding.md),justifyContent:"space-between",flexDirection:"row"})),Billing:t(e)(({theme:t})=>({alignItems:"start"})),Price:t(e)(({theme:t})=>({flexDirection:"row",alignItems:"end",gap:t.spacing(t.custom.padding.xs)})),Body:t(e,{shouldForwardProp:i("height")})(({height:t})=>({...t&&{minHeight:`${t}px`},transition:"height 0.3s ease-out"})),Bottom:t(e,{shouldForwardProp:i("height")})(({theme:t,height:e})=>({alignItems:"stretch",justifyContent:"space-between",gap:t.spacing(t.custom.padding.lg),padding:t.spacing(t.custom.padding.md),...e&&{minHeight:`${e}px`},transition:"height 0.3s ease-out",[t.breakpoints.up("lg")]:{padding:`${t.spacing(t.custom.padding.lg)} ${t.spacing(t.custom.padding.md)}`}})),FeatureList:t(e)(({theme:t})=>({alignItems:"center",gap:t.spacing(t.custom.padding.xs),padding:`0 ${t.spacing(t.custom.padding.md)}`}))};export{a as default,i as shouldForwardProp};