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

package/eds-pagination_2.entry.esm.js

@@ -1,4 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -29,14 +30,17 @@ const EdsPagination = class {
   componentDidLoad() {
     // Emit context for each eds-link element after the component is fully loaded
     const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
-    if (links.length > 0) {
+    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
+           // 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.
@@ -167,12 +171,12 @@ const EdsPagination = class {
   }
   render() {
     return h("div", {
-      key: '2385b59b0a8b2bbdc40bfc5032b846c0ec20065e'
+      key: '8c8418eec263acc153a928b752775458f897504f'
     }, this.total > 0 && this.mode === 'default' && h("p", {
-      key: '6aea281a4df247874f354469bbabae039424ad9e',
+      key: '02a5a69772a4812f10b29e8df117b72df210614d',
       class: "f-ui-03 text-lightest mb-28 w-full text-center"
     }, h("span", {
-      key: 'eeb5f0ea902505c3853a30d51026cef9d9785e48',
+      key: 'ef9804843100c722643c24e31a05f86f2d55efa0',
       class: "sr-only"
     }, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
       "aria-label": "Pagination"
@@ -342,10 +346,24 @@ const EdsTable = class {
   }
   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;
+    /*sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
+      name: `${this.searchQuery}` || '',
+      action: 'page'
+    });*/
   }
   renderCell(value, column) {
     var _a;
@@ -383,13 +401,11 @@ const EdsTable = class {
     const visibleColumnsCount = this.getVisibleColumnsCount();
     /// Calculate container width based on the optional prop or parent's measured width.
     const containerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.hostEl.parentElement instanceof HTMLElement ? this.hostEl.parentElement.getBoundingClientRect().width : this.hostEl.getRootNode().host instanceof HTMLElement ? this.hostEl.getRootNode().host.getBoundingClientRect().width : 400;
-    //console.log('containerWidth:', containerWidth);
     const columnWidth = visibleColumnsCount > 0 ? Math.floor(containerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
-    console.log('columnWidth:', columnWidth);
     return h("div", {
-      key: '178a33c07e6eae9d5edc170f842b6ef29ae21d9c'
+      key: '66ca59804bc8054655ed0d942104516fe4cd259b'
     }, this.searchEnabled && h("div", {
-      key: 'f1212a4e515a1db218df28b71367c6ffa42e3063'
+      key: 'df7267fc443da042e4b6ff81ded5800a2213bd73'
     }, h("eds-input-field", {
       key: 1,
       name: "search",
@@ -399,26 +415,26 @@ const EdsTable = class {
       // @ts-ignore
       onInput: event => this.handleSearch(event)
     })), h("div", {
-      key: 'da6ac91e4b4d56780b044a3d35088e7722efe143',
+      key: '80ac1fcb3802f9f5d5eabe016fb7345b88908b36',
       class: "mt-20"
     }, h("table", {
-      key: '3c5734d2370b31d2445ed4f043a80bf87c6d4bde',
+      key: '09acf39378b1a4c8bfe40b496ec6bf71a2d761ca',
       class: "block overflow-x-auto mt-6 p-0"
     }, h("thead", {
-      key: '3803a39b4c987ff39bf22e2567bd1bc3d513e1f4'
+      key: '8b844806cfef10d1a59da54a385ee8ed6c167050'
     }, h("tr", {
-      key: 'a67fa7bdd48549c69cfa9721083a908ab036a559',
+      key: '1b3cff91bdaf225e9f3b337e245cd80ad4772b6a',
       class: "m-0 p-0 border border-softer even:bg-inverse-softer"
     }, this.columns.map(column => {
       var _a;
       return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("th", {
         class: "m-0 py-8 border border-softer f-ui-02 break-words",
         style: {
-          minWidth: `${columnWidth}px`
+          minWidth: `${columnWidth - 5}px`
         }
       }, column);
     }))), h("tbody", {
-      key: '8e3f21bf2ee5b1bd84cfa93411ca2671f43ced45'
+      key: '93dfd3abd196779c288f85bb6a357ad3e9c01418'
     }, paginatedRows.map(row => h("tr", {
       class: "m-0 p-0 border border-softer even:bg-inverse-softer"
     }, this.columns.map(column => {
@@ -426,14 +442,14 @@ const EdsTable = class {
       return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("td", {
         class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
         style: {
-          minWidth: `${columnWidth}px`
+          minWidth: `${columnWidth - 5}px`
         }
       }, this.renderCell(row[column], column));
     })))))), this.shouldEnablePagination() && h("div", {
-      key: '24931f257ef9ced394c1b5b1e589cacedd8035e6',
+      key: '516b65d78a9ea91060c1dfcb3306bbd3ac2c6f58',
       class: "mt-20"
     }, h("eds-pagination", {
-      key: '996b26ae090ee4fe08cc821fb11362d94879ff72',
+      key: 'abe3a593827d99437a06e204ea9d8ef92f80aba7',
       currentPage: this.currentPage,
       lastPage: lastPage,
       perPage: this.rowsPerPage,

package/eds-progress-bar.entry.esm.js

@@ -20,10 +20,15 @@ const EdsProgressBar = class {
   render() {
     const progressValue = this.value;
     return h("div", {
-      key: '3131f56034a9fd72ca51e448bc2bcc6281669b25',
+      key: '0f47fedbf9d44887f65b399e184215f0937b1df1',
+      role: "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": progressValue,
+      "aria-valuetext": `${progressValue}%`,
       class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden"
     }, h("div", {
-      key: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07',
+      key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390',
       class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`,
       style: {
         width: `${progressValue}%`

package/eds-section-core_2.entry.esm.js

@@ -15,13 +15,13 @@ const EdsSectionCore = class {
   render() {
     const TagType = this.tag; // Set dynamic tag type (div or section)
     return h(TagType, {
-      key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2'
+      key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac'
     }, h("eds-section-heading", {
-      key: '7ed4486fcf6e7c653026869c9468be9471db1775',
+      key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769',
       headingLevel: this.headingLevel,
       sectionTitle: this.sectionTitle
     }), h("slot", {
-      key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2'
+      key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7'
     }));
   }
 };
@@ -52,7 +52,7 @@ const EdsSectionHeading = class {
     const TagType = this.tag; // Dynamically set tag type for the container
     const HeadingTag = this.headingLevel; // Dynamically set heading level
     return h(TagType, {
-      key: '2c6466c0a02bf8598153c18eafb37affc3dac395',
+      key: 'c15f83f8aaa4fb01c884fb1390965fcf9dbd61fb',
       class: {
         'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
         container: this.withContainer,
@@ -60,7 +60,7 @@ const EdsSectionHeading = class {
         'pt-28': !this.spacingLarge
       }
     }, h(HeadingTag, {
-      key: 'fc7f0f09e02e8c63697e46811c465792497126e0',
+      key: 'e65e13820553eefa5aec8bc9740e5e9da828ac92',
       class: this.getHeadingClass()
     }, this.sectionTitle));
   }

package/eds-svg-repository.entry.esm.js

@@ -308,7 +308,7 @@ const EdsSvgRepository = class {
       }
     };
     return h("eds-table", {
-      key: 'a1d4a1db6f0886a43513fc34707cdd6140ab685d',
+      key: 'a7d7fa426da72e174880a300202390c1016b74df',
       data: JSON.stringify(svgData),
       config: JSON.stringify(tableConfig),
       "rows-per-page": 10,

package/eds-tab.entry.esm.js

@@ -28,7 +28,7 @@ const EdsTab = class {
   }
   render() {
     return h("a", {
-      key: 'ba4c995637d8d305249f018a0451775f45907716',
+      key: 'a55be2a07e554ab13a0d7e913710382d6126da57',
       "aria-label": this.label,
       "aria-current": this.active,
       class: this.tabCva({

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 './color-0ba8ed56.esm.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.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: '7bc954d9251bd15b5e3a49d5c74b83805f802b07',
+      key: 'aa94a55d3ae658797df6ae75724238a17a80a169',
       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: '1bfda380604f1eae1cc5be147a5e3e6b537e0396',
+      key: '0e38c695467c272198a605efdb2705b14239756e',
       class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
     }, h("nav", {
-      key: 'b2ed26b52fd629ec99b01c7dc8e612eae4f3886d',
+      key: '525f56d02b41e236d3b713fb972b6803e3f908d5',
       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: '5072b877786a23358d540d6d242d5fbdb3c63d7f'
+      key: 'e5da088cec99dd0e40560b70fbd9940ac5a7f56f'
     })));
   }
   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 './color-0ba8ed56.esm.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.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: '540bb667084b36ae2151ec39ef6b54a9ac6a4c4a',
+      key: 'f5c9e076fc1fb95b57e0148d85865ce62c14fbe7',
       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: 'f0266d39c943b82725ded757cce0b35fb85fa874',
+      key: '7d382167fb62999e39b784ce8bfba24267c87a64',
       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: 'fcedf94e6f6c14635291d9c8e6d672efc8055433',
+      key: '99bbfabd817bada1984ddf87a274bf9304a1e6a0',
       ref: el => this.tabContainer = el,
       class: "inline-flex",
       "aria-label": this.navAriaLabel

package/eds-timeline.entry.esm.js

@@ -17,7 +17,8 @@ const EdsTimeline = class {
       try {
         parsed = JSON.parse(newValue);
       } catch (e) {
-        console.error('Error parsing events JSON', e);
+        // eslint-disable-next-line
+        console.error('Error parsing timeline events JSON', e);
         parsed = [];
       }
     }
@@ -60,16 +61,16 @@ const EdsTimeline = class {
   }
   render() {
     return h("div", {
-      key: '29e360adb412c67e7516f04671c276a12197d830',
+      key: '1ba4a93ce518b52f5821af75ae0587c44db92c6d',
       class: "max-w-sidebar mx-auto px-4 py-8"
     }, h("div", {
-      key: 'c556578a505bfb2da435616cb1f39cb91859ec7e',
+      key: '3e019420ddd4bfab7800567c7130299ea47205c6',
       class: "relative"
     }, h("div", {
-      key: '8e1d307b2b3b470c643ba992d8307457581e9d4f',
+      key: 'df99ce8fb08232c46449d7485dd7cffcd04b64d6',
       class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0"
     }), h("div", {
-      key: '7b40b6a8944aad01d01524e13056fbafeaa8a8a8',
+      key: '1b52694d2e8c3656910c02680aa8ce2e78b02997',
       class: "space-y-16"
     }, this.parsedEvents.map((event, index) => h("div", {
       class: "relative flex"

package/eds-tooltip.entry.esm.js

@@ -1,4 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -22,9 +23,17 @@ const EdsTooltip = class {
    * Show the tooltip and update its position.
    */
   async showTooltip() {
+    var _a;
     await this.updateTooltipPosition();
     this.isPositioned = true;
     this.isVisible = true;
+    sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: this.el.tagName.toLowerCase(),
+      name: ((_a = this.content) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+      action: 'hover'
+    });
   }
   /**
    * Hide the tooltip.
@@ -92,12 +101,12 @@ const EdsTooltip = class {
   }
   render() {
     return h("div", {
-      key: '5edce5e2ca66ef992ad22604a5017e5ab02f846b',
+      key: '1635b034319df4827a62ed58267d81db277ad19d',
       class: "relative"
     }, h("slot", {
-      key: '74c9ef5978e023a45eb9c25c18f95f1875c19b13'
+      key: '6cdfd0f6d456b984464c5091a2829cdba69ba895'
     }), this.isVisible && this.isPositioned && this.content && h("div", {
-      key: '4cc3ea40bd81308eb7685b5c1065e8bd30f99191',
+      key: '7e736731dc700e0273fdfe15202426d2db086aef',
       class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6",
       role: "tooltip",
       style: {

package/eds-trl.entry.esm.js

@@ -15,8 +15,8 @@ const EdsTrl = class {
       try {
         apps = JSON.parse(this.applications || '[]');
       } catch (error) {
-        // Uncomment the next line for debugging
-        // console.error('Invalid applications JSON', error);
+        // eslint-disable-next-line
+        console.error('Invalid applications trl JSON', error);
         apps = [];
       }
     }
@@ -32,11 +32,10 @@ const EdsTrl = class {
   }
   render() {
     const apps = this.getParsedApplications();
-    console.log('apps:', apps);
     // Map applications into table-friendly data.
     const tableData = apps.map(app => ({
       Application: app.name,
-      "Current TRL Stage": `TRL ${app.currentTrl}`,
+      'Current TRL Stage': `TRL ${app.currentTrl}`,
       Progress: h("div", {
         class: "w-[200px]"
       }, h("eds-progress-bar", {
@@ -44,18 +43,18 @@ const EdsTrl = class {
       }))
     }));
     const tableConfig = {
-      "Application": {
-        "format": "code"
+      Application: {
+        format: 'code'
       },
-      "Current TRL Stage": {
-        "format": "text"
+      'Current TRL Stage': {
+        format: 'text'
       }
     };
     return h("div", {
-      key: '71e903734b5cd1ef74bf93e8fcdc57afacb51f07',
+      key: 'a329a001d6275fcfe7df9bddf83bd289effe4151',
       class: "container mx-auto px-4 py-8"
     }, h("eds-table", {
-      key: 'cb8e4324c9c8481dcc2daf74f06c6928257e6f8b',
+      key: '93aebfd840b16416789b15eec0daa16d9126aa9f',
       data: JSON.stringify(tableData),
       config: JSON.stringify(tableConfig),
       "rows-per-page": "2",

package/eds-user.entry.esm.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
+import { l as login, a as logout, c as checkServerAvailability, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak-d502ec16.esm.js';
+import { t as toast } from './toastManager-d9eee791.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsUser = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.authStatusChanged = createEvent(this, "authStatusChanged", 7);
+    /**
+     * Handles user login by invoking the Keycloak `login` function.
+     * Only triggers login if the user is not already authenticated.
+     */
+    this.handleLogin = () => {
+      if (!this.authenticated) {
+        try {
+          login();
+        } catch (error) {
+          toast.show(error.message, 'error');
+        }
+      }
+    };
+    /**
+     * Handles user logout by invoking the Keycloak `logout` function.
+     * Resets the `authenticated` state to `false` after logout.
+     */
+    this.handleLogout = async () => {
+      try {
+        await logout();
+      } catch (error) {
+        toast.show(error.message, 'error');
+      }
+      this.authenticated = false;
+      this.user = null;
+    };
+    this.keycloakUrl = undefined;
+    this.keycloakRealm = undefined;
+    this.keycloakClientId = undefined;
+    this.user = null;
+    this.authenticated = false;
+    this.username = '';
+    this.serverAvailable = false;
+  }
+  /**
+   * Lifecycle method that runs when the component is about to load.
+   * It initializes authentication by calling the `initAuth` method.
+   */
+  async componentWillLoad() {
+    // Check if required props are provided (optional check)
+    if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
+      // eslint-disable-next-line
+      console.error('Keycloak configuration props are missing.');
+      return;
+    }
+    this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
+    if (!this.serverAvailable) {
+      toast.show('Keycloak server is unavailable.', 'error');
+      return; // Do not proceed further
+    }
+    await this.initAuth();
+  }
+  /**
+   * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
+   * Sets the `authenticated` state and `user` data if the user is authenticated.
+   * Emits `authStatusChanged` event with the authentication status.
+   */
+  async initAuth() {
+    try {
+      await initKeycloak({
+        url: this.keycloakUrl,
+        realm: this.keycloakRealm,
+        clientId: this.keycloakClientId
+      }, true);
+      if (isAuthenticated()) {
+        this.user = getUser();
+        this.authenticated = true;
+        this.authStatusChanged.emit({
+          authenticated: this.authenticated,
+          user: this.user
+        }); // Emit auth status change
+      }
+    } catch (error) {
+      toast.show(error.message, 'error');
+    }
+  }
+  render() {
+    var _a;
+    return h("div", {
+      key: '22ee744979511dd2f8a1e1a15bb99215eadd535b',
+      class: "block"
+    }, !this.authenticated ? h("eds-button", {
+      label: "Login",
+      intent: "primary",
+      onClick: this.handleLogin,
+      "extra-class": "text-default"
+    }) : h("div", {
+      class: "flex items-center"
+    }, h("eds-dropdown", {
+      label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.username}`,
+      intent: "tertiary",
+      "aria-label": "User Menu",
+      "dropdown-pos": "right",
+      "dropdown-offset": "false",
+      icon: "chevron-down",
+      class: "text-default"
+    }, h("eds-user-modal", {
+      user: JSON.stringify(this.user),
+      onLogout: this.handleLogout.bind(this)
+    }))));
+  }
+  get hostEl() {
+    return getElement(this);
+  }
+};
+
+export { EdsUser as eds_user };

package/eds-vertical-stepper.entry.esm.js

@@ -0,0 +1,81 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsVerticalStepperCss = ":host{display:block}.stepper-container{margin:0 auto}.stepper{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.step{margin-bottom:24px}.step-label{counter-increment:step;font-size:1.25rem;font-weight:600;position:relative;margin-top:1em;margin-bottom:1em}.step-label::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.optional{font-size:0.8rem;color:#888;margin-left:8px}.step-content{margin-top:8px}.step-buttons{margin-top:12px}.step-buttons button{margin-right:8px;padding:6px 12px;font-size:0.875rem}.completed{padding:16px;border:1px solid #ddd;margin-top:16px;text-align:center}";
+const EdsVerticalStepperStyle0 = edsVerticalStepperCss;
+const EdsVerticalStepper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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.handleReset = () => {
+      this.activeStep = 0;
+    };
+    this.steps = '[]';
+    this.activeStep = 0;
+  }
+  get parsedSteps() {
+    try {
+      return JSON.parse(this.steps);
+    } catch (error) {
+      //console.error('Invalid steps JSON', error);
+      return [];
+    }
+  }
+  render() {
+    const steps = this.parsedSteps;
+    return h("div", {
+      key: '08fa2f85c49dbe217b2f9d068bee486e432f5315',
+      class: "stepper-container"
+    }, h("div", {
+      key: '6f7e0a0ccaa2882794a6be0216201d1bf924e2b2',
+      class: "stepper"
+    }, steps.map((step, index) => h("div", {
+      class: "step",
+      key: index
+    }, h("div", {
+      class: "step-label"
+    }, h("span", null, step.label), index === steps.length - 1 && h("span", {
+      class: "f-ui-03 text-lightest ml-4"
+    }, "(Last step)")), this.activeStep === index && h("div", {
+      class: "step-content"
+    }, h("p", null, step.description), h("div", {
+      class: "step-buttons"
+    }, h("eds-button", {
+      label: index === steps.length - 1 ? 'Finish' : 'Continue',
+      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", {
+      key: '8a5ebfed582b25d828758e1762a063df6c745093',
+      class: ""
+    }, h("eds-alert", {
+      key: 'a142fb50b8df533dd97f770aeaa453f2379ea7cb',
+      intent: "success",
+      message: "All steps completed - you're finished!"
+    }), h("eds-button", {
+      key: '5cfba059c9a152f179e7c31fa5d7a222c00defe2',
+      label: "Start again",
+      onClick: this.handleReset,
+      "extra-class": "mt-4"
+    })));
+  }
+};
+EdsVerticalStepper.style = EdsVerticalStepperStyle0;
+
+export { EdsVerticalStepper as eds_vertical_stepper };

package/incorrect-use-of-colors.entry.esm.js

@@ -29,20 +29,20 @@ const IncorrectUseOfColors = class {
   }
   render() {
     return h("div", {
-      key: '2e660e9a788e46e68d6695ae8aa475bbb1ca395e',
+      key: 'cb22d37293f3b3b5fe3772cfe83234a5d81e1094',
       class: "container"
     }, h("eds-alert", {
-      key: '1dc4552a33d88055a3a0c33eeb18c53a8379039a',
+      key: '9aa7a510440c32f92242b3e09f9e818cd2509b06',
       message: "Note that, each of the four colour tones cannot be mixed in the same composition.",
       intent: "error"
     }), h("div", {
-      key: 'fd6bf7f0205422b1bd3ceb3f8374d5a9a73aaca0',
+      key: '4d22cba75b7dd45a5a9a7d2b2eba5404875f1403',
       class: "flex"
     }, h("div", {
-      key: 'dae745447f5e9792136f059b1dcfc868e473dfd5',
+      key: 'c7f08b3e4ef2692c545edd4185a005ddd6526a23',
       class: "w-full"
     }, h("ul", {
-      key: 'daeec7514f4027ec3f688f05fb4f1e027b846a81',
+      key: '28561abcdc93a4899a5d7481fdd47c439f734ff6',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, primary.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -52,10 +52,10 @@ const IncorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: '1ca202afa9384e78e3ed9c0674e06c51184d3a5a',
+      key: 'f8836d4805fdd416ee75712f749d5cee3f612559',
       class: "w-full"
     }, h("ul", {
-      key: '7bdef2e7d64f3c5553193d127bac69ee89a93686',
+      key: '5842acd55d3a827355f2814c709d057676fb5d0f',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, incorrect.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"

package/index.esm.js

@@ -1,4 +1,4 @@
-export { E as EdsAccordion, a as EdsAlert, b as EdsAvatar, d as EdsBlockBreak, e as EdsBreadcrumb, f as EdsButton, i as EdsCardDesc, j as EdsCardGeneric, k as EdsCardSection, l as EdsCodeBlock, m as EdsDropdown, n as EdsFooter, o as EdsForm, p as EdsFrame, q as EdsFullscreenMenu, s as EdsHeader, t as EdsIconWrapper, u as EdsImg, v as EdsInputField, w as EdsInputSelect, x as EdsLink, y as EdsLogin, z as EdsLogo, A as EdsMatomoNotice, B as EdsModal, C as EdsPagination, D as EdsProgressBar, F as EdsRating, G as EdsSectionCore, H as EdsSectionHeading, I as EdsSocialNetworks, J as EdsTable, K as EdsTabs, L as EdsTag, M as EdsTimeline, N as EdsToast, O as EdsToastManager, P as EdsTooltip, Q as EdsUser } from './index.esm2.js';
+export { E as EdsAccordion, a as EdsAlert, b as EdsAvatar, d as EdsBlockBreak, e as EdsBreadcrumb, f as EdsButton, i as EdsCardDesc, j as EdsCardGeneric, k as EdsCardSection, l as EdsCodeBlock, m as EdsDropdown, n as EdsFooter, o as EdsForm, p as EdsFrame, q as EdsFullscreenMenu, s as EdsHeader, t as EdsIconWrapper, u as EdsImg, v as EdsInputField, w as EdsLink, x as EdsLogin, y as EdsLogo, z as EdsMatomoNotice, A as EdsModal, B as EdsPagination, C as EdsProgressBar, D as EdsRating, F as EdsSectionCore, G as EdsSectionHeading, H as EdsSocialNetworks, I as EdsSteps, J as EdsSwitch, K as EdsTable, L as EdsTabs, M as EdsTag, N as EdsTimeline, O as EdsToast, P as EdsToastManager, Q as EdsTooltip, R as EdsUser, S as EdsVerticalStepper } from './index.esm2.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';