@ebrains/components 0.9.3-beta → 1.0.0

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

@@ -1,5 +1,8 @@
 import { h } from "@stencil/core";
 import { parseData } from "../../utils/sharedUtils";
+/**
+ * @internal
+ */
 export class EdsTimeline {
     constructor() {
         this.events = undefined;
@@ -38,7 +41,7 @@ export class EdsTimeline {
         }
     }
     render() {
-        return (h("div", { key: '47b46ebc0621df79434201a219d73ab8e2fd62fa', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '7b5b89161bbb9420a3450ed4eb0e49d608eec2d6', class: "relative" }, h("div", { key: '21472cb756ca069b9f25e894899def03bb78751a', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '3972b2885995d9656f426cf17ec54c5410ecd385', 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: '63ce0ce7e3a632906f664011243abf9f816bc53a', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '794d16f6b68d87bb1fb4665cc5ef84b381fb55ea', class: "relative" }, h("div", { key: '2b82b5594a9ed5c056898725f40e56858282412a', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '6d33b71396649e7b90d050c0858912fa49c309a7', 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

@@ -23,7 +23,7 @@ export class EdsToast {
         };
         this.message = undefined;
         this.intent = 'default';
-        this.duration = 5000;
+        this.duration = undefined;
         this.visible = true;
     }
     componentDidLoad() {
@@ -46,8 +46,9 @@ export class EdsToast {
         btnElement.dispatchEvent(event);
     }
     connectedCallback() {
-        // Auto-dismiss the toast after the specified duration
-        this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
+        if (this.duration && this.duration > 0) {
+            this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
+        }
     }
     disconnectedCallback() {
         // Clear the timeout when the component is removed
@@ -118,14 +119,13 @@ export class EdsToast {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the duration before the toast auto-dismisses (in milliseconds).\nDefaults to 5000ms (5 seconds)."
+                    "text": "Determines the duration before the toast auto-dismisses (in milliseconds).\nIf set, the toast will auto-dismiss and show a close button.\nIf not set (or set to 0), it will persist without a close button."
                 },
                 "attribute": "duration",
-                "reflect": false,
-                "defaultValue": "5000"
+                "reflect": false
             }
         };
     }

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

@@ -1,94 +1,90 @@
 .relative {
-    position: relative;
-  }
-  .absolute {
-    position: absolute;
-  }
-  .rounded-sm {
-    border-radius: 8px;
-  }
-  .rounded-xs {
-    border-radius: 4px;
-  }
-  .bg-stronger {
-    background-color: var(--grey-900);
-  }
-  .bg-strongest {
-    background-color: var(--black);
-  }
-  .text-inverse {
-    color: var(--white);
-  }
-  .text-default {
-    color: var(--black);
-  }
-  .f-ui-03 {
-    font-family: var(--f-ui-03-fontFamily);
-    font-weight: var(--f-ui-03-fontWeight);
-    font-size: var(--f-ui-03-fontSize);
-    line-height: var(--f-ui-03-lineHeight);
-    letter-spacing: var(--f-ui-03-letterSpacing);
-  }
-  .f-ui-03-light {
-    font-family: var(--f-ui-03-light-fontFamily);
-    font-weight: var(--f-ui-03-light-fontWeight);
-    font-size: var(--f-ui-03-light-fontSize);
-    line-height: var(--f-ui-03-light-lineHeight);
-    letter-spacing: var(--f-ui-03-light-letterSpacing);
-  }
-  .pointer-events-none {
-    pointer-events: none;
-  }
-  .-top-8 {
-    top: -0.5rem;
-  }
-  .left-1\/2 {
-    left: 50%;
-  }
-  .z-10 {
-    z-index: 10;
-  }
-  .block {
-    display: block;
-  }
-  .-translate-x-1\/2 {
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .-translate-y-1\/2 {
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .-translate-y-full {
-    --tw-translate-y: -100%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-  .py-2 {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
-  }
-  .px-4 {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-  }
-  .p-4 {
-    padding: 0.25rem;
-  }
-  .p-6 {
-    padding: 0.375rem;
-  }
-  .p-8 {
-    padding: 0.5rem;
-  }
-  .p-12 {
-    padding: 0.75rem;
-  }
-  .p-16 {
-    padding: 1rem;
-  }
-  .p-20 {
-    padding: 1.25rem;
-  }
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.rounded-xs {
+  border-radius: 4px;
+}
+
+.bg-strongest {
+  background-color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.f-ui-03-light {
+  font-family: var(--f-ui-03-light-fontFamily);
+  font-weight: var(--f-ui-03-light-fontWeight);
+  font-size: var(--f-ui-03-light-fontSize);
+  line-height: var(--f-ui-03-light-lineHeight);
+  letter-spacing: var(--f-ui-03-light-letterSpacing);
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.p-6 {
+  padding: 0.375rem;
+}
+
+.bottom-full {
+  bottom: 100%;
+}
+
+.mb-2 {
+  margin-bottom: 0.125rem;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-150 {
+  transition-duration: 150ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}

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

@@ -6,95 +6,18 @@ import { h } from "@stencil/core";
 export class EdsTooltip {
     constructor() {
         this.content = undefined;
-        this.position = 'above';
-        this.isVisible = false;
-        this.isPositioned = false;
-        this.tooltipStyle = { top: '0px', left: '0px', transform: '' };
     }
-    /**
-     * Show the tooltip and update its position.
-     */
-    async showTooltip() {
-        var _a;
-        await this.updateTooltipPosition();
-        this.isPositioned = true;
-        this.isVisible = true;
+    /** fire analytics on every hover */
+    handleHover() {
         sendAnalytics({
             category: 'ui-component',
-            parentContext: null,
             tag: this.el.tagName.toLowerCase(),
-            name: ((_a = this.content) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            name: this.content.toLowerCase(),
             action: 'hover'
         });
     }
-    /**
-     * Hide the tooltip.
-     */
-    hideTooltip() {
-        this.isVisible = false;
-        this.isPositioned = false; // Reset positioning when hiding
-    }
-    /**
-     * Hide the tooltip when the `Escape` key is pressed.
-     */
-    handleKeyPress(event) {
-        if (event.key === 'Escape') {
-            this.isVisible = false;
-            this.isPositioned = false; // Reset positioning when hiding
-        }
-    }
-    /**
-     * Update the tooltip's position dynamically based on the slotted element's dimensions and position.
-     */
-    updateTooltipPosition() {
-        var _a, _b;
-        const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-        if (!slotElement) {
-            return;
-        }
-        const assignedNodes = (slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedNodes({ flatten: true })) || [];
-        const targetElement = assignedNodes.find((node) => node instanceof HTMLElement);
-        if (targetElement) {
-            const targetRect = targetElement.getBoundingClientRect();
-            const tooltipElement = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tooltip"]');
-            if (tooltipElement) {
-                const tooltipWidth = tooltipElement.offsetWidth;
-                const tooltipHeight = tooltipElement.offsetHeight;
-                // Calculate position based on the preferred `position` prop
-                let top = 0;
-                let left = 0;
-                switch (this.position) {
-                    case 'above':
-                        top = window.scrollY - tooltipHeight - 8; // Above with offset
-                        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
-                        break;
-                    case 'below':
-                        top = tooltipHeight - window.scrollY + 18; // Below with offset
-                        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
-                        break;
-                    /*case 'left':
-                      top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
-                      left = targetRect.left - tooltipWidth - 8; // To the left with offset
-                      break;
-                    case 'right':
-                      top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
-                      left = targetRect.right + 8; // To the right with offset
-                      break;*/
-                }
-                this.tooltipStyle = {
-                    top: `${top}px`,
-                    left: `${left}px`,
-                    transform: 'translateX(0)' // No additional horizontal adjustment needed
-                };
-            }
-        }
-    }
     render() {
-        return (h("div", { key: '7bc92c002eaf263a2d10a2391f356f40e23d5998', class: "relative" }, h("slot", { key: 'cc8126196b03fd02bb17701aa4f55d4a406f685a' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '00d854649ef43b958081bbb336319a537c181574', 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
-            } }, this.content))));
+        return (h("div", { key: 'cf17cd61cd5888d6ea12bf6be0fb8c841072b4d6', class: "relative inline-block group" }, h("slot", { key: '7a41d90940fff4e8b887ec4a3240371466f219a5' }), h("div", { key: 'ccf06592f4c977030b0cf54cce48d13889c059f3', class: "absolute bottom-full left-1/2 \n            transform -translate-x-1/2 mb-2\n            rounded-xs bg-strongest text-inverse \n            f-ui-03-light pointer-events-none \n            z-10 whitespace-nowrap p-6 opacity-0 transition-opacity duration-150 ease-in-out\n            group-hover:opacity-100", role: "tooltip" }, this.content)));
     }
     static get is() { return "eds-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -126,54 +49,17 @@ export class EdsTooltip {
                 },
                 "attribute": "content",
                 "reflect": false
-            },
-            "position": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'above' | 'below'",
-                    "resolved": "\"above\" | \"below\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The preferred position of the tooltip (`above`, `below`, `left`, `right`)."
-                },
-                "attribute": "position",
-                "reflect": false,
-                "defaultValue": "'above'"
             }
         };
     }
-    static get states() {
-        return {
-            "isVisible": {},
-            "isPositioned": {},
-            "tooltipStyle": {}
-        };
-    }
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "mouseover",
-                "method": "showTooltip",
+                "name": "mouseenter",
+                "method": "handleHover",
                 "target": undefined,
                 "capture": false,
                 "passive": true
-            }, {
-                "name": "mouseout",
-                "method": "hideTooltip",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "keydown",
-                "method": "handleKeyPress",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -11,9 +11,11 @@ export default {
 };
 export const Default = {
     render: (args) => html `
-    <eds-tooltip content="${args.content}">
-      <eds-button label="Hover over me" intent="primary" size="large" aria-label="Hover over me"></eds-button>
-    </eds-tooltip>
+    <div class="mt-32">
+      <eds-tooltip content="${args.content}">
+        <eds-button label="Hover over me" intent="primary" size="large" aria-label="Hover over me"></eds-button>
+      </eds-tooltip>
+    </div>
   `,
     args: {
         content: 'This is a tooltip message.'

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: '7f2775e107e053cf1e8091f97915e6bc372c3954', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '9576b1c5dc72335ef0f7158fa4eaa44835acd8db', "table-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: '8a798c644632d3168af51aa8a0775b7455ab5b52', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '82a692c0f7e46fe7438a594a7b5c567855c0e308', "table-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: 'af0b4133a365f9c2db08ea05eab950de32536950', class: "not-prose 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: '8279e944bfb0ddf1e3cb682daa1b8bcfe8cac3fd', class: "not-prose 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: '059dacf5e142b2e4bd61a7977f1bdd79554ddca9', class: "not-prose 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: 'ab7abc8b8b9115446169d85c6b97f4ea2e387068', class: "not-prose 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

@@ -58,7 +58,7 @@ export class ColorSupportPalette {
         return 'text-default';
     }
     render() {
-        return (h("ul", { key: '2cadb1ac7f985ba4960eb2a8b8d64c543c07dafa', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+        return (h("ul", { key: '42a4eb08f07919ad464ba017dbba65667c91e005', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
             // compute once
             const textClass = this.getTextColor(color.background);
             return (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 ${textClass}` }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), h("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));

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

@@ -33,7 +33,7 @@ export class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: 'b77f4fad55c2aa54422fd3b18ef09d4004490014', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '2bc09e1f15ce98c6ba133cffc09df3bf10ca343f', class: "not-prose 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: '10c513243cdbc57d018445e4413d4a1940616be1' }, h("ul", { key: 'c28494f2db389b90b82b18663d3ff2cae3528fc7', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '9b93b139f06b5cf2bf40ea9576a16f1f95b47cef', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '32aea8893b8c109ac13bb4fa87f81fdfbb31211c', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("div", { key: '32943156b28f767dc9b2e524202a4f4906432472' }, h("ul", { key: 'bf0d9a310edc584b67e064b149c771417e4da9cc', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '3ed95b92fe0eea4e75be722c1d0abdedfaa9e00e', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b5d4f381155b3e89bf441a87b9aff7718d4bd978', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, h("div", { key: '0881e06d858eb7ec8681d201abf2d6b19f89052f', class: "grid" }, h("span", { key: '9d94677102fc1ee3720b2d845038968b38143afc', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'a11ac3d683540f396dd6a22250773d9bbc6b7c86', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'aaf6227e91efb700dee4dd14a99f0f803902a348', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'aefdddab57b6f487a9b9b28bf9931b43924d7fb9', class: "grid" }, h("span", { key: '5ff736d1d6d0a6919899a58970042157970fa9df', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '668f276d932498e064c51637157d34c416a82c35', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: '8797049389313e6627574e97e609572979b16ec0', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'c12a9c31da8078a9e6889e0084f1256dad389b59', class: "grid" }, h("span", { key: '2fa2d5e9bb0820f08d3c265d7797eeca4c47c73c', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'b609663a6bfebc37deee295b5c8316bb08e6c785', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'b3cc79d81900f4a9a12ff7c6ebaac286c4dc1cd6', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'f91c41b6301c6234387c4386c493a9df56869c84', class: "grid" }, h("span", { key: '1165b82de0328f60a495a563e14277d3722b7d87', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: 'f364fa3b7d4a9c52e1b67a65a4992ea1055084c1', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'e798299fb6ffedd626aaf477593b928c73b177bc', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, h("div", { key: '44ee397cf746e87daa52979200c270703d1bc55e', class: "grid" }, h("span", { key: '65bc43371dee383f17da6cf366520ca6499db61d', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '3afcdc449bb40583bec4a64229beb176644c6d86', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '9356d97b5db02857d89215ea40bd2d17917fb032', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e4515e8ff06d5da2530754720753562fd12282a2', class: "grid" }, h("span", { key: '208101b85d06b7a9fa5c1a0d0eb470c48c55c8d6', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '73b9ffdae670b0977b71eb5a5540c6ca5cdf850a', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: 'a6b352c935c7c548647ec33f548f5963d3fb2771' }), h("ul", { key: 'b17a428d35de0e5fd34f93b5e5d7eea10bd97c05', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'bf11a3863db3b16410bb33b63e589f08d3ac9f10', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'ab6c9f7addcbcedc3686f95e4955b9e7ab14b6fc', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'eee5b2de72d33f80c85fb0ad39e486cbd69d664b', class: "grid" }, h("span", { key: '5190b0bb900bf234f32ccad7d37749ae0e57c31c', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '49e3d6d1073dfa8d08054e9db612bfce1a811347', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'fd0c166cac7839de62cd782ec8071ba70378c15f', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e9e95829a6eec21baab0238677a33cc649351185', class: "grid" }, h("span", { key: 'e8a6c41cc8193ca78794c7147f20d39604a1ae04', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '039cbc6eedc43de988b5dd823525bde00f7a21e5', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '7f95cfde8f4724b236446c3732c04929e17a9aa0' }), h("ul", { key: '72f723c89d17ea54a962122867abbd690b4d9ad9', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'b2153dc607ed77d0a3b1398c3fc8b626163575e1', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e9ff842671af9bf749857fb4b430dbd997eadbab', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '4a1b5ad1af1f12ecf5d0e3d29af852f8c9a68c8a', class: "grid" }, h("span", { key: '3ce666f09c7de2488d94698a19ae1c51ddecbf7b', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '10301ea300f2b1a6d827bf56fd8b8e0e0cc858f6', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '2db903a2fe58581b0e6d7b9adc984f4320dc8a09', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'afe001eb4a52f6a05b38ffcc71d538ec22a98022', class: "grid" }, h("span", { key: '62fc31bde6e3b34327e41cd39fc80cab32faa94d', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '2ca52fff58fcef2660e80f2a847c45d08438f14e', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '85e4a7be29033cdaf374b27ceed588c825ace64f', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'fd8255c5ee1ffe2f1b44cc670e504540b2e19b17', class: "grid" }, h("span", { key: '17b71b6d17fe483a0eab1e80959da2076ad4647e', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'b3d39bde727347801976d1471875e3226f71d334', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'd37cfec78f74f7eec02047fb8e30962c55379f71', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'aa0ec054bb018ab8e564910ada76d849ee2d1608', class: "grid" }, h("span", { key: 'f633c21fb5227330e843b1c1f6d1fff40766c0d0', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'c41495a89c987cf7cfbbd0b4d1ff12ac0c650610', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '18a802a0cb7cbd228840fb58fadf6a121d98ebf9', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '16193b9db41b2296de12684ac3f9274436aac1fa', class: "grid" }, h("span", { key: '809a4b38fe70a64bdd823093aeb0278b181fd9b8', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '96bd1f267b3fc2dc280a683d92bbc872ec446f6b', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '217931cdbd3da0f016253e61ef19e74e4df4f669', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '03b91a07130bc1d4c811759085174f794f66d143', class: "grid" }, h("span", { key: 'bdc570cfb341c90b7e89100af5034496c1b369ee', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'cc10a8ba6a2cf4470bbbf16c03f513273411db4b', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '45e15e96024ba30a44ae8fff1b1484ca036e2d89' }), h("ul", { key: 'a487cf89f96a29775770ba4a5a80019387d179bc', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '15018fc0724f6b1e62b5b37922dc924ec2fb41d8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b2b27ed4e039ab44c9514ddfc3dbe928ce0aa46b', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'edf5fe68043e4712e7174c405e73e1aa84570936', class: "grid" }, h("span", { key: '455d010554f4836b26ff4b0568d088a4505619f3', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '6a50beb860b13371178b9582279c76cca29f25cf', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '98333266061cd31aa09d7d1394829c5d822c901f', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9f1952601d13a96f1caade683d5474a26cf94298', class: "grid" }, h("span", { key: 'e43da3fba22655cef1690725654919a79d43a2f4', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'c3e280221454dc05f4112f03e3d226a6e70b70d3', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '63355f298a7680e4307b6e467da0fd54faf9da14' }), h("ul", { key: 'ff5a5554b716e21b0e219228317bbe334fc96488', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'b4ecf3a608a9321ca0cfd1edad2778b3b8ddf918', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '587730e489242f8579b2db3aceea8fadf4ba0f75', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, h("div", { key: '8714548cc695018bb413d3e72ea8e580cc9bc98f', class: "grid" }, h("span", { key: '28e8f390390f82e5cbad32394e46a4606feeec6b', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '5b6f7f1ee8484f99e9421af84835ed4bf6765db4', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '84c6ddd8728a2a39c8863af7a6ad181f321efd7f', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '7ddccbf76753340f715d4fbfcd31bab083bf3725', class: "grid" }, h("span", { key: 'f2a84a9e46d18015b45f052dc8786ac7c1fc3bb3', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '741fd132025aa0c0a1da6d8a88273a1cd19aeae7', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: 'e0d48d68d5487c82149c90cc0e726370f0d25960', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '883c226b73544a239f6d0ece7cbab020e1cc5874', class: "grid" }, h("span", { key: 'dc5031f2236d81513cc543997f9b445b0fdea4be', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'a90f91b008cb67e8ee4a0454ed9e75f683a1a960', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '4c12f3a2500535970bdb70bb87b8d73348ef25bb', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1ebadf2907a7f499d61e9edc7c71bb9e7378594a', class: "grid" }, h("span", { key: 'acfce5255506344a9b65b195933cf924e1030467', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: 'a7c4c25345c91a9753c4615c5205cf3dc49c36af', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '01ce94d66521e612357c61de65ca1acd01e84cb9', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, h("div", { key: '16b56121efc5527b8eb3dad7e119840102d1d390', class: "grid" }, h("span", { key: '5f326a2653de6dcc8c85ad88c5554214519fa1fd', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '1cb2c712393855e7b01bf1e083444e2c170d7b0b', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '6cc534503946d6aee5b562b2b1b713988df963ac', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd79c852afae4fbe6b360cc319b8d3bf22ce7b194', class: "grid" }, h("span", { key: 'cab85faa9f7cd31c14a15a014f8a95c39b6e631d', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: 'ea3a9fafeee11b75663bd753c75b7cbcfdb9c5c1', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, h("div", { key: '628435f8fab14df7613aa4427af0b8c15fc222c2', class: "grid" }, h("span", { key: '4b4bbd19051b9d8d1eb524f2c84104eab7dae20a', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: 'bb01da8698315272a78bad8d7258cb79be98446b', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: 'f28b072bdb7dc66f3f3be1e922e527a7e3f4bf34', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '027adf31b26154f659c2cd8c9ee935b5886e8419', class: "grid" }, h("span", { key: 'f74af79724fd67f67ad0433f9390ca022c6788d8', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '87262b14ffcda0153b37a5090b25e58b7c71c5dd', 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: '2735f6a59037973febc2ee871464146b3a12e69b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'a861d0c4ea7545d55b8c324f916e1831e271bb47', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '93a8c04259ed46a2c520c1355efaaa2ecf0c4714', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '554964ca9e800dd356fcddfcc82004e7a6131d21', class: "grid" }, h("span", { key: 'e91f746f3ce067afe57835da2996804dba471ce3', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '41d7dd9aa7ec450f35ae6587b51a5d7c639cb1fa', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '4e0d93b261af040d0aa82c8043542a751915786f', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'f1c2c77f37d5e80b6574e68c9454cac46cd99c9f', class: "grid" }, h("span", { key: '8e216418f476d026cb59dbbdab802bb4bdf7a4e4', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '5b978c9f6206ba4a57645dd5b107ace27be515a9', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '232cd30eb6c637d31f80cf8281fb434e9837e9b8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '61a073ea3b4bc8134ad539b941a6bc1b3a914a11', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '22a69e75c01842e67d87126f3d34e9a19ead4ab1', class: "grid" }, h("span", { key: 'b537d9e9cb0429677656c068a0a81499d42cac30', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'ab35b28dec337cb81ad50372e7c071c7d8f3b785', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'a0bea555719eacc8f0730300ebab6ae98ea6771a', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8458087421b893504829ed46b05ba44acb0c5f53', class: "grid" }, h("span", { key: '2ec00ee996a3184afe07c27e45e999c4740b93a1', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '7d48ea6d5b12c6a1ced3812fdc4cb39cd3afaed4', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: 'b2ac623c59d1dc2ab14cc2775c5b95b4d02fc72f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '6152411685ae903a22bf9b06db18182c35bea246', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("ul", { key: '54a1927a8b5d68b7ef0cda7e1b7d673b33605a3c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '25d63af647cab86f74bb7fb261836f5938beb0c8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '3a39fde1fd70cf8c456c9032ae0458976fd4e289', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '0d2bcd0138973145c717725c79b6a2f4ff290b97', class: "grid" }, h("span", { key: '31c920216944da65a446f6c7d3037aee600e71d8', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '838ab2e1e8664243e32726ab03539a4f32b32cf4', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '2f8a24075e0fe1d2a6fda01fb97b4cf49f85277f', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8482d6666b68cd1ceb866e1cbdd0d88343cf79da', class: "grid" }, h("span", { key: 'e3ba3599b4e5743691c35a28358f0050de18d32a', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: 'c3ac3af17201effeb89b017a334c9ac0b0d62ddf', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '447e0a60ef726347ec1f4f540f6de7747a450845', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'fd922845d2aa3f66fde4d7fcf9f5b2416332fe9c', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'bcf9ff063b3c130e8f7e24247f032a9f9fa40bb6', class: "grid" }, h("span", { key: '0bcea7730d9f34ac44544cd1bc3bfa3b8ca361cf', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '9c5169394a89f4ba2adbb0ac2576bd885443aac3', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'c50e9ba110494a1a0e9df18a081f02cb86c700c4', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '365655cca2301d94a52f859fa9527ae5c0ef1ece', class: "grid" }, h("span", { key: '088fca6cf72c8c74244d9a6e19c7ec083c8a6711', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'b33043ed7e2ff751be0d3c229324369aeacd8f1e', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '3b619a6a67d31ea7b358b59a147f36bfe35c4323', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '21b63edaebce5e4fdd10e6ad2ffaf31597d748f6', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: 'fa8fb3b382d53be84413643cb12a58b4a41202ca', class: "grid" }, h("span", { key: '026b5ed6229ef0e89636fce8643264ba47255249', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'bc5784f779096d92229abc19c003df07ee7acf1c', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '76e8f012cb9d7994906e2d9ce55d7eb47c5cbd0f', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '0410c816d39550853c240894811717c427fa3dee', class: "grid" }, h("span", { key: 'b1f2869cc28a05e0c52f7bd8cec85d170d6250a7', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'f53078949c7803385c6616325670143e1af08abe', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '2076894246cdbcdc0557e70ef9ca857f8fb825cf', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'f6d5d058b645af61eebb8f6a7b2369e4c95c31fb', class: "grid" }, h("span", { key: 'b7b1101ac321600f6218cbc4371d9219b9aef016', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '2debc8469b2d82c0550f1173bb4f0c1cdf33a7e0', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '90753985397844a6cabeee1b0ac5b32a84f59ed1', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'f46c245f70973cd91992a8f9ec47e57997345c5c', class: "grid" }, h("span", { key: '7c7eb23f1312208b313cd2a2bd5c5a5af2e7cdd3', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '47c19d9a120cedc5c2bbbd385efa2e91ad4fd8e8', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'dcbc1b771bea1166bbbb0ed0e6fcd2d1aaa53b7f', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '5f8b1cf3e3529c9e54185cd6bb8c1aaaa0ebc359', class: "grid" }, h("span", { key: '06f7ef3d3e164a632f2bc9c5e99642a827a79e27', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '21a313355fa68a829619d9da29000acef0509fba', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '859bc066d1756b9ac5f72de7fcd0b4bd3013f8f4', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '5a4ffa55b941478f5f18e764fc54421b4dd33141', class: "grid" }, h("span", { key: 'b42265cfe889bcb45270c21016134fa72ba18e5d', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '6b478b1526fbd5e5175f67dbb5b9e30e21dc56bb', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '7a92c596887e9c42c2c79c208ed82810b8f6a714', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'edcc8539e72b7497a0bb49d442774903116bf916', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: 'a65cdaa466210da348bf54e36c4e805ae26e36fa', class: "grid" }, h("span", { key: '894bc12a1b61925db0ec12b82f2f938805b71f46', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '0b7f7cf4c514ccc4bd3c3a1f1bce75f23bbcc2cb', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'bc3b15dd7eb559b10fc64b08fc6c4d7681209d3c', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '57be009b3ec863485042af43ca0dabcceb5a317b', class: "grid" }, h("span", { key: 'f7e10fda97f12f55d4756014f296e710793c38f4', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: 'e16fc4ac9a8639bda71bb814992bf6416949fd06', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, h("div", { key: '55dff4711f054b364df8a03381f768e93cd1b62a', class: "grid" }, h("span", { key: '3880f0ea82be335c750ed4553583bc87b7ca04cc', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '6952cfb758d707b3376032f1d997253c1edc9962', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '9e0bc4a1d79c41bfaa315fd3053752c4eda3cd18', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9561d012cfbe411eac373f768893cc304b2e6138', class: "grid" }, h("span", { key: 'e90d3b590653807e22697395397ac89be9f52b90', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'ffd2be0e5f7ff3b72a73697e0ca2f92c7e9cc0a5', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: 'e963dd45ee5a8f52348e1b2a331df6af94f90f5f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '0586094b065fdfa034096ef7e1eb95c6a26c41fc', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '6acfe9a84d72f0327c3eff6c44a616918fa627d3', class: "grid" }, h("span", { key: 'c3175b931ff1cc3365dbf1cdd548b550aaf662a3', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '42d1daa0c16dcceb7341c015b912e0ea27874282', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '56b32e9ba42ec77e3ba6263f27b78229996ce983', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '89226a45ae2cf148134d550d0507a3563978e1bd', class: "grid" }, h("span", { key: '6f9c4d6da4d4c3fe6ae8039291e6cd9c06635c24', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '9b44fcec2f83ecaa9fb5a1b298bab55fce503e91', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
     static get is() { return "gradient-support-palette"; }
 }