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

package/dist/collection/components/eds-switch/eds-switch.js

@@ -0,0 +1,131 @@
+import { h } from "@stencil/core";
+export class EdsSwitch {
+    constructor() {
+        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)));
+    }
+    static get is() { return "eds-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the switch is checked."
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the switch if true."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "labelOn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label to display when the switch is ON."
+                },
+                "attribute": "label-on",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "labelOff": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label to display when the switch is OFF."
+                },
+                "attribute": "label-off",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the switch is toggled."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/eds-switch/eds-switch.stories.js

@@ -0,0 +1,38 @@
+export default {
+    title: 'Components/Switch',
+    component: 'eds-switch',
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'Indicates whether the switch is checked.'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables the switch when true.'
+        },
+        labelOn: {
+            control: 'text',
+            description: 'Label displayed when the switch is ON.'
+        },
+        labelOff: {
+            control: 'text',
+            description: 'Label displayed when the switch is OFF.'
+        }
+    },
+    args: {
+        checked: false,
+        disabled: false,
+        labelOn: '',
+        labelOff: ''
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-switch
+        ${args.checked ? 'checked' : ''}
+        ${args.disabled ? 'disabled' : ''}
+        label-on="${args.labelOn}"
+        label-off="${args.labelOff}"
+      ></eds-switch>
+    `
+};

package/dist/collection/components/eds-tab/eds-tab.js

@@ -30,7 +30,7 @@ export class EdsTab {
         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));
     }
     static get is() { return "eds-tab"; }
     static get properties() {

package/dist/collection/components/eds-table/eds-table.js

@@ -1,3 +1,4 @@
+import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 /**
  * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
@@ -98,10 +99,24 @@ export class EdsTable {
     }
     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;
@@ -141,18 +156,16 @@ export class EdsTable {
                 : 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' }, this.searchEnabled && (h("div", { key: 'f1212a4e515a1db218df28b71367c6ffa42e3063' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        return (h("div", { key: '66ca59804bc8054655ed0d942104516fe4cd259b' }, this.searchEnabled && (h("div", { key: 'df7267fc443da042e4b6ff81ded5800a2213bd73' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
             // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'da6ac91e4b4d56780b044a3d35088e7722efe143', class: "mt-20" }, h("table", { key: '3c5734d2370b31d2445ed4f043a80bf87c6d4bde', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '3803a39b4c987ff39bf22e2567bd1bc3d513e1f4' }, h("tr", { key: 'a67fa7bdd48549c69cfa9721083a908ab036a559', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: '80ac1fcb3802f9f5d5eabe016fb7345b88908b36', class: "mt-20" }, h("table", { key: '09acf39378b1a4c8bfe40b496ec6bf71a2d761ca', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '8b844806cfef10d1a59da54a385ee8ed6c167050' }, h("tr", { 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` } }, column));
