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

package/dist/components/eds-tag2.js

@@ -31,7 +31,7 @@ const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement
     }
     render() {
         const classes = tagStyles({ intent: this.intent });
-        return h("span", { key: 'b49a84a2410f464c54c01a7d26a1710de8ce326b', class: classes }, this.label);
+        return h("span", { key: '2f4b0011094538aaa0a7cc855eadc1b39c9dc028', class: classes }, this.label);
     }
     static get style() { return EdsTagStyle0; }
 }, [1, "eds-tag", {

package/dist/components/eds-timeline.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
 import { d as defineCustomElement$7 } from './eds-avatar2.js';
 import { d as defineCustomElement$6 } from './eds-card-desc2.js';
 import { d as defineCustomElement$5 } from './eds-card-generic2.js';
@@ -15,26 +16,7 @@ const EdsTimeline$1 = /*@__PURE__*/ proxyCustomElement(class EdsTimeline extends
         this.parsedEvents = [];
     }
     parseEvents(newValue) {
-        let parsed;
-        // If events is a string, try to parse it
-        if (typeof newValue === 'string') {
-            try {
-                parsed = JSON.parse(newValue);
-            }
-            catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing timeline events JSON', e);
-                parsed = [];
-            }
-        }
-        // If events is already an array, use it directly
-        else if (Array.isArray(newValue)) {
-            parsed = newValue;
-        }
-        // Otherwise, default to an empty array
-        else {
-            parsed = [];
-        }
+        const parsed = parseData(newValue);
         // Map over the parsed events to ensure boolean conversion for "completed"
         this.parsedEvents = Array.isArray(parsed)
             ? parsed.map((event) => (Object.assign(Object.assign({}, event), { completed: event.completed === 'true' || event.completed === true })))
@@ -65,7 +47,7 @@ const EdsTimeline$1 = /*@__PURE__*/ proxyCustomElement(class EdsTimeline extends
         }
     }
     render() {
-        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
+        return (h("div", { key: '6d6eaccb876780be7c9e443a8d8a443fc0b4f779', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '122a6273fbd448a026fee899159872366cc01033', class: "relative" }, h("div", { key: 'bbf7359dacf3eb74f096d8c3e59344a6ceb67e8e', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: 'e86895cccaf84f269a4ae0117deb5ef8bfa6e501', 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/components/eds-toast-manager.js

@@ -38,7 +38,7 @@ const EdsToastManager$1 = /*@__PURE__*/ proxyCustomElement(class EdsToastManager
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '4e8781d164dd4f8aa47d17bc9f0632c0b49c173a', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: 'e01e6cf0931155f70153ba5de054c1174e364397', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     get hostElement() { return this; }
     static get style() { return EdsToastManagerStyle0; }

package/dist/components/eds-tooltip.js

@@ -94,7 +94,7 @@ const EdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends H
         }
     }
     render() {
-        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: {
+        return (h("div", { key: '0d00052874b171639b9185412d8a3a9f917e6df5', class: "relative" }, h("slot", { key: '2cb9cdc51248c3c6cedcaf8ee113530f2675b870' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: 'af54333ca0c8cf44dcc2b779a7378a9ecf256877', 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/components/eds-trl.js

@@ -53,7 +53,7 @@ const EdsTrl$1 = /*@__PURE__*/ proxyCustomElement(class EdsTrl extends HTMLEleme
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        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" })));
+        return (h("div", { key: 'bd46e540a0dd3c09a91d1cff266b94a2bf9fba95', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'd3ef10fc7e5ccd6029d1e62c2bb78765e78c8a13', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
 }, [0, "eds-trl", {
         "applications": [1]

package/dist/components/eds-user.js

@@ -1,117 +1,40 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as login, a as logout, c as checkServerAvailability, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak.js';
-import { t as toast } from './toastManager.js';
-import { d as defineCustomElement$8 } from './eds-avatar2.js';
-import { d as defineCustomElement$7 } from './eds-button2.js';
-import { d as defineCustomElement$6 } from './eds-dropdown2.js';
-import { d as defineCustomElement$5 } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$4 } from './eds-img2.js';
-import { d as defineCustomElement$3 } from './eds-link2.js';
-import { d as defineCustomElement$2 } from './eds-user-modal2.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$7 } from './eds-avatar2.js';
+import { d as defineCustomElement$6 } from './eds-button2.js';
+import { d as defineCustomElement$5 } from './eds-dropdown2.js';
+import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$3 } from './eds-img2.js';
+import { d as defineCustomElement$2 } from './eds-link2.js';
 
 const EdsUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsUser extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        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;
+        this.user = undefined;
     }
     /**
      * 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');
-        }
+    async componentWillLoad() { }
+    get initials() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const initials = `${((_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.given_name) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
+        return initials || ((_g = (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
     }
     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) }))))));
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { key: '68bc37b43d006a35e088a647d41b2257fbef25a7', class: "block" }, h("div", { key: '3f4badcb645238de9ac8aaad78e1c132407f5b0d', class: "flex items-center" }, h("eds-dropdown", { key: '7f065f82c5845fd0ebc9c6b465ac56a695a99b77', label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: '2b1e9279c8d4feae16bf64c15837b61b945af447', class: "min-w-[280px] p-8" }, h("div", { key: 'efa9aef50bc1eb4961e53a89f6e07cc5ff78d67b', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: '2b78a6768ecb101138ab742d812d407e1b4fdd89', "first-name": (_b = this.user) === null || _b === void 0 ? void 0 : _b.given_name, "last-name": (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), h("div", { key: 'd538dfe8df5e8af92fa204493b8b59b0d0e9f61a', class: "max-w-full" }, ((_d = this.user) === null || _d === void 0 ? void 0 : _d.name) && h("p", { key: 'a644c3cdda0ce7bf2f62438a3866692f4222efeb', class: "f-ui-01 text-default w-full text-ellipsis" }, this.user.name), ((_e = this.user) === null || _e === void 0 ? void 0 : _e.preferred_username) && (h("p", { key: '2a6cf5f0324d27ebdfd2b331e5f232c23e544ad5', class: "f-ui-03-light text-light mt-4" }, this.user.preferred_username)), ((_f = this.user) === null || _f === void 0 ? void 0 : _f.email) && h("p", { key: '02b9dd4f2999b68107eabc2c1e2a1bc3bb98f26a', class: "f-ui-03-light text-light mt-4" }, this.user.email))), h("div", { key: '3a68427dc603f0a3fb2652bfbea292eb718046dd', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: '3f3f617385efc57502794f78079b8486b6801425', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: '62fbc143f710605c7d840277dc90054a1162831d', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), h("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), h("slot", { key: 'f48a4c872784b60e421fda6e48f67f4c85b101d7' })))))));
     }
     get hostEl() { return this; }
-}, [0, "eds-user", {
-        "keycloakUrl": [1, "keycloak-url"],
-        "keycloakRealm": [1, "keycloak-realm"],
-        "keycloakClientId": [1, "keycloak-client-id"],
-        "user": [32],
-        "authenticated": [32],
-        "username": [32],
-        "serverAvailable": [32]
+}, [4, "eds-user", {
+        "user": [16]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-user", "eds-avatar", "eds-button", "eds-dropdown", "eds-icon-wrapper", "eds-img", "eds-link", "eds-user-modal"];
+    const components = ["eds-user", "eds-avatar", "eds-button", "eds-dropdown", "eds-icon-wrapper", "eds-img", "eds-link"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-user":
             if (!customElements.get(tagName)) {
@@ -119,36 +42,31 @@ function defineCustomElement$1() {
             }
             break;
         case "eds-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "eds-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "eds-dropdown":
+        case "eds-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "eds-icon-wrapper":
+        case "eds-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "eds-img":
+        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "eds-link":
+        case "eds-img":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "eds-user-modal":
+        case "eds-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/eds-vertical-stepper.js

@@ -39,7 +39,7 @@ const EdsVerticalStepper$1 = /*@__PURE__*/ proxyCustomElement(class EdsVerticalS
     }
     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" })))));
+        return (h("div", { key: '89344ad340f9eb8d20f463d3990ec4832cbdc900', class: "stepper-container" }, h("div", { key: 'da8d7fae2b30cfc93d04d5d8c3a61d95ccf91383', 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: '1e3272723281d9a10603b4d1e79badfdd6591cc5', class: "" }, h("eds-alert", { key: '7cc81e7e7097891364ff9894d383fd7bb9f7fce4', intent: "success", message: "All steps completed - you're finished!" }), h("eds-button", { key: 'a4d68698fa7831c7e2b6afae435979ccac46a726', label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
     }
     static get style() { return EdsVerticalStepperStyle0; }
 }, [1, "eds-vertical-stepper", {

package/dist/components/formUtils.js

@@ -0,0 +1,223 @@
+// utils/validators.ts
+function validateField(name, value, type, required, maxLength) {
+    const errors = [];
+    if (required && !value) {
+        errors.push(`${name} is required.`);
+    }
+    if (maxLength && typeof value === 'string' && value.length > maxLength) {
+        errors.push(`${name} must be at most ${maxLength} characters.`);
+    }
+    if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
+        errors.push('Invalid email format.');
+    }
+    return errors;
+}
+function validateFieldGroup(name, required, formEl) {
+    // Find all eds-input-field components that contain inputs with the given name.
+    const groupFields = Array.from(formEl.querySelectorAll('eds-input-field')).filter((edsField) => { var _a, _b; return ((_b = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) === null || _b === void 0 ? void 0 : _b.length) > 0; });
+    // Collect all input elements with the matching name inside those components.
+    const groupElements = groupFields.flatMap((edsField) => { var _a; return Array.from(((_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) || []); });
+    // Check if at least one input is checked.
+    const isChecked = groupElements.some((el) => el.checked);
+    const errors = [];
+    if (required && !isChecked) {
+        errors.push(`At least one option in ${name} is required.`);
+    }
+    return errors;
+}
+function validateSingleBox(name, required, formEl) {
+    var _a;
+    const errors = [];
+    // Find the eds-input-field component containing the input with the given name.
+    const edsField = Array.from(formEl.querySelectorAll('eds-input-field')).find((field) => { var _a; return (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`); });
+    // If no such field is found and it's required, return an error.
+    if (!edsField) {
+        if (required) {
+            errors.push(`${name} is required.`);
+        }
+        return errors;
+    }
+    // Query within the component's shadow root.
+    const inputEl = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
+    if (required && inputEl && !inputEl.checked) {
+        errors.push(`${name} is required.`);
+    }
+    return errors;
+}
+
+/**
+ * Finds the first input element for a given field name inside eds-input-field components.
+ */
+function findFieldElement(formEl, name) {
+    const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
+    for (const element of elements) {
+        if (element.shadowRoot) {
+            const input = element.shadowRoot.querySelector(`[name="${name}"]`);
+            if (input) {
+                return input;
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Validates all fields and returns an object containing the errors and a flag indicating any errors.
+ */
+function validateFormFields(parsedFields, formEl, values, 
+// eslint-disable-next-line
+isFieldVisible) {
+    const errors = {};
+    let hasError = false;
+    parsedFields.forEach((field) => {
+        // Only validate fields that are visible.
+        if (!isFieldVisible(field, values)) {
+            // If a field is hidden, clear its error.
+            delete errors[field.name];
+            return;
+        }
+        if (field.type !== 'hidden') {
+            if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
+                // Single checkbox or radio without multiple options
+                const fieldErrors = validateSingleBox(field.name, field.required, formEl);
+                if (fieldErrors.length > 0) {
+                    errors[field.name] = fieldErrors;
+                    hasError = true;
+                }
+            }
+            else if (field.options && (field.type === 'checkbox' || field.type === 'radio')) {
+                // Checkbox or radio group with options
+                const fieldErrors = validateFieldGroup(field.name, field.required, formEl);
+                if (fieldErrors.length > 0) {
+                    errors[field.name] = fieldErrors;
+                    hasError = true;
+                }
+            }
+            else {
+                // For all other types, find the first matching element.
+                const inputEl = findFieldElement(formEl, field.name);
+                if (inputEl) {
+                    const value = inputEl.value;
+                    const fieldErrors = validateField(field.name, value, field.type, field.required, field.maxlength);
+                    if (fieldErrors.length > 0) {
+                        errors[field.name] = fieldErrors;
+                        hasError = true;
+                    }
+                }
+            }
+        }
+    });
+    return { errors, hasError };
+}
+
+/**
+ * Validates a field based on its type and returns an array of error messages.
+ * @param field - The field configuration object.
+ * @param value - The input value (if applicable).
+ * @param formEl - The form element used for DOM queries.
+ */
+function validateInputField(field, value, formEl) {
+    if (field.type === 'checkbox' || field.type === 'radio') {
+        if (field.options) {
+            return validateFieldGroup(field.name, field.required, formEl);
+        }
+        return validateSingleBox(field.name, field.required, formEl);
+    }
+    return validateField(field.name, value, field.type, field.required, field.maxlength);
+}
+
+/**
+ * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
+ */
+function getFormInitData({ initData, parsedFields, currentValues, formEl, isFieldVisible }) {
+    // Pass 1: Update state for all fields.
+    const updatedValues = Object.assign({}, currentValues);
+    parsedFields.forEach((field) => {
+        const value = initData[field.name];
+        if (value !== undefined) {
+            updatedValues[field.name] = value;
+        }
+    });
+    // Pass 2: Delay DOM updates to ensure nested fields are rendered.
+    setTimeout(() => {
+        parsedFields.forEach((field) => {
+            // Only update if the field is visible.
+            if (isFieldVisible(field, updatedValues)) {
+                const value = initData[field.name];
+                if (value !== undefined) {
+                    if (field.type === 'checkbox' || field.type === 'radio') {
+                        // Query all eds-input-field components and update matching inputs.
+                        const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
+                        elements.forEach((element) => {
+                            if (element.shadowRoot) {
+                                const inputs = Array.from(element.shadowRoot.querySelectorAll(`[name="${field.name}"]`));
+                                // Convert stored comma-separated value into a trimmed array.
+                                const valuesArray = value.split(',').map((v) => v.trim());
+                                inputs.forEach((inputEl) => {
+                                    // eslint-disable-next-line
+                                    inputEl.checked = valuesArray.includes(inputEl.value);
+                                });
+                            }
+                        });
+                    }
+                    else {
+                        // For non-checkbox/radio inputs, update the first matching element using findFieldElement.
+                        const inputEl = findFieldElement(formEl, field.name);
+                        if (inputEl) {
+                            inputEl.value = value;
+                        }
+                    }
+                }
+            }
+        });
+    }, 50); // A 50ms delay to allow re-render
+    return { updatedValues };
+}
+/**
+ * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
+ */
+function getFormDraftData({ draftData, parsedFields, currentValues, formEl, isFieldVisible }) {
+    // Pass 1: Update state for all fields.
+    const updatedValues = Object.assign({}, currentValues);
+    parsedFields.forEach((field) => {
+        const value = draftData[field.name];
+        if (value !== undefined) {
+            updatedValues[field.name] = value;
+        }
+    });
+    // Pass 2: Delay DOM updates to ensure nested fields are rendered.
+    setTimeout(() => {
+        parsedFields.forEach((field) => {
+            // Only update if the field is visible.
+            if (isFieldVisible(field, updatedValues)) {
+                const value = draftData[field.name];
+                if (value !== undefined) {
+                    if (field.type === 'checkbox' || field.type === 'radio') {
+                        // Query all eds-input-field components and update matching inputs.
+                        const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
+                        elements.forEach((element) => {
+                            if (element.shadowRoot) {
+                                const inputs = Array.from(element.shadowRoot.querySelectorAll(`[name="${field.name}"]`));
+                                // Convert stored comma-separated value into a trimmed array.
+                                const valuesArray = value.split(',').map((v) => v.trim());
+                                inputs.forEach((inputEl) => {
+                                    // eslint-disable-next-line
+                                    inputEl.checked = valuesArray.includes(inputEl.value);
+                                });
+                            }
+                        });
+                    }
+                    else {
+                        // For non-checkbox/radio inputs, update the first matching element using findFieldElement.
+                        const inputEl = findFieldElement(formEl, field.name);
+                        if (inputEl) {
+                            inputEl.value = value;
+                        }
+                    }
+                }
+            }
+        });
+    }, 50); // A 50ms delay to allow re-render
+    return { updatedValues };
+}
+
+export { validateInputField as a, getFormInitData as b, getFormDraftData as g, validateFormFields as v };

package/dist/components/incorrect-use-of-colors.js

@@ -43,7 +43,7 @@ const IncorrectUseOfColors$1 = /*@__PURE__*/ proxyCustomElement(class IncorrectU
         this.__registerHost();
     }
     render() {
-        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 } })))))))));
+        return (h("div", { key: '6906da67ca0b6e67545b0daac34d476e4c80c75f', class: "container" }, h("eds-alert", { key: '0930bacd11792156dd000b14ed7e82a1fa41012f', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), h("div", { key: 'da773bedfa3591351b2425e14d084213e5d90fdb', class: "flex" }, h("div", { key: '894b7e13066eb40ee1ea19a62bf7a059407313c7', class: "w-full" }, h("ul", { key: 'fba6f9c9d34edd373841a9888971de7b08b6450d', 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: 'af7e2036fbe979299f2657a7ab3472d7d4196db2', class: "w-full" }, h("ul", { key: 'ad46e717be4200796424c6f72f022d6e163975ff', 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 } })))))))));
     }
 }, [0, "incorrect-use-of-colors"]);
 function defineCustomElement$1() {

package/dist/components/logo-space.js

@@ -11,7 +11,7 @@ const LogoSpace$1 = /*@__PURE__*/ proxyCustomElement(class LogoSpace extends HTM
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'fc5040b294d45ecbf8e3ee0ab26875c63efa3625', class: "container my-20" }, h("div", { key: 'acad9c182cb46fd58f37d9195c9e20658df81767', class: "w-[300px]" }, h("div", { key: '4caac9e94b715c967958fe6bd9e5d988622c8729', class: "bg-dark" }, h("div", { key: 'd82b6156de96fd91e996c0ab775b9503395ba04f', class: "logo-container", innerHTML: vLogoMargins })))));
+        return (h("div", { key: '99d8b66bf2f31a5563ff9872077c7c3879dc8813', class: "container my-20" }, h("div", { key: '76b8453c9d261b1b4772fc7e234b415f1ae3493b', class: "w-[300px]" }, h("div", { key: '03b7569121f1c2c1f74e1117805f754c4f548a70', class: "bg-dark" }, h("div", { key: '374de6bab6ef662acc860625a21a1002e6195b6e', class: "logo-container", innerHTML: vLogoMargins })))));
     }
     static get style() { return LogoSpaceStyle0; }
 }, [1, "logo-space"]);

package/dist/components/logo-variations-horizontal2.js

@@ -11,7 +11,7 @@ const LogoVariationsHorizontal = /*@__PURE__*/ proxyCustomElement(class LogoVari
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '17506a830e62dd31e1415d2be8b4553c3068bfd0' }, h("div", { key: '4ae7fe3624155cf1b2a749bed360d8b55cd2bede', class: "container my-16" }, h("h3", { key: 'e6daae3d262a53fb374162b5e3313fa98e11bf6b', class: "f-heading03" }, "Coloured Background"), h("div", { key: 'ab405030d5cac7ec5fe95f638dfeaa0e48f70af7', class: "coloured lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '05441cfb40658a2bd01f7f9a8c28e28d340b6dc1', type: "no-bg", href: "#" }))), h("div", { key: '82731279160c6c666889d32f329cf8469f853783', class: "container my-16" }, h("h3", { key: '73269548408d466223d44f9293f589e7e4b99bae', class: "f-heading03" }, "Black and White Background"), h("div", { key: '1d3e89b35eca34712e184ce42ba2f7632439ce4f', class: "bg-default lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: 'fc59306d8098f4764ab0f72fdbb5009bea5f3c44', type: "black", href: "#" }))), h("div", { key: '355ce3ef5cbd6872ce86ec847c3394deb29f2846', class: "container my-16" }, h("h3", { key: '57adbc464a1e2f2d5818112f00149840c2c0758a', class: "f-heading03" }, "Dark Background "), h("div", { key: '84e43ad22d556672c1b0e82a9ed3e2c988649598', class: "lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '0d0d38e691d763189c88ae803f9b02523b362ff8', type: "color-white", href: "#" })))));
+        return (h("div", { key: '5eca7ecd4f36c805e14973af64b20867b0354eba' }, h("div", { key: '3896fcc0a5a184de969d521132bcac78f9372654', class: "container my-16" }, h("h3", { key: '714d83271de13b290885b365ca911ea202aab604', class: "f-heading03" }, "Coloured Background"), h("div", { key: 'c80218b00edd13614c82e41f26316efbfd8e8b4e', class: "coloured lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '406c7fab328969d4fa7663acda6771d8c447807b', type: "no-bg", href: "#" }))), h("div", { key: '2788972ad7f53db9f2a8ab23a458055e28c657fb', class: "container my-16" }, h("h3", { key: '1abeb7a38b87517f9fa4bed9e047dfbf3ea84aa8', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'af8a7938a847e36d577dea7120e97dd9cf1b4343', class: "bg-default lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: 'b8dbc675fc435a322f1b93ab14224df17ccac7d0', type: "black", href: "#" }))), h("div", { key: 'e4068eb7d86e04c6ac3da79ef44fbc577083ecee', class: "container my-16" }, h("h3", { key: '44ffa680543f41764c478e43828c86116d3dc059', class: "f-heading03" }, "Dark Background "), h("div", { key: 'ae0c8d9dc9f563af9b756f9112847bae88d82f2f', class: "lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '5f8d4e32308c9c7e9f285a39b9cbaf6cf4104ed6', type: "color-white", href: "#" })))));
     }
     static get style() { return LogoVariationsHorizontalStyle0; }
 }, [1, "logo-variations-horizontal"]);

package/dist/components/logo-variations-vertical2.js

@@ -13,7 +13,7 @@ const LogoVariationsVertical = /*@__PURE__*/ proxyCustomElement(class LogoVariat
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: 'fee70336cee863d905a6537392f1ddf6bda1d449' }, h("div", { key: 'f04e0928bbd1875982190f5fe685c43a0e712704', class: "container my-16" }, h("h3", { key: 'd10318ccf82f90743af6279afea3afa36ec411dc', class: "f-heading03" }, "Coloured Background"), h("div", { key: '06cca782bfc5564172c1a745652c66d5304ad9c8', class: "coloured w-[200px]" }, h("eds-logo", { key: '175bbd4acc1b184e8d372b78246524b2d4ae6758', orientation: "vertical", type: "no-bg", href: "#" }))), h("div", { key: 'a7eb431d1ee679bc8c28aed0932325c99d4e0798', class: "container my-16" }, h("h3", { key: '0a5d4e193f9b8e36c81beb5fcc81eccaa2433ee9', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'c2d6c02f46629f32155bfb0ef1eee7522cd4b6c1', class: "bg-default w-[200px]" }, h("eds-logo", { key: 'a97c323c7af4c98fab5da6721450b80e2c8d85cb', orientation: "vertical", type: "black", href: "#" }))), h("div", { key: 'ac99317a56b7ce01f324efc3423593a20164f932', class: "container my-16" }, h("h3", { key: '908f915f49802906b1d0d5cb008ed4cdb3b5a68a', class: "f-heading03" }, "Dark Background "), h("div", { key: '94e25cd1734ec0ef18d3742f908a08ceec50aa6f', class: "w-[200px]" }, h("eds-logo", { key: '7f74de4532f6696e7168f0fc9c5dc28afed91f98', orientation: "vertical", type: "color-white", href: "#" })))));
+        return (h("div", { key: '82d99f40e7360943ca9a2df59dc8a9db4a22a83b' }, h("div", { key: '27ed1ecf7a6a161244c3b2d1c01bc5196e15caac', class: "container my-16" }, h("h3", { key: '62363c39920cefe5086a934f36dbc9a684f3984b', class: "f-heading03" }, "Coloured Background"), h("div", { key: '8577199e6f5b9c6f97afc31620513805d06e94c6', class: "coloured w-[200px]" }, h("eds-logo", { key: 'd627ea9deef5766a160e1b97f129e2b0000b1b62', orientation: "vertical", type: "no-bg", href: "#" }))), h("div", { key: '8d7565fa14e8eabd6e44295b530600ba20c24820', class: "container my-16" }, h("h3", { key: 'f071d16ed3f22bb58401c493594b8d919f9a5698', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'bd6abebec1b49aed0dcf5cdafda0790b137b6b3d', class: "bg-default w-[200px]" }, h("eds-logo", { key: 'be68411a8d9e75e0c78d440635631af2f449e4cf', orientation: "vertical", type: "black", href: "#" }))), h("div", { key: '2cd4a5fb78b387bfebefeb57880d308b9e3cf96b', class: "container my-16" }, h("h3", { key: 'f74c7d823aae3ed352db73ec288b32110db9867a', class: "f-heading03" }, "Dark Background "), h("div", { key: '1a47847d582e18ca35a6b3cf76bd1e21f1dbfac2', class: "w-[200px]" }, h("eds-logo", { key: 'b35710d4795dd179a9dc0c007a2a477be3891984', orientation: "vertical", type: "color-white", href: "#" })))));
     }
     static get style() { return LogoVariationsVerticalStyle0; }
 }, [1, "logo-variations-vertical", {

package/dist/components/logo-wrong-usage.js

@@ -11,7 +11,7 @@ const LogoWrongUsage$1 = /*@__PURE__*/ proxyCustomElement(class LogoWrongUsage e
         this.__attachShadow();
     }
     render() {
-        return (h("ul", { key: '3b7b6626be122a983b8e75560519c5cf7e31140a', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: 'ec2af2fbd7ca5fe85b15be216bec42a9289b40f1', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'cef460808c414cc1a14e380d7862523e9d53b214', class: "example" }, h("div", { key: '759ea5b73ced15cf2caef3566f2f1fdeb2122612', class: "bg-dark " }, h("div", { key: '9d0b7aef45f578f1c6e0d84f80583f8116688cf7', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '223611a3bedea685dd1904922f472fee474ddf11', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: '49e6907610dfaede93ddf179dafbc93f340832ec', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'f11f675e9b002bc5d571907faeabfa7c8a2ea4f4', class: "example" }, h("div", { key: 'b63ab2771e06f9d56c1ae995be5b23612b670e6e', class: "no-other-color p-16" }, h("div", { key: '91d331a3fd50976496cd9eff08e5150d5fb8c368', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: 'b34ec2c20218499972367287e730e3ea75d94bb2', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '20d1babcf42bd66e56633f78e5e7a38689b1c831', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '057c8a11c93076e2b9663baa49f101f90c3007be', class: "example" }, h("div", { key: '767471f768d48de8a230dac229f86a751590bfb6', class: "bg-light p-16" }, h("div", { key: 'd5e807d0cdea5958b0c2d93c3207924616fece63', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: 'c357e9516bb82a3f431270c56a23fd614684d126', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '789d0af543f4ccc9a270c3a332f1dcb2dc79b77f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'a5e0d0a85a4e1656a0e7d01dc41f59711971b403', class: "example" }, h("div", { key: 'a7eb16e39e2f954e42f5f8c0c2ed152fb53f7c2a', class: "bg-white p-16" }, h("div", { key: '46ec9c3b424cf4661cda4adc31989a8c355376d4', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: '2c7e8e98a0306d08f30e857e5476703993ffda2c', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '846791ec992abd3f0632070cb09d9ef3dcfa67b7', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '82fb8f93a6cb8789bf4a56e589975ad353bc88c2', class: "example" }, h("div", { key: '8c7e30c775364fa1d79b118e5aff5cd1e883101f', class: "bg-white p-16" }, h("div", { key: 'a18af5ffaba038fff7a442ab626f783a8a1f08ba', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '8ad738506d45e065ad5c96df9f5bf569a632e446', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: 'f556f0d638d48bcd95d0cc198e0408bb109cd92f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '153d0704622a633e8937bb0a481941cca7446a8f', class: "example" }, h("div", { key: 'e4d9e874f931413d924635432df55de18d329f2f', class: "bg-light p-16" }, h("div", { key: '2435bddf3af2928878338793e895cc080b7e1f7a', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '64c46cd279b062ab87ce34187bd979c58f1c9312', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'd28391400911e4b8481a707a197915d2f9fffbf2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '4aa8af822ff81bb7313145ccc24dbb79a7041f26', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '63fc69af51c57497cde82c7377dc5cc56bcd264e', class: "example" }, h("div", { key: '54029b8e273baddb810ea869b341a66f0b9a9e9a', class: "bg-accent p-16" }, h("div", { key: 'd82bbfa6ea877ec8af75230093548fffd086b1b4', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'f12f0cd6baedc08020ebd206c1c5c2fd8a6c7eda', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
+        return (h("ul", { key: 'bc42810801b7692a7cce35d1b3d44ae70bf79db7', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '5961e3d0148ddfdb9d77c72c5cb8dd6733cdbc1c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'fe06a82d62bb7bedc6880991c45c099c1e4f913e', class: "example" }, h("div", { key: '3f851373000c1b0cb1ecf0c42add9eef09d7e969', class: "bg-dark " }, h("div", { key: '2cdcc5b3419e5a9bdfde2c6ebeeafe482b060808', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '027a7e9000a7b0e18697e1add62fb52bc340e56d', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: '37821295b19c46c6bd23f75ff090f42513f2c52a', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '7f4fb4c6e94d1cfa0080bf4716d386a64cc588a6', class: "example" }, h("div", { key: '9b580db406baa9ab882042693238d96db83099b1', class: "no-other-color p-16" }, h("div", { key: '6c1b3d0668acae7f1542fddbd83444c187f8f447', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '644fb68b648f330c80ff295f9a4d74924b44e5dd', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '651a9bf67507fdfe1289d1afaced18bdc739313c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '211ca59ce2d0760a752fa2fd087a43e9b61bdd9b', class: "example" }, h("div", { key: '526628247fe9587785c79bef6e16630a988a2af9', class: "bg-light p-16" }, h("div", { key: 'fd9b59d40e805902bd628a04525d27fcbe6d99b1', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '97e0a604d08be01ac7956fe284f2325a680496d2', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '23cf6c4f70ededbfd3347f31adc749e4e411c5b2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '5d1702074e065740261bb7a86ce18139c2336dd6', class: "example" }, h("div", { key: '1b0fcc5f673339bf8ac84ed317ba4c214f5f2618', class: "bg-white p-16" }, h("div", { key: '708f276b908ee858a634034a0a9d025fe3f0515d', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'cb99b28a2154bf90565480386d8b3b67de0b76bb', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '96f8a61f549c8e83f8a81bfba629a40eb26716a9', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'd1cf64b340f6551e4f4a8189c355a22e95d8b3c9', class: "example" }, h("div", { key: '264fc7c03ad4b17a9631d7ede8714f4e91aec931', class: "bg-white p-16" }, h("div", { key: 'a39c949f0b7494bfc08d689e21f84303fd9f9327', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: 'e1b264ef7f8b68fd0dd0f9271d26db65c355497b', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '3dada86d19486aefe9970a5555caa14e2abaad8f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '973e204cb94bda151712b413f38e5a03df46ffdf', class: "example" }, h("div", { key: 'cc9f9d40a9736663c426a9bea6e3060a847a9be5', class: "bg-light p-16" }, h("div", { key: '60bde7eea395d1454e2f9a47535b92752430043f', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '9469d10927d103ceb37b8b192ac220d53db06196', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'a4cdf1201a61559fed04eef9c20511a242ba0306', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '6fbc736e477be9d0952053abc687e9b08dcba324', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'ae655c9985d173716e6c0ff62683efa887998910', class: "example" }, h("div", { key: 'd1597bb34428986cf534ec74cedfa5656b6fe1c8', class: "bg-accent p-16" }, h("div", { key: 'ed43780afc9ae3e9f85c8168f1182be9a29b36ce', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '1232c6e2018bfc9cb6fc39d076049ce9cd949775', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
     }
     static get style() { return LogoWrongUsageStyle0; }
 }, [1, "logo-wrong-usage"]);