@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 4.38 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material"),n=require("../../BrandCore/Icon/Icon.js"),s=require("../../WebCore/IconButton/IconButton.js");require("../../BrandCore/primitiveVariables.js");const t=()=>e.jsxs(i.SvgIcon,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 40 40",style:{height:40,width:40},children:[e.jsx("rect",{x:"5",y:"5",width:"30",height:"30",rx:"15",fill:"#7F4CFF"}),e.jsx("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"})]}),l=()=>{const n=i.useTheme();return e.jsxs(i.SvgIcon,{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:[e.jsx("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"}),e.jsx("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"}),e.jsx("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"}),e.jsx("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"})]})},o=i.styled("button")(({theme:e})=>({outline:"none",border:"none",padding:0,backgroundColor:"transparent","&:active:before":{backgroundColor:e.custom.palette.interaction.press},cursor:"pointer"})),c=i.styled(i.Box,{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)}));module.exports=({isMobile:r,logoLink:a=()=>{},navigationSizing:d,toggleMenuOnClick:x})=>e.jsxs(c,{navigationSizing:d,children:[e.jsx(i.Box,{sx:{display:"flex",width:"100%"},children:e.jsxs(i.Box,{sx:{alignItems:"center",display:"flex",justifyContent:"space-between",width:"100%"},children:[e.jsx(o,{onClick:a,children:e.jsxs(i.Box,{sx:{alignItems:"center",display:"flex",gap:.5,pr:"lg"===d?.5:0},children:[e.jsx(t,{}),"lg"===d&&e.jsx(i.Fade,{in:!0,children:e.jsx(i.Box,{sx:{display:"flex",alignItems:"flex-end"},children:e.jsx(l,{})})})]})}),"lg"===d&&e.jsx(i.Fade,{in:"lg"===d,children:e.jsx(i.Box,{children:e.jsx(s,{onClick:x,sizing:"lg",icon:r?e.jsx(n.default,{name:"close",size:20}):e.jsx(n.default,{name:"nav-toggle",size:20})})})})]})}),"sm"===d&&e.jsx(i.Grow,{in:!0,style:{transformOrigin:"0 100%"},children:e.jsx(i.Box,{sx:{alignItems:"center",display:"flex",justifyContent:"flex-start",width:"100%"},children:e.jsx(s,{onClick:x,sizing:"lg",icon:r?e.jsx(n.default,{name:"close",size:20}):e.jsx(n.default,{name:"nav-toggle",size:20})})})})]});