top-overlay-navbar/dist/index.esm.js

This is a modern, customizable overlay navbar built with React and Framer Motion.

import*as e from"react";import t,{useState as r}from"react";import{AnimatePresence as n,motion as a}from"framer-motion";"function"==typeof SuppressedError&&SuppressedError;var o={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},i=t.createContext&&t.createContext(o),l=["attr","size","title"];function u(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r={};for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){if(t.indexOf(n)>=0)continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},s.apply(this,arguments)}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){d(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function d(e,t,r){var n;return(t="symbol"==typeof(n=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(t,"string"))?n:n+"")in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function m(e){return e&&e.map(((e,r)=>t.createElement(e.tag,h({key:r},e.attr),m(e.child))))}function p(e){return r=>t.createElement(f,s({attr:h({},e.attr)},r),m(e.child))}function f(e){var r=r=>{var n,{attr:a,size:o,title:i}=e,c=u(e,l),d=o||r.size||"1em";return r.className&&(n=r.className),e.className&&(n=(n?n+" ":"")+e.className),t.createElement("svg",s({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,a,c,{className:n,style:h(h({color:e.color||r.color},r.style),e.style),height:d,width:d,xmlns:"http://www.w3.org/2000/svg"}),i&&t.createElement("title",null,i),e.children)};return void 0!==i?t.createElement(i.Consumer,null,(e=>r(e))):r(o)}function v(e){return p({tag:"svg",attr:{viewBox:"0 0 576 512"},child:[{tag:"path",attr:{d:"M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"},child:[]}]})(e)}function y(e){return p({tag:"svg",attr:{viewBox:"0 0 352 512"},child:[{tag:"path",attr:{d:"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"},child:[]}]})(e)}function g(e){return p({tag:"svg",attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM64 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L96 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"},child:[]}]})(e)}var w,b={};
/**
 * react-router v7.1.3
 *
 * Copyright (c) Remix Software Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
 *
 * @license MIT
 */
function x(e,t){if(!1===e||null==e)throw new Error(t)}function C(e,t){if(!e){"undefined"!=typeof console&&console.warn(t);try{throw new Error(t)}catch(e){}}}function E({pathname:e="/",search:t="",hash:r=""}){return t&&"?"!==t&&(e+="?"===t.charAt(0)?t:"?"+t),r&&"#"!==r&&(e+="#"===r.charAt(0)?r:"#"+r),e}function S(e){let t={};if(e){let r=e.indexOf("#");r>=0&&(t.hash=e.substring(r),e=e.substring(0,r));let n=e.indexOf("?");n>=0&&(t.search=e.substring(n),e=e.substring(0,n)),e&&(t.pathname=e)}return t}function R(e,t,r="/"){return function(e,t,r,n){let a="string"==typeof t?S(t):t,o=F(a.pathname||"/",r);if(null==o)return null;let i=$(e);!function(e){e.sort(((e,t)=>e.score!==t.score?t.score-e.score:function(e,t){let r=e.length===t.length&&e.slice(0,-1).every(((e,r)=>e===t[r]));return r?e[e.length-1]-t[t.length-1]:0}(e.routesMeta.map((e=>e.childrenIndex)),t.routesMeta.map((e=>e.childrenIndex)))))}(i);let l=null;for(let e=0;null==l&&e<i.length;++e){let t=B(o);l=M(i[e],t,n)}return l}(e,t,r,!1)}function $(e,t=[],r=[],n=""){let a=(e,a,o)=>{let i={relativePath:void 0===o?e.path||"":o,caseSensitive:!0===e.caseSensitive,childrenIndex:a,route:e};i.relativePath.startsWith("/")&&(x(i.relativePath.startsWith(n),`Absolute route path "${i.relativePath}" nested under path "${n}" is not valid. An absolute child route path must start with the combined path of all its parent routes.`),i.relativePath=i.relativePath.slice(n.length));let l=_([n,i.relativePath]),u=r.concat(i);e.children&&e.children.length>0&&(x(!0!==e.index,`Index routes must not have child routes. Please remove all child routes from route path "${l}".`),$(e.children,t,u,l)),(null!=e.path||e.index)&&t.push({path:l,score:D(l,e.index),routesMeta:u})};return e.forEach(((e,t)=>{if(""!==e.path&&e.path?.includes("?"))for(let r of N(e.path))a(e,t,r);else a(e,t)})),t}function N(e){let t=e.split("/");if(0===t.length)return[];let[r,...n]=t,a=r.endsWith("?"),o=r.replace(/\?$/,"");if(0===n.length)return a?[o,""]:[o];let i=N(n.join("/")),l=[];return l.push(...i.map((e=>""===e?o:[o,e].join("/")))),a&&l.push(...i),l.map((t=>e.startsWith("/")&&""===t?"/":t))}!function(){if(w)return b;w=1,Object.defineProperty(b,"__esModule",{value:!0}),b.parse=function(e,t){const r=new o,n=e.length;if(n<2)return r;const a=t?.decode||u;let s=0;do{const t=e.indexOf("=",s);if(-1===t)break;const o=e.indexOf(";",s),u=-1===o?n:o;if(t>u){s=e.lastIndexOf(";",t-1)+1;continue}const c=i(e,s,t),h=l(e,t,c),d=e.slice(c,h);if(void 0===r[d]){let n=i(e,t+1,u),o=l(e,u,n);const s=a(e.slice(n,o));r[d]=s}s=u+1}while(s<n);return r},b.serialize=function(o,i,l){const u=l?.encode||encodeURIComponent;if(!e.test(o))throw new TypeError(`argument name is invalid: ${o}`);const s=u(i);if(!t.test(s))throw new TypeError(`argument val is invalid: ${i}`);let c=o+"="+s;if(!l)return c;if(void 0!==l.maxAge){if(!Number.isInteger(l.maxAge))throw new TypeError(`option maxAge is invalid: ${l.maxAge}`);c+="; Max-Age="+l.maxAge}if(l.domain){if(!r.test(l.domain))throw new TypeError(`option domain is invalid: ${l.domain}`);c+="; Domain="+l.domain}if(l.path){if(!n.test(l.path))throw new TypeError(`option path is invalid: ${l.path}`);c+="; Path="+l.path}if(l.expires){if(!function(e){return"[object Date]"===a.call(e)}(l.expires)||!Number.isFinite(l.expires.valueOf()))throw new TypeError(`option expires is invalid: ${l.expires}`);c+="; Expires="+l.expires.toUTCString()}l.httpOnly&&(c+="; HttpOnly");l.secure&&(c+="; Secure");l.partitioned&&(c+="; Partitioned");if(l.priority){switch("string"==typeof l.priority?l.priority.toLowerCase():void 0){case"low":c+="; Priority=Low";break;case"medium":c+="; Priority=Medium";break;case"high":c+="; Priority=High";break;default:throw new TypeError(`option priority is invalid: ${l.priority}`)}}if(l.sameSite){switch("string"==typeof l.sameSite?l.sameSite.toLowerCase():l.sameSite){case!0:case"strict":c+="; SameSite=Strict";break;case"lax":c+="; SameSite=Lax";break;case"none":c+="; SameSite=None";break;default:throw new TypeError(`option sameSite is invalid: ${l.sameSite}`)}}return c};const e=/^[\u0021-\u003A\u003C\u003E-\u007E]+$/,t=/^[\u0021-\u003A\u003C-\u007E]*$/,r=/^([.]?[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)([.][a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)*$/i,n=/^[\u0020-\u003A\u003D-\u007E]*$/,a=Object.prototype.toString,o=(()=>{const e=function(){};return e.prototype=Object.create(null),e})();function i(e,t,r){do{const r=e.charCodeAt(t);if(32!==r&&9!==r)return t}while(++t<r);return r}function l(e,t,r){for(;t>r;){const r=e.charCodeAt(--t);if(32!==r&&9!==r)return t+1}return r}function u(e){if(-1===e.indexOf("%"))return e;try{return decodeURIComponent(e)}catch(t){return e}}}();var O=/^:[\w-]+$/,k=3,L=2,P=1,T=10,j=-2,A=e=>"*"===e;function D(e,t){let r=e.split("/"),n=r.length;return r.some(A)&&(n+=j),t&&(n+=L),r.filter((e=>!A(e))).reduce(((e,t)=>e+(O.test(t)?k:""===t?P:T)),n)}function M(e,t,r=!1){let{routesMeta:n}=e,a={},o="/",i=[];for(let e=0;e<n.length;++e){let l=n[e],u=e===n.length-1,s="/"===o?t:t.slice(o.length)||"/",c=z({path:l.relativePath,caseSensitive:l.caseSensitive,end:u},s),h=l.route;if(!c&&u&&r&&!n[n.length-1].route.index&&(c=z({path:l.relativePath,caseSensitive:l.caseSensitive,end:!1},s)),!c)return null;Object.assign(a,c.params),i.push({params:a,pathname:_([o,c.pathname]),pathnameBase:H(_([o,c.pathnameBase])),route:h}),"/"!==c.pathnameBase&&(o=_([o,c.pathnameBase]))}return i}function z(e,t){"string"==typeof e&&(e={path:e,caseSensitive:!1,end:!0});let[r,n]=function(e,t=!1,r=!0){C("*"===e||!e.endsWith("*")||e.endsWith("/*"),`Route path "${e}" will be treated as if it were "${e.replace(/\*$/,"/*")}" because the \`*\` character must always follow a \`/\` in the pattern. To get rid of this warning, please change the route path to "${e.replace(/\*$/,"/*")}".`);let n=[],a="^"+e.replace(/\/*\*?$/,"").replace(/^\/*/,"/").replace(/[\\.*+^${}|()[\]]/g,"\\$&").replace(/\/:([\w-]+)(\?)?/g,((e,t,r)=>(n.push({paramName:t,isOptional:null!=r}),r?"/?([^\\/]+)?":"/([^\\/]+)")));e.endsWith("*")?(n.push({paramName:"*"}),a+="*"===e||"/*"===e?"(.*)$":"(?:\\/(.+)|\\/*)$"):r?a+="\\/*$":""!==e&&"/"!==e&&(a+="(?:(?=\\/|$))");let o=new RegExp(a,t?void 0:"i");return[o,n]}(e.path,e.caseSensitive,e.end),a=t.match(r);if(!a)return null;let o=a[0],i=o.replace(/(.)\/+$/,"$1"),l=a.slice(1);return{params:n.reduce(((e,{paramName:t,isOptional:r},n)=>{if("*"===t){let e=l[n]||"";i=o.slice(0,o.length-e.length).replace(/(.)\/+$/,"$1")}const a=l[n];return e[t]=r&&!a?void 0:(a||"").replace(/%2F/g,"/"),e}),{}),pathname:o,pathnameBase:i,pattern:e}}function B(e){try{return e.split("/").map((e=>decodeURIComponent(e).replace(/\//g,"%2F"))).join("/")}catch(t){return C(!1,`The URL path "${e}" could not be decoded because it is a malformed URL segment. This is probably due to a bad percent encoding (${t}).`),e}}function F(e,t){if("/"===t)return e;if(!e.toLowerCase().startsWith(t.toLowerCase()))return null;let r=t.endsWith("/")?t.length-1:t.length,n=e.charAt(r);return n&&"/"!==n?null:e.slice(r)||"/"}function W(e,t,r,n){return`Cannot include a '${e}' character in a manually specified \`to.${t}\` field [${JSON.stringify(n)}].  Please separate it out to the \`to.${r}\` field. Alternatively you may provide the full path as a string in <Link to="..."> and the router will parse it for you.`}function I(e){let t=function(e){return e.filter(((e,t)=>0===t||e.route.path&&e.route.path.length>0))}(e);return t.map(((e,r)=>r===t.length-1?e.pathname:e.pathnameBase))}function U(e,t,r,n=!1){let a;"string"==typeof e?a=S(e):(a={...e},x(!a.pathname||!a.pathname.includes("?"),W("?","pathname","search",a)),x(!a.pathname||!a.pathname.includes("#"),W("#","pathname","hash",a)),x(!a.search||!a.search.includes("#"),W("#","search","hash",a)));let o,i=""===e||""===a.pathname,l=i?"/":a.pathname;if(null==l)o=r;else{let e=t.length-1;if(!n&&l.startsWith("..")){let t=l.split("/");for(;".."===t[0];)t.shift(),e-=1;a.pathname=t.join("/")}o=e>=0?t[e]:"/"}let u=function(e,t="/"){let{pathname:r,search:n="",hash:a=""}="string"==typeof e?S(e):e,o=r?r.startsWith("/")?r:function(e,t){let r=t.replace(/\/+$/,"").split("/");return e.split("/").forEach((e=>{".."===e?r.length>1&&r.pop():"."!==e&&r.push(e)})),r.length>1?r.join("/"):"/"}(r,t):t;return{pathname:o,search:J(n),hash:K(a)}}(a,o),s=l&&"/"!==l&&l.endsWith("/"),c=(i||"."===l)&&r.endsWith("/");return u.pathname.endsWith("/")||!s&&!c||(u.pathname+="/"),u}var _=e=>e.join("/").replace(/\/\/+/g,"/"),H=e=>e.replace(/\/+$/,"").replace(/^\/*/,"/"),J=e=>e&&"?"!==e?e.startsWith("?")?e:"?"+e:"",K=e=>e&&"#"!==e?e.startsWith("#")?e:"#"+e:"";var V=["POST","PUT","PATCH","DELETE"];new Set(V);var Y=["GET",...V];new Set(Y);var q=e.createContext(null);q.displayName="DataRouter";var G=e.createContext(null);G.displayName="DataRouterState";var X=e.createContext({isTransitioning:!1});X.displayName="ViewTransition",e.createContext(new Map).displayName="Fetchers",e.createContext(null).displayName="Await";var Q=e.createContext(null);Q.displayName="Navigation";var Z=e.createContext(null);Z.displayName="Location";var ee=e.createContext({outlet:null,matches:[],isDataRoute:!1});ee.displayName="Route";var te=e.createContext(null);function re(){return null!=e.useContext(Z)}function ne(){return x(re(),"useLocation() may be used only in the context of a <Router> component."),e.useContext(Z).location}te.displayName="RouteError";var ae="You should call navigate() in a React.useEffect(), not when your component is first rendered.";function oe(t){e.useContext(Q).static||e.useLayoutEffect(t)}function ie(){let{isDataRoute:t}=e.useContext(ee);return t?function(){let{router:t}=function(t){let r=e.useContext(q);return x(r,me(t)),r}("useNavigate"),r=pe("useNavigate"),n=e.useRef(!1);return oe((()=>{n.current=!0})),e.useCallback((async(e,a={})=>{C(n.current,ae),n.current&&("number"==typeof e?t.navigate(e):await t.navigate(e,{fromRouteId:r,...a}))}),[t,r])}():function(){x(re(),"useNavigate() may be used only in the context of a <Router> component.");let t=e.useContext(q),{basename:r,navigator:n}=e.useContext(Q),{matches:a}=e.useContext(ee),{pathname:o}=ne(),i=JSON.stringify(I(a)),l=e.useRef(!1);return oe((()=>{l.current=!0})),e.useCallback(((e,a={})=>{if(C(l.current,ae),!l.current)return;if("number"==typeof e)return void n.go(e);let u=U(e,JSON.parse(i),o,"path"===a.relative);null==t&&"/"!==r&&(u.pathname="/"===u.pathname?r:_([r,u.pathname])),(a.replace?n.replace:n.push)(u,a.state,a)}),[r,n,i,o,t])}()}function le(t,{relative:r}={}){let{matches:n}=e.useContext(ee),{pathname:a}=ne(),o=JSON.stringify(I(n));return e.useMemo((()=>U(t,JSON.parse(o),a,"path"===r)),[t,o,a,r])}function ue(t,r,n,a){x(re(),"useRoutes() may be used only in the context of a <Router> component.");let o,{navigator:i}=e.useContext(Q),{matches:l}=e.useContext(ee),u=l[l.length-1],s=u?u.params:{},c=u?u.pathname:"/",h=u?u.pathnameBase:"/",d=u&&u.route;{let e=d&&d.path||"";ve(c,!d||e.endsWith("*")||e.endsWith("*?"),`You rendered descendant <Routes> (or called \`useRoutes()\`) at "${c}" (under <Route path="${e}">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.\n\nPlease change the parent <Route path="${e}"> to <Route path="${"/"===e?"*":`${e}/*`}">.`)}o=ne();let m=o.pathname||"/",p=m;if("/"!==h){let e=h.replace(/^\//,"").split("/");p="/"+m.replace(/^\//,"").split("/").slice(e.length).join("/")}let f=R(t,{pathname:p});C(d||null!=f,`No routes matched location "${o.pathname}${o.search}${o.hash}" `),C(null==f||void 0!==f[f.length-1].route.element||void 0!==f[f.length-1].route.Component||void 0!==f[f.length-1].route.lazy,`Matched leaf route at location "${o.pathname}${o.search}${o.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`);let v=function(t,r=[],n=null){if(null==t){if(!n)return null;if(n.errors)t=n.matches;else{if(0!==r.length||n.initialized||!(n.matches.length>0))return null;t=n.matches}}let a=t,o=n?.errors;if(null!=o){let e=a.findIndex((e=>e.route.id&&void 0!==o?.[e.route.id]));x(e>=0,`Could not find a matching route for errors on route IDs: ${Object.keys(o).join(",")}`),a=a.slice(0,Math.min(a.length,e+1))}let i=!1,l=-1;if(n)for(let e=0;e<a.length;e++){let t=a[e];if((t.route.HydrateFallback||t.route.hydrateFallbackElement)&&(l=e),t.route.id){let{loaderData:e,errors:r}=n,o=t.route.loader&&!e.hasOwnProperty(t.route.id)&&(!r||void 0===r[t.route.id]);if(t.route.lazy||o){i=!0,a=l>=0?a.slice(0,l+1):[a[0]];break}}}return a.reduceRight(((t,u,s)=>{let c,h=!1,d=null,m=null;n&&(c=o&&u.route.id?o[u.route.id]:void 0,d=u.route.errorElement||ce,i&&(l<0&&0===s?(ve("route-fallback",!1,"No `HydrateFallback` element provided to render during initial hydration"),h=!0,m=null):l===s&&(h=!0,m=u.route.hydrateFallbackElement||null)));let p=r.concat(a.slice(0,s+1)),f=()=>{let r;return r=c?d:h?m:u.route.Component?e.createElement(u.route.Component,null):u.route.element?u.route.element:t,e.createElement(de,{match:u,routeContext:{outlet:t,matches:p,isDataRoute:null!=n},children:r})};return n&&(u.route.ErrorBoundary||u.route.errorElement||0===s)?e.createElement(he,{location:n.location,revalidation:n.revalidation,component:d,error:c,children:f(),routeContext:{outlet:null,matches:p,isDataRoute:!0}}):f()}),null)}(f&&f.map((e=>Object.assign({},e,{params:Object.assign({},s,e.params),pathname:_([h,i.encodeLocation?i.encodeLocation(e.pathname).pathname:e.pathname]),pathnameBase:"/"===e.pathnameBase?h:_([h,i.encodeLocation?i.encodeLocation(e.pathnameBase).pathname:e.pathnameBase])}))),l,n,a);return v}function se(){let t=function(){let t=e.useContext(te),r=function(t){let r=e.useContext(G);return x(r,me(t)),r}("useRouteError"),n=pe("useRouteError");if(void 0!==t)return t;return r.errors?.[n]}(),r=function(e){return null!=e&&"number"==typeof e.status&&"string"==typeof e.statusText&&"boolean"==typeof e.internal&&"data"in e}(t)?`${t.status} ${t.statusText}`:t instanceof Error?t.message:JSON.stringify(t),n=t instanceof Error?t.stack:null,a="rgba(200,200,200, 0.5)",o={padding:"0.5rem",backgroundColor:a},i={padding:"2px 4px",backgroundColor:a},l=null;return console.error("Error handled by React Router default ErrorBoundary:",t),l=e.createElement(e.Fragment,null,e.createElement("p",null,"💿 Hey developer 👋"),e.createElement("p",null,"You can provide a way better UX than this when your app throws errors by providing your own ",e.createElement("code",{style:i},"ErrorBoundary")," or"," ",e.createElement("code",{style:i},"errorElement")," prop on your route.")),e.createElement(e.Fragment,null,e.createElement("h2",null,"Unexpected Application Error!"),e.createElement("h3",{style:{fontStyle:"italic"}},r),n?e.createElement("pre",{style:o},n):null,l)}e.createContext(null);var ce=e.createElement(se,null),he=class extends e.Component{constructor(e){super(e),this.state={location:e.location,revalidation:e.revalidation,error:e.error}}static getDerivedStateFromError(e){return{error:e}}static getDerivedStateFromProps(e,t){return t.location!==e.location||"idle"!==t.revalidation&&"idle"===e.revalidation?{error:e.error,location:e.location,revalidation:e.revalidation}:{error:void 0!==e.error?e.error:t.error,location:t.location,revalidation:e.revalidation||t.revalidation}}componentDidCatch(e,t){console.error("React Router caught the following error during render",e,t)}render(){return void 0!==this.state.error?e.createElement(ee.Provider,{value:this.props.routeContext},e.createElement(te.Provider,{value:this.state.error,children:this.props.component})):this.props.children}};function de({routeContext:t,match:r,children:n}){let a=e.useContext(q);return a&&a.static&&a.staticContext&&(r.route.errorElement||r.route.ErrorBoundary)&&(a.staticContext._deepestRenderedBoundaryId=r.route.id),e.createElement(ee.Provider,{value:t},n)}function me(e){return`${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`}function pe(t){let r=function(t){let r=e.useContext(ee);return x(r,me(t)),r}(t),n=r.matches[r.matches.length-1];return x(n.route.id,`${t} can only be used on routes that contain a unique "id"`),n.route.id}var fe={};function ve(e,t,r){t||fe[e]||(fe[e]=!0,C(!1,r))}e.memo((function({routes:e,future:t,state:r}){return ue(e,0,r,t)}));var ye="get",ge="application/x-www-form-urlencoded";function we(e){return null!=e&&"string"==typeof e.tagName}var be=null;var xe=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function Ce(e){return null==e||xe.has(e)?e:(C(!1,`"${e}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` and will default to "${ge}"`),null)}function Ee(e,t){let r,n,a,o,i;if(we(l=e)&&"form"===l.tagName.toLowerCase()){let i=e.getAttribute("action");n=i?F(i,t):null,r=e.getAttribute("method")||ye,a=Ce(e.getAttribute("enctype"))||ge,o=new FormData(e)}else if(function(e){return we(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return we(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let i=e.form;if(null==i)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let l=e.getAttribute("formaction")||i.getAttribute("action");if(n=l?F(l,t):null,r=e.getAttribute("formmethod")||i.getAttribute("method")||ye,a=Ce(e.getAttribute("formenctype"))||Ce(i.getAttribute("enctype"))||ge,o=new FormData(i,e),!function(){if(null===be)try{new FormData(document.createElement("form"),0),be=!1}catch(e){be=!0}return be}()){let{name:t,type:r,value:n}=e;if("image"===r){let e=t?`${t}.`:"";o.append(`${e}x`,"0"),o.append(`${e}y`,"0")}else t&&o.append(t,n)}}else{if(we(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');r=ye,n=null,a=ge,i=e}var l;return o&&"text/plain"===a&&(i=o,o=void 0),{action:n,method:r.toLowerCase(),encType:a,formData:o,body:i}}function Se(e,t){if(!1===e||null==e)throw new Error(t)}function Re(e){return null!=e&&(null==e.href?"preload"===e.rel&&"string"==typeof e.imageSrcSet&&"string"==typeof e.imageSizes:"string"==typeof e.rel&&"string"==typeof e.href)}async function $e(e,t,r){return function(e,t){let r=new Set;return new Set(t),e.reduce(((e,t)=>{let n=JSON.stringify(function(e){let t={},r=Object.keys(e).sort();for(let n of r)t[n]=e[n];return t}(t));return r.has(n)||(r.add(n),e.push({key:n,link:t})),e}),[])}((await Promise.all(e.map((async e=>{let n=t.routes[e.route.id];if(n){let e=await async function(e,t){if(e.id in t)return t[e.id];try{let r=await import(e.module);return t[e.id]=r,r}catch(t){if(console.error(`Error loading route module \`${e.module}\`, reloading page...`),console.error(t),window.__reactRouterContext&&window.__reactRouterContext.isSpaMode&&import.meta.hot)throw t;return window.location.reload(),new Promise((()=>{}))}}(n,r);return e.links?e.links():[]}return[]})))).flat(1).filter(Re).filter((e=>"stylesheet"===e.rel||"preload"===e.rel)).map((e=>"stylesheet"===e.rel?{...e,rel:"prefetch",as:"style"}:{...e,rel:"prefetch"})))}function Ne(e,t,r,n,a,o){let i=(e,t)=>!r[t]||e.route.id!==r[t].route.id,l=(e,t)=>r[t].pathname!==e.pathname||r[t].route.path?.endsWith("*")&&r[t].params["*"]!==e.params["*"];return"assets"===o?t.filter(((e,t)=>i(e,t)||l(e,t))):"data"===o?t.filter(((t,o)=>{let u=n.routes[t.route.id];if(!u||!u.hasLoader)return!1;if(i(t,o)||l(t,o))return!0;if(t.route.shouldRevalidate){let n=t.route.shouldRevalidate({currentUrl:new URL(a.pathname+a.search+a.hash,window.origin),currentParams:r[0]?.params||{},nextUrl:new URL(e,window.origin),nextParams:t.params,defaultShouldRevalidate:!0});if("boolean"==typeof n)return n}return!0})):[]}function Oe(e,t){return r=e.map((e=>{let r=t.routes[e.route.id];if(!r)return[];let n=[r.module];return r.imports&&(n=n.concat(r.imports)),n})).flat(1),[...new Set(r)];var r}var ke=e.createContext(void 0);function Le(){let t=e.useContext(ke);return Se(t,"You must render this element inside a <HydratedRouter> element"),t}function Pe(e,t){return r=>{e&&e(r),r.defaultPrevented||t(r)}}function Te({page:t,...r}){let{router:n}=function(){let t=e.useContext(q);return Se(t,"You must render this element inside a <DataRouterContext.Provider> element"),t}(),a=e.useMemo((()=>R(n.routes,t,n.basename)),[n.routes,t,n.basename]);return a?e.createElement(je,{page:t,matches:a,...r}):null}function je({page:t,matches:r,...n}){let a=ne(),{manifest:o,routeModules:i}=Le(),{loaderData:l,matches:u}=function(){let t=e.useContext(G);return Se(t,"You must render this element inside a <DataRouterStateContext.Provider> element"),t}(),s=e.useMemo((()=>Ne(t,r,u,o,a,"data")),[t,r,u,o,a]),c=e.useMemo((()=>Ne(t,r,u,o,a,"assets")),[t,r,u,o,a]),h=e.useMemo((()=>{if(t===a.pathname+a.search+a.hash)return[];let e=new Set,n=!1;if(r.forEach((t=>{let r=o.routes[t.route.id];r&&r.hasLoader&&(!s.some((e=>e.route.id===t.route.id))&&t.route.id in l&&i[t.route.id]?.shouldRevalidate||r.hasClientLoader?n=!0:e.add(t.route.id))})),0===e.size)return[];let u=function(e){let t="string"==typeof e?new URL(e,"undefined"==typeof window?"server://singlefetch/":window.location.origin):e;return"/"===t.pathname?t.pathname="_root.data":t.pathname=`${t.pathname.replace(/\/$/,"")}.data`,t}(t);return n&&e.size>0&&u.searchParams.set("_routes",r.filter((t=>e.has(t.route.id))).map((e=>e.route.id)).join(",")),[u.pathname+u.search]}),[l,a,o,s,r,t,i]),d=e.useMemo((()=>Oe(c,o)),[c,o]),m=function(t){let{manifest:r,routeModules:n}=Le(),[a,o]=e.useState([]);return e.useEffect((()=>{let e=!1;return $e(t,r,n).then((t=>{e||o(t)})),()=>{e=!0}}),[t,r,n]),a}(c);return e.createElement(e.Fragment,null,h.map((t=>e.createElement("link",{key:t,rel:"prefetch",as:"fetch",href:t,...n}))),d.map((t=>e.createElement("link",{key:t,rel:"modulepreload",href:t,...n}))),m.map((({key:t,link:r})=>e.createElement("link",{key:t,...r}))))}function Ae(...e){return t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}}ke.displayName="FrameworkContext";var De="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement;try{De&&(window.__reactRouterVersion="7.1.3")}catch(e){}var Me=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,ze=e.forwardRef((function({onClick:t,discover:r="render",prefetch:n="none",relative:a,reloadDocument:o,replace:i,state:l,target:u,to:s,preventScrollReset:c,viewTransition:h,...d},m){let p,{basename:f}=e.useContext(Q),v="string"==typeof s&&Me.test(s),y=!1;if("string"==typeof s&&v&&(p=s,De))try{let e=new URL(window.location.href),t=s.startsWith("//")?new URL(e.protocol+s):new URL(s),r=F(t.pathname,f);t.origin===e.origin&&null!=r?s=r+t.search+t.hash:y=!0}catch(e){C(!1,`<Link to="${s}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`)}let g=function(t,{relative:r}={}){x(re(),"useHref() may be used only in the context of a <Router> component.");let{basename:n,navigator:a}=e.useContext(Q),{hash:o,pathname:i,search:l}=le(t,{relative:r}),u=i;return"/"!==n&&(u="/"===i?n:_([n,i])),a.createHref({pathname:u,search:l,hash:o})}(s,{relative:a}),[w,b,S]=function(t,r){let n=e.useContext(ke),[a,o]=e.useState(!1),[i,l]=e.useState(!1),{onFocus:u,onBlur:s,onMouseEnter:c,onMouseLeave:h,onTouchStart:d}=r,m=e.useRef(null);e.useEffect((()=>{if("render"===t&&l(!0),"viewport"===t){let e=new IntersectionObserver((e=>{e.forEach((e=>{l(e.isIntersecting)}))}),{threshold:.5});return m.current&&e.observe(m.current),()=>{e.disconnect()}}}),[t]),e.useEffect((()=>{if(a){let e=setTimeout((()=>{l(!0)}),100);return()=>{clearTimeout(e)}}}),[a]);let p=()=>{o(!0)},f=()=>{o(!1),l(!1)};return n?"intent"!==t?[i,m,{}]:[i,m,{onFocus:Pe(u,p),onBlur:Pe(s,f),onMouseEnter:Pe(c,p),onMouseLeave:Pe(h,f),onTouchStart:Pe(d,p)}]:[!1,m,{}]}(n,d),R=function(t,{target:r,replace:n,state:a,preventScrollReset:o,relative:i,viewTransition:l}={}){let u=ie(),s=ne(),c=le(t,{relative:i});return e.useCallback((e=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(e,r)){e.preventDefault();let r=void 0!==n?n:E(s)===E(c);u(t,{replace:r,state:a,preventScrollReset:o,relative:i,viewTransition:l})}}),[s,u,c,n,a,r,t,o,i,l])}(s,{replace:i,state:l,target:u,preventScrollReset:c,relative:a,viewTransition:h});let $=e.createElement("a",{...d,...S,href:p||g,onClick:y||o?t:function(e){t&&t(e),e.defaultPrevented||R(e)},ref:Ae(m,b),target:u,"data-discover":v||"render"!==r?void 0:"true"});return w&&!v?e.createElement(e.Fragment,null,$,e.createElement(Te,{page:g})):$}));function Be(t){let r=e.useContext(q);return x(r,function(e){return`${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`}(t)),r}ze.displayName="Link",e.forwardRef((function({"aria-current":t="page",caseSensitive:r=!1,className:n="",end:a=!1,style:o,to:i,viewTransition:l,children:u,...s},c){let h=le(i,{relative:s.relative}),d=ne(),m=e.useContext(G),{navigator:p,basename:f}=e.useContext(Q),v=null!=m&&function(t,r={}){let n=e.useContext(X);x(null!=n,"`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?");let{basename:a}=Be("useViewTransitionState"),o=le(t,{relative:r.relative});if(!n.isTransitioning)return!1;let i=F(n.currentLocation.pathname,a)||n.currentLocation.pathname,l=F(n.nextLocation.pathname,a)||n.nextLocation.pathname;return null!=z(o.pathname,l)||null!=z(o.pathname,i)}(h)&&!0===l,y=p.encodeLocation?p.encodeLocation(h).pathname:h.pathname,g=d.pathname,w=m&&m.navigation&&m.navigation.location?m.navigation.location.pathname:null;r||(g=g.toLowerCase(),w=w?w.toLowerCase():null,y=y.toLowerCase()),w&&f&&(w=F(w,f)||w);const b="/"!==y&&y.endsWith("/")?y.length-1:y.length;let C,E=g===y||!a&&g.startsWith(y)&&"/"===g.charAt(b),S=null!=w&&(w===y||!a&&w.startsWith(y)&&"/"===w.charAt(y.length)),R={isActive:E,isPending:S,isTransitioning:v},$=E?t:void 0;C="function"==typeof n?n(R):[n,E?"active":null,S?"pending":null,v?"transitioning":null].filter(Boolean).join(" ");let N="function"==typeof o?o(R):o;return e.createElement(ze,{...s,"aria-current":$,className:C,ref:c,style:N,to:i,viewTransition:l},"function"==typeof u?u(R):u)})).displayName="NavLink",e.forwardRef((({discover:t="render",fetcherKey:r,navigate:n,reloadDocument:a,replace:o,state:i,method:l=ye,action:u,onSubmit:s,relative:c,preventScrollReset:h,viewTransition:d,...m},p)=>{let f=function(){let{router:t}=Be("useSubmit"),{basename:r}=e.useContext(Q),n=pe("useRouteId");return e.useCallback((async(e,a={})=>{let{action:o,method:i,encType:l,formData:u,body:s}=Ee(e,r);if(!1===a.navigate){let e=a.fetcherKey||We();await t.fetch(e,n,a.action||o,{preventScrollReset:a.preventScrollReset,formData:u,body:s,formMethod:a.method||i,formEncType:a.encType||l,flushSync:a.flushSync})}else await t.navigate(a.action||o,{preventScrollReset:a.preventScrollReset,formData:u,body:s,formMethod:a.method||i,formEncType:a.encType||l,replace:a.replace,state:a.state,fromRouteId:n,flushSync:a.flushSync,viewTransition:a.viewTransition})}),[t,r,n])}(),v=function(t,{relative:r}={}){let{basename:n}=e.useContext(Q),a=e.useContext(ee);x(a,"useFormAction must be used inside a RouteContext");let[o]=a.matches.slice(-1),i={...le(t||".",{relative:r})},l=ne();if(null==t){i.search=l.search;let e=new URLSearchParams(i.search),t=e.getAll("index");if(t.some((e=>""===e))){e.delete("index"),t.filter((e=>e)).forEach((t=>e.append("index",t)));let r=e.toString();i.search=r?`?${r}`:""}}t&&"."!==t||!o.route.index||(i.search=i.search?i.search.replace(/^\?/,"?index&"):"?index");"/"!==n&&(i.pathname="/"===i.pathname?n:_([n,i.pathname]));return E(i)}(u,{relative:c}),y="get"===l.toLowerCase()?"get":"post",g="string"==typeof u&&Me.test(u);return e.createElement("form",{ref:p,method:y,action:v,onSubmit:a?s:e=>{if(s&&s(e),e.defaultPrevented)return;e.preventDefault();let t=e.nativeEvent.submitter,a=t?.getAttribute("formmethod")||l;f(t||e.currentTarget,{fetcherKey:r,method:a,navigate:n,replace:o,state:i,relative:c,preventScrollReset:h,viewTransition:d})},...m,"data-discover":g||"render"!==t?void 0:"true"})})).displayName="Form";var Fe=0,We=()=>`__${String(++Fe)}__`;new TextEncoder;var Ie=function(e){var o=e.brandName,i=void 0===o?"BrandName":o,l=e.menuLinks,u=void 0===l?[]:l,s=e.cartCount,c=void 0===s?3:s,h=e.CartButton,d=void 0===h?function(e){var r=e.cartCount;return t.createElement("div",{className:"relative text-2xl cursor-pointer hover:text-gray-500 transition-all","aria-label":"Cart with ".concat(r," items")},t.createElement(v,null),r>0&&t.createElement("span",{className:"absolute -top-2 -right-2 bg-red-600 text-white text-sm w-5 h-5 flex items-center justify-center rounded-full"},r))}:h,m=e.backgroundColor,p=void 0===m?"#1F2937":m,f=e.onMenuItemClick,w=void 0===f?function(){}:f,b=e.sliceVariants,x=void 0===b?{hidden:{x:"-100%"},visible:function(e){return{x:0,transition:{duration:.6,delay:.1*e,ease:"easeOut"}}},exit:{x:"-100%",transition:{duration:.5,ease:"easeIn"}}}:b,C=e.contentVariants,E=void 0===C?{hidden:{opacity:0,y:20},visible:{opacity:1,y:0,transition:{delay:.5,ease:"easeOut"}},exit:{opacity:0,y:20,transition:{duration:.3}}}:C,S=e.toggleButtonClassName,R=void 0===S?"text-xl p-3 text-white bg-[#1F2937] hover:text-gray-300 focus:outline-none rounded-full fixed top-6 left-6 z-50 transition-all":S,$=e.menuContainerClassName,N=void 0===$?"absolute inset-0 flex flex-col sm:flex-row items-center justify-center sm:justify-between px-8 py-6 text-white text-lg":$,O=e.menuItemClassName,k=void 0===O?"cursor-pointer hover:text-gray-400 transition-all":O,L=e.cartButtonClassName,P=void 0===L?"relative p-10 cursor-pointer":L,T=r(!1),j=T[0],A=T[1],D=function(){return A(!j)};return t.createElement("div",{className:"relative"},t.createElement("button",{onClick:D,"aria-expanded":j,"aria-controls":"overlay-menu",className:R},j?t.createElement(y,null):t.createElement(g,null)),t.createElement(n,null,j&&t.createElement(a.div,{className:"fixed inset-0 z-40",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0,transition:{duration:.3}}},function(e,t,r){if(r||2===arguments.length)for(var n,a=0,o=t.length;a<o;a++)!n&&a in t||(n||(n=Array.prototype.slice.call(t,0,a)),n[a]=t[a]);return e.concat(n||Array.prototype.slice.call(t))}([],Array(u.length),!0).map((function(e,r){return t.createElement(a.div,{key:r,custom:r,initial:"hidden",animate:"visible",exit:"exit",variants:x,className:"absolute w-full",style:{height:"".concat(100/u.length,"%"),top:"".concat(100/u.length*r,"%"),backgroundColor:p}})})),t.createElement(a.div,{initial:"hidden",animate:"visible",exit:"exit",variants:E,className:N},t.createElement(a.div,{variants:E,className:"text-3xl font-semibold cursor-pointer hover:text-gray-400 transition-all"},t.createElement(ze,{to:"/",onClick:D},i)),t.createElement(a.ul,{className:"flex flex-col sm:flex-row items-center space-x-0 sm:space-x-8 sm:space-y-0 space-y-4 sm:ml-0 ml-4",variants:E},u.map((function(e,r){return t.createElement(a.li,{key:r,whileHover:{scale:1.1},className:k,onClick:function(){w(e.label),D()}},t.createElement(ze,{to:e.route},e.label))}))),t.createElement(a.div,{variants:E,className:P},t.createElement(d,{cartCount:c}))))))};export{Ie as OverlayNavbar};
//# sourceMappingURL=index.esm.js.map