@ebrains/react 0.7.0-alpha.0 → 0.9.0-beta

package/README.md

@@ -1,7 +1,7 @@
 # react
 
-This library was generated with [Nx](https://nx.dev).
+React target wrappers for Stencil output, allowing for seamless integration of Stencil components into React projects.
 
-## Running unit tests
+## Usage 
 
-Run `nx test react` to execute the unit tests via [Jest](https://jestjs.io).
+More information about importing and using the package can be found currently in the WIP [https://design-dev.ebrains.eu/ui-components/](EBRAINS Design System).

package/bookmark-c200037c.esm.js

@@ -0,0 +1,16 @@
+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>`;
+
+export { bookmark as b };

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

@@ -32,8 +32,8 @@ const ColorPrimaryPalette = class {
   }
   render() {
     return h("ul", {
-      key: '7460398e9b55e735287f39e8a7fd6a6116bd8141',
-      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+      key: '970e6baf4b258e9a0ed194316daf1c862d17733e',
+      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", {
@@ -113,8 +113,8 @@ const ColorSecondaryPalette = class {
   }
   render() {
     return h("ul", {
-      key: '0910d36be4d6a7a7b8cf1d95a507bb3e1a2f5062',
-      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+      key: '54f985b91b28ae253a06ec313872ccc81449bf51',
+      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", {
@@ -146,7 +146,6 @@ const ColorSecondaryPalette = class {
 const ColorSupportPalette = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    // Support palette data
     this.colors = [{
       rgb: 'R20 G20 B20',
       cmyk: 'C78 M69 Y61 K87',
@@ -184,36 +183,59 @@ const ColorSupportPalette = class {
       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: 'dfac2328c0c7d8f9398ee7c6e7ad82f5acaaeb6a',
-      class: "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 || 'N/A'), h("span", {
-      class: "f-body-02"
-    }, color.pantoneU || 'N/A'))))));
+      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 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 {
@@ -245,8 +267,8 @@ const GradientPrimaryPalette = class {
   }
   render() {
     return h("ul", {
-      key: '64ac6b2a3c62ef21921d0aa75c1f85e672dab1a1',
-      class: "gap-y-8 md:gap-y-12 lg:gap-y-16",
+      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%)'
       }
@@ -325,214 +347,214 @@ const GradientSecondaryPalette = class {
   }
   render() {
     return h("div", {
-      key: '18563bbde4b325aed74ee0b01b138a23cdae495c'
+      key: 'bcfd5c5ca5a01138d27ae5f0867998bb40d526ac'
     }, h("ul", {
-      key: 'dbabf8a22ee06cafb4b4cefdd8b68f250ec83f12',
-      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+      key: '6f79d13b142488f1253ba77b0a044fd8ada8d297',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: '5f3cddf6bff2942681c67e464b5da2e3ac805d0b',
+      key: 'e8e44a1ee3993564fc2331d0d9337a2e0ceaebc1',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '22cf209919cac0811959841e6f2aa75728728d4a',
+      key: '229940b2fe6264429fb7627c9d3aa02e18e90b5a',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[0].background
       }
     }, h("div", {
-      key: '7f1c4b5fa75f03395c272b3301d71d122b68d120',
+      key: '0cf83c147dde777efe2783d2148e780ab328c978',
       class: "grid"
     }, h("span", {
-      key: 'a10f6c850e37a7e664e770f6a35c0b126cb8418a',
+      key: '06f893ff45abe7c1d3cb817fe5834a5176c93f06',
       class: "f-body-02"
     }, this.colors[0].rgb), h("span", {
-      key: '0e3e4b4ea42aa3040e1367817824cbcb67e12564',
+      key: '3967e17ed980810d8b35b0d2b2e754f7b2e8b3e0',
       class: "f-body-02 w-full"
     }, this.colors[0].cmyk), h("eds-code-block", {
-      key: '7947f3621bfcc3a53f06f8067b2f64deea660993',
+      key: '2adc489cee7b3a3a67f62493fb5e125fc1e75c04',
       code: this.colors[0].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: 'bc30dd2504a253d142778e7c5a1a3fd60c90367e',
+      key: 'cb27de2308afcaaaad82675c50573805e51f36f7',
       class: "grid"
     }, h("span", {
-      key: 'd2d183a462473ce02f80724cd3fa2280e4ceb8e0',
+      key: '0655190c8a8d555ed0fec5c319ff349d9fefc4d0',
       class: "f-body-02"
     }, this.colors[0].pantoneC), h("span", {
-      key: '91555d5a4e2b03aae6a887a890b848080781622e',
+      key: '2b75a99e922965547e9f86240c0db577ec0b9682',
       class: "f-body-02"
     }, this.colors[0].pantoneU))), h("div", {
-      key: 'b16c2c137bf4a738236f8b673f0f7810ad2746ab',
+      key: 'a8b7ef1c5309601366baffa2d3b48c6cd8893eb6',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[1].background
       }
     }, h("div", {
-      key: '1f7a698c4ad373d9513c5925074e81176a824c9a',
+      key: 'fd01906e34a91984aa7ce6439abcf03673d70099',
       class: "grid"
     }, h("span", {
-      key: '2852eb1e5f3fa33a67887eceb315b32c4035f2eb',
+      key: 'd4e119028ad415d9a21988c2bf603011856bb78d',
       class: "f-body-02"
     }, this.colors[1].rgb), h("span", {
-      key: '903756ee7952c079d9e9f3d349344ddac243f632',
+      key: '4ba9d26645884bc1fc75741ee40509af56a9e7ae',
       class: "f-body-02 w-full"
     }, this.colors[1].cmyk), h("eds-code-block", {
-      key: '2db0546ebeef3538312a6477b92a736c444e503e',
+      key: '5be1c28b15b458fba099868b598ee513077562e0',
       code: this.colors[1].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: 'e61d36591eb298ea6f3fcbabd0b0f9362238fe4f',
+      key: '8609b9e68f23aaec35e76b312a425c376d508892',
       class: "grid"
     }, h("span", {
-      key: '8b0ded8e23240b6d4d8edfa3a3aa6c85f25f988b',
+      key: 'f5cbb2d867e1a66e8371ebd73503ac1cd208f51d',
       class: "f-body-02"
     }, this.colors[1].pantoneC), h("span", {
-      key: 'fb40588691f07763cf9880d9f8f049002f3e8f06',
+      key: 'b72b8b23c5b1e136cb1114af22f34c6222b0d0f9',
       class: "f-body-02"
     }, this.colors[1].pantoneU))))), h("eds-block-break", {
-      key: 'c3ed43f27d147d4cb230fa1501e7831bc5147f1e'
+      key: '73e70749f132579efc19bccab4fff8b3e2d6979a'
     }), h("ul", {
-      key: '9762bc8bedd63846dc4c0bec57efb65054c5a59c',
-      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+      key: 'ae61acfb731129d85d3c5151ac08d676113a5971',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: 'ce9b3991c76437de7f7fc0c94fd6587c4991075a',
+      key: '2b59810dbc40db3dfca10a09ad524499ea87f0e9',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: 'c5d74cb6e29b296c7ed91894498c5bf924de2d0b',
+      key: 'e66cdabf69654205b975801bbc5ff102982fba78',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[2].background
       }
     }, h("div", {
-      key: '888b52e0276da7d9aa3c8e6f2554da86b22c5086',
+      key: '0f4d10150dc7694d7d4ccf59bc99a95216a00bc5',
       class: "grid"
     }, h("span", {
-      key: 'a40cd60940f1d32360d0f757d47372319d8ecc9e',
+      key: '85bbcdc4ca9b1f35625c15f5e742c35599084456',
       class: "f-body-02"
     }, this.colors[2].rgb), h("span", {
-      key: '5a0cd8cb8e93b41be560d817bd5885c6b4461a0e',
+      key: '0b5354d88e4ada3497bb20ae9138e3f23d31b5e7',
       class: "f-body-02 w-full"
     }, this.colors[2].cmyk), h("eds-code-block", {
-      key: 'fe48732aa72d3c35e5377bf0ae5ac475a2ca1de4',
+      key: 'a67ca35d57d13a66fcab132565c1a246e37f42e8',
       code: this.colors[2].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '5693b3908af5f0787d965ab028363318639dfec5',
+      key: '41322955767caa5ce439b142ccacdcb809ebc52e',
       class: "grid"
     }, h("span", {
-      key: 'ae024e8c6d7c28d8c22cce3e98084533a56f4ca8',
+      key: 'ab06d7acd75b1065d057a4ec8cd7af93cd91bb5c',
       class: "f-body-02"
     }, this.colors[2].pantoneC), h("span", {
-      key: '05340bf74e18c28154f8d4df08d32283a5ead23a',
+      key: 'ec63cad47f9021cfd1bed508721cc5772d037bd3',
       class: "f-body-02"
     }, this.colors[2].pantoneU))), h("div", {
-      key: '06ab691118c23a05bebad65d640e5995e7e3af25',
+      key: 'ce5898b0ff195f6033d28e68dfd981a1813a23a4',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[3].background
       }
     }, h("div", {
-      key: '52dd0aab7a5809bbd082a3d3cff2695572ebf6c6',
+      key: '1126fbf08d60b5840ba76e7d838d0ebfb47a0af9',
       class: "grid"
     }, h("span", {
-      key: 'bb918b8a0e618124fc55290df71c3813471ee1af',
+      key: 'd18fbf24fcedb41638c626991e9ef3706cd0e4f7',
       class: "f-body-02"
     }, this.colors[3].rgb), h("span", {
-      key: '91a426d45df887346a9bb7f60bcbbd21718f8b22',
+      key: '9d7d1df13ce9ab7b447d72851a2f5f3b66cf1034',
       class: "f-body-02 w-full"
     }, this.colors[3].cmyk), h("eds-code-block", {
-      key: '0f4a629375447d8429c4b8ff2fc040a89e84b5fc',
+      key: '5f92ba3b52a56638b7469572614d75fde23a1516',
       code: this.colors[3].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: 'b53e0a653cffa7fb4a0988c5bec113efeb5641a7',
+      key: '4b17671dd5d18382d80ee52b8cbce51633d78603',
       class: "grid"
     }, h("span", {
-      key: 'b6f08290063126ba39f73bb657dd10ad52bd8bad',
+      key: 'cc6a59b63bcd128d5adfd70d908cecba1324a717',
       class: "f-body-02"
     }, this.colors[3].pantoneC), h("span", {
-      key: '9339e232d31c86a33e374f24f152a69e7e5c1a7b',
+      key: '1cf37dab03769794f85d09d8d331306fb24e2fb3',
       class: "f-body-02"
     }, this.colors[3].pantoneU))))), h("eds-block-break", {
-      key: '2e3f5b0f5683a67b8f8e9ce83ce250802a7c9004'
+      key: '1e1888c860c39e5ac93c2dcd5ff9bf65e8c3b412'
     }), h("ul", {
-      key: '6b9aca7a8e164c6b401fc1a642aa143a468bbb66',
-      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+      key: '46ee0e1cd0a80a6da7991ee9474e4db5841b1c52',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: '8bdd9fb9b08ab1ba07a17fdfb6acdd48ae11b28c',
+      key: '59343e8799ddb56b0d14d3a9c43f4d43c5d82cba',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '3d3ea47b21006a0771859a92e15ac4f9b7bf7897',
+      key: '5388a8eb55332a9a6d5b5fbe8bf022eb2a76d06c',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[4].background
       }
     }, h("div", {
-      key: 'b1dace03d1388205556c95d49cbd756614def991',
+      key: '0f57d835c53d5844a155c8cfb78b1b3d0d37aecd',
       class: "grid"
     }, h("span", {
-      key: '094ec7f3f8ddd1275a6fb1b58c84bb111e3ae404',
+      key: '65b91767f90901590ca0ca4d892bf4bf5ca215d2',
       class: "f-body-02"
     }, this.colors[4].rgb), h("span", {
-      key: '336830747c0799da2661ac90a3afa8cb61cb1fab',
+      key: 'c2c46be9bee84e4ca53929dc9a0f5b87f48ad3ed',
       class: "f-body-02 w-full"
     }, this.colors[4].cmyk), h("eds-code-block", {
-      key: '18a585ce75dad73a2ed6a876634ed222db9fd994',
+      key: 'c40e13a9f535d710cede159d555fac9bbddf7b4c',
       code: this.colors[4].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '88a46869e0d40d98cdcff22d82e03d1ac49af723',
+      key: '0ebf1113e44f4e2704465d286022b84ddd57c43e',
       class: "grid"
     }, h("span", {
-      key: 'bc766933761ebb18581f5099f08a61b841a267a3',
+      key: 'e8c7485dfe4b2d1e36eae2cb21ec624384e5c085',
       class: "f-body-02"
     }, this.colors[4].pantoneC), h("span", {
-      key: 'd3972a70e80e7267f427ec0d68205a778e339d74',
+      key: '7d875d8c15a4f7bee7c746d9f297bd910f4cc5a6',
       class: "f-body-02"
     }, this.colors[4].pantoneU))), h("div", {
-      key: 'ba98ae739932dc19d1aa4cc34f4ffc02c0e175c0',
+      key: '27777683ba91c02274fd691b09a43c836e24aca3',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[5].background
       }
     }, h("div", {
-      key: '2249fc8c98d70a0be85aa516cf84d4fb624e78c7',
+      key: '4f9b082b9e6c5d679801446fa5a7b88d18b40147',
       class: "grid"
     }, h("span", {
-      key: 'd89fe65247e3e0971a1c66f5e688f8fbd4d91400',
+      key: '6afd59aafb0f1b793a8f989f7d201a922951dacd',
       class: "f-body-02"
     }, this.colors[5].rgb), h("span", {
-      key: '39bbde5ac5c4ab66ccb28bd2c8c4495cc1593920',
+      key: '2114f91de062deba17e69d9bff77670107ed3f91',
       class: "f-body-02 w-full"
     }, this.colors[5].cmyk), h("eds-code-block", {
-      key: '8cb9c77d7bb896ae6f18b445fb044267310ded19',
+      key: '08f8b3155d932eed5b05f4dbfc0e3c6e23aa02b5',
       code: this.colors[5].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '16f65aa08412f3fe478fb72d07a27537ada9804d',
+      key: '5459b32225dbf86021dd6a95e84b73bf14a74fe8',
       class: "grid"
     }, h("span", {
-      key: '997dba028ea8e06c970a624309a82c7dda2316d9',
+      key: 'bedfeaa4250c3bf74f267d50aecc0df93fbf21ad',
       class: "f-body-02"
     }, this.colors[5].pantoneC), h("span", {
-      key: '64483b5a8f445664c816b275eb871ef0fcecda19',
+      key: '8cc7a7a1abef3dcccad63c600692bffa5df89837',
       class: "f-body-02"
     }, this.colors[5].pantoneU))))));
   }
@@ -580,174 +602,174 @@ const GradientSupportPalette = class {
   }
   render() {
     return h("ul", {
-      key: 'dc57ff3bffa6aea0facf8d1e8fc186139f69e56e',
-      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+      key: 'd965ec67f29697480e0b7a6fea0743d946476153',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: 'e1d8dbfcb363cd25456d10ad4d9f500c3a324ab3',
+      key: '7ae7f96aa9b3ce2a8d1fbc018b652a83e4f41e90',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: 'd11bbdbb71906dd7331aaaa1327ec2f7adb3914d',
+      key: '604c51b26cc5eec60e2e0125cda0cb60c82282f0',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         backgroundColor: this.colors[0].background
       }
     }, h("div", {
-      key: '4badad0801b33acb2b098698bde99760bfd14b80',
+      key: '083d7aa003c99b54dc0c62c5ba1603c2a2a75c0a',
       class: "grid"
     }, h("span", {
-      key: '77380c331665e198b3a04a93b728d7448158bdf1',
+      key: '4bc89f70e22217fa58f1db0586a8d5ee0db8bdae',
       class: "f-body-02"
     }, this.colors[0].rgb), h("span", {
-      key: '342dd1997afc6c83c28662101ba7f91ea8566a55',
+      key: 'd8e1bb4f6ce3e173e31685fc4435be29d9eac4a4',
       class: "f-body-02 w-full"
     }, this.colors[0].cmyk), h("eds-code-block", {
-      key: 'ddcbdaf618dde60577034a7e861b4cf3bbe667f6',
+      key: 'e370e6ea2808161625aea5e9b1e6e4dd9d137f33',
       code: this.colors[0].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '8a357ee33e9cd94eb30a5678d20cbf4ebf9498bd',
+      key: '6caf8c42e6296081a3daaca0e52c2a2776d1ab46',
       class: "grid"
     }, h("span", {
-      key: '22089c639c787de6f12441041d2f7a2a747f4242',
+      key: '48ac4de4d194ae630a8a14df56ff2670f2f37092',
       class: "f-body-02"
     }, this.colors[0].pantoneC || 'N/A'), h("span", {
-      key: '0423ab8c9d4e1797e6536829be719e09ca772e28',
+      key: 'fd02781c816a152d92c1579dc9a3115eadb0690e',
       class: "f-body-02"
     }, this.colors[0].pantoneU || 'N/A')))), h("li", {
-      key: '13c11bcd2017ae7dbbe8c83dcaa6ceeb4ed355e6',
+      key: 'a8562d9fb6ff77fcc6b31952a2ead12f3e0e9b50',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '878df236a48f7c58dfc9fcf1041823efa5b86b6f',
+      key: '4578880af1de315101deb5b42c91769dc2ca7437',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         backgroundColor: this.colors[1].background
       }
     }, h("div", {
-      key: '3c477c2733d98d2c3c918196274f73e21f1646fe',
+      key: 'ed304eb3c8c3ccb769db7d769872ce075261cb17',
       class: "grid"
     }, h("span", {
-      key: 'ce1f49df809c94f3b5aaca8bda6b48cded46f0a2',
+      key: '956fe1115a5c1c4f6d2503737a46f0f1cbdc8e06',
       class: "f-body-02"
     }, this.colors[1].rgb), h("span", {
-      key: '99d3fe3b33328b1e2f025abf3622f715ed301f1b',
+      key: '6beb1017eec40dd27351fda2ec1609987d46fb05',
       class: "f-body-02 w-full"
     }, this.colors[1].cmyk), h("eds-code-block", {
-      key: 'de3b2711377cdee0f78aca2391ec59af02e847e3',
+      key: 'a9319b683d13670c827b3444484d5469142ef76d',
       code: this.colors[1].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: 'aeaf3c18d0b30e99290bd0bc471eab32540dc495',
+      key: '1d4f1a48a18aee0a90dd04fb336352042014ce29',
       class: "grid"
     }, h("span", {
-      key: 'e7665496b791ed0cc6593348ecf9def40a1e80ca',
+      key: 'f4b7df5e0cde451a5e650e11b9805cc5be0c9fec',
       class: "f-body-02"
     }, this.colors[1].pantoneC || 'N/A'), h("span", {
-      key: 'e205631d4697c84fc65fa93224cdb76e254ec951',
+      key: '26d4869a2207e1386f72d2833aaf819c15006c34',
       class: "f-body-02"
     }, this.colors[1].pantoneU || 'N/A')))), h("li", {
-      key: 'cc17448fa87f6aed9d590aa4f5e2b1110f5e0bda',
+      key: 'ed2b1465825e249bff9f5df38649b331f19e0672',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: 'eb68860fede226a32f4bccd49df7df4b4f29c125',
+      key: '22182a6d9bb64ab5dcbc38e359c3a7d7f79f3090',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[2].background
       }
     }, h("div", {
-      key: '377ef135def34f71d52870ebb16aead224b9b794',
+      key: '28e2e772e7d12fbfdebec31f0aff6db397140132',
       class: "grid"
     }, h("span", {
-      key: '3117040c6a1c417dc9ac7629a885975cd459716b',
+      key: '872451c9846398641f1a592e8c166a6a51ee7298',
       class: "f-body-02"
     }, this.colors[2].rgb), h("span", {
-      key: 'c800eb6acf0b6182e95ad74376b46f8907507b51',
+      key: '84e28be1191f264e126c8579e26cbe6966010b4d',
       class: "f-body-02 w-full"
     }, this.colors[2].cmyk), h("eds-code-block", {
-      key: 'b244b778b58b605d3f0939a36930a096763a10e7',
+      key: 'a4c3dc76652feefaf3a9eba5bb3694b8dbf96be8',
       code: this.colors[2].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '95681ce98858d2ebc7dca572366eb314e9648d10',
+      key: 'ff3a6599da869d3f9e85cb94481206e7e6331988',
       class: "grid"
     }, h("span", {
-      key: '43573821ee81029875fa51580d9b043246a37f91',
+      key: '37ef90488eb673fdac1221f7123daa87a5a75fcd',
       class: "f-body-02"
     }, this.colors[2].pantoneC), h("span", {
-      key: 'c6083e98c351f4290617b3036a430d96350f6fe0',
+      key: '0a6fbb96f982a3e7c12af3787520335878faa9fe',
       class: "f-body-02"
     }, this.colors[2].pantoneU))), h("div", {
-      key: 'c2b7b895df7c4f8520e147b69ab51d988b5fc36a',
+      key: 'b59aeb053ab1145e0d3bc163f4650cdf30afe7d4',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[3].background
       }
     }, h("div", {
-      key: '6f95b56b195779568cb8ee8f2426a413e04efb24',
+      key: 'af020f1a66c2d0afcb2e2bdf189569e6d897ef32',
       class: "grid"
     }, h("span", {
-      key: 'e5f3dcdaeefdc080d24bfc70e98c50206215b268',
+      key: '3b2f895dccdeb5e2fb5aa505f19514f012d24426',
       class: "f-body-02"
     }, this.colors[3].rgb), h("span", {
-      key: 'f22aad83b9de337384791e3900934035e1dfcd6b',
+      key: '9836a6ef47ed0dc8767a590212a23bfca2f74adf',
       class: "f-body-02 w-full"
     }, this.colors[3].cmyk), h("eds-code-block", {
-      key: 'ec068df8197f86f9d2f433ddd589b89708e035a4',
+      key: '3b274f716c6ca1381e4cc0136d18e167290bfa74',
       code: this.colors[3].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '61f27c8dccfdfe2004ed7774d06ca38b0ede285d',
+      key: 'a41592e2172dc9f81e9d2f36328ff88de3f0954e',
       class: "grid"
     }, h("span", {
-      key: '9a8e7b7cc4eead6b79423e97b3ff01d3b70a85ec',
+      key: 'fd7a06a256d3513bcf239fe9f778f3589895b9d5',
       class: "f-body-02"
     }, this.colors[3].pantoneC), h("span", {
-      key: '2b5a61e7cdab44181d44db06a3eb5031a31648b8',
+      key: '991f38ea137b729c9e9e6c9e0031940151f6e9dc',
       class: "f-body-02"
     }, this.colors[3].pantoneU)))), h("li", {
-      key: '11e3f6ca45cbac17dd3bb8da99c6fd78e5a96b39',
+      key: '8efdd7d9f93cba4b9479e1d3face7cec94cf1af6',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '7e34069adbd3ed1509a35a22e4239e5e56d7f5b3',
+      key: '4223ec29cac4313dc261cb472bd880ae00279657',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         backgroundColor: this.colors[4].background
       }
     }, h("div", {
-      key: 'c0047f8cb9bf28bec4230fa0aae28e7d3ecb1599',
+      key: '227dd5fab1add4083271b6e7f95c7d575d91252e',
       class: "grid"
     }, h("span", {
-      key: 'a44db9793a74563015861206d3e6d10c3a3de998',
+      key: 'e5b1aab8d67f7c67f231acd4156768f146320be3',
       class: "f-body-02"
     }, this.colors[4].rgb), h("span", {
-      key: '51a8bce7027c8c151a2f56624dd340fe744d7da6',
+      key: 'fc4712e37494e8e30a48bc77a0ca61c94e24075d',
       class: "f-body-02 w-full"
     }, this.colors[4].cmyk), h("eds-code-block", {
-      key: '20d8bcda1aed4dd237dddb6079bba68f8f85dda7',
+      key: 'a429c519e42e242d8ce8f661a513f7b5327ffce7',
       code: this.colors[4].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '8e30a85a4418f1173183be58eade4682c6c812dd',
+      key: '84f30a1620cacadf8c0bf1382333d74772f81f27',
       class: "grid"
     }, h("span", {
-      key: '52fa4db1021aa08f5fe4c9cface5562050181eff',
+      key: '2b6dfc8e87517e4d0421ef0e5c2391a07f033600',
       class: "f-body-02"
     }, this.colors[4].pantoneC || 'N/A'), h("span", {
-      key: '7b0d375a2a63b3657eed9b4df0aead1db00255b5',
+      key: 'c4cd5bc061ce4163a170568c0ed5934c7f30d75f',
       class: "f-body-02"
     }, this.colors[4].pantoneU || 'N/A')))));
   }