@ebrains/components 2.4.1 → 3.1.0

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

@@ -1,26 +1,25 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 // Define the CVA for the tag styles
-const tagStyles = cva(['border-2 rounded-pill'], // Base classes
+const tagStyles = cva(['relative inline-flex justify-center items-center py-8 rounded-xs'], // Base classes
 {
     variants: {
         intent: {
-            primary: 'border-accent bg-accent',
-            default: 'border-default',
-            strong: 'text-inverse bg-strongest border-default',
-            accent: 'text-[#0034CB] border-[#0034CB]',
-            weak: 'text-light bg-strongest-soft border-transparent',
-            inverse: 'border-inverse text-inverse',
-            'inverse-strong': 'bg-inverse border-inverse text-lighter'
+            primary: 'border-inside bg-inverse text-default',
+            dark: 'border-inside border-softest bg-inverse text-light',
+            inverse: 'border-inside bg-transparent text-inverse border-inverse',
+            strong: 'bg-strongest text-inverse',
+            brand: 'border-inside bg-transparent border-accent text-accent',
+            'brand-dark': 'border-inside bg-transparent border-accent-dark text-accent-dark'
         },
         size: {
             small: 'f-ui-05 py-2 px-4', // smaller padding
-            medium: 'f-ui-03 py-3 px-5', // moderate padding
-            large: 'f-ui-01 py-4 px-6' // larger padding
+            medium: 'f-ui-03 py-3 px-6', // moderate padding
+            large: 'f-ui-01 py-4 px-8' // larger padding
         }
     },
     defaultVariants: {
-        intent: 'default',
+        intent: 'primary',
         size: 'small'
     }
 });
@@ -31,12 +30,12 @@ const tagStyles = cva(['border-2 rounded-pill'], // Base classes
 export class EdsTag {
     constructor() {
         this.label = undefined;
-        this.intent = 'default';
-        this.size = 'small';
+        this.intent = 'brand';
+        this.size = 'large';
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: 'ef36f799cf3226ccf281428929e75326ea6a06e4', class: classes }, this.label);
+        return (h("span", { key: '20e1625ac01b0dc1f40356d02622e0649faa7fa7', class: classes }, h("span", { key: '313c3f18c0a5df285afe6a40ded9e68035d9648f', style: { position: 'relative', zIndex: '1' } }, this.label)));
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -73,8 +72,8 @@ export class EdsTag {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'default' | 'strong' | 'accent' | 'weak' | 'inverse' | 'inverse-strong'",
-                    "resolved": "\"accent\" | \"default\" | \"inverse\" | \"inverse-strong\" | \"primary\" | \"strong\" | \"weak\"",
+                    "original": "'primary' | 'dark' | 'inverse' | 'brand' | 'brand-dark' | 'strong'",
+                    "resolved": "\"brand\" | \"brand-dark\" | \"dark\" | \"inverse\" | \"primary\" | \"strong\"",
                     "references": {}
                 },
                 "required": false,
@@ -85,7 +84,7 @@ export class EdsTag {
                 },
                 "attribute": "intent",
                 "reflect": false,
-                "defaultValue": "'default'"
+                "defaultValue": "'brand'"
             },
             "size": {
                 "type": "string",
@@ -103,7 +102,7 @@ export class EdsTag {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "'small'"
+                "defaultValue": "'large'"
             }
         };
     }

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

@@ -8,7 +8,7 @@ export default {
         },
         intent: {
             control: 'select',
-            options: ['primary', 'default', 'strong', 'accent', 'weak', 'inverse', 'inverse-strong'],
+            options: ['primary', 'dark', 'inverse', 'brand', 'brand-dark'],
             description: 'The visual intent style for the tag'
         },
         size: {
@@ -19,8 +19,8 @@ export default {
     },
     args: {
         label: 'Default Tag',
-        intent: 'default',
-        size: 'small'
+        intent: 'brand',
+        size: 'large'
     },
     parameters: {}
 };
@@ -28,7 +28,27 @@ export const Default = {
     render: (args) => `<eds-tag label="${args.label}" intent="${args.intent}" size="${args.size}"></eds-tag>`,
     args: {
         label: 'Default Tag',
-        intent: 'default',
-        size: 'small'
+        intent: 'brand',
+        size: 'large'
     }
 };
