@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.21 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),a=require("@mui/material"),s=require("../../../utils/breakpoint.hook.js"),i=require("../Select/Select.js");require("../Select/SelectItem.js");var n=require("../Switch/Switch.js"),t=require("../Typography/Typography.js");const l=a.styled(n)(({theme:e})=>({"& .MuiSwitch-root":{[e.breakpoints.up("lg")]:{width:54,height:30,"& .MuiSwitch-switchBase":{margin:3,"&.Mui-checked":{transform:"translateX(24px)"}},"& .MuiSwitch-thumb":{width:24,height:24,outline:"2px solid rgba(255, 255, 255, 0.12)"},"& .MuiSwitch-track":{borderRadius:15}}}}));module.exports=({body:n,currency:r,hideCurrency:c=!1,changeCurrencyEvent:d=()=>{},frequency:u,heading:o,setCurrency:g=()=>{},setFrequency:m=()=>{},togglePayAnnuallyEvent:p=()=>{},selections:h=[{value:"gbp",label:"£"},{value:"eur",label:"€"},{value:"usd",label:"$"}]})=>{const x=a.useTheme(),y=s.useBreakpoint();return e.jsxs(a.Box,{sx:{alignItems:"center",backgroundColor:x.custom.palette.surface.default,borderRadius:x.custom.radius.round,boxShadow:x.custom.elevation.raised,display:"flex",gap:{sm:x.spacing(x.custom.padding.md),lg:x.spacing(x.custom.padding.lg)},pl:{sm:x.spacing(x.custom.padding.md),lg:x.spacing(x.custom.padding.lg)},pr:{sm:x.spacing(x.custom.padding.md+.5),lg:x.spacing(x.custom.padding.lg)},py:x.spacing(x.custom.padding.md)},children:[e.jsxs(a.Box,{sx:{alignItems:"center",display:"flex",gap:e=>({sm:e.spacing(e.custom.padding.sm),lg:e.spacing(e.custom.padding.md)})},children:[e.jsx(a.Box,{sx:{pr:e=>e.spacing(e.custom.padding.md),display:"flex"},children:e.jsx(l,{onChange:()=>(p(),void m("monthly"===u?"annually":"monthly")),role:"switch","aria-checked":"annually"===u,"aria-label":"Switch between monthly and annual billing",checked:"annually"===u})}),e.jsxs(a.Stack,{sx:{alignItems:"flex-start",display:"flex"},children:[e.jsx(t,{variation:"md",component:"p",children:o}),e.jsx(t,{variation:"sm",component:"p",sx:{color:x.custom.palette.text.secondary},children:n})]})]}),!c&&e.jsx(i,{name:"currency",onChange:e=>{return a=e.target.value,d(a),void g(a);var a},selections:h,value:h.find(e=>e.value===r)?.value,sizing:["xs","sm","md"].includes(y)?"md":"lg",sx:{minWidth:{sm:64,lg:72}}})]})};