npm - @nanoporetech-digital/components - Versions diffs - 3.13.0 → 3.14.0 - Mend

@nanoporetech-digital/components 3.13.0 → 3.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/docs-json.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-02-21T14:21:18",
+  "timestamp": "2023-02-23T16:14:30",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.6",
@@ -2103,17 +2103,17 @@
         {
           "name": "--segment-shadow",
           "annotation": "prop",
-          "docs": "0 1px 4px rgba(0,0,0,.2);"
+          "docs": "0 1px 4px rgb(0 0 0 / 20%);"
         },
         {
           "name": "--tagbox-bg-color",
           "annotation": "prop",
-          "docs": "Defaults to rgba(var(--tagbox-rgb), .1);"
+          "docs": "Defaults to rgb(var(--tagbox-rgb) / 10%);"
         },
         {
           "name": "--tagbox-border-color",
           "annotation": "prop",
-          "docs": "Defaults to rgba(var(--tagbox-rgb), .5);"
+          "docs": "Defaults to rgb(var(--tagbox-rgb) / 50%);"
         },
         {
           "name": "--tagbox-rgb",
@@ -4962,7 +4962,7 @@
         {
           "name": "--panel-shadow",
           "annotation": "prop",
-          "docs": "Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';"
+          "docs": "Defaults to '0 4px 16px rgb(0 0 0 / 10%)';"
         },
         {
           "name": "--size",
@@ -6872,12 +6872,12 @@
         {
           "name": "--bar-color-shade",
           "annotation": "prop",
-          "docs": "Defaults to rgb(19, 89, 111);"
+          "docs": "Defaults to rgb(19 89 111);"
         },
         {
           "name": "--bar-color-tint",
           "annotation": "prop",
-          "docs": "Defaults to rgb(19, 89, 111);"
+          "docs": "Defaults to rgb(19 89 111);"
         },
         {
           "name": "--bar-dropdown-bg",
@@ -9531,12 +9531,12 @@
         {
           "name": "--clear-btn-color--hover",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color--focus-rgb), 1);"
+          "docs": "defaults to rgb(var(--color--focus-rgb) / 100%);"
         },
         {
           "name": "--clear-btn-color--invalid",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color-invalid), 1);"
+          "docs": "defaults to rgb(var(--color-invalid) / 100%);"
         },
         {
           "name": "--color--focus-rgb",
@@ -9606,7 +9606,7 @@
         {
           "name": "--invalid-msg-color",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color-invalid), 1);"
+          "docs": "defaults to rgb(var(--color-invalid) / 100%);"
         },
         {
           "name": "--invalid-msg-font-size",
@@ -10873,7 +10873,7 @@
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "The indicator color. Default rgba(var(--nano-indicator-rgb, 84 140 175), 1);"
+          "docs": "The indicator color. Default rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);"
         },
         {
           "name": "--label-color",
@@ -10883,7 +10883,7 @@
         {
           "name": "--track-color",
           "annotation": "prop",
-          "docs": "The track color. Default rgba(var(--nano-track-rgb, 228 230 232), 1);"
+          "docs": "The track color. Default rgb(var(--nano-track-rgb, 228 230 232) / 100%);"
         }
       ],
       "slots": [
@@ -11273,7 +11273,7 @@
         {
           "name": "--knob-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);"
+          "docs": "Box shadow of the range knob; Defaults to 0 2px 4px 0 rgb(0 0 0 / 30%);"
         },
         {
           "name": "--knob-handle-size",
@@ -12450,12 +12450,12 @@
         {
           "name": "--clear-btn-color--hover",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color--focus-rgb), 1);"
+          "docs": "defaults to rgb(var(--color--focus-rgb) / 100%);"
         },
         {
           "name": "--clear-btn-color--invalid",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color-invalid), 1);"
+          "docs": "defaults to rgb(var(--color-invalid) / 100%);"
         },
         {
           "name": "--color--focus-rgb",
@@ -12525,7 +12525,7 @@
         {
           "name": "--invalid-msg-color",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color-invalid), 1);"
+          "docs": "defaults to rgb(var(--color-invalid) / 100%);"
         },
         {
           "name": "--invalid-msg-font-size",
@@ -12715,12 +12715,12 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));"
+          "docs": "default var(--nano-skeleton-color, rgb(var(--base-color-rgb), 1));"
         },
         {
           "name": "--tint",
           "annotation": "prop",
-          "docs": "default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));"
+          "docs": "default var(--nano-skeleton-tint, rgb(var(--base-color-rgb), .3));"
         }
       ],
       "slots": [],
