@govtechsg/sgds-web-component 0.0.4 → 0.0.5

package/umd/index.js

@@ -30,52 +30,52 @@
      * Copyright 2019 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-    const t$3=window,e$7=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$5=Symbol(),n$6=new WeakMap;class o$5{constructor(t,e,n){if(this._$cssResult$=!0,n!==s$5)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$7&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=n$6.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n$6.set(s,t));}return t}toString(){return this.cssText}}const r$3=t=>new o$5("string"==typeof t?t:t+"",void 0,s$5),i$3=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,s,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[n+1]),t[0]);return new o$5(n,t,s$5)},S$1=(s,n)=>{e$7?s.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((e=>{const n=document.createElement("style"),o=t$3.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=e.cssText,s.appendChild(n);}));},c$2=e$7?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
+    const t$3=window,e$8=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$5=Symbol(),n$7=new WeakMap;class o$6{constructor(t,e,n){if(this._$cssResult$=!0,n!==s$5)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$8&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=n$7.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n$7.set(s,t));}return t}toString(){return this.cssText}}const r$3=t=>new o$6("string"==typeof t?t:t+"",void 0,s$5),i$4=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,s,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[n+1]),t[0]);return new o$6(n,t,s$5)},S$1=(s,n)=>{e$8?s.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((e=>{const n=document.createElement("style"),o=t$3.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=e.cssText,s.appendChild(n);}));},c$2=e$8?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
 
     /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
-     */var s$4;const e$6=window,r$2=e$6.trustedTypes,h$3=r$2?r$2.emptyScript:"",o$4=e$6.reactiveElementPolyfillSupport,n$5={toAttribute(t,i){switch(i){case Boolean:t=t?h$3:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},a$1=(t,i)=>i!==t&&(i==i||t==t),l$3={attribute:!0,type:String,converter:n$5,reflect:!1,hasChanged:a$1};class d$1 extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u();}static addInitializer(t){var i;null!==(i=this.h)&&void 0!==i||(this.h=[]),this.h.push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$3){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$3}static finalize(){if(this.hasOwnProperty("finalized"))return !1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(c$2(i));}else void 0!==i&&s.push(c$2(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return S$1(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$3){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n$5).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null;}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n$5;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a$1)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}}d$1.finalized=!0,d$1.elementProperties=new Map,d$1.elementStyles=[],d$1.shadowRootOptions={mode:"open"},null==o$4||o$4({ReactiveElement:d$1}),(null!==(s$4=e$6.reactiveElementVersions)&&void 0!==s$4?s$4:e$6.reactiveElementVersions=[]).push("1.4.1");
+     */var s$4;const e$7=window,r$2=e$7.trustedTypes,h$3=r$2?r$2.emptyScript:"",o$5=e$7.reactiveElementPolyfillSupport,n$6={toAttribute(t,i){switch(i){case Boolean:t=t?h$3:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},a$2=(t,i)=>i!==t&&(i==i||t==t),l$5={attribute:!0,type:String,converter:n$6,reflect:!1,hasChanged:a$2};class d$1 extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u();}static addInitializer(t){var i;null!==(i=this.h)&&void 0!==i||(this.h=[]),this.h.push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$5){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$5}static finalize(){if(this.hasOwnProperty("finalized"))return !1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(c$2(i));}else void 0!==i&&s.push(c$2(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return S$1(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$5){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n$6).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null;}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n$6;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a$2)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}}d$1.finalized=!0,d$1.elementProperties=new Map,d$1.elementStyles=[],d$1.shadowRootOptions={mode:"open"},null==o$5||o$5({ReactiveElement:d$1}),(null!==(s$4=e$7.reactiveElementVersions)&&void 0!==s$4?s$4:e$7.reactiveElementVersions=[]).push("1.4.1");
 
     /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-    var t$2;const i$2=window,s$3=i$2.trustedTypes,e$5=s$3?s$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,o$3=`lit$${(Math.random()+"").slice(9)}$`,n$4="?"+o$3,l$2=`<${n$4}>`,h$2=document,r$1=(t="")=>h$2.createComment(t),d=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,c$1=t=>u(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,a=/-->/g,f=/>/g,_=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),m=/'/g,p=/"/g,$=/^(?:script|style|textarea|title)$/i,g=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),y=g(1),x=Symbol.for("lit-noChange"),b=Symbol.for("lit-nothing"),T=new WeakMap,A=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new S(i.insertBefore(r$1(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l},E=h$2.createTreeWalker(h$2,129,null,!1),C=(t,i)=>{const s=t.length-1,n=[];let h,r=2===i?"<svg>":"",d=v;for(let i=0;i<s;i++){const s=t[i];let e,u,c=-1,g=0;for(;g<s.length&&(d.lastIndex=g,u=d.exec(s),null!==u);)g=d.lastIndex,d===v?"!--"===u[1]?d=a:void 0!==u[1]?d=f:void 0!==u[2]?($.test(u[2])&&(h=RegExp("</"+u[2],"g")),d=_):void 0!==u[3]&&(d=_):d===_?">"===u[0]?(d=null!=h?h:v,c=-1):void 0===u[1]?c=-2:(c=d.lastIndex-u[2].length,e=u[1],d=void 0===u[3]?_:'"'===u[3]?p:m):d===p||d===m?d=_:d===a||d===f?d=v:(d=_,h=void 0);const y=d===_&&t[i+1].startsWith("/>")?" ":"";r+=d===v?s+l$2:c>=0?(n.push(e),s.slice(0,c)+"$lit$"+s.slice(c)+o$3+y):s+o$3+(-2===c?(n.push(void 0),i):y);}const u=r+(t[s]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==e$5?e$5.createHTML(u):u,n]};class P{constructor({strings:t,_$litType$:i},e){let l;this.parts=[];let h=0,d=0;const u=t.length-1,c=this.parts,[v,a]=C(t,i);if(this.el=P.createElement(v,e),E.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=E.nextNode())&&c.length<u;){if(1===l.nodeType){if(l.hasAttributes()){const t=[];for(const i of l.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(o$3)){const s=a[d++];if(t.push(i),void 0!==s){const t=l.getAttribute(s.toLowerCase()+"$lit$").split(o$3),i=/([.?@])?(.*)/.exec(s);c.push({type:1,index:h,name:i[2],strings:t,ctor:"."===i[1]?R:"?"===i[1]?H:"@"===i[1]?I:M});}else c.push({type:6,index:h});}for(const i of t)l.removeAttribute(i);}if($.test(l.tagName)){const t=l.textContent.split(o$3),i=t.length-1;if(i>0){l.textContent=s$3?s$3.emptyScript:"";for(let s=0;s<i;s++)l.append(t[s],r$1()),E.nextNode(),c.push({type:2,index:++h});l.append(t[i],r$1());}}}else if(8===l.nodeType)if(l.data===n$4)c.push({type:2,index:h});else {let t=-1;for(;-1!==(t=l.data.indexOf(o$3,t+1));)c.push({type:7,index:h}),t+=o$3.length-1;}h++;}}static createElement(t,i){const s=h$2.createElement("template");return s.innerHTML=t,s}}function V(t,i,s=t,e){var o,n,l,h;if(i===x)return i;let r=void 0!==e?null===(o=s._$Cl)||void 0===o?void 0:o[e]:s._$Cu;const u=d(i)?void 0:i._$litDirective$;return (null==r?void 0:r.constructor)!==u&&(null===(n=null==r?void 0:r._$AO)||void 0===n||n.call(r,!1),void 0===u?r=void 0:(r=new u(t),r._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Cl)&&void 0!==l?l:h._$Cl=[])[e]=r:s._$Cu=r),void 0!==r&&(i=V(t,r._$AS(t,i.values),r,e)),i}class N{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:h$2).importNode(s,!0);E.currentNode=o;let n=E.nextNode(),l=0,r=0,d=e[0];for(;void 0!==d;){if(l===d.index){let i;2===d.type?i=new S(n,n.nextSibling,this,t):1===d.type?i=new d.ctor(n,d.name,d.strings,this,t):6===d.type&&(i=new L(n,this,t)),this.v.push(i),d=e[++r];}l!==(null==d?void 0:d.index)&&(n=E.nextNode(),l++);}return o}m(t){let i=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class S{constructor(t,i,s,e){var o;this.type=2,this._$AH=b,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$C_=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$C_}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=V(this,t,i),d(t)?t===b||null==t||""===t?(this._$AH!==b&&this._$AR(),this._$AH=b):t!==this._$AH&&t!==x&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):c$1(t)?this.O(t):this.$(t);}S(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t));}$(t){this._$AH!==b&&d(this._$AH)?this._$AA.nextSibling.data=t:this.k(h$2.createTextNode(t)),this._$AH=t;}T(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=P.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.m(s);else {const t=new N(o,this),i=t.p(this.options);t.m(s),this.k(i),this._$AH=t;}}_$AC(t){let i=T.get(t.strings);return void 0===i&&T.set(t.strings,i=new P(t)),i}O(t){u(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new S(this.S(r$1()),this.S(r$1()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$C_=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class M{constructor(t,i,s,e,o){this.type=1,this._$AH=b,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=b;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=V(this,t,i,0),n=!d(t)||t!==this._$AH&&t!==x,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=V(this,e[s+l],i,l),h===x&&(h=this._$AH[l]),n||(n=!d(h)||h!==this._$AH[l]),h===b?t=b:t!==b&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.P(t);}P(t){t===b?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class R extends M{constructor(){super(...arguments),this.type=3;}P(t){this.element[this.name]=t===b?void 0:t;}}const k=s$3?s$3.emptyScript:"";class H extends M{constructor(){super(...arguments),this.type=4;}P(t){t&&t!==b?this.element.setAttribute(this.name,k):this.element.removeAttribute(this.name);}}class I extends M{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=V(this,t,i,0))&&void 0!==s?s:b)===x)return;const e=this._$AH,o=t===b&&e!==b||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==b&&(e===b||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class L{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){V(this,t);}}const Z=i$2.litHtmlPolyfillSupport;null==Z||Z(P,S),(null!==(t$2=i$2.litHtmlVersions)&&void 0!==t$2?t$2:i$2.litHtmlVersions=[]).push("2.3.1");
+    var t$2;const i$3=window,s$3=i$3.trustedTypes,e$6=s$3?s$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,o$4=`lit$${(Math.random()+"").slice(9)}$`,n$5="?"+o$4,l$4=`<${n$5}>`,h$2=document,r$1=(t="")=>h$2.createComment(t),d=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,c$1=t=>u(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,a$1=/-->/g,f=/>/g,_=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),m=/'/g,p=/"/g,$=/^(?:script|style|textarea|title)$/i,g=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),y=g(1),x=Symbol.for("lit-noChange"),b=Symbol.for("lit-nothing"),T=new WeakMap,A=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new S(i.insertBefore(r$1(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l},E=h$2.createTreeWalker(h$2,129,null,!1),C=(t,i)=>{const s=t.length-1,n=[];let h,r=2===i?"<svg>":"",d=v;for(let i=0;i<s;i++){const s=t[i];let e,u,c=-1,g=0;for(;g<s.length&&(d.lastIndex=g,u=d.exec(s),null!==u);)g=d.lastIndex,d===v?"!--"===u[1]?d=a$1:void 0!==u[1]?d=f:void 0!==u[2]?($.test(u[2])&&(h=RegExp("</"+u[2],"g")),d=_):void 0!==u[3]&&(d=_):d===_?">"===u[0]?(d=null!=h?h:v,c=-1):void 0===u[1]?c=-2:(c=d.lastIndex-u[2].length,e=u[1],d=void 0===u[3]?_:'"'===u[3]?p:m):d===p||d===m?d=_:d===a$1||d===f?d=v:(d=_,h=void 0);const y=d===_&&t[i+1].startsWith("/>")?" ":"";r+=d===v?s+l$4:c>=0?(n.push(e),s.slice(0,c)+"$lit$"+s.slice(c)+o$4+y):s+o$4+(-2===c?(n.push(void 0),i):y);}const u=r+(t[s]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==e$6?e$6.createHTML(u):u,n]};class P{constructor({strings:t,_$litType$:i},e){let l;this.parts=[];let h=0,d=0;const u=t.length-1,c=this.parts,[v,a]=C(t,i);if(this.el=P.createElement(v,e),E.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=E.nextNode())&&c.length<u;){if(1===l.nodeType){if(l.hasAttributes()){const t=[];for(const i of l.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(o$4)){const s=a[d++];if(t.push(i),void 0!==s){const t=l.getAttribute(s.toLowerCase()+"$lit$").split(o$4),i=/([.?@])?(.*)/.exec(s);c.push({type:1,index:h,name:i[2],strings:t,ctor:"."===i[1]?R:"?"===i[1]?H:"@"===i[1]?I:M});}else c.push({type:6,index:h});}for(const i of t)l.removeAttribute(i);}if($.test(l.tagName)){const t=l.textContent.split(o$4),i=t.length-1;if(i>0){l.textContent=s$3?s$3.emptyScript:"";for(let s=0;s<i;s++)l.append(t[s],r$1()),E.nextNode(),c.push({type:2,index:++h});l.append(t[i],r$1());}}}else if(8===l.nodeType)if(l.data===n$5)c.push({type:2,index:h});else {let t=-1;for(;-1!==(t=l.data.indexOf(o$4,t+1));)c.push({type:7,index:h}),t+=o$4.length-1;}h++;}}static createElement(t,i){const s=h$2.createElement("template");return s.innerHTML=t,s}}function V(t,i,s=t,e){var o,n,l,h;if(i===x)return i;let r=void 0!==e?null===(o=s._$Cl)||void 0===o?void 0:o[e]:s._$Cu;const u=d(i)?void 0:i._$litDirective$;return (null==r?void 0:r.constructor)!==u&&(null===(n=null==r?void 0:r._$AO)||void 0===n||n.call(r,!1),void 0===u?r=void 0:(r=new u(t),r._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Cl)&&void 0!==l?l:h._$Cl=[])[e]=r:s._$Cu=r),void 0!==r&&(i=V(t,r._$AS(t,i.values),r,e)),i}class N{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:h$2).importNode(s,!0);E.currentNode=o;let n=E.nextNode(),l=0,r=0,d=e[0];for(;void 0!==d;){if(l===d.index){let i;2===d.type?i=new S(n,n.nextSibling,this,t):1===d.type?i=new d.ctor(n,d.name,d.strings,this,t):6===d.type&&(i=new L(n,this,t)),this.v.push(i),d=e[++r];}l!==(null==d?void 0:d.index)&&(n=E.nextNode(),l++);}return o}m(t){let i=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class S{constructor(t,i,s,e){var o;this.type=2,this._$AH=b,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$C_=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$C_}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=V(this,t,i),d(t)?t===b||null==t||""===t?(this._$AH!==b&&this._$AR(),this._$AH=b):t!==this._$AH&&t!==x&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):c$1(t)?this.O(t):this.$(t);}S(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t));}$(t){this._$AH!==b&&d(this._$AH)?this._$AA.nextSibling.data=t:this.k(h$2.createTextNode(t)),this._$AH=t;}T(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=P.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.m(s);else {const t=new N(o,this),i=t.p(this.options);t.m(s),this.k(i),this._$AH=t;}}_$AC(t){let i=T.get(t.strings);return void 0===i&&T.set(t.strings,i=new P(t)),i}O(t){u(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new S(this.S(r$1()),this.S(r$1()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$C_=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class M{constructor(t,i,s,e,o){this.type=1,this._$AH=b,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=b;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=V(this,t,i,0),n=!d(t)||t!==this._$AH&&t!==x,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=V(this,e[s+l],i,l),h===x&&(h=this._$AH[l]),n||(n=!d(h)||h!==this._$AH[l]),h===b?t=b:t!==b&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.P(t);}P(t){t===b?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class R extends M{constructor(){super(...arguments),this.type=3;}P(t){this.element[this.name]=t===b?void 0:t;}}const k=s$3?s$3.emptyScript:"";class H extends M{constructor(){super(...arguments),this.type=4;}P(t){t&&t!==b?this.element.setAttribute(this.name,k):this.element.removeAttribute(this.name);}}class I extends M{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=V(this,t,i,0))&&void 0!==s?s:b)===x)return;const e=this._$AH,o=t===b&&e!==b||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==b&&(e===b||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class L{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){V(this,t);}}const Z=i$3.litHtmlPolyfillSupport;null==Z||Z(P,S),(null!==(t$2=i$3.litHtmlVersions)&&void 0!==t$2?t$2:i$3.litHtmlVersions=[]).push("2.3.1");
 
     /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
