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

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

@@ -1,59 +1,58 @@
 :host {
-    display: inline-block;
-  }
-  
-  .switch-container {
-    display: inline-flex;
-    align-items: center;
-  }
-  
-  .switch-label {
-    font-size: 14px;
-    margin: 0 8px;
-  }
-  
-  /* Base styling for the switch button */
-  button.switch {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    width: 50px;
-    height: 26px;
-    border: none;
-    border-radius: 13px;
-    background-color: #ccc;
-    padding: 0;
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-  
-  button.switch:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px #007aff;
-  }
-  
-  button.switch.switch--checked {
-    background-color: var(--green-500);
-  }
-  
-  button.switch.switch--disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  
-  /* Styling for the handle */
-  .switch-handle {
-    position: absolute;
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    background-color: #fff;
-    top: 2px;
-    left: 2px;
-    transition: transform 0.2s;
-  }
-  
-  button.switch.switch--checked .switch-handle {
-    transform: translateX(24px);
-  }
-  
+  display: inline-block;
+}
+
+.switch-container {
+  display: inline-flex;
+  align-items: center;
+}
+
+.switch-label {
+  font-size: 14px;
+  margin: 0 8px;
+}
+
+/* Base styling for the switch button */
+button.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 50px;
+  height: 26px;
+  border: none;
+  border-radius: 13px;
+  background-color: #ccc;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+button.switch:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #007aff;
+}
+
+button.switch.switch--checked {
+  background-color: var(--green-500);
+}
+
+button.switch.switch--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Styling for the handle */
+.switch-handle {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background-color: #fff;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+}
+
+button.switch.switch--checked .switch-handle {
+  transform: translateX(24px);
+}

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

@@ -16,11 +16,11 @@ export class EdsSwitch {
     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: {
+        return (h("div", { key: '624776d666ada7b31cb8e84b08380b888451b1a5', class: "switch-container" }, this.labelOff && h("span", { key: 'ced31e91b88f4cb032744bd846811dd012cb9dcd', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: '8cb4594687313076f18f30fc26062e1440ae0ab9', 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)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '88897b4368c337ea2dc4a017a8503171117a2070', class: "switch-handle" })), this.labelOn && h("span", { key: 'bb66f4fd1d09935598d3e9485d3cdf28e182620e', class: "switch-label switch-label--on" }, this.labelOn)));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
 /**
  * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
  *
@@ -46,7 +47,8 @@ export class EdsTable {
     }
     parseData() {
         try {
-            this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+            this.tableData = parseData(this.data);
+            //this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
             this.totalRows = this.tableData.length;
             this.updateColumns();
             this.currentPage = 1;
@@ -59,6 +61,7 @@ export class EdsTable {
     }
     parseConfig() {
         try {
+            //this.parsedConfig = parseData(this.config);
             this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
         }
         catch (error) {
@@ -84,7 +87,7 @@ export class EdsTable {
         }
         const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
         if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
-            paginationEl.addEventListener('pageChange', (event) => this.handlePageChange(event.detail));
+            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail));
             paginationEl.setAttribute('listener-attached', 'true');
         }
     }
@@ -157,15 +160,15 @@ export class EdsTable {
                     ? this.hostEl.getRootNode().host.getBoundingClientRect().width
                     : 400;
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((containerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
-        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...",
+        return (h("div", { key: 'b77c9a601d3c8c0eae3cf7754839fdf4ca9b3ad4' }, this.searchEnabled && (h("div", { key: 'a1e652ce7b75f17527b6d1c83968a3c50ee50e23' }, 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: '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) => {
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'fd3de252d0ae287cea5409c4e7f651fc557a8fc9', class: "mt-20" }, h("table", { key: '80f767759a6049fae588e150e0ff166db4bc20b4', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'd7c39c1b36c9e247896082647372125d7cf11680' }, h("tr", { key: 'f32ca0941e118f89934c44dcad77a27880ea9e53', 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 - 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) => {
+            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 - 4}px` } }, column));
+        }))), h("tbody", { key: '85a9c3e55d12c6f62f0175613a4ff84e703dc4c5' }, 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 - 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" })))));
+            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 - 4}px` } }, this.renderCell(row[column], column)));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '093e13235ad0041096f05e476e6199575bdb3265', class: "mt-20" }, h("eds-pagination", { key: 'a86d91875a3847d1b4735fe76910367ed1fd7875', 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-table/eds-table.stories.js

@@ -25,7 +25,8 @@ export default {
         searchEnabled: {
             control: { type: 'boolean' },
             description: 'Enable search input for filtering'
-        }
+        },
+        columnSize: { control: 'select', options: ['default', 'medium', 'large'] }
     },
     args: {
         data: [
@@ -40,7 +41,8 @@ export default {
         },
         rowsPerPage: 5,
         paginationEnabled: true,
-        searchEnabled: true
+        searchEnabled: true,
+        columnSize: 'default'
     }
 };
 // Sample data for the table
@@ -65,6 +67,7 @@ export const Default = {
       pagination-enabled="${args.paginationEnabled}"
       search-enabled="${args.searchEnabled}"
       endpoint="${args.endpoint || ''}"
+      column-size="${args.columnSize}"
     ></eds-table>
   `,
     args: {
@@ -76,7 +79,8 @@ export const Default = {
         rowsPerPage: 5,
         paginationEnabled: true,
         searchEnabled: true,
-        endpoint: '' // Leave empty for manual data entry
+        endpoint: '', // Leave empty for manual data entry
+        columnSize: 'default'
     }
 };
 export const WithEndpoint = {
@@ -86,9 +90,10 @@ export const WithEndpoint = {
       rows-per-page="${args.rowsPerPage}"
       pagination-enabled="${args.paginationEnabled}"
       search-enabled="${args.searchEnabled}"
-      host-width="600">
-    </eds-table>`,
+      host-width="600"
+      column-size="${args.columnSize}"
+    ></eds-table>`,
     args: {
-        endpoint: 'http://127.0.0.1:5001/api/info'
+        endpoint: 'http://127.0.0.1:5001/api/catalogue'
     }
 };

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

@@ -28,7 +28,7 @@ export class EdsTag {
     }
     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 is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
 export class EdsTimeline {
     constructor() {
         this.events = undefined;
@@ -6,26 +7,7 @@ export class EdsTimeline {
         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 })))
@@ -56,7 +38,7 @@ export class EdsTimeline {
         }
     }
     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/collection/components/eds-tooltip/eds-tooltip.js

@@ -90,7 +90,7 @@ export class EdsTooltip {
         }
     }
     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/collection/components/eds-trl/eds-trl.js

@@ -41,7 +41,7 @@ export class EdsTrl {
             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" })));
     }
     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: '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))))))));
+        return (h("ul", { key: '7460398e9b55e735287f39e8a7fd6a6116bd8141', 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: '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))))))));
+        return (h("ul", { key: '0910d36be4d6a7a7b8cf1d95a507bb3e1a2f5062', 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: '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'))))))));
+        return (h("ul", { key: 'dfac2328c0c7d8f9398ee7c6e7ad82f5acaaeb6a', 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: '783eb92c379de99659e65e7cb02a1f0ca9df8758', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '64ac6b2a3c62ef21921d0aa75c1f85e672dab1a1', 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: '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: {
+        return (h("div", { key: '18563bbde4b325aed74ee0b01b138a23cdae495c' }, h("ul", { key: 'dbabf8a22ee06cafb4b4cefdd8b68f250ec83f12', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '5f3cddf6bff2942681c67e464b5da2e3ac805d0b', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '22cf209919cac0811959841e6f2aa75728728d4a', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, 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: {
+            } }, h("div", { key: '7f1c4b5fa75f03395c272b3301d71d122b68d120', class: "grid" }, h("span", { key: 'a10f6c850e37a7e664e770f6a35c0b126cb8418a', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '0e3e4b4ea42aa3040e1367817824cbcb67e12564', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '7947f3621bfcc3a53f06f8067b2f64deea660993', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'bc30dd2504a253d142778e7c5a1a3fd60c90367e', class: "grid" }, h("span", { key: 'd2d183a462473ce02f80724cd3fa2280e4ceb8e0', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '91555d5a4e2b03aae6a887a890b848080781622e', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'b16c2c137bf4a738236f8b673f0f7810ad2746ab', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, 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: {
+            } }, h("div", { key: '1f7a698c4ad373d9513c5925074e81176a824c9a', class: "grid" }, h("span", { key: '2852eb1e5f3fa33a67887eceb315b32c4035f2eb', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '903756ee7952c079d9e9f3d349344ddac243f632', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '2db0546ebeef3538312a6477b92a736c444e503e', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e61d36591eb298ea6f3fcbabd0b0f9362238fe4f', class: "grid" }, h("span", { key: '8b0ded8e23240b6d4d8edfa3a3aa6c85f25f988b', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: 'fb40588691f07763cf9880d9f8f049002f3e8f06', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: 'c3ed43f27d147d4cb230fa1501e7831bc5147f1e' }), h("ul", { key: '9762bc8bedd63846dc4c0bec57efb65054c5a59c', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'ce9b3991c76437de7f7fc0c94fd6587c4991075a', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'c5d74cb6e29b296c7ed91894498c5bf924de2d0b', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, 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: {
+            } }, h("div", { key: '888b52e0276da7d9aa3c8e6f2554da86b22c5086', class: "grid" }, h("span", { key: 'a40cd60940f1d32360d0f757d47372319d8ecc9e', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '5a0cd8cb8e93b41be560d817bd5885c6b4461a0e', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'fe48732aa72d3c35e5377bf0ae5ac475a2ca1de4', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '5693b3908af5f0787d965ab028363318639dfec5', class: "grid" }, h("span", { key: 'ae024e8c6d7c28d8c22cce3e98084533a56f4ca8', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '05340bf74e18c28154f8d4df08d32283a5ead23a', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '06ab691118c23a05bebad65d640e5995e7e3af25', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, 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: {
+            } }, h("div", { key: '52dd0aab7a5809bbd082a3d3cff2695572ebf6c6', class: "grid" }, h("span", { key: 'bb918b8a0e618124fc55290df71c3813471ee1af', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '91a426d45df887346a9bb7f60bcbbd21718f8b22', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '0f4a629375447d8429c4b8ff2fc040a89e84b5fc', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'b53e0a653cffa7fb4a0988c5bec113efeb5641a7', class: "grid" }, h("span", { key: 'b6f08290063126ba39f73bb657dd10ad52bd8bad', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '9339e232d31c86a33e374f24f152a69e7e5c1a7b', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '2e3f5b0f5683a67b8f8e9ce83ce250802a7c9004' }), h("ul", { key: '6b9aca7a8e164c6b401fc1a642aa143a468bbb66', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '8bdd9fb9b08ab1ba07a17fdfb6acdd48ae11b28c', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '3d3ea47b21006a0771859a92e15ac4f9b7bf7897', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, 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: {
+            } }, h("div", { key: 'b1dace03d1388205556c95d49cbd756614def991', class: "grid" }, h("span", { key: '094ec7f3f8ddd1275a6fb1b58c84bb111e3ae404', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '336830747c0799da2661ac90a3afa8cb61cb1fab', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '18a585ce75dad73a2ed6a876634ed222db9fd994', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '88a46869e0d40d98cdcff22d82e03d1ac49af723', class: "grid" }, h("span", { key: 'bc766933761ebb18581f5099f08a61b841a267a3', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: 'd3972a70e80e7267f427ec0d68205a778e339d74', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: 'ba98ae739932dc19d1aa4cc34f4ffc02c0e175c0', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, 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)))))));
+            } }, h("div", { key: '2249fc8c98d70a0be85aa516cf84d4fb624e78c7', class: "grid" }, h("span", { key: 'd89fe65247e3e0971a1c66f5e688f8fbd4d91400', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '39bbde5ac5c4ab66ccb28bd2c8c4495cc1593920', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '8cb9c77d7bb896ae6f18b445fb044267310ded19', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '16f65aa08412f3fe478fb72d07a27537ada9804d', class: "grid" }, h("span", { key: '997dba028ea8e06c970a624309a82c7dda2316d9', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '64483b5a8f445664c816b275eb871ef0fcecda19', 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: '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: {
+        return (h("ul", { key: 'dc57ff3bffa6aea0facf8d1e8fc186139f69e56e', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'e1d8dbfcb363cd25456d10ad4d9f500c3a324ab3', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'd11bbdbb71906dd7331aaaa1327ec2f7adb3914d', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '4badad0801b33acb2b098698bde99760bfd14b80', class: "grid" }, h("span", { key: '77380c331665e198b3a04a93b728d7448158bdf1', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '342dd1997afc6c83c28662101ba7f91ea8566a55', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'ddcbdaf618dde60577034a7e861b4cf3bbe667f6', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8a357ee33e9cd94eb30a5678d20cbf4ebf9498bd', class: "grid" }, h("span", { key: '22089c639c787de6f12441041d2f7a2a747f4242', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '0423ab8c9d4e1797e6536829be719e09ca772e28', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '13c11bcd2017ae7dbbe8c83dcaa6ceeb4ed355e6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '878df236a48f7c58dfc9fcf1041823efa5b86b6f', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '3c477c2733d98d2c3c918196274f73e21f1646fe', class: "grid" }, h("span", { key: 'ce1f49df809c94f3b5aaca8bda6b48cded46f0a2', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '99d3fe3b33328b1e2f025abf3622f715ed301f1b', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'de3b2711377cdee0f78aca2391ec59af02e847e3', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'aeaf3c18d0b30e99290bd0bc471eab32540dc495', class: "grid" }, h("span", { key: 'e7665496b791ed0cc6593348ecf9def40a1e80ca', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'e205631d4697c84fc65fa93224cdb76e254ec951', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: 'cc17448fa87f6aed9d590aa4f5e2b1110f5e0bda', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'eb68860fede226a32f4bccd49df7df4b4f29c125', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, 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: {
+            } }, h("div", { key: '377ef135def34f71d52870ebb16aead224b9b794', class: "grid" }, h("span", { key: '3117040c6a1c417dc9ac7629a885975cd459716b', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'c800eb6acf0b6182e95ad74376b46f8907507b51', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'b244b778b58b605d3f0939a36930a096763a10e7', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '95681ce98858d2ebc7dca572366eb314e9648d10', class: "grid" }, h("span", { key: '43573821ee81029875fa51580d9b043246a37f91', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'c6083e98c351f4290617b3036a430d96350f6fe0', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'c2b7b895df7c4f8520e147b69ab51d988b5fc36a', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, 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'))))));
+            } }, h("div", { key: '6f95b56b195779568cb8ee8f2426a413e04efb24', class: "grid" }, h("span", { key: 'e5f3dcdaeefdc080d24bfc70e98c50206215b268', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'f22aad83b9de337384791e3900934035e1dfcd6b', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'ec068df8197f86f9d2f433ddd589b89708e035a4', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '61f27c8dccfdfe2004ed7774d06ca38b0ede285d', class: "grid" }, h("span", { key: '9a8e7b7cc4eead6b79423e97b3ff01d3b70a85ec', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '2b5a61e7cdab44181d44db06a3eb5031a31648b8', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '11e3f6ca45cbac17dd3bb8da99c6fd78e5a96b39', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '7e34069adbd3ed1509a35a22e4239e5e56d7f5b3', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: 'c0047f8cb9bf28bec4230fa0aae28e7d3ecb1599', class: "grid" }, h("span", { key: 'a44db9793a74563015861206d3e6d10c3a3de998', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '51a8bce7027c8c151a2f56624dd340fe744d7da6', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '20d8bcda1aed4dd237dddb6079bba68f8f85dda7', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8e30a85a4418f1173183be58eade4682c6c812dd', class: "grid" }, h("span", { key: '52fa4db1021aa08f5fe4c9cface5562050181eff', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '7b0d375a2a63b3657eed9b4df0aead1db00255b5', 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: '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 } })))))))));
+        return (h("div", { key: 'ade28f6aa4a670443a4d077ff534117acb265bfe', class: "container" }, h("p", { key: '23adcbeb3a15cd2b1248f63c808ddbe7cacef531', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '9b8b9909d409565e2c37cd4048a84b7c3751147f', 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: 'fb3fe62e34d86fe345cbe177eef5b9ac57b749d5', 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: 'e24ff6eed3125519961d1cdd7789ada200d8cc3b', class: "flex" }, h("div", { key: '670ef68f1f25d9267e9a8eb90a94e6300b9d78d3', class: "w-full" }, h("ul", { key: '2ed821a59b849dd540233371f831a16974a2dc99', 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: 'b72cc79258522b595d4bd024de51b2dec6458f57', class: "w-full" }, h("ul", { key: '9650c15d16fc184f0f5c518da5944567afe30fd6', 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: 'ff9c1ae248f5cdc91bf9fe902e2a5aa00394a27c', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '1fcdd015426a1512ea9a70a732e4615447238e7f', 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: 'ec0b3529cfcb402556274e83a2a62d899eb8c7e9', 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: 'edcd735b912341fdaaac6087c0d838a3341af687', class: "flex" }, h("div", { key: '8a96a72c29fb46b8189080ca257832cad444fd40', class: "w-full" }, h("ul", { key: 'a169a2f187db3fabc955ea28aed6019b5904b9f4', 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: 'ba11e5e1ce445aec36d4eb3baf5ae39c956704fe', class: "w-full" }, h("ul", { key: '01c6ee6e5a77cafbb38928afdd6716a5aec6c93c', 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: '91ff22c373f1ae354ab9f76008f16d5e5be21331', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'a58977e316d22cb662173cc9d2d76448808fb2f8', 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: '0fd12af19848395b2a631a5ccb33b0530005bebc', 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: '38c4eea411b4021dbf15cc7d73ff26371d8175a4', class: "flex" }, h("div", { key: 'bdd75c354631d54fa03ea35e798ab5dcbde4f248', class: "w-full" }, h("ul", { key: '8777390f722798653df7ec72e6596a36246a5f2b', 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: 'c61047b695bdc8d29f5c665753b4ebfa2cbb272a', class: "w-full" }, h("ul", { key: '7de74c3a918a30cacaf4ffb78d24145d78e4511a', 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: 'd0c3a7170ba185caccf3cecf7e4d39cce5292c49', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '16ae6a94124ea87782095058857d47a4a91789a9', 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: 'c5c4d82a809a586637f00013782e69fa6bab2879', 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: '83d408a58b5bf5dddbcceb2336ffa7c58bdcea44', class: "flex" }, h("div", { key: 'dca88ee121c036f50f23105cd8a430ed883f19db', class: "w-full" }, h("ul", { key: '9b12b41325dfb100e87e1ced15f4b1b9c3457822', 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: '013e039ef9ebecdde9b59c82d819047976e77523', class: "w-full" }, h("ul", { key: '7c6125cc0f7e9998c1f74be9456a8a171545edf1', 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"; }
 }

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

@@ -38,7 +38,7 @@ const incorrect = [
  */
 export class IncorrectUseOfColors {
     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 } })))))))));
     }
     static get is() { return "incorrect-use-of-colors"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-list/token-list.js

@@ -69,7 +69,7 @@ export class TokenList {
     render() {
         // Check if `show` prop is provided; if not, display all sections
         const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
-        return (h("section", { key: '43d7e8b3192d4a2d596ca99a4dce072ea7387924', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: 'bca88363ffc01f45526068bd95e96950a3920f0f', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }

package/dist/collection/eds-docs-ui/design-tokens/token-radii/token-radii.js

@@ -5,7 +5,7 @@ import radii from "../../../../../../../../packages/assets/tokens/radii"; // Adj
  */
 export class TokenRadii {
     render() {
-        return (h("section", { key: '0b0ccb9adcfa77ea898828ddbb244e959f93e2e4', class: "w-full mt-28" }, h("ul", { key: '7c81d0a9725565c4e2587369528568d640e7b1a3', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (h("section", { key: 'f5a5ae4bf9096ac5f9aa23e76e45e103a0867bf6', class: "w-full mt-28" }, h("ul", { key: '54815bbb3e0dcdd381d711dedd126050813cf6c0', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
     }
     static get is() { return "token-radii"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-ratios/token-ratios.js

@@ -5,7 +5,7 @@ import ratios from "../../../../../../../../packages/assets/tokens/ratios"; // A
  */
 export class TokenRatios {
     render() {
-        return (h("section", { key: '0fb029d34cba573e04e15030b3fdd1497ac9974e', class: "w-full" }, h("eds-section-core", { key: 'd6914b95ef74d590d58b0c90600fc44f5d9d6678', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'f08511f07380707795b810fd0f34c1acdc47d37d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (h("section", { key: 'a0af49b94d449dfe4b02f6fec8623504ad37d5b8', class: "w-full" }, h("eds-section-core", { key: '0e52b86dc5dc6dab5dba6d3ae3d902fbc2f93ef4', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '5dc637b53903ebdb599693fe36b956c7d6008085', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
                 aspectRatio: value.replace('/', ':'), // Cast to string to resolve TypeScript error
                 width: '100%', // Full width to show the aspect ratio correctly
                 maxWidth: '300px'

package/dist/collection/eds-docs-ui/design-tokens/token-shadows/token-shadows.js

@@ -5,7 +5,7 @@ import shadowTokens from "../../../../../../../../packages/assets/tokens/shadows
  */
 export class TokenShadows {
     render() {
-        return (h("section", { key: '18d2b4cdcc3b6d6ce8864a9c36e869be9b9e5cb4', class: "w-full mt-28" }, h("ul", { key: 'b258c50ab37a0445d523187c773e92f6569dd6ad', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (h("section", { key: '1b87e2999f2b29677869d9651181135566ba64ff', class: "w-full mt-28" }, h("ul", { key: '010dcbd18c54ee35dc402a26990a37cb0730c5b0', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
     static get is() { return "token-shadows"; }
 }