@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.83 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{styled as o,Box as r,useTheme as i,Stack as n}from"@mui/material";import{forwardRef as a}from"react";import s from"../../WebCore/Typography/Typography.js";import p from"./FeatureListItem.js";import{shouldForwardProp as m}from"./PlanTierCardContainers.js";const c=o(r,{shouldForwardProp:m("height")})(({height:e})=>({...e&&{minHeight:`${e}px`}})),d=o(r)(({theme:e})=>({display:"flex",flexDirection:"column",padding:e.spacing(e.custom.padding.md),justifyContent:"center",alignItems:"start",borderRadius:e.spacing(e.custom.radius.md),backgroundColor:e.custom.palette.purple[0]})),l=a(({respondentsTitle:o,respondentsFeatures:a,featuresIcon:m,height:l},g)=>{const u=i();return e(c,{ref:g,height:l,children:t(d,{children:[e(s,{component:"p",variation:"lg",weight:"bold",children:o}),a?.length&&e(n,{sx:{gap:u.spacing(u.custom.padding.xs),width:"100%"},children:a?.map(({features:i,bundleName:a,bundleCost:c})=>t(n,{children:[e(r,{sx:{borderBottom:`1px solid ${u.custom.palette.purple[100]}`,width:"100%",margin:`${u.spacing(u.custom.margin.md)} 0`}}),(a||c)&&t(n,{direction:"row",mb:u.spacing(u.custom.padding.sm),gap:u.spacing(u.custom.padding.sm),children:[a&&e(s,{component:"p",variation:"lg",weight:"bold",children:a}),c&&t(r,{sx:{marginLeft:"auto",display:"flex",alignItems:"baseline",color:u.custom.palette.text.secondary,gap:"2px"},children:[e(s,{component:"p",variation:"xs",sx:{color:u.custom.palette.text.secondary},children:"From"}),e(s,{component:"p",variation:"lg",weight:"bold",ml:"2px",children:c}),e(s,{component:"p",variation:"xs",sx:{color:u.custom.palette.text.secondary},children:"/mo"})]})]}),e(n,{gap:u.spacing(u.custom.margin.xs),children:i?.map(t=>e(p,{feature:t,featuresIcon:m},`${o}-feature-${t}`))})]},`bundle-${a}`))})]})})});export{l as default};