@ebrains/components 0.4.0-alpha.0 → 0.6.0-alpha.0

package/dist/esm/eds-switch.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, c as createEvent, h } from './index-e96badea.js';
+
+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/dist/esm/eds-tab.entry.js

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

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e96badea.js';
-import { s as sendAnalytics } from './color-bb472c37.js';
+import { s as sendAnalytics } from './analytics-44b1416b.js';
 import { c as cva } from './index-39c58238.js';
 
 const EdsTabsContent = class {
@@ -114,11 +114,11 @@ const EdsTabsContent = class {
         });
     }
     render() {
-        return (h("div", { key: '7bc954d9251bd15b5e3a49d5c74b83805f802b07', 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', 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', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { 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: '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: 'ef8ff8a02e570dfcf8143997ace793a65917e6ca', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label, url: tab.url, active: index === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index, tab.label) })));
-        })), h("slot", { key: '5072b877786a23358d540d6d242d5fbdb3c63d7f' }))));
+        })), h("slot", { key: '8f014081c3bc2a8a3013aea3aff32690d6f71c85' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e96badea.js';
-import { s as sendAnalytics } from './color-bb472c37.js';
+import { s as sendAnalytics } from './analytics-44b1416b.js';
 import { c as cva } from './index-39c58238.js';
 
 const edsTabsCss = "";
@@ -124,7 +124,7 @@ const EdsTabs = class {
         });
     }
     render() {
-        return (h("div", { key: '540bb667084b36ae2151ec39ef6b54a9ac6a4c4a', 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', 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', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { 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: '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: '71ca3465da106b2d1ed59eca28eabfe60a1ac0fc', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) })));

package/dist/esm/eds-timeline.entry.js

@@ -58,7 +58,7 @@ const EdsTimeline = class {
         }
     }
     render() {
-        return (h("div", { key: '6016cb89d3fe3250482b42d8a0bf500fe18cee5d', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '994cc7af75950a0f09d108804efff796602aeb93', class: "relative" }, h("div", { key: '77b15ae60feb380ea20c6466b49d0efd5d8f5180', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '60bb384ce4eedd7bfc3b15a7a637e2b89318d619', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+        return (h("div", { key: '1ba4a93ce518b52f5821af75ae0587c44db92c6d', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '3e019420ddd4bfab7800567c7130299ea47205c6', class: "relative" }, h("div", { key: 'df99ce8fb08232c46449d7485dd7cffcd04b64d6', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '1b52694d2e8c3656910c02680aa8ce2e78b02997', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), h("div", { class: "flex items-center justify-center relative" }, event.completed ? (h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), h("div", { class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}` }, index % 2 !== 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]

package/dist/esm/eds-tooltip.entry.js

@@ -1,6 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-e96badea.js';
-import { s as sendAnalytics } from './color-bb472c37.js';
-import './index-39c58238.js';
+import { s as sendAnalytics } from './analytics-44b1416b.js';
 
 const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.bg-stronger{background-color:var(--grey-900)}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.text-default{color:var(--black)}.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)}.pointer-events-none{pointer-events:none}.-top-8{top:-0.5rem}.left-1\\/2{left:50%}.z-10{z-index:10}.block{display:block}.-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))}.-translate-y-full{--tw-translate-y:-100%;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}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}";
 const EdsTooltipStyle0 = edsTooltipCss;
@@ -93,7 +92,7 @@ const EdsTooltip = class {
         }
     }
     render() {
-        return (h("div", { key: '673ab0ee31378410f9c83bb5fd37b27d00a7b018', class: "relative" }, h("slot", { key: '0c0138dfdf9aafecc1e0e925c84d4b0ca957f82d' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '798d01cf631f2e5b3af9d9bb11a847041a6ee2ba', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
+        return (h("div", { key: '1635b034319df4827a62ed58267d81db277ad19d', class: "relative" }, h("slot", { key: '6cdfd0f6d456b984464c5091a2829cdba69ba895' }), this.isVisible && this.isPositioned && this.content && (h("div", { 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: {
                 top: this.tooltipStyle.top,
                 left: this.tooltipStyle.left,
                 transform: this.tooltipStyle.transform

package/dist/esm/eds-trl.entry.js

@@ -40,7 +40,7 @@ const EdsTrl = class {
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (h("div", { key: '868a7c45e6495d7a2ed8a4ad2974ac31f74535a6', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'ed3e2a949d0e1d66a5e80018fa5fcac9bbe64620', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
+        return (h("div", { key: 'a329a001d6275fcfe7df9bddf83bd289effe4151', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '93aebfd840b16416789b15eec0daa16d9126aa9f', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
 };
 

package/dist/esm/eds-user.entry.js

@@ -0,0 +1,95 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e96badea.js';
+import { l as login, a as logout, c as checkServerAvailability, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak-d502ec16.js';
+import { t as toast } from './toastManager-d9eee791.js';
+
+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: '8fe0aaf06ed421d8ca6e512247b4d15b092c895f', 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/dist/esm/eds-vertical-stepper.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, h } from './index-e96badea.js';
+
+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/dist/esm/incorrect-use-of-colors.entry.js

@@ -39,7 +39,7 @@ const IncorrectUseOfColors = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '2e660e9a788e46e68d6695ae8aa475bbb1ca395e', class: "container" }, h("eds-alert", { key: '1dc4552a33d88055a3a0c33eeb18c53a8379039a', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), h("div", { key: 'fd6bf7f0205422b1bd3ceb3f8374d5a9a73aaca0', class: "flex" }, h("div", { key: 'dae745447f5e9792136f059b1dcfc868e473dfd5', class: "w-full" }, h("ul", { key: 'daeec7514f4027ec3f688f05fb4f1e027b846a81', 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" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '1ca202afa9384e78e3ed9c0674e06c51184d3a5a', class: "w-full" }, h("ul", { key: '7bdef2e7d64f3c5553193d127bac69ee89a93686', 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" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: 'cb22d37293f3b3b5fe3772cfe83234a5d81e1094', class: "container" }, h("eds-alert", { key: '9aa7a510440c32f92242b3e09f9e818cd2509b06', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), h("div", { key: '4d22cba75b7dd45a5a9a7d2b2eba5404875f1403', class: "flex" }, h("div", { key: 'c7f08b3e4ef2692c545edd4185a005ddd6526a23', class: "w-full" }, h("ul", { 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" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'f8836d4805fdd416ee75712f749d5cee3f612559', class: "w-full" }, h("ul", { 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" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 };
 

package/dist/esm/index-e96badea.js

@@ -52,22 +52,22 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'eds-accordion_33':
+                case 'eds-accordion_13':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-accordion_33.entry.js').then(processMod, consoleError);
+                      './eds-accordion_13.entry.js').then(processMod, consoleError);
                 case 'correct-use-of-colors':
                     return import(
                       /* webpackMode: "lazy" */
                       './correct-use-of-colors.entry.js').then(processMod, consoleError);
-                case 'eds-card-project':
+                case 'eds-breadcrumb':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-card-project.entry.js').then(processMod, consoleError);
-                case 'eds-card-section':
+                      './eds-breadcrumb.entry.js').then(processMod, consoleError);
+                case 'eds-card-project':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-card-section.entry.js').then(processMod, consoleError);
+                      './eds-card-project.entry.js').then(processMod, consoleError);
                 case 'eds-card-tags':
                     return import(
                       /* webpackMode: "lazy" */
@@ -84,6 +84,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-components-section.entry.js').then(processMod, consoleError);
+                case 'eds-cookies-preference':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-cookies-preference.entry.js').then(processMod, consoleError);
                 case 'eds-docs-palettes':
                     return import(
                       /* webpackMode: "lazy" */
@@ -92,6 +96,22 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-docs-tokens.entry.js').then(processMod, consoleError);
+                case 'eds-form':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-form.entry.js').then(processMod, consoleError);
+                case 'eds-frame':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-frame.entry.js').then(processMod, consoleError);
+                case 'eds-fullscreen-menu':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-fullscreen-menu.entry.js').then(processMod, consoleError);
+                case 'eds-header':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-header.entry.js').then(processMod, consoleError);
                 case 'eds-icon-arrow-diagonal':
                     return import(
                       /* webpackMode: "lazy" */
@@ -188,10 +208,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-logo-variations.entry.js').then(processMod, consoleError);
-                case 'eds-matomo-notice':
+                case 'eds-modal':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-matomo-notice.entry.js').then(processMod, consoleError);
+                      './eds-modal.entry.js').then(processMod, consoleError);
                 case 'eds-navigator':
                     return import(
                       /* webpackMode: "lazy" */
@@ -200,10 +220,18 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-rating.entry.js').then(processMod, consoleError);
+                case 'eds-steps':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-steps.entry.js').then(processMod, consoleError);
                 case 'eds-svg-repository':
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-svg-repository.entry.js').then(processMod, consoleError);
+                case 'eds-switch':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-switch.entry.js').then(processMod, consoleError);
                 case 'eds-tabs':
                     return import(
                       /* webpackMode: "lazy" */
@@ -224,6 +252,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-trl.entry.js').then(processMod, consoleError);
+                case 'eds-user':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-user.entry.js').then(processMod, consoleError);
+                case 'eds-vertical-stepper':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-vertical-stepper.entry.js').then(processMod, consoleError);
                 case 'incorrect-use-of-colors':
                     return import(
                       /* webpackMode: "lazy" */
@@ -252,6 +288,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './color-primary-palette_6.entry.js').then(processMod, consoleError);
+                case 'eds-dropdown_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-dropdown_2.entry.js').then(processMod, consoleError);
+                case 'eds-footer':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-footer.entry.js').then(processMod, consoleError);
                 case 'eds-progress-bar':
                     return import(
                       /* webpackMode: "lazy" */
@@ -268,6 +312,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-section-core_2.entry.js').then(processMod, consoleError);
+                case 'eds-social-networks':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-social-networks.entry.js').then(processMod, consoleError);
                 case 'eds-tab':
                     return import(
                       /* webpackMode: "lazy" */
@@ -276,10 +324,30 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-pagination_2.entry.js').then(processMod, consoleError);
+                case 'eds-block-break':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-block-break.entry.js').then(processMod, consoleError);
+                case 'eds-input_7':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-input_7.entry.js').then(processMod, consoleError);
+                case 'eds-alert':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-alert.entry.js').then(processMod, consoleError);
+                case 'eds-logo':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-logo.entry.js').then(processMod, consoleError);
                 case 'eds-code-block':
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-code-block.entry.js').then(processMod, consoleError);
+                case 'eds-link':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-link.entry.js').then(processMod, consoleError);
           }
       }
   return import(