datastake-daf 0.6.505 → 0.6.506

package/dist/layouts/index.js

@@ -5124,7 +5124,8 @@ const renderModule = ({
   isCollapsed,
   onClick,
   user,
-  userHelpers = {}
+  userHelpers = {},
+  goTo = () => {}
 }) => {
   const {
     userIsAdmin,
@@ -5193,7 +5194,7 @@ const Sidenav = ({
   isCollapsed = false,
   showMenu = true,
   sidenavConfig = {},
-  navigate,
+  goTo = () => {},
   location,
   matchPath,
   t,
@@ -5201,7 +5202,7 @@ const Sidenav = ({
   userHelpers = {},
   isDev = false,
   appName = 'app',
-  getRedirectLink,
+  getRedirectLink = () => {},
   isDatastake,
   selectedProject
 }) => {
@@ -5219,19 +5220,13 @@ const Sidenav = ({
     pathname
   } = location || {};
   const mod = o.useMemo(() => module, [module, user]);
-  const _getRedirectLink = getRedirectLink || (link => {
-    if (window.location.pathname.includes(`/${appName}`)) {
-      return `/${appName}${link}`;
-    }
-    return link;
-  });
   const checkPath = i => {
     if (!matchPath || !pathname) return false;
     return matchPath({
-      path: _getRedirectLink(i.path),
+      path: getRedirectLink(i.path),
       exact: true
     }, pathname) || i.subPath && i.subPath.filter(s => matchPath({
-      path: _getRedirectLink(s),
+      path: getRedirectLink(s),
       exact: true
     }, pathname)).length ? true : false;
   };
@@ -5268,16 +5263,19 @@ const Sidenav = ({
   const checkOnClick = ({
     event
   }) => {
-    if (typeof event === 'function') {
-      changeNotificationState({
-        onYes: event
-      });
-    } else {
-      // If event is not a function, just call changeNotificationState
-      changeNotificationState({
-        onYes: () => {}
-      });
+    console.log("checkOnClick", changeNotificationState);
+    // If no changeNotificationState or no unsaved changes, execute immediately
+    if (!changeNotificationState) {
+      if (typeof event === 'function') {
+        event();
+      }
+      return;
     }
+
+    // Otherwise, use the notification state mechanism
+    changeNotificationState({
+      onYes: event
+    });
   };
   const {
     hoverContent,
@@ -5297,7 +5295,7 @@ const Sidenav = ({
     setHoverOpen,
     module,
     notApprovedModal,
-    goTo: navigate,
+    goTo,
     hoverItemSecond,
     isDev
   });
@@ -5346,7 +5344,7 @@ const Sidenav = ({
       isCollapsed,
       onClick: () => checkOnClick({
         event: () => {
-          navigate?.(getRedirectLink(`/app`));
+          goTo(getRedirectLink(`/app`));
         }
       }),
       mod,
@@ -5378,7 +5376,7 @@ const Sidenav = ({
         setHoverOpen: setHoverOpen,
         onMouseMove: onMouseMove,
         user: user,
-        goTo: navigate,
+        goTo: goTo,
         notApprovedModal: notApprovedModal,
         isDev: isDev,
         t: t,
@@ -5614,7 +5612,7 @@ var browser$1 = {
   uptime: uptime
 };
 
-var process$1 = browser$1;
+var process = browser$1;
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -5729,7 +5727,7 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 
-var f="undefined"!=typeof process$1&&void 0!==process$1.env&&(process$1.env.REACT_APP_SC_ATTR||process$1.env.SC_ATTR)||"data-styled",m="active",y="data-styled-version",v="6.1.12",g="/*!sc*/\n",S="undefined"!=typeof window&&"HTMLElement"in window,w=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process$1&&void 0!==process$1.env&&void 0!==process$1.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process$1.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process$1.env.REACT_APP_SC_DISABLE_SPEEDY&&process$1.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process$1&&void 0!==process$1.env&&void 0!==process$1.env.SC_DISABLE_SPEEDY&&""!==process$1.env.SC_DISABLE_SPEEDY?"false"!==process$1.env.SC_DISABLE_SPEEDY&&process$1.env.SC_DISABLE_SPEEDY:"production"!==process$1.env.NODE_ENV),E=/invalid hook call/i,N=new Set,P=function(t,n){if("production"!==process$1.env.NODE_ENV){var o$1=n?' with the id of "'.concat(n,'"'):"",s="The component ".concat(t).concat(o$1," has been created dynamically.\n")+"You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",i=console.error;try{var a=!0;console.error=function(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];E.test(t)?(a=!1,N.delete(s)):i.apply(void 0,__spreadArray([t],n,!1));},o.useRef(),a&&!N.has(s)&&(console.warn(s),N.add(s));}catch(e){E.test(e.message)&&N.delete(s);}finally{console.error=i;}}},_=Object.freeze([]),C=Object.freeze({});function I(e,t,n){return void 0===n&&(n=C),e.theme!==n.theme&&e.theme||t||n.theme}var A=new Set(["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","track","u","ul","use","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"]),O=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,D=/(^-|-$)/g;function R(e){return e.replace(O,"-").replace(D,"")}var T=/(a)(d)/gi,k=52,j=function(e){return String.fromCharCode(e+(e>25?39:97))};function x(e){var t,n="";for(t=Math.abs(e);t>k;t=t/k|0)n=j(t%k)+n;return (j(t%k)+n).replace(T,"$1-$2")}var V,F=5381,M=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},z=function(e){return M(F,e)};function $(e){return x(z(e)>>>0)}function B(e){return "production"!==process$1.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function L(e){return "string"==typeof e&&("production"===process$1.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var G="function"==typeof Symbol&&Symbol.for,Y=G?Symbol.for("react.memo"):60115,W=G?Symbol.for("react.forward_ref"):60112,q={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},H={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},U={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},J=((V={})[W]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},V[Y]=U,V);function X(e){return ("type"in(t=e)&&t.type.$$typeof)===Y?U:"$$typeof"in e?J[e.$$typeof]:q;var t;}var Z=Object.defineProperty,K=Object.getOwnPropertyNames,Q=Object.getOwnPropertySymbols,ee=Object.getOwnPropertyDescriptor,te=Object.getPrototypeOf,ne=Object.prototype;function oe(e,t,n){if("string"!=typeof t){if(ne){var o=te(t);o&&o!==ne&&oe(e,o,n);}var r=K(t);Q&&(r=r.concat(Q(t)));for(var s=X(e),i=X(t),a=0;a<r.length;++a){var c=r[a];if(!(c in H||n&&n[c]||i&&c in i||s&&c in s)){var l=ee(t,c);try{Z(e,c,l);}catch(e){}}}}return e}function re(e){return "function"==typeof e}function se(e){return "object"==typeof e&&"styledComponentId"in e}function ie(e,t){return e&&t?"".concat(e," ").concat(t):e||t||""}function ae(e,t){if(0===e.length)return "";for(var n=e[0],o=1;o<e.length;o++)n+=t?t+e[o]:e[o];return n}function ce(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function le(e,t,n){if(void 0===n&&(n=!1),!n&&!ce(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var o=0;o<t.length;o++)e[o]=le(e[o],t[o]);else if(ce(t))for(var o in t)e[o]=le(e[o],t[o]);return e}function ue(e,t){Object.defineProperty(e,"toString",{value:t});}var pe="production"!==process$1.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function de(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],o=[],r=1,s=e.length;r<s;r+=1)o.push(e[r]);return o.forEach(function(e){n=n.replace(/%[a-z]/,e);}),n}function he(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];return "production"===process$1.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(de.apply(void 0,__spreadArray([pe[t]],n,!1)).trim())}var fe=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}return e.prototype.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,o=n.length,r=o;e>=r;)if((r<<=1)<0)throw he(16,"".concat(e));this.groupSizes=new Uint32Array(r),this.groupSizes.set(n),this.length=r;for(var s=o;s<r;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=(s=0,t.length);s<a;s++)this.tag.insertRule(i,t[s])&&(this.groupSizes[e]++,i++);},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),o=n+t;this.groupSizes[e]=0;for(var r=n;r<o;r++)this.tag.deleteRule(n);}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],o=this.indexOfGroup(e),r=o+n,s=o;s<r;s++)t+="".concat(this.tag.getRule(s)).concat(g);return t},e}(),me=1<<30,ye=new Map,ve=new Map,ge=1,Se=function(e){if(ye.has(e))return ye.get(e);for(;ve.has(ge);)ge++;var t=ge++;if("production"!==process$1.env.NODE_ENV&&((0|t)<0||t>me))throw he(16,"".concat(t));return ye.set(e,t),ve.set(t,e),t},we=function(e,t){ge=t+1,ye.set(e,t),ve.set(t,e);},be="style[".concat(f,"][").concat(y,'="').concat(v,'"]'),Ee=new RegExp("^".concat(f,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),Ne=function(e,t,n){for(var o,r=n.split(","),s=0,i=r.length;s<i;s++)(o=r[s])&&e.registerName(t,o);},Pe=function(e,t){for(var n,o=(null!==(n=t.textContent)&&void 0!==n?n:"").split(g),r=[],s=0,i=o.length;s<i;s++){var a=o[s].trim();if(a){var c=a.match(Ee);if(c){var l=0|parseInt(c[1],10),u=c[2];0!==l&&(we(u,l),Ne(e,u,c[3]),e.getTag().insertRules(l,r)),r.length=0;}else r.push(a);}}},_e=function(e){for(var t=document.querySelectorAll(be),n=0,o=t.length;n<o;n++){var r=t[n];r&&r.getAttribute(f)!==m&&(Pe(e,r),r.parentNode&&r.parentNode.removeChild(r));}};function Ce(){return "undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var Ie=function(e){var t=document.head,n=e||t,o=document.createElement("style"),r=function(e){var t=Array.from(e.querySelectorAll("style[".concat(f,"]")));return t[t.length-1]}(n),s=void 0!==r?r.nextSibling:null;o.setAttribute(f,m),o.setAttribute(y,v);var i=Ce();return i&&o.setAttribute("nonce",i),n.insertBefore(o,s),o},Ae=function(){function e(e){this.element=Ie(e),this.element.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,o=t.length;n<o;n++){var r=t[n];if(r.ownerNode===e)return r}throw he(17)}(this.element),this.length=0;}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return !1}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""},e}(),Oe=function(){function e(e){this.element=Ie(e),this.nodes=this.element.childNodes,this.length=0;}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,!0}return !1},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),De=function(){function e(e){this.rules=[],this.length=0;}return e.prototype.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),Re=S,Te={isServer:!S,useCSSOMInjection:!w},ke=function(){function e(e,n,o){void 0===e&&(e=C),void 0===n&&(n={});var r=this;this.options=__assign(__assign({},Te),e),this.gs=n,this.names=new Map(o),this.server=!!e.isServer,!this.server&&S&&Re&&(Re=!1,_e(this)),ue(this,function(){return function(e){for(var t=e.getTag(),n=t.length,o="",r=function(n){var r=function(e){return ve.get(e)}(n);if(void 0===r)return "continue";var s=e.names.get(r),i=t.getGroup(n);if(void 0===s||!s.size||0===i.length)return "continue";var a="".concat(f,".g").concat(n,'[id="').concat(r,'"]'),c="";void 0!==s&&s.forEach(function(e){e.length>0&&(c+="".concat(e,","));}),o+="".concat(i).concat(a,'{content:"').concat(c,'"}').concat(g);},s=0;s<n;s++)r(s);return o}(r)});}return e.registerId=function(e){return Se(e)},e.prototype.rehydrate=function(){!this.server&&S&&_e(this);},e.prototype.reconstructWithOptions=function(n,o){return void 0===o&&(o=!0),new e(__assign(__assign({},this.options),n),this.gs,o&&this.names||void 0)},e.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},e.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target;return e.isServer?new De(n):t?new Ae(n):new Oe(n)}(this.options),new fe(e)));var e;},e.prototype.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},e.prototype.registerName=function(e,t){if(Se(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},e.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(Se(e),n);},e.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},e.prototype.clearRules=function(e){this.getTag().clearGroup(Se(e)),this.clearNames(e);},e.prototype.clearTag=function(){this.tag=void 0;},e}(),je=/&/g,xe=/^\s*\/\/.*$/gm;function Ve(e,t){return e.map(function(e){return "rule"===e.type&&(e.value="".concat(t," ").concat(e.value),e.value=e.value.replaceAll(",",",".concat(t," ")),e.props=e.props.map(function(e){return "".concat(t," ").concat(e)})),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ve(e.children,t)),e})}function Fe(e){var t,n,o,r=void 0===e?C:e,s=r.options,i=void 0===s?C:s,a=r.plugins,c$1=void 0===a?_:a,l=function(e,o,r){return r.startsWith(n)&&r.endsWith(n)&&r.replaceAll(n,"").length>0?".".concat(t):e},u=c$1.slice();u.push(function(e){e.type===c&&e.value.includes("&")&&(e.props[0]=e.props[0].replace(je,n).replace(o,l));}),i.prefix&&u.push(de$1),u.push(he$1);var p=function(e,r,s,a){void 0===r&&(r=""),void 0===s&&(s=""),void 0===a&&(a="&"),t=a,n=r,o=new RegExp("\\".concat(n,"\\b"),"g");var c=e.replace(xe,""),l=ue$1(s||r?"".concat(s," ").concat(r," { ").concat(c," }"):c);i.namespace&&(l=Ve(l,i.namespace));var p=[];return pe$1(l,be$1(u.concat(we$1(function(e){return p.push(e)})))),p};return p.hash=c$1.length?c$1.reduce(function(e,t){return t.name||he(15),M(e,t.name)},F).toString():"",p}var Me=new ke,ze=Fe(),$e=o__default["default"].createContext({shouldForwardProp:void 0,styleSheet:Me,stylis:ze});$e.Consumer;o__default["default"].createContext(void 0);function Ge(){return o.useContext($e)}var We=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=ze);var o=n.name+t.hash;e.hasNameForId(n.id,o)||e.insertRules(n.id,o,t(n.rules,o,"@keyframes"));},this.name=e,this.id="sc-keyframes-".concat(e),this.rules=t,ue(this,function(){throw he(12,String(n.name))});}return e.prototype.getName=function(e){return void 0===e&&(e=ze),this.name+e.hash},e}(),qe=function(e){return e>="A"&&e<="Z"};function He(e){for(var t="",n=0;n<e.length;n++){var o=e[n];if(1===n&&"-"===o&&"-"===e[0])return e;qe(o)?t+="-"+o.toLowerCase():t+=o;}return t.startsWith("ms-")?"-"+t:t}var Ue=function(e){return null==e||!1===e||""===e},Je=function(t){var n,o,r=[];for(var s in t){var i=t[s];t.hasOwnProperty(s)&&!Ue(i)&&(Array.isArray(i)&&i.isCss||re(i)?r.push("".concat(He(s),":"),i,";"):ce(i)?r.push.apply(r,__spreadArray(__spreadArray(["".concat(s," {")],Je(i),!1),["}"],!1)):r.push("".concat(He(s),": ").concat((n=s,null==(o=i)||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||n in unitlessKeys||n.startsWith("--")?String(o).trim():"".concat(o,"px")),";")));}return r};function Xe(e,t,n,o){if(Ue(e))return [];if(se(e))return [".".concat(e.styledComponentId)];if(re(e)){if(!re(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return [e];var r=e(t);return "production"===process$1.env.NODE_ENV||"object"!=typeof r||Array.isArray(r)||r instanceof We||ce(r)||null===r||console.error("".concat(B(e)," is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")),Xe(r,t,n,o)}var s;return e instanceof We?n?(e.inject(n,o),[e.getName(o)]):[e]:ce(e)?Je(e):Array.isArray(e)?Array.prototype.concat.apply(_,e.map(function(e){return Xe(e,t,n,o)})):[e.toString()]}function Ze(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(re(n)&&!se(n))return !1}return !0}var Ke=z(v),Qe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process$1.env.NODE_ENV&&(void 0===n||n.isStatic)&&Ze(e),this.componentId=t,this.baseHash=M(Ke,t),this.baseStyle=n,ke.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var o=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))o=ie(o,this.staticRulesId);else {var r=ae(Xe(this.rules,e,t,n)),s=x(M(this.baseHash,r)>>>0);if(!t.hasNameForId(this.componentId,s)){var i=n(r,".".concat(s),void 0,this.componentId);t.insertRules(this.componentId,s,i);}o=ie(o,s),this.staticRulesId=s;}else {for(var a=M(this.baseHash,n.hash),c="",l=0;l<this.rules.length;l++){var u=this.rules[l];if("string"==typeof u)c+=u,"production"!==process$1.env.NODE_ENV&&(a=M(a,u));else if(u){var p=ae(Xe(u,e,t,n));a=M(a,p+l),c+=p;}}if(c){var d=x(a>>>0);t.hasNameForId(this.componentId,d)||t.insertRules(this.componentId,d,n(c,".".concat(d),void 0,this.componentId)),o=ie(o,d);}}return o},e}(),et=o__default["default"].createContext(void 0);et.Consumer;var rt={},st=new Set;function it(e,r,s){var i=se(e),a=e,c=!L(e),p=r.attrs,d=void 0===p?_:p,h=r.componentId,f=void 0===h?function(e,t){var n="string"!=typeof e?"sc":R(e);rt[n]=(rt[n]||0)+1;var o="".concat(n,"-").concat($(v+n+rt[n]));return t?"".concat(t,"-").concat(o):o}(r.displayName,r.parentComponentId):h,m=r.displayName,y=void 0===m?function(e){return L(e)?"styled.".concat(e):"Styled(".concat(B(e),")")}(e):m,g=r.displayName&&r.componentId?"".concat(R(r.displayName),"-").concat(r.componentId):r.componentId||f,S=i&&a.attrs?a.attrs.concat(d).filter(Boolean):d,w=r.shouldForwardProp;if(i&&a.shouldForwardProp){var b=a.shouldForwardProp;if(r.shouldForwardProp){var E=r.shouldForwardProp;w=function(e,t){return b(e,t)&&E(e,t)};}else w=b;}var N=new Qe(s,g,i?a.componentStyle:void 0);function O(e,r){return function(e,r,s){var i=e.attrs,a=e.componentStyle,c=e.defaultProps,p=e.foldedComponentIds,d=e.styledComponentId,h=e.target,f=o__default["default"].useContext(et),m=Ge(),y=e.shouldForwardProp||m.shouldForwardProp;"production"!==process$1.env.NODE_ENV&&o.useDebugValue(d);var v=I(r,f,c)||C,g=function(e,n,o){for(var r,s=__assign(__assign({},n),{className:void 0,theme:o}),i=0;i<e.length;i+=1){var a=re(r=e[i])?r(s):r;for(var c in a)s[c]="className"===c?ie(s[c],a[c]):"style"===c?__assign(__assign({},s[c]),a[c]):a[c];}return n.className&&(s.className=ie(s.className,n.className)),s}(i,r,v),S=g.as||h,w={};for(var b in g)void 0===g[b]||"$"===b[0]||"as"===b||"theme"===b&&g.theme===v||("forwardedAs"===b?w.as=g.forwardedAs:y&&!y(b,S)||(w[b]=g[b],y||"development"!==process$1.env.NODE_ENV||isPropValid(b)||st.has(b)||!A.has(S)||(st.add(b),console.warn('styled-components: it looks like an unknown prop "'.concat(b,'" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));var E=function(e,t){var n=Ge(),o$1=e.generateAndInjectStyles(t,n.styleSheet,n.stylis);return "production"!==process$1.env.NODE_ENV&&o.useDebugValue(o$1),o$1}(a,g);"production"!==process$1.env.NODE_ENV&&e.warnTooManyClasses&&e.warnTooManyClasses(E);var N=ie(p,d);return E&&(N+=" "+E),g.className&&(N+=" "+g.className),w[L(S)&&!A.has(S)?"class":"className"]=N,w.ref=s,o.createElement(S,w)}(D,e,r)}O.displayName=y;var D=o__default["default"].forwardRef(O);return D.attrs=S,D.componentStyle=N,D.displayName=y,D.shouldForwardProp=w,D.foldedComponentIds=i?ie(a.foldedComponentIds,a.styledComponentId):"",D.styledComponentId=g,D.target=i?a.target:e,Object.defineProperty(D,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=i?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var o=0,r=t;o<r.length;o++)le(e,r[o],!0);return e}({},a.defaultProps,e):e;}}),"production"!==process$1.env.NODE_ENV&&(P(y,g),D.warnTooManyClasses=function(e,t){var n={},o=!1;return function(r){if(!o&&(n[r]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(s,".\n")+"Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),o=!0,n={};}}}(y,g)),ue(D,function(){return ".".concat(D.styledComponentId)}),c&&oe(D,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0}),D}function at(e,t){for(var n=[e[0]],o=0,r=t.length;o<r;o+=1)n.push(t[o],e[o+1]);return n}var ct=function(e){return Object.assign(e,{isCss:!0})};function lt(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];if(re(t)||ce(t))return ct(Xe(at(_,__spreadArray([t],n,!0))));var r=t;return 0===n.length&&1===r.length&&"string"==typeof r[0]?Xe(r):ct(Xe(at(r,n)))}function ut(n,o,r){if(void 0===r&&(r=C),!o)throw he(1,o);var s=function(t){for(var s=[],i=1;i<arguments.length;i++)s[i-1]=arguments[i];return n(o,r,lt.apply(void 0,__spreadArray([t],s,!1)))};return s.attrs=function(e){return ut(n,o,__assign(__assign({},r),{attrs:Array.prototype.concat(r.attrs,e).filter(Boolean)}))},s.withConfig=function(e){return ut(n,o,__assign(__assign({},r),e))},s}var pt=function(e){return ut(it,e)},dt=pt;A.forEach(function(e){dt[e]=pt(e);});"production"!==process$1.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");var St="__sc-".concat(f,"__");"production"!==process$1.env.NODE_ENV&&"test"!==process$1.env.NODE_ENV&&"undefined"!=typeof window&&(window[St]||(window[St]=0),1===window[St]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window[St]+=1);
+var f="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",m="active",y="data-styled-version",v="6.1.12",g="/*!sc*/\n",S="undefined"!=typeof window&&"HTMLElement"in window,w=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),E=/invalid hook call/i,N=new Set,P=function(t,n){if("production"!==process.env.NODE_ENV){var o$1=n?' with the id of "'.concat(n,'"'):"",s="The component ".concat(t).concat(o$1," has been created dynamically.\n")+"You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",i=console.error;try{var a=!0;console.error=function(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];E.test(t)?(a=!1,N.delete(s)):i.apply(void 0,__spreadArray([t],n,!1));},o.useRef(),a&&!N.has(s)&&(console.warn(s),N.add(s));}catch(e){E.test(e.message)&&N.delete(s);}finally{console.error=i;}}},_=Object.freeze([]),C=Object.freeze({});function I(e,t,n){return void 0===n&&(n=C),e.theme!==n.theme&&e.theme||t||n.theme}var A=new Set(["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","track","u","ul","use","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"]),O=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,D=/(^-|-$)/g;function R(e){return e.replace(O,"-").replace(D,"")}var T=/(a)(d)/gi,k=52,j=function(e){return String.fromCharCode(e+(e>25?39:97))};function x(e){var t,n="";for(t=Math.abs(e);t>k;t=t/k|0)n=j(t%k)+n;return (j(t%k)+n).replace(T,"$1-$2")}var V,F=5381,M=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},z=function(e){return M(F,e)};function $(e){return x(z(e)>>>0)}function B(e){return "production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function L(e){return "string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var G="function"==typeof Symbol&&Symbol.for,Y=G?Symbol.for("react.memo"):60115,W=G?Symbol.for("react.forward_ref"):60112,q={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},H={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},U={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},J=((V={})[W]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},V[Y]=U,V);function X(e){return ("type"in(t=e)&&t.type.$$typeof)===Y?U:"$$typeof"in e?J[e.$$typeof]:q;var t;}var Z=Object.defineProperty,K=Object.getOwnPropertyNames,Q=Object.getOwnPropertySymbols,ee=Object.getOwnPropertyDescriptor,te=Object.getPrototypeOf,ne=Object.prototype;function oe(e,t,n){if("string"!=typeof t){if(ne){var o=te(t);o&&o!==ne&&oe(e,o,n);}var r=K(t);Q&&(r=r.concat(Q(t)));for(var s=X(e),i=X(t),a=0;a<r.length;++a){var c=r[a];if(!(c in H||n&&n[c]||i&&c in i||s&&c in s)){var l=ee(t,c);try{Z(e,c,l);}catch(e){}}}}return e}function re(e){return "function"==typeof e}function se(e){return "object"==typeof e&&"styledComponentId"in e}function ie(e,t){return e&&t?"".concat(e," ").concat(t):e||t||""}function ae(e,t){if(0===e.length)return "";for(var n=e[0],o=1;o<e.length;o++)n+=t?t+e[o]:e[o];return n}function ce(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function le(e,t,n){if(void 0===n&&(n=!1),!n&&!ce(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var o=0;o<t.length;o++)e[o]=le(e[o],t[o]);else if(ce(t))for(var o in t)e[o]=le(e[o],t[o]);return e}function ue(e,t){Object.defineProperty(e,"toString",{value:t});}var pe="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function de(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],o=[],r=1,s=e.length;r<s;r+=1)o.push(e[r]);return o.forEach(function(e){n=n.replace(/%[a-z]/,e);}),n}function he(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];return "production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(de.apply(void 0,__spreadArray([pe[t]],n,!1)).trim())}var fe=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}return e.prototype.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,o=n.length,r=o;e>=r;)if((r<<=1)<0)throw he(16,"".concat(e));this.groupSizes=new Uint32Array(r),this.groupSizes.set(n),this.length=r;for(var s=o;s<r;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=(s=0,t.length);s<a;s++)this.tag.insertRule(i,t[s])&&(this.groupSizes[e]++,i++);},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),o=n+t;this.groupSizes[e]=0;for(var r=n;r<o;r++)this.tag.deleteRule(n);}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],o=this.indexOfGroup(e),r=o+n,s=o;s<r;s++)t+="".concat(this.tag.getRule(s)).concat(g);return t},e}(),me=1<<30,ye=new Map,ve=new Map,ge=1,Se=function(e){if(ye.has(e))return ye.get(e);for(;ve.has(ge);)ge++;var t=ge++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>me))throw he(16,"".concat(t));return ye.set(e,t),ve.set(t,e),t},we=function(e,t){ge=t+1,ye.set(e,t),ve.set(t,e);},be="style[".concat(f,"][").concat(y,'="').concat(v,'"]'),Ee=new RegExp("^".concat(f,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),Ne=function(e,t,n){for(var o,r=n.split(","),s=0,i=r.length;s<i;s++)(o=r[s])&&e.registerName(t,o);},Pe=function(e,t){for(var n,o=(null!==(n=t.textContent)&&void 0!==n?n:"").split(g),r=[],s=0,i=o.length;s<i;s++){var a=o[s].trim();if(a){var c=a.match(Ee);if(c){var l=0|parseInt(c[1],10),u=c[2];0!==l&&(we(u,l),Ne(e,u,c[3]),e.getTag().insertRules(l,r)),r.length=0;}else r.push(a);}}},_e=function(e){for(var t=document.querySelectorAll(be),n=0,o=t.length;n<o;n++){var r=t[n];r&&r.getAttribute(f)!==m&&(Pe(e,r),r.parentNode&&r.parentNode.removeChild(r));}};function Ce(){return "undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var Ie=function(e){var t=document.head,n=e||t,o=document.createElement("style"),r=function(e){var t=Array.from(e.querySelectorAll("style[".concat(f,"]")));return t[t.length-1]}(n),s=void 0!==r?r.nextSibling:null;o.setAttribute(f,m),o.setAttribute(y,v);var i=Ce();return i&&o.setAttribute("nonce",i),n.insertBefore(o,s),o},Ae=function(){function e(e){this.element=Ie(e),this.element.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,o=t.length;n<o;n++){var r=t[n];if(r.ownerNode===e)return r}throw he(17)}(this.element),this.length=0;}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return !1}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""},e}(),Oe=function(){function e(e){this.element=Ie(e),this.nodes=this.element.childNodes,this.length=0;}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,!0}return !1},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),De=function(){function e(e){this.rules=[],this.length=0;}return e.prototype.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),Re=S,Te={isServer:!S,useCSSOMInjection:!w},ke=function(){function e(e,n,o){void 0===e&&(e=C),void 0===n&&(n={});var r=this;this.options=__assign(__assign({},Te),e),this.gs=n,this.names=new Map(o),this.server=!!e.isServer,!this.server&&S&&Re&&(Re=!1,_e(this)),ue(this,function(){return function(e){for(var t=e.getTag(),n=t.length,o="",r=function(n){var r=function(e){return ve.get(e)}(n);if(void 0===r)return "continue";var s=e.names.get(r),i=t.getGroup(n);if(void 0===s||!s.size||0===i.length)return "continue";var a="".concat(f,".g").concat(n,'[id="').concat(r,'"]'),c="";void 0!==s&&s.forEach(function(e){e.length>0&&(c+="".concat(e,","));}),o+="".concat(i).concat(a,'{content:"').concat(c,'"}').concat(g);},s=0;s<n;s++)r(s);return o}(r)});}return e.registerId=function(e){return Se(e)},e.prototype.rehydrate=function(){!this.server&&S&&_e(this);},e.prototype.reconstructWithOptions=function(n,o){return void 0===o&&(o=!0),new e(__assign(__assign({},this.options),n),this.gs,o&&this.names||void 0)},e.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},e.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target;return e.isServer?new De(n):t?new Ae(n):new Oe(n)}(this.options),new fe(e)));var e;},e.prototype.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},e.prototype.registerName=function(e,t){if(Se(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},e.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(Se(e),n);},e.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},e.prototype.clearRules=function(e){this.getTag().clearGroup(Se(e)),this.clearNames(e);},e.prototype.clearTag=function(){this.tag=void 0;},e}(),je=/&/g,xe=/^\s*\/\/.*$/gm;function Ve(e,t){return e.map(function(e){return "rule"===e.type&&(e.value="".concat(t," ").concat(e.value),e.value=e.value.replaceAll(",",",".concat(t," ")),e.props=e.props.map(function(e){return "".concat(t," ").concat(e)})),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ve(e.children,t)),e})}function Fe(e){var t,n,o,r=void 0===e?C:e,s=r.options,i=void 0===s?C:s,a=r.plugins,c$1=void 0===a?_:a,l=function(e,o,r){return r.startsWith(n)&&r.endsWith(n)&&r.replaceAll(n,"").length>0?".".concat(t):e},u=c$1.slice();u.push(function(e){e.type===c&&e.value.includes("&")&&(e.props[0]=e.props[0].replace(je,n).replace(o,l));}),i.prefix&&u.push(de$1),u.push(he$1);var p=function(e,r,s,a){void 0===r&&(r=""),void 0===s&&(s=""),void 0===a&&(a="&"),t=a,n=r,o=new RegExp("\\".concat(n,"\\b"),"g");var c=e.replace(xe,""),l=ue$1(s||r?"".concat(s," ").concat(r," { ").concat(c," }"):c);i.namespace&&(l=Ve(l,i.namespace));var p=[];return pe$1(l,be$1(u.concat(we$1(function(e){return p.push(e)})))),p};return p.hash=c$1.length?c$1.reduce(function(e,t){return t.name||he(15),M(e,t.name)},F).toString():"",p}var Me=new ke,ze=Fe(),$e=o__default["default"].createContext({shouldForwardProp:void 0,styleSheet:Me,stylis:ze});$e.Consumer;o__default["default"].createContext(void 0);function Ge(){return o.useContext($e)}var We=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=ze);var o=n.name+t.hash;e.hasNameForId(n.id,o)||e.insertRules(n.id,o,t(n.rules,o,"@keyframes"));},this.name=e,this.id="sc-keyframes-".concat(e),this.rules=t,ue(this,function(){throw he(12,String(n.name))});}return e.prototype.getName=function(e){return void 0===e&&(e=ze),this.name+e.hash},e}(),qe=function(e){return e>="A"&&e<="Z"};function He(e){for(var t="",n=0;n<e.length;n++){var o=e[n];if(1===n&&"-"===o&&"-"===e[0])return e;qe(o)?t+="-"+o.toLowerCase():t+=o;}return t.startsWith("ms-")?"-"+t:t}var Ue=function(e){return null==e||!1===e||""===e},Je=function(t){var n,o,r=[];for(var s in t){var i=t[s];t.hasOwnProperty(s)&&!Ue(i)&&(Array.isArray(i)&&i.isCss||re(i)?r.push("".concat(He(s),":"),i,";"):ce(i)?r.push.apply(r,__spreadArray(__spreadArray(["".concat(s," {")],Je(i),!1),["}"],!1)):r.push("".concat(He(s),": ").concat((n=s,null==(o=i)||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||n in unitlessKeys||n.startsWith("--")?String(o).trim():"".concat(o,"px")),";")));}return r};function Xe(e,t,n,o){if(Ue(e))return [];if(se(e))return [".".concat(e.styledComponentId)];if(re(e)){if(!re(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return [e];var r=e(t);return "production"===process.env.NODE_ENV||"object"!=typeof r||Array.isArray(r)||r instanceof We||ce(r)||null===r||console.error("".concat(B(e)," is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")),Xe(r,t,n,o)}var s;return e instanceof We?n?(e.inject(n,o),[e.getName(o)]):[e]:ce(e)?Je(e):Array.isArray(e)?Array.prototype.concat.apply(_,e.map(function(e){return Xe(e,t,n,o)})):[e.toString()]}function Ze(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(re(n)&&!se(n))return !1}return !0}var Ke=z(v),Qe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Ze(e),this.componentId=t,this.baseHash=M(Ke,t),this.baseStyle=n,ke.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var o=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))o=ie(o,this.staticRulesId);else {var r=ae(Xe(this.rules,e,t,n)),s=x(M(this.baseHash,r)>>>0);if(!t.hasNameForId(this.componentId,s)){var i=n(r,".".concat(s),void 0,this.componentId);t.insertRules(this.componentId,s,i);}o=ie(o,s),this.staticRulesId=s;}else {for(var a=M(this.baseHash,n.hash),c="",l=0;l<this.rules.length;l++){var u=this.rules[l];if("string"==typeof u)c+=u,"production"!==process.env.NODE_ENV&&(a=M(a,u));else if(u){var p=ae(Xe(u,e,t,n));a=M(a,p+l),c+=p;}}if(c){var d=x(a>>>0);t.hasNameForId(this.componentId,d)||t.insertRules(this.componentId,d,n(c,".".concat(d),void 0,this.componentId)),o=ie(o,d);}}return o},e}(),et=o__default["default"].createContext(void 0);et.Consumer;var rt={},st=new Set;function it(e,r,s){var i=se(e),a=e,c=!L(e),p=r.attrs,d=void 0===p?_:p,h=r.componentId,f=void 0===h?function(e,t){var n="string"!=typeof e?"sc":R(e);rt[n]=(rt[n]||0)+1;var o="".concat(n,"-").concat($(v+n+rt[n]));return t?"".concat(t,"-").concat(o):o}(r.displayName,r.parentComponentId):h,m=r.displayName,y=void 0===m?function(e){return L(e)?"styled.".concat(e):"Styled(".concat(B(e),")")}(e):m,g=r.displayName&&r.componentId?"".concat(R(r.displayName),"-").concat(r.componentId):r.componentId||f,S=i&&a.attrs?a.attrs.concat(d).filter(Boolean):d,w=r.shouldForwardProp;if(i&&a.shouldForwardProp){var b=a.shouldForwardProp;if(r.shouldForwardProp){var E=r.shouldForwardProp;w=function(e,t){return b(e,t)&&E(e,t)};}else w=b;}var N=new Qe(s,g,i?a.componentStyle:void 0);function O(e,r){return function(e,r,s){var i=e.attrs,a=e.componentStyle,c=e.defaultProps,p=e.foldedComponentIds,d=e.styledComponentId,h=e.target,f=o__default["default"].useContext(et),m=Ge(),y=e.shouldForwardProp||m.shouldForwardProp;"production"!==process.env.NODE_ENV&&o.useDebugValue(d);var v=I(r,f,c)||C,g=function(e,n,o){for(var r,s=__assign(__assign({},n),{className:void 0,theme:o}),i=0;i<e.length;i+=1){var a=re(r=e[i])?r(s):r;for(var c in a)s[c]="className"===c?ie(s[c],a[c]):"style"===c?__assign(__assign({},s[c]),a[c]):a[c];}return n.className&&(s.className=ie(s.className,n.className)),s}(i,r,v),S=g.as||h,w={};for(var b in g)void 0===g[b]||"$"===b[0]||"as"===b||"theme"===b&&g.theme===v||("forwardedAs"===b?w.as=g.forwardedAs:y&&!y(b,S)||(w[b]=g[b],y||"development"!==process.env.NODE_ENV||isPropValid(b)||st.has(b)||!A.has(S)||(st.add(b),console.warn('styled-components: it looks like an unknown prop "'.concat(b,'" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));var E=function(e,t){var n=Ge(),o$1=e.generateAndInjectStyles(t,n.styleSheet,n.stylis);return "production"!==process.env.NODE_ENV&&o.useDebugValue(o$1),o$1}(a,g);"production"!==process.env.NODE_ENV&&e.warnTooManyClasses&&e.warnTooManyClasses(E);var N=ie(p,d);return E&&(N+=" "+E),g.className&&(N+=" "+g.className),w[L(S)&&!A.has(S)?"class":"className"]=N,w.ref=s,o.createElement(S,w)}(D,e,r)}O.displayName=y;var D=o__default["default"].forwardRef(O);return D.attrs=S,D.componentStyle=N,D.displayName=y,D.shouldForwardProp=w,D.foldedComponentIds=i?ie(a.foldedComponentIds,a.styledComponentId):"",D.styledComponentId=g,D.target=i?a.target:e,Object.defineProperty(D,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=i?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var o=0,r=t;o<r.length;o++)le(e,r[o],!0);return e}({},a.defaultProps,e):e;}}),"production"!==process.env.NODE_ENV&&(P(y,g),D.warnTooManyClasses=function(e,t){var n={},o=!1;return function(r){if(!o&&(n[r]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(s,".\n")+"Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),o=!0,n={};}}}(y,g)),ue(D,function(){return ".".concat(D.styledComponentId)}),c&&oe(D,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0}),D}function at(e,t){for(var n=[e[0]],o=0,r=t.length;o<r;o+=1)n.push(t[o],e[o+1]);return n}var ct=function(e){return Object.assign(e,{isCss:!0})};function lt(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];if(re(t)||ce(t))return ct(Xe(at(_,__spreadArray([t],n,!0))));var r=t;return 0===n.length&&1===r.length&&"string"==typeof r[0]?Xe(r):ct(Xe(at(r,n)))}function ut(n,o,r){if(void 0===r&&(r=C),!o)throw he(1,o);var s=function(t){for(var s=[],i=1;i<arguments.length;i++)s[i-1]=arguments[i];return n(o,r,lt.apply(void 0,__spreadArray([t],s,!1)))};return s.attrs=function(e){return ut(n,o,__assign(__assign({},r),{attrs:Array.prototype.concat(r.attrs,e).filter(Boolean)}))},s.withConfig=function(e){return ut(n,o,__assign(__assign({},r),e))},s}var pt=function(e){return ut(it,e)},dt=pt;A.forEach(function(e){dt[e]=pt(e);});"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");var St="__sc-".concat(f,"__");"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window[St]||(window[St]=0),1===window[St]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window[St]+=1);
 
 const MOBILE_W = 850;
 const MOBILE_WIDTH = `max-width: ${MOBILE_W}px`;