-     */var l$1,o$2;class s$2 extends d$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=A(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return x}}s$2.finalized=!0,s$2._$litElement$=!0,null===(l$1=globalThis.litElementHydrateSupport)||void 0===l$1||l$1.call(globalThis,{LitElement:s$2});const n$3=globalThis.litElementPolyfillSupport;null==n$3||n$3({LitElement:s$2});(null!==(o$2=globalThis.litElementVersions)&&void 0!==o$2?o$2:globalThis.litElementVersions=[]).push("3.2.2");
+     */var l$3,o$3;class s$2 extends d$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=A(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return x}}s$2.finalized=!0,s$2._$litElement$=!0,null===(l$3=globalThis.litElementHydrateSupport)||void 0===l$3||l$3.call(globalThis,{LitElement:s$2});const n$4=globalThis.litElementPolyfillSupport;null==n$4||n$4({LitElement:s$2});(null!==(o$3=globalThis.litElementVersions)&&void 0!==o$3?o$3:globalThis.litElementVersions=[]).push("3.2.2");
 
     /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-    const e$4=e=>n=>"function"==typeof n?((e,n)=>(customElements.define(e,n),n))(e,n):((e,n)=>{const{kind:t,elements:s}=n;return {kind:t,elements:s,finisher(n){customElements.define(e,n);}}})(e,n);
+    const e$5=e=>n=>"function"==typeof n?((e,n)=>(customElements.define(e,n),n))(e,n):((e,n)=>{const{kind:t,elements:s}=n;return {kind:t,elements:s,finisher(n){customElements.define(e,n);}}})(e,n);
 
     /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-    const i$1=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i);}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this));},finisher(n){n.createProperty(e.key,i);}};function e$3(e){return (n,t)=>void 0!==t?((i,e,n)=>{e.constructor.createProperty(n,i);})(e,n,t):i$1(e,n)}
+    const i$2=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i);}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this));},finisher(n){n.createProperty(e.key,i);}};function e$4(e){return (n,t)=>void 0!==t?((i,e,n)=>{e.constructor.createProperty(n,i);})(e,n,t):i$2(e,n)}
 
     /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
-     */function t$1(t){return e$3({...t,state:!0})}
+     */function t$1(t){return e$4({...t,state:!0})}
 
     /**
      * @license
      * Copyright 2021 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
-     */var n$2;null!=(null===(n$2=window.HTMLSlotElement)||void 0===n$2?void 0:n$2.prototype.assignedElements)?(o,n)=>o.assignedElements(n):(o,n)=>o.assignedNodes(n).filter((o=>o.nodeType===Node.ELEMENT_NODE));
+     */var n$3;null!=(null===(n$3=window.HTMLSlotElement)||void 0===n$3?void 0:n$3.prototype.assignedElements)?(o,n)=>o.assignedElements(n):(o,n)=>o.assignedNodes(n).filter((o=>o.nodeType===Node.ELEMENT_NODE));
 
     /**
      * @license
@@ -83,7 +83,7 @@
      * SPDX-License-Identifier: BSD-3-Clause
      */console.warn("The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. See https://lit.dev/msg/deprecated-import-path for more information.");
 
-    var css_248z$7 = i$3`@charset "UTF-8";
+    var css_248z$7 = i$4`@charset "UTF-8";
 :root {
   --sgds-blue: #1f69ff;
   --sgds-purple: #5925DC;
@@ -7150,10 +7150,19 @@ a.trusted-websites-link:hover svg {
   }
 }`;
 
+    class SgdsElement extends s$2 {
+        /** Emits a custom event with more convenient defaults. */
+        emit(name, options) {
+            const event = new CustomEvent(name, Object.assign({ bubbles: true, cancelable: false, composed: true, detail: {} }, options));
+            this.dispatchEvent(event);
+            return event;
+        }
+    }
+
     /**
      * @property fluid - Include this attribute for full width container
      */
-    let MastheadElement = class MastheadElement extends s$2 {
+    let SgdsMasthead = class SgdsMasthead extends SgdsElement {
         constructor() {
             super(...arguments);
             this.fluid = false;
@@ -7326,18 +7335,43 @@ a.trusted-websites-link:hover svg {
     `;
         }
     };
-    MastheadElement.styles = css_248z$7;
+    SgdsMasthead.styles = css_248z$7;
     __decorate([
-        e$3({ type: Boolean, reflect: true })
-    ], MastheadElement.prototype, "fluid", void 0);
+        e$4({ type: Boolean, reflect: true })
+    ], SgdsMasthead.prototype, "fluid", void 0);
     __decorate([
         t$1()
-    ], MastheadElement.prototype, "toggleVisibility", void 0);
-    MastheadElement = __decorate([
-        e$4("masthead-element")
-    ], MastheadElement);
+    ], SgdsMasthead.prototype, "toggleVisibility", void 0);
+    SgdsMasthead = __decorate([
+        e$5("sgds-masthead")
+    ], SgdsMasthead);
+
+    /**
+     * @license
+     * Copyright 2020 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */const e$3=Symbol.for(""),l$2=t=>{if((null==t?void 0:t.r)===e$3)return null==t?void 0:t._$litStatic$},i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,l)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[l+1]),t[0]),r:e$3}),s$1=new Map,a=t=>(r,...e)=>{const o=e.length;let i,a;const n=[],u=[];let c,$=0,f=!1;for(;$<o;){for(c=r[$];$<o&&void 0!==(a=e[$],i=l$2(a));)c+=i+r[++$],f=!0;u.push(a),n.push(c),$++;}if($===o&&n.push(r[o]),f){const t=n.join("$$lit$$");void 0===(r=s$1.get(t))&&(n.raw=n,s$1.set(t,r=n)),e=u;}return t(r,...e)},n$2=a(y);
+
+    /**
+     * @license
+     * Copyright 2018 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */const l$1=l=>null!=l?l:b;
+
+    /**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+    const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$2=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+
+    /**
+     * @license
+     * Copyright 2018 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */const o$2=e$2(class extends i{constructor(t$1){var i;if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||(null===(i=t$1.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(i,[s]){var r,o;if(void 0===this.nt){this.nt=new Set,void 0!==i.strings&&(this.st=new Set(i.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in s)s[t]&&!(null===(r=this.st)||void 0===r?void 0:r.has(t))&&this.nt.add(t);return this.render(s)}const e=i.element.classList;this.nt.forEach((t=>{t in s||(e.remove(t),this.nt.delete(t));}));for(const t in s){const i=!!s[t];i===this.nt.has(t)||(null===(o=this.st)||void 0===o?void 0:o.has(t))||(i?(e.add(t),this.nt.add(t)):(e.remove(t),this.nt.delete(t)));}return x}});
 
-    var css_248z$6 = i$3`@charset "UTF-8";
+    var css_248z$6 = i$4`@charset "UTF-8";
 :root {
   --sgds-blue: #1f69ff;
   --sgds-purple: #5925DC;
@@ -13535,30 +13569,77 @@ a[target=_blank]:after {
   border-top-right-radius: 0;
 }`;
 
-    let ButtonElement = class ButtonElement extends s$2 {
+    let SgdsButton = class SgdsButton extends s$2 {
         constructor() {
             super(...arguments);
+            /** The button's variant. */
             this.variant = "primary";
-            this.classes = "";
+            /** Button active state */
+            this.active = false;
+            /** Button disabled state */
+            this.disabled = false;
+            this.type = 'button';
         }
         render() {
-            return y `
-      <button class="btn btn-${this.variant} ${this.classes}"><slot></slot></button>
+            const isLink = this.href;
+            const tag = isLink ? i$1 `a` : i$1 `button`;
+            return n$2 `
+      <${tag}
+        class="sgds btn ${o$2({
+            'disabled': isLink && this.disabled,
+            'active': this.active,
+            [`btn-${this.variant}`]: this.variant,
+            [`btn-${this.size}`]: this.size,
+            [`${this.buttonClasses}`]: this.buttonClasses
+        })}"
+        ?disabled=${l$1(isLink ? undefined : this.disabled)}
+        type=${l$1(isLink ? undefined : this.type)}
+        href=${l$1(isLink ? this.href : undefined)}
+        target=${l$1(isLink ? this.target : undefined)}
+        download=${l$1(isLink ? this.download : undefined)}
+        rel=${l$1(isLink && this.target === "_blank" ? 'noreferrer noopener' : undefined)}
+        role=${l$1(isLink ? 'button' : undefined)}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+      >
+        <slot></slot>
+      </${tag}>
     `;
         }
     };
-    ButtonElement.styles = css_248z$6;
+    SgdsButton.styles = css_248z$6;
+    __decorate([
+        e$4({ reflect: true })
+    ], SgdsButton.prototype, "variant", void 0);
+    __decorate([
+        e$4({ reflect: true })
+    ], SgdsButton.prototype, "buttonClasses", void 0);
+    __decorate([
+        e$4({ reflect: true })
+    ], SgdsButton.prototype, "size", void 0);
+    __decorate([
+        e$4({ type: Boolean, reflect: true })
+    ], SgdsButton.prototype, "active", void 0);
+    __decorate([
+        e$4({ type: Boolean, reflect: true })
+    ], SgdsButton.prototype, "disabled", void 0);
+    __decorate([
+        e$4()
+    ], SgdsButton.prototype, "type", void 0);
     __decorate([
-        e$3()
-    ], ButtonElement.prototype, "variant", void 0);
+        e$4()
+    ], SgdsButton.prototype, "href", void 0);
     __decorate([
-        e$3()
-    ], ButtonElement.prototype, "classes", void 0);
-    ButtonElement = __decorate([
-        e$4("button-element")
-    ], ButtonElement);
+        e$4()
+    ], SgdsButton.prototype, "target", void 0);
+    __decorate([
+        e$4({ reflect: true })
+    ], SgdsButton.prototype, "download", void 0);
+    SgdsButton = __decorate([
+        e$5("sgds-button")
+    ], SgdsButton);
 
-    var css_248z$5 = i$3`@charset "UTF-8";
+    var css_248z$5 = i$4`@charset "UTF-8";
 :root {
   --sgds-blue: #1f69ff;
   --sgds-purple: #5925DC;
@@ -20504,7 +20585,7 @@ a[target=_blank]:after {
   }
 }`;
 
-    let FooterElement = class FooterElement extends s$2 {
+    let SgdsFooter = class SgdsFooter extends SgdsElement {
         constructor() {
             super(...arguments);
             this.title = ``;
@@ -20591,82 +20672,41 @@ a[target=_blank]:after {
     `;
         }
     };
-    FooterElement.styles = css_248z$5;
+    SgdsFooter.styles = css_248z$5;
     __decorate([
-        e$3()
-    ], FooterElement.prototype, "title", void 0);
+        e$4()
+    ], SgdsFooter.prototype, "title", void 0);
     __decorate([
-        e$3()
-    ], FooterElement.prototype, "description", void 0);
+        e$4()
+    ], SgdsFooter.prototype, "description", void 0);
     __decorate([
-        e$3({
+        e$4({
             type: Array,
         })
-    ], FooterElement.prototype, "links", void 0);
-    __decorate([
-        e$3({ type: String })
-    ], FooterElement.prototype, "lastUpdatedDate", void 0);
+    ], SgdsFooter.prototype, "links", void 0);
     __decorate([
-        e$3({ type: String })
-    ], FooterElement.prototype, "contactHref", void 0);
+        e$4({ type: String })
+    ], SgdsFooter.prototype, "lastUpdatedDate", void 0);
     __decorate([
-        e$3({ type: String })
-    ], FooterElement.prototype, "feedbackHref", void 0);
+        e$4({ type: String })
+    ], SgdsFooter.prototype, "contactHref", void 0);
     __decorate([
-        e$3({ type: String })
-    ], FooterElement.prototype, "vulnerabilityHref", void 0);
+        e$4({ type: String })
+    ], SgdsFooter.prototype, "feedbackHref", void 0);
     __decorate([
-        e$3({ type: String })
-    ], FooterElement.prototype, "privacyHref", void 0);
+        e$4({ type: String })
+    ], SgdsFooter.prototype, "vulnerabilityHref", void 0);
     __decorate([
-        e$3({ type: String })
-    ], FooterElement.prototype, "termsOfUseHref", void 0);
-    FooterElement = __decorate([
-        e$4("footer-element")
-    ], FooterElement);
-
-    var css_248z$4 = i$3`ul {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  list-style: none;
-}`;
-
-    let SideNavElement = class SideNavElement extends s$2 {
-        constructor() {
-            super(...arguments);
-            this.alwaysOpen = false;
-        }
-        render() {
-            this.alwaysOpen
-                ? null
-                : this.addEventListener("toggle-onclick", (e) => {
-                    const children = this.querySelectorAll("sidenav-item");
-                    for (let i = 0; i < children.length; i++) {
-                        if (e.detail.index != i) {
-                            children[i].closeItem();
-                        }
-                    }
-                });
-            return y `
-      <nav class="sidenav" id="${this.id}">
-        <ul>
-          <slot></slot>
-        </ul>
-      </nav>
-    `;
-        }
-    };
-    SideNavElement.styles = css_248z$4;
+        e$4({ type: String })
+    ], SgdsFooter.prototype, "privacyHref", void 0);
     __decorate([
-        e$3({ type: Boolean, attribute: true })
-    ], SideNavElement.prototype, "alwaysOpen", void 0);
-    SideNavElement = __decorate([
-        e$4("sidenav-element")
-    ], SideNavElement);
+        e$4({ type: String })
+    ], SgdsFooter.prototype, "termsOfUseHref", void 0);
+    SgdsFooter = __decorate([
+        e$5("sgds-footer")
+    ], SgdsFooter);
 
