@ebrains/components 2.4.1 → 3.1.0

package/dist/components/token-shadows2.js

@@ -3,16 +3,41 @@ import { d as defineCustomElement$2 } from './eds-code-block2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
 const shadows = {
-  small: '0px 1.5px 2px rgba(0, 0, 0, 0.1)',
-  hover: '0px 0px 16px rgba(0, 0, 0, 0.2)',
-  accent: '0px 0px 12px rgba(0, 201, 89, 0.6)',
-  podium: '0px 0px 8px 8px rgb(0 0 0 / 25%);',
-  border: '0 10px 10px rgba(0, 0, 0, 0.15);',
-  'border-top': '0 -10px 10px rgba(0, 0, 0, 0.15);'
+  // Subtle elevation for cards and containers
+  small: '0px 1px 3px rgba(7, 20, 13, 0.1)',
+  
+  // Medium elevation for dropdowns, modals
+  medium: '0px 4px 12px rgba(7, 20, 13, 0.15)',
+  
+  // Hover state for interactive elements
+  hover: '0px 8px 24px rgba(7, 20, 13, 0.2)',
+  
+  // Accent shadow with brand green glow
+  accent: '0px 0px 16px rgba(0, 255, 157, 0.5)',
+  
+  // Green accent for focus states
+  'accent-focus': '0 0 0 3px rgba(0, 255, 157, 0.3)',
+  
+  // Subtle border-like shadow
+  border: '0 1px 3px rgba(7, 20, 13, 0.1)',
+  'border-top': '0 -1px 3px rgba(7, 20, 13, 0.1)',
+  
+  // For elevated components (navigation, sticky headers)
+  elevated: '0px 2px 8px rgba(7, 20, 13, 0.12)',
+  
+  // Strong shadow for modals/overlays
+  overlay: '0px 16px 48px rgba(7, 20, 13, 0.3)',
+  
+  // None - for flat design elements
+  none: 'none'
 };
 
 const dropShadows = {
-  small: '0px 0px 16px rgba(0, 0, 0, 0.3)'
+  small: '0px 2px 8px rgba(7, 20, 13, 0.15)',
+  medium: '0px 4px 16px rgba(7, 20, 13, 0.2)',
+  
+  // Green glow for images/icons
+  'accent-glow': '0px 0px 24px rgba(0, 255, 157, 0.6)'
 };
 
 const shadowTokens = {
@@ -26,7 +51,7 @@ const TokenShadows = /*@__PURE__*/ proxyCustomElement(class TokenShadows extends
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: 'b5a033c491057c60a7b0d2ac1a1ef46a234eb718', class: "w-full mt-28" }, h("ul", { key: '3f39094a92599645183ee2eb60b3726bd69b6166', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (h("section", { key: '0316f767a182da2f2e96c137034d84794947102a', class: "w-full mt-28" }, h("ul", { key: '16586b6a4d565ee58f4ea2465d54d527390d41ca', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
 }, [0, "token-shadows"]);
 function defineCustomElement() {

package/dist/components/token-spacing.js

@@ -6,7 +6,7 @@ const TokenSpacing$1 = /*@__PURE__*/ proxyCustomElement(class TokenSpacing exten
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: '6b3242864d2a095f7a39a2e13be792d864a2f349', class: "w-full" }, h("ul", { key: 'afb2db7e82d1efc4c5f2118d3ce912836214b65c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '01f8b99e5d3bc38d9946f645c79c93bd7c2118b1', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd6986922cca32cdfeb39d3b31f7c3a1a7c1bb9e4', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'f8cfae4596dbd048053d5e433b55d6b4ecaa5351', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '4b19dd66840ea52b31b94d7222bde7cde6346225', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '8a8a0b2815f07dd8e9c3235b16ae1e8bdac1c3e3', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '096cc724cec2033f1f8f87bb5b6fac60dce82bd5', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'cf1917d881f307141e011aadc6d353883bf96720', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '46c1054edcbad036d37d31ea86f85c13ea141dc3', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '562965b0245275992204e227b7cdb0d15df3e7fe', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '1e3f7de64f7916a507b2dad14b9f6f711990dc0f', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'e7d391fca34899535c0c480dca50a169832cad89', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: 'c8ecacf9b3ffe5cc0d5178953ed81612bfe7bfb9', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '578d79c02cfd18f3fd325c854c83a175358de29c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'ea1b373a23cb9f504bb2f668592b05d7906463ff', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '4f5c6994dd127b2d8f6242d34182e768bff37a93', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '6833463ec21e77da1bed3b1c2d2e4df3892d655c', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: 'c625bba2faa660cd7de320d5de8833ad67124e65', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '1c28128ae1046cbe561f526725f2e1f4098841a8', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '2d82995a9278f32ad257b5f43e299dc59fccfb8b', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '7afad7410f0f0c867d32b7e81a384fe294bdba07', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '96a65c8b325e8c271e95d3e98c447ed6c438ee09', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '4907c7fdc86c09e0760ba4ab9e0b06606804ca46', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'cebf638f44789c31845edfafe6d6e82e6fe8d188', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '3ca0c927fe573467215c84ffb8373bb90e4bf949', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '857d52883315b5be7edb90c89602b29f258cabda', class: "w-full" }, h("ul", { key: 'e1dbf5d8e227c9014183c2465bf281e554f7e35b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '85795c6c4ad2c4fc05cda1183a06dadc78521b45', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e0d6a8712ab4d47dca6ca275c09592b8af381b20', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'cbfc5e4dcb4040b375d195246626d833d5b33057', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '8aa060bb7da7ffdbcd343c849f5e62c6db648fd7', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: 'f4e5e7a4eedac3a350f8c68adc5cdc8ba742166a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'de4ce6ca17ba9c0a20a794e1ec55f2fcc1f0c440', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '52766704ac7cb4b1336d4283991c5204c7dece18', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '60c2b72b390ac0b204cf10cf2c01907915e0b3a1', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '1b7922c2a246a1a95e2e26e455b55ea7b5a2a3e9', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '7d43b9c4bc7ebd4883d9d7871b9fb02a2cece586', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '7afeb3b0db7c70f11e09b5df2d396ebfc4454f00', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '3bccca0e93ad8accb3da8ce64c86ee70d2a6f255', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '7cbdb2d1b0cd2f91c1b7a05d6654e89a26f74340', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'a47cb7cce3d8947d07ceff06fea30e19df12c6ec', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '2ee8dc2c52d8a689c12f0333cf7a4d0b36e572f7', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '2c19bbed58312c84d15ef45fc4bd5a699718b259', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '89283aab1c8e84f4d692e290e227d5b91e88cd56', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e341336d74199f51d440ad01217816939b4877eb', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6d59ec419924101b4b2d4daf1fa385cd7d921c2e', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '378293318a5aa7c0c9fecb575e533aa97c7b0ecf', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'a8e4328bb418b7b878aebfdfe4022e3054b5167e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '421adc7f90db876dca2304f0c0f794c2b93b4536', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'ebb689a6011c3da5282eb3bb1cc1a0581af86e90', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '8924318c5edcb5d78c37dc1a768e1b3e0fa775ed', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
 }, [0, "token-spacing"]);
 function defineCustomElement$1() {

package/dist/components/token-typography.js

@@ -5,8 +5,8 @@ import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 const headings = {
   'heading-01': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '42px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -23,8 +23,8 @@ const headings = {
   },
   'heading-02': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '36px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -38,8 +38,8 @@ const headings = {
   },
   'heading-03': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '36px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -50,8 +50,8 @@ const headings = {
   },
   'heading-04': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '28px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -62,8 +62,8 @@ const headings = {
   },
   'heading-05': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '28px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -71,8 +71,8 @@ const headings = {
   },
   'heading-06': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '22px',
       lineHeight: '120%'
     }
@@ -82,8 +82,8 @@ const headings = {
 const bodies = {
   'body-01': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '20px',
       lineHeight: '140%',
       letterSpacing: '-0.01em'
@@ -91,8 +91,16 @@ const bodies = {
   },
   'body-02': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
+      fontSize: '17px',
+      lineHeight: '150%'
+    }
+  },
+  'body-03': {
+    sm: {
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '17px',
       lineHeight: '150%'
     }
@@ -102,8 +110,8 @@ const bodies = {
 const uis = {
   'ui-01': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '18px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -111,8 +119,8 @@ const uis = {
   },
   'ui-02': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '16px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -120,8 +128,8 @@ const uis = {
   },
   'ui-02-light': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '16px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -129,8 +137,8 @@ const uis = {
   },
   'ui-03': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '14px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -138,8 +146,8 @@ const uis = {
   },
   'ui-03-light': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '14px',
       lineHeight: '130%',
       letterSpacing: '-0.01em'
@@ -147,8 +155,8 @@ const uis = {
   },
   'ui-04': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '12px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -156,8 +164,8 @@ const uis = {
   },
   'ui-05': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '10px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -165,19 +173,27 @@ const uis = {
   },
   caption: {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '12px',
       lineHeight: '120%'
     }