@@ -5929,7 +5927,8 @@ function MobileDrawer({
   isUserDropdown = false,
   user,
   sidenavConfig = {},
-  navigate,
+  goTo = () => {},
+  getRedirectLink = () => {},
   t = key => key,
   checkPermission = () => false,
   logOut,
@@ -5966,10 +5965,6 @@ function MobileDrawer({
     }
     logOut?.();
   }, [logOut]);
-  const goTo = (...props) => {
-    navigate?.(...props);
-    toggle();
-  };
   const filteredItems = o.useMemo(() => {
     const mapItems = item => {
       const isDisabled = typeof item.isDisabled === 'function' ? item.isDisabled(user, selectedProject, selectedProject) : item.isDisabled || false;
@@ -6095,7 +6090,8 @@ const UserDropdownMenu = ({
   user,
   toggleSettingsDrawer = () => {},
   settingsDrawerOpened,
-  navigate,
+  goTo = () => {},
+  getRedirectLink = () => {},
   changeNotificationState,
   t = s => s,
   isAppNavigation,
@@ -6114,15 +6110,10 @@ const UserDropdownMenu = ({
     userIsAdmin
   } = userHelpers;
   const isAdmin = o.useMemo(() => userIsAdmin?.(user), [user, userIsAdmin]);
+
+  // Add fallback for windowWidth
   const actualWidth = windowWidth || (typeof window !== 'undefined' ? window.innerWidth : 1920);
   const isMobile = o.useMemo(() => actualWidth <= MOBILE_W, [actualWidth]);
-  console.log('UserDropdown Debug:', {
-    windowWidth,
-    actualWidth,
-    isMobile,
-    MOBILE_W
-  }); // Debug log
-
   const canViewUsers = checkPermission({
     permission: 'users.canView',
     permissions: user?.role?.permissions
@@ -6135,7 +6126,29 @@ const UserDropdownMenu = ({
     const _arr = Array.isArray(user?.company?.logo) ? user?.company?.logo : user?.company?.logo?.fileList && Array.isArray(user?.company?.logo?.fileList) ? user?.company?.logo?.fileList.map(v => v.response ? v.response : v) : [];
     return Array.isArray(_arr) && _arr[0] ? _arr[0].url : null;
   }, [user]);
-  const isDemoEnv = process.env.REACT_APP_ENV === 'demo';
+  const isDemoEnv = isDev;
+
+  // Helper function to handle navigation with notification check
+  const handleNavigate = path => {
+    if (changeNotificationState) {
+      changeNotificationState({
+        onYes: () => goTo(getRedirectLink(path))
+      });
+    } else {
+      goTo(getRedirectLink(path));
+    }
+  };
+
+  // Helper function to handle logout with notification check
+  const handleLogout = () => {
+    if (changeNotificationState) {
+      changeNotificationState({
+        onYes: () => logOut()
+      });
+    } else {
+      logOut();
+    }
+  };
   return isMobile ? /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "d-flex flex-column justify-content-center",
     onClick: toggleSettingsDrawer,
@@ -6147,7 +6160,8 @@ const UserDropdownMenu = ({
       toggle: toggleSettingsDrawer,
       drawerOpened: settingsDrawerOpened,
       user: user,
-      navigate: navigate,
+      goTo: goTo,
+      getRedirectLink: getRedirectLink,
       t: t,
       checkPermission: checkPermission,
       logOut: logOut,
@@ -6159,47 +6173,44 @@ const UserDropdownMenu = ({
     placement: "bottomLeft",
     rootClassName: formatClassname(['user-dropdown-layout', appName]),
     menu: {
-      items: [{
-        label: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "drop-header",
-            children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
-              children: user?.company?.name || ''
-            }), /*#__PURE__*/jsxRuntime.jsxs("p", {
-              children: [user?.firstName || '', " ", user?.lastName || '']
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "list",
-            children: [user.company && !isDemoEnv && canViewUsers && !isAdmin ? /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "list-item",
-              onClick: () => {
-                changeNotificationState({
-                  onYes: () => navigate?.(`/app/users`)
-                });
-              },
-              children: t('Users')
-            }) : null, canViewSettings && !isAppNavigation && !isAdmin ? /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "list-item",
-              onClick: () => {
-                changeNotificationState({
-                  onYes: () => navigate?.(`/app/view/settings`)
-                });
-              },
-              children: t('Settings')
-            }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "list-item",
-              onClick: () => {
-                changeNotificationState({
-                  onYes: () => logOut()
-                });
-              },
-              children: t('Log out')
-            })]
-          })]
-        }),
-        key: 'userMenu'
-      }]
+      items: [
+      // Only show Users option if conditions met
+      ...(user.company && !isDemoEnv && canViewUsers && !isAdmin ? [{
+        label: t('Users'),
+        key: 'users',
+        onClick: () => handleNavigate(getRedirectLink(`/app/users`))
+      }] : []),
+      // Only show Settings option if conditions met
+      ...(canViewSettings && !isAppNavigation && !isAdmin ? [{
+        label: t('Settings'),
+        key: 'settings',
+        onClick: () => handleNavigate(getRedirectLink(`/app/view/settings`))
+      }] : []),
+      // Always show logout
+      {
+        label: t('Log out'),
+        key: 'logout',
+        onClick: handleLogout
+      }],
+      // Add the header as a separate component
+      onClick: info => {
+        // This will be called when any menu item is clicked
+        console.log('Menu item clicked:', info.key);
+      }
     },
+    dropdownRender: menu => /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "drop-header",
+        children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
+          children: user?.company?.name || ''
+        }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+          children: [user?.firstName || '', " ", user?.lastName || '']
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "list",
+        children: /*#__PURE__*/o__default["default"].cloneElement(menu)
+      })]
+    }),
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "d-flex flex-column justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx(UserIcon, {
@@ -6486,7 +6497,8 @@ function Notifications({
   mod = 'pme',
   toggle = () => {},
   t = key => key,
-  navigate,
+  goTo = () => {},
+  getRedirectLink = () => {},
   appName = 'app'
 }) {
   const [historyVisible, setHistoryVisible] = o.useState(false);
@@ -6531,7 +6543,7 @@ function Notifications({
     }),
     onClick: () => {
       toggle();
-      navigate?.(`/app/${mod}/view/settings?activeForm=notifications`);
+      goTo(getRedirectLink(`/app/${mod}/view/settings?activeForm=notifications`));
     },
     label: t('Settings')
   }];
