@ebrains/react 0.5.0-alpha.0 → 0.6.0-alpha.0

package/eds-login.entry.esm.js

@@ -81,10 +81,10 @@ const EdsLogin = class {
   }
   render() {
     return h("div", {
-      key: 'cd30a135920ae77959330a43a8544bb9c231986e',
+      key: '62768f8a6cc8ac16b13f9b2bb9cf5835f7f63844',
       class: "block"
     }, !this.authenticated && h("eds-button", {
-      key: '98fa63c46b063a67c215ff9160c6dfbfee2265f7',
+      key: '31e341d628242fed472f673c0fe8346c7871515d',
       label: "Login",
       intent: "primary",
       "extra-class": "text-default",

package/eds-logo.entry.esm.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.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 { s as sendAnalytics } from './analytics-44b1416b.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsLogoCss = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}";
+const EdsLogoStyle0 = edsLogoCss;
+const EdsLogo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.href = '/';
+    this.orientation = 'horizontal';
+    this.type = undefined;
+    this.label = 'Home';
+  }
+  /**
+   * Handles the click event on the logo link.
+   * Emits a `matomoEvent` for analytics tracking with details about the interaction.
+   * - `category`: Component type (e.g., "ui-component").
+   * - `tag`: The HTML tag name of the component.
+   * - `name`: Event name, set as "logo".
+   * - `action`: The action, set as "click".
+   */
+  handleClick() {
+    sendAnalytics({
+      category: 'ui-component',
+      tag: this.el.tagName.toLowerCase(),
+      name: 'logo',
+      action: 'click'
+    });
+  }
+  /**
+   * Determines the appropriate SVG content based on the `orientation` and `type` props.
+   */
+  getLogo() {
+    const logos = {
+      horizontal: {
+        color: hLogoColor,
+        black: hLogoBlack,
+        'color-white': hLogoColorWhite,
+        white: hLogoWhite,
+        'no-bg': hLogoWhiteNoBg
+      },
+      vertical: {
+        color: vLogoColor,
+        black: vLogoBlack,
+        'color-white': vLogoColorWhite,
+        white: vLogoWhite,
+        'no-bg': vLogoWhiteNoBg
+      }
+    };
+    // Validate the orientation and type
+    const validOrientation = logos[this.orientation];
+    if (!validOrientation) {
+      //console.error(`Invalid orientation "${this.orientation}". Falling back to "horizontal".`);
+      return hLogoColor; // Default fallback logo
+    }
+    const validLogo = validOrientation[this.type];
+    if (!validLogo) {
+      //console.error(`Invalid type "${this.type}" for orientation "${this.orientation}". Falling back to "color".`);
+      return validOrientation['color']; // Fallback to color logo
+    }
+    return validLogo;
+  }
+  render() {
+    const logoContent = this.getLogo();
+    return h("a", {
+      key: 'ee8de4071b0137020341982b4c5cb2c938f1c4df',
+      href: this.href,
+      onClick: () => this.handleClick(),
+      class: "eds-logo-wrapper",
+      "aria-label": this.label
+    }, h("div", {
+      key: '1eb620afbcc5a2a5c6914cc1c91a45ca62d0068c',
+      innerHTML: logoContent
+    }));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsLogo.style = EdsLogoStyle0;
+
+export { EdsLogo as eds_logo };

package/eds-modal.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';

package/eds-pagination_2.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';

package/eds-rating.entry.esm.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}";
+const EdsRatingStyle0 = edsRatingCss;
+const EdsRating = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ratingChange = createEvent(this, "ratingChange", 7);
+    this.stars = 5;
+    this.label = 'Rate your experience';
+    this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+    this.selectedRating = 0;
+  }
+  /**
+   * Parses the `textMapping` prop into an array of strings.
+   */
+  get parsedMappings() {
+    if (typeof this.textMapping === 'object') {
+      return this.textMapping;
+    } else if (typeof this.textMapping === 'string') {
+      try {
+        return JSON.parse(this.textMapping);
+      } catch (e) {
+        //console.error('Error parsing textMapping prop:', e);
+        return [];
+      }
+    }
+    return [];
+  }
+  /**
+   * Handles the click event on a star.
+   * @param rating - The selected rating value.
+   */
+  handleClick(rating) {
+    this.selectedRating = rating;
+    this.ratingChange.emit(rating);
+  }
+  render() {
+    return h("div", {
+      key: 'b613863ad54ae9b381a5741bce4b188eff806ef0',
+      class: "relative w-full flex flex-col"
+    }, h("span", {
+      key: 'f35cef9c3691aab73995e2ca6e2554cc19bae837',
+      class: "f-heading-05"
+    }, this.label), h("div", {
+      key: '37082eb4bbadf5c211c197f3f81501d0b0e61404',
+      role: "radiogroup",
+      "aria-label": this.label,
+      class: "stars flex space-x-2"
+    }, Array.from({
+      length: this.stars
+    }, (_, index) => {
+      const starRating = index + 1;
+      const isSelected = starRating <= this.selectedRating;
+      // Use the mapping text if available; otherwise, fall back to a generic label.
+      const mappingText = this.parsedMappings[starRating - 1] || `Rating ${starRating}`;
+      return h("eds-button", {
+        label: "\u2605",
+        role: "radio",
+        "aria-checked": isSelected ? 'true' : 'false',
+        "aria-label": mappingText,
+        onClick: () => this.handleClick(starRating),
+        tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1,
+        intent: isSelected ? 'primary' : 'ghost',
+        size: "small",
+        "extra-class": "p-2" // Optional padding or styling for the star button
+      });
+    })), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && h("span", {
+      key: '61b4b92e476cfa0dd9bf405cb080dedd995ff9c6',
+      class: "f-ui-04 text-lighter mt-4"
+    }, this.parsedMappings[this.selectedRating - 1]));
+  }
+};
+EdsRating.style = EdsRatingStyle0;
+
+export { EdsRating as eds_rating };

package/eds-social-networks.entry.esm.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Array of social network objects, each containing label, URL, and icon.
+     * These are used to render the social network links.
+     *
+     * @private
+     * @type {SocialNetworks[]}
+     */
+    this.socialNetworks = [{
+      label: 'Twitter',
+      url: 'https://twitter.com/ebrains_eu',
+      icon: 'twitter'
+    }, {
+      label: 'Linkedin',
+      url: 'https://www.linkedin.com/company/ebrains-eu/about/',
+      icon: 'linkedin'
+    }, {
+      label: 'Facebook',
+      url: 'https://www.facebook.com/people/Ebrains_eu/100046659909324/',
+      icon: 'facebook'
+    }, {
+      label: 'Youtube',
+      url: 'https://www.youtube.com/channel/UC6E796cVVR5Xrs2A5jJmleQ',
+      icon: 'youtube'
+    }, {
+      label: 'Mastodon',
+      url: 'https://mastodon.social/@ebrains',
+      icon: 'mastodon'
+    }, {
+      label: 'Bluesky',
+      url: 'https://bsky.app/profile/ebrains.bsky.social',
+      icon: 'bluesky'
+    }];
+    this.title = 'Follow EBRAINS to keep up-to-date';
+  }
+  /**
+   * Renders the component's HTML structure with links to EBRAINS social profiles.
+   * Each social network link uses the `eds-link` component with specific classes and styles.
+   *
+   * @returns {JSX.Element} The rendered JSX for the component.
+   */
+  render() {
+    return h("div", {
+      key: '9efc31261e88c70f9c808251124178d807140594'
+    }, h("p", {
+      key: '383101de2aaba05e1024f3ba86d788ad5d92173c',
+      class: "f-ui-02"
+    }, this.title), h("ul", {
+      key: 'e27243a4e7b8aab085c4ef091d67df57dba70664',
+      class: "mt-12 flex gap-4"
+    }, this.socialNetworks.map((network, index) => h("li", {
+      key: index
+    }, h("eds-link", {
+      "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm",
+      external: true,
+      "aria-label": network.label,
+      url: network.url,
+      icon: network.icon,
+      intent: "strong"
+    })))));
+  }
+};
+EdsSocialNetworks.style = EdsSocialNetworksStyle0;
+
+export { EdsSocialNetworks as eds_social_networks };

