@ebrains/react 1.0.0 → 1.2.0

package/{eds-avatar_34.entry.esm.js → eds-avatar_28.entry.esm.js}

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, g as getElement, c as createEvent, H as Host } from './index.esm2.js';
-import { p as parseData } from './sharedUtils-a550989c.esm.js';
+import { r as registerInstance, h, g as getElement, c as createEvent } from './index.esm2.js';
 import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
 import { c as cva } from './index-39c58238.esm.js';
+import { p as parseData } from './sharedUtils-a550989c.esm.js';
 import { h as hLogoColor } from './logo-color-7f1fd803.esm.js';
 import { h as hLogoBlack, a as hLogoColorWhite, b as hLogoWhite, c as hLogoWhiteNoBg, v as vLogoColor, d as vLogoBlack, e as vLogoColorWhite, f as vLogoWhite, g as vLogoWhiteNoBg } from './logo-white-no-bg-f382f86f.esm.js';
 import 'react';
@@ -54,7 +54,7 @@ const EdsAvatar = class {
    */
   render() {
     return h("div", {
-      key: '7c207192778b86ce5a24816637cf6e6239310eca',
+      key: 'b7eff7ae1a1dea3509041e39316b49b673dbdf17',
       class: this.containerClasses
     }, this.picture ? h("eds-img", {
       src: this.picture,
@@ -80,183 +80,12 @@ const EdsBlockBreak = class {
   }
   render() {
     return h("hr", {
-      key: 'fe48c93d6cb5648749bc050599fdfcb1712d1291',
+      key: 'b604a776cae7edeee189e00af6993b42b57203f0',
       class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2`
     });
   }
 };
 EdsBlockBreak.style = EdsBlockBreakStyle0;
-const edsBreadcrumbCss = "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}}";
-const EdsBreadcrumbStyle0 = edsBreadcrumbCss;
-const EdsBreadcrumb = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Updates the maximum number of visible items and tracks if the screen is small.
-     */
-    this.updateScreenSize = () => {
-      const width = window.innerWidth;
-      if (width < 769) {
-        this.maxVisibleItems = 3;
-      } else if (width <= 1024) {
-        this.maxVisibleItems = 3;
-      } else if (width <= 1280) {
-        this.maxVisibleItems = 3;
-      } else if (width <= 2200) {
-        this.maxVisibleItems = 4;
-      } else {
-        this.maxVisibleItems = 6;
-      }
-    };
-    this.items = [];
-    this.intent = 'ghost';
-    this.parsedItems = [];
-    this.isSmallScreen = false;
-    this.maxVisibleItems = 6;
-  }
-  /**
-   * Watches for changes to the `items` prop and parses it.
-   */
-  parseItems(newValue) {
-    this.parsedItems = parseData(newValue);
-  }
-  /**
-   * 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 _a;
-    const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link');
-    links === null || links === void 0 ? void 0 : links.forEach(link => {
-      this.emitContext(link);
-    });
-  }
-  /**
-   * 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(linkElement) {
-    const event = new CustomEvent('parentContext', {
-      detail: {
-        componentName: this.el.tagName.toLowerCase(),
-        identifier: null
-      }
-    });
-    linkElement.dispatchEvent(event);
-  }
-  /**
-   * Returns breadcrumb items with potential truncation if there are too many.
-   * It inserts an ellipsis item where necessary.
-   */
-  getTruncatedItems() {
-    const totalItems = this.parsedItems.length;
-    const ellipsis = {
-      label: '...',
-      url: '',
-      isHidden: true
-    };
-    if (totalItems > this.maxVisibleItems) {
-      const firstItem = this.parsedItems[0];
-      const lastItems = this.parsedItems.slice(-2);
-      if (this.maxVisibleItems === 3) {
-        return [firstItem, ellipsis, ...lastItems];
-      } else if (this.maxVisibleItems === 4) {
-        const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
-        return [firstItem, middleItem, ellipsis, ...lastItems];
-      }
-    }
-    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(item, isCurrent) {
-    if (!isCurrent && item.label.length > 15) {
-      return {
-        displayLabel: `${item.label.slice(0, 15)}...`,
-        fullLabel: item.label
-      };
-    }
-    return {
-      displayLabel: item.label,
-      fullLabel: item.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 itemsToRender = this.getTruncatedItems();
-    return h("nav", {
-      key: '2651e18e4c157f49e1da2ef93d4f68b9497118e4',
-      "aria-label": "Breadcrumb"
-    }, h("ol", {
-      key: 'd1f5bb18bb35df9455a4c7a566850d59eb657242',
-      class: "flex items-center space-x-2"
-    }, itemsToRender.map((item, index) => {
-      const isLast = index === itemsToRender.length - 1;
-      return h("li", {
-        class: "flex items-center"
-      }, !item.isHidden ? (() => {
-        const {
-          fullLabel
-        } = this.getLabels(item, isLast);
-        const linkIntent = isLast ? this.intent === 'strong' ? 'weak' : this.intent === 'weak' ? 'strong' : this.intent : this.intent;
-        return h("eds-link", Object.assign({
-          label: fullLabel,
-          url: item.url,
-          intent: linkIntent,
-          disabled: isLast,
-          current: isLast,
-          "aria-label": fullLabel,
-          size: "small",
-          "icon-small": "false"
-        }, isLast ? {
-          'aria-current': 'page'
-        } : {}));
-      })() : h("eds-link", {
-        label: "...",
-        url: "#",
-        intent: "strong",
-        current: false,
-        "aria-label": "...",
-        size: "small",
-        "icon-small": "false",
-        icon: "chevron-right"
-      }), !isLast && !item.isHidden && h("eds-icon-wrapper", {
-        icon: "chevron-right",
-        class: "w-20 h-20"
-      }));
-    })));
-  }
-  get el() {
-    return getElement(this);
-  }
-  static get watchers() {
-    return {
-      "items": ["parseItems"]
-    };
-  }
-};
-EdsBreadcrumb.style = EdsBreadcrumbStyle0;
 const edsButtonCss = "*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: currentColor;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\n  1. Change the font styles in all browsers.\n  2. Remove the margin in Firefox and Safari.\n  3. Remove default padding in all browsers.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n  Remove the inheritance of text transform in Edge and Firefox.\n  */\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n  1. Correct the inability to style clickable types in iOS and Safari.\n  2. Remove default button styles.\n  */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\n\np {\n  margin: 0;\n}\n\n/*\n  Set the default cursor for buttons.\n  */\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\n  Make sure disabled buttons don't get the pointer cursor.\n  */\n:disabled {\n  cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n.f-body-01 {\n  font-family: var(--f-body-01-fontFamily);\n  font-weight: var(--f-body-01-fontWeight);\n  font-size: var(--f-body-01-fontSize);\n  line-height: var(--f-body-01-lineHeight);\n  letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n  font-family: var(--f-body-02-fontFamily);\n  font-weight: var(--f-body-02-fontWeight);\n  font-size: var(--f-body-02-fontSize);\n  line-height: var(--f-body-02-lineHeight);\n  letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n  font-family: var(--f-ui-02-fontFamily);\n  font-weight: var(--f-ui-02-fontWeight);\n  font-size: var(--f-ui-02-fontSize);\n  line-height: var(--f-ui-02-lineHeight);\n  letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.border-inside {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n  }\n\n  &::after {\n    position: absolute;\n  }\n\n  &::after {\n    inset: 0rem;\n  }\n\n  &::after {\n    z-index: 1;\n  }\n\n  &::after {\n    border-radius: 8px;\n  }\n\n  &::after {\n    border-width: 1px;\n  }\n\n  &::after {\n    border-width: 2px;\n  }\n\n  &::after {\n    border-color: rgba(0, 0, 0, .1);\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.border-inside-inverse {\n  &::after {\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.border-inside-pill {\n  &::after {\n    border-radius: 100px;\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.loader {\n  box-sizing: border-box;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loader {\n  animation: spin 1s linear infinite;\n  border-radius: 9999px;\n  border: 3px solid rgba(0, 0, 0, .3);\n  border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n  outline-style: solid;\n}\n\n.effect-focus-within {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n  outline-style: solid;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.pointer-events-none {\n  pointer-events: none;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.sticky {\n  position: sticky;\n}\n\n.inset-0 {\n  inset: 0rem;\n}\n\n.inset-x-16 {\n  left: 1rem;\n  right: 1rem;\n}\n\n.-top-8 {\n  top: -0.5rem;\n}\n\n.left-0 {\n  left: 0rem;\n}\n\n.left-1\\/2 {\n  left: 50%;\n}\n\n.left-4 {\n  left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n  left: 4px;\n}\n\n.right-0 {\n  right: 0rem;\n}\n\n.right-4 {\n  right: 0.25rem;\n}\n\n.right-8 {\n  right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n  right: 6px;\n}\n\n.top-0 {\n  top: 0rem;\n}\n\n.top-1\\/2 {\n  top: 50%;\n}\n\n.m-0 {\n  margin: 0rem;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.-ml-16 {\n  margin-left: -1rem;\n}\n\n.-mr-16 {\n  margin-right: -1rem;\n}\n\n.ml-0 {\n  margin-left: 0rem;\n}\n\n.ml-4 {\n  margin-left: 0.25rem;\n}\n\n.ml-64 {\n  margin-left: 4rem;\n}\n\n.ml-8 {\n  margin-left: 0.5rem;\n}\n\n.ml-auto {\n  margin-left: auto;\n}\n\n.mr-4 {\n  margin-right: 0.25rem;\n}\n\n.mr-8 {\n  margin-right: 0.5rem;\n}\n\n.mr-auto {\n  margin-right: auto;\n}\n\n.block {\n  display: block;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-20 {\n  height: 1.25rem;\n}\n\n.h-24 {\n  height: 1.5rem;\n}\n\n.h-36 {\n  height: 2.25rem;\n}\n\n.h-44 {\n  height: 2.75rem;\n}\n\n.h-auto {\n  height: auto;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.\\!min-h-20 {\n  min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n  min-height: 100vh;\n}\n\n.w-20 {\n  width: 1.25rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.flex-none {\n  flex: none;\n}\n\n.grow {\n  flex-grow: 1;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n\n.break-words {\n  overflow-wrap: break-word;\n}\n\n.rounded {\n  border-radius: 0.25rem;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-lg {\n  border-radius: 16px;\n}\n\n.rounded-md {\n  border-radius: 12px;\n}\n\n.rounded-pill {\n  border-radius: 100px;\n}\n\n.rounded-sm {\n  border-radius: 8px;\n}\n\n.rounded-xxs {\n  border-radius: 2px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n  border-color: rgba(0, 0, 0, .05);\n}\n\n.border-b-softer {\n  border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n  background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n  background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n  background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n  background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n  background-color: var(--green-600);\n}\n\n.bg-dark {\n  background-color: var(--grey-300);\n}\n\n.bg-darker {\n  background-color: var(--grey-400);\n}\n\n.bg-overlay {\n  background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n  background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n  background-color: var(--grey-800);\n}\n\n.bg-stronger {\n  background-color: var(--grey-900);\n}\n\n.bg-strongest {\n  background-color: var(--black);\n}\n\n.p-12 {\n  padding: 0.75rem;\n}\n\n.p-6 {\n  padding: 0.375rem;\n}\n\n.p-8 {\n  padding: 0.5rem;\n}\n\n.\\!px-0 {\n  padding-left: 0rem !important;\n  padding-right: 0rem !important;\n}\n\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.px-16 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.pl-4 {\n  padding-left: 0.25rem;\n}\n\n.pl-8 {\n  padding-left: 0.5rem;\n}\n\n.pr-4 {\n  padding-right: 0.25rem;\n}\n\n.pr-8 {\n  padding-right: 0.5rem;\n}\n\n.\\!text-current {\n  color: currentColor !important;\n}\n\n.text-accent {\n  color: var(--green-500);\n}\n\n.text-current {\n  color: currentColor;\n}\n\n.text-default {\n  color: var(--black);\n}\n\n.text-inverse {\n  color: var(--white);\n}\n\n.text-lightest {\n  color: var(--grey-500);\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n  --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n  --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n  text-underline-offset: 0.2em;\n}\n\n.\\@container {\n  container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n  background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n  color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n  background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n  background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n  background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n  background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n  background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n  background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n  background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n  background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n  color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n  color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n  text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n  text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n  background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n  color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n  border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n  background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n  background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n  color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n  color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n  text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n  background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n  position: absolute;\n}\n\n.after\\:inset-0::after {\n  inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n  left: 0rem;\n  right: 0rem;\n}\n\n.after\\:bottom-0::after {\n  bottom: 0rem;\n}\n\n.after\\:left-16::after {\n  left: 1rem;\n}\n\n.after\\:right-16::after {\n  right: 1rem;\n}\n\n.after\\:z-10::after {\n  z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n  border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n  border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n  border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n  border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n  border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n  opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n  --tw-content: '';\n  content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n  border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n  opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n  opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n  border-color: var(--transparent) !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n  opacity: 1;\n}";
 const EdsButtonStyle0 = edsButtonCss;
 const EdsButton = class {
@@ -399,20 +228,20 @@ const EdsButton = class {
     });
     const ElementType = this.elementType;
     return h(ElementType, {
-      key: 'b51281f8946bbf5a22b8fec9ec2d66ea4697bb23',
+      key: 'ecdd901c70578c07ef094aadbcd287588d4ba705',
       "aria-label": this.label || this.ariaLabel || undefined,
       "aria-disabled": this.elementType === 'button' ? this.disabled : undefined,
       disabled: this.elementType === 'button' ? this.disabled : undefined,
       class: `${classes || ''} ${this.extraClass || ''}`,
       onClick: event => this.handleClick(event)
     }, this.label && h("span", {
-      key: 'c1df49fe70a7930d4c87f8130ef1102e503cd0fc',
+      key: 'af8d0ca1c5c3e54f9db3066931a69d3a5a812666',
       class: this.loading ? 'opacity-0' : ''
     }, this.label), this.loading && h("span", {
-      key: 'e56515527843d11be53d66aa7598fc2fdf94d054',
+      key: '29b72c15e80f46e023f829568f58d8a8dca82b78',
       class: "absolute inset-0 flex items-center justify-center"
     }, h("span", {
-      key: 'a50932ac2d5db24d50a3b10a30d07043e0354c62',
+      key: 'bad8bd059b1312ca3f5ab173b1203eb395e9bbd8',
       class: "loader",
       style: {
         border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
@@ -431,189 +260,6 @@ const EdsButton = class {
   }
 };
 EdsButton.style = EdsButtonStyle0;
-const edsCardDescCss = ".f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
-const EdsCardDescStyle0 = edsCardDescCss;
-const EdsCardDesc = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.description = undefined;
-    this.truncate = true;
-    this.truncateLines = '3';
-  }
-  getTruncateClass() {
-    return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
-  }
-  render() {
-    return h("p", {
-      key: 'f2eec4a947de74a1e36bb13fdd2bfeb7a9f711b3',
-      class: "text-light f-ui-03-light"
-    }, h("span", {
-      key: '444ffa34c3e8cac12af2f396144fd182d49c6baa',
-      class: this.getTruncateClass()
-    }, this.description));
-  }
-};
-EdsCardDesc.style = EdsCardDescStyle0;
-const edsCardGenericCss = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-x-1{-moz-column-gap:0.0625rem;column-gap:0.0625rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}";
-const EdsCardGenericStyle0 = edsCardGenericCss;
-const EdsCardGeneric = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.parentContext = null; // Accepts the entire event detail or null
-    this.cardTitle = undefined;
-    this.url = undefined;
-    this.description = undefined;
-    this.image = undefined;
-    this.avatar = undefined;
-    this.shortAbbreviation = undefined;
-    this.headingLevel = 'h3';
-    this.tags = [];
-    this.tiny = false;
-    this.bg = true;
-    this.withHover = true;
-    this.hierarchy = true;
-    this.parsedImage = null;
-  }
-  componentWillLoad() {
-    if (this.image) {
-      try {
-        if (typeof this.image === 'object') {
-          // If image is already an object, assign it directly
-          this.parsedImage = this.image;
-        } else if (typeof this.image === 'string') {
-          // If image is a string, try to parse it
-          this.parsedImage = JSON.parse(this.image);
-        }
-      } catch (error) {
-        // eslint-disable-next-line
-        console.error('Error parsing image prop:', error);
-        this.parsedImage = {}; // Assign a fallback empty object in case of an error
-      }
-    }
-  }
-  handleParentContext(event) {
-    if (event.target !== this.el) {
-      // Ignore the event if it's not targeted at this specific instance
-      return;
-    }
-    //console.log(event.detail);
-    this.parentContext = event.detail;
-    event.stopPropagation();
-  }
-  /**
-   * Parses the `tags` prop into an array of link objects.
-   * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
-   *
-   * @returns {any[]} Array of parsed link objects
-   */
-  get parsedTags() {
-    return parseData(this.tags);
-  }
-  articleClasses() {
-    return [this.description ? this.tiny ? 'min-h-120' : 'min-h-156' : 'h-auto', this.bg ? 'bg-inverse' : 'bg-default', this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '', 'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'].join(' ');
-  }
-  handleClick() {
-    var _a;
-    sendAnalytics({
-      category: 'ui-component',
-      parentContext: this.parentContext,
-      tag: this.el.tagName.toLowerCase(),
-      name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
-      action: 'click'
-    });
-  }
-  render() {
-    return h("article", {
-      key: '440a448c841370838c0c66610bd1266b46f66541',
-      class: this.articleClasses(),
-      onClick: () => this.handleClick()
-    }, h("eds-card-title", {
-      key: '292d93a9a993c6dcbfd276097a21d3984b1794c4',
-      "heading-level": this.headingLevel,
-      titleClass: this.image ? 'f-ui-01' : undefined,
-      "card-title": this.cardTitle,
-      url: this.url,
-      hierarchy: this.hierarchy
-    }), this.description && h("eds-card-desc", {
-      key: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7',
-      class: "mt-8",
-      "truncate-lines": "3",
-      description: this.description
-    }), this.parsedImage ? h("eds-img", Object.assign({
-      class: "mt-8 block mx-auto"
-    }, this.parsedImage)) : this.avatar || this.shortAbbreviation ? h("eds-avatar", {
-      class: "order-first mb-12",
-      picture: this.avatar,
-      initials: this.shortAbbreviation
-    }) : null, h("div", {
-      key: '40388913b1abb9308f42469956342efdbb48d508',
-      class: "flex flex-wrap gap-y-4 gap-x-1"
-    }, this.parsedTags.map((tag, index) => h("eds-tag", {
-      key: index,
-      intent: tag.style,
-      label: tag.label
-    }))), ' ');
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsCardGeneric.style = EdsCardGenericStyle0;
-const edsCardTitleCss = "a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-heading-01{font-family:var(--f-heading-01-fontFamily);font-weight:var(--f-heading-01-fontWeight);font-size:var(--f-heading-01-fontSize);line-height:var(--f-heading-01-lineHeight);letter-spacing:var(--f-heading-01-letterSpacing)}.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)}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}";
-const EdsCardTitleStyle0 = edsCardTitleCss;
-const EdsCardTitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.url = undefined;
-    this.titleClass = undefined;
-    this.headingLevel = 'h3';
-    this.externalLink = false;
-    this.cardTitle = undefined;
-    this.hierarchy = true;
-  }
-  /**
-   * Dynamically generate the title class based on the heading level.
-   */
-  getTitleClass() {
-    const levelMap = this.hierarchy ? {
-      h1: '05',
-      h2: '05',
-      h3: '05',
-      h4: '05',
-      h5: '05',
-      h6: '06'
-    } : {
-      h1: '01',
-      h2: '02',
-      h3: '03',
-      h4: '04',
-      h5: '05',
-      h6: '06'
-    };
-    return `f-heading-${levelMap[this.headingLevel]}`;
-  }
-  /*private getTag() {
-    if (this.url) {
-      return 'a';
-    }
-    return 'span';
-  }*/
-  render() {
-    //const Tag = this.getTag();
-    const Heading = this.headingLevel;
-    return h(Heading, {
-      key: '9914950b1581456a3a875ed7383975710c05fa7f',
-      class: this.getTitleClass()
-    }, h("a", {
-      key: '9b3298d8bacd8fbaecd8c714329ef5e6ac7192c7',
-      class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",
-      href: this.url,
-      target: this.externalLink ? '_blank' : undefined,
-      rel: this.externalLink ? 'noopener noreferrer' : undefined
-    }, this.cardTitle));
-  }
-};
-EdsCardTitle.style = EdsCardTitleStyle0;
 const edsDropdownCss = ".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}";
 const EdsDropdownStyle0 = edsDropdownCss;
 const EdsDropdown = class {
@@ -726,11 +372,11 @@ const EdsDropdown = class {
    */
   render() {
     return h("div", {
-      key: 'c7044a1dabb4f65fe143ac3202dd0d1af4e706c2',
+      key: 'eb48745937126e580737c1da6787c3f16c06ba9e',
       class: "z-focus relative",
       ref: el => this.dropdownContent = el
     }, h("eds-button", {
-      key: 'fa5812e59ea886a0adcba75576f07e94e7b0f713',
+      key: '3af6863201b1c25ad66e9f8c52d9e13505d742a3',
       label: this.label,
       "aria-label": this.ariaLabel,
       icon: this.icon,
@@ -739,7 +385,7 @@ const EdsDropdown = class {
       "aria-expanded": this.isOpen.toString(),
       "aria-haspopup": "menu"
     }), h("nav", {
-      key: 'c0daa734601dbfcd290d5db8cc25fcd4b82dfdad',
+      key: 'c225074b3fbee543966523f8cd1c146485bc04bd',
       role: "menu",
       class: {
         'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
@@ -755,7 +401,7 @@ const EdsDropdown = class {
       "aria-label": "Dropdown",
       "aria-hidden": !this.isOpen
     }, h("slot", {
-      key: '6ca4e774160924fa248db790f33b81e374653569'
+      key: '6a7ba94045d366d20c6618845692d977f20437e3'
     })));
   }
   get host() {
@@ -822,30 +468,30 @@ const EdsFooter = class {
       key: 'fa09a0dbccb035b1e4f496aa447aca241bcc2415',
       class: "flex items-center gap-x-12"
     }, h("a", {
-      key: '273bbee5c7353fa4ab0ac30f30a190bae250546c',
+      key: '578d6a8463e65d07278f8328c108ee266cfba2b8',
       target: "_blank",
       rel: "noopener noreferrer",
       class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0",
-      href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en",
-      "aria-label": "Learn about Horizon 2020 funding"
+      href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en",
+      "aria-label": "Learn about Horizon Europe funding"
     }, h("eds-img", {
-      key: '4568610de97ad886e26195bde656609e2584b792',
+      key: '5b9e987c2ecf62fb4f44c1faacad7c569a149805',
       width: 54,
       height: 41,
       src: "https://www.ebrains.eu/flags/4x3/eu.svg",
       alt: "European Union Flag"
     }))), h("div", {
-      key: '65dc6a5b0da9d69b0b43ed738c9612293ef64e96'
+      key: 'df75949c0718b8fb7dd449a6e7df39d332da366f'
     }, h("div", {
-      key: 'a89180b8f308502dfd864d5aab0702f262718cc8',
+      key: 'f83d31b16d0601cd456d5cb72e9fa2adb29a2b66',
       class: "f-ui-04 text-light"
     }, h("p", {
-      key: '54a69763c38a7986008f9b553fb6b75e5a36d255'
+      key: 'dcdf09d78ca64c5391d56fe5ed69bab987cbf67b'
     }, this.fundedBy), h("div", {
-      key: '9378c48e766a2df4d14805c8777d5d98a2d016ce',
+      key: 'af279fb5dfdf0a8f1f85e6ce7446dc3a0eeac397',
       class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block"
     }, h("span", {
-      key: 'ef939799150dd7ea91f72de94b1e564039c1e900',
+      key: '026b41fa6162ffb6825ccf98364b4caf64b6457a',
       class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4"
     }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? h("eds-link", {
       label: this.cookiesPreferences,
@@ -855,7 +501,7 @@ const EdsFooter = class {
         this.toggleCookiesConsent();
       }
     }) : null))), h("div", {
-      key: '3b5388855844f5857e4d6a2b8d19d204b681ca40',
+      key: '27cb561815d6918567ab8cfa1148019aca8aeda0',
       class: "ml-auto pl-12"
     }, this.enableScrollTop ? h("eds-button", {
       id: "backToTop",
@@ -1048,6 +694,9 @@ const EdsForm = class {
     this.errors = {};
     this.parsedFields = [];
   }
+  async setData(newData) {
+    this.populateFormWithInitData(newData);
+  }
   componentWillLoad() {
     this.parseFields(this.fields);
     // Emit context for each eds-link element after the component is fully loaded
@@ -1224,6 +873,14 @@ const EdsForm = class {
     // Update the errors state and the hasError flag.
     this.errors = newErrors;
     this.hasError = Object.keys(newErrors).length > 0;
+    // Emit the updated form state.
+    this.form.emit({
+      event: 'input',
+      field: field.name,
+      value: target.type === 'checkbox' ? this.values[field.name] : target.value,
+      message: `${field.name} updated`
+      //data: this.makeFormData()
+    });
   }
   handleSubmit() {
     var _a, _b;
@@ -1285,14 +942,14 @@ const EdsForm = class {
     const hiddenFields = this.parsedFields.filter(field => field.type === 'hidden');
     const otherFields = this.parsedFields.filter(field => field.type !== 'hidden');
     return h("form", {
-      key: '76fbc3f587eaac0bd53553663f072e5066914ae5',
+      key: '1418bbac3ea7c994bf363602e6ddd18ed3c6c661',
       ref: el => this.formEl = el,
       autocomplete: "on",
       onSubmit: this.handleSubmit
     }, h("div", {
-      key: '64d99d4ac7e1cb8e4bfe436bb236648201dcbc29'
+      key: 'ae6f05d50a1c32312e585d55f0b5d64b0dd1fc9c'
     }, h("slot", {
-      key: '9c257d29146b620367773726e65eaf680d3d010b'
+      key: '09c9ddd0d3b77ae9cbcb54389b799af7a6fc6c9e'
     }), hiddenFields.map((field, index) => h("eds-input", {
       key: index,
       type: "hidden",
@@ -1321,15 +978,15 @@ const EdsForm = class {
         error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0,
         errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'),
         onInput: e => this.handleInput(e, field),
-        onChange: e => this.handleChange(e, field),
+        onChangeNative: e => this.handleChange(e, field),
         class: index > 0 ? 'mt-20' : '',
         options: field.options
       });
     })), this.formBtn && h("div", {
-      key: 'ba7908ab85c6368aeff6824fd402b78b514d2292',
+      key: 'c97041c2e421c21a38513d3b456991167f5d1cdb',
       class: "mt-20"
     }, h("eds-button", {
-      key: '84efe452f55b2898e5747a01b0dc6033ba14da7a',
+      key: '96c35271f7227b9acd467fe822745bd41d3eaa80',
       intent: "primary",
       label: this.formBtnLabel,
       disabled: this.isSubmitting,
@@ -1463,77 +1120,6 @@ const EdsFullscreenMenu = class {
   }
 };
 EdsFullscreenMenu.style = EdsFullscreenMenuStyle0;
-const edsGaugeCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.bg-inverse{background-color:var(--white)}.bg-current{background-color:currentColor}.bg-dark{background-color:var(--grey-300)}.bg-darker{background-color:var(--grey-400)}.bg-default{background-color:var(--grey-200)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.inset-0{inset:0rem}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.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)}.text-default{color:var(--black)}";
-const EdsGaugeStyle0 = edsGaugeCss;
-const BACKGROUND_VARIANTS = {
-  default: '#f2f2f2',
-  dark: '#d8d8d8',
-  strong: '#666666',
-  black: '#000000'
-};
-const EdsGauge = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.size = 100;
-    this.valueMin = 0;
-    this.valueMax = 100;
-    this.value = 60;
-    this.thickness = 0.1;
-    this.variant = 'default';
-  }
-  render() {
-    // Clamp thickness to [0,1]
-    const thicknessClamped = Math.min(Math.max(this.thickness, 0.1), 0.2);
-    // Normalize value within [valueMin, valueMax]
-    const clamped = Math.min(Math.max(this.value, this.valueMin), this.valueMax);
-    const range = this.valueMax - this.valueMin || 1;
-    const ratio = (clamped - this.valueMin) / range;
-    // Use the smaller of width/height as diameter
-    const diameter = this.size;
-    const angle = ratio * 360;
-    const ringThickness = thicknessClamped * diameter;
-    const innerDiameter = diameter - ringThickness * 2;
-    const fontSize = diameter * 0.2;
-    // Determine background color for empty portion
-    const emptyColor = BACKGROUND_VARIANTS[this.variant] || BACKGROUND_VARIANTS.default;
-    const containerStyle = {
-      width: `${diameter}px`,
-      height: `${diameter}px`,
-      background: `conic-gradient(#00e766 0deg ${angle}deg, ${emptyColor} ${angle}deg 360deg)`
-    };
-    const maskStyle = {
-      width: `${innerDiameter}px`,
-      height: `${innerDiameter}px`,
-      top: `${ringThickness}px`,
-      left: `${ringThickness}px`
-    };
-    const textStyle = {
-      fontSize: `${fontSize}px`
-    };
-    return h("div", {
-      key: 'a549808bcd0fc64583f90f284a7b139386e71be7',
-      role: "progressbar",
-      "aria-valuemin": this.valueMin,
-      "aria-valuemax": this.valueMax,
-      "aria-valuenow": clamped,
-      "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`,
-      class: "relative inline-block rounded-full overflow-hidden",
-      style: containerStyle
-    }, h("div", {
-      key: 'c3efb2d512f96e4c3a9371416c6d9bb938cab43e',
-      class: "absolute bg-inverse rounded-full",
-      style: maskStyle
-    }), h("div", {
-      key: '7a6254e22240301b6716a2d6fed785196a39cdd8',
-      class: "absolute inset-0 flex items-center justify-center"
-    }, h("span", {
-      key: '78d8d1b7c442f75947b2813bbb569c566357c121',
-      class: "f-body-01 text-default",
-      style: textStyle
-    }, clamped)));
-  }
-};
-EdsGauge.style = EdsGaugeStyle0;
 const edsHeaderCss = ".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-inverse{background-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}}";
 const EdsHeaderStyle0 = edsHeaderCss;
 const EdsHeader = class {
@@ -1706,20 +1292,20 @@ const EdsImg = class {
       imgOpts['decoding'] = 'async';
     }
     return h("div", {
-      key: 'de3328e21b2b038984e74c08cd757cd85c7a7e01',
+      key: '13ed3aa346c99321c609e49ce045b6361921350f',
       class: {
         'items-center justify-center': true,
         'effect-bg-pattern': this.lazyload && this.showBg
       }
     }, h("picture", {
-      key: '4e623a25c64ce1b2c09adf3519f12bde04280ba3'
+      key: '56aa0ed8fd1ef8f9faf6ad576dd05edc34139c9b'
     }, this.formats.map(format => h("source", {
       type: format.type,
       srcSet: format.srcset,
       media: format.media,
       sizes: this.sizes
     })), h("img", Object.assign({
-      key: '6d87af22189017aa1e158c01a8295c98381a1ba1',
+      key: '78e3ed9adcfe423d48388bf30140f4b70649faf7',
       ref: el => this.img = el,
       class: {
         'effect-opacity object-cover object-center': true,
@@ -1789,7 +1375,7 @@ const EdsInput = class {
     const withIcon = !!this.icon;
     const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
     return h("div", {
-      key: 'bb88b782042a37d2fcbd8a93f03056199d822559',
+      key: '5c66c14b19aa3d5fc37e7a77a2d1194fa0be9b8c',
       class: "relative flex items-center"
     }, this.type === 'textarea' ? h("textarea", {
       id: this.inputId || this.name,
@@ -1839,10 +1425,10 @@ const EdsInput = class {
       onInput: this.handleInput,
       onChange: this.handleInput
     }), this.maxLength && this.type === 'textarea' && h("span", {
-      key: '7b1cc490731455d00d500308458e6b2cd320fccf',
+      key: '4326db3729dea8bbddb7a109a90424aa832aded7',
       class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}`
     }, this.maxLength), this.icon && h("eds-icon-wrapper", {
-      key: 'ce4d5548bc0fa1e681e3b74b03d071d73d8372d5',
+      key: 'df2f5598aedd36b9cb2ce886fb8ea08da58dc5ff',
       class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`,
       icon: this.icon
     }));
@@ -1861,43 +1447,33 @@ const EdsInputFieldStyle0 = edsInputFieldCss;
 const EdsInputField = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.edsinput = createEvent(this, "edsinput", 7);
+    this.edschange = createEvent(this, "edschange", 7);
     this.handleNativeInput = ev => {
       var _a;
-      // 1) Call any passed-in handler
       (_a = this.onInput) === null || _a === void 0 ? void 0 : _a.call(this, ev);
       if (this.shouldEmitValue()) {
-        // 2) Re-emit on host so Vue/others can catch it
         const newValue = ev.target.value;
-        this.hostEl.dispatchEvent(new CustomEvent('oninput', {
-          detail: {
-            value: newValue
-          },
-          bubbles: false,
-          composed: true
-        }));
+        this.edsinput.emit({
+          value: newValue
+        });
       }
     };
     this.handleNativeChange = ev => {
       var _a;
-      (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, ev);
+      (_a = this.onChangeNative) === null || _a === void 0 ? void 0 : _a.call(this, ev);
       if (this.shouldEmitValue()) {
         const target = ev.target;
-        this.hostEl.dispatchEvent(new CustomEvent('onchange', {
-          detail: {
-            value: target.value
-          },
-          bubbles: false,
-          composed: true
-        }));
+        const value = target.value;
+        this.edschange.emit({
+          value
+        });
       }
     };
     this.name = undefined;
     this.inputId = undefined;
     this.placeholder = undefined;
     this.disabled = false;
-    this.onChange = undefined;
-    this.onInput = undefined;
-    this.type = 'text';
     this.required = false;
     this.label = undefined;
     this.hint = undefined;
@@ -1910,20 +1486,20 @@ const EdsInputField = class {
     this.value = undefined;
     this.maxLength = undefined;
     this.options = undefined;
+    this.type = 'text';
+    this.onChangeNative = undefined;
+    this.onInput = undefined;
     this.exposeValueEvents = true;
   }
   shouldEmitValue() {
-    // Never emit for password fields, and respect the exposeValueEvents prop
     return this.exposeValueEvents && this.type !== 'password';
   }
   get parsedOptions() {
-    if (Array.isArray(this.options)) {
-      return this.options;
-    } else if (typeof this.options === 'string') {
+    if (Array.isArray(this.options)) return this.options;
+    if (typeof this.options === 'string') {
       try {
         return JSON.parse(this.options);
       } catch (_a) {
-        // eslint-disable-next-line
         console.warn('Invalid options format');
         return [];
       }
@@ -1946,7 +1522,7 @@ const EdsInputField = class {
       checked: this.checked
     };
     return h("div", {
-      key: '5243586c0bf3acc86d42684dbcd0288b3360b00c',
+      key: '2ff82dedd17922c5cb72fc30b7f616c7fafa7b07',
       class: "space-y-8"
     }, this.type === 'checkbox' || this.type === 'radio' ? this.parsedOptions.length > 0 ? h("fieldset", {
       class: "space-y-4 mt-8"
@@ -1964,7 +1540,7 @@ const EdsInputField = class {
       key: option.value
     }, h("eds-input", Object.assign({}, inputOpts, {
       value: option.value,
-      checked: (typeof this.value === 'string' ? this.value.split(',') : []).includes(String(option.value))
+      checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value))
     })), h("eds-input-label", {
       name: `${this.name}-${option.value}`,
       label: option.label
@@ -1994,7 +1570,7 @@ const EdsInputField = class {
       type: "file",
       id: this.inputId || this.name,
       name: this.name,
-      onChange: this.onChange,
+      onChange: this.onChangeNative,
       disabled: this.disabled,
       required: this.required
     }) : this.type === 'search' ? h("eds-input-search", {
@@ -2018,7 +1594,7 @@ const EdsInputField = class {
         value: numberValue
       }));
     })() : h("eds-input", Object.assign({}, inputOpts))), h("eds-input-footer", {
-      key: 'e4e1f28766471d5451f342aa4d60d58fca2ddd01',
+      key: '4b8513dcd713d56953934b158ba1b9182e1497a8',
       id: `${this.name}-footer`,
       name: this.name,
       message: this.message,
@@ -2043,26 +1619,26 @@ const EdsInputFooter = class {
   }
   render() {
     return h("div", {
-      key: 'c3dbdb05ce4cc9244a1ebc9f3ce5718742924ea1',
+      key: 'd5424778da81d6558246efe97917d3e3ccfa9aaa',
       class: "space-y-4 mt-4"
     }, this.error && this.errorMessage && h("div", {
-      key: 'ccfde4960e1bec5697774de57da1a7948b5112c4',
+      key: 'e915fc1f4719f48eca5a831ac72913d2f91f633b',
       id: `error_${this.name}`,
       class: "text-error flex items-center"
     }, h("eds-icon-wrapper", {
-      key: 'cc7171c96a7251c064f7ce527fe715aaac9a74e2',
+      key: '9cc87cfd4955766947a2581604fe1e072f8d82a9',
       icon: "warning"
     }), h("p", {
-      key: '99893066c8aeac76793fef4d5cf6d5b34dbbc25f',
+      key: '564a2397fb7e8185e43e1c2be216c76060e7498e',
       class: "f-ui-04 ml-4",
       innerHTML: this.errorMessage
     })), this.message && h("p", {
-      key: '55a6881d02d06440e6adac174a43a1cd59adf34b',
+      key: '24e0702df7e5c2fe4ef0cc6755159fefe76b70a7',
       id: `desc_${this.name}`,
       class: "f-ui-05 text-lighter",
       innerHTML: this.message
     }), this.link && h("a", {
-      key: 'bb84693685aedbe7ba28551a1d944c0e1d8eda57',
+      key: '9e3720a3ded9d755afd7755104df0942246f1fbe',
       href: this.link.url,
       class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4"
     }, this.link.label));
@@ -2078,16 +1654,16 @@ const EdsInputLabel = class {
   }
   render() {
     return h("label", {
-      key: '815b70d78f4004afb77a0c01772f750478dea1b3',
+      key: 'd700690a67a8348836aec27d2ff4f4d4ee18b9c8',
       htmlFor: this.name,
       class: `input-label ${this.disabled ? 'text-lighter' : ''}`
     }, this.label, this.required && h("span", {
-      key: 'de2cba1c7e89632b3aac40de573d730cf38a85c6'
+      key: '9b52c053652db132a9bdb2d9fc64c569a529c2d9'
     }, h("span", {
-      key: '58326fb23edd4521b0f1c6e67366e7c589217387',
+      key: 'cd17268b6048ebaa70dc7f905fc7f7bf3ed3fa34',
       "aria-hidden": "true"
     }, "*"), h("span", {
-      key: 'e2208159652c9244e49c2c3d476a099a442d28ac',
+      key: '352d7b5ef080336a5c7b53e0b710d5b0d7aa0efe',
       class: "sr-only"
     }, "required")));
   }
@@ -2134,10 +1710,10 @@ const EdsInputRange = class {
   }
   render() {
     return h("div", {
-      key: '9901432821b3dbdbf67e3b905c75acd7095ec8e9',
+      key: '5c55f65e2acd6f4554af7d8ba513c9d9dfd445eb',
       class: "relative flex flex-col items-start space-y-2"
     }, h("input", {
-      key: '44023ef4a7e3fec22666103ccec3e2346aea885d',
+      key: '4fcd0d3d978ddba7929958dd22a283c2ba61ee48',
       id: this.inputId || this.name,
       name: this.name,
       min: this.min,
@@ -2155,7 +1731,7 @@ const EdsInputRange = class {
       onInput: this.onInput,
       onChange: this.onChange
     }), h("p", {
-      key: 'b74e14f619acbe7b98966bac8ea2c5206d05ad62',
+      key: 'c63b223e6af149efb68cabbe5228e77b09ca2168',
       id: `desc_${this.name}`,
       class: "block f-ui-05 text-lighter"
     }, "Current value: ", this.sliderVal));
@@ -2231,15 +1807,15 @@ const EdsInputSearch = class {
   }
   render() {
     return h("div", {
-      key: '2d74c44bf05f4ccbe81df14a3af112a763b01b5f',
+      key: '27d6871df962e2bd27eac38b1a105142b1b68bab',
       class: "relative flex items-center"
     }, h("eds-icon-wrapper", {
-      key: 'c7c7c479801a9c5e6da0b616448f7b89ba25b040',
+      key: 'b4b497cb435c673a550b169dea93fbc7006d0c5e',
       icon: "search",
       class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest",
       "aria-hidden": "true"
     }), h("input", {
-      key: '8e4954dc67ae59d46f2e3423325eccda0944363a',
+      key: '1419cd8f5b8791b5b812c57ba649567e1b6ec0bb',
       id: this.inputId || this.name,
       name: this.name,
       placeholder: this.placeholder,
@@ -2280,10 +1856,10 @@ const EdsInputSelect = class {
     const placeholderText = this.placeholder || `Please select ${this.name}`;
     const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
     return h("div", {
-      key: '0e1bf5f1ebf30d675e0b4927e7812a305f58d2b9',
+      key: '80cbdab87f5baa21df5edc857685c3af4dee3a58',
       class: "relative"
     }, h("select", {
-      key: 'b92542caca12d77e3160baa84760b37bbbe172c7',
+      key: '4e8f84fd9dbc63df7981898cadc24450f48aa92a',
       id: selectId,
       name: this.name,
       class: {
@@ -2298,7 +1874,7 @@ const EdsInputSelect = class {
       required: this.required,
       onChange: this.handleChange
     }, h("option", {
-      key: 'fa911a07fd0053f6c7e5044aac3e6d0846344899',
+      key: '54b90339cae4c5c80711793a8c68c4587e0c2495',
       value: "",
       disabled: true,
       hidden: true
@@ -2307,10 +1883,10 @@ const EdsInputSelect = class {
       value: opt.value,
       selected: opt.value === this.value
     }, opt.label))), h("span", {
-      key: 'afa3c7ad3c583dec2ffc2fd5087d7695509a2a25',
+      key: '6c9f0a0606f1d6f282c756f84ace7618584d5fa3',
       class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center"
     }, h("eds-icon-wrapper", {
-      key: '1bb2a24fc9798a7359b9b45019b1432ff2e50e70',
+      key: '4524af72468d3b37c01b0252d4b6b2bf7454514e',
       class: "w-20 h-20",
       icon: "chevron-right"
     })));
@@ -2502,7 +2078,7 @@ const EdsLink = class {
     const labelClasses = this.hideLabelOnSmallScreen ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
     : '';
     return h(ComponentType, {
-      key: 'ee6e8eeb12df62ee801164877a357c075590ebae',
+      key: '8c7ab8b80b9765e83e4e57d59ba1b45fe36f15b7',
       class: `${classes || ''} ${this.extraClass || ''}`,
       href: !this.disabled ? this.url : undefined,
       target: this.external && !this.disabled ? '_blank' : undefined,
@@ -2513,10 +2089,10 @@ const EdsLink = class {
       download: this.download ? '' : undefined,
       onClick: event => this.handleClick(event)
     }, h("span", {
-      key: '7b35e3ddca346ff09730aa332b9f47b6d6707721',
+      key: '94284b425a331f6a56a3e63db89fed5fa1a207c1',
       class: "z-1 relative inline-flex items-center justify-center"
     }, this.renderLeftIcon(), h("span", {
-      key: 'fe4201815e3791e6e3d6da8856d7a7a9e0211cfc',
+      key: '7496886c7c975d6795633c36b9cc8d31673d5a4b',
       class: labelClasses
     }, this.label), this.renderRightIcon()));
   }
@@ -2587,13 +2163,13 @@ const EdsLogo = class {
   render() {
     const logoContent = this.getLogo();
     return h("a", {
-      key: 'a23e44227ebaa3b999c961e1354c268f2c916a6f',
+      key: 'ab11d53e1f417221dcca2de441c7b3efa96f99a5',
       href: this.href,
       onClick: () => this.handleClick(),
       class: "eds-logo-wrapper",
       "aria-label": this.label
     }, h("div", {
-      key: 'cba53a54e6d31aabfa62ddcd8aa53bda56b8b706',
+      key: '0d4a6b970788534d34d55b28fe83407ce7c4e00e',
       innerHTML: logoContent
     }));
   }
@@ -2703,40 +2279,40 @@ const EdsModal = class {
     // Generate a unique id for the title so we can reference it for aria-labelledby.
     const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
     return h("div", {
-      key: '3a2446813eebf215f2c7aafc26d5688f58020c54',
+      key: 'affa340307adc5bdd637696b56a59e3f73cbf7e9',
       id: "eds-modal",
       class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": titleId
     }, this.isOpen && h("div", {
-      key: '7081928b01c09e692cac0f61dbc58b4f5578271d',
+      key: 'e4359b32052a155f879070deea34fbca2fb67e3b',
       class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
       ,
 
       onClick: () => this.close()
     }), h("div", {
-      key: '0fc5f4716022cb01c2da9a28738586710625c70f',
+      key: 'ba95f463e8c807e2ac2e900b3167191908ca2f5d',
       class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center`
     }, h("div", {
-      key: '8e4bdffba2f69b18e8846e4c2709c5c423b0a99e',
+      key: '1fc4649d6ba728745e4f1ed73e8fb8bdac6eda59',
       class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}`
     }, h("span", {
-      key: '6e0d237fc95c1b74b1b0c0456848684578367302',
+      key: '731e7cb6c7aaa36bcda8d1c32bd1b8da9d85f253',
       id: titleId,
       class: `f-heading-04 ${this.getTruncateClass()}`
     }, this.heading), h("eds-button", {
-      key: '3499de216da4ba38edb66cdcd688872f51b41aaf',
+      key: '89657ac29b27ce173569353f3101e998cb756eec',
       intent: "tertiary",
       icon: "close",
       "aria-label": "Close modal",
       onClick: () => this.close(),
       "extra-class": "ml-8 text-default"
     })), h("div", {
-      key: 'f723dded796961e925cc2b046c31e7345fd3e159',
+      key: '2e39edaa1f5cc5389873e203c3e4294de8b56678',
       class: "pt-8 px-20 py-20"
     }, h("slot", {
-      key: 'ffe1213b65e60dfaf7c220e3c7e3dd8495706dcf'
+      key: '0fb09f52100042fc5f20f5f443a8f5cff381d944'
     }))));
   }
   get el() {
@@ -2744,130 +2320,260 @@ const EdsModal = class {
   }
 };
 EdsModal.style = EdsModalStyle0;
-const edsPieCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.bg-inverse{background-color:var(--white)}.bg-current{background-color:currentColor}.bg-dark{background-color:var(--grey-300)}.bg-darker{background-color:var(--grey-400)}.bg-default{background-color:var(--grey-200)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.inset-0{inset:0rem}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.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-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-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)}.text-default{color:var(--black)}.w-8{width:0.5rem}.h-8{height:0.5rem}.mr-4{margin-right:0.25rem}:host{display:block}.wrapper{display:flex;align-items:center;justify-content:center;height:100%}.pie-chart{overflow:visible}.slice-label{font-size:var(--font-size-chart-label);font-weight:var(--font-weight-chart-label);fill:var(--color-text);pointer-events:none}.legend{list-style:none;margin:0;padding:0 0 0 1rem}.legend-item{display:flex;align-items:center;margin-bottom:0.5rem;outline:none}.legend-item:focus{outline:2px dashed var(--color-primary)}.legend-swatch{width:1rem;height:1rem;border-radius:50%;margin-right:0.5rem}.legend-label{font-size:var(--font-size-base);color:var(--color-text)}";
-const EdsPieStyle0 = edsPieCss;
-const EdsPie = class {
+const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.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-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.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)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{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:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
+const EdsPaginationStyle0 = edsPaginationCss;
+const EdsPagination = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.size = 200;
-    this.slices = [];
-    this.thickness = 1;
-    this.display = 'value';
-    this.legend = true;
-    this.colorScheme = 'semantic';
-  }
-  parseSlices() {
-    if (typeof this.slices === 'string') {
-      try {
-        return JSON.parse(this.slices);
-      } catch (_a) {
-        // eslint-disable-next-line
-        console.warn('eds-pie: invalid slices JSON');
+    this.currentPage = undefined;
+    this.lastPage = undefined;
+    this.perPage = 10;
+    this.total = 0;
+    this.url = '';
+    this.mode = 'default';
+    this.prevLabel = 'Prev';
+    this.nextLabel = 'Next';
+    this.prevUrl = '';
+    this.nextUrl = '';
+    this.links = [];
+  }
+  /** Lifecycle hook to generate pagination links on component load */
+  componentWillLoad() {
+    if (this.mode === 'default') {
+      this.generateLinks();
+    }
+  }
+  componentDidLoad() {
+    // Emit context for each eds-link element after the component is fully loaded
+    const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
+    links.forEach(lnk => {
+      this.emitContext(lnk);
+    });
+    /*if (links.length > 0) {
+      // Emit context for the first link
+      this.emitContext(links[0]);
+           // Emit context for the last link, if it's different from the first
+      if (links.length > 1) {
+        this.emitContext(links[links.length - 1]);
+      }
+    }*/
+  }
+  /**
+   * 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(linkElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.hostEl.tagName.toLowerCase(),
+        identifier: null
       }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  onPageOrLastPageChange() {
+    if (this.mode === 'default') {
+      this.generateLinks();
     }
-    return Array.isArray(this.slices) ? this.slices : [];
   }
-  polarToCartesian(cx, cy, r, angle) {
-    const rad = (angle - 90) * (Math.PI / 180);
+  /**
+   * Checks if the current page is the first page
+   * @returns {boolean} - true if current page is the first page
+   */
+  isFirstPage() {
+    return this.currentPage === 1;
+  }
+  /**
+   * Checks if the current page is the last page
+   * @returns {boolean} - true if current page is the last page
+   */
+  isLastPage() {
+    return this.currentPage === this.lastPage;
+  }
+  /**
+   * Generates a pagination link object
+   * @param {number} page - Page number for the link
+   * @returns {Link} - Link object with page details
+   */
+  generateLink(page) {
+    const urlHasQuery = this.url.includes('?');
     return {
-      x: cx + r * Math.cos(rad),
-      y: cy + r * Math.sin(rad)
+      ariaLabel: `Page ${page}`,
+      url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
+      label: page.toString(),
+      current: this.currentPage === page,
+      disabled: false
     };
   }
-  describeArc(x, y, r, startAngle, endAngle) {
-    const start = this.polarToCartesian(x, y, r, endAngle);
-    const end = this.polarToCartesian(x, y, r, startAngle);
-    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    return [`M ${start.x} ${start.y}`, `A ${r} ${r} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`, `L ${x} ${y}`, 'Z'].join(' ');
+  /** Generates pagination links based on the last page and current page */
+  generateLinks() {
+    if (this.lastPage && this.lastPage > 5) {
+      this.links = this.getPaginationGenerator(this.currentPage || 1, this.lastPage).map(page => typeof page === 'number' ? this.generateLink(page) : page);
+    } else if (this.lastPage) {
+      this.links = Array.from({
+        length: this.lastPage
+      }).map((_, i) => this.generateLink(i + 1));
+    }
   }
-  render() {
-    const raw = this.parseSlices();
-    if (raw.length > EdsPie.MAX_SLICES) {
-      // eslint-disable-next-line
-      console.warn(`eds-pie: too many slices (${raw.length}), results may overlap.`);
+  /**
+   * Creates a pagination range based on delta, current, and total pages
+   * @param {number} current - Current page number
+   * @param {number} total - Total number of pages
+   * @param {number} delta - Range of pages to display around the current page
+   * @returns {(number | string)[]} - Range of page numbers or ellipses
+   */
+  getPaginationGenerator(current, total) {
+    const delta = 1; // Show one page before and one after the current page
+    const range = [];
+    if (total <= 5) {
+      // If total pages are 5 or less, show all pages
+      for (let i = 1; i <= total; i++) {
+        range.push(i);
+      }
+    } else {
+      // Always show the first page
+      range.push(1);
+      // Add ellipsis if there’s a gap between the first page and the current range start
+      if (current - delta > 2) {
+        range.push('...');
+      }
+      // Determine range for pages around the current page
+      for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
+        range.push(i);
+      }
+      // Add ellipsis if there’s a gap between the current range end and the last page
+      if (current + delta < total - 1) {
+        range.push('...');
+      }
+      // Always show the last page
+      range.push(total);
     }
-    const total = raw.reduce((sum, s) => sum + s.value, 0) || 1;
-    const palette = [...EdsPie.PALETTES[this.colorScheme]];
-    const sorted = [...raw].sort((a, b) => b.value - a.value);
-    let cumulative = 0;
-    const processed = sorted.map(s => {
-      const angle = s.value / total * 360;
-      const start = cumulative,
-        end = cumulative + angle;
-      cumulative = end;
-      const color = s.color || palette.shift() || 'var(--color-chart-neutral-1)';
-      return Object.assign(Object.assign({}, s), {
-        start,
-        end,
-        color
+    return range;
+  }
+  /**
+   * Formats the current page results information for display
+   * @returns {string} - Formatted page result information
+   */
+  pageResults() {
+    if (this.total > 0) {
+      return this.total > this.perPage ? `${this.perPage * ((this.currentPage || 1) - 1) + 1} - ${this.perPage * (this.currentPage || 1) >= this.total ? this.total : this.perPage * (this.currentPage || 1)} of ${this.total}` : `${this.total}`;
+    }
+    return '';
+  }
+  /**
+   * Handles a page click event, updating the current page and dispatching an event
+   * @param {MouseEvent} event - Click event
+   * @param {number} newPage - New page number
+   */
+  handlePageClick(event, newPage) {
+    if (this.mode === 'navigator') {
+      return; // No page clicking logic for navigator mode
+    }
+    event.preventDefault(); // Prevent default link navigation
+    if (newPage !== this.currentPage) {
+      this.links = this.links.map(link => typeof link === 'object' ? Object.assign(Object.assign({}, link), {
+        current: parseInt(link.label) === newPage
+      }) : link);
+      const pageChangeEvent = new CustomEvent('page', {
+        detail: newPage,
+        bubbles: true,
+        composed: true
       });
-    });
-    const diameter = this.size;
-    const radius = diameter / 2;
-    // clamp into [0.5, 1]
-    const tClamped = Math.min(Math.max(this.thickness, 0.5), 1);
-    const innerRadius = radius * (1 - tClamped);
-    const outerRadius = radius;
-    // **replace** the previous labelRadius line with this:
-    const labelRadius = (radius + innerRadius) / 2;
-    // Build ARIA description
-    const ariaLabel = processed.map(s => `${s.label}: ${this.display === 'percent' ? `${Math.round(s.value / total * 100)}%` : s.value}`).join(', ');
-    return h(Host, null, h("div", {
-      class: "wrapper"
-    }, h("svg", {
-      width: diameter,
-      height: diameter,
-      role: "img",
-      "aria-label": `Pie chart: ${ariaLabel}`,
-      class: "pie-chart"
-    }, h("title", null, "Pie chart"), h("g", null, processed.map(s => h("path", {
-      key: s.id,
-      d: this.describeArc(radius, radius, outerRadius, s.start, s.end),
-      fill: s.color
-    })), innerRadius > 0 && h("circle", {
-      cx: radius,
-      cy: radius,
-      r: innerRadius,
-      fill: "var(--white)"
-    }), processed.map(s => {
-      const midAngle = s.start + (s.end - s.start) / 2;
-      const {
-        x,
-        y
-      } = this.polarToCartesian(radius, radius, labelRadius, midAngle);
-      const text = this.display === 'percent' ? `${Math.round(s.value / total * 100)}%` : String(s.value);
-      return h("text", {
-        key: s.id,
-        x: x,
-        y: y,
-        class: "f-ui-02",
-        "text-anchor": "middle",
-        "alignment-baseline": "middle"
-      }, text);
-    }))), this.legend && h("ul", {
-      class: "legend",
-      role: "list"
-    }, processed.map(s => h("li", {
-      key: s.id,
-      role: "listitem",
-      tabindex: "0",
-      class: "legend-item"
+      this.hostEl.dispatchEvent(pageChangeEvent);
+      this.currentPage = newPage;
+    }
+  }
+  render() {
+    return h("div", {
+      key: '6377e0187e461bcbeac835dd7cb83e93ef199865'
+    }, this.total > 0 && this.mode === 'default' && h("p", {
+      key: 'ec2a6b6a40c76352743d012c51cda5d7fe1137df',
+      class: "f-ui-03 text-lightest mb-28 w-full text-center"
     }, h("span", {
-      class: "legend-swatch",
-      style: {
-        backgroundColor: s.color
+      key: '3a23e3d156f87167b0dacb4085870958ce19e793',
+      class: "sr-only"
+    }, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
+      "aria-label": "Pagination"
+    }, h("ul", {
+      class: "flex items-center justify-center gap-x-8"
+    }, h("li", {
+      class: "mr-auto"
+    }, h("eds-link", {
+      label: this.prevLabel,
+      url: this.mode === 'navigator' ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
+      : this.isFirstPage() ? '#' : this.generateLink(this.currentPage - 1).url,
+      disabled: this.mode === 'navigator' ? !this.prevUrl // Disable if prevUrl is not provided
+      : this.isFirstPage(),
+      "aria-label": "Previous page",
+      icon: "chevron-left",
+      "icon-pos": "left",
+      size: "small",
+      "icon-small": "true",
+      intent: "strong",
+      "hide-label-on-small-screen": true,
+      class: "!p-8 lg:!pr-12",
+      onClick: event => {
+        if (this.mode === 'default') {
+          if (this.isFirstPage()) {
+            event.preventDefault(); // Prevent click if disabled
+          } else {
+            this.handlePageClick(event, (this.currentPage || 1) - 1);
+          }
+        }
+      }
+    })), this.mode === 'default' && this.links.map((link, index) => h("li", {
+      key: index,
+      class: "f-ui-02 flex h-36 items-center justify-center"
+    }, typeof link === 'string' ? h("span", {
+      class: "flex items-center justify-center"
+    }, link) : h("eds-link", {
+      url: link.url,
+      "aria-label": link.ariaLabel,
+      label: link.label,
+      current: link.current,
+      size: "small",
+      class: "!p-8",
+      intent: link.current ? 'secondary' : 'ghost',
+      onClick: event => this.handlePageClick(event, parseInt(link.label))
+    }))), h("li", {
+      class: "ml-auto"
+    }, h("eds-link", {
+      label: this.nextLabel,
+      url: this.mode === 'navigator' ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
+      : this.isLastPage() ? '#' : this.generateLink(this.currentPage + 1).url,
+      disabled: this.mode === 'navigator' ? !this.nextUrl // Disable if nextUrl is not provided
+      : this.isLastPage(),
+      "aria-label": "Next page",
+      size: "small",
+      "icon-small": "true",
+      icon: "chevron-right",
+      intent: "strong",
+      "hide-label-on-small-screen": true,
+      class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors",
+      onClick: event => {
+        if (this.mode === 'default') {
+          if (this.isLastPage()) {
+            event.preventDefault(); // Prevent click if disabled
+          } else {
+            this.handlePageClick(event, (this.currentPage || 1) + 1);
+          }
+        }
       }
-    }), h("span", {
-      class: "legend-label"
-    }, s.label))))));
+    })))) : null);
+  }
+  get hostEl() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "currentPage": ["onPageOrLastPageChange"],
+      "lastPage": ["onPageOrLastPageChange"]
+    };
   }
 };
-EdsPie.MAX_SLICES = 9;
-EdsPie.PALETTES = {
-  semantic: ['var(--color-chart-accent)', 'var(--color-chart-strong)', 'var(--color-chart-accent-dark)', 'var(--color-chart-lighter)', 'var(--color-chart-accent-light)', 'var(--color-chart-lightest)', 'var(--color-chart-accent-lighter)', 'var(--color-chart-darker)', 'var(--color-chart-accent-lightest)'],
-  mono: ['var(--grey-700)', 'var(--grey-500)', 'var(--grey-300)', 'var(--grey-100)', 'var(--grey-800)', 'var(--grey-600)', 'var(--grey-400)', 'var(--grey-200)', 'var(--grey-900)']
-};
-EdsPie.style = EdsPieStyle0;
+EdsPagination.style = EdsPaginationStyle0;
 const edsSocialNetworksCss = "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}";
 const EdsSocialNetworksStyle0 = edsSocialNetworksCss;
 const EdsSocialNetworks = class {
@@ -3022,9 +2728,12 @@ const EdsSteps = class {
         onClick: () => this.handleStepClick(index)
       }, step.title), this.activeStep === index && h("div", {
         class: "content"
+      }, h("slot", {
+        name: `step-${index}`
       }, h("div", {
-        class: "f-body-02 text-lighter my-16"
-      }, step.content), h("eds-button", {
+        class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
+        innerHTML: step.content
+      })), h("eds-button", {
         label: index === steps.length - 1 ? 'Finish' : 'Continue',
         intent: "primary",
         class: "next-btn",
@@ -3045,9 +2754,12 @@ const EdsSteps = class {
       key: index
     }, h("h3", null, step.title), h("div", {
       class: "content"
+    }, h("slot", {
+      name: `step-${index}`
     }, h("div", {
-      class: "f-body-02 text-lighter my-16"
-    }, step.content)))));
+      class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
+      innerHTML: step.content
+    }))))));
   }
   get el() {
     return getElement(this);
@@ -3059,7 +2771,7 @@ const EdsSteps = class {
   }
 };
 EdsSteps.style = EdsStepsStyle0;
-const edsStepsV2Css = "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-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.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-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)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.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}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.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))}.overflow-hidden{overflow:hidden}";
+const edsStepsV2Css = "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-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.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-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)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.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}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.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))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}";
 const EdsStepsV2Style0 = edsStepsV2Css;
 const EdsStepsV2 = class {
   constructor(hostRef) {
@@ -3080,6 +2792,7 @@ const EdsStepsV2 = class {
     this.steps = [];
     this.type = 'static';
     this.imageSrc = undefined;
+    this.imageWidth = undefined;
     this.bg = true;
     this.message = undefined;
     this.activeStep = 0;
@@ -3133,12 +2846,13 @@ const EdsStepsV2 = class {
   render() {
     const steps = this.parsedSteps;
     return h("div", {
-      key: 'e86620aed9aafbf0c8e0cde0230b2147df952379',
+      key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52',
       class: this.articleClasses()
     }, this.imageSrc ? h("div", {
       class: "w-full mb-12 rounded-t-lg overflow-hidden border-2"
     }, h("eds-img", {
       src: this.imageSrc,
+      width: this.imageWidth,
       "with-bg": "true",
       "lazy-load": "true",
       alt: "Step illustration"
@@ -3149,21 +2863,23 @@ const EdsStepsV2 = class {
     }, h("span", {
       class: "text-inverse f-heading-04 "
     }, this.message))), h("div", {
-      key: '773e51621fbfbc7b828d196d1e64a9752d02e5a4',
+      key: 'db0618aad7d5986fcb0889f1c439be73f83a00df',
       class: "p-8"
     }, this.type === 'linear' ? h("div", {
       class: "steps"
     }, steps.map((step, index) => h("div", {
-      class: "step space-y-8",
+      class: index === 0 ? 'step' : 'step space-y-16',
       key: index
     }, h("h3", {
       onClick: () => this.handleStepClick(index)
     }, step.title), this.activeStep === index && h("div", {
       class: "content"
+    }, h("slot", {
+      name: `step-${index}`
     }, h("div", {
-      class: "f-body-02 text-lighter mt-16",
+      class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
       innerHTML: step.content
-    }), h("eds-button", {
+    })), h("eds-button", {
       label: index === steps.length - 1 ? 'Finish' : 'Continue',
       intent: "primary",
       class: "next-btn",
@@ -3185,10 +2901,12 @@ const EdsStepsV2 = class {
       onClick: () => this.handleStepClick(index)
     }, step.title), h("div", {
       class: "content"
+    }, h("slot", {
+      name: `step-${index}`
     }, h("div", {
-      class: "f-body-02 text-lighter mt-16",
+      class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
       innerHTML: step.content
-    })))))));
+    }))))))));
   }
   get el() {
     return getElement(this);
@@ -3200,6 +2918,326 @@ const EdsStepsV2 = class {
   }
 };
 EdsStepsV2.style = EdsStepsV2Style0;
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.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}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.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-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)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
+const EdsTableStyle0 = edsTableCss;
+const EdsTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.rowaction = createEvent(this, "rowaction", 7);
+    this.handleResize = () => {
+      this.updateContainerWidth();
+    };
+    this.data = null;
+    this.endpoint = null;
+    this.config = {};
+    this.rowsPerPage = 10;
+    this.paginationEnabled = true;
+    this.searchEnabled = false;
+    this.hostWidth = undefined;
+    this.columnSize = 'default';
+    this.actions = [];
+    this.actionTemplate = undefined;
+    this.parsedActions = [];
+    this.dataColumns = [];
+    this.tbData = [];
+    this.columns = [];
+    this.currentPage = 1;
+    this.parsedConfig = {};
+    this.totalRows = 0;
+    this.searchQuery = '';
+    this.containerWidth = 0;
+  }
+  handleDataChange() {
+    this.parseData();
+  }
+  handleConfigChange() {
+    this.parseConfig();
+  }
+  handleActionsChange() {
+    try {
+      this.parsedActions = typeof this.actions === 'string' ? JSON.parse(this.actions) : this.actions;
+    } catch (_a) {
+      console.error('Failed to parse actions JSON');
+      this.parsedActions = [];
+    }
+  }
+  componentWillLoad() {
+    this.parseConfig();
+    this.handleActionsChange();
+    this.data ? this.parseData() : this.endpoint && this.fetchData();
+  }
+  componentDidLoad() {
+    this.updateContainerWidth();
+    window.addEventListener('resize', this.handleResize);
+    this.setupPaginationListener();
+  }
+  componentDidUpdate() {
+    this.setupPaginationListener();
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+  updateContainerWidth() {
+    // Use hostWidth prop if provided; otherwise, measure parent element
+    if (this.hostWidth && this.hostWidth.trim() !== '') {
+      this.containerWidth = Number(this.hostWidth);
+    } else if (this.hostEl.parentElement instanceof HTMLElement) {
+      this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
+    } else {
+      this.containerWidth = 400;
+    }
+  }
+  parseData() {
+    try {
+      this.tbData = parseData(this.data);
+      this.totalRows = this.tbData.length;
+      this.updateColumns();
+      this.currentPage = 1;
+    } catch (error) {
+      console.error('Failed to parse data:', error);
+      this.tbData = [];
+    }
+  }
+  parseConfig() {
+    try {
+      this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
+    } catch (error) {
+      console.error('Failed to parse config:', error);
+      this.parsedConfig = {};
+    }
+  }
+  async fetchData() {
+    try {
+      const response = await fetch(this.endpoint);
+      const data = await response.json();
+      this.data = data;
+    } catch (error) {
+      console.error('Failed to fetch data:', error);
+    }
+  }
+  setupPaginationListener() {
+    if (!this.shouldEnablePagination()) {
+      return;
+    }
+    const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
+    if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
+      paginationEl.addEventListener('page', event => this.handlePageChange(event.detail));
+      paginationEl.setAttribute('listener-attached', 'true');
+    }
+  }
+  getFilteredRows() {
+    return this.tbData.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+  }
+  getPaginatedRows() {
+    const filteredRows = this.getFilteredRows();
+    this.totalRows = filteredRows.length;
+    const start = (this.currentPage - 1) * this.rowsPerPage;
+    return filteredRows.slice(start, start + this.rowsPerPage);
+  }
+  handlePageChange(newPage) {
+    this.currentPage = newPage;
+    sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
+      name: `${newPage}` || '',
+      action: 'page'
+    });
+  }
+  handleSearch(event) {
+    this.searchQuery = event.target.value;
+    this.currentPage = 1;
+  }
+  renderCell(value, column) {
+    var _a;
+    const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
+    return format === 'uppercase' ? value === null || value === void 0 ? void 0 : value.toString().toUpperCase() : format === 'svg' ? h("div", {
+      innerHTML: value
+    }) : format === 'bold' ? h("strong", null, value) : format === 'code' ? h("code", null, value) : value;
+  }
+  /**
+   * Renders one action (button or checkbox) for a specific action‐name.
+   * Used by the “Actions” column below.
+   */
+  renderSingleActionCell(actionName, row) {
+    var _a;
+    const act = this.parsedActions.find(a => a.name === actionName);
+    if (this.actionTemplate) {
+      return this.actionTemplate(row);
+    }
+    const type = act.type || 'button';
+    if (type === 'checkbox') {
+      const boundField = (_a = act.field) !== null && _a !== void 0 ? _a : act.name;
+      const checked = !!row[boundField];
+      return h("eds-input-field", {
+        name: `chc-${actionName}`,
+        label: act.label,
+        type: "checkbox",
+        checked: checked,
+        onChange: e => this.emitAction(act.name, row, e.target.checked)
+      });
+    }
+    return h("eds-link", {
+      label: act.label,
+      intent: "weak",
+      onClick: () => this.emitAction(act.name, row)
+    });
+  }
+  emitAction(actionName, row, checked) {
+    sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: `${this.hostEl.tagName.toLowerCase()}/action`,
+      name: actionName,
+      action: 'click'
+    });
+    this.rowaction.emit({
+      action: actionName,
+      row,
+      checked: !!checked
+    });
+  }
+  shouldEnablePagination() {
+    return this.paginationEnabled && this.totalRows > this.rowsPerPage;
+  }
+  updateColumns() {
+    var _a, _b;
+    // 1) Grab all data‐keys from the first row (if any) as before:
+    this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
+    // 2) Instead of pushing each action.name, we add just a single “actions” column
+    //    (you can call it anything; we’ll detect it in render())
+    if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
+      this.columns.push('actions');
+    }
+  }
+  getVisibleColumnsCount() {
+    return this.columns.filter(column => {
+      var _a;
+      return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden);
+    }).length;
+  }
+  divisionFactor() {
+    let divisionFactor = 1;
+    if (this.columnSize === 'medium') {
+      divisionFactor = 2;
+    } else if (this.columnSize === 'large') {
+      divisionFactor = 4;
+    }
+    return divisionFactor;
+  }
+  capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+  }
+  render() {
+    const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
+    const visibleColumnsCount = this.getVisibleColumnsCount();
+    const columnWidth = visibleColumnsCount > 0 ? Math.floor(currentContainerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
+    const paginatedRows = this.getPaginatedRows();
+    const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+    return h("div", {
+      key: '5034177431626ab2bfc5fd0118c006d11a4f6e96'
+    }, this.searchEnabled && h("div", {
+      key: '86e1a6ffc4bed69f290b3a53031341ab276eaf04'
+    }, h("eds-input-field", {
+      key: 1,
+      name: "search",
+      "aria-label": "Search",
+      type: "text",
+      placeholder: "Search...",
+      onInput: event => this.handleSearch(event)
+    })), h("div", {
+      key: 'bc11838d819ecf89c5ba1cc1cfe7ac0af0e82b59',
+      class: "mt-20"
+    }, h("table", {
+      key: '97f16b65eb1d9387e9ca7588184c9e68c1afcc2e',
+      class: "block overflow-x-auto mt-6 p-0"
+    }, h("thead", {
+      key: 'f4d64ada28c225db1b224277513e663a99de1cec'
+    }, h("tr", {
+      key: 'c6a69e159cceada0f7143c0acb787e5c23242ae7',
+      class: "m-0 p-0 border border-softer even:bg-inverse-softer"
+    }, this.columns.map(col => {
+      var _a;
+      // 3) For the “actions” column, override the header to “Actions”
+      if (col === 'actions') {
+        // You can choose a smaller min‐width here if you wish:
+        return h("th", {
+          class: "m-0 py-8 border border-softer f-ui-02 break-words",
+          style: {
+            minWidth: `${columnWidth - 4}px`
+          }
+        }, "Actions");
+      }
+      // Otherwise, render column name or action label if you do want to override:
+      if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+        return h("th", {
+          class: "m-0 py-8 border border-softer f-ui-02 break-words",
+          style: {
+            minWidth: `${columnWidth - 4}px`
+          }
+        }, this.capitalize(col));
+      }
+      return null;
+    }))), h("tbody", {
+      key: '133af82fdd1f820e853734ab48123cb3db527e15'
+    }, paginatedRows.map(row => h("tr", {
+      class: "m-0 p-0 border border-softer even:bg-inverse-softer"
+    }, this.columns.map(col => {
+      var _a;
+      if (col === 'actions') {
+        // 4) Render ALL actions inside a single <td> for this row:
+        return h("td", {
+          class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell",
+          style: {
+            minWidth: `${columnWidth - 4}px`
+          }
+        }, h("div", {
+          style: {
+            display: 'flex',
+            gap: '0.5rem',
+            justifyContent: 'center',
+            flexWrap: 'wrap'
+          }
+        }, this.parsedActions.map(act => h("span", {
+          style: {
+            whiteSpace: 'nowrap'
+          }
+        }, this.renderSingleActionCell(act.name, row)))));
+      }
+      if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+        // Regular data cell:
+        return h("td", {
+          class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
+          style: {
+            minWidth: `${columnWidth - 4}px`
+          }
+        }, this.renderCell(row[col], col));
+      }
+      return null;
+    })))))), this.shouldEnablePagination() && h("div", {
+      key: '85032d06cd0ac5dae9b504d423fceba3cd074861',
+      class: "mt-20"
+    }, h("eds-pagination", {
+      key: '8caf6f57960e222c04d45f57a5811cd7bd524f4c',
+      currentPage: this.currentPage,
+      lastPage: lastPage,
+      perPage: this.rowsPerPage,
+      total: this.totalRows,
+      mode: "default"
+    })));
+  }
+  get hostEl() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "data": ["handleDataChange", "parseData"],
+      "config": ["handleConfigChange"],
+      "actions": ["handleActionsChange"]
+    };
+  }
+};
+EdsTable.style = EdsTableStyle0;
 const edsTabsCss = "*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(147 197 253 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor;}::before,::after{--tw-content:''}a{color:inherit;text-decoration:inherit}.relative{position:relative}.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)}.whitespace-nowrap{white-space:nowrap}.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)}.focus-visible\\:text-default:focus-visible{color:var(--black)}.hover\\:text-default:hover{color:var(--black)}.border-2{border-width:2px}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.after\\:bottom-0::after{bottom:0rem}.after\\:border-0::after{border-width:0px}.after\\:border-b-2::after{border-bottom-width:2px}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:rounded-lg::after{border-radius:16px}.after\\:border-solid::after{border-style:solid}.after\\:border-3::after{border-width:3px}.after\\:border-accent::after{border-color:var(--green-500)}.after\\:opacity-0::after{opacity:0}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:after\\:opacity-100:focus-visible::after{opacity:1}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.rounded-tl-lg{border-top-left-radius:16px}.rounded-tr-lg{border-top-right-radius:16px}.border-l-0{border-left-width:0px}.border-r-0{border-right-width:0px}.pr-28{padding-right:1.75rem}.pl-28{padding-left:1.75rem}.-mr-16{margin-right:-1rem}.-ml-16{margin-left:-1rem}.px-16{padding-left:1rem;padding-right:1rem}.py-12{padding-top:0.75rem;padding-bottom:0.75rem}.after\\:left-16::after{left:1rem}.after\\:right-16::after{right:1rem}.text-lighter{color:var(--grey-600)}.bg-dark{background-color:var(--grey-300)}.hover\\:bg-darker:hover{background-color:var(--grey-400)}.border-soft{border-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.bg-default{background-color:var(--grey-200)}.text-default{color:var(--black)}.z-99{z-index:99}.before\\:bottom-0::before{bottom:0rem}.before\\:h-12::before{height:0.75rem}.before\\:opacity-5::before{opacity:0.05}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.before\\:absolute::before{position:absolute}.before\\:-bottom-2::before{bottom:-0.125rem}.after\\:inset-x-0::after{left:0rem;right:0rem}.before\\:inset-x-0::before{left:0rem;right:0rem}.before\\:h-3::before{height:0.1875rem}.before\\:bg-default::before{background-color:var(--grey-200)}.after\\:border-softest::after{border-color:rgba(0, 0, 0, .05)}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.before\\:bg-gradient-y::before{background:linear-gradient(to bottom, transparent, ease-in-out, black)}.scroller-x{-ms-overflow-style:none;scrollbar-width:none}.overflow-x-auto{overflow-x:auto}.max-w-xxxl{max-width:2200px}.z-1{z-index:1}.mx-auto{margin-left:auto;margin-right:auto}.pt-8{padding-top:0.5rem}.pr-16{padding-right:1rem}.pl-16{padding-left:1rem}.inline-flex{display:inline-flex}@media (min-width: 900px){.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width: 2200px){.xxxl\\:px-0{padding-left:0rem;padding-right:0rem}}";
 const EdsTabsStyle0 = edsTabsCss;
 const EdsTabs = class {
@@ -3388,39 +3426,6 @@ const EdsTag = class {
   }
 };
 EdsTag.style = EdsTagStyle0;
-const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{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-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))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.bottom-full{bottom:100%}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}";
-const EdsTooltipStyle0 = edsTooltipCss;
-const EdsTooltip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.content = undefined;
-  }
-  /** fire analytics on every hover */
-  handleHover() {
-    sendAnalytics({
-      category: 'ui-component',
-      tag: this.el.tagName.toLowerCase(),
-      name: this.content.toLowerCase(),
-      action: 'hover'
-    });
-  }
-  render() {
-    return h("div", {
-      key: 'cf17cd61cd5888d6ea12bf6be0fb8c841072b4d6',
-      class: "relative inline-block group"
-    }, h("slot", {
-      key: '7a41d90940fff4e8b887ec4a3240371466f219a5'
-    }), h("div", {
-      key: 'ccf06592f4c977030b0cf54cce48d13889c059f3',
-      class: "absolute bottom-full left-1/2 \n            transform -translate-x-1/2 mb-2\n            rounded-xs bg-strongest text-inverse \n            f-ui-03-light pointer-events-none \n            z-10 whitespace-nowrap p-6 opacity-0 transition-opacity duration-150 ease-in-out\n            group-hover:opacity-100",
-      role: "tooltip"
-    }, this.content));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsTooltip.style = EdsTooltipStyle0;
 const edsUserCss = "hr,p{margin:0}.block{display:block}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.text-default{color:var(--black)}.min-w-\\[280px\\]{min-width:280px}.p-8{padding:0.5rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.gap-y-8{row-gap:0.5rem}.pb-16{padding-bottom:1rem}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1 )}.max-w-full{max-width:100%}.w-full{width:100%}.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-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.mt-4{margin-top:0.25rem}.mt-16{margin-top:1rem}";
 const EdsUserStyle0 = edsUserCss;
 const EdsUser = class {
@@ -3458,8 +3463,8 @@ const EdsUser = class {
       key: 'ccc34b3c7b0ab8d515eebfa1962264365d20c788',
       class: "flex items-center"
     }, h("eds-dropdown", {
-      key: '5283fb61297cd5f631d04da9ca19371a3778068c',
-      label: `Welcome, ${user.preferred_username}`,
+      key: 'dc4920fd442baa9f13d9f2b9a21065b5184eba83',
+      label: `Hi, ${user.preferred_username}`,
       intent: "tertiary",
       "aria-label": "User Menu",
       "dropdown-pos": "right",
@@ -3467,36 +3472,36 @@ const EdsUser = class {
       icon: "chevron-down",
       class: "text-default"
     }, h("div", {
-      key: 'd39e041e54fb59a409520e8b88f6f569d55cc6fc',
+      key: '0522db7fc229186c645665a4c9eeedc46fb5823b',
       class: "min-w-[280px] p-8"
     }, h("div", {
-      key: '50e571e30a6902b8443b9766dfb1018c76a2f68e',
+      key: 'af7b9daec713d24f8a1415415d19cdf48905c0cb',
       class: "flex gap-x-16"
     }, h("eds-avatar", {
-      key: '88a675a256466366aba1028831626253d11d2474',
+      key: 'c3ea7307d9beb597fe93d3942b7724f8526298ad',
       "first-name": user.given_name,
       "last-name": user.family_name,
       initials: this.initials,
       color: "grey"
     }), h("div", {
-      key: '99626794a7fa243bc599e9e77b0bc1b717d14c96',
+      key: '7af823b5f38a3d7acf16c633471dcfe74bca5e3c',
       class: "max-w-full"
     }, user.name && h("p", {
-      key: '1f1e33e19fd2b266f442b596953100f6b5e6dfcd',
+      key: '5973dfbac0efceeddb0dc211d9c502a1ad3b0dde',
       class: "f-ui-01 text-default w-full text-ellipsis"
     }, user.name), user.preferred_username && h("p", {
-      key: 'a36ebac6fdae9fa059887f7cc5d1009179f8eef9',
+      key: '5989927760ed2a2d1365661bbdc112a3a3d23bbf',
       class: "f-ui-03-light text-light mt-4"
     }, user.preferred_username), user.email && h("p", {
-      key: '976cd925af318831a22f1d43242e0295614bb2a1',
+      key: 'ee36be95298c0c7a748537012d48a85884955904',
       class: "f-ui-03-light text-light mt-4"
     }, user.email))), h("eds-block-break", {
-      key: '7d189caaab8a9b593017312d6e3d6943c36de22b'
+      key: 'fb3ef5cad6e81f51983e54914412131c3bd4cbc2'
     }), h("div", {
-      key: 'efcfc9a2c1f774abfab09b09682d7839bd1d5d2c',
+      key: 'e3784f3f4931378bf55d766d4a1cf5e24a75d462',
       class: "text-default flex w-full flex-col gap-y-8"
     }, h("slot", {
-      key: 'f54425f35d804753b94bb61e1d8e211a1583ac3b'
+      key: 'c0052bb56286d9a3fdc686c8407e105499a38084'
     }))))));
   }
   get hostEl() {
@@ -3504,91 +3509,5 @@ const EdsUser = class {
   }
 };
 EdsUser.style = EdsUserStyle0;
-const TokenSpacing = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return h("div", {
-      key: 'ad89d21ec01f11c77d85853f7c0dbefd8ea9f07f',
-      class: "w-full"
-    }, h("ul", {
-      key: '6108fb2870c358de8e5c48e6d14f6c1e76af856f',
-      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
-    }, h("li", {
-      key: 'cd0d1986b416f12164b8d0458262987a445662ca',
-      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
-    }, h("div", {
-      key: 'f2cfd77fcba601b89605dabf109f599816bb118e',
-      class: "container p-8 item-center border-2 border-soft"
-    }, h("div", {
-      key: '69e4cb5660f5c51d2b9c1ba30a38f3b7decacc58',
-      class: "spacing-sample m-16 bg-strong"
-    }, h("span", {
-      key: '70a07326b0a95655db3aad083637499f5ed4aa73',
-      class: "f-body-01 text-inverse"
-    }, "Margin: 1rem / m-16")))), h("li", {
-      key: '97b8c127e9bbe9af4ec8f6876ebae3f87a52d130',
-      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
-    }, h("div", {
-      key: '58537d6aa824b489ae9c5150400af21f11f1f447',
-      class: "container p-8 item-center border-2 border-soft"
-    }, h("div", {
-      key: '3f2913d232cb9de1b678b7f7903bef0642ef42df',
-      class: "spacing-sample ml-64 bg-strong"
-    }, h("span", {
-      key: 'fe56d1a501dc219a1bac474b674586609499f3de',
-      class: "f-body-01 text-inverse"
-    }, "Margin Left: 4rem / ml-64")))), h("li", {
-      key: 'e2dee648fd4bce503414d76f3afe64655285523c',
-      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
-    }, h("div", {
-      key: 'e788fa22248ac92fb8bc89566c5b8a77cf14578f',
-      class: "container p-8 item-center border-2 border-soft"
-    }, h("div", {
-      key: '9629958b453aa831a1d871bb4e846d0926d9e57c',
-      class: "spacing-sample mt-32 bg-strong"
-    }, h("span", {
-      key: '0efde7eaed0fe3e14f476617e7e9bf2e20131f2c',
-      class: "f-body-01 text-inverse"
-    }, "Margin Top: 2rem / mt-32")))), h("li", {
-      key: '6dabfeb0086c784c50843abd12d5a505a56e0933',
-      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
-    }, h("div", {
-      key: '164e7eec6ed3aad2847c4ede97f4bbfed34138d1',
-      class: "container p-8 item-center border-2 border-soft"
-    }, h("div", {
-      key: '9be99b05ba29204f6163df2c1522e7aa6211bd3d',
-      class: "spacing-sample p-32 bg-strong"
-    }, h("span", {
-      key: 'ae0a7ea74e31ea324015b844848c3d5a68930e8d',
-      class: "f-body-01 text-inverse"
-    }, "Padding: 2rem / p-32")))), h("li", {
-      key: '3804dbfb6a64a1dfd478bd0132ff83f51bcff33e',
-      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
-    }, h("div", {
-      key: '75c96b0762c3fac8b4de897ab8147b2c5614a360',
-      class: "container p-8 item-center border-2 border-soft"
-    }, h("div", {
-      key: 'd00487531406fa89112bee34e05306c59dc4f497',
-      class: "spacing-sample pt-32 bg-strong"
-    }, h("span", {
-      key: '8a750b7ac07739a71949b236421427b8bb05b067',
-      class: "f-body-01 text-inverse"
-    }, "Padding Top: 2rem / pt-32")))), h("li", {
-      key: '5e5fe43383f13b4377aca7cfb07c97b6ac1dd79b',
-      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
-    }, h("div", {
-      key: 'ed2ac88c543eba8c580d029ccacb1a8b26c1cae7',
-      class: "container p-8 item-center border-2 border-soft"
-    }, h("div", {
-      key: 'cf9a94b61e598c0ee6da9e771717574b48264333',
-      class: "spacing-sample pl-32 bg-strong"
-    }, h("span", {
-      key: 'a2d3fce66240c6b0d49d1a655c0b5a84be9c630d',
-      class: "f-body-01 text-inverse"
-    }, "Padding Left: 2rem / pl-32"))))));
-  }
-};
 
-export { EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break, EdsBreadcrumb as eds_breadcrumb, EdsButton as eds_button, EdsCardDesc as eds_card_desc, EdsCardGeneric as eds_card_generic, EdsCardTitle as eds_card_title, EdsDropdown as eds_dropdown, EdsFooter as eds_footer, EdsForm as eds_form, EdsFullscreenMenu as eds_fullscreen_menu, EdsGauge as eds_gauge, EdsHeader as eds_header, EdsIconWrapper as eds_icon_wrapper, EdsImg as eds_img, EdsInput as eds_input, EdsInputField as eds_input_field, EdsInputFooter as eds_input_footer, EdsInputLabel as eds_input_label, EdsInputRange as eds_input_range, EdsInputSearch as eds_input_search, EdsInputSelect as eds_input_select, EdsLink as eds_link, EdsLogo as eds_logo, EdsModal as eds_modal, EdsPie as eds_pie, EdsSocialNetworks as eds_social_networks, EdsSteps as eds_steps, EdsStepsV2 as eds_steps_v2, EdsTabs as eds_tabs, EdsTag as eds_tag, EdsTooltip as eds_tooltip, EdsUser as eds_user, TokenSpacing as token_spacing };
+export { EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break, EdsButton as eds_button, EdsDropdown as eds_dropdown, EdsFooter as eds_footer, EdsForm as eds_form, EdsFullscreenMenu as eds_fullscreen_menu, EdsHeader as eds_header, EdsIconWrapper as eds_icon_wrapper, EdsImg as eds_img, EdsInput as eds_input, EdsInputField as eds_input_field, EdsInputFooter as eds_input_footer, EdsInputLabel as eds_input_label, EdsInputRange as eds_input_range, EdsInputSearch as eds_input_search, EdsInputSelect as eds_input_select, EdsLink as eds_link, EdsLogo as eds_logo, EdsModal as eds_modal, EdsPagination as eds_pagination, EdsSocialNetworks as eds_social_networks, EdsSteps as eds_steps, EdsStepsV2 as eds_steps_v2, EdsTable as eds_table, EdsTabs as eds_tabs, EdsTag as eds_tag, EdsUser as eds_user };