@ebrains/react 0.9.2-beta → 1.0.0

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

@@ -0,0 +1,778 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const ColorPrimaryPalette = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // Primary palette data
+    this.colors = [{
+      rgb: 'R156 G225 B66',
+      cmyk: 'C52 M0 Y98 K0',
+      hex: '#9CE142',
+      pantoneC: 'PANTONE 367 C',
+      pantoneU: 'PANTONE 374 U',
+      background: '#9CE142'
+    }, {
+      rgb: 'R0 G201 B89',
+      cmyk: 'C75 M0 Y80 K0',
+      hex: '#00C959',
+      pantoneC: 'PANTONE 7480 C',
+      pantoneU: 'PANTONE 7481 U',
+      background: '#00C959'
+    }, {
+      rgb: 'R0 G165 B149',
+      cmyk: 'C78 M8 Y49 K0',
+      hex: '#00A595',
+      pantoneC: 'PANTONE 3272 C',
+      pantoneU: 'PANTONE 3275 U',
+      background: '#00A595'
+    }];
+  }
+  render() {
+    return h("ul", {
+      key: '8279e944bfb0ddf1e3cb682daa1b8bcfe8cac3fd',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, this.colors.map(color => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    }, h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.rgb), h("span", {
+      class: "f-body-02 w-full"
+    }, color.cmyk), h("eds-code-block", {
+      code: color.hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.pantoneC), h("span", {
+      class: "f-body-02"
+    }, color.pantoneU))))));
+  }
+};
+const ColorSecondaryPalette = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // Secondary palette data
+    this.colors = [{
+      rgb: 'R63 G169 B245',
+      cmyk: 'C68 M13 Y0 K0',
+      hex: '#3FA9F5',
+      pantoneC: 'PANTONE 298 C',
+      pantoneU: 'PANTONE 298 U',
+      background: '#3FA9F5'
+    }, {
+      rgb: 'R6 G68 B244',
+      cmyk: 'C92 M60 Y0 K0',
+      hex: '#0644F4',
+      pantoneC: 'PANTONE 2728 C',
+      pantoneU: 'PANTONE 2935 U',
+      background: '#0644F4'
+    }, {
+      rgb: 'R196 G97 B255',
+      cmyk: 'C52 M67 Y0 K0',
+      hex: '#C461FF',
+      pantoneC: 'PANTONE 252 C',
+      pantoneU: 'PANTONE 252 U',
+      background: '#C461FF'
+    }, {
+      rgb: 'R93 G61 B249',
+      cmyk: 'C83 M78 Y0 K0',
+      hex: '#5D3DF9',
+      pantoneC: 'PANTONE 266 C',
+      pantoneU: 'PANTONE 2735 U',
+      background: '#5D3DF9'
+    }, {
+      rgb: 'R255 G165 B67',
+      cmyk: 'C0 M43 Y76 K0',
+      hex: '#FFA543',
+      pantoneC: 'PANTONE 804 C',
+      pantoneU: 'PANTONE 136 U',
+      background: '#FFA543'
+    }, {
+      rgb: 'R255 G77 B104',
+      cmyk: 'C0 M81 Y42 K0',
+      hex: '#FF4D68',
+      pantoneC: 'PANTONE 1785 C',
+      pantoneU: 'PANTONE 185 U',
+      background: '#FF4D68'
+    }];
+    this.show = undefined;
+  }
+  render() {
+    return h("ul", {
+      key: 'ab7abc8b8b9115446169d85c6b97f4ea2e387068',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, this.colors.map(color => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    }, h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.rgb), h("span", {
+      class: "f-body-02 w-full"
+    }, color.cmyk), h("eds-code-block", {
+      code: color.hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.pantoneC), h("span", {
+      class: "f-body-02"
+    }, color.pantoneU))))));
+  }
+};
+const ColorSupportPalette = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.colors = [{
+      rgb: 'R20 G20 B20',
+      cmyk: 'C78 M69 Y61 K87',
+      hex: '#141414',
+      pantoneC: '',
+      pantoneU: '',
+      background: '#141414'
+    }, {
+      rgb: 'R56 G56 B56',
+      cmyk: 'C68 M58 Y55 K63',
+      hex: '#383838',
+      pantoneC: 'PANTONE 447 C',
+      pantoneU: 'PANTONE Neutral Black U',
+      background: '#383838'
+    }, {
+      rgb: 'R204 G204 B204',
+      cmyk: 'C23 M17 Y18 K0',
+      hex: '#CCCCCC',
+      pantoneC: 'PANTONE Cool Gray 2 C',
+      pantoneU: 'PANTONE Cool Gray 2 U',
+      background: '#CCCCCC'
+    }, {
+      rgb: 'R230 G230 B230',
+      cmyk: 'C12 M8 Y9 K0',
+      hex: '#E6E6E6',
+      pantoneC: 'PANTONE 663 C',
+      pantoneU: 'PANTONE 649 U',
+      background: '#E6E6E6'
+    }, {
+      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 h("ul", {
+      key: '42a4eb08f07919ad464ba017dbba65667c91e005',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, this.colors.map(color => {
+      // compute once
+      const textClass = this.getTextColor(color.background);
+      return h("li", {
+        class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+      }, h("div", {
+        class: "effect-height flex items-center justify-between p-16",
+        style: {
+          backgroundColor: color.background
+        }
+      }, h("div", {
+        class: "grid"
+      }, h("span", {
+        class: `f-body-02 ${textClass}`
+      }, color.cmyk), h("eds-code-block", {
+        code: color.hex,
+        style: {
+          minWidth: '150px',
+          marginRight: '5px'
+        },
+        class: textClass
+      })), h("div", {
+        class: "grid"
+      }, h("span", {
+        class: `f-body-02 ${textClass}`
+      }, color.pantoneC), h("span", {
+        class: `f-body-02 ${textClass}`
+      }, color.pantoneU))));
+    }));
+  }
+};
+const GradientPrimaryPalette = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // Gradient primary palette data
+    this.colors = [{
+      rgb: 'R156 G225 B66',
+      cmyk: 'C52 M0 Y98 K0',
+      hex: '#9CE142',
+      pantoneC: 'PANTONE 367 C',
+      pantoneU: 'PANTONE 374 U',
+      background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
+    }, {
+      rgb: 'R0 G201 B89',
+      cmyk: 'C75 M0 Y80 K0',
+      hex: '#00C959',
+      pantoneC: 'PANTONE 7480 C',
+      pantoneU: 'PANTONE 7481 U',
+      background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
+    }, {
+      rgb: 'R0 G165 B149',
+      cmyk: 'C78 M8 Y49 K0',
+      hex: '#00A595',
+      pantoneC: 'PANTONE 3272 C',
+      pantoneU: 'PANTONE 3275 U',
+      background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
+    }];
+  }
+  render() {
+    return h("ul", {
+      key: '2bc09e1f15ce98c6ba133cffc09df3bf10ca343f',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16",
+      style: {
+        background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
+      }
+    }, this.colors.map(color => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      class: "effect-height flex items-center justify-between p-16"
+    }, h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.rgb), h("span", {
+      class: "f-body-02 w-full"
+    }, color.cmyk), h("eds-code-block", {
+      code: color.hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.pantoneC), h("span", {
+      class: "f-body-02"
+    }, color.pantoneU))))));
+  }
+};
+const GradientSecondaryPalette = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // Gradient secondary palette data
+    this.colors = [{
+      rgb: 'R63 G169 B245',
+      cmyk: 'C68 M13 Y0 K0',
+      hex: '#3FA9F5',
+      pantoneC: 'PANTONE 298 C',
+      pantoneU: 'PANTONE 298 U',
+      background: 'linear-gradient(to bottom, #3FA9F5, #3FA9F5)'
+    }, {
+      rgb: 'R6 G68 B244',
+      cmyk: 'C92 M60 Y0 K0',
+      hex: '#0644F4',
+      pantoneC: 'PANTONE 2728 C',
+      pantoneU: 'PANTONE 2935 U',
+      background: 'linear-gradient(to bottom, #3FA9F5, #0644F4)'
+    }, {
+      rgb: 'R196 G97 B255',
+      cmyk: 'C52 M67 Y0 K0',
+      hex: '#C461FF',
+      pantoneC: 'PANTONE 252 C',
+      pantoneU: 'PANTONE 252 U',
+      background: 'linear-gradient(to bottom, #C461FF, #C461FF)'
+    }, {
+      rgb: 'R93 G61 B249',
+      cmyk: 'C83 M78 Y0 K0',
+      hex: '#5D3DF9',
+      pantoneC: 'PANTONE 266 C',
+      pantoneU: 'PANTONE 2735 U',
+      background: 'linear-gradient(to bottom, #C461FF, #5D3DF9)'
+    }, {
+      rgb: 'R255 G165 B67',
+      cmyk: 'C0 M43 Y76 K0',
+      hex: '#FFA543',
+      pantoneC: 'PANTONE 804 C',
+      pantoneU: 'PANTONE 136 U',
+      background: 'linear-gradient(to bottom, #FFA543, #FFA543)'
+    }, {
+      rgb: 'R255 G77 B104',
+      cmyk: 'C0 M81 Y42 K0',
+      hex: '#FF4D68',
+      pantoneC: 'PANTONE 1785 C',
+      pantoneU: 'PANTONE 185 U',
+      background: 'linear-gradient(to bottom, #FFA543, #FF4D68)'
+    }];
+  }
+  render() {
+    return h("div", {
+      key: '32943156b28f767dc9b2e524202a4f4906432472'
+    }, h("ul", {
+      key: 'bf0d9a310edc584b67e064b149c771417e4da9cc',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: '3ed95b92fe0eea4e75be722c1d0abdedfaa9e00e',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: 'b5d4f381155b3e89bf441a87b9aff7718d4bd978',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[0].background
+      }
+    }, h("div", {
+      key: 'c12a9c31da8078a9e6889e0084f1256dad389b59',
+      class: "grid"
+    }, h("span", {
+      key: '2fa2d5e9bb0820f08d3c265d7797eeca4c47c73c',
+      class: "f-body-02"
+    }, this.colors[0].rgb), h("span", {
+      key: 'b609663a6bfebc37deee295b5c8316bb08e6c785',
+      class: "f-body-02 w-full"
+    }, this.colors[0].cmyk), h("eds-code-block", {
+      key: 'b3cc79d81900f4a9a12ff7c6ebaac286c4dc1cd6',
+      code: this.colors[0].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: 'f91c41b6301c6234387c4386c493a9df56869c84',
+      class: "grid"
+    }, h("span", {
+      key: '1165b82de0328f60a495a563e14277d3722b7d87',
+      class: "f-body-02"
+    }, this.colors[0].pantoneC), h("span", {
+      key: 'f364fa3b7d4a9c52e1b67a65a4992ea1055084c1',
+      class: "f-body-02"
+    }, this.colors[0].pantoneU))), h("div", {
+      key: 'e798299fb6ffedd626aaf477593b928c73b177bc',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[1].background
+      }
+    }, h("div", {
+      key: 'eee5b2de72d33f80c85fb0ad39e486cbd69d664b',
+      class: "grid"
+    }, h("span", {
+      key: '5190b0bb900bf234f32ccad7d37749ae0e57c31c',
+      class: "f-body-02"
+    }, this.colors[1].rgb), h("span", {
+      key: '49e3d6d1073dfa8d08054e9db612bfce1a811347',
+      class: "f-body-02 w-full"
+    }, this.colors[1].cmyk), h("eds-code-block", {
+      key: 'fd0c166cac7839de62cd782ec8071ba70378c15f',
+      code: this.colors[1].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: 'e9e95829a6eec21baab0238677a33cc649351185',
+      class: "grid"
+    }, h("span", {
+      key: 'e8a6c41cc8193ca78794c7147f20d39604a1ae04',
+      class: "f-body-02"
+    }, this.colors[1].pantoneC), h("span", {
+      key: '039cbc6eedc43de988b5dd823525bde00f7a21e5',
+      class: "f-body-02"
+    }, this.colors[1].pantoneU))))), h("eds-block-break", {
+      key: '7f95cfde8f4724b236446c3732c04929e17a9aa0'
+    }), h("ul", {
+      key: '72f723c89d17ea54a962122867abbd690b4d9ad9',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: 'b2153dc607ed77d0a3b1398c3fc8b626163575e1',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: 'e9ff842671af9bf749857fb4b430dbd997eadbab',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[2].background
+      }
+    }, h("div", {
+      key: 'fd8255c5ee1ffe2f1b44cc670e504540b2e19b17',
+      class: "grid"
+    }, h("span", {
+      key: '17b71b6d17fe483a0eab1e80959da2076ad4647e',
+      class: "f-body-02"
+    }, this.colors[2].rgb), h("span", {
+      key: 'b3d39bde727347801976d1471875e3226f71d334',
+      class: "f-body-02 w-full"
+    }, this.colors[2].cmyk), h("eds-code-block", {
+      key: 'd37cfec78f74f7eec02047fb8e30962c55379f71',
+      code: this.colors[2].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: 'aa0ec054bb018ab8e564910ada76d849ee2d1608',
+      class: "grid"
+    }, h("span", {
+      key: 'f633c21fb5227330e843b1c1f6d1fff40766c0d0',
+      class: "f-body-02"
+    }, this.colors[2].pantoneC), h("span", {
+      key: 'c41495a89c987cf7cfbbd0b4d1ff12ac0c650610',
+      class: "f-body-02"
+    }, this.colors[2].pantoneU))), h("div", {
+      key: '18a802a0cb7cbd228840fb58fadf6a121d98ebf9',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[3].background
+      }
+    }, h("div", {
+      key: 'edf5fe68043e4712e7174c405e73e1aa84570936',
+      class: "grid"
+    }, h("span", {
+      key: '455d010554f4836b26ff4b0568d088a4505619f3',
+      class: "f-body-02"
+    }, this.colors[3].rgb), h("span", {
+      key: '6a50beb860b13371178b9582279c76cca29f25cf',
+      class: "f-body-02 w-full"
+    }, this.colors[3].cmyk), h("eds-code-block", {
+      key: '98333266061cd31aa09d7d1394829c5d822c901f',
+      code: this.colors[3].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '9f1952601d13a96f1caade683d5474a26cf94298',
+      class: "grid"
+    }, h("span", {
+      key: 'e43da3fba22655cef1690725654919a79d43a2f4',
+      class: "f-body-02"
+    }, this.colors[3].pantoneC), h("span", {
+      key: 'c3e280221454dc05f4112f03e3d226a6e70b70d3',
+      class: "f-body-02"
+    }, this.colors[3].pantoneU))))), h("eds-block-break", {
+      key: '63355f298a7680e4307b6e467da0fd54faf9da14'
+    }), h("ul", {
+      key: 'ff5a5554b716e21b0e219228317bbe334fc96488',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: 'b4ecf3a608a9321ca0cfd1edad2778b3b8ddf918',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: '587730e489242f8579b2db3aceea8fadf4ba0f75',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[4].background
+      }
+    }, h("div", {
+      key: '883c226b73544a239f6d0ece7cbab020e1cc5874',
+      class: "grid"
+    }, h("span", {
+      key: 'dc5031f2236d81513cc543997f9b445b0fdea4be',
+      class: "f-body-02"
+    }, this.colors[4].rgb), h("span", {
+      key: 'a90f91b008cb67e8ee4a0454ed9e75f683a1a960',
+      class: "f-body-02 w-full"
+    }, this.colors[4].cmyk), h("eds-code-block", {
+      key: '4c12f3a2500535970bdb70bb87b8d73348ef25bb',
+      code: this.colors[4].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '1ebadf2907a7f499d61e9edc7c71bb9e7378594a',
+      class: "grid"
+    }, h("span", {
+      key: 'acfce5255506344a9b65b195933cf924e1030467',
+      class: "f-body-02"
+    }, this.colors[4].pantoneC), h("span", {
+      key: 'a7c4c25345c91a9753c4615c5205cf3dc49c36af',
+      class: "f-body-02"
+    }, this.colors[4].pantoneU))), h("div", {
+      key: '01ce94d66521e612357c61de65ca1acd01e84cb9',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[5].background
+      }
+    }, h("div", {
+      key: '628435f8fab14df7613aa4427af0b8c15fc222c2',
+      class: "grid"
+    }, h("span", {
+      key: '4b4bbd19051b9d8d1eb524f2c84104eab7dae20a',
+      class: "f-body-02"
+    }, this.colors[5].rgb), h("span", {
+      key: 'bb01da8698315272a78bad8d7258cb79be98446b',
+      class: "f-body-02 w-full"
+    }, this.colors[5].cmyk), h("eds-code-block", {
+      key: 'f28b072bdb7dc66f3f3be1e922e527a7e3f4bf34',
+      code: this.colors[5].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '027adf31b26154f659c2cd8c9ee935b5886e8419',
+      class: "grid"
+    }, h("span", {
+      key: 'f74af79724fd67f67ad0433f9390ca022c6788d8',
+      class: "f-body-02"
+    }, this.colors[5].pantoneC), h("span", {
+      key: '87262b14ffcda0153b37a5090b25e58b7c71c5dd',
+      class: "f-body-02"
+    }, this.colors[5].pantoneU))))));
+  }
+};
+const GradientSupportPalette = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // Gradient support palette data
+    this.colors = [{
+      rgb: 'R20 G20 B20',
+      cmyk: 'C78 M69 Y61 K87',
+      hex: '#141414',
+      pantoneC: '',
+      pantoneU: '',
+      background: '#141414'
+    }, {
+      rgb: 'R56 G56 B56',
+      cmyk: 'C68 M58 Y55 K63',
+      hex: '#383838',
+      pantoneC: 'PANTONE 447 C',
+      pantoneU: 'PANTONE Neutral Black U',
+      background: '#383838'
+    }, {
+      rgb: 'R204 G204 B204',
+      cmyk: 'C23 M17 Y18 K0',
+      hex: '#CCCCCC',
+      pantoneC: 'PANTONE Cool Gray 2 C',
+      pantoneU: 'PANTONE Cool Gray 2 U',
+      background: 'linear-gradient(to bottom, #CCCCCC, #CCCCCC)'
+    }, {
+      rgb: 'R230 G230 B230',
+      cmyk: 'C12 M8 Y9 K0',
+      hex: '#E6E6E6',
+      pantoneC: 'PANTONE 663 C',
+      pantoneU: 'PANTONE 649 U',
+      background: 'linear-gradient(to bottom, #CCCCCC, #E6E6E6)'
+    }, {
+      rgb: 'R255 G255 B255',
+      cmyk: 'C0 M0 Y0 K0',
+      hex: '#FFFFFF',
+      pantoneC: '',
+      pantoneU: '',
+      background: '#FFFFFF'
+    }];
+  }
+  render() {
+    return h("ul", {
+      key: '54a1927a8b5d68b7ef0cda7e1b7d673b33605a3c',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: '25d63af647cab86f74bb7fb261836f5938beb0c8',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: '3a39fde1fd70cf8c456c9032ae0458976fd4e289',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: this.colors[0].background
+      }
+    }, h("div", {
+      key: '0d2bcd0138973145c717725c79b6a2f4ff290b97',
+      class: "grid"
+    }, h("span", {
+      key: '31c920216944da65a446f6c7d3037aee600e71d8',
+      class: "f-body-02"
+    }, this.colors[0].rgb), h("span", {
+      key: '838ab2e1e8664243e32726ab03539a4f32b32cf4',
+      class: "f-body-02 w-full"
+    }, this.colors[0].cmyk), h("eds-code-block", {
+      key: '2f8a24075e0fe1d2a6fda01fb97b4cf49f85277f',
+      code: this.colors[0].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '8482d6666b68cd1ceb866e1cbdd0d88343cf79da',
+      class: "grid"
+    }, h("span", {
+      key: 'e3ba3599b4e5743691c35a28358f0050de18d32a',
+      class: "f-body-02"
+    }, this.colors[0].pantoneC || 'N/A'), h("span", {
+      key: 'c3ac3af17201effeb89b017a334c9ac0b0d62ddf',
+      class: "f-body-02"
+    }, this.colors[0].pantoneU || 'N/A')))), h("li", {
+      key: '447e0a60ef726347ec1f4f540f6de7747a450845',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: 'fd922845d2aa3f66fde4d7fcf9f5b2416332fe9c',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: this.colors[1].background
+      }
+    }, h("div", {
+      key: 'bcf9ff063b3c130e8f7e24247f032a9f9fa40bb6',
+      class: "grid"
+    }, h("span", {
+      key: '0bcea7730d9f34ac44544cd1bc3bfa3b8ca361cf',
+      class: "f-body-02"
+    }, this.colors[1].rgb), h("span", {
+      key: '9c5169394a89f4ba2adbb0ac2576bd885443aac3',
+      class: "f-body-02 w-full"
+    }, this.colors[1].cmyk), h("eds-code-block", {
+      key: 'c50e9ba110494a1a0e9df18a081f02cb86c700c4',
+      code: this.colors[1].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '365655cca2301d94a52f859fa9527ae5c0ef1ece',
+      class: "grid"
+    }, h("span", {
+      key: '088fca6cf72c8c74244d9a6e19c7ec083c8a6711',
+      class: "f-body-02"
+    }, this.colors[1].pantoneC || 'N/A'), h("span", {
+      key: 'b33043ed7e2ff751be0d3c229324369aeacd8f1e',
+      class: "f-body-02"
+    }, this.colors[1].pantoneU || 'N/A')))), h("li", {
+      key: '3b619a6a67d31ea7b358b59a147f36bfe35c4323',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: '21b63edaebce5e4fdd10e6ad2ffaf31597d748f6',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[2].background
+      }
+    }, h("div", {
+      key: 'f6d5d058b645af61eebb8f6a7b2369e4c95c31fb',
+      class: "grid"
+    }, h("span", {
+      key: 'b7b1101ac321600f6218cbc4371d9219b9aef016',
+      class: "f-body-02"
+    }, this.colors[2].rgb), h("span", {
+      key: '2debc8469b2d82c0550f1173bb4f0c1cdf33a7e0',
+      class: "f-body-02 w-full"
+    }, this.colors[2].cmyk), h("eds-code-block", {
+      key: '90753985397844a6cabeee1b0ac5b32a84f59ed1',
+      code: this.colors[2].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: 'f46c245f70973cd91992a8f9ec47e57997345c5c',
+      class: "grid"
+    }, h("span", {
+      key: '7c7eb23f1312208b313cd2a2bd5c5a5af2e7cdd3',
+      class: "f-body-02"
+    }, this.colors[2].pantoneC), h("span", {
+      key: '47c19d9a120cedc5c2bbbd385efa2e91ad4fd8e8',
+      class: "f-body-02"
+    }, this.colors[2].pantoneU))), h("div", {
+      key: 'dcbc1b771bea1166bbbb0ed0e6fcd2d1aaa53b7f',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[3].background
+      }
+    }, h("div", {
+      key: '55dff4711f054b364df8a03381f768e93cd1b62a',
+      class: "grid"
+    }, h("span", {
+      key: '3880f0ea82be335c750ed4553583bc87b7ca04cc',
+      class: "f-body-02"
+    }, this.colors[3].rgb), h("span", {
+      key: '6952cfb758d707b3376032f1d997253c1edc9962',
+      class: "f-body-02 w-full"
+    }, this.colors[3].cmyk), h("eds-code-block", {
+      key: '9e0bc4a1d79c41bfaa315fd3053752c4eda3cd18',
+      code: this.colors[3].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '9561d012cfbe411eac373f768893cc304b2e6138',
+      class: "grid"
+    }, h("span", {
+      key: 'e90d3b590653807e22697395397ac89be9f52b90',
+      class: "f-body-02"
+    }, this.colors[3].pantoneC), h("span", {
+      key: 'ffd2be0e5f7ff3b72a73697e0ca2f92c7e9cc0a5',
+      class: "f-body-02"
+    }, this.colors[3].pantoneU)))), h("li", {
+      key: 'e963dd45ee5a8f52348e1b2a331df6af94f90f5f',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: '0586094b065fdfa034096ef7e1eb95c6a26c41fc',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: this.colors[4].background
+      }
+    }, h("div", {
+      key: '6acfe9a84d72f0327c3eff6c44a616918fa627d3',
+      class: "grid"
+    }, h("span", {
+      key: 'c3175b931ff1cc3365dbf1cdd548b550aaf662a3',
+      class: "f-body-02"
+    }, this.colors[4].rgb), h("span", {
+      key: '42d1daa0c16dcceb7341c015b912e0ea27874282',
+      class: "f-body-02 w-full"
+    }, this.colors[4].cmyk), h("eds-code-block", {
+      key: '56b32e9ba42ec77e3ba6263f27b78229996ce983',
+      code: this.colors[4].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '89226a45ae2cf148134d550d0507a3563978e1bd',
+      class: "grid"
+    }, h("span", {
+      key: '6f9c4d6da4d4c3fe6ae8039291e6cd9c06635c24',
+      class: "f-body-02"
+    }, this.colors[4].pantoneC || 'N/A'), h("span", {
+      key: '9b44fcec2f83ecaa9fb5a1b298bab55fce503e91',
+      class: "f-body-02"
+    }, this.colors[4].pantoneU || 'N/A')))));
+  }
+};
+
+export { ColorPrimaryPalette as color_primary_palette, ColorSecondaryPalette as color_secondary_palette, ColorSupportPalette as color_support_palette, GradientPrimaryPalette as gradient_primary_palette, GradientSecondaryPalette as gradient_secondary_palette, GradientSupportPalette as gradient_support_palette };