+  },
+  code: {
+    sm: {
+      fontFamily: 'var(--plex-mono)',
+      fontWeight: 400,
+      fontSize: '14px',
+      lineHeight: '140%'
+    }
   }
 };
 
 const displays = {
   'display-01': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '120px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -185,12 +201,26 @@ const displays = {
     lg: {
       fontSize: '150px'
     }
+  },
+  'display-02': {
+    sm: {
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
+      fontSize: '120px',
+      lineHeight: '100%',
+      letterSpacing: '-0.02em'
+    },
+    lg: {
+      fontSize: '150px'
+    }
   }
 };
 
 const typography = {
   families: {
-    sans: 'Inter, Helvetica, Arial, sans-serif'
+    inter: 'Inter, Helvetica, Arial, sans-serif',
+    'plex-sans': '"IBM Plex Sans", Inter, Helvetica, Arial, sans-serif',
+    'plex-mono': '"IBM Plex Mono", "Courier New", Courier, monospace'
   },
   typesets: {
     ...headings,
@@ -206,23 +236,24 @@ const TokenTypography$1 = /*@__PURE__*/ proxyCustomElement(class TokenTypography
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: 'aedc3e99bcef2710c6919855fd30de9fa44d48f5', class: "w-full" }, h("ul", { key: '7391f39ff3599e976cd19805f35a5d4e74e06fa6', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'ce7e291884a4b1bef85050a04c798a365287a131', class: "w-full" }, h("ul", { key: '070567197ed557c07284ebe733c4f9f3246c60d7', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
-            .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, h("div", { class: "mr-auto hidden lg:block", style: {
-                fontFamily: typography.families.sans,
+            .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 flex flex-col mt-16" }, h("div", { class: "w-full p-16 border border-soft rounded", style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem', alignItems: 'center' } }, h("div", { style: {
+                fontFamily: style.fontFamily || typography.families['plex-sans'],
                 fontWeight: style.fontWeight,
                 fontSize: style.fontSize,
                 lineHeight: style.lineHeight,
                 letterSpacing: style.letterSpacing
-            } }, h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), h("div", { class: "mr-auto block lg:hidden p-4" }, h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), h("div", { class: "ml-auto" }, h("eds-code-block", { code: [
+            } }, h("span", { class: "text-default" }, `${typeKey}`), h("div", { style: { fontSize: '12px', fontWeight: '400', color: '#7A7B7A', marginTop: '4px', fontFamily: '"IBM Plex Mono", monospace' } }, size, " \u00B7 class: f-", typeKey)), h("div", null, h("eds-code-block", { code: [
+                `/* Utility: f-${typeKey} | Screen: ${size}:f-${typeKey} */`,
                 style.fontSize && `font-size: ${style.fontSize};`,
                 style.lineHeight && `line-height: ${style.lineHeight};`,
                 style.letterSpacing && `letter-spacing: ${style.letterSpacing};`,
                 style.fontWeight && `font-weight: ${style.fontWeight};`,
-                style.fontFamily && `font-family: ${style.fontFamily};`
+                `font-family: "IBM Plex Sans", sans-serif;`
             ]
-                .filter(Boolean) // Remove any falsy values (e.g., undefined, null)
-                .join('\n'), language: "css", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-letterSpacing)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--sans: Inter, Helvetica, Arial, sans-serif;`, class: "min-w-[250px] mb-4" }))))))))));
+                .filter(Boolean)
+                .join('\n'), language: "css" }))))))))));
     }
 }, [0, "token-typography"]);
 function defineCustomElement$1() {

package/dist/esm/color-primary-palette_6.entry.js

@@ -32,7 +32,7 @@ const ColorPrimaryPalette = class {
         ];
     }
     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))))))));
     }
 };
 
@@ -93,7 +93,7 @@ const ColorSecondaryPalette = class {
         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))))))));
     }
 };
 
@@ -154,7 +154,7 @@ const ColorSupportPalette = class {
         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)))));
@@ -194,7 +194,7 @@ const GradientPrimaryPalette = class {
         ];
     }
     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))))))));
     }
@@ -256,19 +256,19 @@ const GradientSecondaryPalette = class {
         ];
     }
     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)))))));
     }
 };
 
@@ -320,11 +320,11 @@ const GradientSupportPalette = class {
         ];
     }
     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'))))));
     }
 };
 

package/dist/esm/components-section.entry.js

@@ -141,7 +141,7 @@ const ComponentsSection = class {
         }
     }
     render() {
-        return h("div", { key: '558e6c2ad94148d2371879fa7ae8f4ce6d996f73', class: "container" }, this.renderContent());
+        return h("div", { key: '8d781f8e27f93eb003bd4390da57503dc17a945b', class: "container" }, this.renderContent());
     }
 };