@ebrains/vue 0.9.0-beta → 0.9.1-beta

package/{eds-avatar_24.entry-BcY_4aZT.mjs → eds-avatar_26.entry-D44mROee.mjs}

@@ -1,12 +1,12 @@
-import { r as s, h as e, g as c, c as x } from "./index-xVeSZU9j.mjs";
+import { r as s, h as e, g as c, c as x } from "./index-CMP6-ecb.mjs";
 import { g as k } from "./color-2554aad6-CCcV5UJZ.mjs";
-import { s as h } from "./analytics-44b1416b-3vYuu4Xs.mjs";
+import { p as h } from "./sharedUtils-a550989c-Ci3Tx3jc.mjs";
+import { s as b } from "./analytics-44b1416b-3vYuu4Xs.mjs";
 import { c as m } from "./index-39c58238-BwYCDOHZ.mjs";
-import { p as f } from "./sharedUtils-a550989c-Ci3Tx3jc.mjs";
 import { t as p } from "./toastManager-d9eee791-CEYNwx25.mjs";
 import { h as u } from "./logo-color-7f1fd803-CFgbXdt8.mjs";
-import { h as z, a as S, b as F, c as C, v as E, d as H, e as W, f as I, g as j } from "./logo-white-no-bg-f382f86f-YhfmNmGG.mjs";
-const L = `html,
+import { h as z, a as S, b as F, c as C, v as E, d as H, e as W, f as I, g as L } from "./logo-white-no-bg-f382f86f-YhfmNmGG.mjs";
+const j = `html,
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -192,7 +192,7 @@ abbr:where([title]) {
 
 .w-\\[54px\\] {
     width: 54px;
-}`, A = L, O = class {
+}`, A = j, O = class {
   constructor(n) {
     s(this, n), this.firstName = "User", this.lastName = "Avatar", this.picture = void 0, this.initials = void 0, this.color = void 0;
   }
@@ -255,7 +255,106 @@ const B = ".border-soft{border-color:rgba(0, 0, 0, .15)}.border-softer{border-co
   }
 };
 D.style = _;
-const R = `:root {
+const R = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}", M = R, Y = class {
+  constructor(n) {
+    s(this, n), this.updateScreenSize = () => {
+      const i = window.innerWidth;
+      i < 769 ? (this.maxVisibleItems = 3, this.isSmallScreen = !0) : i <= 1024 ? (this.maxVisibleItems = 3, this.isSmallScreen = !0) : i <= 2200 ? (this.maxVisibleItems = 4, this.isSmallScreen = !1) : (this.maxVisibleItems = 6, this.isSmallScreen = !1);
+    }, this.items = [], this.intent = "ghost", this.parsedItems = [], this.isSmallScreen = !1, this.maxVisibleItems = 6;
+  }
+  /**
+   * Watches for changes to the `items` prop and parses it.
+   */
+  parseItems(n) {
+    this.parsedItems = h(n);
+  }
+  /**
+   * Lifecycle method that runs when the component is about to be loaded.
+   * It parses the initial `items` prop value.
+   */
+  componentWillLoad() {
+    this.parseItems(this.items), this.updateScreenSize(), window.addEventListener("resize", this.updateScreenSize);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.updateScreenSize);
+  }
+  /**
+   * Lifecycle method that runs when the component has fully loaded.
+   * It emits a custom event for each `eds-link` element contained within the breadcrumb.
+   */
+  componentDidLoad() {
+    var n;
+    const i = (n = this.el.shadowRoot) === null || n === void 0 ? void 0 : n.querySelectorAll("eds-link");
+    i == null || i.forEach((r) => {
+      this.emitContext(r);
+    });
+  }
+  /**
+   * Emits a custom event called `parentContext` for a given link element.
+   * This event provides context information about the breadcrumb component.
+   *
+   * @param linkElement - The link element to which the event will be dispatched.
+   */
+  emitContext(n) {
+    const i = new CustomEvent("parentContext", {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    n.dispatchEvent(i);
+  }
+  /**
+   * Returns breadcrumb items with potential truncation if there are too many.
+   * It inserts an ellipsis item where necessary.
+   */
+  getTruncatedItems() {
+    const n = this.parsedItems.length, i = { label: "...", url: "", isHidden: !0 };
+    if (n > this.maxVisibleItems) {
+      const r = this.parsedItems[0], l = this.parsedItems.slice(-2);
+      if (this.maxVisibleItems === 3)
+        return [r, i, ...l];
+      if (this.maxVisibleItems === 4) {
+        const t = this.parsedItems[Math.floor(n / 2)];
+        return [r, t, i, ...l];
+      }
+    }
+    return this.parsedItems;
+  }
+  /**
+   * Helper to determine the display label and full label.
+   * If the label is longer than 15 characters and the item is not the current (last) item,
+   * we display a truncated version but use the full label for aria attributes.
+   */
+  getLabels(n, i) {
+    return !i && n.label.length > 15 ? { displayLabel: `${n.label.slice(0, 15)}...`, fullLabel: n.label } : { displayLabel: n.label, fullLabel: n.label };
+  }
+  /**
+   * Render method for the breadcrumb component.
+   * It creates a navigation element with an ordered list of breadcrumb links.
+   * The last link is marked as the current page.
+   */
+  render() {
+    const n = this.getTruncatedItems();
+    return e("nav", { key: "75bb5629a10de2a2a7bd0b2bbef04e5f699f5fe2", "aria-label": "Breadcrumb" }, e("ol", { key: "7a5cc115b70d60bc878aa3d865802662f30948c1", class: "flex items-center space-x-2" }, n.map((i, r) => {
+      const l = r === n.length - 1;
+      return e("li", { class: "flex items-center" }, i.isHidden ? e("span", { class: "truncate px-2", "aria-hidden": "true" }, "...") : (() => {
+        const { displayLabel: t, fullLabel: d } = this.getLabels(i, l), o = l ? this.intent === "strong" ? "weak" : this.intent === "weak" ? "strong" : this.intent : this.intent;
+        return e("eds-link", Object.assign({ label: t, url: i.url, intent: o, current: l, "aria-label": d, size: "small", "icon-small": "false" }, l ? { "aria-current": "page" } : {}));
+      })(), !l && !i.isHidden && e("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }));
+    })));
+  }
+  get el() {
+    return c(this);
+  }
+  static get watchers() {
+    return {
+      items: ["parseItems"]
+    };
+  }
+};
+Y.style = M;
+const q = `:root {
   font-optical-sizing: auto;
 }
 
