@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.85 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material"),n=require("@mui/material/styles"),i=require("react"),t=require("../../BrandCore/Icon/Icon.js"),a=require("../Typography/Typography.js");const o=n.styled(n=>e.jsx(r.Accordion,{disableGutters:!0,elevation:0,square:!0,...n}))(()=>({"&.Mui-expanded::before":{opacity:1}})),s=n.styled(n=>e.jsx(r.AccordionSummary,{expandIcon:e.jsx(t.default,{name:"chevron-down",size:24}),...n}))(({theme:e})=>({backgroundColor:e.custom.palette.surface.default,padding:`${e.spacing(1)} ${e.spacing(2)}`,minHeight:"none","& .MuiAccordionSummary-expandIconWrapper":{color:e.custom.palette.text.primary},"& .MuiAccordionSummary-content":{margin:0}})),c=n.styled(r.AccordionDetails)(({theme:e})=>({padding:`0 ${e.spacing(2)} ${e.spacing(4)}`}));exports.AccordionDetails=c,exports.AccordionSummary=s,exports.default=({heading:n,items:t})=>{const{custom:d}=r.useTheme(),[l,p]=i.useState("");return e.jsx(r.Container,{sx:{backgroundColor:d.palette.surface.default,color:d.palette.text.primary},children:e.jsxs(r.Grid,{container:!0,sx:{alignItems:"center",display:"flex",justifyContent:"center",py:{sm:4,lg:6},gap:2},children:[e.jsx(r.Grid,{size:[12,12,12,8],children:e.jsx(a,{variation:"xl",component:"h2",fontWeight:500,sx:{textAlign:"center"},children:n})}),e.jsx(r.Grid,{size:[12,12,12,8],children:t?.map(r=>{return e.jsxs(o,{expanded:l===r.heading,onChange:(n=r.heading,(e,r)=>{p(!!r&&n)}),children:[e.jsx(s,{"aria-controls":`${r.heading}-content`,id:`${r.heading}-header`,heading:r.heading,children:e.jsx(a,{variation:"lg",component:"p",fontWeight:500,children:r.heading})}),e.jsx(c,{children:"string"==typeof r.body?e.jsx(a,{variation:"lg",component:"p",sx:{whiteSpace:"break-spaces"},children:r.body}):r.body})]},r.heading);var n})})]})})};