package/eds-steps.entry.esm.js

@@ -0,0 +1,98 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}";
+const EdsStepsStyle0 = edsStepsCss;
+const EdsSteps = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stepClick = createEvent(this, "stepClick", 7);
+    this.handleNext = () => {
+      if (this.activeStep < this.parsedSteps.length) {
+        this.activeStep = this.activeStep + 1;
+      }
+    };
+    this.handleBack = () => {
+      if (this.activeStep > 0) {
+        this.activeStep = this.activeStep - 1;
+      }
+    };
+    this.steps = [];
+    this.type = 'static';
+    this.activeStep = 0;
+  }
+  handleStepClick(index) {
+    this.stepClick.emit(index);
+    // In linear mode, update the active step on header click.
+    if (this.type === 'linear') {
+      this.activeStep = index;
+    }
+  }
+  /**
+   * Parse the JSON string into an array of steps.
+   */
+  get parsedSteps() {
+    if (typeof this.steps === 'string') {
+      try {
+        const stepsStr = this.steps;
+        return JSON.parse(stepsStr);
+      } catch (error) {
+        //console.error('Invalid steps JSON', error);
+        return [];
+      }
+    }
+    return this.steps;
+  }
+  /*private handleReset = () => {
+    this.activeStep = 0;
+  };*/
+  render() {
+    const steps = this.parsedSteps;
+    if (this.type === 'linear') {
+      return h("div", null, h("div", {
+        class: "steps"
+      }, steps.map((step, index) => h("div", {
+        class: "step mb-28",
+        key: index
+      }, h("h3", {
+        onClick: () => this.handleStepClick(index)
+      }, step.title), this.activeStep === index && h("div", {
+        class: "content"
+      }, h("div", {
+        class: "f-body-02 text-lighter my-16"
+      }, step.content), h("eds-button", {
+        label: index === steps.length - 1 ? 'Finish' : 'Continue',
+        intent: "primary",
+        class: "next-btn",
+        onClick: this.handleNext
+      }), h("eds-button", {
+        label: "Back",
+        intent: "ghostInverse",
+        onClick: this.handleBack,
+        disabled: index === 0,
+        "extra-class": index === 0 ? 'hidden' : 'ml-8 block'
+      }))))), this.activeStep === steps.length && h("div", {
+        class: "completed"
+      }, h("eds-alert", {
+        intent: "success",
+        message: "All steps completed - you're finished!"
+      })));
+    }
+    // Static mode: show all steps with their content, no navigation buttons.
+    return h("div", {
+      class: "steps"
+    }, steps.map((step, index) => h("div", {
+      class: "step mb-28",
+      key: index
+    }, h("h3", null, step.title), h("div", {
+      class: "content"
+    }, h("div", {
+      class: "f-body-02 text-lighter my-16"
+    }, step.content)))));
+  }
+};
+EdsSteps.style = EdsStepsStyle0;
+
+export { EdsSteps as eds_steps };