-        }))), h("tbody", { key: '8e3f21bf2ee5b1bd84cfa93411ca2671f43ced45' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            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 - 5}px` } }, column));
+        }))), h("tbody", { key: '93dfd3abd196779c288f85bb6a357ad3e9c01418' }, paginatedRows.map((row) => (h("tr", { 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("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '24931f257ef9ced394c1b5b1e589cacedd8035e6', class: "mt-20" }, h("eds-pagination", { key: '996b26ae090ee4fe08cc821fb11362d94879ff72', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            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 - 5}px` } }, this.renderCell(row[column], column)));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '516b65d78a9ea91060c1dfcb3306bbd3ac2c6f58', class: "mt-20" }, h("eds-pagination", { key: 'abe3a593827d99437a06e204ea9d8ef92f80aba7', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-tag/eds-tag.js

@@ -30,6 +30,7 @@ const tagStyles = cva(['f-ui-05 py-1 px-4 border-2 rounded-pill'], // Base class
 export class EdsTag {
     constructor() {
         this.label = undefined;
+        this.ariaLabel = '';
         this.intent = 'default';
     }
     /**
@@ -37,8 +38,10 @@ export class EdsTag {
      * @returns The rendered HTML for the tag component with the applied styles and label.
      */
     render() {
+        var _a;
         const classes = tagStyles({ intent: this.intent });
-        return h("span", { key: '546bd7eb2c78760edc12cd7bb3ede5f6ab9099f3', class: classes }, this.label);
+        const accessibleLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.length) ? this.ariaLabel : this.label;
+        return (h("span", { key: '6a517f42aeb641c95d96ecd6c3090a317a3195c6', class: classes, "aria-label": accessibleLabel }, this.label));
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -71,6 +74,24 @@ export class EdsTag {
                 "attribute": "label",
                 "reflect": false
             },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional accessible label override.\nIf not provided, the visible label is used as the accessible name."
+                },
+                "attribute": "aria-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "intent": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/eds-timeline/eds-timeline.js

@@ -13,7 +13,8 @@ export class EdsTimeline {
                 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 = [];
             }
         }
@@ -55,7 +56,7 @@ export class EdsTimeline {
         }
     }
     render() {
-        return (h("div", { key: '29e360adb412c67e7516f04671c276a12197d830', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: 'c556578a505bfb2da435616cb1f39cb91859ec7e', class: "relative" }, h("div", { key: '8e1d307b2b3b470c643ba992d8307457581e9d4f', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '7b40b6a8944aad01d01524e13056fbafeaa8a8a8', 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/collection/components/eds-toast/eds-toast.js

@@ -26,6 +26,27 @@ export class EdsToast {
         this.duration = 5000;
         this.visible = true;
     }
+    /**
+     * Lifecycle method that sets up the initial panel height and adds a resize event listener
+     * to recalculate height on window resize.
+     */
+    componentDidLoad() {
+        // Emit context for each eds-button element after the component is fully loaded
+        const btn = this.el.querySelector('eds-button');
+        this.emitContext(btn);
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given button element.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
     connectedCallback() {
         // Auto-dismiss the toast after the specified duration
         this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
@@ -39,7 +60,7 @@ export class EdsToast {
             return null;
         }
         const classes = toastStyles({ intent: this.intent });
-        return (h("div", { class: classes }, h("div", { class: "flex items-center justify-between gap-4" }, h("p", { class: "f-ui-01" }, this.message), h("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
+        return (h("div", { class: classes, role: "alert", "aria-live": "assertive" }, h("div", { class: "flex items-center justify-between gap-4" }, h("p", { class: "f-ui-01" }, this.message), h("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
     }
     static get is() { return "eds-toast"; }
     static get properties() {

package/dist/collection/components/eds-tooltip/eds-tooltip.js

@@ -1,3 +1,4 @@
+import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 /**
  * `EdsTooltip` dynamically positions a tooltip centered above the slotted element.
@@ -14,9 +15,17 @@ export class EdsTooltip {
      * 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.
@@ -81,7 +90,7 @@ export class EdsTooltip {
         }
     }
     render() {
-        return (h("div", { key: '5edce5e2ca66ef992ad22604a5017e5ab02f846b', class: "relative" }, h("slot", { key: '74c9ef5978e023a45eb9c25c18f95f1875c19b13' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '4cc3ea40bd81308eb7685b5c1065e8bd30f99191', 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/collection/components/eds-trl/eds-trl.js

@@ -14,8 +14,8 @@ export class EdsTrl {
                 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 = [];
             }
         }
@@ -31,18 +31,17 @@ export class EdsTrl {
     }
     render() {
         const apps = this.getParsedApplications();
-        console.log('apps:', apps);
         // Map applications into table-friendly data.
-        const tableData = apps.map(app => ({
+        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", { value: this.calculateProgress(app.currentTrl) })))
         }));
         const tableConfig = {
-            "Application": { "format": "code" },
-            "Current TRL Stage": { "format": "text" }
+            Application: { format: 'code' },
+            'Current TRL Stage': { format: 'text' }
         };
-        return (h("div", { key: '71e903734b5cd1ef74bf93e8fcdc57afacb51f07', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'cb8e4324c9c8481dcc2daf74f06c6928257e6f8b', 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" })));
     }
     static get is() { return "eds-trl"; }
     static get properties() {

package/dist/collection/eds-docs-ui/colors/color-palette/primary.js

@@ -33,7 +33,7 @@ export class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '581f0978ebeda33a156d2baf3cc41a10897da1cf', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: 'b9b1f4d9c692d3b6f80dd5e50f7c840ed2dd6139', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-primary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/color-palette/secondary.js

@@ -58,7 +58,7 @@ export class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (h("ul", { key: '7f2e8e7efa207bedaa1e19c0f7d87459a5c22693', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: 'f3b7eccec4f67008e8ed73c1a0ff23a542e3c516', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-secondary-palette"; }
     static get properties() {

package/dist/collection/eds-docs-ui/colors/color-palette/support.js

@@ -49,7 +49,7 @@ export class ColorSupportPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '6cd3d5f3128a49e9ac77abc11f46ca880bc6c195', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
+        return (h("ul", { key: 'bef8701ffa7aec7ea1f0f21a2dfbe1157647bb0a', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
     }
     static get is() { return "color-support-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/gradient-palette/primary.js

@@ -33,7 +33,7 @@ export class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '922dbe263e6db86ed17d98d65d38e1d6f4ef25df', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '783eb92c379de99659e65e7cb02a1f0ca9df8758', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
                 background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
             } }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16" }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }

package/dist/collection/eds-docs-ui/colors/gradient-palette/secondary.js

@@ -57,19 +57,19 @@ export class GradientSecondaryPalette {
         ];
     }
     render() {
-        return (h("div", { key: '29353679b15fce11ec2e357704cffd6a2d1389d4' }, h("ul", { key: '7a262e1c8f17226c6639a00e1829d4f0927f988d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'f3dfcbe6da3ee882ae9100f95fe68788cd82195f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '83e3ac5d6f64e18e38e179251d58ff3ed23019a3', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("div", { key: '4bb98c83660ec855ba6b7faeb83386450c27f5fd' }, h("ul", { key: '55b537cacdc2e3df835615e1658f82810633c485', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd2f0d5c21e96579ef9a29540df473f821e2b29b6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e29f3000a3ee702caba1e1867b5d63be74b0d657', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, h("div", { key: 'ebc2424dd2950cc2704351456d4d974051e0dd93', class: "grid" }, h("span", { key: '3fdfb110070a8795a1bb1aea12447bc2556937cc', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '0b929d1ddd40e67bc8cd0248fc7bf0c0f8a11cb7', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '3f4ab8d6b91afeaba20c273b8ede74593d452bf0', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '80b6a23a151e6b71630071f2d51c03e6b8c957ff', class: "grid" }, h("span", { key: 'c86531490e51f5559d4293bc75bb2477d23d1593', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '5bbc4e02eb2845508c6de7715f5fe202a36249a5', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: '050d2770d4c2e6395dc5350c9f29860ecf3d7e46', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'b1337194dd634b5820cc33707958fd0a2e0e92a6', class: "grid" }, h("span", { key: '0385f9d05575613fcb99e8e01ee04c427ba66a8d', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'bbebf9ca89b0972376225d1708a356777dc6fcca', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'cb70085fe98e4c3e9f535e626b386b1c51b26fc8', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'cfd3721992823321bb75c0e544b28fa13cabd7eb', class: "grid" }, h("span", { key: '00834f078742102f17dfa76a6ab024b0ccbcb7c9', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '35d7c496211ab03ce17e17e839c27bcc5a9ef56f', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'baae2cbc6859b137a8588b0e9dd56d0c9e3c3acd', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, h("div", { key: '20a5a6748573d6e059ec81d00a737355cfd7f934', class: "grid" }, h("span", { key: 'a63a0ea4301f11e4984f3749c087041acedb94b4', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'd986ecee52e15de1bbd58c48109f8c89d0cf19a2', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'd35bb3c1cb26aa9a3828cecfde1b32f428e8b1af', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8a616b789a99d3721ccc1f102131c2aba1951106', class: "grid" }, h("span", { key: '03d172bbc56a4535d20051bb2ab1bfb4c0889586', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '66f1656d1d41f1616175285cf8f7e7089c9f2657', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '85a7244a69f0d3af26ea5f148917183e2431140e' }), h("ul", { key: 'eb44b6b21fc75b1fd22e1aee42fac1aa99155b0d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'ecb50392387996034d1f4211d5336d2071927844', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'f45bf292bf11cb440731ff7bc67e5b364cb7b6c1', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '55e3d9d0ce260c574da96b4775ce5f3e3e7fbaf0', class: "grid" }, h("span", { key: 'c29acb597734c8422532cb303af1eaf04be73bbb', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'f1d9139118ce788e0c59d0fb7e8304b8d2ad2b6b', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'f8d92e3e205baf3c60a776ef6928da3f45682397', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '09c594d5fe6a642bb0b8dc813911516cb933488e', class: "grid" }, h("span", { key: '62caf5d0012613e3ce291efc0539224e20da2180', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '6a6ced363a3b8a3c05298fd82ab9b7ec81d580f3', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '126929a680751e2028b373be442814d677911978' }), h("ul", { key: '522cc84b4b8e1765a97c08927d640981e0a37328', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '4db01022fbe75477a88e7c8e7474e431c126dd63', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '92c1d309578f357745dcde72aae7c54b48d1a378', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '981db4da9bdbc0f60ba6e8fd83840101a815550f', class: "grid" }, h("span", { key: 'd6aaf058991f0d7e1c4d5d7bfa17b0342880cb9c', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'cd63d8d64b9fa30f7a568125f61d3735c3596f0b', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'aca8d6c9668168c6d4b71cb5039e0af4cd419e30', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'ed16477727fe22372cbcd730c4e9cc67f5b35ed8', class: "grid" }, h("span", { key: '4b6989756eb826d93b5b7d71e874f62914d221df', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'a4e3d7e9f3582a0fc5dfabbfc9feb5bb969c2933', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'd23b28073abf3c16b3f8d58744fb5f66877cdd94', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'f789570aa4141bd4dbdbe737fca7a666beb5e635', class: "grid" }, h("span", { key: '2d3840caf5ec39e08271b4400f9ce0e425bc796c', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '41cd0250155a4d8413fb5b35677c6121c3539ab3', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'c36680567bbfd9085b2151748a4dfa7e557925d8', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '14241bc8d0354da8eba7fb06eafc6841b182796a', class: "grid" }, h("span", { key: '97bde70e3d904c55fdf1e7d8b13aff954b905644', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'c5734847ceebbcf235c058c7987415cd47bdba86', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '0c016fdccdbb1c372b28da2c47eacbbfb7af32a8', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '1c96adb58e67d7cada4b4ba382ca2fcd37f0dfd8', class: "grid" }, h("span", { key: 'beaab441ab5852d1141b509a161123ab0f743e7c', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'd2e57f4fd72ff1ef9c84f27e81c8c6b03ec50f66', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '48772cedf0b4ad119e14696e58203efce7bb3559', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '0e233bc33432cdd2149ab20b64464d03de22bcef', class: "grid" }, h("span", { key: 'b0f41ae03bfd3bedf2ebd60b6a4b30c677395da0', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '433f30e367352cbd24668dac2ecf741b9f81febe', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: 'a862789d835c146d140b634782eefa7b48139597' }), h("ul", { key: '9fe132435b11fa93057df3d747dfe36f04bfd997', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'e8438aedc62f4d0195a3c4c1c714ba99c6f7b67f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '9928ba20be7b9100e437345a4c5b03bf6d495707', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '0d34612dbff071b4abd0aa2e0b89885ab1088a60', class: "grid" }, h("span", { key: 'ab9628602287dc6543c086cb6b34dd22d40af58c', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '7ca06f7d0801cf664762b274815747e75023b596', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'a910ecaee2d78c6be8af632b497a4fe2d9651a9e', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '420889ad4cb54cd70ed3d10053f836e0b226eee6', class: "grid" }, h("span", { key: 'cc92bf72e7dd47a8d492ef263c46d22c7f5b64b2', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'd740c9446d7521e4b6f3e049149d687c74615493', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: 'a6c5dea6ed19042213dcb8c0d12cb3120078c284' }), h("ul", { key: '7eede8a017fc381b57f07c1d3c4cf62b4b9a7f63', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '1202837ab3483b3cb9dd71992e71ea59594596e5', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '5280e99341777daa28196e0be215f58b64d5be37', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, h("div", { key: '1cd2d6a8ec580b4094335d3c56acfbb398a96c28', class: "grid" }, h("span", { key: 'dbbd548a12bcc861526309132e685a97714de1d5', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '93d38512e45747e4277169ee3221c36f96862f29', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'b04c9679ea48bf89e70cc969ecd42984ce3c7286', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '4a6130bdeb963c9674100528e2ef24a2245acbab', class: "grid" }, h("span", { key: '7f49f52d514e36d7886a1aecb3c92c7148dcf595', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '0d9a53c5262183a24114f762175f1d9fe5299950', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '26a6e6ca4a67e5ff01d4fcb75e40fdb1456ca62f', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '0a29d5eba0d80789df6e2df892f72a210558bc5f', class: "grid" }, h("span", { key: 'b53837c45946fd2a2e2f44d1ed6ffe86fa15de5d', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '236bb0f5c879da738a5b758982262ef23537e863', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'ae5ed445fb1a5203745d71b9507cc1247c244d95', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'b1ee585cd3ae08d506b42e435e00f885b49f8994', class: "grid" }, h("span", { key: '35c51bc7d60ba9fde2b6eac0ce035e0aceaad92c', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: 'c8796f41fe7ef23bafa9139c19b0807f712a8382', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: 'e849871809560f669619b23a695f20103d5872e8', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, h("div", { key: 'ff5052b9aa74a3edb7d3ba6d1c75b9073b969b31', class: "grid" }, h("span", { key: 'b69e9f4646835b689fd46c6f84b8b35dba1500a1', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: 'a459cc1600cb4072e6d1cfbcae75d17cf14fbbfe', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '55f9185213f01a7891a4e8ff54f4f26759370ef8', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '2f3bbbcdf402f0da4bade772b3cadb1b8cb3370c', class: "grid" }, h("span", { key: '818372e4673ef5c8e35085702a559b744a5cbe8c', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '2bc994826618735b82fd93fe039328a2ff4f6f95', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, h("div", { key: 'ef1de66807f52f07f65dcdcebb82db99e4488e96', class: "grid" }, h("span", { key: '60e08fa96458ca4e403ac7f44d57fa68c5bdcab8', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '8c0ca774be1ff12054bfb29ea2b56c12b776f84c', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '2ad43b9dc6d62df3ed3e057262aca05558781f50', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '6f9ca87ef408575620079ca088ae00252cccd0fc', class: "grid" }, h("span", { key: 'ccd038680073b25d8584f06fd1baab655cf6125c', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '8705f39198fa91da2b26d334dc1c89cd9f511492', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
     static get is() { return "gradient-secondary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/gradient-palette/support.js

@@ -49,11 +49,11 @@ export class GradientSupportPalette {
         ];
     }
     render() {
-        return (h("ul", { key: 'e5444717497402cac34586943ffd10abd2e77148', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '84f6b65181b6f2237b7ef261445a2e58935975ab', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b9eb17a05b1a479e46adf3908ede6d2a74e47e91', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '74cb2cf74997cf993557cbf06158578a45439965', class: "grid" }, h("span", { key: '29c00a82880aff024927e29c95fde61016553d5d', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'db89f95d9c30eb90ba6d7f9cd12c793f8a500b00', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'd050e9d7910ed8ac88f4f791a2c8a1edaadcb0ac', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd2b688154a3d1f61df4dcc1f735eae9747011d01', class: "grid" }, h("span", { key: '2a204759a52f881b2d6b0d40116bf00bbda3aed2', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '9023f33ba5182558f12dfb119ed4338649638bd7', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '55a4cf54a4dbc1b5c7f9962c571cbb971cba0d93', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b4190fda8834ddfe5e53e90d357cc1835e7d16ce', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'cf5415f31d46d7a966fa3da040aec720c0241673', class: "grid" }, h("span", { key: '4fb475890391784e8be7c40d0c74c02a492739f7', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '02f5bd1fcb7be45141963bb1d723646195978d49', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '781791e59a86c8687d9afe6d729161acf05fc9dd', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'dd84d9b36892ff47481babfb2fbb8a9082f43219', class: "grid" }, h("span", { key: 'df5ef60b6866f46bafcd93d8f82498090102a520', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'a8cf80fcb9f7fef12daf32055c61fdb33ee38d67', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '2ed0376ad5484fadac08c530450e993fa6145328', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '30ba72591ea4537407b2220a85a961fce0fc54e5', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("ul", { key: 'e1b86872cead72320e3e4cf6cd22e672500cfcab', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6a39321c305bb9c0f4c79932252faf0c08fd11e6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '255fb9153e49030054666f086b2e0ac4d6d3dc0e', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: 'fb08851f97cefa4b06a00f7063b558607f5df19e', class: "grid" }, h("span", { key: '4a8a0dc633cca7c36e6ca981e6b85775005ce80f', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '0bebfc5eb567e030e993037f527df3af46615ff2', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'aa06e607647a762ed7150a5aceaeda8c7854a050', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '5c143dd4c8afff2365aad02f68d444fd2234d90f', class: "grid" }, h("span", { key: '47c9334efb42ee8259033bf1a323519d0a048bc7', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: 'bca6d9635f5bcb16ef54154b2d3a2b6734cef7e7', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: 'e78077ac00556ec5faa7d0ec7e3dc2b9ae7643f2', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '10f182a6515a0006f3903dfcf783349870c2e6c2', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '4ef41025e6e2bb0ebe05933f7fad707c4136c852', class: "grid" }, h("span", { key: 'c2b3c48904efe628b148e080e1487dc8fba70b63', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'ae12e16d9a070b29492a385ff21b6371b9826f85', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'a6e980da23e2c5d0312a9d1a12432388fbba1d56', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a38408a780756f4e81c8d791e52eb87056755eaf', class: "grid" }, h("span", { key: '0180f83000b733914c33696ef4b6d7257efba396', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'fdaab526fcb07f4a58e4daae616da144c2f46666', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: 'c771a8d62610c7255835896fe678136838c05235', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'debe404f676d76d4ee6e0bf70fc1fb596b768a72', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '641ea920703268846558c852fe087fa9546e14b7', class: "grid" }, h("span", { key: 'f672422e13deb40e9dfaddd6f9855b2de28eab5b', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '008794c76fb2713438c198c914e718efbbfc7b5e', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'ee1cfa3a78f670c74e00e96b6415f85715334526', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '295c044bb9cc9ed3a85bb488225db4401f0ea542', class: "grid" }, h("span", { key: '9d7dbf15fd44ce3d3e45a39324ad3a60d7ae30f0', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'd639d12c3215caf3f4f1e8a4ae062b540b6af50d', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '04e95d8b1a6f7dcdbc465263382e36d05f79d602', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'db1beec1c3ad71ef5fcacaa0d14618acc01666f4', class: "grid" }, h("span", { key: 'cc6e9c599d26813756dc0eb0c240169ea5b2856a', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '9f45b4ec7cd579040a135f63aa3b7aadb8f10ada', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '2ce58a56fcfd1a3b8f7855296c929c37b634bfca', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd494a074655c8bcf35d4021b700eafcd9acdfb54', class: "grid" }, h("span", { key: '626ae49228b52ff921b5ce2bc15b12a540618691', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'db8c4d3f246851fd18794e317d20f1a1f9be59b9', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'f27de0de4bfff2bc26ef573a11b770f55f461425', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: 'e67079bbbdfa1853a2f069f08c52a8388cce688a', class: "grid" }, h("span", { key: '43be6b7785066c0d51aa87e987fb672a758de8bb', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '791e968b11a9dafefac8fe0eda01b04ab4911802', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '5831fd1e75f8ed0d2edc29fbc439389275adf59e', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '09329acac8fbc33edada7a7c10c675631a240ea2', class: "grid" }, h("span", { key: '42f70fa2578b40e189b95cd1d4c56ccd84cdce69', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '2b8dfefd1e2dff08aa17b234a04cff60e3eb9d7a', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: 'e3a39fb7ad23526623bfea88cdab8d320847365d', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'cfde16c94675c5c9b510e3752f875655c9d098e2', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '1f8a8bd2e746c187323841ced84eec52d2c2f2f1', class: "grid" }, h("span", { key: '920fc68ae73790a37c927dabf687ccaf5e248841', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '40205cf5666e6ba44ca07a09dc08e54f2f9cad56', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '8a855110b362569cc9926a09772d12f133aa20b6', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a69c90cfac79b0a7ba5fbd921117a12ce997c228', class: "grid" }, h("span", { key: 'bc06aaaaececad3b81e4884380e17fe773f97570', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '15baae3dafc6b53322e1a67956af1f533ea402f7', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, h("div", { key: '386d0e341c37f0baef2c62a13fcba88640b5ec3a', class: "grid" }, h("span", { key: '5b5f541490612b70841e2ea62bad3b8f86587301', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '88b7fd61a6fe4f15bb37d067e8b9f28fe329de0d', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '7d96a904aa3703ffba953ede2e68aae605aa5921', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8a20e30b1c43b8f50eb8cbde0e735a54d4129e26', class: "grid" }, h("span", { key: 'd843ddf7b0328f99400c106e7705aed0626d2f32', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '57ce96cc38ae1f0b91f512841e0738384e543cb1', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '5d96a25dcd51b35b01952ebc94c75cfa1045b8da', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '713e347acd6ee623562db92a24b87a2f36086875', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: 'a62ed8e1fda6deb45b131c4d7cefe355862b33ba', class: "grid" }, h("span", { key: 'bb419133f1bfcd07f05d551a4dafa54331ee1c09', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '774de6f18b6ab9d5539cc6889949b7ef9a0511db', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '87d83ce275bfbba7a8930e1e0fcecf14dee2af59', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '4e4acde29f939b2e7b2d4925490da515b8bcabf1', class: "grid" }, h("span", { key: 'c2276899357a54e0be5d35fcb9cbc01257882a12', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: 'c78d9648c05583b858d75ff0f6aff57a62ff1628', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
     static get is() { return "gradient-support-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/use-of-colors/correct-use-of-colors.js

@@ -60,7 +60,7 @@ const red = [
  */
 export class CorrectUseOfColors {
     render() {
-        return (h("div", { key: '33f38f14e5b6e7271ae26608fb1a1ed0c7930c7c', class: "container" }, h("p", { key: '4857375e983add7d8e5e0a0d9896641774be018e', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '1c6bd69472074babf8f830fdba9be31e73afcd88', label: "primary", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'ae3429fadbea001f01731d3c15f28865d668a50a', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'd8c6b9ab88abbf6194a4fb26120244982b59c2c4', class: "flex" }, h("div", { key: 'fc7f854940caabb9e032999f51732b64555e96e7', class: "w-full" }, h("ul", { key: '99c6a2e47c683ac38f2a14feec80177c0cf1c174', 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: '91048e89cff083356c589c0f1bfecdd482e0c797', class: "w-full" }, h("ul", { key: '6ee69388227089a5224a6d249c8e1eea4efde128', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.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 } }))))))), h("p", { key: 'c0a8e42942f2655648aa2ec3ce74bbf8d043ba63', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '3f272298bcd7d0e6ad791edc408ef636349fbf7d', label: "purple", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '9a0b28f388483944aa4b053b9f8e807c1383431e', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '27ab1cdb936918fafe122c5a569c83322043bb79', class: "flex" }, h("div", { key: '037b9916ff3a3e8c2e9db64b650d44a57aedbcf9', class: "w-full" }, h("ul", { key: '60f4f6290b31a29852fb934c678edcaa61c8e930', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '36397292a31417703736b3be5b77e17241675dd9', class: "w-full" }, h("ul", { key: '20a9e6bb396c184c2718a18554eb1b4828817379', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.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 } }))))))), h("p", { key: '0b89819b9fce1dff39b06b70873d651b7a1c84ac', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '9b3e7d46ac8116ff5f47f895bb06e89cd49c4e03', label: "blue", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '94c3384e546bcae55d5634064a37436b4cdaab0f', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '7e3fe503559fa6865b824fd7f93dfdf8ed368f34', class: "flex" }, h("div", { key: '4ed98a3b92ba8b73e3cd67dec625b4b8dfb34ee1', class: "w-full" }, h("ul", { key: '0ccfd018568eb834ae05771976122736f5944205', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'd2cef9f5bd8ce7fb103e22a8964cee88853c1162', class: "w-full" }, h("ul", { key: '24301ce590bd1530316f351202bd76fafaa7dda5', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.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 } }))))))), h("p", { key: '748852527301ab6465b593f5f271dc6dcef9d198', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'f035467c04170412a1b06f05b8675b6be57e8aa2', label: "redish", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '6e4eb577c6582a160b8282b54a6edfc58f20926b', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '9209fd1ab3092cd21dd81a3328171c8de4fb8bca', class: "flex" }, h("div", { key: 'dc71b931a70fbd31a4f72814b23a1d97933bc721', class: "w-full" }, h("ul", { key: 'd3f6f25439b6fbc8e8c08b39bf46de9ce52482fa', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '78d64d48a72836043c53e485269402bf566a5d98', class: "w-full" }, h("ul", { key: '6eb824d03f4d0e2d3966963c899473e242b31dc6', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.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: '58274bc750821893f1ff6db6af0c92557e2037dc', class: "container" }, h("p", { key: 'f16ae70777dc595edb9f8ef20df33721816a472a', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'c98c49daddf43987002dd69ab1c00dffbae5e69a', label: "primary", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'e466f6f7e05f68896114551f59673c707d5fd30f', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '32dfc27beebbbab3949c7695293800a2ff552ceb', class: "flex" }, h("div", { key: 'e01d74cf63c84f66d868e180589b45cbc59ebff7', class: "w-full" }, h("ul", { key: '162e9c5ed57689a94c5c59e2664bba2adfcd60fc', 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: 'bb71abb645789030487eccdd0abaf9b223c12ec8', class: "w-full" }, h("ul", { key: 'f85702460f89881d6b8642decad848affdc7002f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.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 } }))))))), h("p", { key: '7b5b8b9c0013a91c97f24c239bde32a727695707', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '81dc2c31eb283a2f64a1fd32329b35b1d04afc12', label: "purple", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'd90877918d973595a7b8bdacd6bb80f1f04cab5b', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '81cf06bb6932b2120b210e7d1ee9d556cedc949b', class: "flex" }, h("div", { key: '2cc1571fe83620fcfa8f961af93b7b0e8e970eb2', class: "w-full" }, h("ul", { key: 'b6b1f7f874dbd8784a0253187438c2eb6282a815', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '49a874de125699d800aee6256bb5b3bf9a0bf907', class: "w-full" }, h("ul", { key: '10d41b5ab948c87c8db43fbddefbe3453c5384a9', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.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 } }))))))), h("p", { key: 'bc7c40435b87cd31b5bbb2315b3f50fa88b5bafb', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'd5a9f4c30d9108bd8c8207ee0130a15b9c7ff53f', label: "blue", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '35c2440f2c606cd4e8e69b33850ca908f6f36a4a', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'cf9dde65d107b20c67e0036e891ad37c1d685477', class: "flex" }, h("div", { key: '807350f20ee902df273ce35c217bcaa134502d13', class: "w-full" }, h("ul", { key: '8198d1e59cb9477978a0b78714e7884a75ce52c0', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'ed4f89cd3d5544a199d0a516e23ee877c16dad6a', class: "w-full" }, h("ul", { key: '47f8617629f34252b2d533f5932dd14b9117f601', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.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 } }))))))), h("p", { key: '7b99385726cda59f07b66ff99e050588d5778421', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'f3719f08484d40ceb9ece89474f473cf9e44ee53', label: "redish", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'f1ee0fbf78a5da5f6a7a0836f63cc3312f68a547', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '833dcd6ad96a0c36a127c5384d0858b879bf0b05', class: "flex" }, h("div", { key: 'cf1297f1dfed3e70c184cdb3f4e116292ce1e57f', class: "w-full" }, h("ul", { key: '9d8d9e0f78348cee56f6c91b3289a90f25c088e4', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '836dfd427a087ee512970bf52ee0612a24cfaa72', class: "w-full" }, h("ul", { key: '08e2b7603c2c093b2bd8931d1993aca89801ad1d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.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 } })))))))));
     }
     static get is() { return "correct-use-of-colors"; }
 }