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

package/logo-variations-horizontal_2.entry.esm.js

@@ -3,7 +3,7 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const logoVariationsHorizontalCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.w-\\[150px\\]{width:150px}.w-\\[500px\\]{width:500px}@media (min-width: 750px){.md\\:w-\\[300px\\]{width:300px}.md\\:w-\\[500px\\]{width:500px}}@media (min-width: 900px){.lg\\:w-\\[300px\\]{width:300px}.lg\\:w-\\[500px\\]{width:500px}}.coloured{background:linear-gradient(to left, \n  #9CE142 0%, \n  #00C959 50%, \n  #00A595 100%)}";
+const logoVariationsHorizontalCss = "ol,ul,menu{list-style:none;margin:0;padding:0}.coloured{background:linear-gradient(to left,\n      #9CE142 0%,\n      #00C959 50%,\n      #00A595 100%)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.text-center{text-align:center}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.grid-layout{--grid-columns:6;display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-6[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+1)::before{inset-inline-start:0}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+6)::before{inset-inline-end:0}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+1):nth-last-child(-n+6)::before{border-bottom-width:0}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before{border-bottom-width:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(6n+6)::after{border-inline-end-width:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+6)::after{top:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(6n+1):nth-last-child(-n+6)::after{bottom:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after{bottom:0}.grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.gap-y-8{row-gap:0.5rem}.flex{display:flex}.flex-col{flex-direction:column}.mx-auto{margin-left:auto;margin-right:auto}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}@media (min-width: 750px){.md\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}.md\\:gap-y-12{row-gap:0.75rem}}@media (min-width: 900px){.lg\\:gap-y-16{row-gap:1rem}.lg\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}}@media (min-width: 1024px){.xl\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}}@media (min-width: 1280px){.xxl\\:grid-col-span-2{--container-grid-columns:2;grid-column:span 2 / span 2}.xxl\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}}";
 const LogoVariationsHorizontalStyle0 = logoVariationsHorizontalCss;
 const LogoVariationsHorizontal = class {
   constructor(hostRef) {
@@ -11,51 +11,54 @@ const LogoVariationsHorizontal = class {
   }
   render() {
     return h("div", {
-      key: 'cc9a05a766fad3600cc3da8d922320708526346a'
-    }, h("div", {
-      key: '3dbdd07b54f1ea55685788776ba89d51c3b1f455',
-      class: "container my-16"
-    }, h("h3", {
-      key: 'd50b9de5ac50c6803938360781816bccc1c5aef5',
-      class: "f-heading03"
-    }, "Coloured Background"), h("div", {
-      key: '29333683d59a9adf60834fea8517160da5976d98',
-      class: "coloured lg:w-[500px] md:w-[300px]"
+      key: '02941660c566920227b36481dd7d211ad0ae35cc',
+      class: "container"
+    }, h("ul", {
+      key: 'a1859aafecdba011251097f758b38171278cac22',
+      class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: 'c105a4f208a7b7f15c6e0b28aff947e14bd533b9',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("p", {
+      key: '7b465faf996ae41431f505a81f86711988fcf680',
+      class: "f-body-01 text-center my-4"
+    }, "#1 Coloured"), h("div", {
+      key: '6e4ecd4347777a1fed5502129abe7247e2963923',
+      class: "coloured"
     }, h("eds-logo", {
-      key: '53000c65e1abcbc2a611c1e49fbfbaac6cf22944',
+      key: '8b129a330768f306d009bf93a4602d761559d0b8',
       type: "no-bg",
       href: "#"
-    }))), h("div", {
-      key: 'b9b784d2a105478f38fa2e72353dadca1253ae37',
-      class: "container my-16"
-    }, h("h3", {
-      key: '5c6b2684fb5635df6aadac68f14ba064a08bee2b',
-      class: "f-heading03"
-    }, "Black and White Background"), h("div", {
-      key: '1c2e191ce81ac1603c8d109c31e2b3a5707899e3',
-      class: "bg-default lg:w-[500px] md:w-[300px]"
+    }))), h("li", {
+      key: '451cadfdb5178acc0269988a06afb0e454a07833',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("p", {
+      key: '7b9d5fc604ebea27478f9ea3f95bf353e3310132',
+      class: "f-body-01 text-center my-4"
+    }, "#2 Black & White"), h("div", {
+      key: 'd3bb58f4f9c5c5e2d74511d7aac5375d221119e2',
+      class: "bg-default"
     }, h("eds-logo", {
-      key: '5faa6c2920349e614e2846489738664121237175',
+      key: 'bff3e05b114130b767cfecd65de33ba6ebf63778',
       type: "black",
       href: "#"
-    }))), h("div", {
-      key: '9f28a5d14f8aadca0ac38371eab47265a8a35a1b',
-      class: "container my-16"
-    }, h("h3", {
-      key: '1649d22547279c6cdfc7d415537b87d76d8915f6',
-      class: "f-heading03"
-    }, "Dark Background "), h("div", {
-      key: '135f85d196898dde99fdf7d5b5f09c54894b59cb',
-      class: "lg:w-[500px] md:w-[300px]"
+    }))), h("li", {
+      key: 'f7a627949d4c2e2a31f2e8c713a311c440c7d644',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("p", {
+      key: '09f14d2777c7462c493953748b92cdadf971e67e',
+      class: "f-body-01 text-center my-4"
+    }, "#3 Dark"), h("div", {
+      key: 'c7b79be6d031fb97e875525b848350a988879193'
     }, h("eds-logo", {
-      key: '3a04310c0debcfe1785c972895d7439f79a6aaa7',
+      key: '8a7fcf5800747bca95402df008423fd57ef2ebde',
       type: "color-white",
       href: "#"
-    }))));
+    })))));
   }
 };
 LogoVariationsHorizontal.style = LogoVariationsHorizontalStyle0;
