umwd-components 0.1.7 → 0.1.8

package/dist/index.es.js

@@ -1 +1 @@
-import e,{useState as t,useEffect as r,useCallback as a}from"react";import{TextField as n}from"@mui/material";import o from"prop-types";import"next/image";import"next/router";import"next/link";import"@mui/icons-material/Close";import"@mui/icons-material/MoreVert";!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}");const i=()=>e.createElement("svg",{x:"0px",y:"0px",width:"15px",height:"15px",viewBox:"0 0 122.879 122.879",enableBackground:"new 0 0 122.879 122.879"},e.createElement("g",null,e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",fill:"#FF4141",d:"M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"}))),l=()=>e.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},e.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),e.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),c=({value:a,requirement:n})=>{const[o,c]=t();return r((()=>{c(n.validator(a))}),[a,n]),e.createElement("div",{className:"requirement"},o?e.createElement(l,null):e.createElement(i,null),e.createElement("p",{className:o?"valid":"invalid"},n.text))},s=({value:t,requirements:n,onValidChange:o})=>{const i=a(o,[]);return r((()=>{i(n.every((e=>e.validator(t))))}),[t,n,i]),n.map(((r,a)=>e.createElement(c,{key:a,value:t,requirement:r,onValidChange:o})))};function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},m.apply(this,arguments)}const d=t=>e.createElement(n,m({},t,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}}));function p({label:t,backgroundColor:r="red",size:a="md",onClick:n}){let o=1;"sm"===a&&(o=.75),"lg"===a&&(o=1.25);const i={backgroundColor:r,padding:`${.5*o}rem ${1*o}rem`,border:"none"};return e.createElement("button",{style:i,onClick:n},t)}function f({children:t,spacing:r=2,direction:a="row",wrap:n=!1}){const o={display:"flex",gap:.25*r+"rem",flexWrap:n?"wrap":"nowrap",flexDirection:a};return e.createElement("div",{style:o},t)}p.propTypes={label:o.string,backgroundColor:o.string,size:o.oneOf(["sm","md","lg"]),onClick:o.func},f.propTypes={spacing:o.number,wrap:o.bool,direction:o.oneOf(["row","column"])};export{p as Button,d as NoteTextField,s as Requirements,f as Stack};
+import e,{useState as t,useEffect as a,useCallback as r}from"react";import{TextField as n,AppBar as l,Container as c,Toolbar as o,Box as i,Typography as s,Button as m,Dialog as p,List as x,ListItem as d,ListItemText as h,Divider as f}from"@mui/material";import u from"prop-types";import g from"next/link";import y from"@mui/icons-material/Close";import k from"@mui/icons-material/MoreVert";!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}");const E=()=>e.createElement("svg",{x:"0px",y:"0px",width:"15px",height:"15px",viewBox:"0 0 122.879 122.879",enableBackground:"new 0 0 122.879 122.879"},e.createElement("g",null,e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",fill:"#FF4141",d:"M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"}))),b=()=>e.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},e.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),e.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),R=({value:r,requirement:n})=>{const[l,c]=t();return a((()=>{c(n.validator(r))}),[r,n]),e.createElement("div",{className:"requirement"},l?e.createElement(b,null):e.createElement(E,null),e.createElement("p",{className:l?"valid":"invalid"},n.text))},w=({value:t,requirements:n,onValidChange:l})=>{const c=r(l,[]);return a((()=>{c(n.every((e=>e.validator(t))))}),[t,n,c]),n.map(((a,r)=>e.createElement(R,{key:r,value:t,requirement:a,onValidChange:l})))};function v(){return v=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},v.apply(this,arguments)}const C=t=>e.createElement(n,v({},t,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}}));function W({label:t,backgroundColor:a="red",size:r="md",onClick:n}){let l=1;"sm"===r&&(l=.75),"lg"===r&&(l=1.25);const c={backgroundColor:a,padding:`${.5*l}rem ${1*l}rem`,border:"none"};return e.createElement("button",{style:c,onClick:n},t)}function T({children:t,spacing:a=2,direction:r="row",wrap:n=!1}){const l={display:"flex",gap:.25*a+"rem",flexWrap:n?"wrap":"nowrap",flexDirection:r};return e.createElement("div",{style:l},t)}W.propTypes={label:u.string,backgroundColor:u.string,size:u.oneOf(["sm","md","lg"]),onClick:u.func},T.propTypes={spacing:u.number,wrap:u.bool,direction:u.oneOf(["row","column"])};const _=({site_title:e,logo:a,pages:r})=>{const[n,u]=t(!1),E=e=>{u(!1)};return React.createElement(l,{position:"sticky"},React.createElement(c,{maxWidth:"xl"},React.createElement(o,{disableGutters:!0,sx:{py:1}},React.createElement(g,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(i,{sx:{display:{xs:"none",md:"flex"},cursor:"pointer",alignItems:"center"}},React.createElement(i,{sx:{display:"flex",mr:1}},React.createElement("img",{src:a.url,width:a.width||"32px",height:a.height||"32px",alt:"site logo",style:{maxWidth:"60px",maxHeight:"60px"}})),void 0!==e&&React.createElement(s,{variant:"h6",noWrap:!0,component:"h1",sx:{display:"flex",textDecoration:"none"}},e))),React.createElement(i,{sx:{flexGrow:1,display:{xs:"none",md:"flex"},alignItems:"center"}},r.map((e=>React.createElement(m,{key:e.name,onClick:()=>e.action(),sx:{my:2,color:"primary.contrastText",display:"block"}},e.name)))),React.createElement(g,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(i,{sx:{display:{xs:"flex",md:"none"},alignItems:"center"}},void 0!==a.url&&React.createElement(i,{sx:{display:"flex",mr:1}},React.createElement("img",{src:a.url,width:a.width||"32px",height:a.height||"32px",alt:a.alt||"site logo",style:{maxWidth:"60px",maxHeight:"60px"}})),void 0!==e&&React.createElement(s,{variant:"h5",noWrap:!0,component:"h1",sx:{display:"flex",flexGrow:1}},e))),React.createElement(i,{sx:{display:{xs:"flex",md:"none"},flexGrow:1}}),React.createElement(i,{sx:{flexGrow:0,display:{xs:"flex",md:"none"}}},React.createElement(m,{onClick:e=>{u(!0)},sx:{width:"40px",height:"40px",borderRadius:"50%",p:0,minWidth:"unset",color:"primary.contrastText",boxShadow:"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"}},React.createElement(k,{sx:{color:"primary.contrastText"}})),React.createElement(p,{fullScreen:!0,open:n,onClose:E},React.createElement(l,{position:"sticky"},React.createElement(c,{maxWidth:"xl"},React.createElement(o,{disableGutters:!0,sx:{py:1,justifyContent:"space-between"}},React.createElement(g,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(i,{sx:{display:"flex",flexDirection:"row",alignItems:"center"}},React.createElement(i,{sx:{display:"flex",mr:1}},React.createElement("img",{src:a.url,alt:a.alt||"logo",width:a.width||"32px",height:a.height||"32px",style:{maxWidth:"60px",maxHeight:"60px"}})),React.createElement(s,{variant:"h5",noWrap:!0,component:"h1",sx:{display:"flex",flexGrow:1}},void 0!==e&&e))),React.createElement(m,{onClick:E,sx:{width:"40px",height:"40px",borderRadius:"50%",p:0,minWidth:"unset",color:"primary.contrastText",boxShadow:"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"},"aria-label":"close"},React.createElement(y,{sx:{color:"primary.contrastText"}}))))),React.createElement(x,null,r.map((e=>React.createElement(React.Fragment,null,React.createElement(d,{key:e.name,onClick:()=>{e.action(),E()}},React.createElement(h,{primary:e.name})),React.createElement(f,null))))))))))};export{W as Button,_ as NavBar,C as NoteTextField,w as Requirements,T as Stack};

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("react"),r=require("@mui/material"),t=require("prop-types");require("next/image"),require("next/router"),require("next/link"),require("@mui/icons-material/Close"),require("@mui/icons-material/MoreVert");!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}");const a=()=>e.createElement("svg",{x:"0px",y:"0px",width:"15px",height:"15px",viewBox:"0 0 122.879 122.879",enableBackground:"new 0 0 122.879 122.879"},e.createElement("g",null,e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",fill:"#FF4141",d:"M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"}))),n=()=>e.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},e.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),e.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),i=({value:r,requirement:t})=>{const[i,o]=e.useState();return e.useEffect((()=>{o(t.validator(r))}),[r,t]),e.createElement("div",{className:"requirement"},i?e.createElement(n,null):e.createElement(a,null),e.createElement("p",{className:i?"valid":"invalid"},t.text))};function o(){return o=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},o.apply(this,arguments)}function s({label:r,backgroundColor:t="red",size:a="md",onClick:n}){let i=1;"sm"===a&&(i=.75),"lg"===a&&(i=1.25);const o={backgroundColor:t,padding:`${.5*i}rem ${1*i}rem`,border:"none"};return e.createElement("button",{style:o,onClick:n},r)}function l({children:r,spacing:t=2,direction:a="row",wrap:n=!1}){const i={display:"flex",gap:.25*t+"rem",flexWrap:n?"wrap":"nowrap",flexDirection:a};return e.createElement("div",{style:i},r)}s.propTypes={label:t.string,backgroundColor:t.string,size:t.oneOf(["sm","md","lg"]),onClick:t.func},l.propTypes={spacing:t.number,wrap:t.bool,direction:t.oneOf(["row","column"])},exports.Button=s,exports.NoteTextField=t=>e.createElement(r.TextField,o({},t,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}})),exports.Requirements=({value:r,requirements:t,onValidChange:a})=>{const n=e.useCallback(a,[]);return e.useEffect((()=>{n(t.every((e=>e.validator(r))))}),[r,t,n]),t.map(((t,n)=>e.createElement(i,{key:n,value:r,requirement:t,onValidChange:a})))},exports.Stack=l;
+"use strict";var e=require("react"),t=require("@mui/material"),a=require("prop-types"),r=require("next/link"),n=require("@mui/icons-material/Close"),l=require("@mui/icons-material/MoreVert");!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}");const o=()=>e.createElement("svg",{x:"0px",y:"0px",width:"15px",height:"15px",viewBox:"0 0 122.879 122.879",enableBackground:"new 0 0 122.879 122.879"},e.createElement("g",null,e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",fill:"#FF4141",d:"M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"}))),c=()=>e.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},e.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),e.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),i=({value:t,requirement:a})=>{const[r,n]=e.useState();return e.useEffect((()=>{n(a.validator(t))}),[t,a]),e.createElement("div",{className:"requirement"},r?e.createElement(c,null):e.createElement(o,null),e.createElement("p",{className:r?"valid":"invalid"},a.text))};function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},s.apply(this,arguments)}function m({label:t,backgroundColor:a="red",size:r="md",onClick:n}){let l=1;"sm"===r&&(l=.75),"lg"===r&&(l=1.25);const o={backgroundColor:a,padding:`${.5*l}rem ${1*l}rem`,border:"none"};return e.createElement("button",{style:o,onClick:n},t)}function x({children:t,spacing:a=2,direction:r="row",wrap:n=!1}){const l={display:"flex",gap:.25*a+"rem",flexWrap:n?"wrap":"nowrap",flexDirection:r};return e.createElement("div",{style:l},t)}m.propTypes={label:a.string,backgroundColor:a.string,size:a.oneOf(["sm","md","lg"]),onClick:a.func},x.propTypes={spacing:a.number,wrap:a.bool,direction:a.oneOf(["row","column"])};exports.Button=m,exports.NavBar=({site_title:a,logo:o,pages:c})=>{const[i,s]=e.useState(!1),m=e=>{s(!1)};return React.createElement(t.AppBar,{position:"sticky"},React.createElement(t.Container,{maxWidth:"xl"},React.createElement(t.Toolbar,{disableGutters:!0,sx:{py:1}},React.createElement(r,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(t.Box,{sx:{display:{xs:"none",md:"flex"},cursor:"pointer",alignItems:"center"}},React.createElement(t.Box,{sx:{display:"flex",mr:1}},React.createElement("img",{src:o.url,width:o.width||"32px",height:o.height||"32px",alt:"site logo",style:{maxWidth:"60px",maxHeight:"60px"}})),void 0!==a&&React.createElement(t.Typography,{variant:"h6",noWrap:!0,component:"h1",sx:{display:"flex",textDecoration:"none"}},a))),React.createElement(t.Box,{sx:{flexGrow:1,display:{xs:"none",md:"flex"},alignItems:"center"}},c.map((e=>React.createElement(t.Button,{key:e.name,onClick:()=>e.action(),sx:{my:2,color:"primary.contrastText",display:"block"}},e.name)))),React.createElement(r,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(t.Box,{sx:{display:{xs:"flex",md:"none"},alignItems:"center"}},void 0!==o.url&&React.createElement(t.Box,{sx:{display:"flex",mr:1}},React.createElement("img",{src:o.url,width:o.width||"32px",height:o.height||"32px",alt:o.alt||"site logo",style:{maxWidth:"60px",maxHeight:"60px"}})),void 0!==a&&React.createElement(t.Typography,{variant:"h5",noWrap:!0,component:"h1",sx:{display:"flex",flexGrow:1}},a))),React.createElement(t.Box,{sx:{display:{xs:"flex",md:"none"},flexGrow:1}}),React.createElement(t.Box,{sx:{flexGrow:0,display:{xs:"flex",md:"none"}}},React.createElement(t.Button,{onClick:e=>{s(!0)},sx:{width:"40px",height:"40px",borderRadius:"50%",p:0,minWidth:"unset",color:"primary.contrastText",boxShadow:"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"}},React.createElement(l,{sx:{color:"primary.contrastText"}})),React.createElement(t.Dialog,{fullScreen:!0,open:i,onClose:m},React.createElement(t.AppBar,{position:"sticky"},React.createElement(t.Container,{maxWidth:"xl"},React.createElement(t.Toolbar,{disableGutters:!0,sx:{py:1,justifyContent:"space-between"}},React.createElement(r,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(t.Box,{sx:{display:"flex",flexDirection:"row",alignItems:"center"}},React.createElement(t.Box,{sx:{display:"flex",mr:1}},React.createElement("img",{src:o.url,alt:o.alt||"logo",width:o.width||"32px",height:o.height||"32px",style:{maxWidth:"60px",maxHeight:"60px"}})),React.createElement(t.Typography,{variant:"h5",noWrap:!0,component:"h1",sx:{display:"flex",flexGrow:1}},void 0!==a&&a))),React.createElement(t.Button,{onClick:m,sx:{width:"40px",height:"40px",borderRadius:"50%",p:0,minWidth:"unset",color:"primary.contrastText",boxShadow:"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"},"aria-label":"close"},React.createElement(n,{sx:{color:"primary.contrastText"}}))))),React.createElement(t.List,null,c.map((e=>React.createElement(React.Fragment,null,React.createElement(t.ListItem,{key:e.name,onClick:()=>{e.action(),m()}},React.createElement(t.ListItemText,{primary:e.name})),React.createElement(t.Divider,null))))))))))},exports.NoteTextField=a=>e.createElement(t.TextField,s({},a,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}})),exports.Requirements=({value:t,requirements:a,onValidChange:r})=>{const n=e.useCallback(r,[]);return e.useEffect((()=>{n(a.every((e=>e.validator(t))))}),[t,a,n]),a.map(((a,n)=>e.createElement(i,{key:n,value:t,requirement:a,onValidChange:r})))},exports.Stack=x;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "UMWD Component library",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/NavBar/NavBar.js