+export const AllIntents = {
+    render: () => `
+    <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+      <eds-tag label="Primary" intent="primary"></eds-tag>
+      <eds-tag label="Dark" intent="dark"></eds-tag>
+      <eds-tag label="Inverse" intent="inverse" style="background: #333; padding: 8px;"></eds-tag>
+      <eds-tag label="Brand" intent="brand"></eds-tag>
+      <eds-tag label="Brand Dark" intent="brand-dark"></eds-tag>
+    </div>
+  `
+};
+export const AllSizes = {
+    render: () => `
+    <div style="display: flex; gap: 12px; align-items: center;">
+      <eds-tag label="Small" intent="brand" size="small"></eds-tag>
+      <eds-tag label="Medium" intent="brand" size="medium"></eds-tag>
+      <eds-tag label="Large" intent="brand" size="large"></eds-tag>
+    </div>
+  `
+};

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

@@ -41,9 +41,9 @@ export class EdsTimeline {
         }
     }
     render() {
-        return (h("div", { key: '0e33d3aed6e58d34209012bf65b0388b501f1667', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: 'ac0c5cfa6685d79cce06faa4481568ce1018c562', class: "relative" }, h("div", { key: '96be2703fc36ecbe8b872d7ed79873375ef05de9', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '9d4e75de9f35a00c76edf08f7e570c62c325741d', 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: '78b199b18d361ae3223e4f1fe9a2043d61f4271b', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: 'afdfdf7dc573a7f273703a02e38e755a9815bdf7', class: "relative" }, h("div", { key: '7affc96f356ee901ca263c7347ae60b84869f28b', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '7ba006234bd1365890e75b7f59aa118265ba727c', 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", { title: event.title, url: "#", description: event.description, intent: "secondary", 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: '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", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))))))))));
     }

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

@@ -34,12 +34,12 @@
     gap: 0.25rem;
 }
 
-.f-ui-01 {
-    font-family: var(--f-ui-01-fontFamily);
-    font-weight: var(--f-ui-01-fontWeight);
-    font-size: var(--f-ui-01-fontSize);
-    line-height: var(--f-ui-01-lineHeight);
-    letter-spacing: var(--f-ui-01-letterSpacing);
+.f-ui-02 {
+    font-family: var(--f-ui-02-fontFamily);
+    font-weight: var(--f-ui-02-fontWeight);
+    font-size: var(--f-ui-02-fontSize);
+    line-height: var(--f-ui-02-lineHeight);
+    letter-spacing: var(--f-ui-02-letterSpacing);
 }
 
 .ml-8 {
@@ -50,6 +50,14 @@
     padding: 0.75rem;
 }
 
+.rounded-sm {
+  border-radius: 8px;
+}
+
+.rounded-xs {
+  border-radius: 4px;
+}
+
 .rounded-lg {
     border-radius: 16px;
 }
@@ -63,11 +71,11 @@
 }
 
 .bg-dark {
-    background-color: var(--grey-300);
+    background-color: var(--grey-light);
 }
 
 .bg-success {
-    background-color: var(--green-200);
+    background-color: var(--brand-green);
 }
 
 .bg-error {
@@ -79,7 +87,7 @@
 }
 
 .text-light {
-    color: var(--grey-700);
+    color: var(--grey-dark);
 }
 
 .text-current {
@@ -87,5 +95,57 @@
 }
 
 .text-default {
-    color: var(--black);
+    color: var(--brand-black);
+}
+
+.text-accent {
+    color: var(--brand-green);
+}
+
+/* Brand variant classes (fallback for other intents) */
+.bg-inverse {
+    background-color: var(--white);
+}
+
+.bg-strongest {
+    background-color: var(--brand-black);
+}
+
+.border-l-\[3px\] {
+    border-left-width: 3px;
+}
+
+.border-accent {
+    border-color: var(--brand-green);
+}
+
+.py-16 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.px-20 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+}
+
+.rounded-r-4 {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.f-ui-02 {
+    font-family: var(--f-ui-02-fontFamily);
+    font-weight: var(--f-ui-02-fontWeight);
+    font-size: var(--f-ui-02-fontSize);
+    line-height: var(--f-ui-02-lineHeight);
+    letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+.opacity-50 {
+    opacity: 0.5;
+}
+
+.hover\:opacity-100:hover {
+    opacity: 1;
 }

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

@@ -1,12 +1,14 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
-const toastStyles = cva(['relative bottom-4 w-auto p-12 rounded-lg shadow-md'], {
+const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
     variants: {
         intent: {
-            default: 'bg-dark text-light',
+            default: 'bg-dark text-dark',
             success: 'bg-success text-dark',
-            error: 'bg-error text-light',
-            warning: 'bg-warning text-dark'
+            error: 'bg-error text-dark',
+            warning: 'bg-warning text-dark',
+            brand: 'bg-strongest text-accent',
+            brandInverse: 'bg-inverse text-default'
         }
     },
     defaultVariants: {
@@ -60,7 +62,7 @@ export class EdsToast {
             return null;
         }
         const classes = toastStyles({ intent: this.intent });
-        return (h("div", { class: classes, role: "alert", "aria-live": "assertive" }, h("div", { class: "flex items-center justify-between gap-4" }, h("span", { class: "f-ui-01" }, this.message), h("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
+        return (h("div", { class: classes, role: "alert", "aria-live": "assertive" }, h("div", { class: "flex items-center justify-between gap-4" }, h("span", { class: "f-ui-02" }, this.message), h("eds-button", { intent: "ghost", size: "large", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
     }
     static get is() { return "eds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -97,8 +99,8 @@ export class EdsToast {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'success' | 'error' | 'warning'",
-                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "original": "'default' | 'success' | 'error' | 'warning' | 'brand' | 'brandInverse'",
+                    "resolved": "\"brand\" | \"brandInverse\" | \"default\" | \"error\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,

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

@@ -8,7 +8,7 @@ export default {
         },
         intent: {
             control: 'select',
-            options: ['default', 'success', 'error', 'warning'],
+            options: ['default', 'success', 'error', 'warning', 'brand'],
             description: 'The visual intent or style of the toast.'
         },
         duration: {
@@ -36,3 +36,27 @@ export const Default = {
         duration: 5000
     }
 };
+export const Brand = {
+    render: (args) => `
+      <eds-toast
+        message="${args.message}"
+        intent="brand"
+        duration="${args.duration}">
+      </eds-toast>
+    `,
+    args: {
+        message: 'You are an admin of this form.',
+        duration: 5000
+    }
+};
+export const AllVariants = {
+    render: () => `
+    <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+      <eds-toast message="Default notification" intent="default" duration="0"></eds-toast>
+      <eds-toast message="Success! Your changes have been saved." intent="success" duration="0"></eds-toast>
+      <eds-toast message="Error: Something went wrong." intent="error" duration="0"></eds-toast>
+      <eds-toast message="Warning: Please review your input." intent="warning" duration="0"></eds-toast>
+      <eds-toast message="You are an admin of this form." intent="brand" duration="0"></eds-toast>
+    </div>
+  `
+};

package/dist/collection/components/eds-toast-manager/eds-toast-manager.js

@@ -31,7 +31,7 @@ export class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '871b9d1b34f1e03b77754a1bfd82b5e506d12592', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: '989e469e815c6af6b46a14fddee85e4707f86704', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     static get is() { return "eds-toast-manager"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class EdsTooltip {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: '1c56a6c10a841575d1450750d2aaf55f9f42f6ee', class: "relative w-full inline-block group" }, h("slot", { key: '631775de9a60642ec51de32708e0d6a0c2c27b66' }), h("div", { key: '9def7dbbc301f465b81ff0e77b182be90d0893de', class: `absolute ${positionClass}
+        return (h("div", { key: '8b4396894b1ec7cc1c2d928ffa5b3d7628f8c4ee', class: "relative w-full inline-block group" }, h("slot", { key: 'c2547098aacc584960f217edcafeb060ce742adc' }), h("div", { key: '1e6beac7e4294456f7a6130c4b0573cce3e4b548', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
             z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out

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

@@ -19,7 +19,7 @@ export const Default = {
     render: (args) => html `
     <div class="mt-32">
       <eds-tooltip content="${args.content}" position="${args.position}">
-        <eds-button label="Hover over me" intent="primary" size="large" aria-label="Hover over me"></eds-button>
+        <eds-button label="Hover over me" intent="brand" pill="true" size="large" aria-label="Hover over me"></eds-button>
       </eds-tooltip>
     </div>
   `,

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

@@ -11,7 +11,7 @@ export class EdsUser {
             this.expanded = e.detail.expanded;
         };
         this.user = undefined;
-        this.intent = 'tertiary';
+        this.intent = 'ghost';
         this.dropdownLabel = 'Account';
         this.expanded = false;
         this.shortMode = false;
@@ -45,8 +45,8 @@ export class EdsUser {
     }
     render() {
         const user = this.parsedUser;
-        const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
-        return (h("div", { key: 'a16f22ec9cc18d2904ea687cbcc56099ea6273ea', class: "block" }, h("div", { key: 'f2f52774b7d5fee5169a0e944f0f9d871421da89', class: "flex items-center" }, h("eds-dropdown", { key: '5232b88c109f2e4957f3582113750d49b1bc025c', ref: (el) => (this.dropdownEl = el), label: this.dropdownLabel, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: '476d9ae9f4812611ae06d0dd1aecb08f0751742a', class: "min-w-[280px] p-8" }, h("div", { key: 'ad74767750213daf55029741a4ed4c8b32f55a27', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: '64bcf2b15cc095143919d5e6a255498d77260607', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: 'b3850b7c774b5434fc41dd0fad6a88c9835d4946', class: "max-w-full" }, user.name && h("p", { key: '74027025ccd58fa4f4016699ebb3f4f541cea858', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '850f015e7a19a8f711cf22477daa5119d4211e15', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '414e6ec14738be04b9b4e5e1fe99a4f263eb2e3b', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '9b12da0776f6d63461c5fd7201bdccb35f430610', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '867b2ce8149f402ae879bd2fab689b252abed95c' })))))));
+        //const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
+        return (h("div", { key: '1a9c56a4868b68ea95fdbb19a61435f5fa23b1b5', class: "block" }, h("div", { key: '242beb1cf3dc3e545be84003615eaed119be3e20', class: "flex items-center" }, h("eds-dropdown", { key: 'e75e0305a60936df4deb5b012fa139ca9a6b024f', ref: (el) => (this.dropdownEl = el), intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "user", label: this.dropdownLabel, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: '09c74d1320e9637e50f7e0f8482e435db7a3319a', class: "min-w-[280px] p-8" }, h("div", { key: 'fa70ecc13e477cf2d2ead8e8dbab4fa3c3587149', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: '69f059e2002237dd874ba62952c2b014ad94cb8a', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: 'c300f3bbe7f57d82913cef614637188babb82818', class: "max-w-full" }, user.name && h("p", { key: 'dc1a4a26f6c1da6c6e88e5aae484ca2ada2864e6', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '76f94c7b0394125d9a6b547722df5545c6b479fd', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '8be3fe5ba1c302d5ef9bfb6d563070c07ed722ca', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '191e365fa893122e09c07aa36d1fde5d28b9b3de', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '8d3fbd032340d5c32fd93ab89b034e7de25ef2e3' })))))));
     }
     static get is() { return "eds-user"; }
     static get encapsulation() { return "shadow"; }
@@ -89,7 +89,7 @@ export class EdsUser {
                 "mutable": false,
                 "complexType": {
                     "original": "Intent",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "resolved": "\"brand\" | \"ghost\" | \"primary\" | \"secondary\"",
                     "references": {
                         "Intent": {
                             "location": "global",
@@ -105,7 +105,7 @@ export class EdsUser {
                 },
                 "attribute": "intent",
                 "reflect": false,
-                "defaultValue": "'tertiary'"
+                "defaultValue": "'ghost'"
             },
             "dropdownLabel": {
                 "type": "string",

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

@@ -23,7 +23,7 @@ export const Default = {
         const container = document.createElement('div');
         container.innerHTML = `
         <eds-header>
-          <div class="px-16">
+          <div class="px-16" slot="actions">
             <eds-user></eds-user>
           </div>
         </eds-header>

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

@@ -33,7 +33,7 @@ export class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '126edc10e07814fef8d8832a3defca18aa1f183e', 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: 'baff427c72d8e73945459cd7988112758685e9dc', 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: '77522e66323f22f1201b7b70a9c7a244627b350b', 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: 'f72b4b776eb902f9525ed7d8daf22f58e76adf6c', 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: '24be31af945fa36a65a512367f61ff64e260acef', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+        return (h("ul", { key: '0f2cc155ce4e73dc47272a4640834cb0ee2e22a5', 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: 'd49c7b463621ffc3c747c4dab0703415a4275555', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: 'a8696a25aafbfb13acf0966545e33caf6f65545d', 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: 'f2a833d8e2e4b13f8149a2b47772489ba7eec29e' }, h("ul", { key: '0d787bde224fcef07d6b5fbae338e2a521c52f05', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd739f505deed8cab298dc94a6bd76521ca8ac847', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '0ae2b7e3cdda8b54defa9f82f1356cd5d1c9b709', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("div", { key: '0ddb6899f2537c472edbdd0de348c4155a861fff' }, h("ul", { key: 'f5dc4b1ec2fac8da8266e89b3ee51b13bbf2ab6c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'f0c8c818f3fcf25c565890fc330f0381c5c0dbc6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b6df1db077f85646585b918b155e49ea139bcc82', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, h("div", { key: '64eb1288afd2cdefa1f104bb43258d55c3245b8c', class: "grid" }, h("span", { key: 'f7fb79a235046c7892b91394b444d17443ca0248', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'f1cece71d557e453c8c9787fd28d7a3f8475a7e2', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '0200a4cf288f1328c67e079171a4530801b78921', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '79666e2d3b62155de387cee661dfc94778b28aa5', class: "grid" }, h("span", { key: 'ee58f239ce1b20323813674c086ae138a7cb70c7', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: 'ee1753329fe850c66dc58dfe900b38c67e8acd55', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'c7b2e2a19336afbded9f8ae3eff507ab12ecc4ac', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '77d1cb3761d5d5d1f415e9b47a31fee3f246dd7c', class: "grid" }, h("span", { key: 'b1d79586fdd0126a44329a6478702803df065afc', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '463fef5cd7531513f644605f4caba6218ddf08ad', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'e0ecb4d4ec8c30f2de553d8763d50b7346c1148a', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1e8f1a7be1aa0418232458729a5bb85d2cb98e4f', class: "grid" }, h("span", { key: 'a82f7eed64466929d0c366ad0cac1dd8d07095b3', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '78c94eaf3d621a16ebc17d210fd3f6baef0e70fe', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: '4b21c9633426e2d49421e9e93adb920306aced13', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, h("div", { key: 'f130fec6b8a3c9ab2eb9ed4d09672624a26865e1', class: "grid" }, h("span", { key: 'b22ec15019ebe56721b7dfb63bcf327aaf5b9823', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '805c9ccaaea2baa8b6c1d41a08ebcd37b6d4153b', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '58b09ffd2a465b1c35d71224db3d56b664669273', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '87e3b35c6837b8b2249c65c2775d86352cdfbaa1', class: "grid" }, h("span", { key: '14da8f6c8e8993d652889808a23dd49e40c515f8', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '739355001e3488c8fd100fc92f90e01d32079311', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '7a9d217a2a097c49eb31c3740cc9c075ee12f646' }), h("ul", { key: 'd12159ccfdbeb0aecb24c6a1d653cad16e692df1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '3619595f2daa91bf7ba9ad3ad6a1775e6e972c56', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b01fa5e47c8c0d3c96d78235c3210a5351b19c39', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '118a50630946847b09f2792fda6fc86f9c4b458e', class: "grid" }, h("span", { key: '4143c24062fcd7b3313867eb4c13a8a83fbbd644', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '5ef264bd694c497e2ba0348a36ef1789bcada833', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'a1456423e9173eb95da41584ecded25d5c61766a', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e345d8cc8c51f2d9d1fea9b2c67051ce5ca8f358', class: "grid" }, h("span", { key: '29b7d5bcfb5ac5f95474f053239a49e7fc91799f', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: 'b446728afaa56156a254499d335c2a1c8e1b0148', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: 'b3d7bc7434cf9f707cd1827cb2dac72fe70d58e2' }), h("ul", { key: 'c83274127086ebcb67f22d946480636059e313af', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '27fbee38a641a525a3dd02f4ad7b6b03fa2f59b5', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '34b924874118811fef752e975532fb6c56692b67', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: 'd494257a35394278969f2ba6db366576e9ae9e49', class: "grid" }, h("span", { key: '849658f307afb30dce0ac150fa9a573ccdbf4c04', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'b86d3700b71389ffa098746c57bef30a9dcb4c60', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '264f5a6e7c66b3feac9ab2476078f43ae864657c', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '67d58325bc81537a1df54aa92bd1c20afb6d4337', class: "grid" }, h("span", { key: '5961ba6cc25b866236521f7aac9e74a2eaa56f6b', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '6f891a3d8a392f7f993a3be70430dd107e2fb687', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '48eb15e8bc88a4df98c15351956e7e3c23fd4f5b', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '1e28e76e270583923233a207dcf14f155ec1a056', class: "grid" }, h("span", { key: '25ddba2af4b76aff1d3c28711052e23e1f924f35', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'a2f75582478b7ac7cb5e5c954fbe6bc41c534714', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '5ed9569671f7644be52a63735cd9f91dd0c38e45', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'b6c65b860f91f5d1b0dea6320588807b54935260', class: "grid" }, h("span", { key: '75fdc2677a0cf76e2fc458bf6ddafa8f25e47c25', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '48a8182282ab4311ebe104ce812924261f350c52', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '40f5edd974eff3891f08fb4bb71e627a7fc6c3e3', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '102f3ef256c4640cd218f50eb368c62f3bacdcae', class: "grid" }, h("span", { key: '84f60a51251d14e207b849c1c4f5cf324f144db7', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '2fb2ce9460a4c1a031678df3625aef0d46c58ca3', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'dd95a53afc3b16fdc47c99cc12764a151e4adc78', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8857d41ec688b9b654e935dc5068d7a56db1175d', class: "grid" }, h("span", { key: '967db71db927b65cff00298730e3195b23927f9c', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '942d70c17ccdd39d5fee5aaa7d08cb7607aba083', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '9905640465b352ee2581ba2f2fb0c111df2e4d51' }), h("ul", { key: '3b503ca2aa38d5ca087b03195f5e8e316f91a046', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'dee0de27a82ce6baf0ef5cb18b8d51015095e93b', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '7cbc284a013f4a3ef36991f66ce4174a6459c414', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '30e2c52d5dc2f14b2d31db28725602fa5db2c7cc', class: "grid" }, h("span", { key: 'f38624cf43d3afc08c6ddf7fda4c0d8c8302cabb', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '7fa03e96c202c03376214cf874de48ad3059a819', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '5668f67a60cf3c148b2f411b5e990409f1b2a63d', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '944dbcbe0b74d5de3b7a6cb6249292c4f6198ce4', class: "grid" }, h("span", { key: 'f85d29f44844bad53e1a8272792909ee655c3d11', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'a8565dd2fcd60b9e8f685ca91be4b91fd9310243', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '1736517e3b869da97268b88ca1e862e52afb72e3' }), h("ul", { key: '89c5251e7c56a1858f98f9877721aaf3818d3ce3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'f1bf325f0f4c4ff13212dd40a957a0407a0e2a31', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '8f324cbb1e6c24f786135607d511cc6040582902', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, h("div", { key: '159d904075a396929e34d9b0b0c47c64e5b2d392', class: "grid" }, h("span", { key: 'e9fe88d716b42ee87cd00cec2e6aba4979778327', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'b2b8401366adbc00142e4b993b193b849034bb64', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '9a29a5ce1149b9581fbc7389117e331c118b7353', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a0f65e92dc676413301ab868d267f1dc621041a3', class: "grid" }, h("span", { key: 'aa6719d23be2279fc63cf11c714b2f3f509a757c', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '64c9b712f7719c7e695044153e1b568c4a52d5f7', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '33ff5f6a668ade9681d9652a8a295f148c86f612', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '1eb01383979ac6d4a0b61964a7bcd19887c8908f', class: "grid" }, h("span", { key: '2aaf61cb79ca93c7303ea37b0e23f755bf933948', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '5814e3e62806533329488aa61f3528d6add22db1', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'e5a78ab4f2ee993cbf6f084314534b645b782dfa', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'db666031e9fee9f2029992f776e1c468f5fb1ce7', class: "grid" }, h("span", { key: '9888a56c6d738e2a175d89e6fe16fe5b4761fc56', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '4337a6bedba3e7dbc09225a031c34f3e193d22bb', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '6cf755699eb3ff7f43b8694bb85fb4559372a0a3', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, h("div", { key: '2800012e3986478469d57dd0d4a44bd4778dbe8d', class: "grid" }, h("span", { key: 'ccb1d4d1b76547aa711bade0d4f02c6c0536edb0', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '71fc93f55e10505f0d806d5ae08198c744c3ccbe', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '99ac406de66c5196e5d7e5cfc75cec977d0a300c', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'fabb9ea805a237c89a06703f17baa630f219b67c', class: "grid" }, h("span", { key: 'ffba37cdb47b4b3ba020a75b8302776569b93df9', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '9831ad808be56cbc208b76686d6a9a22e4daf643', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, h("div", { key: 'c9864bbfb228691b623c2713e3655de3fb871caa', class: "grid" }, h("span", { key: 'cc86cc9b24f429d7ebeca8ac8fff95346b8c149b', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: 'e46c02239ec074fe15cb2979b500a0b7e0a17a56', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '5325d7f9e4a8c28884ba1bc0147d549b42be68c6', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '09af1ed381838dc60410fe2ba9116e4da0644307', class: "grid" }, h("span", { key: 'bde38ea3998629f7ee7cf4cfafd96bfd3e11fb3a', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: 'f2da476b838b6124f8e1b77209fa1a524048e71a', 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: '4536bf9450bc01b4288801fd244fbf62b2c7c6ea', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'bd9714faac09cb05215bfb07c852579b08811d84', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '5dec5f2445f60c982bb90688fa15af5f5d0fc429', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: 'bdfdb8c692531fce0f968c5bdddbe8cf01c30cb5', class: "grid" }, h("span", { key: '74b10fc06c3cf8b221bbcbd240787bd667c1eac6', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '7068886705095e95884dbca60f6955ed1bb3afda', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'aa72791c1ae4129ab625430804eaafea77913852', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9b9875d0701745fd6d3c27d7cf8e8e1438ad1f10', class: "grid" }, h("span", { key: '49034e6e4668ef271a039250b633b042de668932', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: 'b8a5448822eff24b533f27c66f5c67c99fcff631', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: 'af96a3795f253000ec44634d8bd8879cbb42dc02', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '39c7718379605d3bb087928fceb92f1772d32d0f', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '9a2ebe2703870e187652821a9f1e5c312d234b1e', class: "grid" }, h("span", { key: 'f1f50954ea41d6ba2581abacc3be8259b2c5f6df', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '15d0acd635db2af23e23c583e555726d98516499', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '5c587f4fc2d824caef7986348a98e5016314ec71', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8e465b3324ee9f3c2d3a3f77af219f3b9fbd38bd', class: "grid" }, h("span", { key: 'f462ad550675c18668a4710e34adf49106a4010f', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '19cef6f8c5502c1e6ed3344365614a0fed3b7479', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: 'c33912ea002fd04f953d787ab3429aad6cb22819', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '7ee1396dcc55d2ab311a2dd8f3f684f690d149cc', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("ul", { key: 'a74064ecc5a2d9646b76e50bd01fed9974cad718', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '2a79cfc1423158ebe2479e5f4160874c5c57bba0', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'f732817f063656d0f5083fbde7f53d78f4ce319b', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: 'a780e52ac0812ba9f2d0933169a1ed408dcac017', class: "grid" }, h("span", { key: '034c1c3f59ddb5d15b417eddd9049f61721c40e7', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'd85bde05df7d5e756d2c4e106ab364e7c3ec3d30', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'c4f3d8edad422dd905da51a2976b41df8833b2b2', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '6b6055393c1c086ef6c71fde0a06646d32c2cc49', class: "grid" }, h("span", { key: '7678ac503bbfe96a8c7e4ba0833e5872afc4bda4', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: 'e3861166afbbdcb1057d7aedf0363be1650ffef2', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '51a63dafebd44287264876132b1a53c7ada24f59', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '26c3f5cd749a0ce810ce71283ba75292884c1802', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'c2adcca45b3edb97cdc92f1bd177aee32c27d13b', class: "grid" }, h("span", { key: '06ee04c8345bd3c7bee01f28ec79c839d3956812', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '4118231fd5b280b10937136b05e420b3d4fa039d', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '8053667bcbbe539b49a8fa490b28d7fed3c206fb', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'ffbfe32727e433f64c2ca2fefb27348f46cdd123', class: "grid" }, h("span", { key: '50199120a53270d4e9a2fdbfe7b0430fd810247e', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '9f1b49b9e3e9cc941e4047362a531ac39fa4acf2', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '842be74ea7d2839282421c05c94de0ea08edc324', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e36fa05852a0e97af9f6d30b4bc7ac0a03c5ca46', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '5a9e865e7e21279d95072a1e36e514d19bc320f2', class: "grid" }, h("span", { key: '3f50ab38b2537aaa5bd8b0835d3f1bef56ab3a4f', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'e54e1bb4f6f98dc2fc00e3e9777673923a5acb39', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'a840c223d88b635c5c8d6c769148157c5c706589', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e5df78c22dec1102cccfe147fe399d9c2dd95763', class: "grid" }, h("span", { key: 'fac7fb25462577388b702d4d344e6a92c2fef703', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '9ee513ef286f8aa73308e312f2dd15dbd9cd66a6', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '1298bd6a27cfb1f6ae78893aecede2ea38dd5918', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '7c20aa597afc6623e4f48c96a5dfe35fcc794417', class: "grid" }, h("span", { key: '9de55f6cf867d5ca0f359c34df82ea9ea9944b41', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '64ca513c8cb69fa0e8bf8decc3b9315f59e78adc', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'fe4421e78d7c9f6b9fae2aab43046e68fa61b33a', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1913674915edca8c83213f405465670bd1dc53b1', class: "grid" }, h("span", { key: 'a53396290e785e8c055e152d15256388a278606b', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'd175bc7681febbde0bfbcf9816c8077cef210de3', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'bbb39daa24f9881296be8b89fc5dd7d980acace6', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '0fba58a3d08292a83f9ea355c9f5eaf302ec7e62', class: "grid" }, h("span", { key: '06978e5ccd45c684114baba14197fae88a29b009', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '0bd72456a2de62ef77b091861aa042ab9fd0739b', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'f2e9fe5798503e662637ee73182dc00e183c01b7', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '489311b860dfdd54a1facb310a94c684fa34e169', class: "grid" }, h("span", { key: '98b03f75771f438b1dfe1325f0e21ee5b45f9447', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'dfa8933173fdb19186372a63fdf7a2b683c36b95', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '5e7516b9e860965a9a1c1b140988bc8789f4e92e', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'cde427ae68e8d16a547dd1e714847359e5b39197', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '547066eac01d4cc61a1938dccf2d51c1ee3b4f6a', class: "grid" }, h("span", { key: '2deac787b948cfdeaf00b39de8731fa6ffe54512', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '3bbd8a2f82a25f16bb989252912e69bee13b61dd', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'f262c5f8bdfa4355181700078d3a38c13b5598f3', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '352d72f29eba7dec334e1e46898921cfe9dbb1e5', class: "grid" }, h("span", { key: 'd199696680cc4cea53920f3898e97a9cd7cce4ca', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '058951afa29e29683fcb6b0f89ee046482c50669', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, h("div", { key: '8d2c43ece12d3b50970df5843d038c4866eeb18e', class: "grid" }, h("span", { key: '2e2fc983f867ef09fffb61c6f82d796c68c73b17', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '4d9f460a5f6f5b8166f41eee37e15809b2abf943', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'dfb80c0f00dc096561da4d5a85a98969e4568987', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1d7d6041de03afec92b41519d8422a998ce25465', class: "grid" }, h("span", { key: '5298461da58d328376cc3448da7b3994dabe0abd', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'a21f99e92de656addef78784d6c699ac17c82f36', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '36b0e8aed142a859481083b733e2c72dbe88e2a7', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'd6620556f763fc9b59ef96846c1121a78945e6df', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '3be07bea07803e9103ccaa26582502a746f9d832', class: "grid" }, h("span", { key: '25ead831ce5dab6e3c145b8610f6654d85bb185a', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'f5993b7b320e904ee13f63152aa33dd82431c387', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'b01544b8316df980372cc834a39a9adbf7ec2e26', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e7b4641f2fd27c0742439164bd1f10b08c593f4f', class: "grid" }, h("span", { key: 'd4fe6aacd76c7aa6b0e5fa06ff553403b16d05b4', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: 'a2eb07ff8a20e25ddf65e589285f016e1ecdc52e', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
     static get is() { return "gradient-support-palette"; }
 }