@nanoporetech-digital/components 6.1.0 → 6.2.0

package/hydrate/index.js

@@ -10514,64 +10514,6 @@ Wormhole(AlgoliaResults, [
   'isLoading',
 ]);
 
-const aspectRatioCss = "/*!@:host*/.sc-nano-aspect-ratio-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-aspect-ratio,*.sc-nano-aspect-ratio::before,*.sc-nano-aspect-ratio::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-aspect-ratio{display:none !important}/*!@:host*/.sc-nano-aspect-ratio-h{display:block}/*!@.aspect-ratio*/.aspect-ratio.sc-nano-aspect-ratio{position:relative}/*!@.aspect-ratio ::slotted(*)*/.aspect-ratio .sc-nano-aspect-ratio-s>*{position:absolute !important;inset-block-start:0 !important;inset-inline-start:0 !important;inline-size:100% !important;block-size:100% !important}/*!@.aspect-ratio--cover ::slotted(embed),\n.aspect-ratio--cover ::slotted(iframe),\n.aspect-ratio--cover ::slotted(img),\n.aspect-ratio--cover ::slotted(video)*/.aspect-ratio--cover .sc-nano-aspect-ratio-s>embed,.aspect-ratio--cover .sc-nano-aspect-ratio-s>iframe,.aspect-ratio--cover .sc-nano-aspect-ratio-s>img,.aspect-ratio--cover .sc-nano-aspect-ratio-s>video{object-fit:cover !important}/*!@.aspect-ratio--contain ::slotted(embed),\n.aspect-ratio--contain ::slotted(iframe),\n.aspect-ratio--contain ::slotted(img),\n.aspect-ratio--contain ::slotted(video)*/.aspect-ratio--contain .sc-nano-aspect-ratio-s>embed,.aspect-ratio--contain .sc-nano-aspect-ratio-s>iframe,.aspect-ratio--contain .sc-nano-aspect-ratio-s>img,.aspect-ratio--contain .sc-nano-aspect-ratio-s>video{object-fit:contain !important}";
-
-/**
- * Displays media in the desired aspect ratio.
- * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
- * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
- * The default aspect ratio is 16:9.
- */
-class AspectRatio {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.handleSlotChange = () => {
-      this.setAspectRatio();
-    };
-    this.aspectRatio = '16:9';
-    this.fit = 'cover';
-  }
-  handleAspectRatioChange() {
-    this.setAspectRatio();
-  }
-  setAspectRatio() {
-    if (typeof this.aspectRatio !== 'string') {
-      console.warn('aspectRatio should be a string.');
-      return;
-    }
-    else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {
-      console.warn('aspectRatio is an incorrect format. Should be e.g. "16:9"');
-      return;
-    }
-    const split = this.aspectRatio.split(':');
-    const x = parseInt(split[0]);
-    const y = parseInt(split[1]);
-    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;
-  }
-  render() {
-    return (hAsync("div", { ref: (el) => (this.base = el), part: "base", class: {
-        'aspect-ratio': true,
-        'aspect-ratio--cover': this.fit === 'cover',
-        'aspect-ratio--contain': this.fit === 'contain',
-      } }, hAsync("slot", { onSlotchange: this.handleSlotChange })));
-  }
-  static get watchers() { return {
-    "aspectRatio": ["handleAspectRatioChange"]
-  }; }
-  static get style() { return aspectRatioCss; }
-  static get cmpMeta() { return {
-    "$flags$": 9,
-    "$tagName$": "nano-aspect-ratio",
-    "$members$": {
-      "aspectRatio": [1, "aspect-ratio"],
-      "fit": [1]
-    },
-    "$listeners$": undefined,
-    "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
-  }; }
-}
-
 //
 // Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a
 // `focus-visible` class. Works at the component level so no global polyfill is necessary.
@@ -14791,7 +14733,7 @@ function getExpandedFallbackPlacements(placement) {
   return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
 }
 
