@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 4.23 kB
JavaScript
import{jsxs as e,jsx as i}from"react/jsx-runtime";import{styled as n,Box as t,Fade as l,Grow as o,SvgIcon as c,useTheme as r}from"@mui/material";import s from"../../BrandCore/Icon/Icon.js";import a from"../../WebCore/IconButton/IconButton.js";import"../../BrandCore/primitiveVariables.js";const d=()=>e(c,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 40 40",style:{height:40,width:40},children:[i("rect",{x:"5",y:"5",width:"30",height:"30",rx:"15",fill:"#7F4CFF"}),i("path",{d:"M14.375 12.5H21.875V13.4375C20 13.4375 20 15.3125 20 15.3125V25.625H22.8125C22.8125 25.625 24.6875 25.625 24.6875 22.8125H26.5625L25.625 27.5H14.375V25.625C16.25 25.625 16.25 23.75 16.25 23.75V15.3125C16.25 15.3125 16.25 13.4375 14.375 13.4375V12.5Z",fill:"white"})]}),h=()=>{const n=r();return e(c,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 53 19",style:{height:19,width:53},sx:{"&.MuiSvgIcon-root path":{fill:"light"===n.palette.mode?n.custom.palette.icon.primary:n.custom.palette.icon.lockedWhite}},children:[i("path",{d:"M5.759 15.754c-.854-.6-1.033-.778-1.033-2.098V3H0v.2l.008.005c.868.535 1.263.778 1.263 2.092v8.359c0 1.32-.179 1.498-1.033 2.098v.2h5.52v-.2Z"}),i("path",{fillRule:"evenodd",d:"M6.015 11.947c.537 3.068 3.314 4.644 6.229 4.128 2.913-.517 4.986-2.962 4.45-6.022-.537-3.06-3.314-4.646-6.23-4.129-2.914.518-4.986 2.955-4.449 6.023Zm3.599-.639c-.514-2.95-.306-4.285 1.002-4.517 1.31-.234 1.964.946 2.479 3.896.514 2.95.307 4.28-1.003 4.517-1.31.238-1.964-.946-2.478-3.896ZM23.64 16.075c-2.913.516-5.69-1.06-6.228-4.128-.538-3.068 1.535-5.505 4.45-6.023 2.915-.517 5.69 1.068 6.229 4.128.538 3.06-1.537 5.506-4.45 6.023Zm-1.626-9.284c-1.31.232-1.517 1.567-1.003 4.517s1.168 4.134 2.478 3.9c1.31-.232 1.517-1.566 1.003-4.516s-1.168-4.135-2.478-3.901Z",clipRule:"evenodd"}),i("path",{fillRule:"evenodd",d:"M34.091 18.756c-.993-.565-1.35-.769-1.35-2.054l.003-2.396c.515 1.039 1.548 1.858 3.256 1.858 2.581 0 4.627-1.964 4.627-5.34 0-3.435-1.995-4.973-4.27-4.973-1.866 0-3.158 1.059-3.613 2.517l-.08-2.317h-4.567v.191c.854.558 1.19.778 1.19 2.097v8.363c0 1.318-.177 1.498-1.033 2.098v.2h5.915v-.2l-.078-.044Zm.814-3.808c-1.212 0-2.165-1.378-2.165-2.975V10.55c0-1.777.854-3.117 2.165-3.117 1.37 0 2.044 1.26 2.044 3.396 0 2.82-.694 4.119-2.044 4.119Z",clipRule:"evenodd"}),i("path",{d:"M51.545 16.124c.642 0 1.163-.524 1.163-1.17 0-.646-.52-1.17-1.163-1.17s-1.163.524-1.163 1.17c0 .646.52 1.17 1.163 1.17ZM46.212 9.195c-1.33-.395-2.079-.617-2.079-1.411 0-.665.607-.96 1.274-.96 1.292 0 2.304.74 3.476 2.458h.278V5.847h-.199l-.893.659-.117-.049c-.735-.305-1.47-.61-2.584-.61-2.125 0-3.813 1.318-3.813 3.275 0 1.757.836 2.757 3.834 3.536 1.113.28 1.887.48 1.887 1.338 0 .8-.774 1.178-1.708 1.178-1.435 0-2.483-.978-3.861-2.836h-.304l.21 3.795h.218l.793-.799c.636.32 1.63.82 2.96.82 2.54 0 4.31-1.42 4.31-3.416 0-2.058-1.23-2.817-3.656-3.535l-.026-.008Z"})]})},g=n("button")(({theme:e})=>({outline:"none",border:"none",padding:0,backgroundColor:"transparent","&:active:before":{backgroundColor:e.custom.palette.interaction.press},cursor:"pointer"})),p=n(t,{shouldForwardProp:e=>!["navigationSizing"].includes(e)})(({navigationSizing:e,theme:i})=>({alignItems:"center",backgroundColor:i.custom.palette.surface.sunken,display:"flex",flexDirection:"sm"===e?"column":"row",justifyContent:"space-between",padding:i.spacing(1.5,2,2)})),m=({isMobile:n,logoLink:c=()=>{},navigationSizing:r,toggleMenuOnClick:m})=>e(p,{navigationSizing:r,children:[i(t,{sx:{display:"flex",width:"100%"},children:e(t,{sx:{alignItems:"center",display:"flex",justifyContent:"space-between",width:"100%"},children:[i(g,{onClick:c,children:e(t,{sx:{alignItems:"center",display:"flex",gap:.5,pr:"lg"===r?.5:0},children:[i(d,{}),"lg"===r&&i(l,{in:!0,children:i(t,{sx:{display:"flex",alignItems:"flex-end"},children:i(h,{})})})]})}),"lg"===r&&i(l,{in:"lg"===r,children:i(t,{children:i(a,{onClick:m,sizing:"lg",icon:i(s,n?{name:"close",size:20}:{name:"nav-toggle",size:20})})})})]})}),"sm"===r&&i(o,{in:!0,style:{transformOrigin:"0 100%"},children:i(t,{sx:{alignItems:"center",display:"flex",justifyContent:"flex-start",width:"100%"},children:i(a,{onClick:m,sizing:"lg",icon:i(s,n?{name:"close",size:20}:{name:"nav-toggle",size:20})})})})]});export{m as default};