-const logoVariationsVerticalCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.w-\\[150px\\]{width:150px}.w-\\[200px\\]{width:200px}.w-\\[300px\\]{width:500px}.coloured{background:linear-gradient(to left, \n  #9CE142 0%, \n  #00C959 50%, \n  #00A595 100%)}";
+const logoVariationsVerticalCss = ".coloured{background:linear-gradient(to left,\n      #9CE142 0%,\n      #00C959 50%,\n      #00A595 100%)}ol,ul,menu{list-style:none;margin:0;padding:0}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.text-center{text-align:center}.w-\\[200px\\]{width:200px}.w-\\[300px\\]{width:300px}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.grid-layout{--grid-columns:6;display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-6[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+1)::before{inset-inline-start:0}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+6)::before{inset-inline-end:0}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+1):nth-last-child(-n+6)::before{border-bottom-width:0}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before{border-bottom-width:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(6n+6)::after{border-inline-end-width:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+6)::after{top:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(6n+1):nth-last-child(-n+6)::after{bottom:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after{bottom:0}.grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.gap-y-8{row-gap:0.5rem}.flex{display:flex}.flex-col{flex-direction:column}.mx-auto{margin-left:auto;margin-right:auto}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}@media (min-width: 750px){.md\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}.md\\:gap-y-12{row-gap:0.75rem}}@media (min-width: 900px){.lg\\:gap-y-16{row-gap:1rem}.lg\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}}@media (min-width: 1024px){.xl\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}}@media (min-width: 1280px){.xxl\\:grid-col-span-2{--container-grid-columns:2;grid-column:span 2 / span 2}.xxl\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}}";
 const LogoVariationsVerticalStyle0 = logoVariationsVerticalCss;
 const LogoVariationsVertical = class {
   constructor(hostRef) {
@@ -65,50 +68,54 @@ const LogoVariationsVertical = class {
   }
   render() {
     return h("div", {
-      key: '1afffa0e5e0253ca2d8aec1a740d351fc614e0c4'
-    }, h("div", {
-      key: '3756f6a667a09cde71a67cd9f9bfce1054a6d523',
-      class: "container my-16"
-    }, h("h3", {
-      key: '371bd24965bcc0349dac7f65134b25f128423de3',
-      class: "f-heading03"
-    }, "Coloured Background"), h("div", {
-      key: '23062436bef739840eb998b919adcc1b69c55740',
-      class: "coloured w-[200px]"
+      key: 'e842e396933ee714f86a9443b55cd7045d12277e',
+      class: "container"
+    }, h("ul", {
+      key: 'dfea7dc44294bfe2acbbfd580bff8908cbeb98bf',
+      class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: 'fe44c472c10b814ff815c2a8cd7101adb0890872',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("p", {
+      key: '5ed6f1029df41907ca8b27a51612a1078f353ade',
+      class: "f-body-01 text-center my-4"
+    }, "#1 Coloured"), h("div", {
+      key: 'eae38dbd0f8d4b92f2768559dbe65d6c136ba746',
+      class: "mx-auto coloured w-[300px]"
     }, h("eds-logo", {
-      key: '226140792cb59d82bf2696802d53d43f24171dea',
+      key: '7a05dacc86c54c6ff51810b14c9dc99fad4e36b5',
       orientation: "vertical",
       type: "no-bg",
       href: "#"
-    }))), h("div", {
-      key: 'a37d0871161b9753656768fcfe78158e63f52669',
-      class: "container my-16"
-    }, h("h3", {
-      key: '0a3c80b44fd9161746203af3ef95654acd3986e8',
-      class: "f-heading03"
-    }, "Black and White Background"), h("div", {
-      key: 'e3d9447be3a1499ed546e85cf534ba0709a846a0',
-      class: "bg-default w-[200px]"
+    }))), h("li", {
+      key: '4055ab71f60098acea7e27f2a8706c45aecb7097',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("p", {
+      key: '340cfb0cbf6383d46eabd91b6fb591a003ec00f6',
+      class: "f-body-01 text-center my-4"
+    }, "#2 Black & White"), h("div", {
+      key: 'd4158d0b6413cae236c333fe0ffdd77dbda22c88',
+      class: "mx-auto bg-default w-[300px]"
     }, h("eds-logo", {
-      key: 'fc63b377517ba82dc141d3e3a82221018a3ef315',
+      key: 'a411c3438499758b68cf949a83d9097da70a11f0',
       orientation: "vertical",
       type: "black",
       href: "#"
-    }))), h("div", {
-      key: '68e487c6be2e62caa1d7196a294ed9fadf6ab399',
-      class: "container my-16"
-    }, h("h3", {
-      key: '505ab03210a8ace1dd0394df3fa159f1dd3bddf0',
-      class: "f-heading03"
-    }, "Dark Background "), h("div", {
-      key: '6d08734cedf520554d746caa6c99561fdd73f855',
-      class: "w-[200px]"
+    }))), h("li", {
+      key: 'a7a97185be422337fb333709c61fe7c435bc82f3',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("p", {
+      key: 'cef2acc75d1749cd93699a99a2d80aeaa61ed632',
+      class: "f-body-01 text-center my-4"
+    }, "#3 Dark"), h("div", {
+      key: '43be8f5ca418a93b58c8f3a52d04a6e50b5bb03b',
+      class: "mx-auto w-[300px]"
     }, h("eds-logo", {
-      key: '63d2496b5dab9c66809cbe38b55a83928276cce0',
+      key: 'b5453b1009c0aa5c799c417e5c13b30cfc647840',
       orientation: "vertical",
       type: "color-white",
       href: "#"
-    }))));
+    })))));
   }
 };
 LogoVariationsVertical.style = LogoVariationsVerticalStyle0;

