@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.2 kB
JavaScript
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{styled as i,useTheme as t,Box as n,Stack as l}from"@mui/material";import{useBreakpoint as s}from"../../../utils/breakpoint.hook.js";import r from"../Select/Select.js";import"../Select/SelectItem.js";import c from"../Switch/Switch.js";import o from"../Typography/Typography.js";const d=i(c)(({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}}}})),m=({body:i,currency:c,hideCurrency:m=!1,changeCurrencyEvent:u=()=>{},frequency:p,heading:g,setCurrency:h=()=>{},setFrequency:y=()=>{},togglePayAnnuallyEvent:x=()=>{},selections:f=[{value:"gbp",label:"£"},{value:"eur",label:"€"},{value:"usd",label:"$"}]})=>{const b=t(),v=s();return e(n,{sx:{alignItems:"center",backgroundColor:b.custom.palette.surface.default,borderRadius:b.custom.radius.round,boxShadow:b.custom.elevation.raised,display:"flex",gap:{sm:b.spacing(b.custom.padding.md),lg:b.spacing(b.custom.padding.lg)},pl:{sm:b.spacing(b.custom.padding.md),lg:b.spacing(b.custom.padding.lg)},pr:{sm:b.spacing(b.custom.padding.md+.5),lg:b.spacing(b.custom.padding.lg)},py:b.spacing(b.custom.padding.md)},children:[e(n,{sx:{alignItems:"center",display:"flex",gap:e=>({sm:e.spacing(e.custom.padding.sm),lg:e.spacing(e.custom.padding.md)})},children:[a(n,{sx:{pr:e=>e.spacing(e.custom.padding.md),display:"flex"},children:a(d,{onChange:()=>(x(),void y("monthly"===p?"annually":"monthly")),role:"switch","aria-checked":"annually"===p,"aria-label":"Switch between monthly and annual billing",checked:"annually"===p})}),e(l,{sx:{alignItems:"flex-start",display:"flex"},children:[a(o,{variation:"md",component:"p",children:g}),a(o,{variation:"sm",component:"p",sx:{color:b.custom.palette.text.secondary},children:i})]})]}),!m&&a(r,{name:"currency",onChange:e=>{return a=e.target.value,u(a),void h(a);var a},selections:f,value:f.find(e=>e.value===c)?.value,sizing:["xs","sm","md"].includes(v)?"md":"lg",sx:{minWidth:{sm:64,lg:72}}})]})};export{m as default};