package/eds-switch.entry.esm.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-size:14px;margin:0 8px}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}";
+const EdsSwitchStyle0 = edsSwitchCss;
+const EdsSwitch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "change", 7);
+    this.toggleSwitch = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.change.emit(this.checked);
+    };
+    this.checked = false;
+    this.disabled = false;
+    this.labelOn = '';
+    this.labelOff = '';
+  }
+  render() {
+    // Compute an accessible name based on state.
+    const accessibleLabel = this.labelOn || this.labelOff ? this.checked ? this.labelOn : this.labelOff : 'Toggle switch';
+    return h("div", {
+      key: 'd4c727cbb562921b2bcba269e84f25c359c7061b',
+      class: "switch-container"
+    }, this.labelOff && h("span", {
+      key: '90b18fff27bd21501466deb5879e5fe6ff607043',
+      class: "switch-label switch-label--off"
+    }, this.labelOff), h("button", {
+      key: '8675f5d9f972d3932710fa7f9b28f74f95a83003',
+      type: "button",
+      role: "switch",
+      "aria-checked": this.checked ? 'true' : 'false',
+      "aria-disabled": this.disabled ? 'true' : 'false',
+      "aria-label": accessibleLabel,
+      class: {
+        switch: true,
+        'switch--checked': this.checked,
+        'switch--disabled': this.disabled
+      },
+      onClick: this.toggleSwitch,
+      disabled: this.disabled
+    }, h("span", {
+      key: '26aa30a01b10419c1665b1fd58b5696a02d1504a',
+      class: "switch-handle"
+    })), this.labelOn && h("span", {
+      key: '3680d67555e9193a97e129c0639b411263e070a8',
+      class: "switch-label switch-label--on"
+    }, this.labelOn));
+  }
+};
+EdsSwitch.style = EdsSwitchStyle0;
+
+export { EdsSwitch as eds_switch };

