@ebrains/components 0.8.0-alpha.0 → 0.9.1-beta

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,370 +1,9 @@
-# How to run components package
+# components
 
+## Usage
 
-## Test it locally
+More information about importing and using the package can be found currently in the [https://design.ebrains.eu/ui-components/](EBRAINS Design System).
 
-Update the `index.html` that is found under the components package with the components you want to test. 
+## Licensing
 
-```bash
-nx serve components
-```
-
-Then: `http://localhost:3333/`
-
-
-## Build it 
-
-```bash
-nx build components
-```
-
-It produces the packages below: 
-- react 
-- vue
-- angular 
-
-## Unit tests 
-
-```bash
-nx test components
-```
-
-## E2E tests 
-
-```bash
-nx e2e components
-```
-
-## Lint components 
-
-```bash
-nx lint components
-```
-
-## Storybook components 
-
-```bash
-nx storybook components
-```
-
-
-## Using in Standalone Apps (no NX application)
-
-### React 
-
-1. install `npm install @ebrains/components`
-
-2. Depending now on the configuration and bundling of your REACT application importing it as:
-
-`import { EdsFooter } from '@ebrains/react'`
-
-could work. 
-
-However, react wrappers internally make use of the `@ebrains/components/loader` to properly work. Thats been said it might be that to RESOLVE the path to the `node_modules/@ebrains/components` -> `@ebrains/components/loader` to point to `@ebrains/components/loader/index.js` using your bundler like `webpack` for instance that would be 
-
-`resolve alias` like below:
-
-```
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  entry: './src/index.tsx',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js',
-  },
-  resolve: {
-    alias: {
-      '@ebrains/components/loader': '@ebrains/components/loader/index.js',
-    },
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'babel-loader',
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './public/index.html',
-    }),
-  ],
-  devServer: {
-    static: './dist',
-    port: 3333,
-  },
-};
-```
-
-#### Example App.js
-
-```
-import React from "react";
-
-import { EdsHeader, EdsFooter, EdsLink, EdsToastManager } from "@ebrains/react";
-
-const App = () => {
-  return (
-    <div>
-      <EdsToastManager></EdsToastManager>
-      <EdsHeader
-        home-url="/"
-        user-feature={true}
-        keycloak-url="http://localhost:8080"
-        keycloak-realm="nigeor-realm"
-        keycloak-client-id="stencil-app"
-        links='[
-                    { "label": "About", "url": "/about" },
-                    { "label": "Focus Areas", "url": "/focus-areas" },
-                    { "label": "News & Events", "url": "/news-and-events" },
-                    { "label": "Contact", "url": "/contact" }
-                ]'
-      ></EdsHeader>
-      <img src="https://unpkg.com/@ebrains/svgs/src/img/loader.svg" />
-      <h1>Hello, React with TypeScript!</h1>
-      <EdsLink
-        label="Hello there this is a web component"
-        intent="primary"
-        icon="loader"
-      ></EdsLink>
-      <EdsFooter />
-    </div>
-  );
-};
-
-export default App;
-```
-
-### No framework used in this application - pure html/css/js
-
-```npx serve -l 3333```
-
-#### using npm 
-
-`npm init -y`
-
-to init the workspace and the `package.json`
-
-#### install @ebrains/component and use them like 
-
-```
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Web App</title>
-    <!--<script defer type="module" src="https://unpkg.com/nigeor-test-stencil@1.1.5"></script>-->
-  <link rel="stylesheet" href="./node_modules/@ebrains/assets/styles/output.css">
-
-  <script type="module">
-    import {defineCustomElements} from "./node_modules/@ebrains/components/loader/index.js";
-    defineCustomElements(window);
-  </script>
-
-</head>
-<body>
-    <eds-header home-url="/"></eds-header>
-    <eds-link label="No framework at  all" intent="primary" icon="chevron-right"></eds-link>
-    <h1>Hello, World!</h1>
-</body>
-</html>
-```
-
-#### Load from unpkg CDN directly like
-
-```
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Web App</title>
-    <!--<script defer type="module" src="https://unpkg.com/nigeor-test-stencil@1.1.5"></script>-->
-  <link rel="stylesheet" href="https://unpkg.com/@ebrains/assets/styles/output.css">
-
-  <script type="module">
-    import {defineCustomElements} from "https://unpkg.com/@ebrains/components/loader/index.js";
-    defineCustomElements(window);
-  </script>
-
-</head>
-<body>
-    <eds-header home-url="/"></eds-header>
-    <eds-link label="No framework at  all" intent="primary" icon="chevron-right"></eds-link>
-    <h1>Hello, World!</h1>
-</body>
-</html>
-``` 
-
-Just make sure to wait loading the html until components are fully loaded. that could be using a spinner (asyn/wait)
-
-
-#### Load the .esm.js directly 
-
-Another way to load the web-components is to use direclty the `components.esm.js` module 
-
-```
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Simple Web App</title>
-
-    <link rel="stylesheet" href="style.css" />
-    <script
-      type="module"
-      src="./node_modules/@ebrains/components/dist/components/components.esm.js"
-    ></script>
-  </head>
-  <body>
-    <eds-toast-manager></eds-toast-manager>
-    <eds-header
-      home-url="/"
-      user-feature="true"
-      keycloak-url="http://localhost:8080"
-      keycloak-realm="nigeor-realm"
-      keycloak-client-id="stencil-app"
-      links='[
-        { "label": "About", "url": "/about" },
-        { "label": "Focus Areas", "url": "/focus-areas" },
-        { "label": "News & Events", "url": "/news-and-events" },
-        { "label": "Contact", "url": "/contact" }
-      ]'
-    ></eds-header>
-    <h1>Hello, World!</h1>
-  </body>
-</html>
-```
-
-#### Load the style from your global css 
-
-style.css
-```
-@import url("https://unpkg.com/@ebrains/assets/styles/output.css");
-```
-
-```
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Web App</title>
-
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <eds-header home-url="/"></eds-header>
-    <h1>Hello, World!</h1>
-</body>
-</html>
-```
-
-#### Load an SVG 
-
-The best way to load an SVG file is loading directly from unpck CDN 
-
-```
-<img src="https://unpkg.com/@ebrains/svgs/src/img/logo/vLogoBlack.svg" />
-```
-
-or using the UI component direclty:
-
-```
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Simple Web App</title>
-
-    <link rel="stylesheet" href="style.css" />
-    <script
-      type="module"
-      src="https://unpkg.com/@ebrains/components/dist/components/components.esm.js"
-    ></script>
-  </head>
-  <body>
-    <eds-img src="https://unpkg.com/@ebrains/svgs/src/img/eu.svg" ></eds-img>
-  </body>
-</html>
-```
-
-Make sure again to wait for the request to be served!
-
-
-### Vue App 
-
-In your `App.vue` do:
-
-```
-<template>
-  <h1 className="f-heading-02">Vue App</h1>
-  <eds-header
-    home-url="https://ebrains.eu"
-    user-feature="true"
-    links='[
-        { "label": "Aboutt", "url": "/about" },
-        { "label": "Focus Areas", "url": "/focus-areas" },
-        { "label": "News & Events", "url": "/news-and-events" },
-        { "label": "Contact", "url": "/contact" }
-      ]'
-  ></eds-header>
-</template>
-
-<script>
-  import { EdsHeader } from '@ebrains/vue';
-
-  export default {
-    name: 'App',
-    components: {
-      EdsHeader
-    },
-    mounted() {
-      console.log('process.env:', process.env); // Log process.env
-      
-      //renderWebComponents(testCmps, 'root');
-    },
-  };
-</script>
-
-```
-
-
-### Angular App
-
-To get started, first install our Web Components package:
-
-`npm install @ebrains/components`
-
-Before you can use the Web Components in Angular, you must import and add Angular’s `CUSTOM_ELEMENTS_SCHEMA`. This allows the use of Web Components in HTML markup, without the compiler producing errors. The CUSTOM_ELEMENTS_SCHEMA needs to be included in any module that uses custom elements. Typically, this can be added to AppModule:
-
-```
-// Import custom elements schema
-import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-
-@NgModule({
-  // ...
-  // Add custom elements schema to NgModule
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AppModule { }
-```
-
-The final step is to load and register the components in the browser. @ebrains/components includes a main function that handles this. That function is called defineCustomElements() and it needs to be called once during the bootstrapping of your application. One convenient place to do this is in main.ts as such:
-
-// Import EBRAINS Web Components
-import { defineCustomElements } from "@ebrains/components/lib/loader";
-
-// Register EBRAINS Web Components
-defineCustomElements(window);
-Once included, components can be used in your HTML markup as in the following example:
-
-<eds-button label="Angular Button"></eds-button>
+The contents of this package are licensed under `MIT`.

package/dist/cjs/bookmark-c61853d9.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const bookmark = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 4H15V16L10 12.0138L5 16V4Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linejoin="round"
+    />
+  </svg>`;
+
+exports.bookmark = bookmark;

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

@@ -36,7 +36,7 @@ const ColorPrimaryPalette = class {
         ];
     }
     render() {
-        return (index.h("ul", { key: '153e3c0f00db6f824cb0f43b420645bcbd66632f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (index.h("ul", { key: '970e6baf4b258e9a0ed194316daf1c862d17733e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
 };
 
@@ -97,23 +97,15 @@ const ColorSecondaryPalette = class {
         this.show = undefined;
     }
     render() {
-        return (index.h("ul", { key: 'b0af2cdf6524cf79ef8d28f37533d1f84812f174', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (index.h("ul", { key: '54f985b91b28ae253a06ec313872ccc81449bf51', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
 };
 
 const ColorSupportPalette = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        // Support palette data
         this.colors = [
-            {
-                rgb: 'R20 G20 B20',
-                cmyk: 'C78 M69 Y61 K87',
-                hex: '#141414',
-                pantoneC: '',
-                pantoneU: '',
-                background: '#141414'
-            },
+            { rgb: 'R20 G20 B20', cmyk: 'C78 M69 Y61 K87', hex: '#141414', pantoneC: '', pantoneU: '', background: '#141414' },
             {
                 rgb: 'R56 G56 B56',
                 cmyk: 'C68 M58 Y55 K63',
@@ -138,18 +130,39 @@ const ColorSupportPalette = class {
                 pantoneU: 'PANTONE 649 U',
                 background: '#E6E6E6'
             },
-            {
-                rgb: 'R255 G255 B255',
-                cmyk: 'C0 M0 Y0 K0',
-                hex: '#FFFFFF',
-                pantoneC: '',
-                pantoneU: '',
-                background: '#FFFFFF'
-            }
+            { rgb: 'R255 G255 B255', cmyk: 'C0 M0 Y0 K0', hex: '#FFFFFF', pantoneC: '', pantoneU: '', background: '#FFFFFF' }
         ];
     }
+    getTextColor(value) {
+        // hex branch
+        if (value.startsWith('#')) {
+            const hex = value.slice(1);
+            const r = parseInt(hex.substring(0, 2), 16);
+            const g = parseInt(hex.substring(2, 4), 16);
+            const b = parseInt(hex.substring(4, 6), 16);
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        // rgb(...) branch
+        if (/rgb/i.test(value)) {
+            const nums = value
+                .replace(/rgba?\(/i, '')
+                .replace(')', '')
+                .split(',')
+                .map((n) => parseFloat(n.trim()));
+            const [r, g, b] = nums;
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        // fallback
+        return 'text-default';
+    }
     render() {
-        return (index.h("ul", { key: 'c58041047c7d7993ac4e936051d40e1e8dda5263', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), index.h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
+        return (index.h("ul", { key: 'cf31dbb2778735cb95f40243f557e97c15cd29f0', 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 (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: `f-body-02 ${textClass}` }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), index.h("div", { class: "grid" }, index.h("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), index.h("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));
+        })));
     }
 };
 
@@ -185,7 +198,7 @@ const GradientPrimaryPalette = class {
         ];
     }
     render() {
-        return (index.h("ul", { key: '95d991a7331f3f75909421db363b0c30646dd9f7', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (index.h("ul", { key: '469fc7f19a4346b7e930095c489c0e89cc58e6df', 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) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16" }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
@@ -247,19 +260,19 @@ const GradientSecondaryPalette = class {
         ];
     }
     render() {
-        return (index.h("div", { key: '95324cdbb1dc2eec5d1b47b5a88b69c9e2139535' }, index.h("ul", { key: 'deddb39135e4dee2c6b401eb543ea2169d606331', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '848cdd2984b1dc5b2c0672ab125fe951b9c7d30c', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: 'af8b2fd8be90d0fffe2334f66878a34b32fa148f', class: "effect-height flex items-center justify-between p-16", style: {
+        return (index.h("div", { key: 'bcfd5c5ca5a01138d27ae5f0867998bb40d526ac' }, index.h("ul", { key: '6f79d13b142488f1253ba77b0a044fd8ada8d297', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: 'e8e44a1ee3993564fc2331d0d9337a2e0ceaebc1', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '229940b2fe6264429fb7627c9d3aa02e18e90b5a', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, index.h("div", { key: 'b796899ca009ee80c877e2e728639abcf2b46770', class: "grid" }, index.h("span", { key: '2ba29c5bb91fef4b817f853056701feb001bdca0', class: "f-body-02" }, this.colors[0].rgb), index.h("span", { key: '23e36499f1ba4dd08ac928c6fefc6d38f03f4724', class: "f-body-02 w-full" }, this.colors[0].cmyk), index.h("eds-code-block", { key: '11af3db24e81dc5382e8b3c64296e0416c3a2a5a', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '0bc7aa191c1ddd71c5e716ac07687c2412530bad', class: "grid" }, index.h("span", { key: '3b84d1f6f75c3fa401fc08597318cb24e00a6db3', class: "f-body-02" }, this.colors[0].pantoneC), index.h("span", { key: 'beb7250e567791947e9ccda81cf99d4fd3c7e007', class: "f-body-02" }, this.colors[0].pantoneU))), index.h("div", { key: 'd5c6301370b862c3bd713188b468ed22f9377e9c', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '0cf83c147dde777efe2783d2148e780ab328c978', class: "grid" }, index.h("span", { key: '06f893ff45abe7c1d3cb817fe5834a5176c93f06', class: "f-body-02" }, this.colors[0].rgb), index.h("span", { key: '3967e17ed980810d8b35b0d2b2e754f7b2e8b3e0', class: "f-body-02 w-full" }, this.colors[0].cmyk), index.h("eds-code-block", { key: '2adc489cee7b3a3a67f62493fb5e125fc1e75c04', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'cb27de2308afcaaaad82675c50573805e51f36f7', class: "grid" }, index.h("span", { key: '0655190c8a8d555ed0fec5c319ff349d9fefc4d0', class: "f-body-02" }, this.colors[0].pantoneC), index.h("span", { key: '2b75a99e922965547e9f86240c0db577ec0b9682', class: "f-body-02" }, this.colors[0].pantoneU))), index.h("div", { key: 'a8b7ef1c5309601366baffa2d3b48c6cd8893eb6', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, index.h("div", { key: '14958bec1bc69da8afcd5abbec40153900003aea', class: "grid" }, index.h("span", { key: '7efe478f1588fc12a88e74eb6385a9ac1e83f2d2', class: "f-body-02" }, this.colors[1].rgb), index.h("span", { key: 'aaf8b133f495682cd5934be9719889fd6cd79d5f', class: "f-body-02 w-full" }, this.colors[1].cmyk), index.h("eds-code-block", { key: 'ba3050a85770e74810686603510bbd439e9c48c2', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'cc133d0be620d1749317a2d46386c3b662c7e231', class: "grid" }, index.h("span", { key: '77a6292eec6c5b36a209d627e8ebe4b0d8978529', class: "f-body-02" }, this.colors[1].pantoneC), index.h("span", { key: '4bbf9a51af72aecd3d8e40388d56f7ec04307e5b', class: "f-body-02" }, this.colors[1].pantoneU))))), index.h("eds-block-break", { key: 'd8bd95b4b6a4992490b8a28c88ba94524ed3f89d' }), index.h("ul", { key: 'dcd47948561897e2b9dd5052f542b6faece97160', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '4c2780b54496da965860adb2a13b3874198d2c50', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '1817732e6c42366661ef95cc1efad7bb3443481d', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: 'fd01906e34a91984aa7ce6439abcf03673d70099', class: "grid" }, index.h("span", { key: 'd4e119028ad415d9a21988c2bf603011856bb78d', class: "f-body-02" }, this.colors[1].rgb), index.h("span", { key: '4ba9d26645884bc1fc75741ee40509af56a9e7ae', class: "f-body-02 w-full" }, this.colors[1].cmyk), index.h("eds-code-block", { key: '5be1c28b15b458fba099868b598ee513077562e0', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '8609b9e68f23aaec35e76b312a425c376d508892', class: "grid" }, index.h("span", { key: 'f5cbb2d867e1a66e8371ebd73503ac1cd208f51d', class: "f-body-02" }, this.colors[1].pantoneC), index.h("span", { key: 'b72b8b23c5b1e136cb1114af22f34c6222b0d0f9', class: "f-body-02" }, this.colors[1].pantoneU))))), index.h("eds-block-break", { key: '73e70749f132579efc19bccab4fff8b3e2d6979a' }), index.h("ul", { key: 'ae61acfb731129d85d3c5151ac08d676113a5971', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '2b59810dbc40db3dfca10a09ad524499ea87f0e9', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: 'e66cdabf69654205b975801bbc5ff102982fba78', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, index.h("div", { key: 'fdb50c1ad5c1b19aa7d6b271857d63d7ff129d66', class: "grid" }, index.h("span", { key: '4b5f5b8e075d73329803b5ca1204c257e8e8d6c4', class: "f-body-02" }, this.colors[2].rgb), index.h("span", { key: '67a26de500956ca477aa2213e6ecf8bea6d7ecb0', class: "f-body-02 w-full" }, this.colors[2].cmyk), index.h("eds-code-block", { key: 'f0cd24d68af26304da2bfc8755328ca9d319c1b9', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'f45ddb2b08e36a64e0383289fe7e1e70d11bc725', class: "grid" }, index.h("span", { key: 'b5f5fd53de2e0fee6122c0797f3269dd0e70e9f3', class: "f-body-02" }, this.colors[2].pantoneC), index.h("span", { key: 'cbe037d718989eaf0274463ed300e81415e701e9', class: "f-body-02" }, this.colors[2].pantoneU))), index.h("div", { key: '64e866bab4859c8a35a08440bf4c855d3824d20a', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '0f4d10150dc7694d7d4ccf59bc99a95216a00bc5', class: "grid" }, index.h("span", { key: '85bbcdc4ca9b1f35625c15f5e742c35599084456', class: "f-body-02" }, this.colors[2].rgb), index.h("span", { key: '0b5354d88e4ada3497bb20ae9138e3f23d31b5e7', class: "f-body-02 w-full" }, this.colors[2].cmyk), index.h("eds-code-block", { key: 'a67ca35d57d13a66fcab132565c1a246e37f42e8', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '41322955767caa5ce439b142ccacdcb809ebc52e', class: "grid" }, index.h("span", { key: 'ab06d7acd75b1065d057a4ec8cd7af93cd91bb5c', class: "f-body-02" }, this.colors[2].pantoneC), index.h("span", { key: 'ec63cad47f9021cfd1bed508721cc5772d037bd3', class: "f-body-02" }, this.colors[2].pantoneU))), index.h("div", { key: 'ce5898b0ff195f6033d28e68dfd981a1813a23a4', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, index.h("div", { key: '1060ff9082dc3fd0c1d76a7b1c348ee980d59d5d', class: "grid" }, index.h("span", { key: 'abe785e555f4ec227ae6fd5eda65431b63f69d84', class: "f-body-02" }, this.colors[3].rgb), index.h("span", { key: '43a7d7afd959c53d552225df797f308f2c6672c0', class: "f-body-02 w-full" }, this.colors[3].cmyk), index.h("eds-code-block", { key: '0238b051353f4d717d7e1fc8a2d038e03c337150', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'c922aca2c73e3d489f029edee6c21f2c741608bc', class: "grid" }, index.h("span", { key: 'fd09943b23b1c58efcb1f971fde59cdcdd6fb6d3', class: "f-body-02" }, this.colors[3].pantoneC), index.h("span", { key: '5a9e9d68d53c02c9a871efc71e384bfe4f3dc15e', class: "f-body-02" }, this.colors[3].pantoneU))))), index.h("eds-block-break", { key: '708821f7228d40fa0a6af2ce906955e7d0a9134a' }), index.h("ul", { key: 'af9971a8abdf34a4397466712e6391496a4fbbfb', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: 'fc026fa3187ed8536a553a34eca496d60c0a3c28', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: 'd42c5c8620956085d632daa27f552935cc57c4f5', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '1126fbf08d60b5840ba76e7d838d0ebfb47a0af9', class: "grid" }, index.h("span", { key: 'd18fbf24fcedb41638c626991e9ef3706cd0e4f7', class: "f-body-02" }, this.colors[3].rgb), index.h("span", { key: '9d7d1df13ce9ab7b447d72851a2f5f3b66cf1034', class: "f-body-02 w-full" }, this.colors[3].cmyk), index.h("eds-code-block", { key: '5f92ba3b52a56638b7469572614d75fde23a1516', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '4b17671dd5d18382d80ee52b8cbce51633d78603', class: "grid" }, index.h("span", { key: 'cc6a59b63bcd128d5adfd70d908cecba1324a717', class: "f-body-02" }, this.colors[3].pantoneC), index.h("span", { key: '1cf37dab03769794f85d09d8d331306fb24e2fb3', class: "f-body-02" }, this.colors[3].pantoneU))))), index.h("eds-block-break", { key: '1e1888c860c39e5ac93c2dcd5ff9bf65e8c3b412' }), index.h("ul", { key: '46ee0e1cd0a80a6da7991ee9474e4db5841b1c52', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '59343e8799ddb56b0d14d3a9c43f4d43c5d82cba', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '5388a8eb55332a9a6d5b5fbe8bf022eb2a76d06c', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, index.h("div", { key: '3cd0f3371918e997facce06672764914a168e7b9', class: "grid" }, index.h("span", { key: '1111da42bd889d65bba8615cbb321c1ad6386a5b', class: "f-body-02" }, this.colors[4].rgb), index.h("span", { key: '172ea59eb6a729ba29341662dba089d665dfe921', class: "f-body-02 w-full" }, this.colors[4].cmyk), index.h("eds-code-block", { key: '7a56e5937a4ae52d5c55489d49379b04d99f1bc3', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '4a5fd644619823b3ae0e30cd60fa6d7bfc643047', class: "grid" }, index.h("span", { key: '15a2d7d98420c0ebb8fe3914bb1457e821a5a99a', class: "f-body-02" }, this.colors[4].pantoneC), index.h("span", { key: '4e09b1d98588aba17283686303f02ddce63b9f79', class: "f-body-02" }, this.colors[4].pantoneU))), index.h("div", { key: '527816987ba5afd8d906ab1b1c92c1499bb0c82c', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '0f57d835c53d5844a155c8cfb78b1b3d0d37aecd', class: "grid" }, index.h("span", { key: '65b91767f90901590ca0ca4d892bf4bf5ca215d2', class: "f-body-02" }, this.colors[4].rgb), index.h("span", { key: 'c2c46be9bee84e4ca53929dc9a0f5b87f48ad3ed', class: "f-body-02 w-full" }, this.colors[4].cmyk), index.h("eds-code-block", { key: 'c40e13a9f535d710cede159d555fac9bbddf7b4c', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '0ebf1113e44f4e2704465d286022b84ddd57c43e', class: "grid" }, index.h("span", { key: 'e8c7485dfe4b2d1e36eae2cb21ec624384e5c085', class: "f-body-02" }, this.colors[4].pantoneC), index.h("span", { key: '7d875d8c15a4f7bee7c746d9f297bd910f4cc5a6', class: "f-body-02" }, this.colors[4].pantoneU))), index.h("div", { key: '27777683ba91c02274fd691b09a43c836e24aca3', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, index.h("div", { key: '5723ecebf48cb271b908892880b2e5916a2260d3', class: "grid" }, index.h("span", { key: '1f4bc5243c69d4d875100dea5678eca909a318d6', class: "f-body-02" }, this.colors[5].rgb), index.h("span", { key: 'a0d7e3283b2c27c9c909174671f84f0e127fd47b', class: "f-body-02 w-full" }, this.colors[5].cmyk), index.h("eds-code-block", { key: '80eb873c0ef3db0ab0fedb0b97fd6a55c77b7a9b', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '7ad8e2f8fd77fa22f8c960b9f60b93160d7b18e4', class: "grid" }, index.h("span", { key: '76d8a46dc70cabfb90314730a14cf613dd94e5a2', class: "f-body-02" }, this.colors[5].pantoneC), index.h("span", { key: '6fba90e3c22c2a2cb79dc99345648fdce235a529', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, index.h("div", { key: '4f9b082b9e6c5d679801446fa5a7b88d18b40147', class: "grid" }, index.h("span", { key: '6afd59aafb0f1b793a8f989f7d201a922951dacd', class: "f-body-02" }, this.colors[5].rgb), index.h("span", { key: '2114f91de062deba17e69d9bff77670107ed3f91', class: "f-body-02 w-full" }, this.colors[5].cmyk), index.h("eds-code-block", { key: '08f8b3155d932eed5b05f4dbfc0e3c6e23aa02b5', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '5459b32225dbf86021dd6a95e84b73bf14a74fe8', class: "grid" }, index.h("span", { key: 'bedfeaa4250c3bf74f267d50aecc0df93fbf21ad', class: "f-body-02" }, this.colors[5].pantoneC), index.h("span", { key: '8cc7a7a1abef3dcccad63c600692bffa5df89837', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
 };
 
@@ -311,11 +324,11 @@ const GradientSupportPalette = class {
         ];
     }
     render() {
-        return (index.h("ul", { key: '2d73e1f2954e7900990f3f1b92e088172c48d193', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: 'ddd095d39334d645bd69143f975c869c9061becf', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '8fdd52e523f612f65293cefa69cd1587722ea0b2', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, index.h("div", { key: 'ba16ce258232ac4ff1dd57e69ce89eba2755ea4e', class: "grid" }, index.h("span", { key: 'e5bbd8438eedce22c00a570b5000bb2f9544f943', class: "f-body-02" }, this.colors[0].rgb), index.h("span", { key: '26bdb7eab2bf73b568d79a31d697d835a1a2c16d', class: "f-body-02 w-full" }, this.colors[0].cmyk), index.h("eds-code-block", { key: '63ed93911453afa708119d3bc237581fc14d859b', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'a99939016fee0fdcbfc8916ddabc70da990506b6', class: "grid" }, index.h("span", { key: 'f51ea8694129ef99920037fae8837b2c4f7552ce', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), index.h("span", { key: '047e32f25dc6f2c8d8c0881c500e4485d20e9312', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), index.h("li", { key: '8364ad80dc8a18b4315f9e39f8d364fe928e1334', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: 'f03dce05b8e864f63560d3ac02bdbc37c66f5c00', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, index.h("div", { key: 'b6995567668ffafb14824bfcb2394dfbaff7f718', class: "grid" }, index.h("span", { key: 'eea29f050955e9cb036650af9760f4056ca2de29', class: "f-body-02" }, this.colors[1].rgb), index.h("span", { key: '4978ad35c6902267c8bbecb471ea479c2a08577b', class: "f-body-02 w-full" }, this.colors[1].cmyk), index.h("eds-code-block", { key: 'e043773af3e73ebd7978c7f7bc7cbc0ca02f162c', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '3fa13de855940e4188818ff7031463b9d3915511', class: "grid" }, index.h("span", { key: '0c5f5c3ab2946033c7ff74f39b7a71380471d887', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), index.h("span", { key: '4b21f7ed78add17b4d013c59aac12976670ef037', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), index.h("li", { key: 'fce44ca75c9d2317b6fd9a1953db054b8d1ca4b3', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '4748c78922ae9c03cd457911b0e9e92c818545d8', class: "effect-height flex items-center justify-between p-16", style: {
+        return (index.h("ul", { key: 'd965ec67f29697480e0b7a6fea0743d946476153', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '7ae7f96aa9b3ce2a8d1fbc018b652a83e4f41e90', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '604c51b26cc5eec60e2e0125cda0cb60c82282f0', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, index.h("div", { key: '083d7aa003c99b54dc0c62c5ba1603c2a2a75c0a', class: "grid" }, index.h("span", { key: '4bc89f70e22217fa58f1db0586a8d5ee0db8bdae', class: "f-body-02" }, this.colors[0].rgb), index.h("span", { key: 'd8e1bb4f6ce3e173e31685fc4435be29d9eac4a4', class: "f-body-02 w-full" }, this.colors[0].cmyk), index.h("eds-code-block", { key: 'e370e6ea2808161625aea5e9b1e6e4dd9d137f33', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '6caf8c42e6296081a3daaca0e52c2a2776d1ab46', class: "grid" }, index.h("span", { key: '48ac4de4d194ae630a8a14df56ff2670f2f37092', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), index.h("span", { key: 'fd02781c816a152d92c1579dc9a3115eadb0690e', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), index.h("li", { key: 'a8562d9fb6ff77fcc6b31952a2ead12f3e0e9b50', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '4578880af1de315101deb5b42c91769dc2ca7437', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, index.h("div", { key: 'ed304eb3c8c3ccb769db7d769872ce075261cb17', class: "grid" }, index.h("span", { key: '956fe1115a5c1c4f6d2503737a46f0f1cbdc8e06', class: "f-body-02" }, this.colors[1].rgb), index.h("span", { key: '6beb1017eec40dd27351fda2ec1609987d46fb05', class: "f-body-02 w-full" }, this.colors[1].cmyk), index.h("eds-code-block", { key: 'a9319b683d13670c827b3444484d5469142ef76d', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '1d4f1a48a18aee0a90dd04fb336352042014ce29', class: "grid" }, index.h("span", { key: 'f4b7df5e0cde451a5e650e11b9805cc5be0c9fec', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), index.h("span", { key: '26d4869a2207e1386f72d2833aaf819c15006c34', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), index.h("li", { key: 'ed2b1465825e249bff9f5df38649b331f19e0672', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '22182a6d9bb64ab5dcbc38e359c3a7d7f79f3090', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, index.h("div", { key: '9cff6d7998f301a7c97d939bf5c38e5687fb0bde', class: "grid" }, index.h("span", { key: 'a1561d5f9472d43e40bd054cf516458f89841c3f', class: "f-body-02" }, this.colors[2].rgb), index.h("span", { key: 'b55020b6dbb423ec2151b81c185311229993ec83', class: "f-body-02 w-full" }, this.colors[2].cmyk), index.h("eds-code-block", { key: 'ae4d929c795f5e12cb1f2f41aad3bfc9a1db47c7', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '3ba7d23eb05b4dcc97b8dd7204a93daca6e0e798', class: "grid" }, index.h("span", { key: '4c047aae61adb93550b0ce1da65387b6d57e745f', class: "f-body-02" }, this.colors[2].pantoneC), index.h("span", { key: '8d8776d142dd8f9378900dc152b32b5b3cfbe95e', class: "f-body-02" }, this.colors[2].pantoneU))), index.h("div", { key: 'd4d02de329e6d6407c8e360a7b1838395f7aab40', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '28e2e772e7d12fbfdebec31f0aff6db397140132', class: "grid" }, index.h("span", { key: '872451c9846398641f1a592e8c166a6a51ee7298', class: "f-body-02" }, this.colors[2].rgb), index.h("span", { key: '84e28be1191f264e126c8579e26cbe6966010b4d', class: "f-body-02 w-full" }, this.colors[2].cmyk), index.h("eds-code-block", { key: 'a4c3dc76652feefaf3a9eba5bb3694b8dbf96be8', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'ff3a6599da869d3f9e85cb94481206e7e6331988', class: "grid" }, index.h("span", { key: '37ef90488eb673fdac1221f7123daa87a5a75fcd', class: "f-body-02" }, this.colors[2].pantoneC), index.h("span", { key: '0a6fbb96f982a3e7c12af3787520335878faa9fe', class: "f-body-02" }, this.colors[2].pantoneU))), index.h("div", { key: 'b59aeb053ab1145e0d3bc163f4650cdf30afe7d4', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, index.h("div", { key: '50659022ed31e85fa46df11e33050430bc3a92db', class: "grid" }, index.h("span", { key: 'b2353739a0a09c5576eed0355a2c96913fb81a97', class: "f-body-02" }, this.colors[3].rgb), index.h("span", { key: 'a40cd11295617a0b67bfe1ac49420d9918503a6d', class: "f-body-02 w-full" }, this.colors[3].cmyk), index.h("eds-code-block", { key: 'd42fa64fbc856b2a52241650d6b74acd2b8642ee', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '341bd4f637751cefa429bc6c3aab0adc714830e6', class: "grid" }, index.h("span", { key: '728dfa47d7e92236cfb9c321fcd610a9cd3c4cd8', class: "f-body-02" }, this.colors[3].pantoneC), index.h("span", { key: '3f06c0d1468942e9999655d32b0b32454720ceae', class: "f-body-02" }, this.colors[3].pantoneU)))), index.h("li", { key: '9bdd7ba9ccb255e8540b12ae33636a164f2d2da1', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: 'e700e5494922cdd1940a4002cab7fecfd407ce72', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, index.h("div", { key: '7dc4bfe5e3db4754f7e0c21005b36e16f32cf531', class: "grid" }, index.h("span", { key: '7faca86fa5a0477b8a136c39c9e6caac63bbaa27', class: "f-body-02" }, this.colors[4].rgb), index.h("span", { key: 'b0dede7a2415df03772b15e32feb066f1dc18124', class: "f-body-02 w-full" }, this.colors[4].cmyk), index.h("eds-code-block", { key: '3903bcb378fc37313c79c187d2722a80773a6fdf', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'b15d2d0529d6ac65f549219155b0dc1f17c4e43e', class: "grid" }, index.h("span", { key: 'c7bc170b9f4b11552e5f5b7332fb3cc2db628dbf', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), index.h("span", { key: '8c643a1a1590e3cf928835afc3a0a8c35dbe18f2', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, index.h("div", { key: 'af020f1a66c2d0afcb2e2bdf189569e6d897ef32', class: "grid" }, index.h("span", { key: '3b2f895dccdeb5e2fb5aa505f19514f012d24426', class: "f-body-02" }, this.colors[3].rgb), index.h("span", { key: '9836a6ef47ed0dc8767a590212a23bfca2f74adf', class: "f-body-02 w-full" }, this.colors[3].cmyk), index.h("eds-code-block", { key: '3b274f716c6ca1381e4cc0136d18e167290bfa74', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'a41592e2172dc9f81e9d2f36328ff88de3f0954e', class: "grid" }, index.h("span", { key: 'fd7a06a256d3513bcf239fe9f778f3589895b9d5', class: "f-body-02" }, this.colors[3].pantoneC), index.h("span", { key: '991f38ea137b729c9e9e6c9e0031940151f6e9dc', class: "f-body-02" }, this.colors[3].pantoneU)))), index.h("li", { key: '8efdd7d9f93cba4b9479e1d3face7cec94cf1af6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '4223ec29cac4313dc261cb472bd880ae00279657', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, index.h("div", { key: '227dd5fab1add4083271b6e7f95c7d575d91252e', class: "grid" }, index.h("span", { key: 'e5b1aab8d67f7c67f231acd4156768f146320be3', class: "f-body-02" }, this.colors[4].rgb), index.h("span", { key: 'fc4712e37494e8e30a48bc77a0ca61c94e24075d', class: "f-body-02 w-full" }, this.colors[4].cmyk), index.h("eds-code-block", { key: 'a429c519e42e242d8ce8f661a513f7b5327ffce7', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '84f30a1620cacadf8c0bf1382333d74772f81f27', class: "grid" }, index.h("span", { key: '2b6dfc8e87517e4d0421ef0e5c2391a07f033600', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), index.h("span", { key: 'c4cd5bc061ce4163a170568c0ed5934c7f30d75f', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
 };