@@ -9158,7 +9257,7 @@ video {
     padding-left: 0rem;
     padding-right: 0rem;
   }
-}`, M = R, Y = class {
+}`, T = q, U = class {
   constructor(n) {
     s(this, n), this.button = m([
       "relative inline-flex items-center",
@@ -9319,7 +9418,7 @@ video {
       n.preventDefault();
       return;
     }
-    h({
+    b({
       category: "ui-component",
       parentContext: this.parentContext,
       tag: this.el.tagName.toLowerCase(),
@@ -9351,12 +9450,12 @@ video {
     return c(this);
   }
 };
-Y.style = M;
-const q = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}", U = q, T = class {
+U.style = T;
+const $ = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}", N = $, V = class {
   constructor(n) {
     s(this, n), this.dropdown = x(this, "dropdown", 7), this.focusableItems = [], this.handleClick = () => {
       var i;
-      this.isOpen = !this.isOpen, this.isOpen ? (this.focusIndex = 0, this.focusItem()) : this.closeDropdown(), this.dropdown.emit({ expanded: this.isOpen }), h({
+      this.isOpen = !this.isOpen, this.isOpen ? (this.focusIndex = 0, this.focusItem()) : this.closeDropdown(), this.dropdown.emit({ expanded: this.isOpen }), b({
         category: "ui-component",
         parentContext: null,
         tag: this.host.tagName.toLowerCase(),
@@ -9429,8 +9528,8 @@ const q = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-sh
     return c(this);
   }
 };
-T.style = U;
-const $ = "p{margin:0}.cursor-pointer{cursor:pointer}.ml-4{margin-left:0.25rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-darker{background-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.border-t-2{border-top-width:2px}.pt-20{padding-top:1.25rem}.pb-28{padding-bottom:1.75rem}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.mt-28{margin-top:1.75rem}.gap-y-12{row-gap:0.75rem}.gap-x-12{-moz-column-gap:0.75rem;column-gap:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:1.25rem}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.focus-visible\\:rounded-xs:focus-visible{border-radius:4px}.flex{display:flex}.w-\\[54px\\]{width:54px}.ml-0{margin-left:0rem}.order-last{order:9999}.w-full{width:100%}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.mt-4{margin-top:0.25rem}.gap-12{gap:0.75rem}.inline-block{display:inline-block}.\\!no-underline{text-decoration-line:none !important}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.hover\\:\\!underline:hover{text-decoration-line:underline !important}.ml-auto{margin-left:auto}.pl-12{padding-left:0.75rem}@media (min-width: 750px){.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:mt-0{margin-top:0rem}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:order-none{order:0}.lg\\:w-auto{width:auto}}@media (min-width: 1024px){.xl\\:pb-40{padding-bottom:2.5rem}}", N = $, X = class {
+V.style = N;
+const X = "p{margin:0}.cursor-pointer{cursor:pointer}.ml-4{margin-left:0.25rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-darker{background-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.border-t-2{border-top-width:2px}.pt-20{padding-top:1.25rem}.pb-28{padding-bottom:1.75rem}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.mt-28{margin-top:1.75rem}.gap-y-12{row-gap:0.75rem}.gap-x-12{-moz-column-gap:0.75rem;column-gap:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:1.25rem}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.focus-visible\\:rounded-xs:focus-visible{border-radius:4px}.flex{display:flex}.w-\\[54px\\]{width:54px}.ml-0{margin-left:0rem}.order-last{order:9999}.w-full{width:100%}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.mt-4{margin-top:0.25rem}.gap-12{gap:0.75rem}.inline-block{display:inline-block}.\\!no-underline{text-decoration-line:none !important}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.hover\\:\\!underline:hover{text-decoration-line:underline !important}.ml-auto{margin-left:auto}.pl-12{padding-left:0.75rem}@media (min-width: 750px){.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:mt-0{margin-top:0rem}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:order-none{order:0}.lg\\:w-auto{width:auto}}@media (min-width: 1024px){.xl\\:pb-40{padding-bottom:2.5rem}}", P = X, K = class {
   constructor(n) {
     s(this, n), this.cookies = x(this, "cookies", 7), this.backToTop = () => {
       window.scrollTo({ top: 0, behavior: "smooth" });
@@ -9452,15 +9551,15 @@ const $ = "p{margin:0}.cursor-pointer{cursor:pointer}.ml-4{margin-left:0.25rem}.
     } }) : null))), e("div", { key: "4965f9293058a1d750f5aa6598e829152b37f34d", class: "ml-auto pl-12" }, this.enableScrollTop ? e("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": "Back to Top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " }) : null))));
   }
 };
-X.style = N;
+K.style = P;
 function y(n, i, r, l, t) {
   const d = [];
   return l && !i && d.push(`${n} is required.`), t && typeof i == "string" && i.length > t && d.push(`${n} must be at most ${t} characters.`), r === "email" && i && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(i.toString()) && d.push("Invalid email format."), d;
 }
 function v(n, i, r) {
   const d = Array.from(r.querySelectorAll("eds-input-field")).filter((a) => {
-    var g, b;
-    return ((b = (g = a.shadowRoot) === null || g === void 0 ? void 0 : g.querySelectorAll(`input[name="${n}"]`)) === null || b === void 0 ? void 0 : b.length) > 0;
+    var g, f;
+    return ((f = (g = a.shadowRoot) === null || g === void 0 ? void 0 : g.querySelectorAll(`input[name="${n}"]`)) === null || f === void 0 ? void 0 : f.length) > 0;
   }).flatMap((a) => {
     var g;
     return Array.from(((g = a.shadowRoot) === null || g === void 0 ? void 0 : g.querySelectorAll(`input[name="${n}"]`)) || []);
@@ -9478,7 +9577,7 @@ function w(n, i, r) {
   const o = (l = d.shadowRoot) === null || l === void 0 ? void 0 : l.querySelector(`[name="${n}"]`);
   return i && o && !o.checked && t.push(`${n} is required.`), t;
 }
-function P(n, i) {
+function G(n, i) {
   const r = Array.from(n.querySelectorAll("eds-input-field"));
   for (const l of r)
     if (l.shadowRoot) {
@@ -9488,7 +9587,7 @@ function P(n, i) {
     }
   return null;
 }
-function V(n, i, r, l) {
+function J(n, i, r, l) {
   const t = {};
   let d = !1;
   return n.forEach((o) => {
@@ -9504,18 +9603,18 @@ function V(n, i, r, l) {
         const a = v(o.name, o.required, i);
         a.length > 0 && (t[o.name] = a, d = !0);
       } else {
-        const a = P(i, o.name);
+        const a = G(i, o.name);
         if (a) {
-          const g = a.value, b = y(o.name, g, o.type, o.required, o.maxlength);
-          b.length > 0 && (t[o.name] = b, d = !0);
+          const g = a.value, f = y(o.name, g, o.type, o.required, o.maxlength);
+          f.length > 0 && (t[o.name] = f, d = !0);
         }
       }
   }), { errors: t, hasError: d };
 }
-function K(n, i, r) {
+function Q(n, i, r) {
   return n.type === "checkbox" || n.type === "radio" ? n.options ? v(n.name, n.required, r) : w(n.name, n.required, r) : y(n.name, i, n.type, n.required, n.maxlength);
 }
-function G({
+function Z({
   initData: n,
   parsedFields: i,
   currentValues: r
@@ -9528,7 +9627,7 @@ function G({
     d !== void 0 && (l[t.name] = d);
   }), { updatedValues: l };
 }
-const J = ".mt-20{margin-top:1.25rem}", Q = J, Z = class {
+const nn = ".mt-20{margin-top:1.25rem}", en = nn, rn = class {
   constructor(n) {
     s(this, n), this.form = x(this, "form", 7), this.name = "eds-form", this.setFormUrl = !0, this.formBtn = !0, this.formBtnLabel = "Submit", this.errorMessage = "Some fields in your form are incorrect.", this.fields = [], this.initData = {}, this.values = {}, this.isSubmitting = !1, this.hasError = !1, this.errors = {}, this.parsedFields = [];
   }
@@ -9544,7 +9643,7 @@ const J = ".mt-20{margin-top:1.25rem}", Q = J, Z = class {
     return !!this.initData;
   }
   parseFields(n) {
-    this.parsedFields = f(n);
+    this.parsedFields = h(n);
   }
   emitContext(n) {
     const i = new CustomEvent("parentContext", {
@@ -9559,11 +9658,11 @@ const J = ".mt-20{margin-top:1.25rem}", Q = J, Z = class {
     return n.condition ? this.values[n.condition.field] === n.condition.value : !0;
   }
   validateForm() {
-    const { errors: n, hasError: i } = V(this.parsedFields, this.formEl, this.values, (r, l) => r.condition ? l[r.condition.field] === r.condition.value : !0);
+    const { errors: n, hasError: i } = J(this.parsedFields, this.formEl, this.values, (r, l) => r.condition ? l[r.condition.field] === r.condition.value : !0);
     this.errors = n, this.hasError = i;
   }
   populateFormWithInitData(n) {
-    const { updatedValues: i } = G({
+    const { updatedValues: i } = Z({
       initData: n,
       parsedFields: this.parsedFields,
       currentValues: this.values,
@@ -9614,7 +9713,7 @@ const J = ".mt-20{margin-top:1.25rem}", Q = J, Z = class {
     });
   }
   handleInput(n, i) {
-    const r = n.target, l = Object.assign({}, this.errors), t = K(i, r.value, this.formEl);
+    const r = n.target, l = Object.assign({}, this.errors), t = Q(i, r.value, this.formEl);
     t.length > 0 ? l[i.name] = t : delete l[i.name], this.errors = l, this.hasError = Object.keys(l).length > 0;
   }
   handleSubmit() {
@@ -9627,7 +9726,7 @@ const J = ".mt-20{margin-top:1.25rem}", Q = J, Z = class {
           success: !1,
           message: this.errorMessage,
           data: this.makeFormData()
-        }), h({
+        }), b({
           category: "ui-component",
           parentContext: null,
           tag: this.el.tagName.toLowerCase(),
@@ -9642,7 +9741,7 @@ const J = ".mt-20{margin-top:1.25rem}", Q = J, Z = class {
         validated: !0,
         message: "Form data validated successfully",
         data: this.getFormData()
-      }), h({
+      }), b({
         category: "ui-component",
         parentContext: null,
         tag: this.el.tagName.toLowerCase(),
@@ -9667,8 +9766,8 @@ const J = ".mt-20{margin-top:1.25rem}", Q = J, Z = class {
     };
   }
 };
-Z.style = Q;
-const nn = ".bg-default{background-color:var(--grey-200)}.bg-darker{background-color:var(--grey-400)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--black)}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0rem}.z-\\[999999\\]{z-index:999999}.overflow-y-scroll{overflow-y:scroll}.flex{display:flex}.inline-flex{display:inline-flex}.min-h-full{min-height:100%}.flex-col{flex-direction:column}.w-full{width:100%}.top-0{top:0rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-auto{margin-top:auto}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.px-16{padding-left:1rem;padding-right:1rem}.py-16{padding-top:1rem;padding-bottom:1rem}.mt-28{margin-top:1.75rem}.gap-y-8{row-gap:0.5rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.rounded-xs{border-radius:4px}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.hover\\:text-lighter:hover{color:var(--grey-600)}.w-fit{width:-moz-fit-content;width:fit-content}", en = nn, rn = class {
+rn.style = en;
+const ln = ".bg-default{background-color:var(--grey-200)}.bg-darker{background-color:var(--grey-400)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--black)}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0rem}.z-\\[999999\\]{z-index:999999}.overflow-y-scroll{overflow-y:scroll}.flex{display:flex}.inline-flex{display:inline-flex}.min-h-full{min-height:100%}.flex-col{flex-direction:column}.w-full{width:100%}.top-0{top:0rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-auto{margin-top:auto}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.px-16{padding-left:1rem;padding-right:1rem}.py-16{padding-top:1rem;padding-bottom:1rem}.mt-28{margin-top:1.75rem}.gap-y-8{row-gap:0.5rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.rounded-xs{border-radius:4px}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.hover\\:text-lighter:hover{color:var(--grey-600)}.w-fit{width:-moz-fit-content;width:fit-content}", tn = ln, on = class {
   constructor(n) {
     s(this, n), this.menuClose = x(this, "menuClose", 7), this.links = void 0, this.menuLinks = void 0, this.homeUrl = "/", this.inverseHeader = !1, this.isMenuOpen = !1;
   }
@@ -9706,7 +9805,7 @@ const nn = ".bg-default{background-color:var(--grey-200)}.bg-darker{background-c
    * @returns {any[]} Array of parsed link objects
    */
   get parsedLinks() {
-    return f(this.links);
+    return h(this.links);
   }
   /**
    * Parses the `menuLinks` prop into an array of link objects.
@@ -9715,14 +9814,14 @@ const nn = ".bg-default{background-color:var(--grey-200)}.bg-darker{background-c
    * @returns {any[]} Array of parsed menu link objects
    */
   get parsedMenuLinks() {
-    return f(this.menuLinks);
+    return h(this.menuLinks);
   }
   render() {
     return this.isMenuOpen ? e("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, e("div", { class: "flex min-h-full flex-col" }, e("div", { class: `w-full sticky top-0 ${this.inverseHeader ? "bg-strongest" : "bg-default"}` }, e("div", { class: "mx-auto flex items-center justify-between" }, e("div", { class: "mr-auto w-[200px] h-[85px]" }, e("eds-logo", { type: this.inverseHeader ? "color-white" : "color", href: this.homeUrl })), e("div", { class: "px-16" }, e("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), e("div", { class: "py-16 px-16" }, e("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((n, i) => e("eds-link", { label: n.label, key: i, url: n.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" }))), e("eds-block-break", null), e("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((n, i) => e("eds-link", { label: n.label, key: i, url: n.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" })))), e("div", { class: "mt-auto" }, e("eds-footer", { social: !0, "extra-class": "bg-darker" })))) : null;
   }
 };
-rn.style = en;
-const ln = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}", tn = ln, on = class {
+on.style = tn;
+const dn = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}", sn = dn, an = class {
   constructor(n) {
     s(this, n), this.toggleMenu = x(this, "toggleMenu", 7), this.homeUrl = "/", this.links = void 0, this.inverseHeader = !1, this.menuEnabled = !1, this.isMenuOpen = !1, this.isUserMenuOpen = !1, this.isAuthenticated = !1;
   }
@@ -9772,7 +9871,7 @@ const ln = ".block{display:block}.inline-block{display:inline-block}.inline{disp
    * @returns {any[]} Array of parsed link objects
    */
   get parsedLinks() {
-    return f(this.links);
+    return h(this.links);
   }
   render() {
     return e("header", { key: "eabb97331efd8b4aee5e1f249ebc60d38926eb5e", class: `flex items-center justify-between relative z-10
@@ -9782,8 +9881,8 @@ const ln = ".block{display:block}.inline-block{display:inline-block}.inline{disp
     return c(this);
   }
 };
-on.style = tn;
-const Yn = class {
+an.style = sn;
+const Xn = class {
   constructor(n) {
     s(this, n), this.TagName = null, this.icon = "arrow-right", this.class = "", this.IconComponent = null;
   }
@@ -9809,7 +9908,7 @@ const Yn = class {
       icon: ["iconChanged"]
     };
   }
-}, dn = `/*
+}, cn = `/*
 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
@@ -9891,7 +9990,7 @@ video {
 
 .opacity-100 {
     opacity: 1;
-}`, sn = dn, an = class {
+}`, gn = cn, xn = class {
   constructor(n) {
     s(this, n), this.img = null, this.handleLoad = () => {
       this.loaded = !0, this.showBg = !1;
@@ -9919,8 +10018,8 @@ video {
     return c(this);
   }
 };
-an.style = sn;
-const qn = class {
+xn.style = gn;
+const Pn = class {
   constructor(n) {
     s(this, n), this.handleInput = (i) => {
       const r = i.target;
@@ -9953,7 +10052,7 @@ const qn = class {
       value: ["onValueChanged"]
     };
   }
-}, cn = `:root {
+}, hn = `:root {
   font-optical-sizing: auto;
 }
 html,
@@ -17713,7 +17812,7 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 
-`, gn = cn, xn = class {
+`, bn = hn, fn = class {
   constructor(n) {
     s(this, n), this.handleNativeInput = (i) => {
       var r;
@@ -17778,22 +17877,22 @@ input[type="range"]::-webkit-slider-thumb {
     return c(this);
   }
 };
-xn.style = gn;
-const Un = class {
+fn.style = bn;
+const Kn = class {
   constructor(n) {
     s(this, n), this.name = void 0, this.errorMessage = void 0, this.message = void 0, this.error = !1, this.link = void 0;
   }
   render() {
     return e("div", { key: "595e4c2c12d9379764b777d7b1edaea47c1e52ae", class: "space-y-4 mt-4" }, this.error && this.errorMessage && e("div", { key: "9597904f712fc30d183a8ac39b65cdd99fec737c", id: `error_${this.name}`, class: "text-error flex items-center" }, e("eds-icon-wrapper", { key: "39b20e643899e760691c1d752733c2acaf0fb4cc", icon: "warning" }), e("p", { key: "cd5b357cdac58f93f03d688c8fab0a942785ff39", class: "f-ui-04 ml-4", innerHTML: this.errorMessage })), this.message && e("p", { key: "06c34d4567cdeaebdb167c9c44b7111b6cfd38d3", id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && e("a", { key: "c6eacf01f49da84f14ec95995fbeddabf83d23fc", href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label));
   }
-}, Tn = class {
+}, Gn = class {
   constructor(n) {
     s(this, n), this.label = void 0, this.name = void 0, this.required = !1, this.disabled = !1;
   }
   render() {
     return e("label", { key: "632b2634e219c2a1d8fdc5710c95c80601b0b2ee", htmlFor: this.name, class: `input-label ${this.disabled ? "text-lighter" : ""}` }, this.label, this.required && e("span", { key: "d1cb546dca2dcd44dedb7f00d7f432a47c9dc517" }, e("span", { key: "08346b3153d32b3fd4ea63f9e27278ec51b2e5b3", "aria-hidden": "true" }, "*"), e("span", { key: "e364bfb64126e1f704c903528e9a3118d8828227", class: "sr-only" }, "required")));
   }
-}, $n = class {
+}, Jn = class {
   constructor(n) {
     s(this, n), this.edsrange = x(this, "edsrange", 7), this.onInput = (i) => {
       const r = i.target;
@@ -17827,7 +17926,7 @@ const Un = class {
       value: ["onValueChange"]
     };
   }
-}, Nn = class {
+}, Qn = class {
   constructor(n) {
     s(this, n), this.search = x(this, "search", 7), this.keydownListener = (i) => {
       (i.metaKey || i.ctrlKey) && i.key.toLowerCase() === "k" && (i.preventDefault(), this.inputElement && !this.disabled && this.inputElement.focus());
@@ -17835,7 +17934,7 @@ const Un = class {
       this.search.emit({
         event: "change",
         value: i.target.value
-      }), h({
+      }), b({
         category: "ui-component",
         parentContext: null,
         tag: this.el.tagName.toLowerCase(),
@@ -17872,7 +17971,7 @@ const Un = class {
   get el() {
     return c(this);
   }
-}, Xn = class {
+}, Zn = class {
   constructor(n) {
     s(this, n), this.changeEvent = x(this, "changeEvent", 7), this.handleChange = (i) => {
       const r = i.target;
@@ -17924,7 +18023,7 @@ const Un = class {
       options: ["loadOptions"]
     };
   }
-}, hn = `:root {
+}, mn = `:root {
   font-optical-sizing: auto;
 }
 html,
@@ -23625,14 +23724,14 @@ input[type="range"]::-webkit-slider-thumb {
 .ml-auto {
   margin-left: auto;
 }
-.mr-4 {
-  margin-right: 0.25rem;
+.mr-0 {
+  margin-right: 0rem;
 }
-.-mr-4 {
-  margin-right: -0.25rem;
+.mr-2 {
+  margin-right: 0.125rem;
 }
-.-mr-8 {
-  margin-right: -0.5rem;
+.mr-4 {
+  margin-right: 0.25rem;
 }
 .mr-8 {
   margin-right: 0.5rem;
@@ -25025,7 +25124,7 @@ input[type="range"]::-webkit-slider-thumb {
     padding-right: 0rem;
   }
 }
-`, bn = hn, fn = m([
+`, pn = mn, un = m([
   "relative inline-flex justify-center items-center py-8 rounded-sm",
   "effect-color effect-focus aria-disabled:text-lightest",
   "aria-disabled:bg-dark aria-disabled:cursor-not-allowed aria-disabled:!border-transparent aria-disabled:after:!border-transparent"
@@ -25149,7 +25248,7 @@ input[type="range"]::-webkit-slider-thumb {
     size: "small",
     hasIcon: !1
   }
-}), mn = class {
+}), yn = class {
   constructor(n) {
     s(this, n), this.parentContext = null, this.label = void 0, this.intent = void 0, this.icon = void 0, this.iconPos = "right", this.iconSmall = !1, this.size = "small", this.external = !1, this.current = !1, this.download = !1, this.url = void 0, this.ariaLabel = void 0, this.disabled = !1, this.hideLabelOnSmallScreen = !1, this.extraClass = void 0;
   }
@@ -25162,7 +25261,7 @@ input[type="range"]::-webkit-slider-thumb {
       n.preventDefault();
       return;
     }
-    h({
+    b({
       category: "ui-component",
       parentContext: this.parentContext,
       tag: this.el.tagName.toLowerCase(),
@@ -25186,7 +25285,7 @@ input[type="range"]::-webkit-slider-thumb {
             `, icon: this.icon })) : null;
   }
   render() {
-    const n = this.disabled ? "span" : "a", i = fn({
+    const n = this.disabled ? "span" : "a", i = un({
       intent: this.intent,
       size: this.getLinkSize(),
       iconSmall: this.iconSmall,
@@ -25199,8 +25298,8 @@ input[type="range"]::-webkit-slider-thumb {
     return c(this);
   }
 };
-mn.style = bn;
-const pn = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}", un = pn, yn = class {
+yn.style = pn;
+const vn = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}", wn = vn, kn = class {
   constructor(n) {
     s(this, n), this.href = "/", this.orientation = "horizontal", this.type = void 0, this.label = "Home";
   }
@@ -25213,7 +25312,7 @@ const pn = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{
    * - `action`: The action, set as "click".
    */
   handleClick() {
-    h({
+    b({
       category: "ui-component",
       tag: this.el.tagName.toLowerCase(),
       name: "logo",
@@ -25237,7 +25336,7 @@ const pn = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{
         black: H,
         "color-white": W,
         white: I,
-        "no-bg": j
+        "no-bg": L
       }
     }[this.orientation];
     if (!i)
@@ -25253,8 +25352,8 @@ const pn = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{
     return c(this);
   }
 };
-yn.style = un;
-const vn = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}", wn = vn, kn = class {
+kn.style = wn;
+const zn = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}", Sn = zn, Fn = class {
   constructor(n) {
     s(this, n), this.socialNetworks = [
       {
@@ -25287,7 +25386,7 @@ const vn = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset
         url: "https://bsky.app/profile/ebrains.bsky.social",
         icon: "bluesky"
       }
-    ], this.title = "Follow EBRAINS to keep up-to-date";
+    ], this.heading = "Follow EBRAINS to keep up-to-date";
   }
   /**
    * Renders the component's HTML structure with links to EBRAINS social profiles.
@@ -25296,11 +25395,11 @@ const vn = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset
    * @returns {JSX.Element} The rendered JSX for the component.
    */
   render() {
-    return e("div", { key: "213e6e637f2097165429ed584fb24b0251826627" }, e("p", { key: "060717f30e5ecb2e8128933b761b058eafc7ce6a", class: "f-ui-02" }, this.title), e("ul", { key: "7d8cbd7a92d8785058be18899e42da7495eedfc5", class: "mt-12 flex gap-4" }, this.socialNetworks.map((n, i) => e("li", { key: i }, e("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: !0, "aria-label": n.label, url: n.url, icon: n.icon, intent: "strong" })))));
+    return e("div", { key: "830f2648d282b24630f9266bc07dcf9d1fb528de" }, e("p", { key: "14d58e971d0ca585376d21400258742d2067471d", class: "f-ui-02" }, this.heading), e("ul", { key: "d5ff24b6dbcfa25bae9b863b64e635e5c838db50", class: "mt-12 flex gap-4" }, this.socialNetworks.map((n, i) => e("li", { key: i }, e("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: !0, "aria-label": n.label, url: n.url, icon: n.icon, intent: "strong" })))));
   }
 };
-kn.style = wn;
-const zn = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}", Sn = zn, Fn = class {
+Fn.style = Sn;
+const Cn = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}", En = Cn, Hn = class {
   constructor(n) {
     s(this, n), this.step = x(this, "step", 7), this.handleNext = () => {
       this.activeStep = this.activeStep + 1, this.activeStep < this.parsedSteps.length && this.step.emit(this.activeStep);
@@ -25352,7 +25451,7 @@ const zn = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-le
    * Parse the JSON string into an array of steps.
    */
   get parsedSteps() {
-    return f(this.steps);
+    return h(this.steps);
   }
   render() {
     const n = this.parsedSteps;
@@ -25367,8 +25466,8 @@ const zn = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-le
     };
   }
 };
-Fn.style = Sn;
-const Cn = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-\\[\\#9CE142\\]{--tw-gradient-from:#9CE142 var(--tw-gradient-from-position);--tw-gradient-to:rgb(156 225 66 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-\\[\\#00C959\\]{--tw-gradient-to:rgb(0 201 89 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #00C959 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\\[\\#00A595\\]{--tw-gradient-to:#00A595 var(--tw-gradient-to-position)}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mb-28{margin-bottom:1.75rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-16{padding:1rem}.p-24{padding:1.5rem}.p-48{padding:3rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bg-opacity-90{--tw-bg-opacity:0.9}", En = Cn, Hn = class {
+Hn.style = En;
+const Wn = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-\\[\\#9CE142\\]{--tw-gradient-from:#9CE142 var(--tw-gradient-from-position);--tw-gradient-to:rgb(156 225 66 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-\\[\\#00C959\\]{--tw-gradient-to:rgb(0 201 89 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #00C959 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\\[\\#00A595\\]{--tw-gradient-to:#00A595 var(--tw-gradient-to-position)}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mb-28{margin-bottom:1.75rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-16{padding:1rem}.p-24{padding:1.5rem}.p-48{padding:3rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bg-opacity-90{--tw-bg-opacity:0.9}", In = Wn, Ln = class {
   constructor(n) {
     s(this, n), this.step = x(this, "step", 7), this.handleNext = () => {
       this.activeStep = this.activeStep + 1, this.activeStep < this.parsedSteps.length && this.step.emit(this.activeStep);
@@ -25416,7 +25515,7 @@ const Cn = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,d
    * Parses the steps property into an array of Step objects.
    */
   get parsedSteps() {
-    return f(this.steps);
+    return h(this.steps);
   }
   render() {
     const n = this.parsedSteps;
@@ -25434,8 +25533,46 @@ const Cn = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,d
     };
   }
 };
-Hn.style = En;
-const Wn = `@font-face {
+Ln.style = In;
+const jn = ".f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.py-3{padding-top:0.1875rem;padding-bottom:0.1875rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.px-2{padding-left:0.125rem;padding-right:0.125rem}.px-3{padding-left:0.1875rem;padding-right:0.1875rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.px-5{padding-left:0.3125rem;padding-right:0.3125rem}.px-6{padding-left:0.375rem;padding-right:0.375rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-accent{background-color:var(--green-500)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}", An = jn, On = m(
+  ["border-2 rounded-pill"],
+  // Base classes
+  {
+    variants: {
+      intent: {
+        primary: "border-accent bg-accent",
+        default: "border-default",
+        strong: "text-inverse bg-strongest border-default",
+        accent: "text-[#0034CB] border-[#0034CB]",
+        weak: "text-light bg-strongest-soft border-transparent",
+        inverse: "border-inverse text-inverse",
+        "inverse-strong": "bg-inverse border-inverse text-lighter"
+      },
+      size: {
+        small: "f-ui-05 py-2 px-4",
+        // smaller padding
+        medium: "f-ui-03 py-3 px-5",
+        // moderate padding
+        large: "f-ui-01 py-4 px-6"
+        // larger padding
+      }
+    },
+    defaultVariants: {
+      intent: "default",
+      size: "small"
+    }
+  }
+), Bn = class {
+  constructor(n) {
+    s(this, n), this.label = void 0, this.intent = "default", this.size = "small";
+  }
+  render() {
+    const n = On({ intent: this.intent, size: this.size });
+    return e("span", { key: "20ad2f289c8362346e28e42677b3bc3d626e154d", class: n }, this.label);
+  }
+};
+Bn.style = An;
+const _n = `@font-face {
   font-family: "Inter";
   font-weight: 100 900;
   font-display: swap;
@@ -32132,6 +32269,10 @@ input[type="range"]::-webkit-slider-thumb {
 .gap-4 {
   gap: 0.25rem;
 }
+.gap-x-1 {
+  -moz-column-gap: 0.0625rem;
+       column-gap: 0.0625rem;
+}
 .gap-x-12 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
@@ -32475,6 +32616,14 @@ input[type="range"]::-webkit-slider-thumb {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+.px-5 {
+  padding-left: 0.3125rem;
+  padding-right: 0.3125rem;
+}
+.px-6 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .py-1 {
   padding-top: 0.0625rem;
   padding-bottom: 0.0625rem;
@@ -32487,10 +32636,18 @@ input[type="range"]::-webkit-slider-thumb {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.py-2 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .py-20 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
+.py-3 {
+  padding-top: 0.1875rem;
+  padding-bottom: 0.1875rem;
+}
 .py-4 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -33211,7 +33368,7 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 
-`, In = Wn, jn = class {
+`, Dn = _n, Rn = class {
   constructor(n) {
     s(this, n), this.user = void 0;
   }
@@ -33242,8 +33399,8 @@ input[type="range"]::-webkit-slider-thumb {
     return c(this);
   }
 };
-jn.style = In;
-const Pn = class {
+Rn.style = Dn;
+const ne = class {
   constructor(n) {
     s(this, n);
   }
@@ -33254,26 +33411,28 @@ const Pn = class {
 export {
   O as eds_avatar,
   D as eds_block_break,
-  Y as eds_button,
-  T as eds_dropdown,
-  X as eds_footer,
-  Z as eds_form,
-  rn as eds_fullscreen_menu,
-  on as eds_header,
-  Yn as eds_icon_wrapper,
-  an as eds_img,
-  qn as eds_input,
-  xn as eds_input_field,
-  Un as eds_input_footer,
-  Tn as eds_input_label,
-  $n as eds_input_range,
-  Nn as eds_input_search,
-  Xn as eds_input_select,
-  mn as eds_link,
-  yn as eds_logo,
-  kn as eds_social_networks,
-  Fn as eds_steps,
-  Hn as eds_steps_v2,
-  jn as eds_user,
-  Pn as token_spacing
+  Y as eds_breadcrumb,
+  U as eds_button,
+  V as eds_dropdown,
+  K as eds_footer,
+  rn as eds_form,
+  on as eds_fullscreen_menu,
+  an as eds_header,
+  Xn as eds_icon_wrapper,
+  xn as eds_img,
+  Pn as eds_input,
+  fn as eds_input_field,
+  Kn as eds_input_footer,
+  Gn as eds_input_label,
+  Jn as eds_input_range,
+  Qn as eds_input_search,
+  Zn as eds_input_select,
+  yn as eds_link,
+  kn as eds_logo,
+  Fn as eds_social_networks,
+  Hn as eds_steps,
+  Ln as eds_steps_v2,
+  Bn as eds_tag,
+  Rn as eds_user,
+  ne as token_spacing
 };