@ebrains/react 0.9.2-beta → 0.9.3-beta

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: 'af0b4133a365f9c2db08ea05eab950de32536950',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, this.colors.map(color => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    }, h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.rgb), h("span", {
+      class: "f-body-02 w-full"
+    }, color.cmyk), h("eds-code-block", {
+      code: color.hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.pantoneC), h("span", {
+      class: "f-body-02"
+    }, color.pantoneU))))));
+  }
+};
+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: '059dacf5e142b2e4bd61a7977f1bdd79554ddca9',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, this.colors.map(color => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    }, h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.rgb), h("span", {
+      class: "f-body-02 w-full"
+    }, color.cmyk), h("eds-code-block", {
+      code: color.hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      class: "grid"
+    }, h("span", {
+      class: "f-body-02"
+    }, color.pantoneC), h("span", {
+      class: "f-body-02"
+    }, color.pantoneU))))));
+  }
+};
+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: '2cadb1ac7f985ba4960eb2a8b8d64c543c07dafa',
+      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: 'b77f4fad55c2aa54422fd3b18ef09d4004490014',
+      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: '10c513243cdbc57d018445e4413d4a1940616be1'
+    }, h("ul", {
+      key: 'c28494f2db389b90b82b18663d3ff2cae3528fc7',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: '9b93b139f06b5cf2bf40ea9576a16f1f95b47cef',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: '32aea8893b8c109ac13bb4fa87f81fdfbb31211c',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[0].background
+      }
+    }, h("div", {
+      key: '0881e06d858eb7ec8681d201abf2d6b19f89052f',
+      class: "grid"
+    }, h("span", {
+      key: '9d94677102fc1ee3720b2d845038968b38143afc',
+      class: "f-body-02"
+    }, this.colors[0].rgb), h("span", {
+      key: 'a11ac3d683540f396dd6a22250773d9bbc6b7c86',
+      class: "f-body-02 w-full"
+    }, this.colors[0].cmyk), h("eds-code-block", {
+      key: 'aaf6227e91efb700dee4dd14a99f0f803902a348',
+      code: this.colors[0].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: 'aefdddab57b6f487a9b9b28bf9931b43924d7fb9',
+      class: "grid"
+    }, h("span", {
+      key: '5ff736d1d6d0a6919899a58970042157970fa9df',
+      class: "f-body-02"
+    }, this.colors[0].pantoneC), h("span", {
+      key: '668f276d932498e064c51637157d34c416a82c35',
+      class: "f-body-02"
+    }, this.colors[0].pantoneU))), h("div", {
+      key: '8797049389313e6627574e97e609572979b16ec0',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[1].background
+      }
+    }, h("div", {
+      key: '44ee397cf746e87daa52979200c270703d1bc55e',
+      class: "grid"
+    }, h("span", {
+      key: '65bc43371dee383f17da6cf366520ca6499db61d',
+      class: "f-body-02"
+    }, this.colors[1].rgb), h("span", {
+      key: '3afcdc449bb40583bec4a64229beb176644c6d86',
+      class: "f-body-02 w-full"
+    }, this.colors[1].cmyk), h("eds-code-block", {
+      key: '9356d97b5db02857d89215ea40bd2d17917fb032',
+      code: this.colors[1].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: 'e4515e8ff06d5da2530754720753562fd12282a2',
+      class: "grid"
+    }, h("span", {
+      key: '208101b85d06b7a9fa5c1a0d0eb470c48c55c8d6',
+      class: "f-body-02"
+    }, this.colors[1].pantoneC), h("span", {
+      key: '73b9ffdae670b0977b71eb5a5540c6ca5cdf850a',
+      class: "f-body-02"
+    }, this.colors[1].pantoneU))))), h("eds-block-break", {
+      key: 'a6b352c935c7c548647ec33f548f5963d3fb2771'
+    }), h("ul", {
+      key: 'b17a428d35de0e5fd34f93b5e5d7eea10bd97c05',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: 'bf11a3863db3b16410bb33b63e589f08d3ac9f10',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: 'ab6c9f7addcbcedc3686f95e4955b9e7ab14b6fc',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[2].background
+      }
+    }, h("div", {
+      key: '4a1b5ad1af1f12ecf5d0e3d29af852f8c9a68c8a',
+      class: "grid"
+    }, h("span", {
+      key: '3ce666f09c7de2488d94698a19ae1c51ddecbf7b',
+      class: "f-body-02"
+    }, this.colors[2].rgb), h("span", {
+      key: '10301ea300f2b1a6d827bf56fd8b8e0e0cc858f6',
+      class: "f-body-02 w-full"
+    }, this.colors[2].cmyk), h("eds-code-block", {
+      key: '2db903a2fe58581b0e6d7b9adc984f4320dc8a09',
+      code: this.colors[2].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: 'afe001eb4a52f6a05b38ffcc71d538ec22a98022',
+      class: "grid"
+    }, h("span", {
+      key: '62fc31bde6e3b34327e41cd39fc80cab32faa94d',
+      class: "f-body-02"
+    }, this.colors[2].pantoneC), h("span", {
+      key: '2ca52fff58fcef2660e80f2a847c45d08438f14e',
+      class: "f-body-02"
+    }, this.colors[2].pantoneU))), h("div", {
+      key: '85e4a7be29033cdaf374b27ceed588c825ace64f',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[3].background
+      }
+    }, h("div", {
+      key: '16193b9db41b2296de12684ac3f9274436aac1fa',
+      class: "grid"
+    }, h("span", {
+      key: '809a4b38fe70a64bdd823093aeb0278b181fd9b8',
+      class: "f-body-02"
+    }, this.colors[3].rgb), h("span", {
+      key: '96bd1f267b3fc2dc280a683d92bbc872ec446f6b',
+      class: "f-body-02 w-full"
+    }, this.colors[3].cmyk), h("eds-code-block", {
+      key: '217931cdbd3da0f016253e61ef19e74e4df4f669',
+      code: this.colors[3].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '03b91a07130bc1d4c811759085174f794f66d143',
+      class: "grid"
+    }, h("span", {
+      key: 'bdc570cfb341c90b7e89100af5034496c1b369ee',
+      class: "f-body-02"
+    }, this.colors[3].pantoneC), h("span", {
+      key: 'cc10a8ba6a2cf4470bbbf16c03f513273411db4b',
+      class: "f-body-02"
+    }, this.colors[3].pantoneU))))), h("eds-block-break", {
+      key: '45e15e96024ba30a44ae8fff1b1484ca036e2d89'
+    }), h("ul", {
+      key: 'a487cf89f96a29775770ba4a5a80019387d179bc',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: '15018fc0724f6b1e62b5b37922dc924ec2fb41d8',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: 'b2b27ed4e039ab44c9514ddfc3dbe928ce0aa46b',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[4].background
+      }
+    }, h("div", {
+      key: '8714548cc695018bb413d3e72ea8e580cc9bc98f',
+      class: "grid"
+    }, h("span", {
+      key: '28e8f390390f82e5cbad32394e46a4606feeec6b',
+      class: "f-body-02"
+    }, this.colors[4].rgb), h("span", {
+      key: '5b6f7f1ee8484f99e9421af84835ed4bf6765db4',
+      class: "f-body-02 w-full"
+    }, this.colors[4].cmyk), h("eds-code-block", {
+      key: '84c6ddd8728a2a39c8863af7a6ad181f321efd7f',
+      code: this.colors[4].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '7ddccbf76753340f715d4fbfcd31bab083bf3725',
+      class: "grid"
+    }, h("span", {
+      key: 'f2a84a9e46d18015b45f052dc8786ac7c1fc3bb3',
+      class: "f-body-02"
+    }, this.colors[4].pantoneC), h("span", {
+      key: '741fd132025aa0c0a1da6d8a88273a1cd19aeae7',
+      class: "f-body-02"
+    }, this.colors[4].pantoneU))), h("div", {
+      key: 'e0d48d68d5487c82149c90cc0e726370f0d25960',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[5].background
+      }
+    }, h("div", {
+      key: '16b56121efc5527b8eb3dad7e119840102d1d390',
+      class: "grid"
+    }, h("span", {
+      key: '5f326a2653de6dcc8c85ad88c5554214519fa1fd',
+      class: "f-body-02"
+    }, this.colors[5].rgb), h("span", {
+      key: '1cb2c712393855e7b01bf1e083444e2c170d7b0b',
+      class: "f-body-02 w-full"
+    }, this.colors[5].cmyk), h("eds-code-block", {
+      key: '6cc534503946d6aee5b562b2b1b713988df963ac',
+      code: this.colors[5].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: 'd79c852afae4fbe6b360cc319b8d3bf22ce7b194',
+      class: "grid"
+    }, h("span", {
+      key: 'cab85faa9f7cd31c14a15a014f8a95c39b6e631d',
+      class: "f-body-02"
+    }, this.colors[5].pantoneC), h("span", {
+      key: 'ea3a9fafeee11b75663bd753c75b7cbcfdb9c5c1',
+      class: "f-body-02"
+    }, this.colors[5].pantoneU))))));
+  }
+};
+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: '2735f6a59037973febc2ee871464146b3a12e69b',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: 'a861d0c4ea7545d55b8c324f916e1831e271bb47',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: '93a8c04259ed46a2c520c1355efaaa2ecf0c4714',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: this.colors[0].background
+      }
+    }, h("div", {
+      key: '554964ca9e800dd356fcddfcc82004e7a6131d21',
+      class: "grid"
+    }, h("span", {
+      key: 'e91f746f3ce067afe57835da2996804dba471ce3',
+      class: "f-body-02"
+    }, this.colors[0].rgb), h("span", {
+      key: '41d7dd9aa7ec450f35ae6587b51a5d7c639cb1fa',
+      class: "f-body-02 w-full"
+    }, this.colors[0].cmyk), h("eds-code-block", {
+      key: '4e0d93b261af040d0aa82c8043542a751915786f',
+      code: this.colors[0].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: 'f1c2c77f37d5e80b6574e68c9454cac46cd99c9f',
+      class: "grid"
+    }, h("span", {
+      key: '8e216418f476d026cb59dbbdab802bb4bdf7a4e4',
+      class: "f-body-02"
+    }, this.colors[0].pantoneC || 'N/A'), h("span", {
+      key: '5b978c9f6206ba4a57645dd5b107ace27be515a9',
+      class: "f-body-02"
+    }, this.colors[0].pantoneU || 'N/A')))), h("li", {
+      key: '232cd30eb6c637d31f80cf8281fb434e9837e9b8',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: '61a073ea3b4bc8134ad539b941a6bc1b3a914a11',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: this.colors[1].background
+      }
+    }, h("div", {
+      key: '22a69e75c01842e67d87126f3d34e9a19ead4ab1',
+      class: "grid"
+    }, h("span", {
+      key: 'b537d9e9cb0429677656c068a0a81499d42cac30',
+      class: "f-body-02"
+    }, this.colors[1].rgb), h("span", {
+      key: 'ab35b28dec337cb81ad50372e7c071c7d8f3b785',
+      class: "f-body-02 w-full"
+    }, this.colors[1].cmyk), h("eds-code-block", {
+      key: 'a0bea555719eacc8f0730300ebab6ae98ea6771a',
+      code: this.colors[1].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '8458087421b893504829ed46b05ba44acb0c5f53',
+      class: "grid"
+    }, h("span", {
+      key: '2ec00ee996a3184afe07c27e45e999c4740b93a1',
+      class: "f-body-02"
+    }, this.colors[1].pantoneC || 'N/A'), h("span", {
+      key: '7d48ea6d5b12c6a1ced3812fdc4cb39cd3afaed4',
+      class: "f-body-02"
+    }, this.colors[1].pantoneU || 'N/A')))), h("li", {
+      key: 'b2ac623c59d1dc2ab14cc2775c5b95b4d02fc72f',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: '6152411685ae903a22bf9b06db18182c35bea246',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[2].background
+      }
+    }, h("div", {
+      key: 'fa8fb3b382d53be84413643cb12a58b4a41202ca',
+      class: "grid"
+    }, h("span", {
+      key: '026b5ed6229ef0e89636fce8643264ba47255249',
+      class: "f-body-02"
+    }, this.colors[2].rgb), h("span", {
+      key: 'bc5784f779096d92229abc19c003df07ee7acf1c',
+      class: "f-body-02 w-full"
+    }, this.colors[2].cmyk), h("eds-code-block", {
+      key: '76e8f012cb9d7994906e2d9ce55d7eb47c5cbd0f',
+      code: this.colors[2].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '0410c816d39550853c240894811717c427fa3dee',
+      class: "grid"
+    }, h("span", {
+      key: 'b1f2869cc28a05e0c52f7bd8cec85d170d6250a7',
+      class: "f-body-02"
+    }, this.colors[2].pantoneC), h("span", {
+      key: 'f53078949c7803385c6616325670143e1af08abe',
+      class: "f-body-02"
+    }, this.colors[2].pantoneU))), h("div", {
+      key: '2076894246cdbcdc0557e70ef9ca857f8fb825cf',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        background: this.colors[3].background
+      }
+    }, h("div", {
+      key: '5f8b1cf3e3529c9e54185cd6bb8c1aaaa0ebc359',
+      class: "grid"
+    }, h("span", {
+      key: '06f7ef3d3e164a632f2bc9c5e99642a827a79e27',
+      class: "f-body-02"
+    }, this.colors[3].rgb), h("span", {
+      key: '21a313355fa68a829619d9da29000acef0509fba',
+      class: "f-body-02 w-full"
+    }, this.colors[3].cmyk), h("eds-code-block", {
+      key: '859bc066d1756b9ac5f72de7fcd0b4bd3013f8f4',
+      code: this.colors[3].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '5a4ffa55b941478f5f18e764fc54421b4dd33141',
+      class: "grid"
+    }, h("span", {
+      key: 'b42265cfe889bcb45270c21016134fa72ba18e5d',
+      class: "f-body-02"
+    }, this.colors[3].pantoneC), h("span", {
+      key: '6b478b1526fbd5e5175f67dbb5b9e30e21dc56bb',
+      class: "f-body-02"
+    }, this.colors[3].pantoneU)))), h("li", {
+      key: '7a92c596887e9c42c2c79c208ed82810b8f6a714',
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      key: 'edcc8539e72b7497a0bb49d442774903116bf916',
+      class: "effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: this.colors[4].background
+      }
+    }, h("div", {
+      key: 'a65cdaa466210da348bf54e36c4e805ae26e36fa',
+      class: "grid"
+    }, h("span", {
+      key: '894bc12a1b61925db0ec12b82f2f938805b71f46',
+      class: "f-body-02"
+    }, this.colors[4].rgb), h("span", {
+      key: '0b7f7cf4c514ccc4bd3c3a1f1bce75f23bbcc2cb',
+      class: "f-body-02 w-full"
+    }, this.colors[4].cmyk), h("eds-code-block", {
+      key: 'bc3b15dd7eb559b10fc64b08fc6c4d7681209d3c',
+      code: this.colors[4].hex,
+      style: {
+        minWidth: '150px',
+        marginRight: '5px'
+      }
+    })), h("div", {
+      key: '57be009b3ec863485042af43ca0dabcceb5a317b',
+      class: "grid"
+    }, h("span", {
+      key: 'f7e10fda97f12f55d4756014f296e710793c38f4',
+      class: "f-body-02"
+    }, this.colors[4].pantoneC || 'N/A'), h("span", {
+      key: 'e16fc4ac9a8639bda71bb814992bf6416949fd06',
+      class: "f-body-02"
+    }, this.colors[4].pantoneU || 'N/A')))));
+  }
+};
+
+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 };