-    var css_248z$3 = i$3`@charset "UTF-8";
-@import "~bootstrap-icons/font/fonts/bootstrap-icons.css";
+    var css_248z$4 = i$4`@charset "UTF-8";
 :root {
   --sgds-blue: #1f69ff;
   --sgds-purple: #5925DC;
@@ -22357,7 +22397,7 @@ a[target=_blank]:after {
   margin-left: 3.5rem !important;
 }
 
-.ms-auto, .sidenav-btn svg.bi-chevron-down {
+.ms-auto {
   margin-left: auto !important;
 }
 
@@ -26270,340 +26310,1002 @@ a[target=_blank]:after {
     display: none !important;
   }
 }
-.fade {
-  transition: opacity 0.15s linear;
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #0F71BB;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  .fade {
+  .nav-link {
     transition: none;
   }
 }
-.fade:not(.show) {
-  opacity: 0;
+.nav-link:hover, .nav-link:focus {
+  color: #0c5a96;
 }
-
-.collapse:not(.show) {
-  display: none;
+.nav-link.disabled {
+  color: #344054;
+  pointer-events: none;
+  cursor: default;
 }
 
-.collapsing {
-  height: 0;
-  overflow: hidden;
-  transition: height 0.35s ease;
+.nav-tabs {
+  border-bottom: 1px solid transparent;
 }
-@media (prefers-reduced-motion: reduce) {
-  .collapsing {
-    transition: none;
-  }
+.nav-tabs .nav-link {
+  margin-bottom: -1px;
+  background: none;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.3125rem;
+  border-top-right-radius: 0.3125rem;
 }
-.collapsing.collapse-horizontal {
-  width: 0;
-  height: auto;
-  transition: width 0.35s ease;
+.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
+  border-color: #E4E7EC #E4E7EC transparent;
+  isolation: isolate;
 }
-@media (prefers-reduced-motion: reduce) {
-  .collapsing.collapse-horizontal {
-    transition: none;
-  }
+.nav-tabs .nav-link.disabled {
+  color: #344054;
+  background-color: transparent;
+  border-color: transparent;
 }
-
-:host {
-  --sidenav-theme-color: #5925DC;
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  color: #1D2939;
+  background-color: #fff;
+  border-color: #D0D5DD #D0D5DD #fff;
+}
+.nav-tabs .dropdown-menu {
+  margin-top: -1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
-.sidenav-btn {
-  width: 100%;
-  text-align: initial;
-  line-height: 1.5rem;
-  font-size: 1rem;
+.nav-pills .nav-link {
+  background: none;
   border: 0;
-  background: 0;
-  padding: 0.5rem 1rem;
-  border-left: 0.125rem solid transparent;
-  border-radius: 0;
-  display: flex;
-  align-items: center;
+  border-radius: 0.3125rem;
 }
-.sidenav-btn.active, .sidenav-btn:hover {
-  color: var(--sidenav-theme-color);
-  border-left-color: var(--sidenav-theme-color);
-  font-weight: 700;
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #0F71BB;
 }
-.sidenav-btn svg.bi-chevron-down {
-  transition: all 0.3s ease-in-out;
-  transform: rotate(180deg);
+
+.nav-fill > .nav-link,
+.nav-fill .nav-item {
+  flex: 1 1 auto;
+  text-align: center;
 }
-.sidenav-btn:not(.active) svg.bi-chevron-down {
-  transform: rotate(0deg);
+
+.nav-justified > .nav-link,
+.nav-justified .nav-item {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
 }
 
-a.sidenav-btn {
-  color: inherit;
-  text-decoration: none;
-  line-height: 1.5rem;
+.nav-fill .nav-item .nav-link,
+.nav-justified .nav-item .nav-link {
+  width: 100%;
 }
 
-.sidenav-list {
-  list-style: none;
+.tab-content > .tab-pane {
+  display: none;
+}
+.tab-content > .active {
+  display: block;
+}
+
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+.navbar > .container-xxl, .navbar > .container-xl, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container,
+.navbar > .container-fluid {
+  display: flex;
+  flex-wrap: inherit;
+  align-items: center;
+  justify-content: space-between;
+}
+.navbar-brand {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  margin-right: 1rem;
+  font-size: 1.25rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.navbar-nav {
   display: flex;
   flex-direction: column;
   padding-left: 0;
-  margin: 0;
-  line-height: 2rem;
+  margin-bottom: 0;
+  list-style: none;
+}
+.navbar-nav .nav-link {
+  padding-right: 0;
+  padding-left: 0;
+}
+.navbar-nav .dropdown-menu {
+  position: static;
 }
 
-.collapse,
-.collapse.show,
-.collapsing {
-  margin-top: 1rem;
+.navbar-text {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
-::slotted(*[slot=title]) {
-  display: flex;
-  gap: 1rem;
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
   align-items: center;
-}`;
-
-    /**
-     * @license
-     * Copyright 2020 Google LLC
-     * SPDX-License-Identifier: BSD-3-Clause
-     */const e$2=o=>void 0===o.strings;
-
-    /**
-     * @license
-     * Copyright 2017 Google LLC
-     * SPDX-License-Identifier: BSD-3-Clause
-     */
-    const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
-
-    /**
-     * @license
-     * Copyright 2017 Google LLC
-     * SPDX-License-Identifier: BSD-3-Clause
-     */const s$1=(i,t)=>{var e,o;const r=i._$AN;if(void 0===r)return !1;for(const i of r)null===(o=(e=i)._$AO)||void 0===o||o.call(e,t,!1),s$1(i,t);return !0},o$1=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t;}while(0===(null==e?void 0:e.size))},r=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),l(t);}};function n$1(i){void 0!==this._$AN?(o$1(this),this._$AM=i,r(this)):this._$AM=i;}function h$1(i,t=!1,e=0){const r=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s$1(r[i],!1),o$1(r[i]);else null!=r&&(s$1(r,!1),o$1(r));else s$1(this,i);}const l=i=>{var t$1,s,o,r;i.type==t.CHILD&&(null!==(t$1=(o=i)._$AP)&&void 0!==t$1||(o._$AP=h$1),null!==(s=(r=i)._$AQ)&&void 0!==s||(r._$AQ=n$1));};class c extends i{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,e){super._$AT(i,t,e),r(this),this.isConnected=i._$AU;}_$AO(i,t=!0){var e,r;i!==this.isConnected&&(this.isConnected=i,i?null===(e=this.reconnected)||void 0===e||e.call(this):null===(r=this.disconnected)||void 0===r||r.call(this)),t&&(s$1(this,i),o$1(this));}setValue(t){if(e$2(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}}
-
-    /**
-     * @license
-     * Copyright 2020 Google LLC
-     * SPDX-License-Identifier: BSD-3-Clause
-     */const e=()=>new o;class o{}const h=new WeakMap,n=e$1(class extends c{render(t){return b}update(t,[s]){var e;const o=s!==this.Y;return o&&void 0!==this.Y&&this.rt(void 0),(o||this.lt!==this.dt)&&(this.Y=s,this.ct=null===(e=t.options)||void 0===e?void 0:e.host,this.rt(this.dt=t.element)),b}rt(i){var t;if("function"==typeof this.Y){const s=null!==(t=this.ct)&&void 0!==t?t:globalThis;let e=h.get(s);void 0===e&&(e=new WeakMap,h.set(s,e)),void 0!==e.get(this.Y)&&this.Y.call(this.ct,void 0),e.set(this.Y,i),void 0!==i&&this.Y.call(this.ct,i);}else this.Y.value=i;}get lt(){var i,t,s;return "function"==typeof this.Y?null===(t=h.get(null!==(i=this.ct)&&void 0!==i?i:globalThis))||void 0===t?void 0:t.get(this.Y):null===(s=this.Y)||void 0===s?void 0:s.value}disconnected(){this.lt===this.dt&&this.rt(void 0);}reconnected(){this.rt(this.dt);}});
-
-    var top = 'top';
-    var bottom = 'bottom';
-    var right = 'right';
-    var left = 'left';
-    var auto = 'auto';
-    var basePlacements = [top, bottom, right, left];
-    var start = 'start';
-    var end = 'end';
-    var clippingParents = 'clippingParents';
-    var viewport = 'viewport';
-    var popper = 'popper';
-    var reference = 'reference';
-    var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
-      return acc.concat([placement + "-" + start, placement + "-" + end]);
-    }, []);
-    var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
-      return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
-    }, []); // modifiers that need to read the DOM
-
-    var beforeRead = 'beforeRead';
-    var read = 'read';
-    var afterRead = 'afterRead'; // pure-logic modifiers
-
-    var beforeMain = 'beforeMain';
-    var main = 'main';
-    var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
-
-    var beforeWrite = 'beforeWrite';
-    var write = 'write';
-    var afterWrite = 'afterWrite';
-    var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
-
-    function getNodeName(element) {
-      return element ? (element.nodeName || '').toLowerCase() : null;
-    }
-
-    function getWindow(node) {
-      if (node == null) {
-        return window;
-      }
-
-      if (node.toString() !== '[object Window]') {
-        var ownerDocument = node.ownerDocument;
-        return ownerDocument ? ownerDocument.defaultView || window : window;
-      }
-
-      return node;
-    }
-
-    function isElement$1(node) {
-      var OwnElement = getWindow(node).Element;
-      return node instanceof OwnElement || node instanceof Element;
-    }
-
-    function isHTMLElement(node) {
-      var OwnElement = getWindow(node).HTMLElement;
-      return node instanceof OwnElement || node instanceof HTMLElement;
-    }
-
-    function isShadowRoot(node) {
-      // IE 11 has no ShadowRoot
-      if (typeof ShadowRoot === 'undefined') {
-        return false;
-      }
-
-      var OwnElement = getWindow(node).ShadowRoot;
-      return node instanceof OwnElement || node instanceof ShadowRoot;
-    }
-
-    // and applies them to the HTMLElements such as popper and arrow
-
-    function applyStyles(_ref) {
-      var state = _ref.state;
-      Object.keys(state.elements).forEach(function (name) {
-        var style = state.styles[name] || {};
-        var attributes = state.attributes[name] || {};
-        var element = state.elements[name]; // arrow is optional + virtual elements
-
-        if (!isHTMLElement(element) || !getNodeName(element)) {
-          return;
-        } // Flow doesn't support to extend this property, but it's the most
-        // effective way to apply styles to an HTMLElement
-        // $FlowFixMe[cannot-write]
-
-
-        Object.assign(element.style, style);
-        Object.keys(attributes).forEach(function (name) {
-          var value = attributes[name];
-
-          if (value === false) {
-            element.removeAttribute(name);
-          } else {
-            element.setAttribute(name, value === true ? '' : value);
-          }
-        });
-      });
-    }
-
-    function effect$2(_ref2) {
-      var state = _ref2.state;
-      var initialStyles = {
-        popper: {
-          position: state.options.strategy,
-          left: '0',
-          top: '0',
-          margin: '0'
-        },
-        arrow: {
-          position: 'absolute'
-        },
-        reference: {}
-      };
-      Object.assign(state.elements.popper.style, initialStyles.popper);
-      state.styles = initialStyles;
-
-      if (state.elements.arrow) {
-        Object.assign(state.elements.arrow.style, initialStyles.arrow);
-      }
-
-      return function () {
-        Object.keys(state.elements).forEach(function (name) {
-          var element = state.elements[name];
-          var attributes = state.attributes[name] || {};
-          var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
-
-          var style = styleProperties.reduce(function (style, property) {
-            style[property] = '';
-            return style;
-          }, {}); // arrow is optional + virtual elements
-
-          if (!isHTMLElement(element) || !getNodeName(element)) {
-            return;
-          }
-
-          Object.assign(element.style, style);
-          Object.keys(attributes).forEach(function (attribute) {
-            element.removeAttribute(attribute);
-          });
-        });
-      };
-    } // eslint-disable-next-line import/no-unused-modules
-
-
-    var applyStyles$1 = {
-      name: 'applyStyles',
-      enabled: true,
-      phase: 'write',
-      fn: applyStyles,
-      effect: effect$2,
-      requires: ['computeStyles']
-    };
-
-    function getBasePlacement(placement) {
-      return placement.split('-')[0];
-    }
-
-    var max = Math.max;
-    var min = Math.min;
-    var round = Math.round;
-
-    function getUAString() {
-      var uaData = navigator.userAgentData;
-
-      if (uaData != null && uaData.brands) {
-        return uaData.brands.map(function (item) {
-          return item.brand + "/" + item.version;
-        }).join(' ');
-      }
-
-      return navigator.userAgent;
-    }
-
-    function isLayoutViewport() {
-      return !/^((?!chrome|android).)*safari/i.test(getUAString());
-    }
-
-    function getBoundingClientRect(element, includeScale, isFixedStrategy) {
-      if (includeScale === void 0) {
-        includeScale = false;
-      }
-
-      if (isFixedStrategy === void 0) {
-        isFixedStrategy = false;
-      }
-
-      var clientRect = element.getBoundingClientRect();
-      var scaleX = 1;
-      var scaleY = 1;
+}
 
-      if (includeScale && isHTMLElement(element)) {
-        scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
-        scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
-      }
+.navbar-toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.3125rem;
+  transition: box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .navbar-toggler {
+    transition: none;
+  }
+}
+.navbar-toggler:hover {
+  text-decoration: none;
+}
+.navbar-toggler:focus {
+  text-decoration: none;
+  outline: 0;
+  box-shadow: 0 0 0 0.125rem;
+}
 
-      var _ref = isElement$1(element) ? getWindow(element) : window,
-          visualViewport = _ref.visualViewport;
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
 
-      var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
-      var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
-      var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
-      var width = clientRect.width / scaleX;
-      var height = clientRect.height / scaleY;
-      return {
-        width: width,
-        height: height,
-        top: y,
-        right: x + width,
-        bottom: y + height,
-        left: x,
-        x: x,
-        y: y
-      };
-    }
+.navbar-nav-scroll {
+  max-height: var(--sgds-scroll-height, 75vh);
+  overflow-y: auto;
+}
 
-    // means it doesn't take into account transforms.
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-sm .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-sm .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-sm .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-sm .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
+  }
+  .navbar-expand-sm .offcanvas-top,
+.navbar-expand-sm .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
+  }
+  .navbar-expand-sm .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+@media (min-width: 768px) {
+  .navbar-expand-md {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-md .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-md .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-md .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-md .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-md .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-md .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-md .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
+  }
+  .navbar-expand-md .offcanvas-top,
+.navbar-expand-md .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
+  }
+  .navbar-expand-md .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+@media (min-width: 992px) {
+  .navbar-expand-lg {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-lg .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-lg .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-lg .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-lg .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-lg .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-lg .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
+  }
+  .navbar-expand-lg .offcanvas-top,
+.navbar-expand-lg .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
+  }
+  .navbar-expand-lg .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+@media (min-width: 1200px) {
+  .navbar-expand-xl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xl .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-xl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-xl .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-xl .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-xl .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
+  }
+  .navbar-expand-xl .offcanvas-top,
+.navbar-expand-xl .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
+  }
+  .navbar-expand-xl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+@media (min-width: 1400px) {
+  .navbar-expand-xxl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xxl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xxl .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-xxl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xxl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-xxl .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
+  }
+  .navbar-expand-xxl .offcanvas-top,
+.navbar-expand-xxl .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
+  }
+  .navbar-expand-xxl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+.navbar-expand {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+.navbar-expand .navbar-nav {
+  flex-direction: row;
+}
+.navbar-expand .navbar-nav .dropdown-menu {
+  position: absolute;
+}
+.navbar-expand .navbar-nav .nav-link {
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+.navbar-expand .navbar-nav-scroll {
+  overflow: visible;
+}
+.navbar-expand .navbar-collapse {
+  display: flex !important;
+  flex-basis: auto;
+}
+.navbar-expand .navbar-toggler {
+  display: none;
+}
+.navbar-expand .offcanvas-header {
+  display: none;
+}
+.navbar-expand .offcanvas {
+  position: inherit;
+  bottom: 0;
+  z-index: 1000;
+  flex-grow: 1;
+  visibility: visible !important;
+  background-color: transparent;
+  border-right: 0;
+  border-left: 0;
+  transition: none;
+  transform: none;
+}
+.navbar-expand .offcanvas-top,
+.navbar-expand .offcanvas-bottom {
+  height: auto;
+  border-top: 0;
+  border-bottom: 0;
+}
+.navbar-expand .offcanvas-body {
+  display: flex;
+  flex-grow: 0;
+  padding: 0;
+  overflow-y: visible;
+}
+
+.navbar-light .navbar-brand {
+  color: rgba(0, 0, 0, 0.9);
+}
+.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
+  color: rgba(0, 0, 0, 0.9);
+}
+.navbar-light .navbar-nav .nav-link {
+  color: rgba(0, 0, 0, 0.55);
+}
+.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
+  color: rgba(0, 0, 0, 0.7);
+}
+.navbar-light .navbar-nav .nav-link.disabled {
+  color: rgba(0, 0, 0, 0.3);
+}
+.navbar-light .navbar-nav .show > .nav-link,
+.navbar-light .navbar-nav .nav-link.active {
+  color: rgba(0, 0, 0, 0.9);
+}
+.navbar-light .navbar-toggler {
+  color: rgba(0, 0, 0, 0.55);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.navbar-light .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-light .navbar-text {
+  color: rgba(0, 0, 0, 0.55);
+}
+.navbar-light .navbar-text a,
+.navbar-light .navbar-text a:hover,
+.navbar-light .navbar-text a:focus {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.navbar-dark .navbar-brand {
+  color: #fff;
+}
+.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
+  color: #fff;
+}
+.navbar-dark .navbar-nav .nav-link {
+  color: rgba(255, 255, 255, 0.55);
+}
+.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
+  color: rgba(255, 255, 255, 0.75);
+}
+.navbar-dark .navbar-nav .nav-link.disabled {
+  color: rgba(255, 255, 255, 0.25);
+}
+.navbar-dark .navbar-nav .show > .nav-link,
+.navbar-dark .navbar-nav .nav-link.active {
+  color: #fff;
+}
+.navbar-dark .navbar-toggler {
+  color: rgba(255, 255, 255, 0.55);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.navbar-dark .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-dark .navbar-text {
+  color: rgba(255, 255, 255, 0.55);
+}
+.navbar-dark .navbar-text a,
+.navbar-dark .navbar-text a:hover,
+.navbar-dark .navbar-text a:focus {
+  color: #fff;
+}
+
+.sgds.navbar {
+  padding: 0 calc(2rem) 0;
+  min-height: 80px;
+  align-items: stretch;
+}
+@media (max-width: 991.98px) {
+  .sgds.navbar {
+    padding: 0 1rem 0;
+    overflow-x: scroll;
+  }
+}
+.sgds.navbar a.navbar-brand {
+  display: flex;
+  align-items: center;
+  padding-bottom: 0.125rem;
+}
+.sgds.navbar .navbar-collapse {
+  align-items: stretch;
+}
+.sgds.navbar .nav-item.has-megamenu {
+  position: static;
+}
+.sgds.navbar .nav-item a.nav-link {
+  color: #344054;
+  border-bottom: 0.125rem solid transparent;
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+}
+.sgds.navbar .nav-item a.nav-link.active, .sgds.navbar .nav-item a.nav-link:hover {
+  color: #5925DC;
+  border-color: #5925DC;
+}
+.sgds.navbar .nav-item a.nav-link.dropdown-toggle {
+  gap: 0.75rem;
+}
+.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show {
+  color: #5925DC;
+  border-bottom: 0.125rem solid #5925DC;
+}
+.sgds.navbar .dropdown-menu {
+  margin-top: 0;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 5px 5px;
+  background-color: #fff;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+.sgds.navbar .dropdown-menu.megamenu {
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
+.offcanvas {
+  position: fixed;
+  bottom: 0;
+  z-index: 1045;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  visibility: hidden;
+  background-color: #fff;
+  background-clip: padding-box;
+  outline: 0;
+  transition: transform 0.3s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .offcanvas {
+    transition: none;
+  }
+}
+
+.offcanvas-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+}
+.offcanvas-backdrop.fade {
+  opacity: 0;
+}
+.offcanvas-backdrop.show {
+  opacity: 0.5;
+}
+
+.offcanvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 1.5rem;
+}
+.offcanvas-header .btn-close {
+  padding: 0.75rem 0.75rem;
+  margin-top: -0.75rem;
+  margin-right: -0.75rem;
+  margin-bottom: -0.75rem;
+}
+
+.offcanvas-title {
+  margin-bottom: 0;
+  line-height: 2;
+}
+
+.offcanvas-body {
+  flex-grow: 1;
+  padding: 1.5rem 1.5rem;
+  overflow-y: auto;
+}
+
+.offcanvas-start {
+  top: 0;
+  left: 0;
+  width: 400px;
+  border-right: 1px solid #98A2B3;
+  transform: translateX(-100%);
+}
+
+.offcanvas-end {
+  top: 0;
+  right: 0;
+  width: 400px;
+  border-left: 1px solid #98A2B3;
+  transform: translateX(100%);
+}
+
+.offcanvas-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 30vh;
+  max-height: 100%;
+  border-bottom: 1px solid #98A2B3;
+  transform: translateY(-100%);
+}
+
+.offcanvas-bottom {
+  right: 0;
+  left: 0;
+  height: 30vh;
+  max-height: 100%;
+  border-top: 1px solid #98A2B3;
+  transform: translateY(100%);
+}
+
+.offcanvas.show {
+  transform: none;
+}
+
+.navbar-nav {
+  display: flex;
+  align-self: center;
+  gap: 1rem;
+  height: 100%;
+  margin-left: 1rem;
+}
+
+.navbar-toggler {
+  border: none;
+}
+
+.navbar-toggler:focus {
+  box-shadow: none;
+}
+
+slot[name=non-collapsible] {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}`;
+
+    var top = 'top';
+    var bottom = 'bottom';
+    var right = 'right';
+    var left = 'left';
+    var auto = 'auto';
+    var basePlacements = [top, bottom, right, left];
+    var start = 'start';
+    var end = 'end';
+    var clippingParents = 'clippingParents';
+    var viewport = 'viewport';
+    var popper = 'popper';
+    var reference = 'reference';
+    var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
+      return acc.concat([placement + "-" + start, placement + "-" + end]);
+    }, []);
+    var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
+      return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
+    }, []); // modifiers that need to read the DOM
+
+    var beforeRead = 'beforeRead';
+    var read = 'read';
+    var afterRead = 'afterRead'; // pure-logic modifiers
+
+    var beforeMain = 'beforeMain';
+    var main = 'main';
+    var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+
+    var beforeWrite = 'beforeWrite';
+    var write = 'write';
+    var afterWrite = 'afterWrite';
+    var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
+
+    function getNodeName(element) {
+      return element ? (element.nodeName || '').toLowerCase() : null;
+    }
+
+    function getWindow(node) {
+      if (node == null) {
+        return window;
+      }
+
+      if (node.toString() !== '[object Window]') {
+        var ownerDocument = node.ownerDocument;
+        return ownerDocument ? ownerDocument.defaultView || window : window;
+      }
+
+      return node;
+    }
+
+    function isElement$1(node) {
+      var OwnElement = getWindow(node).Element;
+      return node instanceof OwnElement || node instanceof Element;
+    }
+
+    function isHTMLElement(node) {
+      var OwnElement = getWindow(node).HTMLElement;
+      return node instanceof OwnElement || node instanceof HTMLElement;
+    }
+
+    function isShadowRoot(node) {
+      // IE 11 has no ShadowRoot
+      if (typeof ShadowRoot === 'undefined') {
+        return false;
+      }
+
+      var OwnElement = getWindow(node).ShadowRoot;
+      return node instanceof OwnElement || node instanceof ShadowRoot;
+    }
+
+    // and applies them to the HTMLElements such as popper and arrow
+
+    function applyStyles(_ref) {
+      var state = _ref.state;
+      Object.keys(state.elements).forEach(function (name) {
+        var style = state.styles[name] || {};
+        var attributes = state.attributes[name] || {};
+        var element = state.elements[name]; // arrow is optional + virtual elements
+
+        if (!isHTMLElement(element) || !getNodeName(element)) {
+          return;
+        } // Flow doesn't support to extend this property, but it's the most
+        // effective way to apply styles to an HTMLElement
+        // $FlowFixMe[cannot-write]
+
+
+        Object.assign(element.style, style);
+        Object.keys(attributes).forEach(function (name) {
+          var value = attributes[name];
+
+          if (value === false) {
+            element.removeAttribute(name);
+          } else {
+            element.setAttribute(name, value === true ? '' : value);
+          }
+        });
+      });
+    }
+
+    function effect$2(_ref2) {
+      var state = _ref2.state;
+      var initialStyles = {
+        popper: {
+          position: state.options.strategy,
+          left: '0',
+          top: '0',
+          margin: '0'
+        },
+        arrow: {
+          position: 'absolute'
+        },
+        reference: {}
+      };
+      Object.assign(state.elements.popper.style, initialStyles.popper);
+      state.styles = initialStyles;
+
+      if (state.elements.arrow) {
+        Object.assign(state.elements.arrow.style, initialStyles.arrow);
+      }
+
+      return function () {
+        Object.keys(state.elements).forEach(function (name) {
+          var element = state.elements[name];
+          var attributes = state.attributes[name] || {};
+          var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
+
+          var style = styleProperties.reduce(function (style, property) {
+            style[property] = '';
+            return style;
+          }, {}); // arrow is optional + virtual elements
+
+          if (!isHTMLElement(element) || !getNodeName(element)) {
+            return;
+          }
+
+          Object.assign(element.style, style);
+          Object.keys(attributes).forEach(function (attribute) {
+            element.removeAttribute(attribute);
+          });
+        });
+      };
+    } // eslint-disable-next-line import/no-unused-modules
+
+
+    var applyStyles$1 = {
+      name: 'applyStyles',
+      enabled: true,
+      phase: 'write',
+      fn: applyStyles,
+      effect: effect$2,
+      requires: ['computeStyles']
+    };
+
+    function getBasePlacement(placement) {
+      return placement.split('-')[0];
+    }
+
+    var max = Math.max;
+    var min = Math.min;
+    var round = Math.round;
+
+    function getUAString() {
+      var uaData = navigator.userAgentData;
+
+      if (uaData != null && uaData.brands) {
+        return uaData.brands.map(function (item) {
+          return item.brand + "/" + item.version;
+        }).join(' ');
+      }
+
+      return navigator.userAgent;
+    }
+
+    function isLayoutViewport() {
+      return !/^((?!chrome|android).)*safari/i.test(getUAString());
+    }
+
+    function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+      if (includeScale === void 0) {
+        includeScale = false;
+      }
+
+      if (isFixedStrategy === void 0) {
+        isFixedStrategy = false;
+      }
+
+      var clientRect = element.getBoundingClientRect();
+      var scaleX = 1;
+      var scaleY = 1;
+
+      if (includeScale && isHTMLElement(element)) {
+        scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+        scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+      }
+
+      var _ref = isElement$1(element) ? getWindow(element) : window,
+          visualViewport = _ref.visualViewport;
+
+      var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+      var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+      var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+      var width = clientRect.width / scaleX;
+      var height = clientRect.height / scaleY;
+      return {
+        width: width,
+        height: height,
+        top: y,
+        right: x + width,
+        bottom: y + height,
+        left: x,
+        x: x,
+        y: y
+      };
+    }
+
+    // means it doesn't take into account transforms.
 
     function getLayoutRect(element) {
       var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
@@ -33407,142 +34109,173 @@ a.sidenav-btn {
 
     defineJQueryPlugin(Toast);
 
+    /**
+     * @license
+     * Copyright 2020 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */const e$1=o=>void 0===o.strings;
+
+    /**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */const s=(i,t)=>{var e,o;const r=i._$AN;if(void 0===r)return !1;for(const i of r)null===(o=(e=i)._$AO)||void 0===o||o.call(e,t,!1),s(i,t);return !0},o$1=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t;}while(0===(null==e?void 0:e.size))},r=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),l(t);}};function n$1(i){void 0!==this._$AN?(o$1(this),this._$AM=i,r(this)):this._$AM=i;}function h$1(i,t=!1,e=0){const r=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s(r[i],!1),o$1(r[i]);else null!=r&&(s(r,!1),o$1(r));else s(this,i);}const l=i=>{var t$1,s,o,r;i.type==t.CHILD&&(null!==(t$1=(o=i)._$AP)&&void 0!==t$1||(o._$AP=h$1),null!==(s=(r=i)._$AQ)&&void 0!==s||(r._$AQ=n$1));};class c extends i{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,e){super._$AT(i,t,e),r(this),this.isConnected=i._$AU;}_$AO(i,t=!0){var e,r;i!==this.isConnected&&(this.isConnected=i,i?null===(e=this.reconnected)||void 0===e||e.call(this):null===(r=this.disconnected)||void 0===r||r.call(this)),t&&(s(this,i),o$1(this));}setValue(t){if(e$1(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}}
+
+    /**
+     * @license
+     * Copyright 2020 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */const e=()=>new o;class o{}const h=new WeakMap,n=e$2(class extends c{render(t){return b}update(t,[s]){var e;const o=s!==this.Y;return o&&void 0!==this.Y&&this.rt(void 0),(o||this.lt!==this.dt)&&(this.Y=s,this.ct=null===(e=t.options)||void 0===e?void 0:e.host,this.rt(this.dt=t.element)),b}rt(i){var t;if("function"==typeof this.Y){const s=null!==(t=this.ct)&&void 0!==t?t:globalThis;let e=h.get(s);void 0===e&&(e=new WeakMap,h.set(s,e)),void 0!==e.get(this.Y)&&this.Y.call(this.ct,void 0),e.set(this.Y,i),void 0!==i&&this.Y.call(this.ct,i);}else this.Y.value=i;}get lt(){var i,t,s;return "function"==typeof this.Y?null===(t=h.get(null!==(i=this.ct)&&void 0!==i?i:globalThis))||void 0===t?void 0:t.get(this.Y):null===(s=this.Y)||void 0===s?void 0:s.value}disconnected(){this.lt===this.dt&&this.rt(void 0);}reconnected(){this.rt(this.dt);}});
+
     function genId (componentName = '', elementName = '') {
         return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
     }
 
-    let SideNavItem = class SideNavItem extends s$2 {
+    const SM_BREAKPOINT = 576;
+    const MD_BREAKPOINT = 768;
+    const LG_BREAKPOINT = 992;
+    const XL_BREAKPOINT = 1200;
+    const XXL_BREAKPOINT = 1400;
+
+    const SIZES = {
+        sm: SM_BREAKPOINT,
+        md: MD_BREAKPOINT,
+        lg: LG_BREAKPOINT,
+        xl: XL_BREAKPOINT,
+        XXL: XXL_BREAKPOINT,
+        never: Infinity,
+        always: -1,
+    };
+    let SgdsMainnav = class SgdsMainnav extends SgdsElement {
         constructor() {
-            super(...arguments);
+            super();
             this.myCollapse = e();
             this.bsCollapse = null;
-            /**  when true, toggles the sidenav-item to open on first load and
-             * set the active stylings.
-             */
-            this.active = false;
-            this.href = "";
-            this.collapseId = genId('sidenav', 'collapse');
-            this.buttonId = genId('sidenav', 'button');
-            this.index = "-1";
-        }
-        _onClick() {
-            const event = new CustomEvent("toggle-onclick", {
-                bubbles: true,
-                composed: true,
-                detail: { index: this.index },
+            // TODO: stylings and slots are incomplete for offcanvas mode
+            this.myOffcanvas = e();
+            this.bsOffcanvas = null;
+            this.brandHref = "";
+            this.collapseId = genId("mainnav", "collapse");
+            this.expand = "lg";
+            this.mode = "default";
+            this.breakpointReached = false;
+            this.expanded = false;
+            window.addEventListener("resize", () => {
+                const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand.toString()];
+                if (newBreakpointReachedValue !== this.breakpointReached) {
+                    this.requestUpdate();
+                }
             });
-            this.dispatchEvent(event);
         }
         _onClickButton() {
-            this._onClick();
-            if (this.bsCollapse) {
-                this.bsCollapse.toggle();
+            if (this.mode === "offcanvas") {
+                return this.bsOffcanvas.toggle();
             }
-        }
-        _onClickLink() {
-            this._onClick();
-            this.active = true;
-        }
-        /**
-         * closeItem - closes sidenav and inactivates it
-         */
-        closeItem() {
-            this.active = false;
-            if (this.bsCollapse)
-                this.bsCollapse.hide();
-        }
-        /**
-         * openItem
-         */
-        openItem() {
-            this.active = true;
-            if (this.bsCollapse)
-                this.bsCollapse.show();
+            this.bsCollapse.toggle();
         }
         firstUpdated() {
-            // if sidenav has menu, initialise bootstrap collapse
-            if (!this.href) {
+            if (this.mode === "default") {
                 this.bsCollapse = new Collapse(this.myCollapse.value, {
-                    toggle: this.active,
+                    toggle: false,
                 });
                 this.myCollapse.value.addEventListener("show.bs.collapse", () => {
-                    this.active = true;
+                    this.expanded = true;
                 });
                 this.myCollapse.value.addEventListener("shown.bs.collapse", () => {
-                    this.active = true;
+                    this.expanded = true;
                 });
                 this.myCollapse.value.addEventListener("hide.bs.collapse", () => {
-                    this.active = false;
+                    this.expanded = false;
                 });
                 this.myCollapse.value.addEventListener("hidden.bs.collapse", () => {
-                    this.active = false;
+                    this.expanded = false;
+                });
+            }
+            if (this.mode === "offcanvas") {
+                this.bsOffcanvas = new Offcanvas(this.myOffcanvas.value);
+                //add esc keyboard event for bsOffcanvas
+                this.addEventListener("keydown", (ev) => {
+                    if (ev.key === "Escape") {
+                        this.bsOffcanvas.hide();
+                    }
                 });
             }
         }
         render() {
-            const withMenuTemplate = y ` <button
-        @click=${() => this._onClickButton()}
-        class="collapsed sidenav-btn ${this.active ? "active" : null}"
-        aria-expanded="${this.active}" 
-        aria-controls="${this.collapseId}"
-        aria-selected="${this.active}"
-        id="${this.buttonId}"
+            this.breakpointReached = window.innerWidth < SIZES[this.expand.toString()];
+            const collapseClass = "collapse navbar-collapse order-4";
+            const offcanvasClass = "offcanvas offcanvas-start order-4";
+            return y `
+      <nav
+        class="sgds navbar navbar-light
+        ${this._expandClass()}"
       >
-        <slot name="title"></slot>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          class="bi bi-chevron-down"
-          viewBox="0 0 16 16"
+        <a class="navbar-brand me-auto order-1" href=${this.brandHref}>
+          <slot name="brand"></slot>
+        </a>
+        <slot
+          name="non-collapsible"
+          class="${this.breakpointReached ? "order-2" : "order-5"}"
+        ></slot>
+        <button
+          class="navbar-toggler order-3"
+          type="button"
+          @click=${() => this._onClickButton()}
+          aria-controls="${this.collapseId}"
+          aria-expanded="${this.expanded}"
+          aria-label="Toggle navigation"
         >
-          <path
-            fill-rule="evenodd"
-            d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
-          />
-        </svg>
-      </button>
-      <div class="collapse" ${n(this.myCollapse)} id="${this.collapseId}">
-        <ul class="sidenav-list" aria-labelledby="${this.buttonId}">
-          <slot></slot>
-        </ul>
-      </div>`;
-            const noMenuTemplate = y `
-      <a
-        href=${this.href}
-        @click=${() => this._onClickLink()}
-        class="sidenav-btn ${this.active ? "active" : null}"
-        aria-selected="${this.active}"
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div
+          class=${this.mode === "default" ? collapseClass : offcanvasClass}
+          ${this.mode === "default"
+            ? n(this.myCollapse)
+            : n(this.myOffcanvas)}
+          id=${this.collapseId}
         >
-        <slot name="title"></slot>
-      </a>
-    `;
-            return y `
-      <li class="sidenav-item" aria-haspopup="${!this.href}">
-        ${this.href ? noMenuTemplate : withMenuTemplate}
-      </li>
+          <ul class="navbar-nav">
+            <slot></slot>
+          </ul>
+        </div>
+      </nav>
     `;
         }
+        _expandClass() {
+            switch (this.expand) {
+                case "always":
+                    return "navbar-expand";
+                case "never":
+                    break;
+                default:
+                    return `navbar-expand-${this.expand}`;
+            }
+        }
     };
-    SideNavItem.styles = css_248z$3;
+    SgdsMainnav.styles = css_248z$4;
+    __decorate([
+        e$4({ type: String })
+    ], SgdsMainnav.prototype, "brandHref", void 0);
     __decorate([
-        e$3({ type: Boolean })
-    ], SideNavItem.prototype, "active", void 0);
+        e$4({ type: String })
+    ], SgdsMainnav.prototype, "collapseId", void 0);
     __decorate([
-        e$3({ type: String })
-    ], SideNavItem.prototype, "href", void 0);
+        e$4()
+    ], SgdsMainnav.prototype, "expand", void 0);
     __decorate([
-        e$3({ type: String })
-    ], SideNavItem.prototype, "collapseId", void 0);
+        e$4({ type: String })
+    ], SgdsMainnav.prototype, "mode", void 0);
     __decorate([
-        e$3({ type: String })
-    ], SideNavItem.prototype, "buttonId", void 0);
-    SideNavItem = __decorate([
-        e$4("sidenav-item")
-    ], SideNavItem);
+        t$1()
+    ], SgdsMainnav.prototype, "breakpointReached", void 0);
+    __decorate([
+        t$1()
+    ], SgdsMainnav.prototype, "expanded", void 0);
+    SgdsMainnav = __decorate([
+        e$5("sgds-mainnav")
+    ], SgdsMainnav);
 
-    var css_248z$2 = i$3`@charset "UTF-8";
+    var css_248z$3 = i$4`@charset "UTF-8";
 :root {
   --sgds-blue: #1f69ff;
   --sgds-purple: #5925DC;
@@ -39000,169 +39733,797 @@ a[target=_blank]:after {
   .pt-xxl-5 {
     padding-top: 2rem !important;
   }
-  .pt-xxl-6 {
-    padding-top: 2.5rem !important;
+  .pt-xxl-6 {
+    padding-top: 2.5rem !important;
+  }
+  .pt-xxl-7 {
+    padding-top: 3rem !important;
+  }
+  .pt-xxl-8 {
+    padding-top: 3.5rem !important;
+  }
+  .pe-xxl-0 {
+    padding-right: 0 !important;
+  }
+  .pe-xxl-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-xxl-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-xxl-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-xxl-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-xxl-5 {
+    padding-right: 2rem !important;
+  }
+  .pe-xxl-6 {
+    padding-right: 2.5rem !important;
+  }
+  .pe-xxl-7 {
+    padding-right: 3rem !important;
+  }
+  .pe-xxl-8 {
+    padding-right: 3.5rem !important;
+  }
+  .pb-xxl-0 {
+    padding-bottom: 0 !important;
+  }
+  .pb-xxl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pb-xxl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pb-xxl-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pb-xxl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pb-xxl-5 {
+    padding-bottom: 2rem !important;
+  }
+  .pb-xxl-6 {
+    padding-bottom: 2.5rem !important;
+  }
+  .pb-xxl-7 {
+    padding-bottom: 3rem !important;
+  }
+  .pb-xxl-8 {
+    padding-bottom: 3.5rem !important;
+  }
+  .ps-xxl-0 {
+    padding-left: 0 !important;
+  }
+  .ps-xxl-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-xxl-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-xxl-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-xxl-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-xxl-5 {
+    padding-left: 2rem !important;
+  }
+  .ps-xxl-6 {
+    padding-left: 2.5rem !important;
+  }
+  .ps-xxl-7 {
+    padding-left: 3rem !important;
+  }
+  .ps-xxl-8 {
+    padding-left: 3.5rem !important;
+  }
+  .text-xxl-start {
+    text-align: left !important;
+  }
+  .text-xxl-end {
+    text-align: right !important;
+  }
+  .text-xxl-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 1200px) {
+  .fs-0 {
+    font-size: 3.5rem !important;
+  }
+  .fs-1 {
+    font-size: 2.5rem !important;
+  }
+  .fs-2 {
+    font-size: 2rem !important;
+  }
+  .fs-3 {
+    font-size: 1.5rem !important;
+  }
+}
+@media print {
+  .d-print-inline {
+    display: inline !important;
+  }
+  .d-print-inline-block {
+    display: inline-block !important;
+  }
+  .d-print-block {
+    display: block !important;
+  }
+  .d-print-grid {
+    display: grid !important;
+  }
+  .d-print-table {
+    display: table !important;
+  }
+  .d-print-table-row {
+    display: table-row !important;
+  }
+  .d-print-table-cell {
+    display: table-cell !important;
+  }
+  .d-print-flex {
+    display: flex !important;
+  }
+  .d-print-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-print-none {
+    display: none !important;
+  }
+}
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #0F71BB;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nav-link {
+    transition: none;
+  }
+}
+.nav-link:hover, .nav-link:focus {
+  color: #0c5a96;
+}
+.nav-link.disabled {
+  color: #344054;
+  pointer-events: none;
+  cursor: default;
+}
+
+.nav-tabs {
+  border-bottom: 1px solid transparent;
+}
+.nav-tabs .nav-link {
+  margin-bottom: -1px;
+  background: none;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.3125rem;
+  border-top-right-radius: 0.3125rem;
+}
+.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
+  border-color: #E4E7EC #E4E7EC transparent;
+  isolation: isolate;
+}
+.nav-tabs .nav-link.disabled {
+  color: #344054;
+  background-color: transparent;
+  border-color: transparent;
+}
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  color: #1D2939;
+  background-color: #fff;
+  border-color: #D0D5DD #D0D5DD #fff;
+}
+.nav-tabs .dropdown-menu {
+  margin-top: -1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.nav-pills .nav-link {
+  background: none;
+  border: 0;
+  border-radius: 0.3125rem;
+}
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #0F71BB;
+}
+
+.nav-fill > .nav-link,
+.nav-fill .nav-item {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.nav-justified > .nav-link,
+.nav-justified .nav-item {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.nav-fill .nav-item .nav-link,
+.nav-justified .nav-item .nav-link {
+  width: 100%;
+}
+
+.tab-content > .tab-pane {
+  display: none;
+}
+.tab-content > .active {
+  display: block;
+}
+
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+.navbar > .container-xxl, .navbar > .container-xl, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container,
+.navbar > .container-fluid {
+  display: flex;
+  flex-wrap: inherit;
+  align-items: center;
+  justify-content: space-between;
+}
+.navbar-brand {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  margin-right: 1rem;
+  font-size: 1.25rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+.navbar-nav .nav-link {
+  padding-right: 0;
+  padding-left: 0;
+}
+.navbar-nav .dropdown-menu {
+  position: static;
+}
+
+.navbar-text {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.navbar-toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.3125rem;
+  transition: box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .navbar-toggler {
+    transition: none;
+  }
+}
+.navbar-toggler:hover {
+  text-decoration: none;
+}
+.navbar-toggler:focus {
+  text-decoration: none;
+  outline: 0;
+  box-shadow: 0 0 0 0.125rem;
+}
+
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+
+.navbar-nav-scroll {
+  max-height: var(--sgds-scroll-height, 75vh);
+  overflow-y: auto;
+}
+
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-sm .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-sm .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-sm .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-sm .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
+  }
+  .navbar-expand-sm .offcanvas-top,
+.navbar-expand-sm .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
   }
-  .pt-xxl-7 {
-    padding-top: 3rem !important;
+  .navbar-expand-sm .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
   }
-  .pt-xxl-8 {
-    padding-top: 3.5rem !important;
+}
+@media (min-width: 768px) {
+  .navbar-expand-md {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
   }
-  .pe-xxl-0 {
-    padding-right: 0 !important;
+  .navbar-expand-md .navbar-nav {
+    flex-direction: row;
   }
-  .pe-xxl-1 {
-    padding-right: 0.25rem !important;
+  .navbar-expand-md .navbar-nav .dropdown-menu {
+    position: absolute;
   }
-  .pe-xxl-2 {
-    padding-right: 0.5rem !important;
+  .navbar-expand-md .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
   }
-  .pe-xxl-3 {
-    padding-right: 1rem !important;
+  .navbar-expand-md .navbar-nav-scroll {
+    overflow: visible;
   }
-  .pe-xxl-4 {
-    padding-right: 1.5rem !important;
+  .navbar-expand-md .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
   }
-  .pe-xxl-5 {
-    padding-right: 2rem !important;
+  .navbar-expand-md .navbar-toggler {
+    display: none;
   }
-  .pe-xxl-6 {
-    padding-right: 2.5rem !important;
+  .navbar-expand-md .offcanvas-header {
+    display: none;
   }
-  .pe-xxl-7 {
-    padding-right: 3rem !important;
+  .navbar-expand-md .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
   }
-  .pe-xxl-8 {
-    padding-right: 3.5rem !important;
+  .navbar-expand-md .offcanvas-top,
+.navbar-expand-md .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
   }
-  .pb-xxl-0 {
-    padding-bottom: 0 !important;
+  .navbar-expand-md .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
   }
-  .pb-xxl-1 {
-    padding-bottom: 0.25rem !important;
+}
+@media (min-width: 992px) {
+  .navbar-expand-lg {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
   }
-  .pb-xxl-2 {
-    padding-bottom: 0.5rem !important;
+  .navbar-expand-lg .navbar-nav {
+    flex-direction: row;
   }
-  .pb-xxl-3 {
-    padding-bottom: 1rem !important;
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    position: absolute;
   }
-  .pb-xxl-4 {
-    padding-bottom: 1.5rem !important;
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
   }
-  .pb-xxl-5 {
-    padding-bottom: 2rem !important;
+  .navbar-expand-lg .navbar-nav-scroll {
+    overflow: visible;
   }
-  .pb-xxl-6 {
-    padding-bottom: 2.5rem !important;
+  .navbar-expand-lg .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
   }
-  .pb-xxl-7 {
-    padding-bottom: 3rem !important;
+  .navbar-expand-lg .navbar-toggler {
+    display: none;
   }
-  .pb-xxl-8 {
-    padding-bottom: 3.5rem !important;
+  .navbar-expand-lg .offcanvas-header {
+    display: none;
   }
-  .ps-xxl-0 {
-    padding-left: 0 !important;
+  .navbar-expand-lg .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
   }
-  .ps-xxl-1 {
-    padding-left: 0.25rem !important;
+  .navbar-expand-lg .offcanvas-top,
+.navbar-expand-lg .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
   }
-  .ps-xxl-2 {
-    padding-left: 0.5rem !important;
+  .navbar-expand-lg .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
   }
-  .ps-xxl-3 {
-    padding-left: 1rem !important;
+}
+@media (min-width: 1200px) {
+  .navbar-expand-xl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
   }
-  .ps-xxl-4 {
-    padding-left: 1.5rem !important;
+  .navbar-expand-xl .navbar-nav {
+    flex-direction: row;
   }
-  .ps-xxl-5 {
-    padding-left: 2rem !important;
+  .navbar-expand-xl .navbar-nav .dropdown-menu {
+    position: absolute;
   }
-  .ps-xxl-6 {
-    padding-left: 2.5rem !important;
+  .navbar-expand-xl .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
   }
-  .ps-xxl-7 {
-    padding-left: 3rem !important;
+  .navbar-expand-xl .navbar-nav-scroll {
+    overflow: visible;
   }
-  .ps-xxl-8 {
-    padding-left: 3.5rem !important;
+  .navbar-expand-xl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
   }
-  .text-xxl-start {
-    text-align: left !important;
+  .navbar-expand-xl .navbar-toggler {
+    display: none;
   }
-  .text-xxl-end {
-    text-align: right !important;
+  .navbar-expand-xl .offcanvas-header {
+    display: none;
   }
-  .text-xxl-center {
-    text-align: center !important;
+  .navbar-expand-xl .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
   }
-}
-@media (min-width: 1200px) {
-  .fs-0 {
-    font-size: 3.5rem !important;
+  .navbar-expand-xl .offcanvas-top,
+.navbar-expand-xl .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
   }
-  .fs-1 {
-    font-size: 2.5rem !important;
+  .navbar-expand-xl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
   }
-  .fs-2 {
-    font-size: 2rem !important;
+}
+@media (min-width: 1400px) {
+  .navbar-expand-xxl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
   }
-  .fs-3 {
-    font-size: 1.5rem !important;
+  .navbar-expand-xxl .navbar-nav {
+    flex-direction: row;
   }
-}
-@media print {
-  .d-print-inline {
-    display: inline !important;
+  .navbar-expand-xxl .navbar-nav .dropdown-menu {
+    position: absolute;
   }
-  .d-print-inline-block {
-    display: inline-block !important;
+  .navbar-expand-xxl .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
   }
-  .d-print-block {
-    display: block !important;
+  .navbar-expand-xxl .navbar-nav-scroll {
+    overflow: visible;
   }
-  .d-print-grid {
-    display: grid !important;
+  .navbar-expand-xxl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
   }
-  .d-print-table {
-    display: table !important;
+  .navbar-expand-xxl .navbar-toggler {
+    display: none;
   }
-  .d-print-table-row {
-    display: table-row !important;
+  .navbar-expand-xxl .offcanvas-header {
+    display: none;
   }
-  .d-print-table-cell {
-    display: table-cell !important;
+  .navbar-expand-xxl .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
   }
-  .d-print-flex {
-    display: flex !important;
+  .navbar-expand-xxl .offcanvas-top,
+.navbar-expand-xxl .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
   }
-  .d-print-inline-flex {
-    display: inline-flex !important;
+  .navbar-expand-xxl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
   }
-  .d-print-none {
-    display: none !important;
+}
+.navbar-expand {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+.navbar-expand .navbar-nav {
+  flex-direction: row;
+}
+.navbar-expand .navbar-nav .dropdown-menu {
+  position: absolute;
+}
+.navbar-expand .navbar-nav .nav-link {
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+.navbar-expand .navbar-nav-scroll {
+  overflow: visible;
+}
+.navbar-expand .navbar-collapse {
+  display: flex !important;
+  flex-basis: auto;
+}
+.navbar-expand .navbar-toggler {
+  display: none;
+}
+.navbar-expand .offcanvas-header {
+  display: none;
+}
+.navbar-expand .offcanvas {
+  position: inherit;
+  bottom: 0;
+  z-index: 1000;
+  flex-grow: 1;
+  visibility: visible !important;
+  background-color: transparent;
+  border-right: 0;
+  border-left: 0;
+  transition: none;
+  transform: none;
+}
+.navbar-expand .offcanvas-top,
+.navbar-expand .offcanvas-bottom {
+  height: auto;
+  border-top: 0;
+  border-bottom: 0;
+}
+.navbar-expand .offcanvas-body {
+  display: flex;
+  flex-grow: 0;
+  padding: 0;
+  overflow-y: visible;
+}
+
+.navbar-light .navbar-brand {
+  color: rgba(0, 0, 0, 0.9);
+}
+.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
+  color: rgba(0, 0, 0, 0.9);
+}
+.navbar-light .navbar-nav .nav-link {
+  color: rgba(0, 0, 0, 0.55);
+}
+.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
+  color: rgba(0, 0, 0, 0.7);
+}
+.navbar-light .navbar-nav .nav-link.disabled {
+  color: rgba(0, 0, 0, 0.3);
+}
+.navbar-light .navbar-nav .show > .nav-link,
+.navbar-light .navbar-nav .nav-link.active {
+  color: rgba(0, 0, 0, 0.9);
+}
+.navbar-light .navbar-toggler {
+  color: rgba(0, 0, 0, 0.55);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.navbar-light .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-light .navbar-text {
+  color: rgba(0, 0, 0, 0.55);
+}
+.navbar-light .navbar-text a,
+.navbar-light .navbar-text a:hover,
+.navbar-light .navbar-text a:focus {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.navbar-dark .navbar-brand {
+  color: #fff;
+}
+.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
+  color: #fff;
+}
+.navbar-dark .navbar-nav .nav-link {
+  color: rgba(255, 255, 255, 0.55);
+}
+.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
+  color: rgba(255, 255, 255, 0.75);
+}
+.navbar-dark .navbar-nav .nav-link.disabled {
+  color: rgba(255, 255, 255, 0.25);
+}
+.navbar-dark .navbar-nav .show > .nav-link,
+.navbar-dark .navbar-nav .nav-link.active {
+  color: #fff;
+}
+.navbar-dark .navbar-toggler {
+  color: rgba(255, 255, 255, 0.55);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.navbar-dark .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-dark .navbar-text {
+  color: rgba(255, 255, 255, 0.55);
+}
+.navbar-dark .navbar-text a,
+.navbar-dark .navbar-text a:hover,
+.navbar-dark .navbar-text a:focus {
+  color: #fff;
+}
+
+.sgds.navbar {
+  padding: 0 calc(2rem) 0;
+  min-height: 80px;
+  align-items: stretch;
+}
+@media (max-width: 991.98px) {
+  .sgds.navbar {
+    padding: 0 1rem 0;
+    overflow-x: scroll;
   }
 }
+.sgds.navbar a.navbar-brand {
+  display: flex;
+  align-items: center;
+  padding-bottom: 0.125rem;
+}
+.sgds.navbar .navbar-collapse {
+  align-items: stretch;
+}
+.sgds.navbar .nav-item.has-megamenu {
+  position: static;
+}
+.sgds.navbar .nav-item a.nav-link {
+  color: #344054;
+  border-bottom: 0.125rem solid transparent;
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+}
+.sgds.navbar .nav-item a.nav-link.active, .sgds.navbar .nav-item a.nav-link:hover {
+  color: #5925DC;
+  border-color: #5925DC;
+}
+.sgds.navbar .nav-item a.nav-link.dropdown-toggle {
+  gap: 0.75rem;
+}
+.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show {
+  color: #5925DC;
+  border-bottom: 0.125rem solid #5925DC;
+}
+.sgds.navbar .dropdown-menu {
+  margin-top: 0;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 5px 5px;
+  background-color: #fff;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+.sgds.navbar .dropdown-menu.megamenu {
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+
+:host {
+  --mainnav-item-theme-color: #5925DC;
+}
+
+.nav-item {
+  height: 100%;
+}
+
 a.nav-link {
-  display: block;
-  color: inherit;
-  font-size: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: calc(
-      4rem + 0.125rem
-    );
-  padding-right: 0;
-  text-decoration: none;
+  display: flex;
+  color: #344054;
+  border-bottom: 0.125rem solid transparent;
+  min-height: 100%;
+  align-items: center;
 }
 a.nav-link.active, a.nav-link:hover {
-  color: var(--sidenav-theme-color);
+  color: var(--mainnav-item-theme-color);
+  border-color: var(--mainnav-item-theme-color);
 }`;
 
-    let SideNavLink = class SideNavLink extends s$2 {
+    let SgdsMainnavItem = class SgdsMainnavItem extends SgdsElement {
         constructor() {
             super(...arguments);
             this.active = false;
@@ -39170,7 +40531,7 @@ a.nav-link.active, a.nav-link:hover {
         }
         render() {
             return y `
-      <li>
+      <li class="nav-item">
         <a href="${this.href}" class="nav-link ${this.active ? "active" : null}"
           ><slot></slot
         ></a>
@@ -39178,18 +40539,59 @@ a.nav-link.active, a.nav-link:hover {
     `;
         }
     };
-    SideNavLink.styles = css_248z$2;
+    SgdsMainnavItem.styles = css_248z$3;
+    __decorate([
+        e$4({ type: Boolean })
+    ], SgdsMainnavItem.prototype, "active", void 0);
     __decorate([
-        e$3({ type: Boolean })
-    ], SideNavLink.prototype, "active", void 0);
+        e$4({ type: String })
+    ], SgdsMainnavItem.prototype, "href", void 0);
+    SgdsMainnavItem = __decorate([
+        e$5("sgds-mainnav-item")
+    ], SgdsMainnavItem);
+
+    var css_248z$2 = i$4`ul {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  list-style: none;
+}`;
+
+    let SgdsSidenav = class SgdsSidenav extends SgdsElement {
+        constructor() {
+            super(...arguments);
+            this.alwaysOpen = false;
+        }
+        render() {
+            this.alwaysOpen
+                ? null
+                : this.addEventListener("sgds-toggle", (e) => {
+                    const children = this.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
+                    for (let i = 0; i < children.length; i++) {
+                        if (e.detail.index != i) {
+                            children[i].closeItem();
+                        }
+                    }
+                });
+            return y `
+      <nav class="sidenav" id="${this.id}">
+        <ul>
+          <slot></slot>
+        </ul>
+      </nav>
+    `;
+        }
+    };
+    SgdsSidenav.styles = css_248z$2;
     __decorate([
-        e$3({ type: String })
-    ], SideNavLink.prototype, "href", void 0);
-    SideNavLink = __decorate([
-        e$4("sidenav-link")
-    ], SideNavLink);
+        e$4({ type: Boolean, attribute: true })
+    ], SgdsSidenav.prototype, "alwaysOpen", void 0);
+    SgdsSidenav = __decorate([
+        e$5("sgds-sidenav")
+    ], SgdsSidenav);
 
-    var css_248z$1 = i$3`@charset "UTF-8";
+    var css_248z$1 = i$4`@charset "UTF-8";
+@import "~bootstrap-icons/font/fonts/bootstrap-icons.css";
 :root {
   --sgds-blue: #1f69ff;
   --sgds-purple: #5925DC;
@@ -40880,7 +42282,7 @@ a[target=_blank]:after {
   margin-left: 3.5rem !important;
 }
 
-.ms-auto {
+.ms-auto, .sidenav-btn svg.bi-chevron-down {
   margin-left: auto !important;
 }
 
@@ -44769,654 +46171,30 @@ a[target=_blank]:after {
     display: inline-block !important;
   }
   .d-print-block {
-    display: block !important;
-  }
-  .d-print-grid {
-    display: grid !important;
-  }
-  .d-print-table {
-    display: table !important;
-  }
-  .d-print-table-row {
-    display: table-row !important;
-  }
-  .d-print-table-cell {
-    display: table-cell !important;
-  }
-  .d-print-flex {
-    display: flex !important;
-  }
-  .d-print-inline-flex {
-    display: inline-flex !important;
-  }
-  .d-print-none {
-    display: none !important;
-  }
-}
-.nav {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-
-.nav-link {
-  display: block;
-  padding: 0.5rem 1rem;
-  color: #0F71BB;
-  text-decoration: none;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .nav-link {
-    transition: none;
-  }
-}
-.nav-link:hover, .nav-link:focus {
-  color: #0c5a96;
-}
-.nav-link.disabled {
-  color: #344054;
-  pointer-events: none;
-  cursor: default;
-}
-
-.nav-tabs {
-  border-bottom: 1px solid transparent;
-}
-.nav-tabs .nav-link {
-  margin-bottom: -1px;
-  background: none;
-  border: 1px solid transparent;
-  border-top-left-radius: 0.3125rem;
-  border-top-right-radius: 0.3125rem;
-}
-.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
-  border-color: #E4E7EC #E4E7EC transparent;
-  isolation: isolate;
-}
-.nav-tabs .nav-link.disabled {
-  color: #344054;
-  background-color: transparent;
-  border-color: transparent;
-}
-.nav-tabs .nav-link.active,
-.nav-tabs .nav-item.show .nav-link {
-  color: #1D2939;
-  background-color: #fff;
-  border-color: #D0D5DD #D0D5DD #fff;
-}
-.nav-tabs .dropdown-menu {
-  margin-top: -1px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.nav-pills .nav-link {
-  background: none;
-  border: 0;
-  border-radius: 0.3125rem;
-}
-.nav-pills .nav-link.active,
-.nav-pills .show > .nav-link {
-  color: #fff;
-  background-color: #0F71BB;
-}
-
-.nav-fill > .nav-link,
-.nav-fill .nav-item {
-  flex: 1 1 auto;
-  text-align: center;
-}
-
-.nav-justified > .nav-link,
-.nav-justified .nav-item {
-  flex-basis: 0;
-  flex-grow: 1;
-  text-align: center;
-}
-
-.nav-fill .nav-item .nav-link,
-.nav-justified .nav-item .nav-link {
-  width: 100%;
-}
-
-.tab-content > .tab-pane {
-  display: none;
-}
-.tab-content > .active {
-  display: block;
-}
-
-.navbar {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-.navbar > .container-xxl, .navbar > .container-xl, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container,
-.navbar > .container-fluid {
-  display: flex;
-  flex-wrap: inherit;
-  align-items: center;
-  justify-content: space-between;
-}
-.navbar-brand {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  margin-right: 1rem;
-  font-size: 1.25rem;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.navbar-nav {
-  display: flex;
-  flex-direction: column;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-.navbar-nav .nav-link {
-  padding-right: 0;
-  padding-left: 0;
-}
-.navbar-nav .dropdown-menu {
-  position: static;
-}
-
-.navbar-text {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.navbar-collapse {
-  flex-basis: 100%;
-  flex-grow: 1;
-  align-items: center;
-}
-
-.navbar-toggler {
-  padding: 0.25rem 0.75rem;
-  font-size: 1.25rem;
-  line-height: 1;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 0.3125rem;
-  transition: box-shadow 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .navbar-toggler {
-    transition: none;
-  }
-}
-.navbar-toggler:hover {
-  text-decoration: none;
-}
-.navbar-toggler:focus {
-  text-decoration: none;
-  outline: 0;
-  box-shadow: 0 0 0 0.125rem;
-}
-
-.navbar-toggler-icon {
-  display: inline-block;
-  width: 1.5em;
-  height: 1.5em;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100%;
-}
-
-.navbar-nav-scroll {
-  max-height: var(--sgds-scroll-height, 75vh);
-  overflow-y: auto;
-}
-
-@media (min-width: 576px) {
-  .navbar-expand-sm {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-  }
-  .navbar-expand-sm .navbar-nav {
-    flex-direction: row;
-  }
-  .navbar-expand-sm .navbar-nav .dropdown-menu {
-    position: absolute;
-  }
-  .navbar-expand-sm .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-  }
-  .navbar-expand-sm .navbar-nav-scroll {
-    overflow: visible;
-  }
-  .navbar-expand-sm .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
-  }
-  .navbar-expand-sm .navbar-toggler {
-    display: none;
-  }
-  .navbar-expand-sm .offcanvas-header {
-    display: none;
-  }
-  .navbar-expand-sm .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
-  }
-  .navbar-expand-sm .offcanvas-top,
-.navbar-expand-sm .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
-  }
-  .navbar-expand-sm .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
-  }
-}
-@media (min-width: 768px) {
-  .navbar-expand-md {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-  }
-  .navbar-expand-md .navbar-nav {
-    flex-direction: row;
-  }
-  .navbar-expand-md .navbar-nav .dropdown-menu {
-    position: absolute;
-  }
-  .navbar-expand-md .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-  }
-  .navbar-expand-md .navbar-nav-scroll {
-    overflow: visible;
-  }
-  .navbar-expand-md .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
-  }
-  .navbar-expand-md .navbar-toggler {
-    display: none;
-  }
-  .navbar-expand-md .offcanvas-header {
-    display: none;
-  }
-  .navbar-expand-md .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
-  }
-  .navbar-expand-md .offcanvas-top,
-.navbar-expand-md .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
-  }
-  .navbar-expand-md .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
-  }
-}
-@media (min-width: 992px) {
-  .navbar-expand-lg {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-  }
-  .navbar-expand-lg .navbar-nav {
-    flex-direction: row;
-  }
-  .navbar-expand-lg .navbar-nav .dropdown-menu {
-    position: absolute;
-  }
-  .navbar-expand-lg .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-  }
-  .navbar-expand-lg .navbar-nav-scroll {
-    overflow: visible;
-  }
-  .navbar-expand-lg .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
-  }
-  .navbar-expand-lg .navbar-toggler {
-    display: none;
-  }
-  .navbar-expand-lg .offcanvas-header {
-    display: none;
-  }
-  .navbar-expand-lg .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
-  }
-  .navbar-expand-lg .offcanvas-top,
-.navbar-expand-lg .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
-  }
-  .navbar-expand-lg .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
-  }
-}
-@media (min-width: 1200px) {
-  .navbar-expand-xl {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-  }
-  .navbar-expand-xl .navbar-nav {
-    flex-direction: row;
-  }
-  .navbar-expand-xl .navbar-nav .dropdown-menu {
-    position: absolute;
-  }
-  .navbar-expand-xl .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-  }
-  .navbar-expand-xl .navbar-nav-scroll {
-    overflow: visible;
-  }
-  .navbar-expand-xl .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
-  }
-  .navbar-expand-xl .navbar-toggler {
-    display: none;
-  }
-  .navbar-expand-xl .offcanvas-header {
-    display: none;
-  }
-  .navbar-expand-xl .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
-  }
-  .navbar-expand-xl .offcanvas-top,
-.navbar-expand-xl .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
-  }
-  .navbar-expand-xl .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
-  }
-}
-@media (min-width: 1400px) {
-  .navbar-expand-xxl {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-  }
-  .navbar-expand-xxl .navbar-nav {
-    flex-direction: row;
-  }
-  .navbar-expand-xxl .navbar-nav .dropdown-menu {
-    position: absolute;
-  }
-  .navbar-expand-xxl .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-  }
-  .navbar-expand-xxl .navbar-nav-scroll {
-    overflow: visible;
-  }
-  .navbar-expand-xxl .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
+    display: block !important;
   }