@@ -13400,7 +13400,7 @@
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));"
+          "docs": "default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));"
         },
         {
           "name": "--overlay-color",
@@ -13415,7 +13415,7 @@
         {
           "name": "--track-color",
           "annotation": "prop",
-          "docs": "default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));"
+          "docs": "default var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));"
         }
       ],
       "slots": [
@@ -14213,7 +14213,7 @@
         {
           "name": "--active-bg",
           "annotation": "prop",
-          "docs": "Defaults to rgba(var(--bg-rgb), 1);"
+          "docs": "Defaults to rgb(var(--bg-rgb) / 10%);"
         },
         {
           "name": "--active-text-color",
@@ -14248,7 +14248,7 @@
         {
           "name": "--inactive-bg",
           "annotation": "prop",
-          "docs": "Defaults to rgba(var(--bg-rgb), 0.7);"
+          "docs": "Defaults to rgb(var(--bg-rgb) / 70%);"
         },
         {
           "name": "--padding",

package/hydrate/index.js CHANGED Viewed

@@ -17579,6 +17579,25 @@ class GlobalNav {
           break;
       }
     };
+    // Various.
+    /**
+     * Assesses what content is present in which slots
+     */
+    this.assessSlottedContent = () => {
+      readTask(() => {
+        this.hasSiteSlot = !!this.el.querySelectorAll('[slot="site"]').length;
+        this.hasLoggedinSlot =
+          !!this.el.querySelectorAll('[slot="loggedin"]').length;
+        this.hasPromotionSlot =
+          !!this.el.querySelectorAll('[slot="promotion"]').length;
+        this.aboutSlotLen = this.el.querySelectorAll('[slot="about"]').length;
+        this.iconSlotLen = this.el.querySelectorAll('[slot="icon"]').length;
+        this.mainSlotLen = this.el.querySelectorAll('[slot="main"]').length;
+        this.overflowSlotLen =
+          this.el.querySelectorAll('[slot="overflow"]').length;
+        this.searchSlotLen = this.el.querySelectorAll('[slot="search"]').length;
+      });
+    };
     this.userProfileUrl = '';
     this.hasLoggedinSlot = false;
     this.hasSiteSlot = false;
@@ -17624,6 +17643,7 @@ class GlobalNav {
     this.msgCount = 0;
     this.cartUrl = null;
     this.msgUrl = null;
+    this.assessSlottedContent = debounce$2(this.assessSlottedContent.bind(this), 10);
   }
   handleMyAccountData() {
     if (!this.myAccountData)
@@ -17763,11 +17783,6 @@ class GlobalNav {
       this.thresholdReady = true;
       // content now fits so add / remove context classes
       // on nav-items depending on whether they're added to bar or burger.
-      // if (this.siteContent) {
-      //   this.siteContent.style.minHeight = `calc(100% - ${
-      //     this.barsDiv.clientHeight + 1
-      //   }px)`;
-      // }
       let menuItems, barItems;
       readTask(() => {
         menuItems = [
@@ -17938,25 +17953,6 @@ class GlobalNav {
     autocompleteEle.focus({ preventScroll: true });
     autocompleteEle.setAttribute('aria-selected', 'true');
   }
-  // Various.
-  /**
-   * Assesses what content is present in which slots
-   */
-  assessSlottedContent() {
-    readTask(() => {
-      this.hasSiteSlot = !!this.el.querySelectorAll('[slot="site"]').length;
-      this.hasLoggedinSlot =
-        !!this.el.querySelectorAll('[slot="loggedin"]').length;
-      this.hasPromotionSlot =
-        !!this.el.querySelectorAll('[slot="promotion"]').length;
-      this.aboutSlotLen = this.el.querySelectorAll('[slot="about"]').length;
-      this.iconSlotLen = this.el.querySelectorAll('[slot="icon"]').length;
-      this.mainSlotLen = this.el.querySelectorAll('[slot="main"]').length;
-      this.overflowSlotLen =
-        this.el.querySelectorAll('[slot="overflow"]').length;
-      this.searchSlotLen = this.el.querySelectorAll('[slot="search"]').length;
-    });
-  }
   /**
    * Attach the IntersectionObserver - from which all threshold / breakpoint logic hinges
    */
@@ -18087,28 +18083,28 @@ class GlobalNav {
         this.msgUrl && (hAsync("a", { href: this.msgUrl, class: "icon-btn" }, hAsync("nano-icon", { name: "light/bell" }), this.msgCount > 0 && (hAsync("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
         this.cartUrl && (hAsync("a", { href: this.cartUrl, class: "icon-btn" }, hAsync("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (hAsync("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
       ],
-    ], this.myAccData && this.myAccData.urls.login && (hAsync("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', hAsync("nano-icon", { name: "solid/chevron-right" })))), hAsync("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, hAsync("div", { class: "content" }, hAsync("nav", { class: "nav-links nav-links--main", role: "menu" }, hAsync("slot", { name: "overflow" }), this.threshold <
+    ], this.myAccData && this.myAccData.urls.login && (hAsync("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', hAsync("nano-icon", { name: "solid/chevron-right" })))), hAsync("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, hAsync("div", { class: "content" }, hAsync("nav", { class: "nav-links nav-links--main", role: "menu" }, hAsync("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold <
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
-      !!this.mainSlotLen && hAsync("slot", { name: "main" })), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
+      !!this.mainSlotLen && (hAsync("slot", { name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.hasSiteSlot) ||
       !!this.siteNavItms.length) && (hAsync("div", null, (this.hasSiteSlot || !!this.siteNavItms.length) && [
       (this.threshold >= this.THRESHOLDLIMIT - 2 ||
         this.mainSlotLen < 2) &&
-        this.overflowSlotLen < 2 && (hAsync("div", { class: "nav-links-wrap" }, hAsync("h4", { class: "nav-links_title nav-links_title--sites" }, "Sites"), hAsync("nav", { class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, hAsync("slot", { name: "site" }), this.siteNavItms.map((link) => {
+        this.overflowSlotLen < 2 && (hAsync("div", { class: "nav-links-wrap" }, hAsync("h4", { class: "nav-links_title nav-links_title--sites" }, "Sites"), hAsync("nav", { class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, hAsync("slot", { name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
         return (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: link.address, target: link.target }, link.title)));
       })))),
       ((this.threshold < this.THRESHOLDLIMIT - 2 &&
         this.mainSlotLen >= 2) ||
-        this.overflowSlotLen >= 2) && (hAsync("nav", { class: "nav-links", "aria-label": "Different company site links" }, hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, "Sites", hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { slot: "secondary" }, hAsync("div", { class: "content" }, hAsync("button", { class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), "Sites"), hAsync("div", { class: "content--sub" }, hAsync("slot", { name: "site" }), this.siteNavItms.map((link) => {
+        this.overflowSlotLen >= 2) && (hAsync("nav", { class: "nav-links", "aria-label": "Different company site links" }, hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, "Sites", hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { slot: "secondary" }, hAsync("div", { class: "content" }, hAsync("button", { class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), "Sites"), hAsync("div", { class: "content--sub" }, hAsync("slot", { name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
         return (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: link.address, target: link.target }, link.title)));
       }))))))),
     ]))), this.isLoggedIn &&
       this.threshold <
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
-      (this.loggedInNavItms.length || this.hasLoggedinSlot) && (hAsync("nav", { class: "nav-links", "aria-label": "Your user account links" }, hAsync("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu" }, this.myAccountUser.name, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { slot: "secondary" }, hAsync("div", { class: "content" }, hAsync("button", { class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), this.myAccountUser.name), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (hAsync("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { class: "content--sub" }, hAsync("slot", { name: "loggedin" }), this.loggedInNavItms.map((link) => {
+      (this.loggedInNavItms.length || this.hasLoggedinSlot) && (hAsync("nav", { class: "nav-links", "aria-label": "Your user account links" }, hAsync("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu" }, this.myAccountUser.name, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { slot: "secondary" }, hAsync("div", { class: "content" }, hAsync("button", { class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), this.myAccountUser.name), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (hAsync("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { class: "content--sub" }, hAsync("slot", { name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
       return (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: link.address, target: link.target }, link.title)));
     }), hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: this.myAccData.urls.forgot_password +
-        this.ssoRedirect }, "Change Password")))))))), hAsync("slot", { name: "promotion" }), this.myAccData && this.myAccData.urls.logout && (hAsync("div", { class: "login-btn logout-btn" }, hAsync("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), hAsync("div", { class: "sticker-trigger" }), hAsync("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, hAsync("div", { class: "bars" }, hAsync("nav", { class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
+        this.ssoRedirect }, "Change Password")))))))), hAsync("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (hAsync("div", { class: "login-btn logout-btn" }, hAsync("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), hAsync("div", { class: "sticker-trigger" }), hAsync("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, hAsync("div", { class: "bars" }, hAsync("nav", { class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
         this.threshold >= this.THRESHOLDLIMIT - THRESHOLDBREAKS.main
         ? 'menu'
         : undefined }, (this.hasPromotionSlot ||
@@ -18127,14 +18123,14 @@ class GlobalNav {
         this.threshold <
           this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
       this.hasSiteSlot ||
-      !!this.siteNavItms.length) && (hAsync("button", { class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, hAsync("nano-icon", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (hAsync("a", { href: this.logoUrl, class: "logo-link" }, hAsync("img", { src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (hAsync("div", { class: "logo-link" }, hAsync("slot", { name: "logo" }))), hAsync("div", { class: "nav-links nav-links--main" }, hAsync("slot", { name: "main" })), this.mainSlotLen === 0 &&
+      !!this.siteNavItms.length) && (hAsync("button", { class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, hAsync("nano-icon", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (hAsync("a", { href: this.logoUrl, class: "logo-link" }, hAsync("img", { src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (hAsync("div", { class: "logo-link" }, hAsync("slot", { name: "logo", onSlotchange: this.assessSlottedContent }))), hAsync("div", { class: "nav-links nav-links--main" }, hAsync("slot", { name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
       this.threshold >=
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
       this.showSearch && !!this.internalSearchIndeces.length && (hAsync("div", { class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
           ? 'true'
           : 'false' }, searchWidget)),
       (!this.showSearch || !this.myAccData) &&
-        !!this.searchSlotLen && hAsync("slot", { name: "search" }),
+        !!this.searchSlotLen && (hAsync("slot", { name: "search", onSlotchange: this.assessSlottedContent })),
     ], (this.mainSlotLen > 0 ||
       this.threshold <
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
@@ -18154,7 +18150,7 @@ class GlobalNav {
       ],
     ], (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.threshold >=
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (hAsync("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, hAsync("slot", { name: "about" }), !!this.aboutNavItms.length && (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, hAsync("a", { href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
+        this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (hAsync("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, hAsync("slot", { name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, hAsync("a", { href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
       (!this.activeMyAccountSections ||
         this.activeMyAccountSections.includes('loggedin')) &&
       this.threshold >=
@@ -18174,7 +18170,7 @@ class GlobalNav {
         'search-bar': true,
         show: this.searchBarShown,
       }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div) }, hAsync("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (hAsync("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
-      !!this.searchSlotLen && hAsync("slot", { name: "search" })))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
+      !!this.searchSlotLen && (hAsync("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
       this.menuFullScreen) && (hAsync("div", { class: {
         mask: true,
         open: this.modalOpen,
@@ -19311,7 +19307,7 @@ class GridItem {
   }; }
 }
-const heroCss = "/*!@:host*/.sc-nano-hero-h {\n  box-sizing: border-box;\n}\n\n/*!@*,\n*::before,\n*::after*/*.sc-nano-hero, *.sc-nano-hero::before, *.sc-nano-hero::after {\n  box-sizing: border-box;\n}\n/*!@[hidden]*/[hidden].sc-nano-hero {\n  display: none !important;\n}\n\n/*!@:host*/.sc-nano-hero-h {\n  \n  display: block;\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0, 0, 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n}\n\n/*!@:host(.is-xl)*/.is-xl.sc-nano-hero-h {\n  --quote-size: 3rem;\n}\n\n/*!@:host([theme=light])*/[theme=light].sc-nano-hero-h {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255, 255, 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n/*!@:host([theme=light]) .hero__primary-content*/[theme=light].sc-nano-hero-h .hero__primary-content.sc-nano-hero {\n  --color: #4a4a4a;\n}\n\n/*!@.hero*/.hero.sc-nano-hero {\n  position: relative;\n}\n/*!@.hero--rtl*/.hero--rtl.sc-nano-hero {\n  --scrim-direction: 270deg;\n}\n/*!@.hero--secondary:not(.hero--iconbox)*/.hero--secondary.sc-nano-hero:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n/*!@.hero__bg-wrap*/.hero__bg-wrap.sc-nano-hero {\n  overflow: hidden;\n}\n/*!@.hero__bg-slot*/.hero__bg-slot.sc-nano-hero {\n  position: absolute;\n  inset: 0;\n}\n/*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  -webkit-margin-after: -64px;\n          margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (max-width: 52em) {\n  /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n    display: none;\n  }\n}\n@media (max-width: 58em) {\n  /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n    -webkit-margin-after: -48px;\n            margin-block-end: -48px;\n  }\n}\n/*!@.hero__ctas ::slotted(a.button[slot=secondary-ctas])*/.hero__ctas .sc-nano-hero-s > a.button[slot=secondary-ctas] {\n  padding-block: 0.25rem !important;\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n/*!@.hero__img*/.hero__img.sc-nano-hero {\n  display: block;\n  container-type: inline-size;\n  --padding: inherit;\n}\n/*!@.hero__breadcrumbs*/.hero__breadcrumbs.sc-nano-hero {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n/*!@.hero--breadcrumb .hero__breadcrumbs*/.hero--breadcrumb.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  display: block;\n}\n/*!@.is-xl .hero__breadcrumbs*/.is-xl.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 50px;\n  max-inline-size: 50%;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n/*!@.is-xxl .hero__breadcrumbs*/.is-xxl.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n/*!@.hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  -webkit-margin-after: 16px;\n          margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n/*!@.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero--hasbg .hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n/*!@.hero__breadcrumbs ::slotted(a[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > a[slot=breadcrumb] {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n/*!@.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > .slash[slot=breadcrumb] {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n/*!@.hero__scrim*/.hero__scrim.sc-nano-hero {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n/*!@.hero--scrim .hero__scrim*/.hero--scrim.sc-nano-hero .hero__scrim.sc-nano-hero {\n  background: none;\n}\n/*!@.hero__content*/.hero__content.sc-nano-hero {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n/*!@.hero__content.is-xl*/.hero__content.is-xl.sc-nano-hero {\n  -webkit-margin-before: 50px;\n          margin-block-start: 50px;\n  max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n/*!@.hero__content.is-xxl*/.hero__content.is-xxl.sc-nano-hero {\n  -webkit-margin-before: 83px;\n          margin-block-start: 83px;\n  max-inline-size: 1606px;\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n/*!@.hero__primary*/.hero__primary.sc-nano-hero {\n  margin: 16px;\n}\n/*!@.hero--breadcrumb .hero__primary*/.hero--breadcrumb.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n/*!@.hero--backbtn .hero__primary*/.hero--backbtn.sc-nano-hero .hero__primary.sc-nano-hero {\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n/*!@.hero__primary ::slotted(nano-icon-button[slot=back-btn])*/.hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n  font-size: 2rem;\n}\n/*!@.is-xl .hero__primary*/.is-xl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 50px;\n  margin-inline: 50px 0;\n}\n/*!@.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn])*/.is-xl .hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n  margin-block: 0;\n  margin-inline: -3rem 0;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary.sc-nano-hero-s > nano-icon-button[slot=back-btn], \n  .hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n/*!@.is-xxl .hero__primary*/.is-xxl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 83px !important;\n  margin-inline: 83px 0 !important;\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n/*!@.hero__primary-content*/.hero__primary-content.sc-nano-hero {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n/*!@.hero--backbtn .hero__primary-content > div*/.hero--backbtn.sc-nano-hero .hero__primary-content.sc-nano-hero > div.sc-nano-hero {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n/*!@.hero__primary-content ::slotted(h1[slot=primary-content])*/.hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n/*!@.is-xl .hero__primary-content ::slotted(h1[slot=primary-content])*/.is-xl .hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n  line-height: 31px !important;\n  -webkit-margin-after: 30px !important;\n          margin-block-end: 30px !important;\n}\n/*!@.is-xl .hero__primary-content ::slotted(.button[slot=primary-content])*/.is-xl .hero__primary-content .sc-nano-hero-s > .button[slot=primary-content] {\n  -webkit-margin-before: 20px !important;\n          margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content.sc-nano-hero-s > h1[slot=primary-content], \n@container (min-width: 800px) {\n  .hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n    line-height: 31px !important;\n    -webkit-margin-after: 30px !important;\n            margin-block-end: 30px !important;\n  }\n  .hero__primary-content.sc-nano-hero-s > .button[slot=primary-content], \n  .hero__primary-content .sc-nano-hero-s > .button[slot=primary-content] {\n    -webkit-margin-before: 20px !important;\n            margin-block-start: 20px !important;\n  }\n}\n/*!@.hero__secondary*/.hero__secondary.sc-nano-hero {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n/*!@.hero--secondary .hero__secondary*/.hero--secondary.sc-nano-hero .hero__secondary.sc-nano-hero {\n  display: flex;\n  align-items: center;\n}\n/*!@.is-xl .hero__secondary*/.is-xl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 50px;\n  padding-inline: 50px;\n  justify-content: flex-end;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n/*!@.is-xxl .hero__secondary*/.is-xxl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 83px;\n  padding-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n/*!@.hero__icon-box*/.hero__icon-box.sc-nano-hero {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  -webkit-margin-after: auto;\n          margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n/*!@.is-xl .hero__icon-box*/.is-xl.sc-nano-hero .hero__icon-box.sc-nano-hero {\n  max-inline-size: 410px;\n  flex: 0 1 410px;\n}\n/*!@.hero__icon-box ::slotted([slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > [slot=icon-box-item] {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  -webkit-margin-after: 20px;\n          margin-block-end: 20px;\n}\n/*!@.hero__icon-box ::slotted(.last[slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > .last[slot=icon-box-item] {\n  -webkit-margin-after: 0;\n          margin-block-end: 0;\n}\n/*!@.hero__quote-content*/.hero__quote-content.sc-nano-hero {\n  -webkit-margin-before: auto;\n          margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n/*!@.is-xl .hero__quote-content*/.is-xl.sc-nano-hero .hero__quote-content.sc-nano-hero {\n  max-inline-size: 500px;\n  flex: 0 1 500px;\n  text-align: initial;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n/*!@.hero__quote::before, .hero__quote::after*/.hero__quote.sc-nano-hero::before, .hero__quote.sc-nano-hero::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 700;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n/*!@.hero__quote ::slotted([slot=quote])*/.hero__quote .sc-nano-hero-s > [slot=quote] {\n  font-size: var(--quote-size);\n  font-weight: 300;\n  font-style: italic;\n  display: inline;\n}\n/*!@.hero__quote-author*/.hero__quote-author.sc-nano-hero {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n/*!@.hero--sub .hero__content.is-xl*/.hero--sub.sc-nano-hero .hero__content.is-xl.sc-nano-hero {\n  -webkit-margin-before: 40px;\n          margin-block-start: 40px;\n}\n/*!@.hero--sub .hero__content.is-xl .hero__primary*/.hero--sub.sc-nano-hero .hero__content.is-xl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 40px;\n  margin-inline: 50px 0;\n}\n/*!@.hero--sub .hero__content.is-xl .hero__secondary*/.hero--sub.sc-nano-hero .hero__content.is-xl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 50px;\n  padding-inline: 40px 50px;\n}\n/*!@.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content])*/.hero--sub .hero__content.is-xl .sc-nano-hero-s > .button[slot=primary-content] {\n  -webkit-margin-before: 8px !important;\n          margin-block-start: 8px !important;\n}\n/*!@.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content])*/.hero--sub .hero__content.is-xl .sc-nano-hero-s > h1[slot=primary-content] {\n  -webkit-margin-after: 18px !important;\n          margin-block-end: 18px !important;\n}\n/*!@.hero--sub .hero__content.is-xxl .hero__primary*/.hero--sub.sc-nano-hero .hero__content.is-xxl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 40px;\n  margin-inline: 83px 0;\n}\n/*!@.hero--sub .hero__content.is-xxl .hero__secondary*/.hero--sub.sc-nano-hero .hero__content.is-xxl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 83px;\n  padding-inline: 40px 83px;\n}";
+const heroCss = "/*!@:host*/.sc-nano-hero-h {\n  box-sizing: border-box;\n}\n\n/*!@*,\n*::before,\n*::after*/*.sc-nano-hero, *.sc-nano-hero::before, *.sc-nano-hero::after {\n  box-sizing: border-box;\n}\n/*!@[hidden]*/[hidden].sc-nano-hero {\n  display: none !important;\n}\n\n/*!@:host*/.sc-nano-hero-h {\n  \n  display: block;\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n}\n\n/*!@:host(.is-xl)*/.is-xl.sc-nano-hero-h {\n  --quote-size: 3rem;\n}\n\n/*!@:host([theme=light])*/[theme=light].sc-nano-hero-h {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n/*!@:host([theme=light]) .hero__primary-content*/[theme=light].sc-nano-hero-h .hero__primary-content.sc-nano-hero {\n  --color: #4a4a4a;\n}\n\n/*!@.hero*/.hero.sc-nano-hero {\n  position: relative;\n}\n/*!@.hero--rtl*/.hero--rtl.sc-nano-hero {\n  --scrim-direction: 270deg;\n}\n/*!@.hero--secondary:not(.hero--iconbox)*/.hero--secondary.sc-nano-hero:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n/*!@.hero__bg-wrap*/.hero__bg-wrap.sc-nano-hero {\n  overflow: hidden;\n}\n/*!@.hero__bg-slot*/.hero__bg-slot.sc-nano-hero {\n  position: absolute;\n  inset: 0;\n}\n/*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  -webkit-margin-after: -64px;\n          margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (max-width: 52em) {\n  /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n    display: none;\n  }\n}\n@media (max-width: 58em) {\n  /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n    -webkit-margin-after: -48px;\n            margin-block-end: -48px;\n  }\n}\n/*!@.hero__ctas ::slotted(a.button[slot=secondary-ctas])*/.hero__ctas .sc-nano-hero-s > a.button[slot=secondary-ctas] {\n  padding-block: 0.25rem !important;\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n/*!@.hero__img*/.hero__img.sc-nano-hero {\n  display: block;\n  container-type: inline-size;\n  --padding: inherit;\n}\n/*!@.hero__breadcrumbs*/.hero__breadcrumbs.sc-nano-hero {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n/*!@.hero--breadcrumb .hero__breadcrumbs*/.hero--breadcrumb.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  display: block;\n}\n/*!@.is-xl .hero__breadcrumbs*/.is-xl.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 50px;\n  max-inline-size: 50%;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n/*!@.is-xxl .hero__breadcrumbs*/.is-xxl.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n/*!@.hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  -webkit-margin-after: 16px;\n          margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n/*!@.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero--hasbg .hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n/*!@.hero__breadcrumbs ::slotted(a[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > a[slot=breadcrumb] {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n/*!@.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > .slash[slot=breadcrumb] {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n/*!@.hero__scrim*/.hero__scrim.sc-nano-hero {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n/*!@.hero--scrim .hero__scrim*/.hero--scrim.sc-nano-hero .hero__scrim.sc-nano-hero {\n  background: none;\n}\n/*!@.hero__content*/.hero__content.sc-nano-hero {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n/*!@.hero__content.is-xl*/.hero__content.is-xl.sc-nano-hero {\n  -webkit-margin-before: 50px;\n          margin-block-start: 50px;\n  max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n/*!@.hero__content.is-xxl*/.hero__content.is-xxl.sc-nano-hero {\n  -webkit-margin-before: 83px;\n          margin-block-start: 83px;\n  max-inline-size: 1606px;\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n/*!@.hero__primary*/.hero__primary.sc-nano-hero {\n  margin: 16px;\n}\n/*!@.hero--breadcrumb .hero__primary*/.hero--breadcrumb.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n/*!@.hero--backbtn .hero__primary*/.hero--backbtn.sc-nano-hero .hero__primary.sc-nano-hero {\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n/*!@.hero__primary ::slotted(nano-icon-button[slot=back-btn])*/.hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n  font-size: 2rem;\n}\n/*!@.is-xl .hero__primary*/.is-xl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 50px;\n  margin-inline: 50px 0;\n}\n/*!@.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn])*/.is-xl .hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n  margin-block: 0;\n  margin-inline: -3rem 0;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary.sc-nano-hero-s > nano-icon-button[slot=back-btn], \n  .hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n/*!@.is-xxl .hero__primary*/.is-xxl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 83px !important;\n  margin-inline: 83px 0 !important;\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n/*!@.hero__primary-content*/.hero__primary-content.sc-nano-hero {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n/*!@.hero--backbtn .hero__primary-content > div*/.hero--backbtn.sc-nano-hero .hero__primary-content.sc-nano-hero > div.sc-nano-hero {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n/*!@.hero__primary-content ::slotted(h1[slot=primary-content])*/.hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n/*!@.is-xl .hero__primary-content ::slotted(h1[slot=primary-content])*/.is-xl .hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n  line-height: 31px !important;\n  -webkit-margin-after: 30px !important;\n          margin-block-end: 30px !important;\n}\n/*!@.is-xl .hero__primary-content ::slotted(.button[slot=primary-content])*/.is-xl .hero__primary-content .sc-nano-hero-s > .button[slot=primary-content] {\n  -webkit-margin-before: 20px !important;\n          margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content.sc-nano-hero-s > h1[slot=primary-content], \n@container (min-width: 800px) {\n  .hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n    line-height: 31px !important;\n    -webkit-margin-after: 30px !important;\n            margin-block-end: 30px !important;\n  }\n  .hero__primary-content.sc-nano-hero-s > .button[slot=primary-content], \n  .hero__primary-content .sc-nano-hero-s > .button[slot=primary-content] {\n    -webkit-margin-before: 20px !important;\n            margin-block-start: 20px !important;\n  }\n}\n/*!@.hero__secondary*/.hero__secondary.sc-nano-hero {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n/*!@.hero--secondary .hero__secondary*/.hero--secondary.sc-nano-hero .hero__secondary.sc-nano-hero {\n  display: flex;\n  align-items: center;\n}\n/*!@.is-xl .hero__secondary*/.is-xl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 50px;\n  padding-inline: 50px;\n  justify-content: flex-end;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n/*!@.is-xxl .hero__secondary*/.is-xxl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 83px;\n  padding-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n/*!@.hero__icon-box*/.hero__icon-box.sc-nano-hero {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  -webkit-margin-after: auto;\n          margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n/*!@.is-xl .hero__icon-box*/.is-xl.sc-nano-hero .hero__icon-box.sc-nano-hero {\n  max-inline-size: 410px;\n  flex: 0 1 410px;\n}\n/*!@.hero__icon-box ::slotted([slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > [slot=icon-box-item] {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  -webkit-margin-after: 20px;\n          margin-block-end: 20px;\n}\n/*!@.hero__icon-box ::slotted(.last[slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > .last[slot=icon-box-item] {\n  -webkit-margin-after: 0;\n          margin-block-end: 0;\n}\n/*!@.hero__quote-content*/.hero__quote-content.sc-nano-hero {\n  -webkit-margin-before: auto;\n          margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n/*!@.is-xl .hero__quote-content*/.is-xl.sc-nano-hero .hero__quote-content.sc-nano-hero {\n  max-inline-size: 500px;\n  flex: 0 1 500px;\n  text-align: initial;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n/*!@.hero__quote::before, .hero__quote::after*/.hero__quote.sc-nano-hero::before, .hero__quote.sc-nano-hero::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 700;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n/*!@.hero__quote ::slotted([slot=quote])*/.hero__quote .sc-nano-hero-s > [slot=quote] {\n  font-size: var(--quote-size);\n  font-weight: 300;\n  font-style: italic;\n  display: inline;\n}\n/*!@.hero__quote-author*/.hero__quote-author.sc-nano-hero {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n/*!@.hero--sub .hero__content.is-xl*/.hero--sub.sc-nano-hero .hero__content.is-xl.sc-nano-hero {\n  -webkit-margin-before: 40px;\n          margin-block-start: 40px;\n}\n/*!@.hero--sub .hero__content.is-xl .hero__primary*/.hero--sub.sc-nano-hero .hero__content.is-xl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 40px;\n  margin-inline: 50px 0;\n}\n/*!@.hero--sub .hero__content.is-xl .hero__secondary*/.hero--sub.sc-nano-hero .hero__content.is-xl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 50px;\n  padding-inline: 40px 50px;\n}\n/*!@.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content])*/.hero--sub .hero__content.is-xl .sc-nano-hero-s > .button[slot=primary-content] {\n  -webkit-margin-before: 8px !important;\n          margin-block-start: 8px !important;\n}\n/*!@.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content])*/.hero--sub .hero__content.is-xl .sc-nano-hero-s > h1[slot=primary-content] {\n  -webkit-margin-after: 18px !important;\n          margin-block-end: 18px !important;\n}\n/*!@.hero--sub .hero__content.is-xxl .hero__primary*/.hero--sub.sc-nano-hero .hero__content.is-xxl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 40px;\n  margin-inline: 83px 0;\n}\n/*!@.hero--sub .hero__content.is-xxl .hero__secondary*/.hero--sub.sc-nano-hero .hero__content.is-xxl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 83px;\n  padding-inline: 40px 83px;\n}";
 /**
  * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
@@ -20712,7 +20708,7 @@ class MenuDrawer {
   }; }
 }
-const navItemCss = "/*!@:host*/.sc-nano-nav-item-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-nav-item,*.sc-nano-nav-item::before,*.sc-nano-nav-item::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-nav-item{display:none !important}/*!@:host*/.sc-nano-nav-item-h{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}/*!@:host .nav-item,\n:host .link*/.sc-nano-nav-item-h .nav-item.sc-nano-nav-item,.sc-nano-nav-item-h .link.sc-nano-nav-item{outline:none !important}/*!@:host ::slotted(*),\n:host **/.sc-nano-nav-item-h .sc-nano-nav-item-s>*,.sc-nano-nav-item-h *.sc-nano-nav-item{box-sizing:border-box}/*!@:host ::slotted(button),\n:host button*/.sc-nano-nav-item-h .sc-nano-nav-item-s>button,.sc-nano-nav-item-h button.sc-nano-nav-item{background:none;border:none;margin:0}/*!@:host ::slotted(button),\n:host ::slotted(a),\n:host ::slotted(a:visited),\n:host button,\n:host a,\n:host a:visited*/.sc-nano-nav-item-h .sc-nano-nav-item-s>button,.sc-nano-nav-item-h .sc-nano-nav-item-s>a,.sc-nano-nav-item-h .sc-nano-nav-item-s>a:visited,.sc-nano-nav-item-h button.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}/*!@:host ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h .sc-nano-nav-item-s>nano-icon[slot=icon-start]{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}/*!@:host ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h .sc-nano-nav-item-s>nano-icon[slot=icon-end]{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}/*!@:host .link ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h .link .sc-nano-nav-item-s>nano-icon[slot=icon-start]{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}/*!@:host .link ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h .link .sc-nano-nav-item-s>nano-icon[slot=icon-end]{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}/*!@:host .link,\n:host button,\n:host a*/.sc-nano-nav-item-h .link.sc-nano-nav-item,.sc-nano-nav-item-h button.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center}/*!@:host .secondary-menu*/.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none}/*!@:host ::slotted(a:hover),\n:host ::slotted(button:hover),\n:host .link:hover,\n:host button:hover,\n:host a:hover*/.sc-nano-nav-item-h .sc-nano-nav-item-s>a:hover,.sc-nano-nav-item-h .sc-nano-nav-item-s>button:hover,.sc-nano-nav-item-h .link.sc-nano-nav-item:hover,.sc-nano-nav-item-h button.sc-nano-nav-item:hover,.sc-nano-nav-item-h a.sc-nano-nav-item:hover{text-decoration:inherit !important}/*!@:host button:focus-visible,\n:host a:focus-visible*/.sc-nano-nav-item-h button.sc-nano-nav-item:focus-visible,.sc-nano-nav-item-h a.sc-nano-nav-item:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@:host ::slotted(a:focus-visible),\n:host ::slotted(button:focus-visible)*/.sc-nano-nav-item-h .sc-nano-nav-item-s>a:focus-visible,.sc-nano-nav-item-h .sc-nano-nav-item-s>button:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@.nav-item.selected .link,\n.nav-item.selected button,\n.nav-item.selected a*/.nav-item.selected.sc-nano-nav-item .link.sc-nano-nav-item,.nav-item.selected.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.selected.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}/*!@.nav-item.secondary-open button,\n.nav-item.secondary-open a*/.nav-item.secondary-open.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.secondary-open.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}/*!@.nav-item.disabled*/.nav-item.disabled.sc-nano-nav-item{opacity:0.6}/*!@.nav-item.disabled button,\n.nav-item.disabled a*/.nav-item.disabled.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.disabled.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-disabled, var(--color)) !important}/*!@.nav-item:not(.nano-menu) ::slotted(a:hover),\n.nav-item:not(.nano-menu) ::slotted(button:hover),\n.nav-item:not(.nano-menu) .link:hover,\n.nav-item:not(.nano-menu) button:hover,\n.nav-item:not(.nano-menu) a:hover*/.nav-item:not(.nano-menu) .sc-nano-nav-item-s>a:hover,.nav-item:not(.nano-menu) .sc-nano-nav-item-s>button:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) .link.sc-nano-nav-item:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) button.sc-nano-nav-item:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) a.sc-nano-nav-item:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}/*!@:host(.has-focus) .link*/.has-focus.sc-nano-nav-item-h .link.sc-nano-nav-item{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}/*!@:host(.nano-global-nav-menu) a,\n:host(.nano-global-nav-menu) a:visited,\n:host(.nano-global-nav-menu) button,\n:host(.nano-global-nav-menu) .link,\n:host(.nano-menu) a,\n:host(.nano-menu) a:visited,\n:host(.nano-menu) button,\n:host(.nano-menu) .link*/.nano-global-nav-menu.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-global-nav-menu.sc-nano-nav-item-h a.sc-nano-nav-item:visited,.nano-global-nav-menu.sc-nano-nav-item-h button.sc-nano-nav-item,.nano-global-nav-menu.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h a.sc-nano-nav-item:visited,.nano-menu.sc-nano-nav-item-h button.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .link.sc-nano-nav-item{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}/*!@:host(.nano-global-nav-menu) .text,\n:host(.nano-menu) .text*/.nano-global-nav-menu.sc-nano-nav-item-h .text.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .text.sc-nano-nav-item{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}/*!@:host(.nano-global-nav-menu) ::slotted(a),\n:host(.nano-global-nav-menu) ::slotted(button),\n:host(.nano-menu) ::slotted(a),\n:host(.nano-menu) ::slotted(button)*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>a,.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>button,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>a,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>button{flex:1}/*!@:host(.nano-global-nav-menu) .secondary-menu,\n:host(.nano-menu) .secondary-menu*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}/*!@:host(.nano-global-nav-menu) .secondary-menu:focus,\n:host(.nano-menu) .secondary-menu:focus*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus,.nano-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus{outline:none}/*!@:host(.nano-global-nav-menu) .secondary-menu.open,\n:host(.nano-menu) .secondary-menu.open*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}/*!@:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:0 var(--padding-end);padding-block:0}/*!@:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}/*!@:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),\n:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-menu button .sc-nano-nav-item-s>nano-icon[slot=icon-end],.sc-nano-nav-item-h.nano-global-nav-menu a .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding:0}/*!@:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,\n:host(.nano-menu[dir=rtl]) .secondary-menu*/.nano-global-nav-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item,.nano-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{transform:translateX(-100%)}/*!@:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,\n:host(.nano-menu[dir=rtl]) .secondary-menu.open*/.nano-global-nav-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item,.nano-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(0)}/*!@:host(.nano-menu) ::slotted(a:focus),\n:host(.nano-menu) ::slotted(button:focus)*/.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>a:focus,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>button:focus{box-shadow:none}/*!@:host(.nano-menu) .secondary-menu-content*/.nano-menu.sc-nano-nav-item-h .secondary-menu-content.sc-nano-nav-item{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}/*!@:host(.nano-global-nav-bar) .link,\n:host(.nano-global-nav-bar) a,\n:host(.nano-global-nav-bar) button*/.nano-global-nav-bar.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-global-nav-bar.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item{display:flex;align-items:center;cursor:pointer}/*!@:host(.nano-global-nav-bar) .text*/.nano-global-nav-bar.sc-nano-nav-item-h .text.sc-nano-nav-item{flex:1 0 auto}/*!@:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>nano-icon[slot=icon-end]{margin-inline:var(--padding-end) 0;margin-block:0}/*!@:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>nano-icon[slot=icon-start]{margin-inline:0 var(--padding-start);margin-block:0}/*!@:host(.nano-global-nav-bar) ::slotted(a),\n:host(.nano-global-nav-bar) button*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>a,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item{position:relative}/*!@:host(.nano-global-nav-bar) ::slotted(a)::before,\n:host(.nano-global-nav-bar) button::before*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>a::before,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}/*!@:host(.nano-global-nav-bar) .selected button::before,\n:host(.nano-global-nav-bar) .secondary-open button::before*/.nano-global-nav-bar.sc-nano-nav-item-h .selected.sc-nano-nav-item button.sc-nano-nav-item::before,.nano-global-nav-bar.sc-nano-nav-item-h .secondary-open.sc-nano-nav-item button.sc-nano-nav-item::before{transform:translateZ(0) scaleX(1)}/*!@:host(.nano-global-nav-bar.selected) ::slotted(a)::before*/.sc-nano-nav-item-h.nano-global-nav-bar.selected .sc-nano-nav-item-s>a::before{transform:translateZ(0) scaleX(1)}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-open.sc-nano-nav-item button.sc-nano-nav-item::before{opacity:0.7}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-menu*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateY(12px) translateZ(0)}/*!@:host(.nano-menu-drawer) .link,\n:host(.nano-menu-drawer) a,\n:host(.nano-menu-drawer) button*/.nano-menu-drawer.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-menu-drawer.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-menu-drawer.sc-nano-nav-item-h button.sc-nano-nav-item{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}/*!@:host(.nano-menu-drawer) .text*/.nano-menu-drawer.sc-nano-nav-item-h .text.sc-nano-nav-item{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}/*!@:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-menu-drawer .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}/*!@:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-menu-drawer .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}/*!@:host(.nano-menu-drawer) .secondary-menu*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}/*!@:host(.nano-menu-drawer) .secondary-menu:focus*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus{outline:none}/*!@:host(.nano-menu-drawer) .secondary-menu.open*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(100%)}/*!@:host(.nano-menu-drawer) .notification*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item{position:relative}/*!@:host(.nano-menu-drawer) .notification::after*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item::after{content:\"\";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){/*!@:host(.nano-menu-drawer) .notification::after*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}/*!@:host(.nano-menu-drawer[dir=rtl]) .secondary-menu*/.nano-menu-drawer[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{transform:translateX(0%)}/*!@:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open*/.nano-menu-drawer[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(-100%);opacity:1}";
+const navItemCss = "/*!@:host*/.sc-nano-nav-item-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-nav-item,*.sc-nano-nav-item::before,*.sc-nano-nav-item::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-nav-item{display:none !important}/*!@:host*/.sc-nano-nav-item-h{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}/*!@:host .nav-item,\n:host .link*/.sc-nano-nav-item-h .nav-item.sc-nano-nav-item,.sc-nano-nav-item-h .link.sc-nano-nav-item{outline:none !important;border-radius:inherit}/*!@:host ::slotted(*),\n:host **/.sc-nano-nav-item-h .sc-nano-nav-item-s>*,.sc-nano-nav-item-h *.sc-nano-nav-item{box-sizing:border-box}/*!@:host ::slotted(button),\n:host button*/.sc-nano-nav-item-h .sc-nano-nav-item-s>button,.sc-nano-nav-item-h button.sc-nano-nav-item{background:none;border:none;margin:0}/*!@:host ::slotted(button),\n:host ::slotted(a),\n:host ::slotted(a:visited),\n:host button,\n:host a,\n:host a:visited*/.sc-nano-nav-item-h .sc-nano-nav-item-s>button,.sc-nano-nav-item-h .sc-nano-nav-item-s>a,.sc-nano-nav-item-h .sc-nano-nav-item-s>a:visited,.sc-nano-nav-item-h button.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}/*!@:host ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h .sc-nano-nav-item-s>nano-icon[slot=icon-start]{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}/*!@:host ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h .sc-nano-nav-item-s>nano-icon[slot=icon-end]{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}/*!@:host .link ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h .link .sc-nano-nav-item-s>nano-icon[slot=icon-start]{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}/*!@:host .link ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h .link .sc-nano-nav-item-s>nano-icon[slot=icon-end]{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}/*!@:host .link,\n:host button,\n:host a*/.sc-nano-nav-item-h .link.sc-nano-nav-item,.sc-nano-nav-item-h button.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}/*!@:host .secondary-menu*/.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none}/*!@:host ::slotted(a:hover),\n:host ::slotted(button:hover),\n:host .link:hover,\n:host button:hover,\n:host a:hover*/.sc-nano-nav-item-h .sc-nano-nav-item-s>a:hover,.sc-nano-nav-item-h .sc-nano-nav-item-s>button:hover,.sc-nano-nav-item-h .link.sc-nano-nav-item:hover,.sc-nano-nav-item-h button.sc-nano-nav-item:hover,.sc-nano-nav-item-h a.sc-nano-nav-item:hover{text-decoration:inherit !important}/*!@:host button:focus-visible,\n:host a:focus-visible*/.sc-nano-nav-item-h button.sc-nano-nav-item:focus-visible,.sc-nano-nav-item-h a.sc-nano-nav-item:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@:host ::slotted(a:focus-visible),\n:host ::slotted(button:focus-visible)*/.sc-nano-nav-item-h .sc-nano-nav-item-s>a:focus-visible,.sc-nano-nav-item-h .sc-nano-nav-item-s>button:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@.nav-item.selected .link,\n.nav-item.selected button,\n.nav-item.selected a*/.nav-item.selected.sc-nano-nav-item .link.sc-nano-nav-item,.nav-item.selected.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.selected.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}/*!@.nav-item.secondary-open button,\n.nav-item.secondary-open a*/.nav-item.secondary-open.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.secondary-open.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}/*!@.nav-item.disabled*/.nav-item.disabled.sc-nano-nav-item{opacity:0.6}/*!@.nav-item.disabled button,\n.nav-item.disabled a*/.nav-item.disabled.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.disabled.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-disabled, var(--color)) !important}/*!@.nav-item:not(.nano-menu) ::slotted(a:hover),\n.nav-item:not(.nano-menu) ::slotted(button:hover),\n.nav-item:not(.nano-menu) .link:hover,\n.nav-item:not(.nano-menu) button:hover,\n.nav-item:not(.nano-menu) a:hover*/.nav-item:not(.nano-menu) .sc-nano-nav-item-s>a:hover,.nav-item:not(.nano-menu) .sc-nano-nav-item-s>button:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) .link.sc-nano-nav-item:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) button.sc-nano-nav-item:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) a.sc-nano-nav-item:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}/*!@:host(.has-focus) .link*/.has-focus.sc-nano-nav-item-h .link.sc-nano-nav-item{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}/*!@:host(.nano-global-nav-menu) a,\n:host(.nano-global-nav-menu) a:visited,\n:host(.nano-global-nav-menu) button,\n:host(.nano-global-nav-menu) .link,\n:host(.nano-menu) a,\n:host(.nano-menu) a:visited,\n:host(.nano-menu) button,\n:host(.nano-menu) .link*/.nano-global-nav-menu.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-global-nav-menu.sc-nano-nav-item-h a.sc-nano-nav-item:visited,.nano-global-nav-menu.sc-nano-nav-item-h button.sc-nano-nav-item,.nano-global-nav-menu.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h a.sc-nano-nav-item:visited,.nano-menu.sc-nano-nav-item-h button.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .link.sc-nano-nav-item{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}/*!@:host(.nano-global-nav-menu) .text,\n:host(.nano-menu) .text*/.nano-global-nav-menu.sc-nano-nav-item-h .text.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .text.sc-nano-nav-item{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}/*!@:host(.nano-global-nav-menu) ::slotted(a),\n:host(.nano-global-nav-menu) ::slotted(button),\n:host(.nano-menu) ::slotted(a),\n:host(.nano-menu) ::slotted(button)*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>a,.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>button,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>a,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>button{flex:1}/*!@:host(.nano-global-nav-menu) .secondary-menu,\n:host(.nano-menu) .secondary-menu*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}/*!@:host(.nano-global-nav-menu) .secondary-menu:focus,\n:host(.nano-menu) .secondary-menu:focus*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus,.nano-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus{outline:none}/*!@:host(.nano-global-nav-menu) .secondary-menu.open,\n:host(.nano-menu) .secondary-menu.open*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}/*!@:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:0 var(--padding-end);padding-block:0}/*!@:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}/*!@:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),\n:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-menu button .sc-nano-nav-item-s>nano-icon[slot=icon-end],.sc-nano-nav-item-h.nano-global-nav-menu a .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding:0}/*!@:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,\n:host(.nano-menu[dir=rtl]) .secondary-menu*/.nano-global-nav-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item,.nano-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{transform:translateX(-100%)}/*!@:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,\n:host(.nano-menu[dir=rtl]) .secondary-menu.open*/.nano-global-nav-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item,.nano-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(0)}/*!@:host(.nano-menu) ::slotted(a:focus),\n:host(.nano-menu) ::slotted(button:focus)*/.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>a:focus,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>button:focus{box-shadow:none}/*!@:host(.nano-menu) .secondary-menu-content*/.nano-menu.sc-nano-nav-item-h .secondary-menu-content.sc-nano-nav-item{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}/*!@:host(.nano-global-nav-bar) .link,\n:host(.nano-global-nav-bar) a,\n:host(.nano-global-nav-bar) button*/.nano-global-nav-bar.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-global-nav-bar.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item{display:flex;align-items:center;cursor:pointer}/*!@:host(.nano-global-nav-bar) .text*/.nano-global-nav-bar.sc-nano-nav-item-h .text.sc-nano-nav-item{flex:1 0 auto}/*!@:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>nano-icon[slot=icon-end]{margin-inline:var(--padding-end) 0;margin-block:0}/*!@:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>nano-icon[slot=icon-start]{margin-inline:0 var(--padding-start);margin-block:0}/*!@:host(.nano-global-nav-bar) ::slotted(a),\n:host(.nano-global-nav-bar) button*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>a,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item{position:relative}/*!@:host(.nano-global-nav-bar) ::slotted(a)::before,\n:host(.nano-global-nav-bar) button::before*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>a::before,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}/*!@:host(.nano-global-nav-bar) .selected button::before,\n:host(.nano-global-nav-bar) .secondary-open button::before*/.nano-global-nav-bar.sc-nano-nav-item-h .selected.sc-nano-nav-item button.sc-nano-nav-item::before,.nano-global-nav-bar.sc-nano-nav-item-h .secondary-open.sc-nano-nav-item button.sc-nano-nav-item::before{transform:translateZ(0) scaleX(1)}/*!@:host(.nano-global-nav-bar.selected) ::slotted(a)::before*/.sc-nano-nav-item-h.nano-global-nav-bar.selected .sc-nano-nav-item-s>a::before{transform:translateZ(0) scaleX(1)}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-open.sc-nano-nav-item button.sc-nano-nav-item::before{opacity:0.7}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-menu*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateY(12px) translateZ(0)}/*!@:host(.nano-menu-drawer) .link,\n:host(.nano-menu-drawer) a,\n:host(.nano-menu-drawer) button*/.nano-menu-drawer.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-menu-drawer.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-menu-drawer.sc-nano-nav-item-h button.sc-nano-nav-item{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}/*!@:host(.nano-menu-drawer) .text*/.nano-menu-drawer.sc-nano-nav-item-h .text.sc-nano-nav-item{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}/*!@:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-menu-drawer .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}/*!@:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-menu-drawer .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}/*!@:host(.nano-menu-drawer) .secondary-menu*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}/*!@:host(.nano-menu-drawer) .secondary-menu:focus*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus{outline:none}/*!@:host(.nano-menu-drawer) .secondary-menu.open*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(100%)}/*!@:host(.nano-menu-drawer) .notification*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item{position:relative}/*!@:host(.nano-menu-drawer) .notification::after*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item::after{content:\"\";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){/*!@:host(.nano-menu-drawer) .notification::after*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}/*!@:host(.nano-menu-drawer[dir=rtl]) .secondary-menu*/.nano-menu-drawer[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{transform:translateX(0%)}/*!@:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open*/.nano-menu-drawer[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(-100%);opacity:1}";
 /**
  * Nav items to be used with the various nav items.
@@ -26490,7 +26486,7 @@ proto.shiftWrapCells = function () {
 const flickity = Flickity;
-const slidesCss = "/*!@:host*/.sc-nano-slides-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-slides,*.sc-nano-slides::before,*.sc-nano-slides::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@:host*/.sc-nano-slides-h{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}/*!@:host([ready])*/[ready].sc-nano-slides-h{opacity:1}/*!@.slideshow*/.slideshow.sc-nano-slides{max-height:100%;min-height:inherit;height:inherit;position:relative}/*!@.slideshow.not-ready*/.slideshow.not-ready.sc-nano-slides{max-width:100vw}/*!@.flickity-container*/.flickity-container.sc-nano-slides{opacity:0;transition:opacity 0.2s;display:flex}/*!@.not-ready .flickity-container*/.not-ready.sc-nano-slides .flickity-container.sc-nano-slides{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}/*!@.flickity-container.slides-ready*/.flickity-container.slides-ready.sc-nano-slides{min-height:inherit;max-height:inherit;height:inherit;width:auto}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@.ui-extras*/.ui-extras.sc-nano-slides{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}/*!@.ui-extras **/.ui-extras.sc-nano-slides *.sc-nano-slides{pointer-events:all}/*!@.flickity-enabled*/.flickity-enabled.sc-nano-slides{position:relative;opacity:1}/*!@.flickity-enabled:focus*/.flickity-enabled.sc-nano-slides:focus{outline:none}/*!@.flickity-viewport*/.flickity-viewport.sc-nano-slides{overflow:hidden;position:relative;min-block-size:100%;flex:1}/*!@.flickity-slider*/.flickity-slider.sc-nano-slides{position:absolute;inline-size:100%;block-size:100%}/*!@.flickity-enabled.is-draggable*/.flickity-enabled.is-draggable.sc-nano-slides{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}/*!@.flickity-enabled.is-draggable .flickity-viewport*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.sc-nano-slides{cursor:move;cursor:grab;cursor:grab}/*!@.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.is-pointer-down.sc-nano-slides{cursor:grabbing}/*!@.flickity-button*/.flickity-button.sc-nano-slides{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}/*!@.flickity-button:hover*/.flickity-button.sc-nano-slides:hover{opacity:1;cursor:pointer}/*!@.flickity-button:focus*/.flickity-button.sc-nano-slides:focus{outline:none;box-shadow:0 0 0 5px #19f}/*!@.flickity-button:active*/.flickity-button.sc-nano-slides:active{opacity:0.6}/*!@.flickity-button:disabled*/.flickity-button.sc-nano-slides:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}/*!@.flickity-button-icon*/.flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color)}/*!@.flickity-button:disabled .flickity-button-icon*/.flickity-button.sc-nano-slides:disabled .flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color-disabled)}/*!@.flickity-prev-next-button*/.flickity-prev-next-button.sc-nano-slides{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}/*!@.flickity-prev-next-button.previous*/.flickity-prev-next-button.previous.sc-nano-slides{inset-inline-start:10px}/*!@.flickity-prev-next-button.next*/.flickity-prev-next-button.next.sc-nano-slides{inset-inline-end:10px}/*!@.flickity-rtl .flickity-prev-next-button.previous*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.previous.sc-nano-slides{inset-inline:auto 10px}/*!@.flickity-rtl .flickity-prev-next-button.next*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.next.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-prev-next-button .flickity-button-icon*/.flickity-prev-next-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}/*!@.flickity-page-dots*/.flickity-page-dots.sc-nano-slides{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}/*!@.flickity-rtl .flickity-page-dots*/.flickity-rtl.sc-nano-slides .flickity-page-dots.sc-nano-slides{direction:rtl}/*!@.flickity-page-dots .dot*/.flickity-page-dots.sc-nano-slides .dot.sc-nano-slides{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}/*!@.flickity-page-dots .dot.is-selected*/.flickity-page-dots.sc-nano-slides .dot.is-selected.sc-nano-slides{opacity:1;background:var(--dot-color-active)}/*!@.flickity-enabled.is-fullscreen*/.flickity-enabled.is-fullscreen.sc-nano-slides{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}/*!@.flickity-enabled.is-fullscreen .flickity-page-dots*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-page-dots.sc-nano-slides{inset-block-end:45px}/*!@html.is-flickity-fullscreen*/html.is-flickity-fullscreen.sc-nano-slides{overflow:hidden}/*!@.flickity-fullscreen-button*/.flickity-fullscreen-button.sc-nano-slides{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}/*!@.flickity-rtl .flickity-fullscreen-button*/.flickity-rtl.sc-nano-slides .flickity-fullscreen-button.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-fullscreen-button-exit*/.flickity-fullscreen-button-exit.sc-nano-slides{display:none}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-exit.sc-nano-slides{display:block}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-view.sc-nano-slides{display:none}/*!@.flickity-fullscreen-button .flickity-button-icon*/.flickity-fullscreen-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}/*!@.flickity-enabled.is-fade .flickity-slider > **/.flickity-enabled.is-fade.sc-nano-slides .flickity-slider.sc-nano-slides>*.sc-nano-slides{pointer-events:none;z-index:0}/*!@.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected)*/.flickity-enabled.is-fade .flickity-slider .sc-nano-slides-s>.is-selected{pointer-events:auto;z-index:1}";
+const slidesCss = "/*!@:host*/.sc-nano-slides-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-slides,*.sc-nano-slides::before,*.sc-nano-slides::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@:host*/.sc-nano-slides-h{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}/*!@:host([ready])*/[ready].sc-nano-slides-h{opacity:1}/*!@.slideshow*/.slideshow.sc-nano-slides{max-height:100%;min-height:inherit;height:inherit;position:relative}/*!@.slideshow.not-ready*/.slideshow.not-ready.sc-nano-slides{max-width:98vw}/*!@.flickity-container*/.flickity-container.sc-nano-slides{opacity:0;transition:opacity 0.2s;display:flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}/*!@.not-ready .flickity-container*/.not-ready.sc-nano-slides .flickity-container.sc-nano-slides{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}/*!@.flickity-container.slides-ready*/.flickity-container.slides-ready.sc-nano-slides{min-height:inherit;max-height:inherit;height:inherit;width:auto}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@.ui-extras*/.ui-extras.sc-nano-slides{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}/*!@.ui-extras **/.ui-extras.sc-nano-slides *.sc-nano-slides{pointer-events:all}/*!@.flickity-enabled*/.flickity-enabled.sc-nano-slides{position:relative;opacity:1}/*!@.flickity-enabled:focus*/.flickity-enabled.sc-nano-slides:focus{outline:none}/*!@.flickity-viewport*/.flickity-viewport.sc-nano-slides{overflow:hidden;position:relative;min-block-size:100%;flex:1}/*!@.flickity-slider*/.flickity-slider.sc-nano-slides{position:absolute;inline-size:100%;block-size:100%}/*!@.flickity-enabled.is-draggable*/.flickity-enabled.is-draggable.sc-nano-slides{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}/*!@.flickity-enabled.is-draggable .flickity-viewport*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.sc-nano-slides{cursor:move;cursor:grab;cursor:grab}/*!@.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.is-pointer-down.sc-nano-slides{cursor:grabbing}/*!@.flickity-button*/.flickity-button.sc-nano-slides{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}/*!@.flickity-button:hover*/.flickity-button.sc-nano-slides:hover{opacity:1;cursor:pointer}/*!@.flickity-button:focus*/.flickity-button.sc-nano-slides:focus{outline:none;box-shadow:0 0 0 5px #19f}/*!@.flickity-button:active*/.flickity-button.sc-nano-slides:active{opacity:0.6}/*!@.flickity-button:disabled*/.flickity-button.sc-nano-slides:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}/*!@.flickity-button-icon*/.flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color)}/*!@.flickity-button:disabled .flickity-button-icon*/.flickity-button.sc-nano-slides:disabled .flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color-disabled)}/*!@.flickity-prev-next-button*/.flickity-prev-next-button.sc-nano-slides{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}/*!@.flickity-prev-next-button.previous*/.flickity-prev-next-button.previous.sc-nano-slides{inset-inline-start:10px}/*!@.flickity-prev-next-button.next*/.flickity-prev-next-button.next.sc-nano-slides{inset-inline-end:10px}/*!@.flickity-rtl .flickity-prev-next-button.previous*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.previous.sc-nano-slides{inset-inline:auto 10px}/*!@.flickity-rtl .flickity-prev-next-button.next*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.next.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-prev-next-button .flickity-button-icon*/.flickity-prev-next-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}/*!@.flickity-page-dots*/.flickity-page-dots.sc-nano-slides{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}/*!@.flickity-rtl .flickity-page-dots*/.flickity-rtl.sc-nano-slides .flickity-page-dots.sc-nano-slides{direction:rtl}/*!@.flickity-page-dots .dot*/.flickity-page-dots.sc-nano-slides .dot.sc-nano-slides{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}/*!@.flickity-page-dots .dot.is-selected*/.flickity-page-dots.sc-nano-slides .dot.is-selected.sc-nano-slides{opacity:1;background:var(--dot-color-active)}/*!@.flickity-enabled.is-fullscreen*/.flickity-enabled.is-fullscreen.sc-nano-slides{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}/*!@.flickity-enabled.is-fullscreen .flickity-page-dots*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-page-dots.sc-nano-slides{inset-block-end:45px}/*!@html.is-flickity-fullscreen*/html.is-flickity-fullscreen.sc-nano-slides{overflow:hidden}/*!@.flickity-fullscreen-button*/.flickity-fullscreen-button.sc-nano-slides{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}/*!@.flickity-rtl .flickity-fullscreen-button*/.flickity-rtl.sc-nano-slides .flickity-fullscreen-button.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-fullscreen-button-exit*/.flickity-fullscreen-button-exit.sc-nano-slides{display:none}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-exit.sc-nano-slides{display:block}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-view.sc-nano-slides{display:none}/*!@.flickity-fullscreen-button .flickity-button-icon*/.flickity-fullscreen-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}/*!@.flickity-enabled.is-fade .flickity-slider > **/.flickity-enabled.is-fade.sc-nano-slides .flickity-slider.sc-nano-slides>*.sc-nano-slides{pointer-events:none;z-index:0}/*!@.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected)*/.flickity-enabled.is-fade .flickity-slider .sc-nano-slides-s>.is-selected{pointer-events:auto;z-index:1}";
 /**
  * The Slides component is a multi-section container. Each section can be swiped or dragged between.
@@ -26784,6 +26780,7 @@ class Slides {
       this.flickityEl.classList.contains('flickity-enabled'))
       this.destroyflickity();
     setTimeout(() => {
+      this.flickityEl.style.height = '';
       const flick = new flickity(this.flickityEl, finalOptions);
       this.flickityReady = true;
       this.syncflickity = flick;
@@ -26794,18 +26791,14 @@ class Slides {
       this.fullscreenBtnChanged();
       this.readyflickity(flick);
       this.ready = true;
-      this.flickityEl.style.height = '';
-      // the slideshow has been initialised without any dimensions - let's add a one shot
-      // resize observer to kick it off when it gets some dimensions
-      if (!this.host.getBoundingClientRect().height) {
-        if (!window['ResizeObserver'])
-          return;
-        const ro = (this.resizeO = new ResizeObserver(() => {
-          flick.resize();
-          this.resizeO.disconnect();
-        }));
-        ro.observe(this.host);
-      }
+      if (!window['ResizeObserver'])
+        return;
+      // just boots and brances to make sure it's the correct size oninit
+      const ro = (this.resizeO = new ResizeObserver(() => {
+        flick.resize();
+        this.resizeO.disconnect();
+      }));
+      ro.observe(this.host);
     }, 100);
   }
   normalizeOptions() {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -130,7 +130,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "570c86ac225c139a14e4613e3237fb0bc8cf0cfe",
+  "gitHead": "3e19f702f76ea792f894e8fbf6bafbc987ea8515",
   "volta": {
     "node": "14.18.1",
     "npm": "8.6.0"

package/dist/cjs/table.worker-f902766e.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"table.worker-f902766e.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/table.worker-2f887b5f.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"table.worker-2f887b5f.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}