@@ -0,0 +1,218 @@
+import { useState } from "react";
+import Link from "next/link";
+
+import {
+  Dialog,
+  AppBar,
+  Box,
+  Toolbar,
+  Typography,
+  Container,
+  Button,
+  List,
+  ListItem,
+  Divider,
+  ListItemText
+} from "@mui/material";
+
+import CloseIcon from "@mui/icons-material/Close";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+
+export const NavBar = ({site_title, logo, pages}) => {
+   // handleMobileMenu
+
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+
+  const handleOpenMobileMenu = (e) => {
+    setMobileNavOpen(true);
+  };
+
+  const handleCloseMobileMenu = (e) => {
+    setMobileNavOpen(false);
+  };
+
+
+
+  return (
+    <AppBar position="sticky">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters sx={{py:1}}>
+          {/* logo and site title for big screens */}
+          <Link href="/" style={{textDecoration: "none", color: "unset"}}>
+            <Box
+              sx={{ display: { xs: "none", md: "flex" }, cursor: "pointer", alignItems: "center"}}
+            ><Box sx={{ display: "flex", mr: 1 }}>
+                      <img
+                        src={logo.url}
+                        width={logo.width || "32px"}
+                        height={logo.height || "32px"}
+                        alt="site logo"
+                        style={{maxWidth: "60px", maxHeight: "60px"}}
+                      />
+                    </Box>
+                  {site_title !== undefined && (
+                    <Typography
+                      
+                      variant="h6"
+                      noWrap
+                      component="h1"
+                      sx={{
+                        display: "flex",
+                        textDecoration: "none",
+                      }}
+                    >
+                      {site_title}
+                    </Typography>
+                  )}
+            </Box>
+          </Link>
+
+          {/* Large screen menu */}
+          <Box
+            sx={{
+              flexGrow: 1,
+              display: { xs: "none", md: "flex" },
+              alignItems: "center",
+            }}
+          >
+            
+
+            {pages.map((page) => {
+              return (
+              <Button
+                key={page.name}
+                onClick={() => page.action()}
+                sx={{ my: 2, color: "primary.contrastText", display: "block" }}
+              >
+                {page.name}
+              </Button>
+            )})}
+
+          </Box>
+
+          {/* small screen logo and site title */}
+          <Link href="/" style={{textDecoration: "none", color: "unset"}}>
+            <Box sx={{ display: { xs: "flex", md: "none" }, alignItems:"center"}}>
+              
+                {logo.url !== undefined && <Box sx={{ display: "flex", mr: 1 }}>
+                  <img
+                    src={logo.url}
+                    width={logo.width || "32px"}
+                    height={logo.height || "32px"}
+                    alt={logo.alt || "site logo"}
+                    style={{maxWidth: "60px", maxHeight: "60px"}}
+                  />
+                </Box>}
+              {site_title !== undefined && <Typography
+                variant="h5"
+                noWrap
+                component="h1"
+                sx={{
+                  display: "flex",
+                  flexGrow: 1,
+                }}
+              >
+                {site_title}
+              </Typography>}
+            </Box>
+          </Link>
+          {/* spacer box */}
+          <Box sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}></Box> 
+
+          {/* small screen nav menu */}
+
+          <Box sx={{ flexGrow: 0, display: { xs: "flex", md: "none" } }}>
+            <Button
+              onClick={handleOpenMobileMenu}
+              sx={{
+                width: "40px",
+                height: "40px",
+                borderRadius: "50%",
+                p: 0,
+                minWidth: "unset",
+                color: "primary.contrastText",
+                boxShadow:
+                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+              }}
+            >
+              <MoreVertIcon sx={{ color: "primary.contrastText" }} />
+            </Button>
+
+            <Dialog
+              fullScreen
+              open={mobileNavOpen}
+              onClose={handleCloseMobileMenu}
+            >
+              <AppBar position="sticky">
+                <Container maxWidth="xl">
+                  <Toolbar disableGutters sx={{py:1, justifyContent:"space-between"}}>
+                  <Link href="/" style={{textDecoration: "none", color: "unset"}}>
+                    <Box sx={{display: "flex", flexDirection: "row", alignItems: "center"}}>
+                    <Box sx={{ display: "flex", mr: 1 }}>
+                      <img
+                        src={logo.url}
+                        alt={logo.alt || "logo"}
+                        width={logo.width || "32px"}
+                        height={logo.height || "32px"}
+                        style={{maxWidth: "60px", maxHeight: "60px"}}
+                      />
+                    </Box>
+                    <Typography
+                      variant="h5"
+                      noWrap
+                      component="h1"
+                      sx={{
+                        display: "flex",
+                        flexGrow: 1,
+                      }}
+                    >
+                      
+                        {site_title !== undefined && site_title}
+                      
+                    </Typography>
+                    </Box>
+                  </Link>
+                    <Button
+                      onClick={handleCloseMobileMenu}
+                      sx={{
+                        width: "40px",
+                        height: "40px",
+                        borderRadius: "50%",
+                        p: 0,
+                        minWidth: "unset",
+                        color: "primary.contrastText",
+                        boxShadow:
+                          "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+                      }}
+                      aria-label="close"
+                    >
+                      <CloseIcon sx={{ color: "primary.contrastText" }} />
+                    </Button>
+                  </Toolbar>
+                </Container>
+              </AppBar>
+              <List>
+                {pages.map((page) => 
+                {
+                return (
+                  <>
+                    <ListItem
+                      key={page.name}
+                      onClick={() => {page.action(); handleCloseMobileMenu();}}
+                    >
+                      <ListItemText primary={page.name} />
+                    </ListItem>
+                    <Divider />
+                  </>
+                )})}
+                
+
+                    
+              </List>
+            </Dialog>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}

package/src/components/NavBar/index.js

@@ -1,568 +1 @@
-import { useState } from "react";
-import Image from "next/image";
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-import {
-  Dialog,
-  AppBar,
-  Box,
-  Toolbar,
-  Typography,
-  Container,
-  Button,
-  List,
-  ListItem,
-  Divider,
-  ListItemText,
-  Stack
-} from "@mui/material";
-
-import CloseIcon from "@mui/icons-material/Close";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-
-/* 
-TODO:
-
-might have to become a different component, or there should be some way to handle submenus
-
-const StyledShopMenuSpeedDial = styled(SpeedDial)(({ theme }) => ({
-  position: "relative",
-  width: "67px",
-  alignItems: "flex-start",
-  "& .MuiFab-root": {
-    height: 40,
-    borderRadius: "4px",
-    marginLeft: "10px",
-    boxShadow: "unset",
-  },
-  "& .MuiSpeedDial-actions": {
-    "& .MuiSpeedDialAction-fab": {
-      padding: "10px",
-      borderRadius: "4px",
-      width: "max-content",
-    },
-  },
-})); */
-
-function NavBar({site_title, logo, pages}) {
-  /* 
-  To do: 
-  Remove and find a better solution for cookie consent, also make sure it is in the right component
-  const { cookieConsent, handleDetailsOpen } = useContext(CookieConsentContext); */
-
-  /* 
-  TODO: i dont want to use this here directly
-  const { data: session } = useSession(); */
-
-  // use new appRouter
-  // const router = useRouter();
-
-  /* 
-  Move to a different component
-  const auth = true; */
-
-  /* 
-  TODO: use submenus instead
-  const blogging = false;
-  const commerce = true; */
-
-  /* 
-  TODO should be a prop 
-  const pages = [
-    {
-      name: "Resources",
-      link: "/resources",
-    },
-    {
-      name: "Contact",
-      link: "/contact",
-    },
-  ]; */
-
-  // push modules
-  /* 
-  TODO a better way to handle this
-  if (blogging) {
-    pages.splice(0, 0, {
-      name: "Blog",
-      action: () => {
-        router.push("/blog");
-        handleCloseNavMenu();
-      },
-    });
-  } */
-
-  /* 
-  TODO: 
-  move to a component better suited to handle this
-  const actions = {
-    loggedIn: [
-      {
-        icon: <PersonIcon />,
-        name: "Profile",
-        action: () => router.push("/user/profile"),
-      },
-      {
-        icon: <ListAltIcon />,
-        name: "Orders",
-        action: () => router.push("/user/orders"),
-      },
-      {
-        icon: <FolderIcon />,
-        name: "Documents",
-        action: () => router.push("/user/documents"),
-      },
-      {
-        icon: <KeyboardReturnIcon />,
-        name: "Returns",
-        action: () => router.push("/user/returns"),
-      },
-      {
-        icon: <LogoutIcon />,
-        name: "Log-Out",
-        action: () => signOut({ callbackUrl: "/" }),
-      },
-    ],
-    loggedOut: [
-      {
-        icon: <LoginIcon />,
-        name: "Sign-In",
-        action: () => {
-          if (cookieConsent.nextCookie === true) {
-            signIn();
-          } else handleDetailsOpen(true);
-        },
-      },
-      {
-        icon: <HowToRegIcon />,
-        name: "Register",
-        action: () => Router.push("/auth/register"),
-      },
-    ],
-  }; */
-
-  /* 
-  TODO move site-information to the props
-  const { siteInformation, isLoading, isError } = useSiteInfo(); */
-
-  /* 
-  This does not seem to serve any purpose
-  const [anchorElNav, setAnchorElNav] = useState(null);
-
-  const handleOpenNavMenu = (event) => {
-    setAnchorElNav(event.currentTarget);
-  };
-
-  const handleCloseNavMenu = () => {
-    setAnchorElNav(null);
-  }; */
-
-  // shop
-
-  /* 
-  TODO REMOVE this does not seem to serve any purpose
-  const [shopAnchorEl, setShopAnchorEl] = useState(null);
-  const open = Boolean(shopAnchorEl);
-  const handleOpenShop = (event) => {
-    setShopAnchorEl(event.currentTarget);
-  };
-  const handleCloseShop = () => {
-    setShopAnchorEl(null);
-  }; */
-
-  // handleMobileMenu
-
-  const [mobileNavOpen, setMobileNavOpen] = useState(false);
-
-  /* 
-  again this does not seem to serve any purpose
-  const mobileMenuId = mobileNavOpen ? "mobile-menu" : undefined; */
-
-  const handleOpenMobileMenu = (e) => {
-    setMobileNavOpen(true);
-  };
-
-  const handleCloseMobileMenu = (e) => {
-    setMobileNavOpen(false);
-  };
-
-  /* const Transition = forwardRef(function Transition(props, ref) {
-    return <Slide direction="up" ref={ref} {...props} />;
-  }); */
-
-  /* const theme = useTheme();
-
-  const small = useMediaQuery(theme.breakpoints.down("sm")); */
-
-  return (
-    <AppBar position="sticky">
-      <Container maxWidth="xl">
-        <Toolbar disableGutters sx={{py:1}}>
-          {/* logo and site title for big screens */}
-          <Link href="/" style={{textDecoration: "none", color: "unset"}}>
-            <Box
-              sx={{ display: { xs: "none", md: "flex" }, cursor: "pointer", alignItems: "center"}}
-            ><Box sx={{ display: "flex", mr: 1 }}>
-                      <img
-                        src={logo.url}
-                        width={logo.width || "32px"}
-                        height={logo.height || "32px"}
-                        alt="site logo"
-                        style={{maxWidth: "60px", maxHeight: "60px"}}
-                      />
-                    </Box>
-                  {site_title !== undefined && (
-                    <Typography
-                      
-                      variant="h6"
-                      noWrap
-                      component="h1"
-                      sx={{
-                        display: "flex",
-                        textDecoration: "none",
-                      }}
-                    >
-                      {site_title}
-                    </Typography>
-                  )}
-            </Box>
-          </Link>
-
-          {/* Large screen menu */}
-          <Box
-            sx={{
-              flexGrow: 1,
-              display: { xs: "none", md: "flex" },
-              alignItems: "center",
-            }}
-          >
-            
-
-            {pages.map((page) => {
-              return (
-              <Button
-                key={page.name}
-                onClick={() => page.action()}
-                sx={{ my: 2, color: "primary.contrastText", display: "block" }}
-              >
-                {page.name}
-              </Button>
-            )})}
-
-          </Box>
-
-          {/* small screen logo and site title */}
-          <Link href="/" style={{textDecoration: "none", color: "unset"}}>
-            <Box sx={{ display: { xs: "flex", md: "none" }, alignItems:"center"}}>
-              
-                {logo.url !== undefined && <Box sx={{ display: "flex", mr: 1 }}>
-                  <img
-                    src={logo.url}
-                    width={logo.width || "32px"}
-                    height={logo.height || "32px"}
-                    alt={logo.alt || "site logo"}
-                    style={{maxWidth: "60px", maxHeight: "60px"}}
-                  />
-                </Box>}
-              {site_title !== undefined && <Typography
-                variant="h5"
-                noWrap
-                component="h1"
-                sx={{
-                  display: "flex",
-                  flexGrow: 1,
-                }}
-              >
-                {site_title}
-              </Typography>}
-            </Box>
-          </Link>
-          {/* spacer box */}
-          <Box sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}></Box> 
-
-          {/* small screen nav menu */}
-
-          <Box sx={{ flexGrow: 0, display: { xs: "flex", md: "none" } }}>
-            <Button
-              onClick={handleOpenMobileMenu}
-              sx={{
-                width: "40px",
-                height: "40px",
-                borderRadius: "50%",
-                p: 0,
-                minWidth: "unset",
-                color: "primary.contrastText",
-                boxShadow:
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-              }}
-            >
-              <MoreVertIcon sx={{ color: "primary.contrastText" }} />
-            </Button>
-
-            <Dialog
-              fullScreen
-              open={mobileNavOpen}
-              onClose={handleCloseMobileMenu}
-            >
-              <AppBar position="sticky">
-                <Container maxWidth="xl">
-                  <Toolbar disableGutters sx={{py:1, justifyContent:"space-between"}}>
-                  <Link href="/" style={{textDecoration: "none", color: "unset"}}>
-                    <Box sx={{display: "flex", flexDirection: "row", alignItems: "center"}}>
-                    <Box sx={{ display: "flex", mr: 1 }}>
-                      <img
-                        src={logo.url}
-                        alt={logo.alt || "logo"}
-                        width={logo.width || "32px"}
-                        height={logo.height || "32px"}
-                        style={{maxWidth: "60px", maxHeight: "60px"}}
-                      />
-                    </Box>
-                    <Typography
-                      variant="h5"
-                      noWrap
-                      component="h1"
-                      sx={{
-                        display: "flex",
-                        flexGrow: 1,
-                      }}
-                    >
-                      
-                        {site_title !== undefined && site_title}
-                      
-                    </Typography>
-                    </Box>
-                  </Link>
-                    <Button
-                      onClick={handleCloseMobileMenu}
-                      sx={{
-                        width: "40px",
-                        height: "40px",
-                        borderRadius: "50%",
-                        p: 0,
-                        minWidth: "unset",
-                        color: "primary.contrastText",
-                        boxShadow:
-                          "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                      }}
-                      aria-label="close"
-                    >
-                      <CloseIcon sx={{ color: "primary.contrastText" }} />
-                    </Button>
-                  </Toolbar>
-                </Container>
-              </AppBar>
-              <List>
-                {pages.map((page) => 
-                {
-                return (
-                  <>
-                    <ListItem
-                      key={page.name}
-                      onClick={() => {page.action(); handleCloseMobileMenu();}}
-                    >
-                      <ListItemText primary={page.name} />
-                    </ListItem>
-                    <Divider />
-                  </>
-                )})}
-                
-
-                    
-              </List>
-            </Dialog>
-          </Box>
-        </Toolbar>
-      </Container>
-    </AppBar>
-  );
-}
-export default NavBar;
-
-// TODO AUTH
-
-/*
-                    TODO: move to a different component
-                    {auth && (
-                      <>
-                        {session &&
-                          actions.loggedIn.map((action) => (
-                            <>
-                              <ListItem
-                                key={action.name}
-                                onClick={() => {
-                                  action.action();
-                                  handleCloseMobileMenu();
-                                }}
-                                button
-                              >
-                                <ListItemIcon>{action.icon}</ListItemIcon>
-                                <ListItemText primary={action.name} />
-                              </ListItem>
-                              <Divider />
-                            </>
-                          ))}
-                        {!session &&
-                          actions.loggedOut.map((action) => (
-                            <>
-                              <ListItem
-                                key={action.name}
-                                onClick={() => {
-                                  action.action();
-                                  handleCloseMobileMenu();
-                                }}
-                                button
-                              >
-                                <ListItemIcon>{action.icon}</ListItemIcon>
-                                <ListItemText primary={action.name} />
-                              </ListItem>
-                              <Divider />
-                            </>
-                          ))}
-                      </>
-                    )} */
-
-/* Auth for small screens */
-          /* 
-          TODO this should be moved to a different component
-          maybe the navbar should have a optional slot prop for this
-          also the cart should be moved to a entirly different component
-          {auth && (
-            <>
-              <CartWidget />
-              <Box
-                sx={{
-                  display: { xs: "none", md: "flex" },
-                  flexGrow: 0,
-                  position: "relative",
-                  width: "40px",
-                  height: "40px",
-                }}
-              >
-                <SpeedDial
-                  ariaLabel="..."
-                  icon={<AccountCircleIcon />}
-                  direction="down"
-                  sx={{
-                    position: "absolute",
-                    top: 0,
-                    right: 0,
-                    width: 40,
-                    "& .MuiFab-root": { width: 40, height: 40 },
-                  }}
-                >
-                  {session &&
-                    actions.loggedIn.map((action) => (
-                      <SpeedDialAction
-                        key={action.name}
-                        icon={action.icon}
-                        tooltipTitle={action.name}
-                        onClick={action.action}
-                      />
-                    ))}
-
-                  {!session &&
-                    actions.loggedOut.map((action) => (
-                      <SpeedDialAction
-                        key={action.name}
-                        icon={action.icon}
-                        tooltipTitle={action.name}
-                        onClick={action.action}
-                      />
-                    ))}
-                </SpeedDial>
-              </Box>
-            </>
-          )} */
-
-// TODO COMMERCE
-
-/* 
-                TODO
-                move to a different component
-                {commerce && (
-                  <>
-                    <ListItem
-                      key="shop"
-                      onClick={() => {
-                        router.push("/shop");
-                        handleCloseMobileMenu();
-                      }}
-                      button
-                    >
-                      <ListItemText primary={"Shop"} />
-                    </ListItem>
-                    <Divider />
-                    <ListItem
-                      onClick={() => {
-                        router.push("/shop/cart");
-                        handleCloseMobileMenu();
-                      }}
-                      button
-                    >
-                      <ListItemText primary={"Cart"} />
-                    </ListItem>
-                    <Divider />
-                    <ListItem
-                      onClick={() => {
-                        router.push("/shop/checkOut");
-                        handleCloseMobileMenu();
-                      }}
-                      button
-                    >
-                      <ListItemText primary={"Check-Out"} />
-                    </ListItem>
-                    <Divider /> */
-
-/* 
-            TODO: find a better way, use submenus
-            {commerce && (
-              <>
-                <Box
-                  sx={{
-                    display: { xs: "none", md: "block" },
-                    height: "40px",
-                  }}
-                >
-                  <StyledShopMenuSpeedDial
-                    direction="down"
-                    ariaLabel="Submenu for shop pages"
-                    icon={<Box key="shopSubMenu">shop</Box>}
-                    onClick={() => {
-                      router.push("/shop");
-                    }}
-                  >
-                    <SpeedDialAction
-                      key="shop"
-                      icon={<Box>shop</Box>}
-                      disableHoverListener={true}
-                      tooltipTitle="shop"
-                      onClick={() => {
-                        router.push("/shop");
-                      }}
-                    />
-
-                    <SpeedDialAction
-                      key="cart"
-                      icon={<Box>cart</Box>}
-                      disableHoverListener={true}
-                      tooltipTitle="cart"
-                      onClick={() => {
-                        router.push("/shop/cart");
-                      }}
-                    />
-
-                    <SpeedDialAction
-                      key="checkOut"
-                      icon={<Box>checkOut</Box>}
-                      disableHoverListener={true}
-                      tooltipTitle="check-out"
-                      onClick={() => {
-                        router.push("/shop/checkOut");
-                      }}
-                    />
-                  </StyledShopMenuSpeedDial>
-                </Box>
-              </>
-            )} */
+export * from "./NavBar";