@@ -6572,7 +6584,7 @@ function Notifications({
         toggle: toggle,
         n: n,
         t: t,
-        navigate: navigate
+        goTo: goTo
       }, `notifications-${i + 1}`)), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "loading-cont",
         children: /*#__PURE__*/jsxRuntime.jsx(icons.LoadingOutlined, {})
@@ -6581,7 +6593,7 @@ function Notifications({
       visible: historyVisible,
       setHistoryVisible: setHistoryVisible,
       t: t,
-      navigate: navigate
+      goTo: goTo
     })]
   });
 }
@@ -6805,6 +6817,143 @@ function LoginPopup({
   });
 }
 
+/**
+ * @description Manages window.storage
+ * @returns storage objects
+ * @class StorageManager
+ */
+class StorageManager {
+  /**
+   * @description Set or update given value in localStorage
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static set(key, value) {
+    if (key && value) {
+      window.localStorage.setItem(key, value);
+      return {
+        success: true,
+        data: "Storage has been set successfully."
+      };
+    }
+    return {
+      error: true,
+      data: "Storage was not set. Storage key and value is required!"
+    };
+  }
+
+  /**
+   * @description Set or update given value in sessionStorage, used to not remember user after closing opened tab.
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static setToSession(key, value) {
+    if (key && value) {
+      window.sessionStorage.setItem(key, value);
+      return {
+        success: true,
+        data: "Storage has been set successfully."
+      };
+    }
+    return {
+      error: true,
+      data: "Storage was not set. Storage key and value is required!"
+    };
+  }
+
+  /**
+   * @description Fetch data from localStorage
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static get(key, defaultValue = undefined) {
+    if (key) {
+      const val = window.localStorage.getItem(key) || window.sessionStorage.getItem(key);
+      return val || defaultValue;
+    }
+    return {
+      error: true,
+      data: "Storage key is required!"
+    };
+  }
+
+  /**
+   * @description Clear only one value from localStorage
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static clearOne(key) {
+    if (key === 'token') {
+      localStorage.removeItem('trade-type');
+      localStorage.removeItem('trade-value');
+    }
+    if (key) {
+      window.localStorage.removeItem(key) || window.sessionStorage.removeItem(key);
+    }
+    return "Storage key is required!";
+  }
+
+  /**
+   * @description Clear all values from localStorage
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static clearAll() {
+    window.localStorage.clear();
+    window.sessionStorage.clear();
+  }
+  static hasKey(key) {
+    return typeof this.get(key) === 'string';
+  }
+  static saveFilters(module, namespace, filters = {}, merge = false) {
+    let savedFilters = this.get('filters');
+    try {
+      savedFilters = JSON.parse(savedFilters);
+    } catch (e) {
+      savedFilters = {};
+    }
+    if (!savedFilters) {
+      savedFilters = {};
+    }
+    if (!savedFilters[module]) {
+      savedFilters[module] = {};
+    }
+    if (!savedFilters[module][namespace]) {
+      savedFilters[module][namespace] = {};
+    }
+    if (Object.keys(filters).length) {
+      savedFilters[module][namespace] = merge ? Object.assign(savedFilters[module][namespace], filters) : filters;
+    } else {
+      savedFilters[module][namespace] = {};
+    }
+    this.set('filters', JSON.stringify(savedFilters));
+    return savedFilters[module][namespace];
+  }
+  static getFilters(module, namespace) {
+    let savedFilters = this.get('filters');
+    try {
+      savedFilters = JSON.parse(savedFilters);
+    } catch (e) {
+      savedFilters = {};
+    }
+    if (!savedFilters) {
+      savedFilters = {};
+    }
+    if (!savedFilters[module]) {
+      savedFilters[module] = {};
+    }
+    if (!savedFilters[module][namespace]) {
+      savedFilters[module][namespace] = {};
+    }
+    return savedFilters[module][namespace];
+  }
+}
+
 /* eslint-disable react/prop-types */
 const {
   Content
@@ -6853,11 +7002,11 @@ function AppLayout({
   getUserOptions,
   selectedProject,
   // Navigation (injected from app)
-  navigate,
+  goTo = () => {},
   location,
   matchPath,
   Outlet,
-  getRedirectLink,
+  getRedirectLink = () => {},
   isDatastake,
   // Others
   userHelpers = {},
@@ -6937,10 +7086,9 @@ function AppLayout({
     _fetchPreferences();
   }, [getUserPreference]);
   const setIsCollapse = (val = false) => {
-    localStorage.setItem('is_collapsed', val ? 'true' : 'false');
+    console.log('setIsCollapse called with:', val); // Debug
+    StorageManager.set('is_collapsed', val ? 'true' : 'false');
     setIsCollapsed(val);
-
-    // Also call the parent's onCollapse callback
     if (onCollapse && typeof onCollapse === 'function') {
       onCollapse(val);
     }
@@ -6955,7 +7103,7 @@ function AppLayout({
   };
   const isUserApproved = user?.modules && user?.modules[module] && user?.modules[module].status === 'approved';
   o.useEffect(() => {
-    if (localStorage.getItem('previous')) {
+    if (StorageManager.get('previous')) {
       setPrevious(true);
     }
   }, [user?.language]);
@@ -6989,7 +7137,7 @@ function AppLayout({
       return;
     }
     changeNotificationState({
-      onYes: () => navigate?.('/app')
+      onYes: () => goTo(getRedirectLink('/app'))
     });
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -7021,7 +7169,7 @@ function AppLayout({
         isCollapsed: isCollapsed,
         user: user,
         sidenavConfig: sidenavConfig,
-        navigate: navigate,
+        goTo: goTo,
         location: location,
         matchPath: matchPath,
         t: t,
@@ -7051,7 +7199,10 @@ function AppLayout({
             children: isAppNavigation ? null : /*#__PURE__*/o__default["default"].createElement(isCollapsed ? icons.MenuUnfoldOutlined : icons.MenuFoldOutlined, {
               className: 'trigger',
               onClick: () => {
-                setIsCollapse(!isCollapsed); // Make sure this is called
+                console.log('Trigger clicked! Current isCollapsed:', isCollapsed);
+                const newValue = !isCollapsed;
+                console.log('Setting to:', newValue);
+                setIsCollapse(newValue);
               }
             })
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -7085,7 +7236,8 @@ function AppLayout({
                       userPreferences: userPreferences,
                       module: module,
                       t: t,
-                      navigate: navigate,
+                      goTo: goTo,
+                      getRedirectLink: getRedirectLink,
                       appName: appName
                     }),
                     disabled: true
@@ -7110,7 +7262,7 @@ function AppLayout({
                 color: 'white',
                 height: '30px'
               },
-              defaultValue: localStorage.getItem('datastakeLng') || 'en',
+              defaultValue: StorageManager.get('datastakeLng') || 'en',
               bordered: false,
               onChange: lng => updateLanguage?.(lng),
               popupClassName: formatClassname(['dark-select-popup language-select', appName]),
@@ -7144,7 +7296,8 @@ function AppLayout({
               settingsDrawerOpened: settingsDrawerOpened,
               notificationMode: notificationMode,
               isAppNavigation: isAppNavigation,
-              navigate: navigate,
+              goTo: goTo,
+              getRedirectLink: getRedirectLink,
               changeNotificationState: changeNotificationState,
               isUserApproved: isUserApproved,
               t: t,
@@ -7168,7 +7321,7 @@ function AppLayout({
         drawerOpened: drawerOpened,
         user: user,
         sidenavConfig: sidenavConfig,
-        navigate: navigate,
+        navigate: goTo,
         t: t,
         checkPermission: checkPermission,
         logOut: logOut,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.505",
+	"version": "0.6.506",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/layouts/AppLayout/components/MobileDrawer/index.js

@@ -15,7 +15,8 @@ export default function MobileDrawer({
   isUserDropdown = false,
   user,
   sidenavConfig = {},
-  navigate,
+  goTo = () => {},
+  getRedirectLink = () => {},
   t = (key) => key,
   checkPermission = () => false,
   logOut,
@@ -57,11 +58,6 @@ export default function MobileDrawer({
     logOut?.();
   }, [logOut]);
 
-  const goTo = (...props) => {
-    navigate?.(...props);
-    toggle();
-  };
-
   const filteredItems = useMemo(() => {
     const mapItems = (item) => {
       const isDisabled = typeof item.isDisabled === 'function' ?

package/src/@daf/layouts/AppLayout/components/Notifications/index.js

@@ -13,7 +13,8 @@ export default function Notifications({
   mod = 'pme',
   toggle = () => { },
   t = (key) => key,
-  navigate,
+  goTo = () => {},
+  getRedirectLink = () => {},
   appName = 'app',
 }) {
   const [historyVisible, setHistoryVisible] = useState(false);
@@ -44,7 +45,7 @@ export default function Notifications({
       icon: <CustomIcon name="Settings" width={13} height={13} />,
       onClick: () => {
         toggle();
-        navigate?.(`/app/${mod}/view/settings?activeForm=notifications`);
+        goTo(getRedirectLink(`/app/${mod}/view/settings?activeForm=notifications`));
       },
       label: t('Settings'),
     },
@@ -86,7 +87,7 @@ export default function Notifications({
             key={`notifications-${i + 1}`}
             n={n}
             t={t}
-            navigate={navigate}
+            goTo={goTo}
           />
         ))}
         {loading && (
@@ -99,7 +100,7 @@ export default function Notifications({
         visible={historyVisible} 
         setHistoryVisible={setHistoryVisible}
         t={t}
-        navigate={navigate}
+        goTo={goTo}
       />
     </NotificationsStyle>
   );

package/src/@daf/layouts/AppLayout/components/Sidenav/index.js

@@ -25,7 +25,8 @@ export const renderModule = ({
   isCollapsed,
   onClick,
   user,
-  userHelpers = {}
+  userHelpers = {},
+  goTo = () => {},
 }) => {
   const { userIsAdmin, userIsSbgImplementor, userIsSbgPartner } = userHelpers;
   
@@ -86,7 +87,7 @@ const Sidenav = ({
   isCollapsed = false,
   showMenu = true,
   sidenavConfig = {},
-  navigate,
+  goTo = () => {},
   location,
   matchPath,
   t,
@@ -94,7 +95,7 @@ const Sidenav = ({
   userHelpers = {},
   isDev = false,
   appName = 'app',
-  getRedirectLink,
+  getRedirectLink = () => {},
   isDatastake,
   selectedProject,
 }) => {
@@ -111,22 +112,15 @@ const Sidenav = ({
   const { pathname } = location || {};
 
   const mod = useMemo(() => module, [module, user]);
-
-  const _getRedirectLink = getRedirectLink || ((link) => {
-    if (window.location.pathname.includes(`/${appName}`)) {
-      return `/${appName}${link}`;
-    }
-    return link;
-  });
   
   const checkPath = (i) => {
     if (!matchPath || !pathname) return false;
     
     return (matchPath({
-      path: _getRedirectLink(i.path),
+      path: getRedirectLink(i.path),
       exact: true,
     }, pathname) || (i.subPath && i.subPath.filter(s => matchPath({
-      path: _getRedirectLink(s), 
+      path: getRedirectLink(s), 
       exact: true,
     }, pathname)).length)) ? true : false;
   };
@@ -169,12 +163,17 @@ const Sidenav = ({
   };
 
   const checkOnClick = ({ event }) => {
-    if (typeof event === 'function') {
-      changeNotificationState({ onYes: event });
-    } else {
-      // If event is not a function, just call changeNotificationState
-      changeNotificationState({ onYes: () => {} });
+    console.log("checkOnClick", changeNotificationState);
+    // If no changeNotificationState or no unsaved changes, execute immediately
+    if (!changeNotificationState) {
+      if (typeof event === 'function') {
+        event();
+      }
+      return;
     }
+    
+    // Otherwise, use the notification state mechanism
+    changeNotificationState({ onYes: event });
   };
 
   const { hoverContent, hoverContentSecond } = useMenu({
@@ -192,7 +191,7 @@ const Sidenav = ({
     setHoverOpen,
     module, 
     notApprovedModal, 
-    goTo: navigate, 
+    goTo, 
     hoverItemSecond, 
     isDev,
   });
@@ -253,7 +252,7 @@ const Sidenav = ({
         isCollapsed,
         onClick: () => checkOnClick({
           event: () => {
-            navigate?.(getRedirectLink(`/app`));
+            goTo(getRedirectLink(`/app`));
           }
         }),
         mod,
@@ -288,7 +287,7 @@ const Sidenav = ({
             setHoverOpen={setHoverOpen}
             onMouseMove={onMouseMove}
             user={user}
-            goTo={navigate}
+            goTo={goTo}
             notApprovedModal={notApprovedModal}
             isDev={isDev}
             t={t}

package/src/@daf/layouts/AppLayout/components/UserDropdown/index.js

@@ -11,7 +11,8 @@ export const UserDropdownMenu = ({
   user,
   toggleSettingsDrawer = () => { },
   settingsDrawerOpened,
-  navigate,
+  goTo = () => {},
+  getRedirectLink = () => {},
   changeNotificationState,
   t = (s) => s,
   isAppNavigation,
@@ -27,11 +28,10 @@ export const UserDropdownMenu = ({
   const { userIsAdmin } = userHelpers;
   const isAdmin = useMemo(() => userIsAdmin?.(user), [user, userIsAdmin]);
   
+  // Add fallback for windowWidth
   const actualWidth = windowWidth || (typeof window !== 'undefined' ? window.innerWidth : 1920);
   const isMobile = useMemo(() => actualWidth <= MOBILE_W, [actualWidth]);
   
-  console.log('UserDropdown Debug:', { windowWidth, actualWidth, isMobile, MOBILE_W }); // Debug log
-  
   const canViewUsers = checkPermission({ 
     permission: 'users.canView', 
     permissions: user?.role?.permissions 
@@ -48,7 +48,25 @@ export const UserDropdownMenu = ({
     return Array.isArray(_arr) && _arr[0] ? _arr[0].url : null;
   }, [user]);
 
-  const isDemoEnv = process.env.REACT_APP_ENV === 'demo';
+  const isDemoEnv = isDev;
+
+  // Helper function to handle navigation with notification check
+  const handleNavigate = (path) => {
+    if (changeNotificationState) {
+      changeNotificationState({ onYes: () => goTo(getRedirectLink(path)) });
+    } else {
+      goTo(getRedirectLink(path));
+    }
+  };
+
+  // Helper function to handle logout with notification check
+  const handleLogout = () => {
+    if (changeNotificationState) {
+      changeNotificationState({ onYes: () => logOut() });
+    } else {
+      logOut();
+    }
+  };
 
   return isMobile ? (
     <div className="d-flex flex-column justify-content-center" onClick={toggleSettingsDrawer}>
@@ -59,7 +77,8 @@ export const UserDropdownMenu = ({
         toggle={toggleSettingsDrawer}
         drawerOpened={settingsDrawerOpened}
         user={user}
-        navigate={navigate}
+        goTo={goTo}
+        getRedirectLink={getRedirectLink}
         t={t}
         checkPermission={checkPermission}
         logOut={logOut}
@@ -74,42 +93,42 @@ export const UserDropdownMenu = ({
       rootClassName={formatClassname(['user-dropdown-layout', appName])}
       menu={{
         items: [
+          // Only show Users option if conditions met
+          ...(user.company && !isDemoEnv && canViewUsers && !isAdmin ? [{
+            label: t('Users'),
+            key: 'users',
+            onClick: () => handleNavigate(getRedirectLink(`/app/users`))
+          }] : []),
+          // Only show Settings option if conditions met
+          ...(canViewSettings && !isAppNavigation && !isAdmin ? [{
+            label: t('Settings'),
+            key: 'settings',
+            onClick: () => handleNavigate(getRedirectLink(`/app/view/settings`))
+          }] : []),
+          // Always show logout
           {
-            label: (
-              <>
-                <div className="drop-header">
-                  <h4>{user?.company?.name || ''}</h4>
-                  <p>{user?.firstName || ''} {user?.lastName || ''}</p>
-                </div>
-                <div className='list'>
-                  {user.company && !isDemoEnv && canViewUsers && !isAdmin ?
-                    <div className='list-item' onClick={() => {
-                      changeNotificationState({ onYes: () => navigate?.(`/app/users`) });
-                    }}>
-                      {t('Users')}
-                    </div>
-                    : null}
-
-                  {canViewSettings && !isAppNavigation && !isAdmin ? (
-                    <div className='list-item' onClick={() => {
-                      changeNotificationState({ onYes: () => navigate?.(`/app/view/settings`) });
-                    }}>
-                      {t('Settings')}
-                    </div>
-                  ) : null}
-
-                  <div className='list-item' onClick={() => {
-                    changeNotificationState({ onYes: () => logOut() });
-                  }}>
-                    {t('Log out')}
-                  </div>
-                </div>
-              </>
-            ),
-            key: 'userMenu'
+            label: t('Log out'),
+            key: 'logout',
+            onClick: handleLogout
           }
-        ]
+        ],
+        // Add the header as a separate component
+        onClick: (info) => {
+          // This will be called when any menu item is clicked
+          console.log('Menu item clicked:', info.key);
+        }
       }}
+      dropdownRender={(menu) => (
+        <div>
+          <div className="drop-header">
+            <h4>{user?.company?.name || ''}</h4>
+            <p>{user?.firstName || ''} {user?.lastName || ''}</p>
+          </div>
+          <div className='list'>
+            {React.cloneElement(menu)}
+          </div>
+        </div>
+      )}
     >
       <div className="d-flex flex-column justify-content-center">
         <UserIcon companyLogo={companyLogo} />

package/src/@daf/layouts/AppLayout/index.jsx

@@ -16,6 +16,7 @@ import MobileDrawer from "./components/MobileDrawer/index.js";
 import Notifications from "./components/Notifications/index.js";
 import LoginPopup from "./components/LoginPopup/index.js";
 import { NotificationsProvider } from "./components/Notifications/context/index.js";
+import { StorageManager } from "../../../helpers/StorageManager.js";
 import './index.scss';
 
 const { Content } = Layout;
@@ -64,11 +65,11 @@ function AppLayout({
   selectedProject,
   
   // Navigation (injected from app)
-  navigate,
+  goTo = () => {},
   location,
   matchPath,
   Outlet,
-  getRedirectLink,
+  getRedirectLink = () => {},
   isDatastake,
 
   // Others
@@ -144,10 +145,9 @@ function AppLayout({
   }, [getUserPreference]);
 
   const setIsCollapse = (val = false) => {
-    localStorage.setItem('is_collapsed', val ? 'true' : 'false');
+    console.log('setIsCollapse called with:', val); // Debug
+    StorageManager.set('is_collapsed', val ? 'true' : 'false');
     setIsCollapsed(val);
-    
-    // Also call the parent's onCollapse callback
     if (onCollapse && typeof onCollapse === 'function') {
       onCollapse(val);
     }
@@ -167,7 +167,7 @@ function AppLayout({
     user?.modules[module].status === 'approved';
 
   useEffect(() => {
-    if (localStorage.getItem('previous')) {
+    if (StorageManager.get('previous')) {
       setPrevious(true);
     }
   }, [user?.language]);
@@ -205,7 +205,7 @@ function AppLayout({
     if (Object.keys(user?.modules || {}).length <= 1) {
       return;
     }
-    changeNotificationState({ onYes: () => navigate?.('/app') });
+    changeNotificationState({ onYes: () => goTo(getRedirectLink('/app')) });
   };
 
   return (
@@ -244,7 +244,7 @@ function AppLayout({
             isCollapsed={isCollapsed}
             user={user}
             sidenavConfig={sidenavConfig}
-            navigate={navigate}
+            goTo={goTo}
             location={location}
             matchPath={matchPath}
             t={t}
@@ -271,17 +271,20 @@ function AppLayout({
           ])}
         >
           <div className="d-flex left-sidebar right-sidebar">
-            <div className="desktop">
-            {isAppNavigation ? null : React.createElement(
-              isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
-              {
-                className: 'trigger',
-                onClick: () => {
-                  setIsCollapse(!isCollapsed);  // Make sure this is called
-                },
-              }
-            )}
-            </div>
+          <div className="desktop">
+          {isAppNavigation ? null : React.createElement(
+            isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
+            {
+              className: 'trigger',
+              onClick: () => {
+                console.log('Trigger clicked! Current isCollapsed:', isCollapsed);
+                const newValue = !isCollapsed;
+                console.log('Setting to:', newValue);
+                setIsCollapse(newValue);
+              },
+            }
+          )}
+          </div>
             <div className="mobile" onClick={toggleDrawer}>
               <img src={collapsedAppLogo} alt="logo" />
             </div>
@@ -311,7 +314,8 @@ function AppLayout({
                           userPreferences={userPreferences}
                           module={module}
                           t={t}
-                          navigate={navigate}
+                          goTo={goTo}
+                          getRedirectLink={getRedirectLink}
                           appName={appName}
                         />
                       ),
@@ -335,7 +339,7 @@ function AppLayout({
               <Select
                 className="ln-22 dark-select language-select"
                 style={{ color: 'white', height: '30px' }}
-                defaultValue={localStorage.getItem('datastakeLng') || 'en'}
+                defaultValue={StorageManager.get('datastakeLng') || 'en'}
                 bordered={false}
                 onChange={lng => updateLanguage?.(lng)}
                 popupClassName={formatClassname(['dark-select-popup language-select', appName])}
@@ -367,7 +371,8 @@ function AppLayout({
                 settingsDrawerOpened={settingsDrawerOpened}
                 notificationMode={notificationMode}
                 isAppNavigation={isAppNavigation}
-                navigate={navigate}
+                goTo={goTo}
+                getRedirectLink={getRedirectLink}
                 changeNotificationState={changeNotificationState}
                 isUserApproved={isUserApproved}
                 t={t}
@@ -395,7 +400,7 @@ function AppLayout({
             drawerOpened={drawerOpened}
             user={user}
             sidenavConfig={sidenavConfig}
-            navigate={navigate}
+            navigate={goTo}
             t={t}
             checkPermission={checkPermission}
             logOut={logOut}