package/eds-tabs-content.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import { c as cva } from './index-39c58238.esm.js';
 import 'react';
 import 'react/jsx-runtime';
@@ -108,13 +108,13 @@ const EdsTabsContent = class {
   }
   render() {
     return h("div", {
-      key: 'aa94a55d3ae658797df6ae75724238a17a80a169',
+      key: 'd94df79c55522088de5445587758a5eea028b313',
       class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
     }, h("div", {
-      key: '0e38c695467c272198a605efdb2705b14239756e',
+      key: 'e7d01a2e6b424c25749c0d70305fb1c8c55bef74',
       class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
     }, h("nav", {
-      key: '525f56d02b41e236d3b713fb972b6803e3f908d5',
+      key: 'ef8ff8a02e570dfcf8143997ace793a65917e6ca',
       ref: el => this.tabContainer = el,
       class: "inline-flex",
       "aria-label": this.navAriaLabel
@@ -129,7 +129,7 @@ const EdsTabsContent = class {
         onClick: () => this.handleTabClick(index, tab.label)
       }));
     })), h("slot", {
-      key: 'e5da088cec99dd0e40560b70fbd9940ac5a7f56f'
+      key: '8f014081c3bc2a8a3013aea3aff32690d6f71c85'
     })));
   }
   get el() {

package/eds-tabs.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import { c as cva } from './index-39c58238.esm.js';
 import 'react';
 import 'react/jsx-runtime';
@@ -119,14 +119,14 @@ const EdsTabs = class {
   }
   render() {
     return h("div", {
-      key: 'f5c9e076fc1fb95b57e0148d85865ce62c14fbe7',
+      key: '5a0c7dbdd059b2a1efdf31e91725dd1d49c88bd4',
       id: `${this.id}`,
       class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
     }, h("div", {
-      key: '7d382167fb62999e39b784ce8bfba24267c87a64',
+      key: '74bb7e66b88d845359caf285430fca079abfab03',
       class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
     }, h("nav", {
-      key: '99bbfabd817bada1984ddf87a274bf9304a1e6a0',
+      key: '71ca3465da106b2d1ed59eca28eabfe60a1ac0fc',
       ref: el => this.tabContainer = el,
       class: "inline-flex",
       "aria-label": this.navAriaLabel

package/eds-tooltip.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';

package/eds-user.entry.esm.js

@@ -88,7 +88,7 @@ const EdsUser = class {
   render() {
     var _a;
     return h("div", {
-      key: '22ee744979511dd2f8a1e1a15bb99215eadd535b',
+      key: '8fe0aaf06ed421d8ca6e512247b4d15b092c895f',
       class: "block"
     }, !this.authenticated ? h("eds-button", {
       label: "Login",