@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

package/dist/cjs/bookmark-c61853d9.js

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

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

@@ -36,7 +36,7 @@ const ColorPrimaryPalette = class {
         ];
     }
     render() {
-        return (index.h("ul", { key: '7460398e9b55e735287f39e8a7fd6a6116bd8141', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (index.h("ul", { key: '970e6baf4b258e9a0ed194316daf1c862d17733e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
 };
 
@@ -97,23 +97,15 @@ const ColorSecondaryPalette = class {
         this.show = undefined;
     }
     render() {
-        return (index.h("ul", { key: '0910d36be4d6a7a7b8cf1d95a507bb3e1a2f5062', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (index.h("ul", { key: '54f985b91b28ae253a06ec313872ccc81449bf51', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
 };
 
 const ColorSupportPalette = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        // Support palette data
         this.colors = [
-            {
-                rgb: 'R20 G20 B20',
-                cmyk: 'C78 M69 Y61 K87',
-                hex: '#141414',
-                pantoneC: '',
-                pantoneU: '',
-                background: '#141414'
-            },
+            { rgb: 'R20 G20 B20', cmyk: 'C78 M69 Y61 K87', hex: '#141414', pantoneC: '', pantoneU: '', background: '#141414' },
             {
                 rgb: 'R56 G56 B56',
                 cmyk: 'C68 M58 Y55 K63',
@@ -138,18 +130,39 @@ const ColorSupportPalette = class {
                 pantoneU: 'PANTONE 649 U',
                 background: '#E6E6E6'
             },
-            {
-                rgb: 'R255 G255 B255',
-                cmyk: 'C0 M0 Y0 K0',
-                hex: '#FFFFFF',
-                pantoneC: '',
-                pantoneU: '',
-                background: '#FFFFFF'
-            }
+            { rgb: 'R255 G255 B255', cmyk: 'C0 M0 Y0 K0', hex: '#FFFFFF', pantoneC: '', pantoneU: '', background: '#FFFFFF' }
         ];
     }
+    getTextColor(value) {
+        // hex branch
+        if (value.startsWith('#')) {
+            const hex = value.slice(1);
+            const r = parseInt(hex.substring(0, 2), 16);
+            const g = parseInt(hex.substring(2, 4), 16);
+            const b = parseInt(hex.substring(4, 6), 16);
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        // rgb(...) branch
+        if (/rgb/i.test(value)) {
+            const nums = value
+                .replace(/rgba?\(/i, '')
+                .replace(')', '')
+                .split(',')
+                .map((n) => parseFloat(n.trim()));
+            const [r, g, b] = nums;
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        // fallback
+        return 'text-default';
+    }
     render() {
-        return (index.h("ul", { key: 'dfac2328c0c7d8f9398ee7c6e7ad82f5acaaeb6a', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), index.h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
+        return (index.h("ul", { key: 'cf31dbb2778735cb95f40243f557e97c15cd29f0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+            // compute once
+            const textClass = this.getTextColor(color.background);
+            return (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: `f-body-02 ${textClass}` }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), index.h("div", { class: "grid" }, index.h("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), index.h("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));
+        })));
     }
 };
 
@@ -185,7 +198,7 @@ const GradientPrimaryPalette = class {
         ];
     }
     render() {
-        return (index.h("ul", { key: '64ac6b2a3c62ef21921d0aa75c1f85e672dab1a1', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (index.h("ul", { key: '469fc7f19a4346b7e930095c489c0e89cc58e6df', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
                 background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
             } }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16" }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
@@ -247,19 +260,19 @@ const GradientSecondaryPalette = class {
         ];
     }
     render() {
-        return (index.h("div", { key: '18563bbde4b325aed74ee0b01b138a23cdae495c' }, index.h("ul", { key: 'dbabf8a22ee06cafb4b4cefdd8b68f250ec83f12', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '5f3cddf6bff2942681c67e464b5da2e3ac805d0b', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '22cf209919cac0811959841e6f2aa75728728d4a', class: "effect-height flex items-center justify-between p-16", style: {
+        return (index.h("div", { key: 'bcfd5c5ca5a01138d27ae5f0867998bb40d526ac' }, index.h("ul", { key: '6f79d13b142488f1253ba77b0a044fd8ada8d297', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: 'e8e44a1ee3993564fc2331d0d9337a2e0ceaebc1', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '229940b2fe6264429fb7627c9d3aa02e18e90b5a', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, index.h("div", { key: '7f1c4b5fa75f03395c272b3301d71d122b68d120', class: "grid" }, index.h("span", { key: 'a10f6c850e37a7e664e770f6a35c0b126cb8418a', class: "f-body-02" }, this.colors[0].rgb), index.h("span", { key: '0e3e4b4ea42aa3040e1367817824cbcb67e12564', class: "f-body-02 w-full" }, this.colors[0].cmyk), index.h("eds-code-block", { key: '7947f3621bfcc3a53f06f8067b2f64deea660993', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'bc30dd2504a253d142778e7c5a1a3fd60c90367e', class: "grid" }, index.h("span", { key: 'd2d183a462473ce02f80724cd3fa2280e4ceb8e0', class: "f-body-02" }, this.colors[0].pantoneC), index.h("span", { key: '91555d5a4e2b03aae6a887a890b848080781622e', class: "f-body-02" }, this.colors[0].pantoneU))), index.h("div", { key: 'b16c2c137bf4a738236f8b673f0f7810ad2746ab', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '0cf83c147dde777efe2783d2148e780ab328c978', class: "grid" }, index.h("span", { key: '06f893ff45abe7c1d3cb817fe5834a5176c93f06', class: "f-body-02" }, this.colors[0].rgb), index.h("span", { key: '3967e17ed980810d8b35b0d2b2e754f7b2e8b3e0', class: "f-body-02 w-full" }, this.colors[0].cmyk), index.h("eds-code-block", { key: '2adc489cee7b3a3a67f62493fb5e125fc1e75c04', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'cb27de2308afcaaaad82675c50573805e51f36f7', class: "grid" }, index.h("span", { key: '0655190c8a8d555ed0fec5c319ff349d9fefc4d0', class: "f-body-02" }, this.colors[0].pantoneC), index.h("span", { key: '2b75a99e922965547e9f86240c0db577ec0b9682', class: "f-body-02" }, this.colors[0].pantoneU))), index.h("div", { key: 'a8b7ef1c5309601366baffa2d3b48c6cd8893eb6', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, index.h("div", { key: '1f7a698c4ad373d9513c5925074e81176a824c9a', class: "grid" }, index.h("span", { key: '2852eb1e5f3fa33a67887eceb315b32c4035f2eb', class: "f-body-02" }, this.colors[1].rgb), index.h("span", { key: '903756ee7952c079d9e9f3d349344ddac243f632', class: "f-body-02 w-full" }, this.colors[1].cmyk), index.h("eds-code-block", { key: '2db0546ebeef3538312a6477b92a736c444e503e', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'e61d36591eb298ea6f3fcbabd0b0f9362238fe4f', class: "grid" }, index.h("span", { key: '8b0ded8e23240b6d4d8edfa3a3aa6c85f25f988b', class: "f-body-02" }, this.colors[1].pantoneC), index.h("span", { key: 'fb40588691f07763cf9880d9f8f049002f3e8f06', class: "f-body-02" }, this.colors[1].pantoneU))))), index.h("eds-block-break", { key: 'c3ed43f27d147d4cb230fa1501e7831bc5147f1e' }), index.h("ul", { key: '9762bc8bedd63846dc4c0bec57efb65054c5a59c', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: 'ce9b3991c76437de7f7fc0c94fd6587c4991075a', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: 'c5d74cb6e29b296c7ed91894498c5bf924de2d0b', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: 'fd01906e34a91984aa7ce6439abcf03673d70099', class: "grid" }, index.h("span", { key: 'd4e119028ad415d9a21988c2bf603011856bb78d', class: "f-body-02" }, this.colors[1].rgb), index.h("span", { key: '4ba9d26645884bc1fc75741ee40509af56a9e7ae', class: "f-body-02 w-full" }, this.colors[1].cmyk), index.h("eds-code-block", { key: '5be1c28b15b458fba099868b598ee513077562e0', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '8609b9e68f23aaec35e76b312a425c376d508892', class: "grid" }, index.h("span", { key: 'f5cbb2d867e1a66e8371ebd73503ac1cd208f51d', class: "f-body-02" }, this.colors[1].pantoneC), index.h("span", { key: 'b72b8b23c5b1e136cb1114af22f34c6222b0d0f9', class: "f-body-02" }, this.colors[1].pantoneU))))), index.h("eds-block-break", { key: '73e70749f132579efc19bccab4fff8b3e2d6979a' }), index.h("ul", { key: 'ae61acfb731129d85d3c5151ac08d676113a5971', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '2b59810dbc40db3dfca10a09ad524499ea87f0e9', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: 'e66cdabf69654205b975801bbc5ff102982fba78', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, index.h("div", { key: '888b52e0276da7d9aa3c8e6f2554da86b22c5086', class: "grid" }, index.h("span", { key: 'a40cd60940f1d32360d0f757d47372319d8ecc9e', class: "f-body-02" }, this.colors[2].rgb), index.h("span", { key: '5a0cd8cb8e93b41be560d817bd5885c6b4461a0e', class: "f-body-02 w-full" }, this.colors[2].cmyk), index.h("eds-code-block", { key: 'fe48732aa72d3c35e5377bf0ae5ac475a2ca1de4', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '5693b3908af5f0787d965ab028363318639dfec5', class: "grid" }, index.h("span", { key: 'ae024e8c6d7c28d8c22cce3e98084533a56f4ca8', class: "f-body-02" }, this.colors[2].pantoneC), index.h("span", { key: '05340bf74e18c28154f8d4df08d32283a5ead23a', class: "f-body-02" }, this.colors[2].pantoneU))), index.h("div", { key: '06ab691118c23a05bebad65d640e5995e7e3af25', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '0f4d10150dc7694d7d4ccf59bc99a95216a00bc5', class: "grid" }, index.h("span", { key: '85bbcdc4ca9b1f35625c15f5e742c35599084456', class: "f-body-02" }, this.colors[2].rgb), index.h("span", { key: '0b5354d88e4ada3497bb20ae9138e3f23d31b5e7', class: "f-body-02 w-full" }, this.colors[2].cmyk), index.h("eds-code-block", { key: 'a67ca35d57d13a66fcab132565c1a246e37f42e8', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '41322955767caa5ce439b142ccacdcb809ebc52e', class: "grid" }, index.h("span", { key: 'ab06d7acd75b1065d057a4ec8cd7af93cd91bb5c', class: "f-body-02" }, this.colors[2].pantoneC), index.h("span", { key: 'ec63cad47f9021cfd1bed508721cc5772d037bd3', class: "f-body-02" }, this.colors[2].pantoneU))), index.h("div", { key: 'ce5898b0ff195f6033d28e68dfd981a1813a23a4', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, index.h("div", { key: '52dd0aab7a5809bbd082a3d3cff2695572ebf6c6', class: "grid" }, index.h("span", { key: 'bb918b8a0e618124fc55290df71c3813471ee1af', class: "f-body-02" }, this.colors[3].rgb), index.h("span", { key: '91a426d45df887346a9bb7f60bcbbd21718f8b22', class: "f-body-02 w-full" }, this.colors[3].cmyk), index.h("eds-code-block", { key: '0f4a629375447d8429c4b8ff2fc040a89e84b5fc', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'b53e0a653cffa7fb4a0988c5bec113efeb5641a7', class: "grid" }, index.h("span", { key: 'b6f08290063126ba39f73bb657dd10ad52bd8bad', class: "f-body-02" }, this.colors[3].pantoneC), index.h("span", { key: '9339e232d31c86a33e374f24f152a69e7e5c1a7b', class: "f-body-02" }, this.colors[3].pantoneU))))), index.h("eds-block-break", { key: '2e3f5b0f5683a67b8f8e9ce83ce250802a7c9004' }), index.h("ul", { key: '6b9aca7a8e164c6b401fc1a642aa143a468bbb66', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '8bdd9fb9b08ab1ba07a17fdfb6acdd48ae11b28c', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '3d3ea47b21006a0771859a92e15ac4f9b7bf7897', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '1126fbf08d60b5840ba76e7d838d0ebfb47a0af9', class: "grid" }, index.h("span", { key: 'd18fbf24fcedb41638c626991e9ef3706cd0e4f7', class: "f-body-02" }, this.colors[3].rgb), index.h("span", { key: '9d7d1df13ce9ab7b447d72851a2f5f3b66cf1034', class: "f-body-02 w-full" }, this.colors[3].cmyk), index.h("eds-code-block", { key: '5f92ba3b52a56638b7469572614d75fde23a1516', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '4b17671dd5d18382d80ee52b8cbce51633d78603', class: "grid" }, index.h("span", { key: 'cc6a59b63bcd128d5adfd70d908cecba1324a717', class: "f-body-02" }, this.colors[3].pantoneC), index.h("span", { key: '1cf37dab03769794f85d09d8d331306fb24e2fb3', class: "f-body-02" }, this.colors[3].pantoneU))))), index.h("eds-block-break", { key: '1e1888c860c39e5ac93c2dcd5ff9bf65e8c3b412' }), index.h("ul", { key: '46ee0e1cd0a80a6da7991ee9474e4db5841b1c52', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '59343e8799ddb56b0d14d3a9c43f4d43c5d82cba', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '5388a8eb55332a9a6d5b5fbe8bf022eb2a76d06c', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, index.h("div", { key: 'b1dace03d1388205556c95d49cbd756614def991', class: "grid" }, index.h("span", { key: '094ec7f3f8ddd1275a6fb1b58c84bb111e3ae404', class: "f-body-02" }, this.colors[4].rgb), index.h("span", { key: '336830747c0799da2661ac90a3afa8cb61cb1fab', class: "f-body-02 w-full" }, this.colors[4].cmyk), index.h("eds-code-block", { key: '18a585ce75dad73a2ed6a876634ed222db9fd994', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '88a46869e0d40d98cdcff22d82e03d1ac49af723', class: "grid" }, index.h("span", { key: 'bc766933761ebb18581f5099f08a61b841a267a3', class: "f-body-02" }, this.colors[4].pantoneC), index.h("span", { key: 'd3972a70e80e7267f427ec0d68205a778e339d74', class: "f-body-02" }, this.colors[4].pantoneU))), index.h("div", { key: 'ba98ae739932dc19d1aa4cc34f4ffc02c0e175c0', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '0f57d835c53d5844a155c8cfb78b1b3d0d37aecd', class: "grid" }, index.h("span", { key: '65b91767f90901590ca0ca4d892bf4bf5ca215d2', class: "f-body-02" }, this.colors[4].rgb), index.h("span", { key: 'c2c46be9bee84e4ca53929dc9a0f5b87f48ad3ed', class: "f-body-02 w-full" }, this.colors[4].cmyk), index.h("eds-code-block", { key: 'c40e13a9f535d710cede159d555fac9bbddf7b4c', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '0ebf1113e44f4e2704465d286022b84ddd57c43e', class: "grid" }, index.h("span", { key: 'e8c7485dfe4b2d1e36eae2cb21ec624384e5c085', class: "f-body-02" }, this.colors[4].pantoneC), index.h("span", { key: '7d875d8c15a4f7bee7c746d9f297bd910f4cc5a6', class: "f-body-02" }, this.colors[4].pantoneU))), index.h("div", { key: '27777683ba91c02274fd691b09a43c836e24aca3', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, index.h("div", { key: '2249fc8c98d70a0be85aa516cf84d4fb624e78c7', class: "grid" }, index.h("span", { key: 'd89fe65247e3e0971a1c66f5e688f8fbd4d91400', class: "f-body-02" }, this.colors[5].rgb), index.h("span", { key: '39bbde5ac5c4ab66ccb28bd2c8c4495cc1593920', class: "f-body-02 w-full" }, this.colors[5].cmyk), index.h("eds-code-block", { key: '8cb9c77d7bb896ae6f18b445fb044267310ded19', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '16f65aa08412f3fe478fb72d07a27537ada9804d', class: "grid" }, index.h("span", { key: '997dba028ea8e06c970a624309a82c7dda2316d9', class: "f-body-02" }, this.colors[5].pantoneC), index.h("span", { key: '64483b5a8f445664c816b275eb871ef0fcecda19', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, index.h("div", { key: '4f9b082b9e6c5d679801446fa5a7b88d18b40147', class: "grid" }, index.h("span", { key: '6afd59aafb0f1b793a8f989f7d201a922951dacd', class: "f-body-02" }, this.colors[5].rgb), index.h("span", { key: '2114f91de062deba17e69d9bff77670107ed3f91', class: "f-body-02 w-full" }, this.colors[5].cmyk), index.h("eds-code-block", { key: '08f8b3155d932eed5b05f4dbfc0e3c6e23aa02b5', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '5459b32225dbf86021dd6a95e84b73bf14a74fe8', class: "grid" }, index.h("span", { key: 'bedfeaa4250c3bf74f267d50aecc0df93fbf21ad', class: "f-body-02" }, this.colors[5].pantoneC), index.h("span", { key: '8cc7a7a1abef3dcccad63c600692bffa5df89837', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
 };
 
@@ -311,11 +324,11 @@ const GradientSupportPalette = class {
         ];
     }
     render() {
-        return (index.h("ul", { key: 'dc57ff3bffa6aea0facf8d1e8fc186139f69e56e', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: 'e1d8dbfcb363cd25456d10ad4d9f500c3a324ab3', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: 'd11bbdbb71906dd7331aaaa1327ec2f7adb3914d', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, index.h("div", { key: '4badad0801b33acb2b098698bde99760bfd14b80', class: "grid" }, index.h("span", { key: '77380c331665e198b3a04a93b728d7448158bdf1', class: "f-body-02" }, this.colors[0].rgb), index.h("span", { key: '342dd1997afc6c83c28662101ba7f91ea8566a55', class: "f-body-02 w-full" }, this.colors[0].cmyk), index.h("eds-code-block", { key: 'ddcbdaf618dde60577034a7e861b4cf3bbe667f6', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '8a357ee33e9cd94eb30a5678d20cbf4ebf9498bd', class: "grid" }, index.h("span", { key: '22089c639c787de6f12441041d2f7a2a747f4242', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), index.h("span", { key: '0423ab8c9d4e1797e6536829be719e09ca772e28', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), index.h("li", { key: '13c11bcd2017ae7dbbe8c83dcaa6ceeb4ed355e6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '878df236a48f7c58dfc9fcf1041823efa5b86b6f', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, index.h("div", { key: '3c477c2733d98d2c3c918196274f73e21f1646fe', class: "grid" }, index.h("span", { key: 'ce1f49df809c94f3b5aaca8bda6b48cded46f0a2', class: "f-body-02" }, this.colors[1].rgb), index.h("span", { key: '99d3fe3b33328b1e2f025abf3622f715ed301f1b', class: "f-body-02 w-full" }, this.colors[1].cmyk), index.h("eds-code-block", { key: 'de3b2711377cdee0f78aca2391ec59af02e847e3', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'aeaf3c18d0b30e99290bd0bc471eab32540dc495', class: "grid" }, index.h("span", { key: 'e7665496b791ed0cc6593348ecf9def40a1e80ca', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), index.h("span", { key: 'e205631d4697c84fc65fa93224cdb76e254ec951', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), index.h("li", { key: 'cc17448fa87f6aed9d590aa4f5e2b1110f5e0bda', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: 'eb68860fede226a32f4bccd49df7df4b4f29c125', class: "effect-height flex items-center justify-between p-16", style: {
+        return (index.h("ul", { key: 'd965ec67f29697480e0b7a6fea0743d946476153', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '7ae7f96aa9b3ce2a8d1fbc018b652a83e4f41e90', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '604c51b26cc5eec60e2e0125cda0cb60c82282f0', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, index.h("div", { key: '083d7aa003c99b54dc0c62c5ba1603c2a2a75c0a', class: "grid" }, index.h("span", { key: '4bc89f70e22217fa58f1db0586a8d5ee0db8bdae', class: "f-body-02" }, this.colors[0].rgb), index.h("span", { key: 'd8e1bb4f6ce3e173e31685fc4435be29d9eac4a4', class: "f-body-02 w-full" }, this.colors[0].cmyk), index.h("eds-code-block", { key: 'e370e6ea2808161625aea5e9b1e6e4dd9d137f33', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '6caf8c42e6296081a3daaca0e52c2a2776d1ab46', class: "grid" }, index.h("span", { key: '48ac4de4d194ae630a8a14df56ff2670f2f37092', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), index.h("span", { key: 'fd02781c816a152d92c1579dc9a3115eadb0690e', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), index.h("li", { key: 'a8562d9fb6ff77fcc6b31952a2ead12f3e0e9b50', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '4578880af1de315101deb5b42c91769dc2ca7437', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, index.h("div", { key: 'ed304eb3c8c3ccb769db7d769872ce075261cb17', class: "grid" }, index.h("span", { key: '956fe1115a5c1c4f6d2503737a46f0f1cbdc8e06', class: "f-body-02" }, this.colors[1].rgb), index.h("span", { key: '6beb1017eec40dd27351fda2ec1609987d46fb05', class: "f-body-02 w-full" }, this.colors[1].cmyk), index.h("eds-code-block", { key: 'a9319b683d13670c827b3444484d5469142ef76d', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '1d4f1a48a18aee0a90dd04fb336352042014ce29', class: "grid" }, index.h("span", { key: 'f4b7df5e0cde451a5e650e11b9805cc5be0c9fec', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), index.h("span", { key: '26d4869a2207e1386f72d2833aaf819c15006c34', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), index.h("li", { key: 'ed2b1465825e249bff9f5df38649b331f19e0672', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '22182a6d9bb64ab5dcbc38e359c3a7d7f79f3090', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, index.h("div", { key: '377ef135def34f71d52870ebb16aead224b9b794', class: "grid" }, index.h("span", { key: '3117040c6a1c417dc9ac7629a885975cd459716b', class: "f-body-02" }, this.colors[2].rgb), index.h("span", { key: 'c800eb6acf0b6182e95ad74376b46f8907507b51', class: "f-body-02 w-full" }, this.colors[2].cmyk), index.h("eds-code-block", { key: 'b244b778b58b605d3f0939a36930a096763a10e7', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '95681ce98858d2ebc7dca572366eb314e9648d10', class: "grid" }, index.h("span", { key: '43573821ee81029875fa51580d9b043246a37f91', class: "f-body-02" }, this.colors[2].pantoneC), index.h("span", { key: 'c6083e98c351f4290617b3036a430d96350f6fe0', class: "f-body-02" }, this.colors[2].pantoneU))), index.h("div", { key: 'c2b7b895df7c4f8520e147b69ab51d988b5fc36a', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, index.h("div", { key: '28e2e772e7d12fbfdebec31f0aff6db397140132', class: "grid" }, index.h("span", { key: '872451c9846398641f1a592e8c166a6a51ee7298', class: "f-body-02" }, this.colors[2].rgb), index.h("span", { key: '84e28be1191f264e126c8579e26cbe6966010b4d', class: "f-body-02 w-full" }, this.colors[2].cmyk), index.h("eds-code-block", { key: 'a4c3dc76652feefaf3a9eba5bb3694b8dbf96be8', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'ff3a6599da869d3f9e85cb94481206e7e6331988', class: "grid" }, index.h("span", { key: '37ef90488eb673fdac1221f7123daa87a5a75fcd', class: "f-body-02" }, this.colors[2].pantoneC), index.h("span", { key: '0a6fbb96f982a3e7c12af3787520335878faa9fe', class: "f-body-02" }, this.colors[2].pantoneU))), index.h("div", { key: 'b59aeb053ab1145e0d3bc163f4650cdf30afe7d4', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, index.h("div", { key: '6f95b56b195779568cb8ee8f2426a413e04efb24', class: "grid" }, index.h("span", { key: 'e5f3dcdaeefdc080d24bfc70e98c50206215b268', class: "f-body-02" }, this.colors[3].rgb), index.h("span", { key: 'f22aad83b9de337384791e3900934035e1dfcd6b', class: "f-body-02 w-full" }, this.colors[3].cmyk), index.h("eds-code-block", { key: 'ec068df8197f86f9d2f433ddd589b89708e035a4', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '61f27c8dccfdfe2004ed7774d06ca38b0ede285d', class: "grid" }, index.h("span", { key: '9a8e7b7cc4eead6b79423e97b3ff01d3b70a85ec', class: "f-body-02" }, this.colors[3].pantoneC), index.h("span", { key: '2b5a61e7cdab44181d44db06a3eb5031a31648b8', class: "f-body-02" }, this.colors[3].pantoneU)))), index.h("li", { key: '11e3f6ca45cbac17dd3bb8da99c6fd78e5a96b39', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '7e34069adbd3ed1509a35a22e4239e5e56d7f5b3', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, index.h("div", { key: 'c0047f8cb9bf28bec4230fa0aae28e7d3ecb1599', class: "grid" }, index.h("span", { key: 'a44db9793a74563015861206d3e6d10c3a3de998', class: "f-body-02" }, this.colors[4].rgb), index.h("span", { key: '51a8bce7027c8c151a2f56624dd340fe744d7da6', class: "f-body-02 w-full" }, this.colors[4].cmyk), index.h("eds-code-block", { key: '20d8bcda1aed4dd237dddb6079bba68f8f85dda7', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '8e30a85a4418f1173183be58eade4682c6c812dd', class: "grid" }, index.h("span", { key: '52fa4db1021aa08f5fe4c9cface5562050181eff', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), index.h("span", { key: '7b0d375a2a63b3657eed9b4df0aead1db00255b5', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, index.h("div", { key: 'af020f1a66c2d0afcb2e2bdf189569e6d897ef32', class: "grid" }, index.h("span", { key: '3b2f895dccdeb5e2fb5aa505f19514f012d24426', class: "f-body-02" }, this.colors[3].rgb), index.h("span", { key: '9836a6ef47ed0dc8767a590212a23bfca2f74adf', class: "f-body-02 w-full" }, this.colors[3].cmyk), index.h("eds-code-block", { key: '3b274f716c6ca1381e4cc0136d18e167290bfa74', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: 'a41592e2172dc9f81e9d2f36328ff88de3f0954e', class: "grid" }, index.h("span", { key: 'fd7a06a256d3513bcf239fe9f778f3589895b9d5', class: "f-body-02" }, this.colors[3].pantoneC), index.h("span", { key: '991f38ea137b729c9e9e6c9e0031940151f6e9dc', class: "f-body-02" }, this.colors[3].pantoneU)))), index.h("li", { key: '8efdd7d9f93cba4b9479e1d3face7cec94cf1af6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { key: '4223ec29cac4313dc261cb472bd880ae00279657', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, index.h("div", { key: '227dd5fab1add4083271b6e7f95c7d575d91252e', class: "grid" }, index.h("span", { key: 'e5b1aab8d67f7c67f231acd4156768f146320be3', class: "f-body-02" }, this.colors[4].rgb), index.h("span", { key: 'fc4712e37494e8e30a48bc77a0ca61c94e24075d', class: "f-body-02 w-full" }, this.colors[4].cmyk), index.h("eds-code-block", { key: 'a429c519e42e242d8ce8f661a513f7b5327ffce7', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { key: '84f30a1620cacadf8c0bf1382333d74772f81f27', class: "grid" }, index.h("span", { key: '2b6dfc8e87517e4d0421ef0e5c2391a07f033600', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), index.h("span", { key: 'c4cd5bc061ce4163a170568c0ed5934c7f30d75f', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
 };
 

package/dist/cjs/components-section.cjs.entry.js

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2f63169d.js');
+
+const DocsOverview = () => (index.h("div", { class: "static-content container" },
+    index.h("h2", null, "Load the module"),
+    index.h("p", null,
+        "Integrating the EBRAINS UI Components to a project without a JavaScript framework is straight forward. If you\u2019re working on a simple HTML page, you can start using the components immediately by adding the tags below to the",
+        ' ',
+        index.h("code", null, "head"),
+        "."),
+    index.h("eds-code-block", { 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" }),
+    index.h("p", null, "This snippet is part of the Stencil component loader system. Under the hood, it does the following:"),
+    index.h("eds-steps", { 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.'
+            },
+            {
+                title: 'Register Custom Elements',
+                content: 'Calling defineCustomElements(window) loops through the available components and registers each one with the browser using customElements.define(). This makes your custom elements available in the DOM.'
+            },
+            {
+                title: 'Lazy Loading in Action',
+                content: "Although all components are registered on startup, their implementation code is lazy-loaded. This means a component's code is only fetched when it is first used, optimizing the initial load time."
+            },
+            {
+                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.'
+            }
+        ] }),
+    index.h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"),
+    index.h("eds-code-block", { code: '<eds-button \n  label="my bytton" \n  intent="primary">\n</eds-button>', language: "html", "copy-label": "Copy Code" }),
+    index.h("h2", null, "Load the styles"),
+    index.h("p", null,
+        "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the",
+        ' ',
+        index.h("code", null, "head")),
+    index.h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }),
+    index.h("p", null,
+        "To directly use only the produced variables add the tag below to the ",
+        index.h("code", null, "head")),
+    index.h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>', language: "css", "copy-label": "Copy Code" }),
+    index.h("p", null,
+        "Note that, loading the predefined CSS framework above,",
+        ' ',
+        index.h("b", null, "automatically loads the fonts so you can skip loading them separately"),
+        ". If you wish, however, to load the fonts, add the tag below to the ",
+        index.h("code", null, "head")),
+    index.h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" })));
+
+const DocsInstallation = () => (index.h("div", null,
+    index.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."),
+    index.h("div", { class: "my-8" },
+        index.h("eds-code-block", { code: "npm install @ebrains/components", language: "html", "copy-label": "Copy Code" })),
+    index.h("div", { class: "my-8" },
+        index.h("eds-code-block", { code: "npm install @ebrains/assets", language: "html", "copy-label": "Copy Code" })),
+    index.h("div", { class: "my-8" },
+        index.h("eds-code-block", { code: "npm install @ebrains/react", language: "html", "copy-label": "Copy Code" })),
+    index.h("div", { class: "my-8" },
+        index.h("eds-code-block", { code: "npm install @ebrains/vue", language: "html", "copy-label": "Copy Code" })),
+    index.h("div", { class: "my-8" },
+        index.h("eds-code-block", { code: "npm install @ebrains/angular", language: "html", "copy-label": "Copy Code" }))));
+
+const DocsReact = () => (index.h("div", null,
+    index.h("h2", null, "React Wrappers"),
+    index.h("p", null, "To use the EBRAINS web components in a React Application, simple install the package below and check out the examples"),
+    index.h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" }),
+    index.h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" },
+        index.h("p", null, "This code displays a Stencil-based splash screen that stays visible until an initialization promise resolves (or errors), then hides itself and reveals the main React app content."),
+        index.h("eds-code-block", { code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n", language: "javascript", "copy-label": "Copy Code" }))));
+
+const DocsVue = () => (index.h("div", null,
+    index.h("h2", null, "Vue Wrappers"),
+    index.h("p", null, "To use the EBRAINS web components in a Vue Application, simple install the package below and check out the examples."),
+    index.h("eds-code-block", { code: "npm install @ebrains/vue", language: "javascript", "copy-label": "Copy Code" }),
+    index.h("h2", null,
+        "Passing Properties to Custom Elements Using the ",
+        index.h("b", null, ".prop"),
+        " Modifier in Vue Wrappers"),
+    index.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."),
+    index.h("h3", null,
+        "How to Use the ",
+        index.h("b", null, ".prop"),
+        " Modifier"),
+    index.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:"),
+    index.h("div", { class: "my-8" },
+        index.h("eds-alert", { message: "This may lead to issues because Vue binds these as attributes .", intent: "error" })),
+    index.h("eds-code-block", { code: '<EdsAlert\n  message="This is a default informational alert."\n  intent="default"\n  :pressableLabel="Press Me"\n  :pressableUrl="https://ebrains.eu"\n></EdsAlert>', language: "javascript", "copy-label": "Copy Code" }),
+    index.h("div", { class: "my-8" },
+        index.h("eds-alert", { message: "Use the .prop modifier to ensure properties are passed correctly.", intent: "default" })),
+    index.h("eds-code-block", { code: '<EdsAlert\n  message="This is a default informational alert."\n  intent="default"\n  :pressableLabel.prop="Press Me"\n  :pressableUrl.prop="https://ebrains.eu"\n></EdsAlert>', language: "javascript", "copy-label": "Copy Code" }),
+    index.h("p", null,
+        "Using the ",
+        index.h("b", null, ".prop"),
+        " modifier in Vue ensures that the data you pass to your custom elements is received as intended. It prevents Vue (and the browser) from transforming camelCase property names into lowercase attributes, thereby maintaining the correct data mapping in your Stencil components."),
+    index.h("eds-section-core", { "section-title": "Example Vue App", "heading-level": "h3" },
+        index.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', language: "javascript", "copy-label": "Copy Code" }))));
+
+const DocsAngular = () => (index.h("div", null,
+    index.h("h2", null, "Angular Wrappers"),
+    index.h("p", null, "To use the EBRAINS web components in an Angular Application, simple install the package below and check out the examples."),
+    index.h("eds-code-block", { code: "npm install @ebrains/angular", language: "javascript", "copy-label": "Copy Code" }),
+    index.h("p", null, "Define the custom elements"),
+    index.h("eds-code-block", { code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();", language: "javascript", "copy-label": "Copy Code" }),
+    index.h("p", null, "Angular Custom Elements Schema"),
+    index.h("eds-code-block", { code: 'import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";', language: "javascript", "copy-label": "Copy Code" }),
+    index.h("eds-section-core", { "section-title": "Example Angular App", "heading-level": "h3" },
+        index.h("eds-code-block", { code: '\n<div class="container">\n  <eds-breadcrumb\n    intent="tertiary"\n    items="[\n      { "label": "Home", "url": "#" },\n      { "label": "Products", "url": "#" },\n    ]">\n  </eds-breadcrumb>\n  <eds-footer></eds-footer>\n</div>', language: "javascript", "copy-label": "Copy Code" }))));
+
+const ComponentsSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabIndex = undefined;
+    }
+    renderContent() {
+        switch (this.tabIndex) {
+            case 0:
+                return index.h(DocsOverview, null);
+            case 1:
+                return index.h(DocsInstallation, null);
+            case 2:
+                return index.h(DocsReact, null);
+            case 3:
+                return index.h(DocsVue, null);
+            case 4:
+                return index.h(DocsAngular, null);
+            default:
+                return index.h("p", null, "Content not available.");
+        }
+    }
+    render() {
+        return index.h("div", { key: 'ee8facfaad3786770fd3ea39f1db7922a67ffd3e', class: "container" }, this.renderContent());
+    }
+};
+
+exports.components_section = ComponentsSection;

package/dist/cjs/components.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"eds-accordion_22.cjs\",[[4,\"eds-form-v2\",{\"name\":[1],\"setFormUrl\":[4,\"set-form-url\"],\"formBtn\":[4,\"form-btn\"],\"formBtnLabel\":[1,\"form-btn-label\"],\"errorMessage\":[1,\"error-message\"],\"fields\":[1],\"initData\":[16],\"values\":[32],\"isSubmitting\":[32],\"hasError\":[32],\"errors\":[32],\"parsedFields\":[32]},null,{\"fields\":[\"parseFields\"]}],[0,\"eds-fullscreen-menu\",{\"links\":[1],\"menuLinks\":[1,\"menu-links\"],\"homeUrl\":[1,\"home-url\"],\"inverseHeader\":[4,\"inverse-header\"],\"isMenuOpen\":[32]},[[16,\"toggleMenu\",\"handleToggleMenu\"]]],[4,\"eds-header\",{\"homeUrl\":[513,\"home-url\"],\"links\":[1],\"inverseHeader\":[4,\"inverse-header\"],\"menuEnabled\":[4,\"menu-enabled\"],\"isMenuOpen\":[32],\"isUserMenuOpen\":[32],\"isAuthenticated\":[32]},[[16,\"authStatusChanged\",\"onAuthStatusChanged\"]]],[0,\"eds-footer\",{\"extraClass\":[1,\"extra-class\"],\"social\":[4],\"enableScrollTop\":[4,\"enable-scroll-top\"],\"fundedBy\":[1,\"funded-by\"],\"rightsReserved\":[1,\"rights-reserved\"],\"showMatomoNotice\":[32]}],[1,\"eds-matomo-notice\",{\"title\":[1],\"description\":[1],\"forceShow\":[4,\"force-show\"],\"showNotice\":[32]}],[1,\"eds-table\",{\"data\":[1],\"endpoint\":[1],\"config\":[1],\"rowsPerPage\":[2,\"rows-per-page\"],\"paginationEnabled\":[4,\"pagination-enabled\"],\"searchEnabled\":[4,\"search-enabled\"],\"hostWidth\":[1,\"host-width\"],\"columnSize\":[1,\"column-size\"],\"tableData\":[32],\"columns\":[32],\"currentPage\":[32],\"parsedConfig\":[32],\"totalRows\":[32],\"searchQuery\":[32]},null,{\"data\":[\"handleDataChange\",\"parseData\"],\"config\":[\"handleConfigChange\"]}],[1,\"eds-accordion\",{\"title\":[1],\"description\":[1],\"switchBg\":[4,\"switch-bg\"],\"expanded\":[4],\"clampText\":[4,\"clamp-text\"],\"minHeightContent\":[4,\"min-height-content\"],\"isExpanded\":[32],\"panelHeight\":[32],\"shortContent\":[32]}],[1,\"eds-social-networks\",{\"title\":[1]}],[1,\"eds-pagination\",{\"currentPage\":[2,\"current-page\"],\"lastPage\":[2,\"last-page\"],\"perPage\":[2,\"per-page\"],\"total\":[2],\"url\":[1],\"mode\":[1],\"prevLabel\":[1,\"prev-label\"],\"nextLabel\":[1,\"next-label\"],\"prevUrl\":[1,\"prev-url\"],\"nextUrl\":[1,\"next-url\"],\"links\":[32]},null,{\"currentPage\":[\"onPageOrLastPageChange\"],\"lastPage\":[\"onPageOrLastPageChange\"]}],[1,\"eds-block-break\",{\"extraClass\":[1,\"extra-class\"]}],[1,\"eds-input-field\",{\"name\":[1],\"inputId\":[1,\"input-id\"],\"placeholder\":[1],\"disabled\":[4],\"onChange\":[16],\"onInput\":[16],\"type\":[1],\"required\":[4],\"label\":[1],\"hint\":[1],\"icon\":[1],\"link\":[16],\"message\":[1],\"error\":[4],\"checked\":[4],\"errorMessage\":[1,\"error-message\"],\"value\":[8],\"maxLength\":[2,\"max-length\"],\"options\":[1]}],[0,\"eds-input\",{\"name\":[1],\"inputId\":[1,\"input-id\"],\"placeholder\":[1],\"disabled\":[4],\"hasMessage\":[4,\"has-message\"],\"error\":[4],\"checked\":[4],\"type\":[1],\"required\":[4],\"value\":[8],\"icon\":[1],\"maxLength\":[2,\"max-length\"],\"options\":[16],\"extraClass\":[1,\"extra-class\"],\"innerVal\":[32],\"maxLengthReached\":[32]},null,{\"value\":[\"onValueChanged\"]}],[0,\"eds-input-footer\",{\"name\":[1],\"errorMessage\":[1,\"error-message\"],\"message\":[1],\"error\":[4],\"link\":[16]}],[0,\"eds-input-search\",{\"name\":[1],\"inputId\":[1,\"input-id\"],\"placeholder\":[1],\"value\":[1],\"disabled\":[4],\"required\":[4],\"decorate\":[1],\"getInputElement\":[64]}],[0,\"eds-input-select\",{\"inputId\":[1,\"input-id\"],\"name\":[1],\"placeholder\":[1],\"disabled\":[4],\"hasMessage\":[4,\"has-message\"],\"error\":[4],\"required\":[4],\"options\":[16],\"labelKey\":[1,\"label-key\"],\"valueKey\":[1,\"value-key\"],\"value\":[8],\"dynamicOptions\":[32],\"loading\":[32],\"dynamicValueKey\":[32],\"dynamicLabelKey\":[32],\"hasFetched\":[32]},null,{\"options\":[\"loadOptions\"]}],[0,\"eds-input-label\",{\"label\":[1],\"name\":[1],\"required\":[4],\"disabled\":[4]}],[0,\"eds-input-range\",{\"name\":[1],\"inputId\":[1,\"input-id\"],\"disabled\":[4],\"required\":[4],\"min\":[2],\"max\":[2],\"step\":[2],\"sliderVal\":[32],\"getInputElement\":[64]}],[1,\"eds-logo\",{\"href\":[1],\"orientation\":[1],\"type\":[1],\"label\":[1]}],[1,\"eds-img\",{\"src\":[1],\"alt\":[1],\"width\":[2],\"height\":[2],\"srcset\":[1],\"sizes\":[1],\"formats\":[16],\"lazyload\":[4],\"withBg\":[4,\"with-bg\"],\"loaded\":[32],\"showBg\":[32]}],[1,\"eds-button\",{\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"elementType\":[1,\"element-type\"],\"intent\":[1],\"loading\":[4],\"disabled\":[4],\"pill\":[4],\"icon\":[1],\"size\":[1],\"iconPos\":[1,\"icon-pos\"],\"iconSmall\":[4,\"icon-small\"],\"extraClass\":[1,\"extra-class\"],\"triggerClick\":[16]},[[0,\"parentContext\",\"handleParentContext\"]]],[1,\"eds-link\",{\"label\":[1],\"intent\":[1],\"icon\":[1],\"iconPos\":[1,\"icon-pos\"],\"iconSmall\":[4,\"icon-small\"],\"size\":[1],\"external\":[4],\"current\":[4],\"download\":[4],\"url\":[1],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"hideLabelOnSmallScreen\":[4,\"hide-label-on-small-screen\"],\"extraClass\":[1,\"extra-class\"]},[[0,\"parentContext\",\"handleParentContext\"]]],[0,\"eds-icon-wrapper\",{\"icon\":[1],\"class\":[1],\"IconComponent\":[32]},null,{\"icon\":[\"iconChanged\"]}]]],[\"eds-trl.cjs\",[[0,\"eds-trl\",{\"applications\":[1]}]]],[\"eds-form.cjs\",[[4,\"eds-form\",{\"setFormUrl\":[4,\"set-form-url\"],\"submitBtn\":[4,\"submit-btn\"],\"submitBtnLabel\":[1,\"submit-btn-label\"],\"successMessage\":[1,\"success-message\"],\"errorMessage\":[1,\"error-message\"],\"submitBtnHintMessage\":[1,\"submit-btn-hint-message\"],\"endpoint\":[1],\"name\":[1],\"fields\":[1],\"coupleAuth\":[4,\"couple-auth\"],\"user\":[16],\"draft\":[4],\"draftData\":[16],\"values\":[32],\"formSubmitted\":[32],\"hasError\":[32],\"errors\":[32],\"isSubmitting\":[32],\"alertMessage\":[32],\"isAuthenticated\":[32],\"parsedFields\":[32]},null,{\"fields\":[\"parseFields\"]}]]],[\"eds-svg-repository.cjs\",[[1,\"eds-svg-repository\"]]],[\"eds-docs-palettes.cjs\",[[0,\"eds-docs-palettes\",{\"tabIndex\":[2,\"tab-index\"]}]]],[\"eds-app-root.cjs\",[[1,\"eds-app-root\",{\"isAuthenticated\":[32]}]]],[\"eds-card-section.cjs\",[[1,\"eds-card-section\",{\"cards\":[1],\"occupyCols\":[2,\"occupy-cols\"]}]]],[\"eds-components-section.cjs\",[[0,\"eds-components-section\",{\"tabIndex\":[2,\"tab-index\"]}]]],[\"eds-timeline.cjs\",[[0,\"eds-timeline\",{\"events\":[1],\"selectedEvent\":[32],\"parsedEvents\":[32]},null,{\"events\":[\"parseEvents\"]}]]],[\"eds-user.cjs\",[[4,\"eds-user\",{\"user\":[16]}]]],[\"eds-card-tool.cjs\",[[1,\"eds-card-tool\",{\"cardTitle\":[1,\"card-title\"],\"url\":[1],\"description\":[1],\"image\":[8],\"avatar\":[1],\"shortAbbreviation\":[1,\"short-abbreviation\"],\"headingLevel\":[1,\"heading-level\"],\"tags\":[8],\"tiny\":[4],\"bg\":[4],\"withHover\":[4,\"with-hover\"],\"external\":[4],\"hierarchy\":[4]}]]],[\"eds-cookies-preference.cjs\",[[1,\"eds-cookies-preference\",{\"buttonText\":[1,\"button-text\"],\"intent\":[1],\"showMatomoNotice\":[32],\"noticeKey\":[32]}]]],[\"eds-docs-tokens.cjs\",[[0,\"eds-docs-tokens\",{\"tabIndex\":[2,\"tab-index\"]}]]],[\"eds-steps.cjs\",[[1,\"eds-steps\",{\"steps\":[1],\"type\":[1],\"activeStep\":[32]}]]],[\"eds-vertical-stepper.cjs\",[[1,\"eds-vertical-stepper\",{\"steps\":[1],\"activeStep\":[32]}]]],[\"eds-card-project.cjs\",[[0,\"eds-card-project\",{\"image\":[8],\"editorialTitle\":[1,\"editorial-title\"],\"headingLevel\":[1,\"heading-level\"],\"categoryTitle\":[1,\"category-title\"],\"color\":[1],\"bgOnHover\":[4,\"bg-on-hover\"],\"vertical\":[4],\"titleProject\":[1,\"title-project\"],\"url\":[1],\"parsedImage\":[32]}]]],[\"eds-feedback.cjs\",[[1,\"eds-feedback\",{\"type\":[1],\"count\":[2],\"label\":[1],\"description\":[1],\"textMapping\":[1,\"text-mapping\"],\"selectedRating\":[32]},[[16,\"rating\",\"ratingUpdated\"]]]]],[\"eds-logo-variations.cjs\",[[0,\"eds-logo-variations\",{\"tabIndex\":[2,\"tab-index\"]}]]],[\"eds-toast-manager.cjs\",[[1,\"eds-toast-manager\",{\"toasts\":[32]}]]],[\"incorrect-use-of-colors.cjs\",[[0,\"incorrect-use-of-colors\"]]],[\"correct-use-of-colors.cjs\",[[0,\"correct-use-of-colors\"]]],[\"eds-breadcrumb.cjs\",[[1,\"eds-breadcrumb\",{\"items\":[1],\"intent\":[1],\"parsedItems\":[32],\"isSmallScreen\":[32],\"maxVisibleItems\":[32]},null,{\"items\":[\"parseItems\"]}]]],[\"eds-frame.cjs\",[[1,\"eds-frame\",{\"frameLabel\":[1,\"frame-label\"],\"urlLabel\":[1,\"url-label\"],\"errorMessage\":[1,\"error-message\"],\"storybookUrl\":[1,\"storybook-url\"],\"storyPath\":[1,\"story-path\"],\"intent\":[1],\"size\":[1],\"iframeError\":[32]}]]],[\"eds-modal.cjs\",[[1,\"eds-modal\",{\"title\":[1],\"truncate\":[4],\"truncateLines\":[1,\"truncate-lines\"],\"position\":[1],\"isOpen\":[32],\"open\":[64],\"close\":[64],\"toggle\":[64]},[[0,\"eds-modal-open\",\"handleGlobalOpen\"],[0,\"eds-modal-close\",\"handleGlobalClose\"],[8,\"keydown\",\"handleKeyDown\"]]]]],[\"token-ratios.cjs\",[[0,\"token-ratios\"]]],[\"token-typography.cjs\",[[0,\"token-typography\"]]],[\"eds-card-tags.cjs\",[[1,\"eds-card-tags\",{\"accent\":[4],\"tags\":[16]}]]],[\"eds-card-wrapper.cjs\",[[4,\"eds-card-wrapper\",{\"tiny\":[4],\"withBg\":[4,\"with-bg\"],\"withHover\":[4,\"with-hover\"]}]]],[\"eds-icon-arrow-diagonal.cjs\",[[0,\"eds-icon-arrow-diagonal\",{\"addClass\":[1,\"add-class\"]}]]],[\"eds-icon-arrow-right.cjs\",[[0,\"eds-icon-arrow-right\",{\"class\":[1]}]]],[\"eds-icon-bluesky.cjs\",[[0,\"eds-icon-bluesky\",{\"class\":[1]}]]],[\"eds-icon-chevron-down.cjs\",[[0,\"eds-icon-chevron-down\",{\"class\":[1]}]]],[\"eds-icon-chevron-left.cjs\",[[0,\"eds-icon-chevron-left\",{\"class\":[1]}]]],[\"eds-icon-chevron-right.cjs\",[[0,\"eds-icon-chevron-right\",{\"class\":[1]}]]],[\"eds-icon-chevron-up.cjs\",[[0,\"eds-icon-chevron-up\",{\"class\":[1]}]]],[\"eds-icon-close.cjs\",[[0,\"eds-icon-close\",{\"class\":[1]}]]],[\"eds-icon-copy.cjs\",[[0,\"eds-icon-copy\",{\"class\":[1]}]]],[\"eds-icon-eu.cjs\",[[0,\"eds-icon-eu\",{\"class\":[1]}]]],[\"eds-icon-facebook.cjs\",[[0,\"eds-icon-facebook\",{\"class\":[1]}]]],[\"eds-icon-gitlab.cjs\",[[0,\"eds-icon-gitlab\",{\"class\":[1]}]]],[\"eds-icon-linkedin.cjs\",[[0,\"eds-icon-linkedin\",{\"class\":[1]}]]],[\"eds-icon-loader.cjs\",[[0,\"eds-icon-loader\",{\"class\":[1]}]]],[\"eds-icon-mastodon.cjs\",[[0,\"eds-icon-mastodon\",{\"class\":[1]}]]],[\"eds-icon-menu.cjs\",[[0,\"eds-icon-menu\",{\"class\":[1]}]]],[\"eds-icon-more.cjs\",[[0,\"eds-icon-more\",{\"class\":[1]}]]],[\"eds-icon-search.cjs\",[[0,\"eds-icon-search\",{\"class\":[1]}]]],[\"eds-icon-star.cjs\",[[0,\"eds-icon-star\",{\"class\":[1]}]]],[\"eds-icon-success.cjs\",[[0,\"eds-icon-success\",{\"class\":[1]}]]],[\"eds-icon-thumbs-down.cjs\",[[0,\"eds-icon-thumbs-down\",{\"class\":[1]}]]],[\"eds-icon-thumbs-up.cjs\",[[0,\"eds-icon-thumbs-up\",{\"class\":[1]}]]],[\"eds-icon-twitter.cjs\",[[0,\"eds-icon-twitter\",{\"class\":[1]}]]],[\"eds-icon-user.cjs\",[[0,\"eds-icon-user\",{\"class\":[1]}]]],[\"eds-icon-youtube.cjs\",[[0,\"eds-icon-youtube\",{\"class\":[1]}]]],[\"eds-switch.cjs\",[[1,\"eds-switch\",{\"checked\":[1540],\"disabled\":[4],\"labelOn\":[1,\"label-on\"],\"labelOff\":[1,\"label-off\"]}]]],[\"eds-tabs.cjs\",[[1,\"eds-tabs\",{\"id\":[1],\"navAriaLabel\":[1,\"nav-aria-label\"],\"tabs\":[1],\"parsedTabs\":[32],\"activeIndex\":[32]},null,{\"tabs\":[\"parseTabs\"]}]]],[\"eds-tooltip.cjs\",[[1,\"eds-tooltip\",{\"content\":[1],\"position\":[1],\"isVisible\":[32],\"isPositioned\":[32],\"tooltipStyle\":[32]},[[1,\"mouseover\",\"showTooltip\"],[1,\"mouseout\",\"hideTooltip\"],[8,\"keydown\",\"handleKeyPress\"]]]]],[\"logo-space.cjs\",[[1,\"logo-space\"]]],[\"logo-wrong-usage.cjs\",[[1,\"logo-wrong-usage\"]]],[\"token-spacing.cjs\",[[0,\"token-spacing\"]]],[\"eds-dropdown.cjs\",[[1,\"eds-dropdown\",{\"icon\":[1],\"label\":[1],\"rounded\":[4],\"ariaLabel\":[1,\"aria-label\"],\"asNav\":[4,\"as-nav\"],\"dropdownPos\":[1,\"dropdown-pos\"],\"dropdownOffset\":[4,\"dropdown-offset\"],\"intent\":[1],\"isOpen\":[32],\"focusIndex\":[32]},[[8,\"click\",\"handleWindowClick\"],[8,\"keydown\",\"handleKeyDown\"]]]]],[\"eds-rating.cjs\",[[1,\"eds-rating\",{\"ratingType\":[1,\"rating-type\"],\"ratingCount\":[2,\"rating-count\"],\"selectedRating\":[32]}]]],[\"eds-toast.cjs\",[[1,\"eds-toast\",{\"message\":[1],\"intent\":[1],\"duration\":[2],\"visible\":[32]}]]],[\"eds-progress-bar.cjs\",[[1,\"eds-progress-bar\",{\"value\":[1026],\"updateValue\":[64]}]]],[\"eds-card-generic.cjs\",[[1,\"eds-card-generic\",{\"cardTitle\":[1,\"card-title\"],\"url\":[1],\"description\":[1],\"image\":[8],\"avatar\":[1],\"shortAbbreviation\":[1,\"short-abbreviation\"],\"headingLevel\":[1,\"heading-level\"],\"tags\":[1],\"tiny\":[4],\"bg\":[4],\"withHover\":[4,\"with-hover\"],\"hierarchy\":[4],\"parsedImage\":[32]},[[0,\"parentContext\",\"handleParentContext\"]]]]],[\"eds-login_2.cjs\",[[1,\"eds-login\",{\"keycloakUrl\":[1,\"keycloak-url\"],\"keycloakRealm\":[1,\"keycloak-realm\"],\"keycloakClientId\":[1,\"keycloak-client-id\"],\"authenticated\":[32],\"user\":[32],\"serverAvailable\":[32]}],[1,\"eds-splash-screen\",{\"inverse\":[4],\"initPromise\":[16],\"isVisible\":[32]},[[8,\"hideSplash\",\"handleHideSplash\"]]]]],[\"logo-variations-horizontal_2.cjs\",[[1,\"logo-variations-horizontal\"],[1,\"logo-variations-vertical\",{\"orientation\":[1],\"type\":[1]}]]],[\"eds-spinner.cjs\",[[1,\"eds-spinner\",{\"size\":[1],\"thickness\":[1],\"borderColor\":[1,\"border-color\"],\"bottomColor\":[1,\"bottom-color\"],\"background\":[1],\"fullscreen\":[4]}]]],[\"token-list_3.cjs\",[[0,\"token-list\",{\"show\":[1]}],[0,\"token-radii\"],[0,\"token-shadows\"]]],[\"eds-alert.cjs\",[[1,\"eds-alert\",{\"message\":[1],\"pressableLabel\":[1,\"pressable-label\"],\"pressableUrl\":[1,\"pressable-url\"],\"direction\":[1],\"intent\":[1],\"withBtn\":[32]}]]],[\"eds-section-core_2.cjs\",[[4,\"eds-section-core\",{\"tag\":[1],\"sectionTitle\":[1,\"section-title\"],\"headingLevel\":[1,\"heading-level\"]}],[0,\"eds-section-heading\",{\"sectionTitle\":[1,\"section-title\"],\"withContainer\":[4,\"with-container\"],\"headingLevel\":[1,\"heading-level\"],\"tag\":[1],\"spacingLarge\":[4,\"spacing-large\"]}]]],[\"eds-code-block.cjs\",[[1,\"eds-code-block\",{\"code\":[1],\"language\":[1],\"copied\":[32]}]]],[\"color-primary-palette_6.cjs\",[[0,\"gradient-secondary-palette\"],[0,\"color-primary-palette\"],[0,\"color-secondary-palette\",{\"show\":[1]}],[0,\"color-support-palette\"],[0,\"gradient-primary-palette\"],[0,\"gradient-support-palette\"]]],[\"eds-avatar_4.cjs\",[[1,\"eds-card-desc\",{\"description\":[1],\"descClass\":[1,\"desc-class\"],\"truncate\":[4],\"truncateLines\":[1,\"truncate-lines\"]}],[1,\"eds-avatar\",{\"firstName\":[1,\"first-name\"],\"lastName\":[1,\"last-name\"],\"picture\":[1],\"initials\":[1],\"color\":[1],\"rounded\":[4],\"initialsStrong\":[4,\"initials-strong\"]}],[1,\"eds-card-title\",{\"url\":[1],\"titleClass\":[1,\"title-class\"],\"headingLevel\":[1,\"heading-level\"],\"externalLink\":[4,\"external-link\"],\"cardTitle\":[1,\"card-title\"],\"hierarchy\":[4]}],[1,\"eds-tag\",{\"label\":[1],\"intent\":[1]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"eds-avatar_24.cjs\",[[1,\"eds-form\",{\"name\":[1],\"setFormUrl\":[4,\"set-form-url\"],\"formBtn\":[4,\"form-btn\"],\"formBtnLabel\":[1,\"form-btn-label\"],\"errorMessage\":[1,\"error-message\"],\"fields\":[1],\"initData\":[16],\"values\":[32],\"isSubmitting\":[32],\"hasError\":[32],\"errors\":[32],\"parsedFields\":[32]},null,{\"fields\":[\"parseFields\"]}],[1,\"eds-fullscreen-menu\",{\"links\":[1],\"menuLinks\":[1,\"menu-links\"],\"homeUrl\":[1,\"home-url\"],\"inverseHeader\":[4,\"inverse-header\"],\"isMenuOpen\":[32]},[[16,\"toggleMenu\",\"handleToggleMenu\"]]],[1,\"eds-user\",{\"user\":[1025]}],[1,\"eds-header\",{\"homeUrl\":[513,\"home-url\"],\"links\":[1],\"inverseHeader\":[4,\"inverse-header\"],\"menuEnabled\":[4,\"menu-enabled\"],\"isMenuOpen\":[32],\"isUserMenuOpen\":[32],\"isAuthenticated\":[32]},[[16,\"authStatusChanged\",\"onAuthStatusChanged\"]]],[1,\"eds-steps-v2\",{\"steps\":[1],\"type\":[1],\"imageSrc\":[1,\"image-src\"],\"bg\":[4],\"message\":[1],\"activeStep\":[32]},null,{\"activeStep\":[\"activeStepChanged\"]}],[0,\"token-spacing\"],[1,\"eds-footer\",{\"social\":[4],\"enableScrollTop\":[4,\"enable-scroll-top\"],\"fundedBy\":[1,\"funded-by\"],\"rightsReserved\":[1,\"rights-reserved\"],\"enableCookiesSettings\":[4,\"enable-cookies-settings\"],\"showMatomoNotice\":[32]}],[1,\"eds-dropdown\",{\"icon\":[1],\"label\":[1],\"rounded\":[4],\"ariaLabel\":[1,\"aria-label\"],\"asNav\":[4,\"as-nav\"],\"dropdownPos\":[1,\"dropdown-pos\"],\"dropdownOffset\":[4,\"dropdown-offset\"],\"intent\":[1],\"isOpen\":[32],\"focusIndex\":[32]},[[8,\"click\",\"handleWindowClick\"],[8,\"keydown\",\"handleKeyDown\"]]],[1,\"eds-steps\",{\"steps\":[1],\"type\":[1],\"activeStep\":[32]},null,{\"activeStep\":[\"activeStepChanged\"]}],[1,\"eds-social-networks\",{\"title\":[1]}],[1,\"eds-block-break\",{\"extraClass\":[1,\"extra-class\"]}],[1,\"eds-input-field\",{\"name\":[1],\"inputId\":[1,\"input-id\"],\"placeholder\":[1],\"disabled\":[4],\"onChange\":[16],\"onInput\":[16],\"type\":[1],\"required\":[4],\"label\":[1],\"hint\":[1],\"icon\":[1],\"link\":[16],\"message\":[1],\"error\":[4],\"checked\":[4],\"errorMessage\":[1,\"error-message\"],\"value\":[8],\"maxLength\":[2,\"max-length\"],\"options\":[1]}],[1,\"eds-avatar\",{\"firstName\":[1,\"first-name\"],\"lastName\":[1,\"last-name\"],\"picture\":[1],\"initials\":[1],\"color\":[1]}],[0,\"eds-input\",{\"name\":[1],\"inputId\":[1,\"input-id\"],\"placeholder\":[1],\"disabled\":[4],\"hasMessage\":[4,\"has-message\"],\"error\":[4],\"checked\":[4],\"type\":[1],\"required\":[4],\"value\":[8],\"icon\":[1],\"maxLength\":[2,\"max-length\"],\"options\":[16],\"extraClass\":[1,\"extra-class\"],\"innerVal\":[32],\"maxLengthReached\":[32]},null,{\"value\":[\"onValueChanged\"]}],[0,\"eds-input-footer\",{\"name\":[1],\"errorMessage\":[1,\"error-message\"],\"message\":[1],\"error\":[4],\"link\":[16]}],[0,\"eds-input-search\",{\"name\":[1],\"inputId\":[1,\"input-id\"],\"placeholder\":[1],\"value\":[1],\"disabled\":[4],\"required\":[4],\"decorate\":[1],\"label\":[1],\"getInputElement\":[64]}],[0,\"eds-input-select\",{\"inputId\":[1,\"input-id\"],\"name\":[1],\"placeholder\":[1],\"disabled\":[4],\"hasMessage\":[4,\"has-message\"],\"error\":[4],\"required\":[4],\"options\":[16],\"labelKey\":[1,\"label-key\"],\"valueKey\":[1,\"value-key\"],\"value\":[8],\"dynamicOptions\":[32],\"loading\":[32],\"dynamicValueKey\":[32],\"dynamicLabelKey\":[32],\"hasFetched\":[32]},null,{\"options\":[\"loadOptions\"]}],[0,\"eds-input-label\",{\"label\":[1],\"name\":[1],\"required\":[4],\"disabled\":[4]}],[0,\"eds-input-range\",{\"name\":[1],\"inputId\":[1,\"input-id\"],\"disabled\":[4],\"required\":[4],\"min\":[2],\"max\":[2],\"step\":[2],\"value\":[2],\"sliderVal\":[32],\"getInputElement\":[64]},null,{\"value\":[\"onValueChange\"]}],[1,\"eds-logo\",{\"href\":[1],\"orientation\":[1],\"type\":[1],\"label\":[1]}],[1,\"eds-img\",{\"src\":[1],\"alt\":[1],\"width\":[2],\"height\":[2],\"srcset\":[1],\"sizes\":[1],\"formats\":[16],\"lazyload\":[4],\"withBg\":[4,\"with-bg\"],\"loaded\":[32],\"showBg\":[32]}],[1,\"eds-link\",{\"label\":[1],\"intent\":[1],\"icon\":[1],\"iconPos\":[1,\"icon-pos\"],\"iconSmall\":[4,\"icon-small\"],\"size\":[1],\"external\":[4],\"current\":[4],\"download\":[4],\"url\":[1],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"hideLabelOnSmallScreen\":[4,\"hide-label-on-small-screen\"],\"extraClass\":[1,\"extra-class\"]},[[0,\"parentContext\",\"handleParentContext\"]]],[1,\"eds-button\",{\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"elementType\":[1,\"element-type\"],\"intent\":[1],\"loading\":[4],\"disabled\":[4],\"pill\":[4],\"icon\":[1],\"size\":[1],\"iconPos\":[1,\"icon-pos\"],\"iconSmall\":[4,\"icon-small\"],\"extraClass\":[1,\"extra-class\"],\"triggerClick\":[16]},[[0,\"parentContext\",\"handleParentContext\"]]],[0,\"eds-icon-wrapper\",{\"icon\":[1],\"class\":[1],\"IconComponent\":[32]},null,{\"icon\":[\"iconChanged\"]}]]],[\"eds-trl.cjs\",[[0,\"eds-trl\",{\"applications\":[1]}]]],[\"logo-space.cjs\",[[1,\"logo-space\"]]],[\"svg-repository.cjs\",[[1,\"svg-repository\"]]],[\"docs-palettes.cjs\",[[0,\"docs-palettes\",{\"tabIndex\":[2,\"tab-index\"]}]]],[\"components-section.cjs\",[[0,\"components-section\",{\"tabIndex\":[2,\"tab-index\"]}]]],[\"eds-app-root.cjs\",[[1,\"eds-app-root\",{\"isAuthenticated\":[32]}]]],[\"eds-card-section.cjs\",[[1,\"eds-card-section\",{\"cards\":[1],\"occupyCols\":[2,\"occupy-cols\"]}]]],[\"eds-timeline.cjs\",[[1,\"eds-timeline\",{\"events\":[1],\"selectedEvent\":[32],\"parsedEvents\":[32]},null,{\"events\":[\"parseEvents\"]}]]],[\"docs-tokens.cjs\",[[0,\"docs-tokens\",{\"tabIndex\":[2,\"tab-index\"]}]]],[\"eds-card-tool.cjs\",[[1,\"eds-card-tool\",{\"cardTitle\":[1,\"card-title\"],\"url\":[1],\"description\":[1],\"image\":[8],\"avatar\":[1],\"shortAbbreviation\":[1,\"short-abbreviation\"],\"headingLevel\":[1,\"heading-level\"],\"tags\":[8],\"tiny\":[4],\"bg\":[4],\"withHover\":[4,\"with-hover\"],\"external\":[4],\"hierarchy\":[4]}]]],[\"eds-cookies-preference.cjs\",[[0,\"eds-cookies-preference\",{\"buttonText\":[1,\"button-text\"],\"intent\":[1],\"showMatomoNotice\":[32],\"noticeKey\":[32]}]]],[\"eds-card-project.cjs\",[[0,\"eds-card-project\",{\"image\":[8],\"editorialTitle\":[1,\"editorial-title\"],\"headingLevel\":[1,\"heading-level\"],\"categoryTitle\":[1,\"category-title\"],\"color\":[1],\"bgOnHover\":[4,\"bg-on-hover\"],\"vertical\":[4],\"titleProject\":[1,\"title-project\"],\"url\":[1],\"parsedImage\":[32]}]]],[\"eds-feedback.cjs\",[[1,\"eds-feedback\",{\"type\":[1],\"count\":[2],\"label\":[1],\"description\":[1],\"textMapping\":[1,\"text-mapping\"],\"selectedRating\":[32]},[[16,\"rating\",\"ratingUpdated\"]]]]],[\"eds-toast-manager.cjs\",[[1,\"eds-toast-manager\",{\"toasts\":[32]}]]],[\"incorrect-use-of-colors.cjs\",[[0,\"incorrect-use-of-colors\"]]],[\"logo-variations-tabs.cjs\",[[0,\"logo-variations-tabs\",{\"tabIndex\":[2,\"tab-index\"]}]]],[\"correct-use-of-colors.cjs\",[[0,\"correct-use-of-colors\"]]],[\"eds-breadcrumb.cjs\",[[1,\"eds-breadcrumb\",{\"items\":[1],\"intent\":[1],\"parsedItems\":[32],\"isSmallScreen\":[32],\"maxVisibleItems\":[32]},null,{\"items\":[\"parseItems\"]}]]],[\"eds-frame.cjs\",[[1,\"eds-frame\",{\"frameLabel\":[1,\"frame-label\"],\"frameSrc\":[1,\"frame-src\"],\"urlLabel\":[1,\"url-label\"],\"errorMessage\":[1,\"error-message\"],\"url\":[1],\"intent\":[1],\"size\":[1],\"iframeError\":[32]}]]],[\"eds-modal.cjs\",[[1,\"eds-modal\",{\"title\":[1],\"truncate\":[4],\"truncateLines\":[1,\"truncate-lines\"],\"position\":[1],\"isOpen\":[32],\"open\":[64],\"close\":[64],\"toggle\":[64]},[[0,\"eds-modal-open\",\"handleGlobalOpen\"],[0,\"eds-modal-close\",\"handleGlobalClose\"],[8,\"keydown\",\"handleKeyDown\"]]]]],[\"token-ratios.cjs\",[[0,\"token-ratios\"]]],[\"token-typography.cjs\",[[0,\"token-typography\"]]],[\"eds-card-tags.cjs\",[[1,\"eds-card-tags\",{\"accent\":[4],\"tags\":[16]}]]],[\"eds-card-wrapper.cjs\",[[4,\"eds-card-wrapper\",{\"tiny\":[4],\"withBg\":[4,\"with-bg\"],\"withHover\":[4,\"with-hover\"]}]]],[\"eds-icon-arrow-diagonal.cjs\",[[0,\"eds-icon-arrow-diagonal\",{\"class\":[1]}]]],[\"eds-icon-arrow-right.cjs\",[[0,\"eds-icon-arrow-right\",{\"class\":[1]}]]],[\"eds-icon-bluesky.cjs\",[[0,\"eds-icon-bluesky\",{\"class\":[1]}]]],[\"eds-icon-bookmark.cjs\",[[0,\"eds-icon-bookmark\",{\"class\":[1]}]]],[\"eds-icon-chevron-down.cjs\",[[0,\"eds-icon-chevron-down\",{\"class\":[1]}]]],[\"eds-icon-chevron-left.cjs\",[[0,\"eds-icon-chevron-left\",{\"class\":[1]}]]],[\"eds-icon-chevron-right.cjs\",[[0,\"eds-icon-chevron-right\",{\"class\":[1]}]]],[\"eds-icon-chevron-up.cjs\",[[0,\"eds-icon-chevron-up\",{\"class\":[1]}]]],[\"eds-icon-close.cjs\",[[0,\"eds-icon-close\",{\"class\":[1]}]]],[\"eds-icon-copy.cjs\",[[0,\"eds-icon-copy\",{\"class\":[1]}]]],[\"eds-icon-eu.cjs\",[[0,\"eds-icon-eu\",{\"class\":[1]}]]],[\"eds-icon-external.cjs\",[[0,\"eds-icon-external\",{\"class\":[1]}]]],[\"eds-icon-facebook.cjs\",[[0,\"eds-icon-facebook\",{\"class\":[1]}]]],[\"eds-icon-gitlab.cjs\",[[0,\"eds-icon-gitlab\",{\"class\":[1]}]]],[\"eds-icon-linkedin.cjs\",[[0,\"eds-icon-linkedin\",{\"class\":[1]}]]],[\"eds-icon-loader.cjs\",[[0,\"eds-icon-loader\",{\"class\":[1]}]]],[\"eds-icon-mastodon.cjs\",[[0,\"eds-icon-mastodon\",{\"class\":[1]}]]],[\"eds-icon-menu.cjs\",[[0,\"eds-icon-menu\",{\"class\":[1]}]]],[\"eds-icon-minus.cjs\",[[0,\"eds-icon-minus\",{\"class\":[1]}]]],[\"eds-icon-more.cjs\",[[0,\"eds-icon-more\",{\"class\":[1]}]]],[\"eds-icon-paper.cjs\",[[0,\"eds-icon-paper\",{\"class\":[1]}]]],[\"eds-icon-plus.cjs\",[[0,\"eds-icon-plus\",{\"class\":[1]}]]],[\"eds-icon-portal.cjs\",[[0,\"eds-icon-portal\",{\"class\":[1]}]]],[\"eds-icon-private.cjs\",[[0,\"eds-icon-private\",{\"class\":[1]}]]],[\"eds-icon-public.cjs\",[[0,\"eds-icon-public\",{\"class\":[1]}]]],[\"eds-icon-search.cjs\",[[0,\"eds-icon-search\",{\"class\":[1]}]]],[\"eds-icon-star.cjs\",[[0,\"eds-icon-star\",{\"class\":[1]}]]],[\"eds-icon-success.cjs\",[[0,\"eds-icon-success\",{\"class\":[1]}]]],[\"eds-icon-thumbs-down.cjs\",[[0,\"eds-icon-thumbs-down\",{\"class\":[1]}]]],[\"eds-icon-thumbs-up.cjs\",[[0,\"eds-icon-thumbs-up\",{\"class\":[1]}]]],[\"eds-icon-tutorial.cjs\",[[0,\"eds-icon-tutorial\",{\"class\":[1]}]]],[\"eds-icon-twitter.cjs\",[[0,\"eds-icon-twitter\",{\"class\":[1]}]]],[\"eds-icon-unknown.cjs\",[[0,\"eds-icon-unknown\",{\"class\":[1]}]]],[\"eds-icon-updown.cjs\",[[0,\"eds-icon-updown\",{\"class\":[1]}]]],[\"eds-icon-user.cjs\",[[0,\"eds-icon-user\",{\"class\":[1]}]]],[\"eds-icon-youtube.cjs\",[[0,\"eds-icon-youtube\",{\"class\":[1]}]]],[\"eds-switch.cjs\",[[1,\"eds-switch\",{\"checked\":[1540],\"disabled\":[4],\"labelOn\":[1,\"label-on\"],\"labelOff\":[1,\"label-off\"]}]]],[\"eds-tabs.cjs\",[[1,\"eds-tabs\",{\"id\":[1],\"navAriaLabel\":[1,\"nav-aria-label\"],\"tabs\":[1],\"parsedTabs\":[32],\"activeIndex\":[32]},null,{\"tabs\":[\"parseTabs\"]}]]],[\"eds-tooltip.cjs\",[[1,\"eds-tooltip\",{\"content\":[1],\"position\":[1],\"isVisible\":[32],\"isPositioned\":[32],\"tooltipStyle\":[32]},[[1,\"mouseover\",\"showTooltip\"],[1,\"mouseout\",\"hideTooltip\"],[8,\"keydown\",\"handleKeyPress\"]]]]],[\"logo-wrong-usage.cjs\",[[1,\"logo-wrong-usage\"]]],[\"eds-accordion.cjs\",[[1,\"eds-accordion\",{\"title\":[1],\"description\":[1],\"switchBg\":[4,\"switch-bg\"],\"expanded\":[4],\"clampText\":[4,\"clamp-text\"],\"isExpanded\":[32],\"panelHeight\":[32],\"shortContent\":[32],\"headerHeight\":[32]}]]],[\"eds-matomo-notice.cjs\",[[1,\"eds-matomo-notice\",{\"title\":[1],\"description\":[1],\"optOutMessage\":[1,\"opt-out-message\"],\"forceShow\":[4,\"force-show\"],\"showNotice\":[32]},[[16,\"cookies\",\"toggleCookiesConsent\"]]]]],[\"eds-rating.cjs\",[[1,\"eds-rating\",{\"ratingType\":[1,\"rating-type\"],\"ratingCount\":[2,\"rating-count\"],\"selectedRating\":[32]}]]],[\"eds-toast.cjs\",[[1,\"eds-toast\",{\"message\":[1],\"intent\":[1],\"duration\":[2],\"visible\":[32]}]]],[\"eds-progress-bar.cjs\",[[1,\"eds-progress-bar\",{\"value\":[1026],\"updateValue\":[64]}]]],[\"eds-code-block.cjs\",[[1,\"eds-code-block\",{\"code\":[1],\"language\":[1],\"copied\":[32]}]]],[\"eds-card-desc_3.cjs\",[[1,\"eds-card-desc\",{\"description\":[1],\"descClass\":[1,\"desc-class\"],\"truncate\":[4],\"truncateLines\":[1,\"truncate-lines\"]}],[1,\"eds-card-title\",{\"url\":[1],\"titleClass\":[1,\"title-class\"],\"headingLevel\":[1,\"heading-level\"],\"externalLink\":[4,\"external-link\"],\"cardTitle\":[1,\"card-title\"],\"hierarchy\":[4]}],[1,\"eds-tag\",{\"label\":[1],\"intent\":[1]}]]],[\"eds-card-generic.cjs\",[[1,\"eds-card-generic\",{\"cardTitle\":[1,\"card-title\"],\"url\":[1],\"description\":[1],\"image\":[8],\"avatar\":[1],\"shortAbbreviation\":[1,\"short-abbreviation\"],\"headingLevel\":[1,\"heading-level\"],\"tags\":[1],\"tiny\":[4],\"bg\":[4],\"withHover\":[4,\"with-hover\"],\"hierarchy\":[4],\"parsedImage\":[32]},[[0,\"parentContext\",\"handleParentContext\"]]]]],[\"eds-login_2.cjs\",[[1,\"eds-login\",{\"keycloakUrl\":[1,\"keycloak-url\"],\"keycloakRealm\":[1,\"keycloak-realm\"],\"keycloakClientId\":[1,\"keycloak-client-id\"],\"authenticated\":[32],\"user\":[32],\"serverAvailable\":[32]}],[1,\"eds-splash-screen\",{\"inverse\":[4],\"initPromise\":[16],\"isVisible\":[32]},[[8,\"hideSplash\",\"handleHideSplash\"]],{\"initPromise\":[\"watchInitPromise\"]}]]],[\"logo-variations-horizontal_2.cjs\",[[1,\"logo-variations-horizontal\"],[1,\"logo-variations-vertical\",{\"orientation\":[1],\"type\":[1]}]]],[\"eds-alert.cjs\",[[1,\"eds-alert\",{\"message\":[1],\"pressableLabel\":[1,\"pressable-label\"],\"pressableUrl\":[1,\"pressable-url\"],\"direction\":[1],\"intent\":[1],\"brd\":[1],\"withBtn\":[32]}]]],[\"eds-spinner.cjs\",[[1,\"eds-spinner\",{\"size\":[1],\"thickness\":[1],\"borderColor\":[1,\"border-color\"],\"bottomColor\":[1,\"bottom-color\"],\"background\":[1],\"fullscreen\":[4]}]]],[\"token-list_3.cjs\",[[0,\"token-list\",{\"show\":[1]}],[0,\"token-radii\"],[0,\"token-shadows\"]]],[\"eds-section-core_2.cjs\",[[4,\"eds-section-core\",{\"tag\":[1],\"sectionTitle\":[1,\"section-title\"],\"headingLevel\":[1,\"heading-level\"]}],[0,\"eds-section-heading\",{\"sectionTitle\":[1,\"section-title\"],\"withContainer\":[4,\"with-container\"],\"headingLevel\":[1,\"heading-level\"],\"tag\":[1],\"spacingLarge\":[4,\"spacing-large\"]}]]],[\"color-primary-palette_6.cjs\",[[0,\"gradient-secondary-palette\"],[0,\"color-primary-palette\"],[0,\"color-secondary-palette\",{\"show\":[1]}],[0,\"color-support-palette\"],[0,\"gradient-primary-palette\"],[0,\"gradient-support-palette\"]]],[\"eds-pagination_2.cjs\",[[1,\"eds-table\",{\"data\":[1,\"table-data\"],\"endpoint\":[1],\"config\":[1],\"rowsPerPage\":[2,\"rows-per-page\"],\"paginationEnabled\":[4,\"pagination-enabled\"],\"searchEnabled\":[4,\"search-enabled\"],\"hostWidth\":[1,\"host-width\"],\"columnSize\":[1,\"column-size\"],\"tbData\":[32],\"columns\":[32],\"currentPage\":[32],\"parsedConfig\":[32],\"totalRows\":[32],\"searchQuery\":[32],\"containerWidth\":[32]},null,{\"data\":[\"handleDataChange\",\"parseData\"],\"config\":[\"handleConfigChange\"]}],[1,\"eds-pagination\",{\"currentPage\":[2,\"current-page\"],\"lastPage\":[2,\"last-page\"],\"perPage\":[2,\"per-page\"],\"total\":[2],\"url\":[1],\"mode\":[1],\"prevLabel\":[1,\"prev-label\"],\"nextLabel\":[1,\"next-label\"],\"prevUrl\":[1,\"prev-url\"],\"nextUrl\":[1,\"next-url\"],\"links\":[32]},null,{\"currentPage\":[\"onPageOrLastPageChange\"],\"lastPage\":[\"onPageOrLastPageChange\"]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/correct-use-of-colors.cjs.entry.js

@@ -61,7 +61,7 @@ const CorrectUseOfColors = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'ade28f6aa4a670443a4d077ff534117acb265bfe', class: "container" }, index.h("p", { key: '23adcbeb3a15cd2b1248f63c808ddbe7cacef531', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: '9b8b9909d409565e2c37cd4048a84b7c3751147f', label: "primary", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", index.h("eds-link", { key: 'fb3fe62e34d86fe345cbe177eef5b9ac57b749d5', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), index.h("div", { key: 'e24ff6eed3125519961d1cdd7789ada200d8cc3b', class: "flex" }, index.h("div", { key: '670ef68f1f25d9267e9a8eb90a94e6300b9d78d3', class: "w-full" }, index.h("ul", { key: '2ed821a59b849dd540233371f831a16974a2dc99', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: 'b72cc79258522b595d4bd024de51b2dec6458f57', class: "w-full" }, index.h("ul", { key: '9650c15d16fc184f0f5c518da5944567afe30fd6', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), index.h("p", { key: 'ff9c1ae248f5cdc91bf9fe902e2a5aa00394a27c', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: '1fcdd015426a1512ea9a70a732e4615447238e7f', label: "purple", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", index.h("eds-link", { key: 'ec0b3529cfcb402556274e83a2a62d899eb8c7e9', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), index.h("div", { key: 'edcd735b912341fdaaac6087c0d838a3341af687', class: "flex" }, index.h("div", { key: '8a96a72c29fb46b8189080ca257832cad444fd40', class: "w-full" }, index.h("ul", { key: 'a169a2f187db3fabc955ea28aed6019b5904b9f4', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: 'ba11e5e1ce445aec36d4eb3baf5ae39c956704fe', class: "w-full" }, index.h("ul", { key: '01c6ee6e5a77cafbb38928afdd6716a5aec6c93c', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), index.h("p", { key: '91ff22c373f1ae354ab9f76008f16d5e5be21331', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: 'a58977e316d22cb662173cc9d2d76448808fb2f8', label: "blue", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", index.h("eds-link", { key: '0fd12af19848395b2a631a5ccb33b0530005bebc', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), index.h("div", { key: '38c4eea411b4021dbf15cc7d73ff26371d8175a4', class: "flex" }, index.h("div", { key: 'bdd75c354631d54fa03ea35e798ab5dcbde4f248', class: "w-full" }, index.h("ul", { key: '8777390f722798653df7ec72e6596a36246a5f2b', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: 'c61047b695bdc8d29f5c665753b4ebfa2cbb272a', class: "w-full" }, index.h("ul", { key: '7de74c3a918a30cacaf4ffb78d24145d78e4511a', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), index.h("p", { key: 'd0c3a7170ba185caccf3cecf7e4d39cce5292c49', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: '16ae6a94124ea87782095058857d47a4a91789a9', label: "redish", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", index.h("eds-link", { key: 'c5c4d82a809a586637f00013782e69fa6bab2879', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), index.h("div", { key: '83d408a58b5bf5dddbcceb2336ffa7c58bdcea44', class: "flex" }, index.h("div", { key: 'dca88ee121c036f50f23105cd8a430ed883f19db', class: "w-full" }, index.h("ul", { key: '9b12b41325dfb100e87e1ced15f4b1b9c3457822', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: '013e039ef9ebecdde9b59c82d819047976e77523', class: "w-full" }, index.h("ul", { key: '7c6125cc0f7e9998c1f74be9456a8a171545edf1', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (index.h("div", { key: '966cb542b868e89c3f2538548e8a1ca8e20ea8d8', class: "container" }, index.h("p", { key: '3c595ffa9a2de45b681924354486309004d4ceaf', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: '1d1fded0f8cf78cec9e364e5b6844598b55f3f86', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", index.h("eds-link", { key: 'abae691bb80eca1019f97375997b1aa6a577ba8b', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), index.h("div", { key: '251e6d8ad16d70974b67fa044d53abd1be79ccac', class: "flex" }, index.h("div", { key: 'de5b9b6720aababb693421663c52db85cee1b5fc', class: "w-full" }, index.h("ul", { key: 'a61f669f45c2f9d3b53d87bacc222a4274f93d34', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: 'e7787d0ae843d7767ecac3267f11325dcfecf948', class: "w-full" }, index.h("ul", { key: '0d740ad8178c88175939d32a4f84d518f587e43a', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), index.h("p", { key: '6c59b2c574f5039baafd91a2939fbbb307732500', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: '03e9ca7b0831c2b1d1908001324a38147ecea835', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", index.h("eds-link", { key: '021affd3b5db00ccb5ef0d51de4552c5d3a11f44', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), index.h("div", { key: 'b7a5c4c10adab099c57ed70c0d2186d791aa70ec', class: "flex" }, index.h("div", { key: '3732c49a47158c206e1b40fc5425e555487ec757', class: "w-full" }, index.h("ul", { key: '54a5d35510bd77397d1418aa2638cf310534e986', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: '048de44bd69a7b6ecefe3188d76821e4d5145620', class: "w-full" }, index.h("ul", { key: 'e3f8cadce4b9a575e1d844958cfccf20a19db681', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), index.h("p", { key: '14d7f9c88ae769d6feb2a8344f8b45b40d4ae095', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: '810bdfa6fd175f9d483129b70bbae469051e0e0d', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", index.h("eds-link", { key: 'fb8a9712f8e1ae1cffbb85c79f7e9c2657f867db', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), index.h("div", { key: '1df0919bb4c75ee251d7f5c8cf95bb2e2e990242', class: "flex" }, index.h("div", { key: '5a898462aa680267f4ac35aefb98e60b7f486c63', class: "w-full" }, index.h("ul", { key: 'ad6f3e6ccde7d225be344efbc176064fc89aa796', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: '8dd6e01b989c8589be6b553c85f0512c268ac369', class: "w-full" }, index.h("ul", { key: 'c36937d99efd585c4e8a37b80de5bce82374186c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), index.h("p", { key: '452c68d1c797de34e531d7c734d350fcc36ae2f2', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: '17453c9d78c20583c989281672c0f41bbe8d036f', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", index.h("eds-link", { key: '3e78eb924b6a857674d50d4a209e4843f76e5fc3', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), index.h("div", { key: 'ae3e2a703633013f632df3a75f45ec932ce5e13b', class: "flex" }, index.h("div", { key: '4a0f256fa355dcbd6d6fc0e95e81a6c2821c917d', class: "w-full" }, index.h("ul", { key: '8aaf611ed9b87b86d0c1b47b1e37cb01989838b2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: '112e50da1627a671fbca843111becf51cd02ebc5', class: "w-full" }, index.h("ul", { key: '14033bd08a9d16bd0b6cfe8b87acc2a841c48a29', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 };
 

package/dist/cjs/{eds-docs-palettes.cjs.entry.js → docs-palettes.cjs.entry.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2f63169d.js');
 
-const EdsDocsPalettes = class {
+const DocsPalettes = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tabIndex = undefined;
@@ -20,8 +20,8 @@ const EdsDocsPalettes = class {
         }
     }
     render() {
-        return index.h("div", { key: '80f0922a40e212252a858b019d88f104defc2632', class: "container" }, this.renderContent());
+        return index.h("div", { key: 'f985628b9ea3f02a511e2facbda99b54f0723acf', class: "container" }, this.renderContent());
     }
 };
 
-exports.eds_docs_palettes = EdsDocsPalettes;
+exports.docs_palettes = DocsPalettes;

package/dist/cjs/{eds-docs-tokens.cjs.entry.js → docs-tokens.cjs.entry.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2f63169d.js');
 
-const EdsDocsContent = class {
+const DocsContent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tabIndex = undefined;
@@ -28,8 +28,8 @@ const EdsDocsContent = class {
         }
     }
     render() {
-        return index.h("div", { key: 'cf676cf54781de4a4f8b75d174201d24d30d3538', class: "container" }, this.renderContent());
+        return index.h("div", { key: '29810a0ace60d2e5a0fc84d6715fc2fc89d6187f', class: "container" }, this.renderContent());
     }
 };
 
-exports.eds_docs_tokens = EdsDocsContent;
+exports.docs_tokens = DocsContent;