@ebrains/react 2.3.1 → 2.4.0

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

@@ -32,7 +32,7 @@ const ColorPrimaryPalette = class {
   }
   render() {
     return h("ul", {
-      key: 'b51f8df9e8481654c410a4564554e6af65e5995c',
+      key: '247df18cb7672b14048e390299894acf0ff44714',
       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"
@@ -113,7 +113,7 @@ const ColorSecondaryPalette = class {
   }
   render() {
     return h("ul", {
-      key: 'c7b2a9406709dc3584e8e6f6c57a79ea5a9974c3',
+      key: '1712cc4bd243d5bde96aac8334ce26706edf4731',
       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"
@@ -205,7 +205,7 @@ const ColorSupportPalette = class {
   }
   render() {
     return h("ul", {
-      key: '50f93b8bc9ee54e78eb23a21764afb0be5e3ea6c',
+      key: 'f8847f5ebf1c015d60cc1b699b4cfbeceff77b59',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, this.colors.map(color => {
       // compute once
@@ -267,7 +267,7 @@ const GradientPrimaryPalette = class {
   }
   render() {
     return h("ul", {
-      key: 'f3653cb822e88d5914f12a84342603ad3dfb6af0',
+      key: '6858be14a27601106581efe8fd9221daf4f0ddfc',
       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%)'
@@ -347,214 +347,214 @@ const GradientSecondaryPalette = class {
   }
   render() {
     return h("div", {
-      key: '068872a235a7b4a3bb1b5d49fe3c26014c317995'
+      key: '568e55cca12f97a4afc1a5acffd8ffd64938da44'
     }, h("ul", {
-      key: 'f2ef5ac747e40b62eda116125b2ec1da32b00c9e',
+      key: '16f19b9d89e83015db81290acfddb3ffc0368aa2',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: '5c700c0e2794b38e6448709ac4eda002805fed43',
+      key: 'd1b205d58e171e2a194685888a919d7178291118',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '185747db12912d6fbb672e6c2a3a6a28b533f483',
+      key: '3be3ecf27999f572951253260802099e49c60392',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[0].background
       }
     }, h("div", {
-      key: 'bf2818f7382f1f86989c4e63c1a27abcf6630f77',
+      key: '931046b9a1b98bcb147f3d65f1278aa0104b7620',
       class: "grid"
     }, h("span", {
-      key: '21418b3761bfff72fa4e0893e233e7e4e3784940',
+      key: '15341ab5e4937589bd6495e88af46f52b66c13f6',
       class: "f-body-02"
     }, this.colors[0].rgb), h("span", {
-      key: 'a87087d4c32e323ec6f6cb44607bfe106de8e37d',
+      key: 'f73ee08c5e15162f757c1f20084c23dc4cd4fa4f',
       class: "f-body-02 w-full"
     }, this.colors[0].cmyk), h("eds-code-block", {
-      key: '7a4b6263093b9046f09ec51aa91b1391096d420e',
+      key: '414005a29611c2abf4adb9e1429ba46ed946e17c',
       code: this.colors[0].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: 'a1aa7b145ce29f5b3e193bd46510b1fd25f59e44',
+      key: 'ea676e150c48d8b6f92d664955e435445c00b290',
       class: "grid"
     }, h("span", {
-      key: '81ee23a025329d756a120872df9a7d9204209adf',
+      key: '1b379dba41b32ebf0e79feee6c73646686976123',
       class: "f-body-02"
     }, this.colors[0].pantoneC), h("span", {
-      key: 'f32a3efb2f2b987201684ab83bdaef467ea0a262',
+      key: 'b327219cfb31f7f6cc2ef1bfbba30acb676f1df8',
       class: "f-body-02"
     }, this.colors[0].pantoneU))), h("div", {
-      key: '41364b3de70ccec9c37aec1dc448c3a47ead60a9',
+      key: 'b8192f45ddef48a5adc24b9dbd023ab39212b9b7',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[1].background
       }
     }, h("div", {
-      key: 'b3f90be4ee360322051d26ffef7e09a63a8dfc87',
+      key: '945802383c8208d374156a239bd902e55e54993b',
       class: "grid"
     }, h("span", {
-      key: '09f4313220f9d93d578e5fa10ac1b399863244d2',
+      key: 'dc9b6be317846769a1e8365c0a3a2c974ccfa23b',
       class: "f-body-02"
     }, this.colors[1].rgb), h("span", {
-      key: '0261f9fd84a18c46ece5d982f7158e5a5f638909',
+      key: 'bbff2c3bf5769945f07db0813c21d7a14d8495b6',
       class: "f-body-02 w-full"
     }, this.colors[1].cmyk), h("eds-code-block", {
-      key: 'd04ecab2e1f63580ab95c69e4a70293c0358fea8',
+      key: '93d9b9d19f789a9731ed444c74bada150295ce28',
       code: this.colors[1].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: 'd188c38f611530259dfdef7cd75da4bdca0d2257',
+      key: '8b87555408c3539afe4bd90c19f3d2034cc57d54',
       class: "grid"
     }, h("span", {
-      key: '7378b85e8948ef41d5b2140a09768394ac95cb38',
+      key: '2d5b21465eeb219886486f77f2f72351c5f054aa',
       class: "f-body-02"
     }, this.colors[1].pantoneC), h("span", {
-      key: '9e27beba8e19af3b05702d5b82b04db636d815ac',
+      key: 'b16aa8a075b2a7a3676b7f193ba4fa3185e72f49',
       class: "f-body-02"
     }, this.colors[1].pantoneU))))), h("eds-block-break", {
-      key: '56644448031fb2a4e26b79dfff46d8ada641e7b1'
+      key: '3878257fda9acf2175bc8a152c62b09ec5c4924f'
     }), h("ul", {
-      key: '2d6213ff4091ca2f9cb77854beafa34886c3ed42',
+      key: '8b98d84de8eab1fdf31b21ec30aef8af95f82f4d',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: '717be10bad4a00a04644a09dfcaed2e583327e21',
+      key: '6eec8f2913b8805929a6931856be3fea0b665fdd',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '381ff7e46bc6508bf2b956b8b0ab61e154d70341',
+      key: 'fdc4febd09538cc9d2e0d5efee8394d680859aef',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[2].background
       }
     }, h("div", {
-      key: '0dcbea6ed615f5b99c9d8bfde699bda1aba7d574',
+      key: '05e44f954e17e71e93983544efb08fb3f8415efb',
       class: "grid"
     }, h("span", {
-      key: 'b8c02c0590f264d68927b17ffa30e9a7af865baf',
+      key: 'ff3dac59c5d99e3c3a0bea5454771a46546699dc',
       class: "f-body-02"
     }, this.colors[2].rgb), h("span", {
-      key: '20b702c1743d53a3ecc13c1f105a43fc175c9fde',
+      key: '629424b91fe69ba2348995ea321b5de71b9bb0e1',
       class: "f-body-02 w-full"
     }, this.colors[2].cmyk), h("eds-code-block", {
-      key: '1b10b51df54537b0d236f8a0c1e85415a83a9762',
+      key: '3cadcf4a4d666bfea773aeaf797dcebe0224e9c7',
       code: this.colors[2].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '381a0109027379acee17ba106778d0a6af2418de',
+      key: 'a725f4f13d4c944a18c3158f735d8dd172e35128',
       class: "grid"
     }, h("span", {
-      key: '79be72de7ba1588ac6bbead48c014279500c67e5',
+      key: '02c30563e47078f08752ab718e923dacfca8cf6b',
       class: "f-body-02"
     }, this.colors[2].pantoneC), h("span", {
-      key: 'ff2e674caa413fe8eda95b9e683ff3264955a699',
+      key: '460cfb91e2f9bf5c9f557b844c0bd1d7e904c9d2',
       class: "f-body-02"
     }, this.colors[2].pantoneU))), h("div", {
-      key: '839e80c29b1f45e1141b5ca7ee14a8164f0d59f4',
+      key: '14c4755af95cb41e5149db0de90a0f0aef429325',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[3].background
       }
     }, h("div", {
-      key: 'd1cf88212f2c5cf0a8a3fc95e6f28b576af209bb',
+      key: 'ef619263619ba173c62312b766cb00d6d5098123',
       class: "grid"
     }, h("span", {
-      key: '599b3fe538135f04b93e2e9a9ae5884e6fe66307',
+      key: 'b5585b81fbc61845e6e5cf0ed23782f904cf3d58',
       class: "f-body-02"
     }, this.colors[3].rgb), h("span", {
-      key: 'fe3989bf9061ee14ba325fdfe61d190e45a8d715',
+      key: '346257d86c37f5058f9b4deddf9166f1522970ce',
       class: "f-body-02 w-full"
     }, this.colors[3].cmyk), h("eds-code-block", {
-      key: 'b5edf416ce3443e33784270ae786117dca54484e',
+      key: '59b89beef607a724b2bfed5b9bad2a78e5708b42',
       code: this.colors[3].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '6337a21286045759e3b8858d225226bd67ccda95',
+      key: 'f8e1a2462a31e0a3901618ec76338dde5ae10943',
       class: "grid"
     }, h("span", {
-      key: 'cfe45c5f93fe75f7a7d75de09ca74e247b5f9f3c',
+      key: '6e83c3aaae0ae9ec8df2d6eff620059256e4540f',
       class: "f-body-02"
     }, this.colors[3].pantoneC), h("span", {
-      key: '266110a2ccf1a77b76c8795e609b69b933d71e34',
+      key: '714d4e2a90966381c56671c295ec106581eeddef',
       class: "f-body-02"
     }, this.colors[3].pantoneU))))), h("eds-block-break", {
-      key: '5edf56c8f60ca932f25cf4794898ceb09dffc490'
+      key: '0014a9aa45398ea35a1f80b6d2e01b4cbc0e99e0'
     }), h("ul", {
-      key: 'e28256a79065796bba19fa8557d1ad4937dbc43a',
+      key: 'ef5896480deed0bf14c7ebc583b875e31271cff1',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: '0d900d8923731c12436819da4bb78495c82c61e4',
+      key: '130103977198e73dcf1e76c8b247dfd0052e66b4',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '23e00e8340a1a7c4339db354778785bcfcfc34be',
+      key: '8f971d70daed0c51ae3794f5eeea9b8d5bbd689a',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[4].background
       }
     }, h("div", {
-      key: 'ff202435e451358b08d02fbe5ed085cb61bb27e2',
+      key: '8563d07bc98d7a37b1c0eb04957420875247571e',
       class: "grid"
     }, h("span", {
-      key: '6710617d3369d48fbd7b0d50e5cee98816ce7b92',
+      key: 'b99f1f4d7c044625462542434c6b8941e0b4f8eb',
       class: "f-body-02"
     }, this.colors[4].rgb), h("span", {
-      key: '998e0c640f8b090da7662743a857ac0ee0ea4e0a',
+      key: '1d5524bcd82d295aa9bb502f04a4b3deb6816a4d',
       class: "f-body-02 w-full"
     }, this.colors[4].cmyk), h("eds-code-block", {
-      key: 'ff4a789b3dbed8d20a636403b2ad921c7c4dc7b8',
+      key: 'f3dec7ffb1d822eec1fbda4e189624c52b3d46b3',
       code: this.colors[4].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: 'e5d5fef837f2f1b1ba36746da1806eba8396d288',
+      key: '61135fbeab7e0657b589199cdf8caa39b5a97191',
       class: "grid"
     }, h("span", {
-      key: 'ed1302507a2760b27c1aaed2d48899b04d166d66',
+      key: '3feae86bababfb8dd0ae4c78e342b6b40a5353d6',
       class: "f-body-02"
     }, this.colors[4].pantoneC), h("span", {
-      key: '89bda8fc8cd7e150bde7263edc8fc4631e6831be',
+      key: '458f2c43915ff00eff926dc39afe9a56b822df67',
       class: "f-body-02"
     }, this.colors[4].pantoneU))), h("div", {
-      key: '689354344f53850640da266e14d6b622429eb1ff',
+      key: '6fdbdbd92c843ddaa42d3cad358317ec7dc92723',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[5].background
       }
     }, h("div", {
-      key: 'ace17479948837f012514a27392dad21f8c801e8',
+      key: '1f0f2dd84c18ab45e5db4f09cdacc4cffdd6db30',
       class: "grid"
     }, h("span", {
-      key: 'dd776f7884fa45d50204c0b10b4d2b6cac3eca5a',
+      key: '3050e33955bd0c6486ac385b7d89f404fd2ffb47',
       class: "f-body-02"
     }, this.colors[5].rgb), h("span", {
-      key: '7e44097339748f3309502391ab77dc5bd447b053',
+      key: 'c40759231240722eb9c93878d74f4a2028492b3a',
       class: "f-body-02 w-full"
     }, this.colors[5].cmyk), h("eds-code-block", {
-      key: 'c656dc07828b4548faaae6d0071cd02639016d54',
+      key: '01746b746ebe1c229169f8c9d0b078bff564edbf',
       code: this.colors[5].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: 'cab214dadb52b79f24efdc607fe0507eccb94644',
+      key: 'c11478286125955885b8e4e650f284876af7144b',
       class: "grid"
     }, h("span", {
-      key: '2282a82817bc3cbb25f08e943fd086fa458ef34a',
+      key: '013e2e01b741eaff76a5ab017304dd6f2afb91c4',
       class: "f-body-02"
     }, this.colors[5].pantoneC), h("span", {
-      key: '06bf558a5387c5512b28fbbef644769fc8cf5b37',
+      key: 'ab81b5c103a1dd18b91227848fdd0ed379e92738',
       class: "f-body-02"
     }, this.colors[5].pantoneU))))));
   }
@@ -602,174 +602,174 @@ const GradientSupportPalette = class {
   }
   render() {
     return h("ul", {
-      key: '3d8000d8778c4f6f35f8feca3c54fb2d535bc09f',
+      key: '8f8703b8b6ef19574984d630d23f4a078e2683c1',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: '28143c46226cc5452c009346ec23ab016d78c675',
+      key: '6981ecea14309c747455aff6dff44c807391fb22',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '57bbdd2b971ef3235e14f5b175e7e15696b68a28',
+      key: '23dc2b606d633779313a98cde5df750a21c50267',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         backgroundColor: this.colors[0].background
       }
     }, h("div", {
-      key: '24c7d800175b4b453b06795b1e759c6819b35607',
+      key: '3649c7d9a2c815cc6ab1f414f062321f29a00701',
       class: "grid"
     }, h("span", {
-      key: '16653d8c729d81156d1df461de0fded8aa7d8e93',
+      key: '732dfac36b9bb5d9df0dfe96bfd4fb36c5288d2e',
       class: "f-body-02"
     }, this.colors[0].rgb), h("span", {
-      key: '4b4a537f3896f2a7b986172feb5d08cf05355714',
+      key: 'f0505ec5aaff33b24b19db784b3b16b9f73f18db',
       class: "f-body-02 w-full"
     }, this.colors[0].cmyk), h("eds-code-block", {
-      key: 'b6d4d3472e18e03a373b2667a785ef9e735dfaec',
+      key: 'ca7457b315b438bf41a7f0b1dfd2205d493e1c06',
       code: this.colors[0].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '8e85ec4998995bbdde92a2afc1939f0c2deabee5',
+      key: 'd29ebbce1ea5dbf25888388bbc3cd73416642c94',
       class: "grid"
     }, h("span", {
-      key: 'e5815876cb2a5e0790cb2a5ea9e132a24b677880',
+      key: '8e503b62bc19087efe3291f2454eec4b00b18a4a',
       class: "f-body-02"
     }, this.colors[0].pantoneC || 'N/A'), h("span", {
-      key: '745a25fc7b57801a4aef526001359e6427b6efd1',
+      key: '5a12462534602160bce47b9c9f397557f8f1057d',
       class: "f-body-02"
     }, this.colors[0].pantoneU || 'N/A')))), h("li", {
-      key: 'cb10855c01a39e52b4d651a1df440b6e9dc86a62',
+      key: '491e060c9201186f987ae4f075eee0efca38b6bc',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '56d0b50121ad6386d0f91c24cb73a8bc9596a720',
+      key: 'e2084e7d7cfce5a784efbcdaf0c597b749ecc1d0',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         backgroundColor: this.colors[1].background
       }
     }, h("div", {
-      key: 'bed562bf4fabe0599e315ff86fbf17aba5ee3d74',
+      key: '633ced7174a5242a3dff2d51d53add5a20bcbf0a',
       class: "grid"
     }, h("span", {
-      key: 'bdb88a23996aeca2cf8da34d534ed1e2e1098890',
+      key: 'a0000924f7a9614b4dd8651880b51925f0868487',
       class: "f-body-02"
     }, this.colors[1].rgb), h("span", {
-      key: '5c55cd02843963393abbf393a851fff3790c1905',
+      key: '6007da47921d8ae881156f9c57af43a839e71743',
       class: "f-body-02 w-full"
     }, this.colors[1].cmyk), h("eds-code-block", {
-      key: 'f11febc9e05590d48879d93cd3b823bbbb7bc878',
+      key: '4aa67182a26f57bbeb9dd251db1cbbe0ba1919fe',
       code: this.colors[1].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '79119e208137848015ff77ae326afe1fb5cfc0d3',
+      key: '963ac8d736c7b54366d2e2798e77bc04ac01d539',
       class: "grid"
     }, h("span", {
-      key: '7dfeb3a9e103f208986888f967384c5ba3ed4d4c',
+      key: 'd574f8c3b02fdcd9bca10d186916b848b275ae85',
       class: "f-body-02"
     }, this.colors[1].pantoneC || 'N/A'), h("span", {
-      key: '205cf6b9473d9d236fac83aa2b6eb458ecd1aee5',
+      key: '97b5290bd127179160eb6fc8b76914cb620b733c',
       class: "f-body-02"
     }, this.colors[1].pantoneU || 'N/A')))), h("li", {
-      key: '16406e3fa39372ebb6c32a2bbf506427fc047c13',
+      key: 'f5f7ff4bdad90dff2506112c812fe4c466539f7f',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: '4d44f5f7771164d581b7883698a8c891c9615a1f',
+      key: '8517f8e52dbb41ece0da2019d072f7e73fc8d2a0',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[2].background
       }
     }, h("div", {
-      key: '95b07ece22975f09f30fdff39dff685e71ad94e7',
+      key: '08db76c840f25159be21cf66f8ab1a5e7c0ec206',
       class: "grid"
     }, h("span", {
-      key: '9144a8c71d1e198b5a46bb1b6d3a4b7937b980d0',
+      key: 'b46181d8eaa69635063b39efeab603d6961428cc',
       class: "f-body-02"
     }, this.colors[2].rgb), h("span", {
-      key: '7be418e7bec46b05decfe58bd04bdb0cbc2f9c4f',
+      key: 'a91102f446f351b6be7d27051b947bf72a394606',
       class: "f-body-02 w-full"
     }, this.colors[2].cmyk), h("eds-code-block", {
-      key: '61050dd447d35dcd1388785cadb809b9936460ff',
+      key: '98d406eaa5d641640ca5eb95271fc400282c6f69',
       code: this.colors[2].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '87289e9f27972a7ac01f95dfdc780b2a63840246',
+      key: 'a4cf89fe913982b3c296dc745323630518b9834f',
       class: "grid"
     }, h("span", {
-      key: 'e2d37a0132d667f3a95a248f5b5a26cd55b7bed0',
+      key: 'ea5a30092e75135670580b40263314a1e16fb725',
       class: "f-body-02"
     }, this.colors[2].pantoneC), h("span", {
-      key: '58d126103e9bf1dc68ba22fdc6e8a2d24ed18693',
+      key: '0a4fe2b93027193d508f593432c7c2589ceedba9',
       class: "f-body-02"
     }, this.colors[2].pantoneU))), h("div", {
-      key: '0ca5402553a62bb66b9d5271b2f6d9bdc03b9aa5',
+      key: '117711ee44837fe7545490304e714e4e433c608b',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         background: this.colors[3].background
       }
     }, h("div", {
-      key: '4934962684a70ea4ab804bd2435f6b184d7f52c8',
+      key: '49227a94ee6c63902c24ae6e1ce598721f2179e7',
       class: "grid"
     }, h("span", {
-      key: '1a891700e10b5fc4eafd7f2a42d901b949bac2e7',
+      key: '25c2e7c420bf7501c91fb810dcc15b8fabe75211',
       class: "f-body-02"
     }, this.colors[3].rgb), h("span", {
-      key: '99ebfc2392e11e67a3739796b4606ec6cee12ef3',
+      key: '0a7918f45e4315630fdd51701fd502930db1d62d',
       class: "f-body-02 w-full"
     }, this.colors[3].cmyk), h("eds-code-block", {
-      key: '13f9e44bc9b34cbdfb93a5a97ada482627e11a92',
+      key: '93fd3a9ce6103b162559697d43bd6c79134bd12e',
       code: this.colors[3].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '2c2a179f5073ead1646e114d76b4c26f48d998b5',
+      key: '9b8af5c7b8c039647035c2252cb9febddf1c12d8',
       class: "grid"
     }, h("span", {
-      key: 'aba72113f0e47ec564bfb8dc1695d74cc0dacf0b',
+      key: 'c50c154e8587bb41f1c80b61869103d12339308f',
       class: "f-body-02"
     }, this.colors[3].pantoneC), h("span", {
-      key: '4a113554b101bcf1db71eff702914e2de6bb5876',
+      key: '567798f8d597a9fe26123dd489443e6c752f0b38',
       class: "f-body-02"
     }, this.colors[3].pantoneU)))), h("li", {
-      key: '78085204312fd78071a88d329c1085cd4615fe95',
+      key: '4297335389feff02c051beea3bbfee33677f61ac',
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
     }, h("div", {
-      key: 'edc490c0d48ecdfa8be56ba2921ff7f5a6f74ee1',
+      key: '0a5cda329ffc92c33e323ded6c74a2f3b6309797',
       class: "effect-height flex items-center justify-between p-16",
       style: {
         backgroundColor: this.colors[4].background
       }
     }, h("div", {
-      key: '5f8ff231f7752ad50a8bebdbaccfc63543a8e16b',
+      key: '02babf093dea42599bdd40ae789b795714b638a2',
       class: "grid"
     }, h("span", {
-      key: '22c0035742e6dd5e2c02c59e67b5769ce97324cf',
+      key: 'a5c2e49f307c005c29b6c3c0d5c37604a20b38d7',
       class: "f-body-02"
     }, this.colors[4].rgb), h("span", {
-      key: '87215ff0541f7891b74082bd63c59e3e65db1998',
+      key: 'e9281ee3b7c23920e165f90796772c5057f0e591',
       class: "f-body-02 w-full"
     }, this.colors[4].cmyk), h("eds-code-block", {
-      key: 'f96e95f761998e790c44c9b62f9b4eab4007f985',
+      key: '0144a15a5f4276c6d686dd7ea2893ead295d81ad',
       code: this.colors[4].hex,
       style: {
         minWidth: '150px',
         marginRight: '5px'
       }
     })), h("div", {
-      key: '9b31a9dd4b8cc239c9b66c7adbc312bdd827b93e',
+      key: '84e6de06e4c31803fa99ef2113866e947631be02',
       class: "grid"
     }, h("span", {
-      key: 'c271cd470251c490af7a47726477ff1ad924ca1e',
+      key: '1a21ce9476d86e83c3a61c591d015d917f34bad2',
       class: "f-body-02"
     }, this.colors[4].pantoneC || 'N/A'), h("span", {
-      key: '1fe724e0c13e01af88619953dada47e659a234a4',
+      key: 'c81bd5ea778d4694847bcbd0f23c320e5acc9167',
       class: "f-body-02"
     }, this.colors[4].pantoneU || 'N/A')))));
   }

package/components-section.entry.esm.js

@@ -9,7 +9,10 @@ const DocsOverview = () => h("div", {
   code: "<script type='module'>\n  import { defineCustomElements } from 'https://unpkg.com/@ebrains/components@latest/loader/index.js'; \n  // Define custom elements\n  defineCustomElements(window);\n</script>",
   language: "javascript",
   "copy-label": "Copy Code"
-}), h("p", null, "This snippet is part of the Stencil component loader system. Under the hood, it does the following:"), h("eds-steps", {
+}), h("p", null, "This snippet is part of the Stencil component loader system. Under the hood, it does the following:"), h("div", {
+  class: "mt-16"
+}, h("eds-steps", {
+  type: "static",
   steps: [{
     title: 'Import the Loader Module',
     content: 'The script imports the defineCustomElements function from the Stencil-generated loader module hosted at a CDN. This module contains the registration logic for all your custom components.'
@@ -23,19 +26,19 @@ const DocsOverview = () => h("div", {
     title: 'Optimized Performance',
     content: 'By registering components early and lazy-loading their implementations, the script helps maintain a fast startup while ensuring that all custom elements are ready for use when needed.'
   }]
-}), h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"), h("eds-code-block", {
-  code: '<eds-button label="my bytton" intent="primary"></eds-button>',
-  language: "html",
-  "copy-label": "Copy Code"
-}), h("h2", null, "Load the variables and styles"), h("p", null, "To directly use only the produced variables (colors, breakpoints, typography) add the tag below to the", ' ', h("code", null, "head"), ". This approach is recommended when you\u2019re working solely with the web components and want minimal integration. That said, the components are configured to require only these CSS variables and nothing more."), h("eds-code-block", {
+})), h("h2", null, "Load the variables and styles"), h("p", null, "To directly use only the produced variables (colors, breakpoints, typography) add the tag below to the", ' ', h("code", null, "head"), ". This approach is recommended when you\u2019re working solely with the web components and want minimal integration. That said, the components are configured to require only these CSS variables and nothing more."), h("eds-code-block", {
   code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>',
   language: "css",
   "copy-label": "Copy Code"
-}), h("p", null, "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the", ' ', h("code", null, "head"), ". Use this when you want quick access to ready-made utilities for building your own components or applications and you do not wish to dive deep to css configurations."), h("eds-code-block", {
+}), h("p", null, "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the", ' ', h("code", null, "head"), ". Use this when you want quick access to ready-made utilities for building your own components or applications and you do not wish to dive deep to dynamic css configurations."), h("eds-code-block", {
   code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>',
   language: "css",
   "copy-label": "Copy Code"
-}), h("p", null, "Note that, loading either the variables or the predefined CSS framework above,", ' ', h("b", null, "automatically loads the fonts so you can skip loading them separately"), "."));
+}), h("p", null, "Note that, loading either the variables or the predefined CSS framework above,", ' ', h("b", null, "automatically loads the fonts so you can skip loading them separately"), "."), h("h2", null, "Example"), h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"), h("eds-code-block", {
+  code: '<eds-button label="my bytton" intent="primary"></eds-button>',
+  language: "html",
+  "copy-label": "Copy Code"
+}));
 const DocsInstallation = () => h("div", null, h("p", null, "Before proceeding, ensure that Node.js is installed on your machine\u2014you can download the latest version from the official website. If your project doesn\u2019t already use npm and you plan to integrate EBRAINS Components, you'll need to create a package.json file by running npm init and following the on-screen instructions."), h("div", {
   class: "my-8"
 }, h("eds-code-block", {
@@ -89,7 +92,11 @@ const DocsVue = () => h("div", null, h("h2", null, "Vue Wrappers"), h("p", null,
   code: "npm install @ebrains/vue",
   language: "javascript",
   "copy-label": "Copy Code"
-}), h("h2", null, "Passing Properties to Custom Elements Using the ", h("b", null, ".prop"), " Modifier in Vue Wrappers"), h("p", null, "When using Vue wrappers for Stencil components (or any custom elements), you might encounter issues with property names being altered due to HTML\u2019s attribute handling. By default, Vue binds values as HTML attributes, and HTML attributes are case-insensitive. This means that camelCase property names can be transformed into lowercase strings, which can prevent your component from receiving the correct data."), h("h3", null, "How to Use the ", h("b", null, ".prop"), " Modifier"), h("p", null, "When using Vue wrappers, you can pass properties with the .prop modifier by adding it to your binding expression. Here\u2019s an example of how to do it:"), h("div", {
+}), h("h2", null, "Vue Router Initialization"), h("p", null, "For better component handling and to avoid potential asynchronous initialization issues (such as runtime errors from components that depend on the router context), make sure the application waits for the router to fully initialize before mounting the app. Use the following pattern in your ", h("code", null, "main.ts"), ":"), h("eds-code-block", {
+  code: "import { createApp } from 'vue';\nimport App from './App.vue';\nimport router from './router';\n\nconst app = createApp(App);\napp.use(router);\n\n// Wait for router to finish resolving initial navigation\nrouter.isReady().then(() => {\n  app.mount('#root');\n});\n",
+  language: "javascript",
+  "copy-label": "Copy Code"
+}), h("p", null, "This ensures that all components relying on routing information (e.g., navigation links, route guards, or async route data) are rendered only after the router is ready, preventing timing-related errors or unexpected behavior at startup."), h("h2", null, "Passing Properties to Custom Elements Using the ", h("b", null, ".prop"), " Modifier in Vue Wrappers"), h("p", null, "When using Vue wrappers for Stencil components (or any custom elements), you might encounter issues with property names being altered due to HTML\u2019s attribute handling. By default, Vue binds values as HTML attributes, and HTML attributes are case-insensitive. This means that camelCase property names can be transformed into lowercase strings, which can prevent your component from receiving the correct data."), h("h3", null, "How to Use the ", h("b", null, ".prop"), " Modifier"), h("p", null, "When using Vue wrappers, you can pass properties with the .prop modifier by adding it to your binding expression. Here\u2019s an example of how to do it:"), h("div", {
   class: "my-8"
 }, h("eds-alert", {
   message: "This may lead to issues because Vue binds these as attributes .",
@@ -111,7 +118,7 @@ const DocsVue = () => h("div", null, h("h2", null, "Vue Wrappers"), h("p", null,
   "section-title": "Example Vue App",
   "heading-level": "h3"
 }, h("eds-code-block", {
-  code: '\n<template>\n  <div>\n    <EdsHeader></EdsHeader>\n    <!-- render the splash until we manually hide it -->\n    <EdsSplashScreen inverse="false" />\n\n    <!-- then show main UI -->\n    <div v-if="!splashVisible" class="container my-16">\n      <EdsSteps \n        :steps="JSON.stringify(stepsdata)"\n        type="linear"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { EdsSplashScreen, EdsSteps, EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: { EdsHeader, EdsSplashScreen, EdsSteps },\n  data() {\n    return {\n      stepsdata: [\n        { title: "Introduction", content: "Begin by familiarizing yourself with the overall process." },\n        { title: "Process Overview", content: "Review the detailed steps and understand the workflow." }\n      ],\n      splashVisible: true\n    };\n  },\n  methods: {\n    delay(ms) {\n      return new Promise(resolve => setTimeout(resolve, ms));\n    },\n    async initialize() {\n      try {\n        // simulate your init work\n        await this.delay(2000);\n\n        // fire the built-in event that EdsSplashScreen listens for\n        window.dispatchEvent(new Event("hideSplash"));\n      } catch (e) {\n        console.error("Init error", e);\n        window.dispatchEvent(new Event("hideSplash"));\n      } finally {\n        // show the rest of the app\n        this.splashVisible = false;\n      }\n    }\n  },\n  mounted() {\n    this.initialize();\n  }\n};\n</script>\n',
+  code: '\n<template>\n  <div>\n    <EdsHeader headerVariant="strong"></EdsHeader>\n    <!-- render the splash until we manually hide it -->\n    <EdsSplashScreen inverse="false" />\n\n    <!-- then show main UI -->\n    <div v-if="!splashVisible" style="padding: 10px;">\n      <EdsSteps \n        :steps="JSON.stringify(stepsdata)"\n        type="linear"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { EdsSplashScreen, EdsSteps, EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: { EdsHeader, EdsSplashScreen, EdsSteps },\n  data() {\n    return {\n      stepsdata: [\n        { title: "Introduction", content: "Begin by familiarizing yourself with the overall process." },\n        { title: "Process Overview", content: "Review the detailed steps and understand the workflow." }\n      ],\n      splashVisible: true\n    };\n  },\n  methods: {\n    delay(ms) {\n      return new Promise(resolve => setTimeout(resolve, ms));\n    },\n    async initialize() {\n      try {\n        // simulate your init work\n        await this.delay(2000);\n\n        // fire the built-in event that EdsSplashScreen listens for\n        window.dispatchEvent(new Event("hideSplash"));\n      } catch (e) {\n        console.error("Init error", e);\n        window.dispatchEvent(new Event("hideSplash"));\n      } finally {\n        // show the rest of the app\n        this.splashVisible = false;\n      }\n    }\n  },\n  mounted() {\n    this.initialize();\n  }\n};\n</script>\n',
   language: "javascript",
   "copy-label": "Copy Code"
 })));
@@ -158,7 +165,7 @@ const ComponentsSection = class {
   }
   render() {
     return h("div", {
-      key: '7c35270931bb242311baaa8b2d45f15135f72410',
+      key: '2716938c52b8f67e031d8508745cccb8f015a110',
       class: "container"
     }, this.renderContent());
   }