package/{eds-logo-variations.entry.esm.js → logo-variations-tabs.entry.esm.js}

@@ -3,7 +3,7 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const EdsLogoVariations = class {
+const LogoVariationsTabs = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.tabIndex = undefined;
@@ -20,10 +20,10 @@ const EdsLogoVariations = class {
   }
   render() {
     return h("div", {
-      key: '31bd93b3412b859adc59f6a4fe67018bf9c13336',
+      key: 'f0bc6f4cd2e1d34d77ff52c3a0ce35a3214a2f9f',
       class: "container"
     }, this.renderContent());
   }
 };
 
-export { EdsLogoVariations as eds_logo_variations };
+export { LogoVariationsTabs as logo_variations_tabs };

package/logo-wrong-usage.entry.esm.js

@@ -4,132 +4,96 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const logoWrongUsageCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.container{display:flex;flex-wrap:wrap;gap:16px}.example{width:200px;text-align:center;font-size:14px}.logo{width:100%;height:auto}.bg-dark{background-color:#333}.bg-light{background-color:#f3f3f3}.bg-white{background-color:white}.non-brand-color{fill:purple;}.distorted{transform:scaleX(1.5)}.effects{filter:drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5))}.rotated{transform:rotate(15deg)}.no-other-bg-color{background-color:var(--purple-200)}.no-other-color{color:var(--red-700)}.outlined{stroke:red;stroke-width:2px;fill:none;}.custom-font{font-family:'Comic Sans MS', cursive;font-size:20px;color:#333;}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.gap-y-8{row-gap:0.5rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:flex{display:flex}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}@media (min-width: 750px){.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}}.flex-col{flex-direction:column}";
+const logoWrongUsageCss = "ol,ul,menu{list-style:none;margin:0;padding:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-center{text-align:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.logo{width:100%;height:auto}.bg-dark{background-color:#333}.bg-light{background-color:#f3f3f3}.bg-white{background-color:white}.non-brand-color{fill:purple;}.distorted{transform:scaleX(0.5)}.effects{filter:drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5))}.rotated{transform:rotate(15deg)}.no-other-bg-color{background-color:var(--purple-200)}.no-other-color{color:var(--red-700)}.outlined{stroke:red;stroke-width:2px;fill:none;}.custom-font{font-family:'Comic Sans MS', cursive;font-size:20px;color:#333;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.grid-layout{--grid-columns:6;display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-6[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+1)::before{inset-inline-start:0}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+6)::before{inset-inline-end:0}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+1):nth-last-child(-n+6)::before{border-bottom-width:0}.grid-cols-6[class*=\"grid-line-x\"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before{border-bottom-width:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(6n+6)::after{border-inline-end-width:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+6)::after{top:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(6n+1):nth-last-child(-n+6)::after{bottom:0}.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after{bottom:0}.grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.gap-y-8{row-gap:0.5rem}.flex{display:flex}.flex-col{flex-direction:column}.mx-auto{margin-left:auto;margin-right:auto}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}@media (min-width: 750px){.md\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}.md\\:gap-y-12{row-gap:0.75rem}}@media (min-width: 900px){.lg\\:gap-y-16{row-gap:1rem}.lg\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}}@media (min-width: 1024px){.xl\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}}@media (min-width: 1280px){.xxl\\:grid-col-span-2{--container-grid-columns:2;grid-column:span 2 / span 2}.xxl\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}}";
 const LogoWrongUsageStyle0 = logoWrongUsageCss;
 const LogoWrongUsage = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
   render() {
-    return h("ul", {
-      key: 'f5aef262ac65790a1f86ea7eb8a80fc093406798',
-      class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16"
-    }, h("span", {
-      key: '150bcdb8502a137f54415e24618cf39d0f098c28',
-      class: `grid-col-span-12 md:grid-col-span-4 flex flex-col`
-    }, h("div", {
-      key: '7df94271a37ae57dc021390f6f16637ea3c6948e',
-      class: "example"
-    }, h("div", {
-      key: '8b4bff581312ed63a5812b9bd7c93bbae6137809',
-      class: "bg-dark "
-    }, h("div", {
-      key: '78fd9855901f2da1392006dbbcaec5537586ef9d',
-      class: "no-other-bg-color logo",
+    return h("div", {
+      key: '3abc03c4b2592a3138a60c80c390ff12ac79c92e',
+      class: "container"
+    }, h("ul", {
+      key: 'be3a492fe05ef05b96bfc66833f7ac30d596cf7c',
+      class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: '60f3aa76849d2793907b27ad6ed0584f27896dc1',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("div", {
+      key: '7c0c0f86de1354651d42f11c865ea4e68d7fd5f6',
+      class: "mx-auto no-other-bg-color logo",
       innerHTML: hLogoColor
-    })), h("p", {
-      key: '5bbf1ae6a4b6b4f9c1a5a310c0c5b123b24f3581',
-      class: "f-ui-02"
-    }, "Do not use with backgrounds that make legibility difficult"))), h("span", {
-      key: '7d1c8346857b6366b69e9ad6bc910adfed8b6213',
-      class: `grid-col-span-12 md:grid-col-span-4 flex flex-col`
-    }, h("div", {
-      key: '3df57b6e370e166e63b36aa45901800de51bedc5',
-      class: "example"
-    }, h("div", {
-      key: 'dc1983f4b8faad9d3c23ad612a1c01462bf033b0',
-      class: "no-other-color p-16"
-    }, h("div", {
-      key: '42f985c970bce2bfa9590f64458e6987500d6036',
-      class: "logo non-brand-color",
+    }), h("p", {
+      key: '6c1e0b7bc964a2b062ddd539f740622ed5cf9ef8',
+      class: "f-ui-02 text-center"
+    }, "Do not use with backgrounds that make legibility difficult")), h("li", {
+      key: '4dbf231814d5994d3075ca55b8a18006eb3b487e',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("div", {
+      key: 'ee1964d4fe1390daa4c3446370d6efd183ec80e2',
+      class: "mx-auto no-other-color logo non-brand-color",
       innerHTML: hLogoColor
-    })), h("p", {
-      key: '9f44984a151b0720f2be17074bdd3c0d42c8210a',
-      class: "f-ui-02"
-    }, "Do not apply other colors"))), h("span", {
-      key: 'd6481a9e1f79c892e54853f3137e5724a42c2479',
-      class: `grid-col-span-12 md:grid-col-span-4 flex flex-col`
-    }, h("div", {
-      key: 'fd550421e565543c1aaff054a86733a585ce9b9b',
-      class: "example"
-    }, h("div", {
-      key: '3b677e85c9b3cb237e10a212187ba192b711fd53',
-      class: "bg-light p-16"
-    }, h("div", {
-      key: '958733b94eca4e7e27dc5ac3e74f2c745198f37d',
-      class: "logo distorted",
+    }), h("p", {
+      key: '509d867602f88bfd2ce5030e78005eb96993e22b',
+      class: "f-ui-02 text-center"
+    }, "Do not apply other colors")), h("li", {
+      key: '40b486fdcf816d6cc3943b3444014a145798889f',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("div", {
+      key: 'cc64549a8aaf14eac2ed57543ca7bbca39fd7686',
+      class: "mx-auto distorted logo",
       innerHTML: hLogoColor
-    })), h("p", {
-      key: '9f4d3fc90cf8143480fb143a8932f91185a62f4c',
-      class: "f-ui-02"
-    }, "Do not deform the logo"))), h("span", {
-      key: '7254597b2dbcb94118547e3b640c79c3bbd3e7ff',
-      class: `grid-col-span-12 md:grid-col-span-4 flex flex-col`
-    }, h("div", {
-      key: '4caef2a8c103ecfc8ff91e40b8c5255571984d14',
-      class: "example"
-    }, h("div", {
-      key: 'c93ae6b7c3d58700300fe01b398e4e57728fb314',
-      class: "bg-white p-16"
-    }, h("div", {
-      key: '92916204870722a6da1f45d3d09505589763390b',
-      class: "logo effects",
+    }), h("p", {
+      key: 'e8fdc70352a2084d5bc7255059addb232f055f63',
+      class: "f-ui-02 text-center"
+    }, "Do not deform the logo")), h("li", {
+      key: '375278f35b81a58f00f0a5702d156774b8d5f5a0',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("div", {
+      key: '4c4d4f2e3a8b4111b2f444a744f366c276f1869f',
+      class: "mx-auto effects logo",
       innerHTML: hLogoColor
-    })), h("p", {
-      key: 'f9295bc1f1b1de2c575d934588f95dee6fc81143',
-      class: "f-ui-02"
-    }, "Do not apply effects"))), h("span", {
-      key: '1b8488e14728799e81205823d2a964cf8e6f9baf',
-      class: `grid-col-span-12 md:grid-col-span-4 flex flex-col`
-    }, h("div", {
-      key: 'd3be08fe47ce2fd20dee086553cd16950fb6f964',
-      class: "example"
-    }, h("div", {
-      key: '76713df96cca42778f26b580e790dd3fcfb0abee',
-      class: "bg-white p-16"
-    }, h("div", {
-      key: 'db1a9153dc37119255fa75ea0491daea09545d61',
-      class: "logo rotated",
+    }), h("p", {
+      key: 'c3bf1ab4f4244a345ab5babbce4f4de78b696ac6',
+      class: "f-ui-02 text-center"
+    }, "Do not apply effects")), h("li", {
+      key: '5fe3b28dba45127dc391d8101402834f09a61976',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("div", {
+      key: 'e4e36e3539813527c339e0e46a66661d8d9fd412',
+      class: "mx-auto rotated logo",
       innerHTML: hLogoColor
-    })), h("p", {
-      key: '95b0f06f728a846119bd6844207e93d068dabcc6',
-      class: "f-ui-02"
-    }, "Do not rotate the logo"))), h("span", {
-      key: '92c5de7b7834ae8a14548712239ec22667d2fb5c',
-      class: `grid-col-span-12 md:grid-col-span-4 flex flex-col`
-    }, h("div", {
-      key: '64533bc4e04c802b4cedc6866c168eaac72c2550',
-      class: "example"
-    }, h("div", {
-      key: 'd630811a1c2ae0a252a7e1bdf7383440e6aa417a',
-      class: "bg-light p-16"
-    }, h("div", {
-      key: '525f7eaebf6e0a75b4ea91c2795f13a7837ebb54',
-      class: "logo outlined",
+    }), h("p", {
+      key: '6d48a5cc5a0917047ba8377da80a24f42d3d16d1',
+      class: "f-ui-02 text-center"
+    }, "Do not rotate the logo")), h("li", {
+      key: '9e55f909b1fc0fcbc9b3a1e6d57257f4972f7632',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
+    }, h("div", {
+      key: 'c1867f7232957dc5022936f2174039e4d02e6ad7',
+      class: "mx-auto outlined logo",
       innerHTML: hLogoColor
-    })), h("p", {
-      key: '455855e6657b98d55b0f637548a88ed312130007',
-      class: "f-ui-02"
-    }, "Do not apply outlines"))), h("span", {
-      key: 'a0c54e90591e693fb705d085c21b281e0468bc6e',
-      class: `grid-col-span-12 md:grid-col-span-4 flex flex-col`
-    }), h("span", {
-      key: 'af1f7db921096e0a20372ad028bf8eb6522ec736',
-      class: `grid-col-span-12 md:grid-col-span-4 flex flex-col`
+    }), h("p", {
+      key: 'd0769904f374ae87e5e283135854dbfb7b448663',
+      class: "f-ui-02 text-center"
+    }, "Do not apply outlines")), h("li", {
+      key: '0955a1f0e63fdc260e990ce995f8d1e1546bfdf4',
+      class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col"
     }, h("div", {
-      key: 'ba754fd4de6ea65d74f8215aee158c3657b42b23',
-      class: "example"
+      key: '4f9ad9e2a5d3ba7125284b1657db0cad282480ce',
+      class: "mx-auto"
     }, h("div", {
-      key: '91b10cf3ad9ce224546f5c67ddd10a6009a6278d',
+      key: 'd1a2ef07750991919768bd699a8e8c2cd2801254',
       class: "bg-accent p-16"
     }, h("div", {
-      key: '1ea0aa874d42426a0e4762532a1b5aaa8c7fc671',
+      key: '291732a9a1463be409989c10def40eafb4e89ee2',
       class: "text-inverse",
       innerHTML: hLogoColor
     })), h("p", {
-      key: '3219f17362a76b5694e44c34d9405c04e378d7fd',
-      class: "f-ui-02"
-    }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))));
+      key: 'b9946ad16af5c474a06179be04966dfaba6c81c3',
+      class: "f-ui-02 text-center"
+    }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
   }
 };
 LogoWrongUsage.style = LogoWrongUsageStyle0;

package/minus-b30a7c71.esm.js

@@ -0,0 +1,11 @@
+const minus = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M16 10H4" stroke="currentColor" stroke-width="2" />
+  </svg>`;
+
+export { minus as m };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/react",
-  "version": "0.8.0-alpha.0",
+  "version": "0.9.0-beta",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",

package/paper-8e74ea31.esm.js

@@ -0,0 +1,15 @@
+const paper = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11 17H4V3H16V12M11 17L16 12M11 17V12H16"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+  </svg>`;
+
+export { paper as p };

package/plus-89c07be2.esm.js

@@ -0,0 +1,12 @@
+const plus = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M16 10H4" stroke="currentColor" stroke-width="2" />
+    <path d="M10 16L10 4" stroke="currentColor" stroke-width="2" />
+  </svg>`;
+
+export { plus as p };

package/portal-d6c8ce56.esm.js

@@ -0,0 +1,18 @@
+const portal = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 14.0806L8 11L3 11L3 9L8 9L8 5.91938L13.1008 10L8 14.0806Z"
+      fill="currentColor"
+    />
+    <path
+      d="M15 15L12 15L12 17L15 17C16.1046 17 17 16.1046 17 15L17 5C17 3.89543 16.1046 3 15 3L12 3L12 5L15 5L15 15Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+export { portal as p };

package/private-1c25ff8e.esm.js

@@ -0,0 +1,25 @@
+const privat = `  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 5V3C8 1.89543 7.10457 1 6 1V1C4.89543 1 4 1.89543 4 3V5"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <rect
+      x="2"
+      y="5"
+      width="8"
+      height="6"
+      rx="1"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <circle cx="6" cy="8" r="1.5" fill="currentColor" />
+  </svg>`;
+
+export { privat as p };

package/public-d4d8c585.esm.js

@@ -0,0 +1,16 @@
+const pub = `  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="6" cy="3" r="2" stroke="currentColor" stroke-width="1.5" />
+    <path
+      d="M10 12V9C10 7.89543 9.10457 7 8 7H4C2.89543 7 2 7.89543 2 9V12"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+  </svg>`;
+
+export { pub as p };

package/src/components.d.ts

@@ -12,14 +12,12 @@ export declare const EdsDropdown: import("react").ForwardRefExoticComponent<JSX.
 export declare const EdsFeedback: import("react").ForwardRefExoticComponent<JSX.EdsFeedback & Omit<import("react").HTMLAttributes<HTMLEdsFeedbackElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsFeedbackElement>>;
 export declare const EdsFooter: import("react").ForwardRefExoticComponent<JSX.EdsFooter & Omit<import("react").HTMLAttributes<HTMLEdsFooterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsFooterElement>>;
 export declare const EdsForm: import("react").ForwardRefExoticComponent<JSX.EdsForm & Omit<import("react").HTMLAttributes<HTMLEdsFormElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsFormElement>>;
-export declare const EdsFrame: import("react").ForwardRefExoticComponent<JSX.EdsFrame & Omit<import("react").HTMLAttributes<HTMLEdsFrameElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsFrameElement>>;
 export declare const EdsFullscreenMenu: import("react").ForwardRefExoticComponent<JSX.EdsFullscreenMenu & Omit<import("react").HTMLAttributes<HTMLEdsFullscreenMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsFullscreenMenuElement>>;
 export declare const EdsHeader: import("react").ForwardRefExoticComponent<JSX.EdsHeader & Omit<import("react").HTMLAttributes<HTMLEdsHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsHeaderElement>>;
 export declare const EdsIconWrapper: import("react").ForwardRefExoticComponent<JSX.EdsIconWrapper & Omit<import("react").HTMLAttributes<HTMLEdsIconWrapperElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsIconWrapperElement>>;
 export declare const EdsImg: import("react").ForwardRefExoticComponent<JSX.EdsImg & Omit<import("react").HTMLAttributes<HTMLEdsImgElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsImgElement>>;
 export declare const EdsInputField: import("react").ForwardRefExoticComponent<JSX.EdsInputField & Omit<import("react").HTMLAttributes<HTMLEdsInputFieldElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsInputFieldElement>>;
 export declare const EdsLink: import("react").ForwardRefExoticComponent<JSX.EdsLink & Omit<import("react").HTMLAttributes<HTMLEdsLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsLinkElement>>;
-export declare const EdsLogin: import("react").ForwardRefExoticComponent<JSX.EdsLogin & Omit<import("react").HTMLAttributes<HTMLEdsLoginElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsLoginElement>>;
 export declare const EdsLogo: import("react").ForwardRefExoticComponent<JSX.EdsLogo & Omit<import("react").HTMLAttributes<HTMLEdsLogoElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsLogoElement>>;
 export declare const EdsMatomoNotice: import("react").ForwardRefExoticComponent<JSX.EdsMatomoNotice & Omit<import("react").HTMLAttributes<HTMLEdsMatomoNoticeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsMatomoNoticeElement>>;
 export declare const EdsModal: import("react").ForwardRefExoticComponent<JSX.EdsModal & Omit<import("react").HTMLAttributes<HTMLEdsModalElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEdsModalElement>>;