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