-function flip(_ref) {
+function flip$1(_ref) {
   var state = _ref.state,
       options = _ref.options,
       name = _ref.name;
@@ -14911,11 +14853,11 @@ function flip(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-var flip$1 = {
+var flip$2 = {
   name: 'flip',
   enabled: true,
   phase: 'main',
-  fn: flip,
+  fn: flip$1,
   requiresIfExists: ['offset'],
   data: {
     _skip: false
@@ -15519,7 +15461,7 @@ function popperGenerator(generatorOptions) {
   };
 }
 
-var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
+var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$2, preventOverflow$1, arrow$1, hide$1];
 var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
@@ -19438,7 +19380,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  --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  display: block;\n  container-type: inline-size;\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@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\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  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    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  --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@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\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  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@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\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  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@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@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@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    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    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@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\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  margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\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  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  margin-block-end: 0;\n}\n/*!@.hero__quote-content*/.hero__quote-content.sc-nano-hero {\n  margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\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@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content.sc-nano-hero-s > .button[slot=primary-content], \n  .hero--sub .hero__content .sc-nano-hero-s > .button[slot=primary-content] {\n    margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content.sc-nano-hero-s > h1[slot=primary-content], \n  .hero--sub .hero__content .sc-nano-hero-s > h1[slot=primary-content] {\n    margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\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  --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  display: block;\n  container-type: inline-size;\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@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\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  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    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-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  --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@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\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  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@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\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  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@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@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@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    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    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@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\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  margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\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  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  margin-block-end: 0;\n}\n/*!@.hero__quote-content*/.hero__quote-content.sc-nano-hero {\n  margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\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@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content.sc-nano-hero-s > .button[slot=primary-content], \n  .hero--sub .hero__content .sc-nano-hero-s > .button[slot=primary-content] {\n    margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content.sc-nano-hero-s > h1[slot=primary-content], \n  .hero--sub .hero__content .sc-nano-hero-s > h1[slot=primary-content] {\n    margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\n}";
 
 /**
  * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
@@ -20516,6 +20458,163 @@ class Input {
   }; }
 }
 
+/**
+ * Attempts to find the closest scrolling parental element
+ * @param element - the element from which to traverse up the DOM
+ * @returns - the closest scrolling parental element
+ */
+function findScrollParent(element) {
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = /(auto|scroll)/;
+  if (style.position === 'fixed')
+    return document.documentElement;
+  for (let parent = element; (parent = parent.parentElement);) {
+    style = getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+      return parent;
+    }
+  }
+  return document.documentElement;
+}
+
+/**
+ * A thin, declarative interface to the IntersectionObserver API.
+ * @slot - Main slot for any content.
+ */
+class IntersectionObserve {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.nanoIntersectionChange = createEvent(this, "nanoIntersectionChange", 7);
+    this.nanoIntersecting = createEvent(this, "nanoIntersecting", 7);
+    this.nanoNotIntersecting = createEvent(this, "nanoNotIntersecting", 7);
+    this.ioCallback = (entries) => {
+      entries.forEach((entry) => {
+        this.nanoIntersectionChange.emit(entry);
+        if (entry.isIntersecting)
+          this.nanoIntersecting.emit(entry);
+        if (!entry.isIntersecting)
+          this.nanoNotIntersecting.emit(entry);
+      });
+    };
+    this.handleSlotChange = () => {
+      this.addIO();
+    };
+    this.root = 'auto';
+    this.rootMargin = undefined;
+    this.threshold = undefined;
+  }
+  get observerOptions() {
+    const opts = {};
+    if (!!this._root)
+      opts.root = this._root;
+    if (this.rootMargin)
+      opts.rootMargin = this.rootMargin;
+    if (this.threshold)
+      opts.threshold = this._threshold;
+    return opts;
+  }
+  get elements() {
+    const slotted = this.defaultSlot?.assignedElements() || [];
+    return slotted.flatMap((el) => {
+      const style = getComputedStyle(el);
+      if (style.display.includes('contents'))
+        return Array.from(el.children);
+      else
+        return el;
+    });
+  }
+  handleRootChange() {
+    if (!this.root) {
+      this._root = undefined;
+      this.removeIO();
+      return;
+    }
+    let newRoot;
+    if (this.root === 'auto') {
+      // try to find nearest scrolling parent
+      newRoot = findScrollParent(this.host);
+    }
+    else if (this.root === 'root') {
+      newRoot = undefined;
+    }
+    else {
+      // root is set explicitly
+      newRoot = this.root;
+    }
+    // if it's the document - unset as that's IO's default
+    if (newRoot === document.documentElement)
+      newRoot = undefined;
+    // if new root is what we already have - ignore
+    if (newRoot === this._root)
+      return;
+    // cache and setup io
+    this._root = newRoot;
+    this.addIO();
+  }
+  handleThresholdChange() {
+    if (!this.threshold) {
+      this._threshold = undefined;
+      return;
+    }
+    if (this.threshold.includes(',')) {
+      this._threshold = this.threshold
+        .split(',')
+        .map((numStr) => Number(numStr));
+      return;
+    }
+    this._threshold = Number(this.threshold);
+  }
+  addIO() {
+    if (!window['IntersectionObserver'] || !this.elements?.length)
+      return;
+    if (this.io)
+      this.removeIO();
+    const io = (this.io = new IntersectionObserver(this.ioCallback, this.observerOptions));
+    this.elements?.forEach((el) => {
+      io.observe(el);
+    });
+  }
+  removeIO() {
+    if (!this.io)
+      return;
+    this.io.disconnect();
+    this.io = undefined;
+  }
+  connectedCallback() {
+    this.handleThresholdChange();
+    this.handleRootChange();
+  }
+  disconnectedCallback() {
+    this.removeIO();
+    this.root = this._root = undefined;
+  }
+  render() {
+    return (hAsync("slot", { ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange }));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "root": ["handleRootChange"],
+    "threshold": ["handleThresholdChange"]
+  }; }
+  static get style() { return "/*!@nano-intersection-observe*/nano-intersection-observe.sc-nano-intersection-observe { display: contents }"; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "nano-intersection-observe",
+    "$members$": {
+      "root": [1],
+      "rootMargin": [1, "root-margin"],
+      "threshold": [1]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
 const menuCss = "/*!@:host*/.sc-nano-menu-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-menu,*.sc-nano-menu::before,*.sc-nano-menu::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-menu{display:none !important}/*!@:host*/.sc-nano-menu-h{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}/*!@.menu*/.menu.sc-nano-menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}/*!@.menu:focus*/.menu.sc-nano-menu:focus{outline:none}/*!@::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot))*/.sc-nano-menu-s>*:not(nano-nav-item):not(nano-option):not(hr):not(slot){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";
 
 /**
@@ -20918,6 +21017,1233 @@ class MenuDrawer {
   }; }
 }
 
+const bounce = [
+  {
+    offset: 0,
+    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0)',
+  },
+  {
+    offset: 0.2,
+    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0)',
+  },
+  {
+    offset: 0.4,
+    easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+    transform: 'translate3d(0, -30px, 0) scaleY(1.1)',
+  },
+  {
+    offset: 0.43,
+    easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+    transform: 'translate3d(0, -30px, 0) scaleY(1.1)',
+  },
+  {
+    offset: 0.53,
+    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0)',
+  },
+  {
+    offset: 0.7,
+    easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+    transform: 'translate3d(0, -15px, 0) scaleY(1.05)',
+  },
+  {
+    offset: 0.8,
+    'transition-timing-function': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0) scaleY(0.95)',
+  },
+  { offset: 0.9, transform: 'translate3d(0, -4px, 0) scaleY(1.02)' },
+  {
+    offset: 1,
+    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0)',
+  },
+];
+
+const flash = [
+  { offset: 0, opacity: '1' },
+  { offset: 0.25, opacity: '0' },
+  { offset: 0.5, opacity: '1' },
+  { offset: 0.75, opacity: '0' },
+  { offset: 1, opacity: '1' },
+];
+
+const headShake = [
+  { offset: 0, transform: 'translateX(0)' },
+  { offset: 0.065, transform: 'translateX(-6px) rotateY(-9deg)' },
+  { offset: 0.185, transform: 'translateX(5px) rotateY(7deg)' },
+  { offset: 0.315, transform: 'translateX(-3px) rotateY(-5deg)' },
+  { offset: 0.435, transform: 'translateX(2px) rotateY(3deg)' },
+  { offset: 0.5, transform: 'translateX(0)' },
+];
+
+const heartBeat = [
+  { offset: 0, transform: 'scale(1)' },
+  { offset: 0.14, transform: 'scale(1.3)' },
+  { offset: 0.28, transform: 'scale(1)' },
+  { offset: 0.42, transform: 'scale(1.3)' },
+  { offset: 0.7, transform: 'scale(1)' },
+];
+
+const jello = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  { offset: 0.111, transform: 'translate3d(0, 0, 0)' },
+  { offset: 0.222, transform: 'skewX(-12.5deg) skewY(-12.5deg)' },
+  { offset: 0.33299999999999996, transform: 'skewX(6.25deg) skewY(6.25deg)' },
+  { offset: 0.444, transform: 'skewX(-3.125deg) skewY(-3.125deg)' },
+  { offset: 0.555, transform: 'skewX(1.5625deg) skewY(1.5625deg)' },
+  {
+    offset: 0.6659999999999999,
+    transform: 'skewX(-0.78125deg) skewY(-0.78125deg)',
+  },
+  { offset: 0.777, transform: 'skewX(0.390625deg) skewY(0.390625deg)' },
+  { offset: 0.888, transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const pulse = [
+  { offset: 0, transform: 'scale3d(1, 1, 1)' },
+  { offset: 0.5, transform: 'scale3d(1.05, 1.05, 1.05)' },
+  { offset: 1, transform: 'scale3d(1, 1, 1)' },
+];
+
+const rubberBand = [
+  { offset: 0, transform: 'scale3d(1, 1, 1)' },
+  { offset: 0.3, transform: 'scale3d(1.25, 0.75, 1)' },
+  { offset: 0.4, transform: 'scale3d(0.75, 1.25, 1)' },
+  { offset: 0.5, transform: 'scale3d(1.15, 0.85, 1)' },
+  { offset: 0.65, transform: 'scale3d(0.95, 1.05, 1)' },
+  { offset: 0.75, transform: 'scale3d(1.05, 0.95, 1)' },
+  { offset: 1, transform: 'scale3d(1, 1, 1)' },
+];
+
+const shake = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  { offset: 0.1, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 0.2, transform: 'translate3d(10px, 0, 0)' },
+  { offset: 0.3, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 0.4, transform: 'translate3d(10px, 0, 0)' },
+  { offset: 0.5, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 0.6, transform: 'translate3d(10px, 0, 0)' },
+  { offset: 0.7, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 0.8, transform: 'translate3d(10px, 0, 0)' },
+  { offset: 0.9, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const shakeX = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  { offset: 0.1, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 0.2, transform: 'translate3d(10px, 0, 0)' },
+  { offset: 0.3, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 0.4, transform: 'translate3d(10px, 0, 0)' },
+  { offset: 0.5, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 0.6, transform: 'translate3d(10px, 0, 0)' },
+  { offset: 0.7, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 0.8, transform: 'translate3d(10px, 0, 0)' },
+  { offset: 0.9, transform: 'translate3d(-10px, 0, 0)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const shakeY = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  { offset: 0.1, transform: 'translate3d(0, -10px, 0)' },
+  { offset: 0.2, transform: 'translate3d(0, 10px, 0)' },
+  { offset: 0.3, transform: 'translate3d(0, -10px, 0)' },
+  { offset: 0.4, transform: 'translate3d(0, 10px, 0)' },
+  { offset: 0.5, transform: 'translate3d(0, -10px, 0)' },
+  { offset: 0.6, transform: 'translate3d(0, 10px, 0)' },
+  { offset: 0.7, transform: 'translate3d(0, -10px, 0)' },
+  { offset: 0.8, transform: 'translate3d(0, 10px, 0)' },
+  { offset: 0.9, transform: 'translate3d(0, -10px, 0)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const swing = [
+  { offset: 0.2, transform: 'rotate3d(0, 0, 1, 15deg)' },
+  { offset: 0.4, transform: 'rotate3d(0, 0, 1, -10deg)' },
+  { offset: 0.6, transform: 'rotate3d(0, 0, 1, 5deg)' },
+  { offset: 0.8, transform: 'rotate3d(0, 0, 1, -5deg)' },
+  { offset: 1, transform: 'rotate3d(0, 0, 1, 0deg)' },
+];
+
+const tada = [
+  { offset: 0, transform: 'scale3d(1, 1, 1)' },
+  { offset: 0.1, transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)' },
+  { offset: 0.2, transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)' },
+  { offset: 0.3, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
+  { offset: 0.4, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
+  { offset: 0.5, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
+  { offset: 0.6, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
+  { offset: 0.7, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
+  { offset: 0.8, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
+  { offset: 0.9, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
+  { offset: 1, transform: 'scale3d(1, 1, 1)' },
+];
+
+const wobble = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  {
+    offset: 0.15,
+    transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)',
+  },
+  { offset: 0.3, transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)' },
+  {
+    offset: 0.45,
+    transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)',
+  },
+  { offset: 0.6, transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)' },
+  {
+    offset: 0.75,
+    transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)',
+  },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const backInDown = [
+  { offset: 0, transform: 'translateY(-1200px) scale(0.7)', opacity: '0.7' },
+  { offset: 0.8, transform: 'translateY(0px) scale(0.7)', opacity: '0.7' },
+  { offset: 1, transform: 'scale(1)', opacity: '1' },
+];
+
+const backInLeft = [
+  { offset: 0, transform: 'translateX(-2000px) scale(0.7)', opacity: '0.7' },
+  { offset: 0.8, transform: 'translateX(0px) scale(0.7)', opacity: '0.7' },
+  { offset: 1, transform: 'scale(1)', opacity: '1' },
+];
+
+const backInRight = [
+  { offset: 0, transform: 'translateX(2000px) scale(0.7)', opacity: '0.7' },
+  { offset: 0.8, transform: 'translateX(0px) scale(0.7)', opacity: '0.7' },
+  { offset: 1, transform: 'scale(1)', opacity: '1' },
+];
+
+const backInUp = [
+  { offset: 0, transform: 'translateY(1200px) scale(0.7)', opacity: '0.7' },
+  { offset: 0.8, transform: 'translateY(0px) scale(0.7)', opacity: '0.7' },
+  { offset: 1, transform: 'scale(1)', opacity: '1' },
+];
+
+const backOutDown = [
+  { offset: 0, transform: 'scale(1)', opacity: '1' },
+  { offset: 0.2, transform: 'translateY(0px) scale(0.7)', opacity: '0.7' },
+  { offset: 1, transform: 'translateY(700px) scale(0.7)', opacity: '0.7' },
+];
+
+const backOutLeft = [
+  { offset: 0, transform: 'scale(1)', opacity: '1' },
+  { offset: 0.2, transform: 'translateX(0px) scale(0.7)', opacity: '0.7' },
+  { offset: 1, transform: 'translateX(-2000px) scale(0.7)', opacity: '0.7' },
+];
+
+const backOutRight = [
+  { offset: 0, transform: 'scale(1)', opacity: '1' },
+  { offset: 0.2, transform: 'translateX(0px) scale(0.7)', opacity: '0.7' },
+  { offset: 1, transform: 'translateX(2000px) scale(0.7)', opacity: '0.7' },
+];
+
+const backOutUp = [
+  { offset: 0, transform: 'scale(1)', opacity: '1' },
+  { offset: 0.2, transform: 'translateY(0px) scale(0.7)', opacity: '0.7' },
+  { offset: 1, transform: 'translateY(-700px) scale(0.7)', opacity: '0.7' },
+];
+
+const bounceIn = [
+  { offset: 0, opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
+  { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.2, transform: 'scale3d(1.1, 1.1, 1.1)' },
+  { offset: 0.2, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.4, transform: 'scale3d(0.9, 0.9, 0.9)' },
+  { offset: 0.4, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.6, opacity: '1', transform: 'scale3d(1.03, 1.03, 1.03)' },
+  { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.8, transform: 'scale3d(0.97, 0.97, 0.97)' },
+  { offset: 0.8, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 1, opacity: '1', transform: 'scale3d(1, 1, 1)' },
+  { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+];
+
+const bounceInDown = [
+  {
+    offset: 0,
+    opacity: '0',
+    transform: 'translate3d(0, -3000px, 0) scaleY(3)',
+  },
+  { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  {
+    offset: 0.6,
+    opacity: '1',
+    transform: 'translate3d(0, 25px, 0) scaleY(0.9)',
+  },
+  { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.75, transform: 'translate3d(0, -10px, 0) scaleY(0.95)' },
+  { offset: 0.75, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.9, transform: 'translate3d(0, 5px, 0) scaleY(0.985)' },
+  { offset: 0.9, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+];
+
+const bounceInLeft = [
+  {
+    offset: 0,
+    opacity: '0',
+    transform: 'translate3d(-3000px, 0, 0) scaleX(3)',
+  },
+  { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.6, opacity: '1', transform: 'translate3d(25px, 0, 0) scaleX(1)' },
+  { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.75, transform: 'translate3d(-10px, 0, 0) scaleX(0.98)' },
+  { offset: 0.75, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.9, transform: 'translate3d(5px, 0, 0) scaleX(0.995)' },
+  { offset: 0.9, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+];
+
+const bounceInRight = [
+  { offset: 0, opacity: '0', transform: 'translate3d(3000px, 0, 0) scaleX(3)' },
+  { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  {
+    offset: 0.6,
+    opacity: '1',
+    transform: 'translate3d(-25px, 0, 0) scaleX(1)',
+  },
+  { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.75, transform: 'translate3d(10px, 0, 0) scaleX(0.98)' },
+  { offset: 0.75, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.9, transform: 'translate3d(-5px, 0, 0) scaleX(0.995)' },
+  { offset: 0.9, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+];
+
+const bounceInUp = [
+  { offset: 0, opacity: '0', transform: 'translate3d(0, 3000px, 0) scaleY(5)' },
+  { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  {
+    offset: 0.6,
+    opacity: '1',
+    transform: 'translate3d(0, -20px, 0) scaleY(0.9)',
+  },
+  { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.75, transform: 'translate3d(0, 10px, 0) scaleY(0.95)' },
+  { offset: 0.75, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 0.9, transform: 'translate3d(0, -5px, 0) scaleY(0.985)' },
+  { offset: 0.9, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+];
+
+const bounceOut = [
+  { offset: 0.2, transform: 'scale3d(0.9, 0.9, 0.9)' },
+  { offset: 0.5, opacity: '1', transform: 'scale3d(1.1, 1.1, 1.1)' },
+  { offset: 0.55, opacity: '1', transform: 'scale3d(1.1, 1.1, 1.1)' },
+  { offset: 1, opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
+];
+
+const bounceOutDown = [
+  { offset: 0.2, transform: 'translate3d(0, 10px, 0) scaleY(0.985)' },
+  {
+    offset: 0.4,
+    opacity: '1',
+    transform: 'translate3d(0, -20px, 0) scaleY(0.9)',
+  },
+  {
+    offset: 0.45,
+    opacity: '1',
+    transform: 'translate3d(0, -20px, 0) scaleY(0.9)',
+  },
+  { offset: 1, opacity: '0', transform: 'translate3d(0, 2000px, 0) scaleY(3)' },
+];
+
+const bounceOutLeft = [
+  {
+    offset: 0.2,
+    opacity: '1',
+    transform: 'translate3d(20px, 0, 0) scaleX(0.9)',
+  },
+  {
+    offset: 1,
+    opacity: '0',
+    transform: 'translate3d(-2000px, 0, 0) scaleX(2)',
+  },
+];
+
+const bounceOutRight = [
+  {
+    offset: 0.2,
+    opacity: '1',
+    transform: 'translate3d(-20px, 0, 0) scaleX(0.9)',
+  },
+  { offset: 1, opacity: '0', transform: 'translate3d(2000px, 0, 0) scaleX(2)' },
+];
+
+const bounceOutUp = [
+  { offset: 0.2, transform: 'translate3d(0, -10px, 0) scaleY(0.985)' },
+  {
+    offset: 0.4,
+    opacity: '1',
+    transform: 'translate3d(0, 20px, 0) scaleY(0.9)',
+  },
+  {
+    offset: 0.45,
+    opacity: '1',
+    transform: 'translate3d(0, 20px, 0) scaleY(0.9)',
+  },
+  {
+    offset: 1,
+    opacity: '0',
+    transform: 'translate3d(0, -2000px, 0) scaleY(3)',
+  },
+];
+
+const fadeIn = [
+  { offset: 0, opacity: '0' },
+  { offset: 1, opacity: '1' },
+];
+
+const fadeInBottomLeft = [
+  { offset: 0, opacity: '0', transform: 'translate3d(-100%, 100%, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInBottomRight = [
+  { offset: 0, opacity: '0', transform: 'translate3d(100%, 100%, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInDown = [
+  { offset: 0, opacity: '0', transform: 'translate3d(0, -100%, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInDownBig = [
+  { offset: 0, opacity: '0', transform: 'translate3d(0, -2000px, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInLeft = [
+  { offset: 0, opacity: '0', transform: 'translate3d(-100%, 0, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInLeftBig = [
+  { offset: 0, opacity: '0', transform: 'translate3d(-2000px, 0, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInRight = [
+  { offset: 0, opacity: '0', transform: 'translate3d(100%, 0, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInRightBig = [
+  { offset: 0, opacity: '0', transform: 'translate3d(2000px, 0, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInTopLeft = [
+  { offset: 0, opacity: '0', transform: 'translate3d(-100%, -100%, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInTopRight = [
+  { offset: 0, opacity: '0', transform: 'translate3d(100%, -100%, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInUp = [
+  { offset: 0, opacity: '0', transform: 'translate3d(0, 100%, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeInUpBig = [
+  { offset: 0, opacity: '0', transform: 'translate3d(0, 2000px, 0)' },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const fadeOut = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, opacity: '0' },
+];
+
+const fadeOutBottomLeft = [
+  { offset: 0, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, opacity: '0', transform: 'translate3d(-100%, 100%, 0)' },
+];
+
+const fadeOutBottomRight = [
+  { offset: 0, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, opacity: '0', transform: 'translate3d(100%, 100%, 0)' },
+];
+
+const fadeOutDown = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, opacity: '0', transform: 'translate3d(0, 100%, 0)' },
+];
+
+const fadeOutDownBig = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, opacity: '0', transform: 'translate3d(0, 2000px, 0)' },
+];
+
+const fadeOutLeft = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, opacity: '0', transform: 'translate3d(-100%, 0, 0)' },
+];
+
+const fadeOutLeftBig = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, opacity: '0', transform: 'translate3d(-2000px, 0, 0)' },
+];
+
+const fadeOutRight = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, opacity: '0', transform: 'translate3d(100%, 0, 0)' },
+];
+
+const fadeOutRightBig = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, opacity: '0', transform: 'translate3d(2000px, 0, 0)' },
+];
+
+const fadeOutTopLeft = [
+  { offset: 0, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, opacity: '0', transform: 'translate3d(-100%, -100%, 0)' },
+];
+
+const fadeOutTopRight = [
+  { offset: 0, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, opacity: '0', transform: 'translate3d(100%, -100%, 0)' },
+];
+
+const fadeOutUp = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, opacity: '0', transform: 'translate3d(0, -100%, 0)' },
+];
+
+const fadeOutUpBig = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, opacity: '0', transform: 'translate3d(0, -2000px, 0)' },
+];
+
+const flip = [
+  {
+    offset: 0,
+    transform:
+      'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)',
+    easing: 'ease-out',
+  },
+  {
+    offset: 0.4,
+    transform:
+      'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -190deg)',
+    easing: 'ease-out',
+  },
+  {
+    offset: 0.5,
+    transform:
+      'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -170deg)',
+    easing: 'ease-in',
+  },
+  {
+    offset: 0.8,
+    transform:
+      'perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, 0deg)',
+    easing: 'ease-in',
+  },
+  {
+    offset: 1,
+    transform:
+      'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)',
+    easing: 'ease-in',
+  },
+];
+
+const flipInX = [
+  {
+    offset: 0,
+    transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
+    easing: 'ease-in',
+    opacity: '0',
+  },
+  {
+    offset: 0.4,
+    transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
+    easing: 'ease-in',
+  },
+  {
+    offset: 0.6,
+    transform: 'perspective(400px) rotate3d(1, 0, 0, 10deg)',
+    opacity: '1',
+  },
+  { offset: 0.8, transform: 'perspective(400px) rotate3d(1, 0, 0, -5deg)' },
+  { offset: 1, transform: 'perspective(400px)' },
+];
+
+const flipInY = [
+  {
+    offset: 0,
+    transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
+    easing: 'ease-in',
+    opacity: '0',
+  },
+  {
+    offset: 0.4,
+    transform: 'perspective(400px) rotate3d(0, 1, 0, -20deg)',
+    easing: 'ease-in',
+  },
+  {
+    offset: 0.6,
+    transform: 'perspective(400px) rotate3d(0, 1, 0, 10deg)',
+    opacity: '1',
+  },
+  { offset: 0.8, transform: 'perspective(400px) rotate3d(0, 1, 0, -5deg)' },
+  { offset: 1, transform: 'perspective(400px)' },
+];
+
+const flipOutX = [
+  { offset: 0, transform: 'perspective(400px)' },
+  {
+    offset: 0.3,
+    transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
+    opacity: '1',
+  },
+  {
+    offset: 1,
+    transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
+    opacity: '0',
+  },
+];
+
+const flipOutY = [
+  { offset: 0, transform: 'perspective(400px)' },
+  {
+    offset: 0.3,
+    transform: 'perspective(400px) rotate3d(0, 1, 0, -15deg)',
+    opacity: '1',
+  },
+  {
+    offset: 1,
+    transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
+    opacity: '0',
+  },
+];
+
+const lightSpeedInLeft = [
+  {
+    offset: 0,
+    transform: 'translate3d(-100%, 0, 0) skewX(30deg)',
+    opacity: '0',
+  },
+  { offset: 0.6, transform: 'skewX(-20deg)', opacity: '1' },
+  { offset: 0.8, transform: 'skewX(5deg)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const lightSpeedInRight = [
+  {
+    offset: 0,
+    transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
+    opacity: '0',
+  },
+  { offset: 0.6, transform: 'skewX(20deg)', opacity: '1' },
+  { offset: 0.8, transform: 'skewX(-5deg)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const lightSpeedOutLeft = [
+  { offset: 0, opacity: '1' },
+  {
+    offset: 1,
+    transform: 'translate3d(-100%, 0, 0) skewX(-30deg)',
+    opacity: '0',
+  },
+];
+
+const lightSpeedOutRight = [
+  { offset: 0, opacity: '1' },
+  {
+    offset: 1,
+    transform: 'translate3d(100%, 0, 0) skewX(30deg)',
+    opacity: '0',
+  },
+];
+
+const rotateIn = [
+  { offset: 0, transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
+];
+
+const rotateInDownLeft = [
+  { offset: 0, transform: 'rotate3d(0, 0, 1, -45deg)', opacity: '0' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
+];
+
+const rotateInDownRight = [
+  { offset: 0, transform: 'rotate3d(0, 0, 1, 45deg)', opacity: '0' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
+];
+
+const rotateInUpLeft = [
+  { offset: 0, transform: 'rotate3d(0, 0, 1, 45deg)', opacity: '0' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
+];
+
+const rotateInUpRight = [
+  { offset: 0, transform: 'rotate3d(0, 0, 1, -90deg)', opacity: '0' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
+];
+
+const rotateOut = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, transform: 'rotate3d(0, 0, 1, 200deg)', opacity: '0' },
+];
+
+const rotateOutDownLeft = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, transform: 'rotate3d(0, 0, 1, 45deg)', opacity: '0' },
+];
+
+const rotateOutDownRight = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, transform: 'rotate3d(0, 0, 1, -45deg)', opacity: '0' },
+];
+
+const rotateOutUpLeft = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, transform: 'rotate3d(0, 0, 1, -45deg)', opacity: '0' },
+];
+
+const rotateOutUpRight = [
+  { offset: 0, opacity: '1' },
+  { offset: 1, transform: 'rotate3d(0, 0, 1, 90deg)', opacity: '0' },
+];
+
+const slideInDown = [
+  { offset: 0, transform: 'translate3d(0, -100%, 0)', visibility: 'visible' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const slideInLeft = [
+  { offset: 0, transform: 'translate3d(-100%, 0, 0)', visibility: 'visible' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const slideInRight = [
+  { offset: 0, transform: 'translate3d(100%, 0, 0)', visibility: 'visible' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const slideInUp = [
+  { offset: 0, transform: 'translate3d(0, 100%, 0)', visibility: 'visible' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];
+
+const slideOutDown = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, visibility: 'hidden', transform: 'translate3d(0, 100%, 0)' },
+];
+
+const slideOutLeft = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, visibility: 'hidden', transform: 'translate3d(-100%, 0, 0)' },
+];
+
+const slideOutRight = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, visibility: 'hidden', transform: 'translate3d(100%, 0, 0)' },
+];
+
+const slideOutUp = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  { offset: 1, visibility: 'hidden', transform: 'translate3d(0, -100%, 0)' },
+];
+
+const hinge = [
+  { offset: 0, easing: 'ease-in-out' },
+  { offset: 0.2, transform: 'rotate3d(0, 0, 1, 80deg)', easing: 'ease-in-out' },
+  {
+    offset: 0.4,
+    transform: 'rotate3d(0, 0, 1, 60deg)',
+    easing: 'ease-in-out',
+    opacity: '1',
+  },
+  { offset: 0.6, transform: 'rotate3d(0, 0, 1, 80deg)', easing: 'ease-in-out' },
+  {
+    offset: 0.8,
+    transform: 'rotate3d(0, 0, 1, 60deg)',
+    easing: 'ease-in-out',
+    opacity: '1',
+  },
+  { offset: 1, transform: 'translate3d(0, 700px, 0)', opacity: '0' },
+];
+
+const jackInTheBox = [
+  {
+    offset: 0,
+    opacity: '0',
+    transform: 'scale(0.1) rotate(30deg)',
+    'transform-origin': 'center bottom',
+  },
+  { offset: 0.5, transform: 'rotate(-10deg)' },
+  { offset: 0.7, transform: 'rotate(3deg)' },
+  { offset: 1, opacity: '1', transform: 'scale(1)' },
+];
+
+const rollIn = [
+  {
+    offset: 0,
+    opacity: '0',
+    transform: 'translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)',
+  },
+  { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
+];
+
+const rollOut = [
+  { offset: 0, opacity: '1' },
+  {
+    offset: 1,
+    opacity: '0',
+    transform: 'translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)',
+  },
+];
+
+const zoomIn = [
+  { offset: 0, opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
+  { offset: 0.5, opacity: '1' },
+];
+
+const zoomInDown = [
+  {
+    offset: 0,
+    opacity: '0',
+    transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)',
+    easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  },
+  {
+    offset: 0.6,
+    opacity: '1',
+    transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
+    easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
+  },
+];
+
+const zoomInLeft = [
+  {
+    offset: 0,
+    opacity: '0',
+    transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)',
+    easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  },
+  {
+    offset: 0.6,
+    opacity: '1',
+    transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)',
+    easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
+  },
+];
+
+const zoomInRight = [
+  {
+    offset: 0,
+    opacity: '0',
+    transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)',
+    easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  },
+  {
+    offset: 0.6,
+    opacity: '1',
+    transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)',
+    easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
+  },
+];
+
+const zoomInUp = [
+  {
+    offset: 0,
+    opacity: '0',
+    transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)',
+    easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  },
+  {
+    offset: 0.6,
+    opacity: '1',
+    transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
+    easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
+  },
+];
+
+const zoomOut = [
+  { offset: 0, opacity: '1' },
+  { offset: 0.5, opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
+  { offset: 1, opacity: '0' },
+];
+
+const zoomOutDown = [
+  {
+    offset: 0.4,
+    opacity: '1',
+    transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
+    easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  },
+  {
+    offset: 1,
+    opacity: '0',
+    transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0)',
+    easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
+  },
+];
+
+const zoomOutLeft = [
+  {
+    offset: 0.4,
+    opacity: '1',
+    transform: 'scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)',
+  },
+  {
+    offset: 1,
+    opacity: '0',
+    transform: 'scale(0.1) translate3d(-2000px, 0, 0)',
+  },
+];
+
+const zoomOutRight = [
+  {
+    offset: 0.4,
+    opacity: '1',
+    transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)',
+  },
+  {
+    offset: 1,
+    opacity: '0',
+    transform: 'scale(0.1) translate3d(2000px, 0, 0)',
+  },
+];
+
+const zoomOutUp = [
+  {
+    offset: 0.4,
+    opacity: '1',
+    transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
+    easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  },
+  {
+    offset: 1,
+    opacity: '0',
+    transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0)',
+    easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
+  },
+];
+
+const easings = {
+  linear: 'linear',
+  ease: 'ease',
+  easeIn: 'ease-in',
+  easeOut: 'ease-out',
+  easeInOut: 'ease-in-out',
+  easeInSine: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
+  easeOutSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+  easeInOutSine: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+  easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+  easeOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+  easeInOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+  easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  easeOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+  easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+  easeInQuart: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
+  easeOutQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
+  easeInOutQuart: 'cubic-bezier(0.77, 0, 0.175, 1)',
+  easeInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+  easeOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
+  easeInOutQuint: 'cubic-bezier(0.86, 0, 0.07, 1)',
+  easeInExpo: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
+  easeOutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',
+  easeInOutExpo: 'cubic-bezier(1, 0, 0, 1)',
+  easeInCirc: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
+  easeOutCirc: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+  easeInOutCirc: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
+  easeInBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
+  easeOutBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+  easeInOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+};
+
+const animations = {
+  bounce,
+  flash,
+  headShake,
+  heartBeat,
+  jello,
+  pulse,
+  rubberBand,
+  shake,
+  shakeX,
+  shakeY,
+  swing,
+  tada,
+  wobble,
+  backInDown,
+  backInLeft,
+  backInRight,
+  backInUp,
+  backOutDown,
+  backOutLeft,
+  backOutRight,
+  backOutUp,
+  bounceIn,
+  bounceInDown,
+  bounceInLeft,
+  bounceInRight,
+  bounceInUp,
+  bounceOut,
+  bounceOutDown,
+  bounceOutLeft,
+  bounceOutRight,
+  bounceOutUp,
+  fadeIn,
+  fadeInBottomLeft,
+  fadeInBottomRight,
+  fadeInDown,
+  fadeInDownBig,
+  fadeInLeft,
+  fadeInLeftBig,
+  fadeInRight,
+  fadeInRightBig,
+  fadeInTopLeft,
+  fadeInTopRight,
+  fadeInUp,
+  fadeInUpBig,
+  fadeOut,
+  fadeOutBottomLeft,
+  fadeOutBottomRight,
+  fadeOutDown,
+  fadeOutDownBig,
+  fadeOutLeft,
+  fadeOutLeftBig,
+  fadeOutRight,
+  fadeOutRightBig,
+  fadeOutTopLeft,
+  fadeOutTopRight,
+  fadeOutUp,
+  fadeOutUpBig,
+  flip,
+  flipInX,
+  flipInY,
+  flipOutX,
+  flipOutY,
+  lightSpeedInLeft,
+  lightSpeedInRight,
+  lightSpeedOutLeft,
+  lightSpeedOutRight,
+  rotateIn,
+  rotateInDownLeft,
+  rotateInDownRight,
+  rotateInUpLeft,
+  rotateInUpRight,
+  rotateOut,
+  rotateOutDownLeft,
+  rotateOutDownRight,
+  rotateOutUpLeft,
+  rotateOutUpRight,
+  slideInDown,
+  slideInLeft,
+  slideInRight,
+  slideInUp,
+  slideOutDown,
+  slideOutLeft,
+  slideOutRight,
+  slideOutUp,
+  hinge,
+  jackInTheBox,
+  rollIn,
+  rollOut,
+  zoomIn,
+  zoomInDown,
+  zoomInLeft,
+  zoomInRight,
+  zoomInUp,
+  zoomOut,
+  zoomOutDown,
+  zoomOutLeft,
+  zoomOutRight,
+  zoomOutUp,
+};
+
+/**
+ * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
+ * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+ *
+ * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple *nano-animation* elements.
+ */
+class NanoAnimation {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.nanoCancel = createEvent(this, "nanoCancel", 7);
+    this.nanoFinish = createEvent(this, "nanoFinish", 7);
+    this.nanoStart = createEvent(this, "nanoStart", 7);
+    this.hasStarted = false;
+    this.handleAnimationFinish = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.nanoFinish.emit();
+    };
+    this.handleAnimationCancel = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.nanoCancel.emit();
+    };
+    this.handleSlotChange = () => {
+      this.destroyAnimation();
+      this.createAnimation();
+    };
+    this.name = 'none';
+    this.play = false;
+    this.delay = 0;
+    this.direction = 'normal';
+    this.duration = 1000;
+    this.easing = 'ease';
+    this.endDelay = 0;
+    this.fill = 'auto';
+    this.iterations = Infinity;
+    this.iterationStart = 0;
+    this.keyframes = undefined;
+    this.playbackRate = 1;
+  }
+  /** Gets and sets the current animation time. */
+  get currentTime() {
+    return this.animation?.currentTime ?? 0;
+  }
+  set currentTime(time) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+  connectedCallback() {
+    this.createAnimation();
+  }
+  disconnectedCallback() {
+    this.destroyAnimation();
+  }
+  async createAnimation() {
+    if (!this.defaultSlot)
+      return;
+    const easing = easings[this.easing] ?? this.easing;
+    const keyframes = this.keyframes ??
+      animations[this.name];
+    const slot = this.defaultSlot;
+    const element = slot.assignedElements()[0];
+    if (!element || !keyframes) {
+      return false;
+    }
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations,
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener('cancel', this.handleAnimationCancel);
+    this.animation.addEventListener('finish', this.handleAnimationFinish);
+    if (this.play) {
+      this.hasStarted = true;
+      this.nanoStart.emit();
+    }
+    else {
+      this.animation.pause();
+    }
+    return true;
+  }
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener('cancel', this.handleAnimationCancel);
+      this.animation.removeEventListener('finish', this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+  handleAnimationChange() {
+    this.createAnimation();
+  }
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.hasStarted = true;
+        this.nanoStart.emit();
+      }
+      if (this.play) {
+        this.animation.play();
+      }
+      else {
+        this.animation.pause();
+      }
+      return true;
+    }
+    return false;
+  }
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+  /** Clears all keyframe effects caused by this animation and aborts its playback. */
+  async cancel() {
+    this.animation?.cancel();
+  }
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  async finish() {
+    this.animation?.finish();
+  }
+  render() {
+    return (hAsync(Host, null, hAsync("slot", { ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+  }
+  static get watchers() { return {
+    "name": ["handleAnimationChange"],
+    "delay": ["handleAnimationChange"],
+    "direction": ["handleAnimationChange"],
+    "duration": ["handleAnimationChange"],
+    "easing": ["handleAnimationChange"],
+    "endDelay": ["handleAnimationChange"],
+    "fill": ["handleAnimationChange"],
+    "iterations": ["handleAnimationChange"],
+    "iterationStart": ["handleAnimationChange"],
+    "keyframes": ["handleAnimationChange"],
+    "play": ["handlePlayChange"],
+    "playbackRate": ["handlePlaybackRateChange"]
+  }; }
+  static get style() { return "/*!@:host*/.sc-nano-animation-h {\n      display: contents;\n    }"; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "nano-animation",
+    "$members$": {
+      "name": [1],
+      "play": [1540],
+      "delay": [2],
+      "direction": [1],
+      "duration": [2],
+      "easing": [1],
+      "endDelay": [2, "end-delay"],
+      "fill": [1],
+      "iterations": [2],
+      "iterationStart": [2, "iteration-start"],
+      "keyframes": [16],
+      "playbackRate": [2, "playback-rate"],
+      "currentTime": [6146, "current-time"],
+      "cancel": [64],
+      "finish": [64]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["play", "play"]]
+  }; }
+}
+
 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]{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]{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]{padding-inline:var(--padding-start) 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]{padding-inline:0 var(--padding-end)}/*!@: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{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;inline-size: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{padding-inline:0 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-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}/*!@: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:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s 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;block-size: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{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;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;inline-size:100%}/*!@:host(.nano-menu-drawer) .text*/.nano-menu-drawer.sc-nano-nav-item-h .text.sc-nano-nav-item{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size: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);inline-size: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-inline-size: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);block-size: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;inline-size:var(--secondary-width, 400px);max-inline-size: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;inline-size:6px;block-size: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{inline-size:7px;block-size: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}";
 
 /**
@@ -22501,7 +23827,7 @@ class ResizeObserve {
     "currentHeight": ["dimensionChanged"],
     "currentWidth": ["dimensionChanged"]
   }; }
-  static get style() { return "/*!@nano-resize-observe*/nano-resize-observe.sc-nano-resize-observe { display: contents }"; }
+  static get style() { return "/*!@nano-resize-observe*/nano-resize-observe.sc-nano-resize-observe { display: block }"; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "nano-resize-observe",
@@ -27857,32 +29183,6 @@ class Sticker {
     else
       this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);
   }
-  /**
-   * Gets the 'closest' scrolling parent
-   * @returns either an element with `overflow: scroll | auto` or the parent Document
-   */
-  getScrollParent() {
-    const regex = /(auto|scroll)/;
-    const parents = (_node, ps) => {
-      if (_node.parentNode === null) {
-        return ps;
-      }
-      return parents(_node.parentNode, ps.concat([_node]));
-    };
-    const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
-    const overflow = (_node) => style(_node, 'overflow') +
-      style(_node, 'overflow-y') +
-      style(_node, 'overflow-x');
-    const scroll = (_node) => regex.test(overflow(_node));
-    const docHeight = document.documentElement.getBoundingClientRect().height;
-    const scrollParent = (_node) => {
-      if (!(typeof _node === 'object'))
-        return;
-      const ps = parents(_node, []);
-      return (ps.find((ele) => scroll(ele) && ele.getBoundingClientRect().height !== docHeight) || document);
-    };
-    return scrollParent(this.host);
-  }
   shouldStick(data) {
     let scrollAmt;
     if (this.positions.includes('top')) {
@@ -27908,7 +29208,7 @@ class Sticker {
   }
   bootstrapGurantor() {
     this.hasBootstrapped = true;
-    this.scrollParent = this.scrollParent || this.getScrollParent();
+    this.scrollParent = this.scrollParent || findScrollParent(this.host);
     this.isRootSticker = this.scrollParent instanceof Document;
     this.trigger = this.trigger || document.createElement('div');
     this.trigger.innerHTML = '&nbsp;';
@@ -29747,27 +31047,6 @@ function classListToStr(classes) {
   });
   return classString;
 }
-/**
- * Attempts to find the closes scrolling parental element
- * @param element - the element from which to traverse up the DOM
- * @returns - the closest scrolling parental element
- */
-function findScrollParent(element) {
-  let style = getComputedStyle(element);
-  const excludeStaticParent = style.position === 'absolute';
-  const overflowRegex = /(auto|scroll)/;
-  if (style.position === 'fixed')
-    return document.documentElement;
-  for (let parent = element; (parent = parent.parentElement);) {
-    style = getComputedStyle(parent);
-    if (excludeStaticParent && style.position === 'static') {
-      continue;
-    }
-    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
-      return parent;
-  }
-  return document.documentElement;
-}
 /**
  * Checks whether an element is currently viewable within the viewport
  * @param el - element to check
@@ -31436,7 +32715,6 @@ registerComponents([
   AlgoliaFilter,
   AlgoliaPagination,
   AlgoliaResults,
-  AspectRatio,
   Checkbox,
   CheckboxGroup,
   DataList,
@@ -31459,8 +32737,10 @@ registerComponents([
   IconButton,
   Img,
   Input,
+  IntersectionObserve,
   Menu,
   MenuDrawer,
+  NanoAnimation,
   NavItem,
   Option,
   OverflowNav,