-  .navbar-expand-xxl .navbar-toggler {
-    display: none;
+  .d-print-grid {
+    display: grid !important;
   }
-  .navbar-expand-xxl .offcanvas-header {
-    display: none;
+  .d-print-table {
+    display: table !important;
   }
-  .navbar-expand-xxl .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
+  .d-print-table-row {
+    display: table-row !important;
   }
-  .navbar-expand-xxl .offcanvas-top,
-.navbar-expand-xxl .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
+  .d-print-table-cell {
+    display: table-cell !important;
   }
-  .navbar-expand-xxl .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
+  .d-print-flex {
+    display: flex !important;
   }
-}
-.navbar-expand {
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-}
-.navbar-expand .navbar-nav {
-  flex-direction: row;
-}
-.navbar-expand .navbar-nav .dropdown-menu {
-  position: absolute;
-}
-.navbar-expand .navbar-nav .nav-link {
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-.navbar-expand .navbar-nav-scroll {
-  overflow: visible;
-}
-.navbar-expand .navbar-collapse {
-  display: flex !important;
-  flex-basis: auto;
-}
-.navbar-expand .navbar-toggler {
-  display: none;
-}
-.navbar-expand .offcanvas-header {
-  display: none;
-}
-.navbar-expand .offcanvas {
-  position: inherit;
-  bottom: 0;
-  z-index: 1000;
-  flex-grow: 1;
-  visibility: visible !important;
-  background-color: transparent;
-  border-right: 0;
-  border-left: 0;
-  transition: none;
-  transform: none;
-}
-.navbar-expand .offcanvas-top,
-.navbar-expand .offcanvas-bottom {
-  height: auto;
-  border-top: 0;
-  border-bottom: 0;
-}
-.navbar-expand .offcanvas-body {
-  display: flex;
-  flex-grow: 0;
-  padding: 0;
-  overflow-y: visible;
-}
-
-.navbar-light .navbar-brand {
-  color: rgba(0, 0, 0, 0.9);
-}
-.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
-  color: rgba(0, 0, 0, 0.9);
-}
-.navbar-light .navbar-nav .nav-link {
-  color: rgba(0, 0, 0, 0.55);
-}
-.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
-  color: rgba(0, 0, 0, 0.7);
-}
-.navbar-light .navbar-nav .nav-link.disabled {
-  color: rgba(0, 0, 0, 0.3);
-}
-.navbar-light .navbar-nav .show > .nav-link,
-.navbar-light .navbar-nav .nav-link.active {
-  color: rgba(0, 0, 0, 0.9);
-}
-.navbar-light .navbar-toggler {
-  color: rgba(0, 0, 0, 0.55);
-  border-color: rgba(0, 0, 0, 0.1);
-}
-.navbar-light .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-.navbar-light .navbar-text {
-  color: rgba(0, 0, 0, 0.55);
-}
-.navbar-light .navbar-text a,
-.navbar-light .navbar-text a:hover,
-.navbar-light .navbar-text a:focus {
-  color: rgba(0, 0, 0, 0.9);
-}
-
-.navbar-dark .navbar-brand {
-  color: #fff;
-}
-.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
-  color: #fff;
-}
-.navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.55);
-}
-.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
-  color: rgba(255, 255, 255, 0.75);
-}
-.navbar-dark .navbar-nav .nav-link.disabled {
-  color: rgba(255, 255, 255, 0.25);
-}
-.navbar-dark .navbar-nav .show > .nav-link,
-.navbar-dark .navbar-nav .nav-link.active {
-  color: #fff;
-}
-.navbar-dark .navbar-toggler {
-  color: rgba(255, 255, 255, 0.55);
-  border-color: rgba(255, 255, 255, 0.1);
-}
-.navbar-dark .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-.navbar-dark .navbar-text {
-  color: rgba(255, 255, 255, 0.55);
-}
-.navbar-dark .navbar-text a,
-.navbar-dark .navbar-text a:hover,
-.navbar-dark .navbar-text a:focus {
-  color: #fff;
-}
-
-.sgds.navbar {
-  padding: 0 calc(2rem) 0;
-  min-height: 80px;
-  align-items: stretch;
-}
-@media (max-width: 991.98px) {
-  .sgds.navbar {
-    padding: 0 1rem 0;
-    overflow-x: scroll;
+  .d-print-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-print-none {
+    display: none !important;
   }
 }
-.sgds.navbar a.navbar-brand {
-  display: flex;
-  align-items: center;
-  padding-bottom: 0.125rem;
-}
-.sgds.navbar .navbar-collapse {
-  align-items: stretch;
-}
-.sgds.navbar .nav-item.has-megamenu {
-  position: static;
-}
-.sgds.navbar .nav-item a.nav-link {
-  color: #344054;
-  border-bottom: 0.125rem solid transparent;
-  min-height: 100%;
-  display: flex;
-  align-items: center;
-}
-.sgds.navbar .nav-item a.nav-link.active, .sgds.navbar .nav-item a.nav-link:hover {
-  color: #5925DC;
-  border-color: #5925DC;
-}
-.sgds.navbar .nav-item a.nav-link.dropdown-toggle {
-  gap: 0.75rem;
-}
-.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show {
-  color: #5925DC;
-  border-bottom: 0.125rem solid #5925DC;
-}
-.sgds.navbar .dropdown-menu {
-  margin-top: 0;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 0 0 5px 5px;
-  background-color: #fff;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-}
-.sgds.navbar .dropdown-menu.megamenu {
-  left: 0;
-  right: 0;
-  width: 100%;
-}
-
 .fade {
   transition: opacity 0.15s linear;
 }
@@ -45454,264 +46232,190 @@ a[target=_blank]:after {
   }
 }
 
-.offcanvas {
-  position: fixed;
-  bottom: 0;
-  z-index: 1045;
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  visibility: hidden;
-  background-color: #fff;
-  background-clip: padding-box;
-  outline: 0;
-  transition: transform 0.3s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .offcanvas {
-    transition: none;
-  }
-}
-
-.offcanvas-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1040;
-  width: 100vw;
-  height: 100vh;
-  background-color: #000;
-}
-.offcanvas-backdrop.fade {
-  opacity: 0;
-}
-.offcanvas-backdrop.show {
-  opacity: 0.5;
+:host {
+  --sidenav-theme-color: #5925DC;
 }
 
-.offcanvas-header {
+.sidenav-btn {
+  width: 100%;
+  text-align: initial;
+  line-height: 1.5rem;
+  font-size: 1rem;
+  border: 0;
+  background: 0;
+  padding: 0.5rem 1rem;
+  border-left: 0.125rem solid transparent;
+  border-radius: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 1.5rem 1.5rem;
-}
-.offcanvas-header .btn-close {
-  padding: 0.75rem 0.75rem;
-  margin-top: -0.75rem;
-  margin-right: -0.75rem;
-  margin-bottom: -0.75rem;
-}
-
-.offcanvas-title {
-  margin-bottom: 0;
-  line-height: 2;
-}
-
-.offcanvas-body {
-  flex-grow: 1;
-  padding: 1.5rem 1.5rem;
-  overflow-y: auto;
-}
-
-.offcanvas-start {
-  top: 0;
-  left: 0;
-  width: 400px;
-  border-right: 1px solid #98A2B3;
-  transform: translateX(-100%);
 }
-
-.offcanvas-end {
-  top: 0;
-  right: 0;
-  width: 400px;
-  border-left: 1px solid #98A2B3;
-  transform: translateX(100%);
+.sidenav-btn.active, .sidenav-btn:hover {
+  color: var(--sidenav-theme-color);
+  border-left-color: var(--sidenav-theme-color);
+  font-weight: 700;
 }
-
-.offcanvas-top {
-  top: 0;
-  right: 0;
-  left: 0;
-  height: 30vh;
-  max-height: 100%;
-  border-bottom: 1px solid #98A2B3;
-  transform: translateY(-100%);
+.sidenav-btn svg.bi-chevron-down {
+  transition: all 0.3s ease-in-out;
+  transform: rotate(180deg);
 }
-
-.offcanvas-bottom {
-  right: 0;
-  left: 0;
-  height: 30vh;
-  max-height: 100%;
-  border-top: 1px solid #98A2B3;
-  transform: translateY(100%);
+.sidenav-btn:not(.active) svg.bi-chevron-down {
+  transform: rotate(0deg);
 }
 
-.offcanvas.show {
-  transform: none;
+a.sidenav-btn {
+  color: inherit;
+  text-decoration: none;
+  line-height: 1.5rem;
 }
 
-.navbar-nav {
+.sidenav-list {
+  list-style: none;
   display: flex;
-  align-self: center;
-  gap: 1rem;
-  height: 100%;
-  margin-left: 1rem;
-}
-
-.navbar-toggler {
-  border: none;
+  flex-direction: column;
+  padding-left: 0;
+  margin: 0;
+  line-height: 2rem;
 }
 
-.navbar-toggler:focus {
-  box-shadow: none;
+.collapse,
+.collapse.show,
+.collapsing {
+  margin-top: 1rem;
 }
 
-slot[name=non-collapsible] {
+::slotted(*[slot=title]) {
   display: flex;
   gap: 1rem;
   align-items: center;
 }`;
 
-    class s{constructor(s,{target:t,config:i,callback:h,skipInitial:e}){this.t=!1,this.o=!1,this.callback=()=>!0,(this.i=s).addController(this),this.h=null===t||null!=t?t:this.i,this.l=i,this.t=null!=e?e:this.t,this.callback=null!=h?h:this.callback,window.ResizeObserver?this.u=new ResizeObserver((s=>{this.handleChanges(s),this.i.requestUpdate();})):console.warn("ResizeController error: browser does not support ResizeObserver.");}handleChanges(s){this.value=this.callback(s,this.u);}hostConnected(){this.h&&this.observe(this.h);}hostDisconnected(){this.disconnect();}async hostUpdated(){!this.t&&this.o&&this.handleChanges([]),this.o=!1;}observe(s){this.u.observe(s,this.l),this.o=!0,this.i.requestUpdate();}disconnect(){this.u.disconnect();}}
-
-    const SM_BREAKPOINT = 576;
-    const MD_BREAKPOINT = 768;
-    const LG_BREAKPOINT = 992;
-    const XL_BREAKPOINT = 1200;
-    const XXL_BREAKPOINT = 1400;
-    const SIZES = {
-        sm: SM_BREAKPOINT,
-        md: MD_BREAKPOINT,
-        lg: LG_BREAKPOINT,
-        xl: XL_BREAKPOINT,
-        XXL: XXL_BREAKPOINT,
-        never: Infinity,
-        always: 0,
-    };
-    let MainNavElement = class MainNavElement extends s$2 {
+    let SgdsSidenavItem = class SgdsSidenavItem extends SgdsElement {
         constructor() {
-            super();
+            super(...arguments);
             this.myCollapse = e();
             this.bsCollapse = null;
-            // TODO: stylings and slots are incomplete for offcanvas mode 
-            this.myOffcanvas = e();
-            this.bsOffcanvas = null;
-            this.brandHref = "";
-            this.collapseId = genId("mainnav", "collapse");
-            this.expand = "lg";
-            this.expanded = false;
-            this.mode = "default";
-            // Detects changes in element size and runs update
-            this._resizeController = new s(this, {});
+            /**  when true, toggles the sidenav-item to open on first load and
+             * set the active stylings.
+             */
+            this.active = false;
+            this.href = "";
+            this.collapseId = genId('sidenav', 'collapse');
+            this.buttonId = genId('sidenav', 'button');
+            this.index = "-1";
+        }
+        _onClick() {
+            this.emit('sgds-toggle', { detail: { index: this.index } });
         }
         _onClickButton() {
-            if (this.mode === "offcanvas") {
-                return this.bsOffcanvas.toggle();
+            this._onClick();
+            if (this.bsCollapse) {
+                this.bsCollapse.toggle();
             }
-            this.bsCollapse.toggle();
+        }
+        _onClickLink() {
+            this._onClick();
+            this.active = true;
+        }
+        /**
+         * closeItem - closes sidenav and inactivates it
+         */
+        closeItem() {
+            this.active = false;
+            if (this.bsCollapse)
+                this.bsCollapse.hide();
+        }
+        /**
+         * openItem
+         */
+        openItem() {
+            this.active = true;
+            if (this.bsCollapse)
+                this.bsCollapse.show();
         }
         firstUpdated() {
-            if (this.mode === "default") {
+            // if sidenav has menu, initialise bootstrap collapse
+            if (!this.href) {
                 this.bsCollapse = new Collapse(this.myCollapse.value, {
-                    toggle: false,
+                    toggle: this.active,
                 });
                 this.myCollapse.value.addEventListener("show.bs.collapse", () => {
-                    this.expanded = true;
+                    this.active = true;
                 });
                 this.myCollapse.value.addEventListener("shown.bs.collapse", () => {
-                    this.expanded = true;
+                    this.active = true;
                 });
                 this.myCollapse.value.addEventListener("hide.bs.collapse", () => {
-                    this.expanded = false;
+                    this.active = false;
                 });
                 this.myCollapse.value.addEventListener("hidden.bs.collapse", () => {
-                    this.expanded = false;
-                });
-            }
-            if (this.mode === "offcanvas") {
-                this.bsOffcanvas = new Offcanvas(this.myOffcanvas.value);
-                //add esc keyboard event for bsOffcanvas
-                this.addEventListener("keydown", (ev) => {
-                    if (ev.key === "Escape") {
-                        this.bsOffcanvas.hide();
-                    }
+                    this.active = false;
                 });
             }
         }
         render() {
-            const breakpointReached = this.offsetWidth < SIZES[this.expand.toString()];
-            const collapseClass = "collapse navbar-collapse order-4";
-            const offcanvasClass = "offcanvas offcanvas-start";
-            return y `
-      <nav
-        class="sgds navbar navbar-light
-        ${this._expandClass()}"
+            const withMenuTemplate = y ` <button
+        @click=${() => this._onClickButton()}
+        class="collapsed sidenav-btn ${this.active ? "active" : null}"
+        aria-expanded="${this.active}" 
+        aria-controls="${this.collapseId}"
+        aria-selected="${this.active}"
+        id="${this.buttonId}"
       >
-        <a class="navbar-brand me-auto order-1" href=${this.brandHref}>
-          <slot name="brand"></slot>
-        </a>
-        <slot
-          name="non-collapsible"
-          class="${breakpointReached ? "order-2" : "order-5"}"
-        ></slot>
-        <button
-          class="navbar-toggler order-3"
-          type="button"
-          @click=${() => this._onClickButton()}
-          aria-controls="${this.collapseId}"
-          aria-expanded="${this.expanded}"
-          aria-label="Toggle navigation"
+        <slot name="title"></slot>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-chevron-down"
+          viewBox="0 0 16 16"
         >
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div
-          class=${this.mode === "default" ? collapseClass : offcanvasClass}
-          ${this.mode === "default"
-            ? n(this.myCollapse)
-            : n(this.myOffcanvas)}
-          id=${this.collapseId}
+          <path
+            fill-rule="evenodd"
+            d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+          />
+        </svg>
+      </button>
+      <div class="collapse" ${n(this.myCollapse)} id="${this.collapseId}">
+        <ul class="sidenav-list" aria-labelledby="${this.buttonId}">
+          <slot></slot>
+        </ul>
+      </div>`;
+            const noMenuTemplate = y `
+      <a
+        href=${this.href}
+        @click=${() => this._onClickLink()}
+        class="sidenav-btn ${this.active ? "active" : null}"
+        aria-selected="${this.active}"
         >
-          <ul class="navbar-nav">
-            <slot></slot>
-          </ul>
-        </div>
-      </nav>
+        <slot name="title"></slot>
+      </a>
+    `;
+            return y `
+      <li class="sidenav-item" aria-haspopup="${!this.href}">
+        ${this.href ? noMenuTemplate : withMenuTemplate}
+      </li>
     `;
-        }
-        _expandClass() {
-            switch (this.expand) {
-                case "always":
-                    return "navbar-expand";
-                case "never":
-                    break;
-                default:
-                    return `navbar-expand-${this.expand}`;
-            }
         }
     };
-    MainNavElement.styles = css_248z$1;
+    SgdsSidenavItem.styles = css_248z$1;
     __decorate([
-        e$3({ type: String })
-    ], MainNavElement.prototype, "brandHref", void 0);
+        e$4({ type: Boolean })
+    ], SgdsSidenavItem.prototype, "active", void 0);
     __decorate([
-        e$3({ type: String })
-    ], MainNavElement.prototype, "collapseId", void 0);
+        e$4({ type: String })
+    ], SgdsSidenavItem.prototype, "href", void 0);
     __decorate([
-        e$3()
-    ], MainNavElement.prototype, "expand", void 0);
-    __decorate([
-        t$1()
-    ], MainNavElement.prototype, "expanded", void 0);
+        e$4({ type: String })
+    ], SgdsSidenavItem.prototype, "collapseId", void 0);
     __decorate([
-        e$3({ type: String })
-    ], MainNavElement.prototype, "mode", void 0);
-    MainNavElement = __decorate([
-        e$4("mainnav-element")
-    ], MainNavElement);
+        e$4({ type: String })
+    ], SgdsSidenavItem.prototype, "buttonId", void 0);
+    SgdsSidenavItem = __decorate([
+        e$5("sgds-sidenav-item")
+    ], SgdsSidenavItem);
 
-    var css_248z = i$3`@charset "UTF-8";
+    var css_248z = i$4`@charset "UTF-8";
 :root {
   --sgds-blue: #1f69ff;
   --sgds-purple: #5925DC;
@@ -51147,819 +51851,191 @@ a[target=_blank]:after {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important;
   }
-  .py-xxl-8 {
-    padding-top: 3.5rem !important;
-    padding-bottom: 3.5rem !important;
-  }
-  .pt-xxl-0 {
-    padding-top: 0 !important;
-  }
-  .pt-xxl-1 {
-    padding-top: 0.25rem !important;
-  }
-  .pt-xxl-2 {
-    padding-top: 0.5rem !important;
-  }
-  .pt-xxl-3 {
-    padding-top: 1rem !important;
-  }
-  .pt-xxl-4 {
-    padding-top: 1.5rem !important;
-  }
-  .pt-xxl-5 {
-    padding-top: 2rem !important;
-  }
-  .pt-xxl-6 {
-    padding-top: 2.5rem !important;
-  }
-  .pt-xxl-7 {
-    padding-top: 3rem !important;
-  }
-  .pt-xxl-8 {
-    padding-top: 3.5rem !important;
-  }
-  .pe-xxl-0 {
-    padding-right: 0 !important;
-  }
-  .pe-xxl-1 {
-    padding-right: 0.25rem !important;
-  }
-  .pe-xxl-2 {
-    padding-right: 0.5rem !important;
-  }
-  .pe-xxl-3 {
-    padding-right: 1rem !important;
-  }
-  .pe-xxl-4 {
-    padding-right: 1.5rem !important;
-  }
-  .pe-xxl-5 {
-    padding-right: 2rem !important;
-  }
-  .pe-xxl-6 {
-    padding-right: 2.5rem !important;
-  }
-  .pe-xxl-7 {
-    padding-right: 3rem !important;
-  }
-  .pe-xxl-8 {
-    padding-right: 3.5rem !important;
-  }
-  .pb-xxl-0 {
-    padding-bottom: 0 !important;
-  }
-  .pb-xxl-1 {
-    padding-bottom: 0.25rem !important;
-  }
-  .pb-xxl-2 {
-    padding-bottom: 0.5rem !important;
-  }
-  .pb-xxl-3 {
-    padding-bottom: 1rem !important;
-  }
-  .pb-xxl-4 {
-    padding-bottom: 1.5rem !important;
-  }
-  .pb-xxl-5 {
-    padding-bottom: 2rem !important;
-  }
-  .pb-xxl-6 {
-    padding-bottom: 2.5rem !important;
-  }
-  .pb-xxl-7 {
-    padding-bottom: 3rem !important;
-  }
-  .pb-xxl-8 {
-    padding-bottom: 3.5rem !important;
-  }
-  .ps-xxl-0 {
-    padding-left: 0 !important;
-  }
-  .ps-xxl-1 {
-    padding-left: 0.25rem !important;
-  }
-  .ps-xxl-2 {
-    padding-left: 0.5rem !important;
-  }
-  .ps-xxl-3 {
-    padding-left: 1rem !important;
-  }
-  .ps-xxl-4 {
-    padding-left: 1.5rem !important;
-  }
-  .ps-xxl-5 {
-    padding-left: 2rem !important;
-  }
-  .ps-xxl-6 {
-    padding-left: 2.5rem !important;
-  }
-  .ps-xxl-7 {
-    padding-left: 3rem !important;
-  }
-  .ps-xxl-8 {
-    padding-left: 3.5rem !important;
-  }
-  .text-xxl-start {
-    text-align: left !important;
-  }
-  .text-xxl-end {
-    text-align: right !important;
-  }
-  .text-xxl-center {
-    text-align: center !important;
-  }
-}
-@media (min-width: 1200px) {
-  .fs-0 {
-    font-size: 3.5rem !important;
-  }
-  .fs-1 {
-    font-size: 2.5rem !important;
-  }
-  .fs-2 {
-    font-size: 2rem !important;
-  }
-  .fs-3 {
-    font-size: 1.5rem !important;
-  }
-}
-@media print {
-  .d-print-inline {
-    display: inline !important;
-  }
-  .d-print-inline-block {
-    display: inline-block !important;
-  }
-  .d-print-block {
-    display: block !important;
-  }
-  .d-print-grid {
-    display: grid !important;
-  }
-  .d-print-table {
-    display: table !important;
-  }
-  .d-print-table-row {
-    display: table-row !important;
-  }
-  .d-print-table-cell {
-    display: table-cell !important;
-  }
-  .d-print-flex {
-    display: flex !important;
-  }
-  .d-print-inline-flex {
-    display: inline-flex !important;
-  }
-  .d-print-none {
-    display: none !important;
-  }
-}
-.nav {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-
-.nav-link {
-  display: block;
-  padding: 0.5rem 1rem;
-  color: #0F71BB;
-  text-decoration: none;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .nav-link {
-    transition: none;
-  }
-}
-.nav-link:hover, .nav-link:focus {
-  color: #0c5a96;
-}
-.nav-link.disabled {
-  color: #344054;
-  pointer-events: none;
-  cursor: default;
-}
-
-.nav-tabs {
-  border-bottom: 1px solid transparent;
-}
-.nav-tabs .nav-link {
-  margin-bottom: -1px;
-  background: none;
-  border: 1px solid transparent;
-  border-top-left-radius: 0.3125rem;
-  border-top-right-radius: 0.3125rem;
-}
-.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
-  border-color: #E4E7EC #E4E7EC transparent;
-  isolation: isolate;
-}
-.nav-tabs .nav-link.disabled {
-  color: #344054;
-  background-color: transparent;
-  border-color: transparent;
-}
-.nav-tabs .nav-link.active,
-.nav-tabs .nav-item.show .nav-link {
-  color: #1D2939;
-  background-color: #fff;
-  border-color: #D0D5DD #D0D5DD #fff;
-}
-.nav-tabs .dropdown-menu {
-  margin-top: -1px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.nav-pills .nav-link {
-  background: none;
-  border: 0;
-  border-radius: 0.3125rem;
-}
-.nav-pills .nav-link.active,
-.nav-pills .show > .nav-link {
-  color: #fff;
-  background-color: #0F71BB;
-}
-
-.nav-fill > .nav-link,
-.nav-fill .nav-item {
-  flex: 1 1 auto;
-  text-align: center;
-}
-
-.nav-justified > .nav-link,
-.nav-justified .nav-item {
-  flex-basis: 0;
-  flex-grow: 1;
-  text-align: center;
-}
-
-.nav-fill .nav-item .nav-link,
-.nav-justified .nav-item .nav-link {
-  width: 100%;
-}
-
-.tab-content > .tab-pane {
-  display: none;
-}
-.tab-content > .active {
-  display: block;
-}
-
-.navbar {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-.navbar > .container-xxl, .navbar > .container-xl, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container,
-.navbar > .container-fluid {
-  display: flex;
-  flex-wrap: inherit;
-  align-items: center;
-  justify-content: space-between;
-}
-.navbar-brand {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  margin-right: 1rem;
-  font-size: 1.25rem;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.navbar-nav {
-  display: flex;
-  flex-direction: column;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-.navbar-nav .nav-link {
-  padding-right: 0;
-  padding-left: 0;
-}
-.navbar-nav .dropdown-menu {
-  position: static;
-}
-
-.navbar-text {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.navbar-collapse {
-  flex-basis: 100%;
-  flex-grow: 1;
-  align-items: center;
-}
-
-.navbar-toggler {
-  padding: 0.25rem 0.75rem;
-  font-size: 1.25rem;
-  line-height: 1;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 0.3125rem;
-  transition: box-shadow 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .navbar-toggler {
-    transition: none;
-  }
-}
-.navbar-toggler:hover {
-  text-decoration: none;
-}
-.navbar-toggler:focus {
-  text-decoration: none;
-  outline: 0;
-  box-shadow: 0 0 0 0.125rem;
-}
-
-.navbar-toggler-icon {
-  display: inline-block;
-  width: 1.5em;
-  height: 1.5em;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100%;
-}
-
-.navbar-nav-scroll {
-  max-height: var(--sgds-scroll-height, 75vh);
-  overflow-y: auto;
-}
-
-@media (min-width: 576px) {
-  .navbar-expand-sm {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-  }
-  .navbar-expand-sm .navbar-nav {
-    flex-direction: row;
-  }
-  .navbar-expand-sm .navbar-nav .dropdown-menu {
-    position: absolute;
-  }
-  .navbar-expand-sm .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-  }
-  .navbar-expand-sm .navbar-nav-scroll {
-    overflow: visible;
-  }
-  .navbar-expand-sm .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
+  .py-xxl-8 {
+    padding-top: 3.5rem !important;
+    padding-bottom: 3.5rem !important;
   }
-  .navbar-expand-sm .navbar-toggler {
-    display: none;
+  .pt-xxl-0 {
+    padding-top: 0 !important;
   }
-  .navbar-expand-sm .offcanvas-header {
-    display: none;
+  .pt-xxl-1 {
+    padding-top: 0.25rem !important;
   }
-  .navbar-expand-sm .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
+  .pt-xxl-2 {
+    padding-top: 0.5rem !important;
   }
-  .navbar-expand-sm .offcanvas-top,
-.navbar-expand-sm .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
+  .pt-xxl-3 {
+    padding-top: 1rem !important;
   }
-  .navbar-expand-sm .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
+  .pt-xxl-4 {
+    padding-top: 1.5rem !important;
   }
-}
-@media (min-width: 768px) {
-  .navbar-expand-md {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
+  .pt-xxl-5 {
+    padding-top: 2rem !important;
   }
-  .navbar-expand-md .navbar-nav {
-    flex-direction: row;
+  .pt-xxl-6 {
+    padding-top: 2.5rem !important;
   }
-  .navbar-expand-md .navbar-nav .dropdown-menu {
-    position: absolute;
+  .pt-xxl-7 {
+    padding-top: 3rem !important;
   }
-  .navbar-expand-md .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+  .pt-xxl-8 {
+    padding-top: 3.5rem !important;
   }
-  .navbar-expand-md .navbar-nav-scroll {
-    overflow: visible;
+  .pe-xxl-0 {
+    padding-right: 0 !important;
   }
-  .navbar-expand-md .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
+  .pe-xxl-1 {
+    padding-right: 0.25rem !important;
   }
-  .navbar-expand-md .navbar-toggler {
-    display: none;
+  .pe-xxl-2 {
+    padding-right: 0.5rem !important;
   }
-  .navbar-expand-md .offcanvas-header {
-    display: none;
+  .pe-xxl-3 {
+    padding-right: 1rem !important;
   }
-  .navbar-expand-md .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
+  .pe-xxl-4 {
+    padding-right: 1.5rem !important;
   }
-  .navbar-expand-md .offcanvas-top,
-.navbar-expand-md .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
+  .pe-xxl-5 {
+    padding-right: 2rem !important;
   }
-  .navbar-expand-md .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
+  .pe-xxl-6 {
+    padding-right: 2.5rem !important;
   }
-}
-@media (min-width: 992px) {
-  .navbar-expand-lg {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
+  .pe-xxl-7 {
+    padding-right: 3rem !important;
   }
-  .navbar-expand-lg .navbar-nav {
-    flex-direction: row;
+  .pe-xxl-8 {
+    padding-right: 3.5rem !important;
   }
-  .navbar-expand-lg .navbar-nav .dropdown-menu {
-    position: absolute;
+  .pb-xxl-0 {
+    padding-bottom: 0 !important;
   }
-  .navbar-expand-lg .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+  .pb-xxl-1 {
+    padding-bottom: 0.25rem !important;
   }
-  .navbar-expand-lg .navbar-nav-scroll {
-    overflow: visible;
+  .pb-xxl-2 {
+    padding-bottom: 0.5rem !important;
   }
-  .navbar-expand-lg .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
+  .pb-xxl-3 {
+    padding-bottom: 1rem !important;
   }
-  .navbar-expand-lg .navbar-toggler {
-    display: none;
+  .pb-xxl-4 {
+    padding-bottom: 1.5rem !important;
   }
-  .navbar-expand-lg .offcanvas-header {
-    display: none;
+  .pb-xxl-5 {
+    padding-bottom: 2rem !important;
   }
-  .navbar-expand-lg .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
+  .pb-xxl-6 {
+    padding-bottom: 2.5rem !important;
   }
-  .navbar-expand-lg .offcanvas-top,
-.navbar-expand-lg .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
+  .pb-xxl-7 {
+    padding-bottom: 3rem !important;
   }
-  .navbar-expand-lg .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
+  .pb-xxl-8 {
+    padding-bottom: 3.5rem !important;
   }
-}
-@media (min-width: 1200px) {
-  .navbar-expand-xl {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
+  .ps-xxl-0 {
+    padding-left: 0 !important;
   }
-  .navbar-expand-xl .navbar-nav {
-    flex-direction: row;
+  .ps-xxl-1 {
+    padding-left: 0.25rem !important;
   }
-  .navbar-expand-xl .navbar-nav .dropdown-menu {
-    position: absolute;
+  .ps-xxl-2 {
+    padding-left: 0.5rem !important;
   }
-  .navbar-expand-xl .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+  .ps-xxl-3 {
+    padding-left: 1rem !important;
   }
-  .navbar-expand-xl .navbar-nav-scroll {
-    overflow: visible;
+  .ps-xxl-4 {
+    padding-left: 1.5rem !important;
   }
-  .navbar-expand-xl .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
+  .ps-xxl-5 {
+    padding-left: 2rem !important;
   }
-  .navbar-expand-xl .navbar-toggler {
-    display: none;
+  .ps-xxl-6 {
+    padding-left: 2.5rem !important;
   }
-  .navbar-expand-xl .offcanvas-header {
-    display: none;
+  .ps-xxl-7 {
+    padding-left: 3rem !important;
   }
-  .navbar-expand-xl .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
+  .ps-xxl-8 {
+    padding-left: 3.5rem !important;
   }
-  .navbar-expand-xl .offcanvas-top,
-.navbar-expand-xl .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
+  .text-xxl-start {
+    text-align: left !important;
   }
-  .navbar-expand-xl .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
+  .text-xxl-end {
+    text-align: right !important;
+  }
+  .text-xxl-center {
+    text-align: center !important;
   }
 }
-@media (min-width: 1400px) {
-  .navbar-expand-xxl {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
+@media (min-width: 1200px) {
+  .fs-0 {
+    font-size: 3.5rem !important;
   }
-  .navbar-expand-xxl .navbar-nav {
-    flex-direction: row;
+  .fs-1 {
+    font-size: 2.5rem !important;
   }
-  .navbar-expand-xxl .navbar-nav .dropdown-menu {
-    position: absolute;
+  .fs-2 {
+    font-size: 2rem !important;
   }
-  .navbar-expand-xxl .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+  .fs-3 {
+    font-size: 1.5rem !important;
   }
-  .navbar-expand-xxl .navbar-nav-scroll {
-    overflow: visible;
+}
+@media print {
+  .d-print-inline {
+    display: inline !important;
   }
-  .navbar-expand-xxl .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
+  .d-print-inline-block {
+    display: inline-block !important;
   }
-  .navbar-expand-xxl .navbar-toggler {
-    display: none;
+  .d-print-block {
+    display: block !important;
   }
-  .navbar-expand-xxl .offcanvas-header {
-    display: none;
+  .d-print-grid {
+    display: grid !important;
   }
-  .navbar-expand-xxl .offcanvas {
-    position: inherit;
-    bottom: 0;
-    z-index: 1000;
-    flex-grow: 1;
-    visibility: visible !important;
-    background-color: transparent;
-    border-right: 0;
-    border-left: 0;
-    transition: none;
-    transform: none;
+  .d-print-table {
+    display: table !important;
   }
-  .navbar-expand-xxl .offcanvas-top,
-.navbar-expand-xxl .offcanvas-bottom {
-    height: auto;
-    border-top: 0;
-    border-bottom: 0;
+  .d-print-table-row {
+    display: table-row !important;
   }
-  .navbar-expand-xxl .offcanvas-body {
-    display: flex;
-    flex-grow: 0;
-    padding: 0;
-    overflow-y: visible;
+  .d-print-table-cell {
+    display: table-cell !important;
   }
-}
-.navbar-expand {
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-}
-.navbar-expand .navbar-nav {
-  flex-direction: row;
-}
-.navbar-expand .navbar-nav .dropdown-menu {
-  position: absolute;
-}
-.navbar-expand .navbar-nav .nav-link {
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-.navbar-expand .navbar-nav-scroll {
-  overflow: visible;
-}
-.navbar-expand .navbar-collapse {
-  display: flex !important;
-  flex-basis: auto;
-}
-.navbar-expand .navbar-toggler {
-  display: none;
-}
-.navbar-expand .offcanvas-header {
-  display: none;
-}
-.navbar-expand .offcanvas {
-  position: inherit;
-  bottom: 0;
-  z-index: 1000;
-  flex-grow: 1;
-  visibility: visible !important;
-  background-color: transparent;
-  border-right: 0;
-  border-left: 0;
-  transition: none;
-  transform: none;
-}
-.navbar-expand .offcanvas-top,
-.navbar-expand .offcanvas-bottom {
-  height: auto;
-  border-top: 0;
-  border-bottom: 0;
-}
-.navbar-expand .offcanvas-body {
-  display: flex;
-  flex-grow: 0;
-  padding: 0;
-  overflow-y: visible;
-}
-
-.navbar-light .navbar-brand {
-  color: rgba(0, 0, 0, 0.9);
-}
-.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
-  color: rgba(0, 0, 0, 0.9);
-}
-.navbar-light .navbar-nav .nav-link {
-  color: rgba(0, 0, 0, 0.55);
-}
-.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
-  color: rgba(0, 0, 0, 0.7);
-}
-.navbar-light .navbar-nav .nav-link.disabled {
-  color: rgba(0, 0, 0, 0.3);
-}
-.navbar-light .navbar-nav .show > .nav-link,
-.navbar-light .navbar-nav .nav-link.active {
-  color: rgba(0, 0, 0, 0.9);
-}
-.navbar-light .navbar-toggler {
-  color: rgba(0, 0, 0, 0.55);
-  border-color: rgba(0, 0, 0, 0.1);
-}
-.navbar-light .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-.navbar-light .navbar-text {
-  color: rgba(0, 0, 0, 0.55);
-}
-.navbar-light .navbar-text a,
-.navbar-light .navbar-text a:hover,
-.navbar-light .navbar-text a:focus {
-  color: rgba(0, 0, 0, 0.9);
-}
-
-.navbar-dark .navbar-brand {
-  color: #fff;
-}
-.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
-  color: #fff;
-}
-.navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.55);
-}
-.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
-  color: rgba(255, 255, 255, 0.75);
-}
-.navbar-dark .navbar-nav .nav-link.disabled {
-  color: rgba(255, 255, 255, 0.25);
-}
-.navbar-dark .navbar-nav .show > .nav-link,
-.navbar-dark .navbar-nav .nav-link.active {
-  color: #fff;
-}
-.navbar-dark .navbar-toggler {
-  color: rgba(255, 255, 255, 0.55);
-  border-color: rgba(255, 255, 255, 0.1);
-}
-.navbar-dark .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-.navbar-dark .navbar-text {
-  color: rgba(255, 255, 255, 0.55);
-}
-.navbar-dark .navbar-text a,
-.navbar-dark .navbar-text a:hover,
-.navbar-dark .navbar-text a:focus {
-  color: #fff;
-}
-
-.sgds.navbar {
-  padding: 0 calc(2rem) 0;
-  min-height: 80px;
-  align-items: stretch;
-}
-@media (max-width: 991.98px) {
-  .sgds.navbar {
-    padding: 0 1rem 0;
-    overflow-x: scroll;
+  .d-print-flex {
+    display: flex !important;
+  }
+  .d-print-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-print-none {
+    display: none !important;
   }
 }
-.sgds.navbar a.navbar-brand {
-  display: flex;
-  align-items: center;
-  padding-bottom: 0.125rem;
-}
-.sgds.navbar .navbar-collapse {
-  align-items: stretch;
-}
-.sgds.navbar .nav-item.has-megamenu {
-  position: static;
-}
-.sgds.navbar .nav-item a.nav-link {
-  color: #344054;
-  border-bottom: 0.125rem solid transparent;
-  min-height: 100%;
-  display: flex;
-  align-items: center;
-}
-.sgds.navbar .nav-item a.nav-link.active, .sgds.navbar .nav-item a.nav-link:hover {
-  color: #5925DC;
-  border-color: #5925DC;
-}
-.sgds.navbar .nav-item a.nav-link.dropdown-toggle {
-  gap: 0.75rem;
-}
-.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show {
-  color: #5925DC;
-  border-bottom: 0.125rem solid #5925DC;
-}
-.sgds.navbar .dropdown-menu {
-  margin-top: 0;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 0 0 5px 5px;
-  background-color: #fff;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-}
-.sgds.navbar .dropdown-menu.megamenu {
-  left: 0;
-  right: 0;
-  width: 100%;
-}
-
-:host {
-  --mainnav-item-theme-color: #5925DC;
-}
-
-.nav-item {
-  height: 100%;
-}
-
 a.nav-link {
-  display: flex;
-  color: #344054;
-  border-bottom: 0.125rem solid transparent;
-  min-height: 100%;
-  align-items: center;
+  display: block;
+  color: inherit;
+  font-size: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: calc(
+      4rem + 0.125rem
+    );
+  padding-right: 0;
+  text-decoration: none;
 }
 a.nav-link.active, a.nav-link:hover {
-  color: var(--mainnav-item-theme-color);
-  border-color: var(--mainnav-item-theme-color);
+  color: var(--sidenav-theme-color);
 }`;
 
-    let MainNavItem = class MainNavItem extends s$2 {
+    let SgdsSidenavLink = class SgdsSidenavLink extends SgdsElement {
         constructor() {
             super(...arguments);
             this.active = false;
@@ -51967,7 +52043,7 @@ a.nav-link.active, a.nav-link:hover {
         }
         render() {
             return y `
-      <li class="nav-item">
+      <li>
         <a href="${this.href}" class="nav-link ${this.active ? "active" : null}"
           ><slot></slot
         ></a>
@@ -51975,16 +52051,16 @@ a.nav-link.active, a.nav-link:hover {
     `;
         }
     };
-    MainNavItem.styles = css_248z;
+    SgdsSidenavLink.styles = css_248z;
     __decorate([
-        e$3({ type: Boolean })
-    ], MainNavItem.prototype, "active", void 0);
+        e$4({ type: Boolean })
+    ], SgdsSidenavLink.prototype, "active", void 0);
     __decorate([
-        e$3({ type: String })
-    ], MainNavItem.prototype, "href", void 0);
-    MainNavItem = __decorate([
-        e$4("mainnav-item")
-    ], MainNavItem);
+        e$4({ type: String })
+    ], SgdsSidenavLink.prototype, "href", void 0);
+    SgdsSidenavLink = __decorate([
+        e$5("sgds-sidenav-link")
+    ], SgdsSidenavLink);
 
 }));
 //# sourceMappingURL=index.js.map