@ebrains/react 2.4.1 → 3.1.0

package/eds-modal.entry.esm.js

@@ -4,20 +4,33 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999991{z-index:9999991}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-0{top:0rem}.left-0{left:0rem}.top-20{top:1.25rem}.bottom-0{bottom:0rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.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)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}@media (min-width: 750px){.md\\:bottom-20{bottom:1.25rem}.md\\:w-auto{width:auto}.md\\:min-w-\\[500px\\]{width:500px}.md\\:top-20{top:1.25rem}.md\\:top-1\\/2{top:50%}.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:gap-y-12{row-gap:0.75rem}}";
+const edsModalCss = ".modal-open{display:flex}.modal-closed{display:none}.modal-backdrop{}.backdrop-visible{opacity:0.9}.backdrop-hidden{opacity:0}.modal-content{}.modal-content-visible{opacity:1}.modal-content-hidden{opacity:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.flex-col{flex-direction:column}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999991{z-index:9999991}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.py-24{padding-top:1.5rem;padding-bottom:1.5rem}.leading-normal{line-height:1.5}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-light)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-0{top:0rem}.top-16{top:1rem}.left-0{left:0rem}.top-20{top:1.25rem}.bottom-0{bottom:0rem}.bottom-16{bottom:1rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.overflow-y-auto{overflow-y:auto}.max-h-\\[90vh\\]{max-height:90vh}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.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)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-light)}.bg-strong{background-color:var(--grey-dark)}.bg-strongest{background-color:var(--brand-black)}.mr-8{margin-right:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.modal-title{line-height:1.5;padding-bottom:2px;display:inline-block}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;padding-bottom:2px;}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding-bottom:2px;}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;padding-bottom:2px;}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;padding-bottom:2px;}.modal-small{min-width:300px;max-width:500px}.modal-medium{min-width:300px;max-width:700px}.modal-large{min-width:300px;max-width:900px}@media (max-width: 749px){.modal-small,.modal-medium,.modal-large{min-width:calc(100% - 2rem);max-width:calc(100% - 2rem);margin:0 1rem}}@media (min-width: 750px){.md\\:bottom-20{bottom:1.25rem}.md\\:w-auto{width:auto}.md\\:min-w-\\[500px\\]{width:500px}.md\\:top-20{top:1.25rem}.md\\:top-1\\/2{top:50%}.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:gap-y-12{row-gap:0.75rem}}";
 const EdsModalStyle0 = edsModalCss;
 const EdsModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.previousActiveElement = null;
     this.heading = '';
-    this.truncate = 1;
+    this.truncate = undefined;
     this.position = 'middle';
+    this.size = 'medium';
     this.inverseHeader = false;
     this.isOpen = false;
   }
   getTruncateClass() {
     return this.truncate ? `line-clamp-${this.truncate}` : '';
   }
+  getSizeClass() {
+    switch (this.size) {
+      case 'small':
+        return 'modal-small';
+      case 'large':
+        return 'modal-large';
+      case 'medium':
+      default:
+        return 'modal-medium';
+    }
+  }
   /**
    * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
    *
@@ -28,12 +41,12 @@ const EdsModal = class {
     switch (this.position) {
       case 'top':
         return [
-        // mobile: pinned to top, full-width
-        'top-0', 'left-0', 'w-full',
+        // mobile: small gap from top, full-width
+        'top-16', 'left-0', 'w-full',
         // desktop: half-width centred and offset down
         'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:top-20'].join(' ');
       case 'bottom':
-        return ['bottom-0', 'left-0', 'w-full', 'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:bottom-20'].join(' ');
+        return ['bottom-16', 'left-0', 'w-full', 'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:bottom-20'].join(' ');
       /*case 'left':
         …
       case 'right':
@@ -42,17 +55,53 @@ const EdsModal = class {
       default:
         return [
         // mobile: full-width, start from top with a little padding
-        'top-0', 'left-0', 'w-full', 'pt-4',
+        'top-16', 'left-0', 'w-full',
         // desktop: centred both axes
         'md:left-1/2', 'md:top-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:-translate-y-1/2'].join(' ');
     }
   }
+  trapFocus(event) {
+    var _a;
+    if (event.key !== 'Tab') return;
+    const focusableElements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (!focusableElements || focusableElements.length === 0) return;
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === firstElement) {
+        lastElement.focus();
+        event.preventDefault();
+      }
+    } else {
+      if (document.activeElement === lastElement) {
+        firstElement.focus();
+        event.preventDefault();
+      }
+    }
+  }
+  lockBodyScroll() {
+    document.body.style.overflow = 'hidden';
+  }
+  unlockBodyScroll() {
+    document.body.style.overflow = '';
+  }
   /**
    * Opens the modal.
    */
   async open() {
     var _a;
+    // Store currently focused element
+    this.previousActiveElement = document.activeElement;
     this.isOpen = true;
+    this.lockBodyScroll();
+    // Focus first focusable element in modal after it renders
+    setTimeout(() => {
+      var _a;
+      const focusableElements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (focusableElements && focusableElements.length > 0) {
+        focusableElements[0].focus();
+      }
+    }, 100);
     sendAnalytics({
       category: 'ui-component',
       parentContext: null,
@@ -67,6 +116,14 @@ const EdsModal = class {
   async close() {
     var _a;
     this.isOpen = false;
+    this.unlockBodyScroll();
+    // Return focus to previously focused element
+    if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+      setTimeout(() => {
+        var _a;
+        (_a = this.previousActiveElement) === null || _a === void 0 ? void 0 : _a.focus();
+      }, 100);
+    }
     sendAnalytics({
       category: 'ui-component',
       parentContext: null,
@@ -79,7 +136,11 @@ const EdsModal = class {
    * Toggles the modal open or closed.
    */
   async toggle() {
-    this.isOpen = !this.isOpen;
+    if (this.isOpen) {
+      await this.close();
+    } else {
+      await this.open();
+    }
   }
   /**
    * Listens for global custom events to open the modal.
@@ -94,52 +155,48 @@ const EdsModal = class {
     this.close();
   }
   /**
-   * Closes the modal when the Escape key is pressed.
+   * Closes the modal when the Escape key is pressed and handles focus trapping on Tab.
    */
   handleKeyDown(event) {
-    if (this.isOpen && event.key === 'Escape') {
+    if (!this.isOpen) return;
+    if (event.key === 'Escape') {
       this.close();
+    } else if (event.key === 'Tab') {
+      this.trapFocus(event);
     }
   }
   render() {
     // Generate a unique id for the title so we can reference it for aria-labelledby.
     const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
+    // Don't render anything when modal is closed to prevent blocking clicks
+    if (!this.isOpen) {
+      return null;
+    }
     return h("div", {
-      key: '6b7cbab7db29bb09415bb9538d69ac9a238a7776',
       id: "eds-modal",
-      class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`,
+      class: "modal-open fixed inset-0 z-9999991 flex",
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": titleId
-    }, this.isOpen && h("div", {
-      key: '56f00980b2f843b5c1ce85502409d4711d89fad7',
-      class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
-      ,
-
+    }, h("div", {
+      class: "modal-backdrop fixed inset-0 bg-dark backdrop-visible",
       onClick: () => this.close()
     }), h("div", {
-      key: '687e1975bb8a17b0a6eb42038f72117dc71ca876',
-      class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center`
+      class: `container absolute bg-inverse z-10 rounded-lg shadow-lg ${this.getModalPositionClasses()} ${this.getSizeClass()} grow justify-center max-h-[90vh] flex flex-col modal-content modal-content-visible`
     }, h("div", {
-      key: '653886c1ee090152b0a9d8dbb6e554762496167f',
-      class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}`
+      class: `flex justify-between items-center border-b-2 border-softer px-20 py-24 flex-shrink-0  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}`
     }, h("span", {
-      key: 'efefadd7e6630d9d9b498e68480a41b604c16c9f',
       id: titleId,
-      class: `f-heading-04 ${this.getTruncateClass()}`
+      class: `f-heading-04 mr-8 modal-title ${this.getTruncateClass()}`
     }, this.heading), h("eds-button", {
-      key: '79a156bd0640990911f1480a4e6becc7c4c20d7b',
-      intent: "tertiary",
+      intent: this.inverseHeader ? 'ghostInverse' : 'secondary',
+      size: "large",
       icon: "close",
       "aria-label": "Close modal",
-      onClick: () => this.close(),
-      "extra-class": "ml-8 text-default"
+      onClick: () => this.close()
     })), h("div", {
-      key: '802a6cc72f1bb41e8f907baa8d37cb5a01baf0cf',
-      class: "pt-8 px-20 py-20"
-    }, h("slot", {
-      key: '1a59aaa764e4c4ed972de7a700ddf8f716e40e58'
-    }))));
+      class: "pt-8 px-20 py-20 overflow-y-auto flex-1"
+    }, h("slot", null))));
   }
   get el() {
     return getElement(this);

package/eds-pie.entry.esm.js

@@ -54,7 +54,7 @@ const EdsPie = class {
       const start = cumulative,
         end = cumulative + angle;
       cumulative = end;
-      const color = s.color || palette.shift() || 'var(--color-chart-neutral-1)';
+      const color = s.color || palette.shift() || '#8c8c8c';
       return Object.assign(Object.assign({}, s), {
         start,
         end,
@@ -87,7 +87,7 @@ const EdsPie = class {
       cx: radius,
       cy: radius,
       r: innerRadius,
-      fill: "var(--white)"
+      fill: "#FFFFFF"
     }), processed.map(s => {
       const midAngle = s.start + (s.end - s.start) / 2;
       const {
@@ -123,8 +123,42 @@ const EdsPie = class {
 };
 EdsPie.MAX_SLICES = 9;
 EdsPie.PALETTES = {
-  semantic: ['var(--color-chart-accent)', 'var(--color-chart-strong)', 'var(--color-chart-accent-dark)', 'var(--color-chart-lighter)', 'var(--color-chart-accent-light)', 'var(--color-chart-lightest)', 'var(--color-chart-accent-lighter)', 'var(--color-chart-darker)', 'var(--color-chart-accent-lightest)'],
-  mono: ['var(--grey-700)', 'var(--grey-500)', 'var(--grey-300)', 'var(--grey-100)', 'var(--grey-800)', 'var(--grey-600)', 'var(--grey-400)', 'var(--grey-200)', 'var(--grey-900)']
+  semantic: ['#00e766',
+  // green-500
+  '#666666',
+  // grey-700
+  '#00c959',
+  // green-600
+  '#8c8c8c',
+  // grey-500
+  '#63fb92',
+  // green-400
+  '#d8d8d8',
+  // grey-400
+  '#9dffb4',
+  // green-300
+  '#e6e6e6',
+  // grey-300
+  '#d3ffdc' // green-200
+  ],
+  mono: ['#666666',
+  // grey-700
+  '#8c8c8c',
+  // grey-500
+  '#e6e6e6',
+  // grey-300
+  '#f8f8f8',
+  // grey-100
+  '#4d4d4d',
+  // grey-800
+  '#6e6e6e',
+  // grey-600
+  '#d8d8d8',
+  // grey-400
+  '#f2f2f2',
+  // grey-200
+  '#242424' // grey-900
+  ]
 };
 EdsPie.style = EdsPieStyle0;
 

package/eds-section-core_2.entry.esm.js

@@ -15,13 +15,13 @@ const EdsSectionCore = class {
   render() {
     const TagType = this.tag; // Set dynamic tag type (div or section)
     return h(TagType, {
-      key: '3c75c9cda6a41c0d4243c3c111d7cc95f3efb97b'
+      key: '635230d1ec9a0dcc945990a6a58dc3508345d984'
     }, h("eds-section-heading", {
-      key: '05b4d011aa1b8f489fe8aa0fd6d43b824da03370',
+      key: '0b6b94df22af707cbd6964132f3a5190b4b7e83c',
       headingLevel: this.headingLevel,
       sectionTitle: this.sectionTitle
     }), h("slot", {
-      key: '1749580398e56d38d83d5f5fdd87f43867a554cb'
+      key: '8834c29c25249fb5c384fb5d51866eadb93a97d6'
     }));
   }
 };
@@ -52,7 +52,7 @@ const EdsSectionHeading = class {
     const TagType = this.tag; // Dynamically set tag type for the container
     const HeadingTag = this.headingLevel; // Dynamically set heading level
     return h(TagType, {
-      key: '18614645f329d9ccfe6104b544ff306c6190173a',
+      key: '7275284a1158ab982f1e53117b72738d0a001c97',
       class: {
         'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
         container: this.withContainer,
@@ -60,7 +60,7 @@ const EdsSectionHeading = class {
         'pt-28': !this.spacingLarge
       }
     }, h(HeadingTag, {
-      key: 'ce699077313e9ee8d8a66e68af667451351a35a6',
+      key: 'a3c68baa56a0337348405c88544225ed7c7ff0ed',
       class: this.getHeadingClass()
     }, this.sectionTitle));
   }

package/eds-splash-screen.entry.esm.js

@@ -3,7 +3,7 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:200px;height:200px;margin-bottom:1rem}.content-container{position:relative;width:5rem;height:5rem;display:flex;align-items:center;justify-content:center}";
+const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:300px;height:60px;animation:loading-pulse 1.5s ease-in-out infinite}@keyframes loading-pulse{0%,100%{opacity:1}50%{opacity:0.6}}";
 const EdsSplashScreenStyle0 = edsSplashScreenCss;
 const EdsSplashScreen = class {
   constructor(hostRef) {
@@ -55,22 +55,14 @@ const EdsSplashScreen = class {
     return h(Host, null, h("div", {
       class: "splash-overlay",
       style: {
-        background: this.inverse ? 'black' : 'var(--grey-200)'
+        background: this.inverse ? 'var(--brand-black)' : 'var(--grey-light)'
       }
     }, h("div", {
       class: "logo-container"
     }, this.inverse ? h("eds-logo", {
-      orientation: "vertical",
-      type: "color-white"
+      variant: "negative"
     }) : h("eds-logo", {
-      orientation: "vertical",
-      type: "color"
-    })), h("div", {
-      class: "content-container"
-    }, h("eds-spinner", {
-      size: "xs",
-      background: "none",
-      fullscreen: false
+      variant: "positive"
     }))));
   }
   static get watchers() {

package/eds-timeline.entry.esm.js

@@ -46,29 +46,26 @@ const EdsTimeline = class {
   }
   render() {
     return h("div", {
-      key: '0e33d3aed6e58d34209012bf65b0388b501f1667',
+      key: '78b199b18d361ae3223e4f1fe9a2043d61f4271b',
       class: "max-w-sidebar mx-auto px-4 py-8"
     }, h("div", {
-      key: 'ac0c5cfa6685d79cce06faa4481568ce1018c562',
+      key: 'afdfdf7dc573a7f273703a02e38e755a9815bdf7',
       class: "relative"
     }, h("div", {
-      key: '96be2703fc36ecbe8b872d7ed79873375ef05de9',
+      key: '7affc96f356ee901ca263c7347ae60b84869f28b',
       class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0"
     }), h("div", {
-      key: '9d4e75de9f35a00c76edf08f7e570c62c325741d',
+      key: '7ba006234bd1365890e75b7f59aa118265ba727c',
       class: "space-y-16"
     }, this.parsedEvents.map((event, index) => h("div", {
       class: "relative flex"
     }, h("div", {
       class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}`
     }, index % 2 === 0 && h("eds-card-generic", {
-      cardTitle: event.title,
+      title: event.title,
       url: "#",
       description: event.description,
-      "heading-level": "h2",
-      tiny: true,
-      bg: !event.completed,
-      "with-hover": "false",
+      intent: "secondary",
       tags: JSON.stringify(event.completed ? [{
         label: 'completed',
         style: 'accent'
@@ -86,13 +83,10 @@ const EdsTimeline = class {
     })), h("div", {
       class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}`
     }, index % 2 !== 0 && h("eds-card-generic", {
-      cardTitle: event.title,
+      title: event.title,
       url: "#",
       description: event.description,
-      "heading-level": "h2",
-      tiny: true,
-      bg: !event.completed,
-      "with-hover": "false",
+      intent: "secondary",
       tags: JSON.stringify(event.completed ? [{
         label: 'completed',
         style: 'accent'

package/eds-toast-manager.entry.esm.js

@@ -74,7 +74,7 @@ const EdsToastManager = class {
   }
   render() {
     return h("div", {
-      key: '871b9d1b34f1e03b77754a1bfd82b5e506d12592',
+      key: '989e469e815c6af6b46a14fddee85e4707f86704',
       class: "toast-container"
     }, this.toasts.map(t => h("div", {
       key: t.id

package/eds-trl-badge.entry.esm.js

@@ -0,0 +1,186 @@
+import { r as registerInstance, h, H as Host } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+/* eslint-disable */
+/**
+ * Official EBRAINS sphere mark, extracted from
+ * packages/assets/EBRAINS_logo_25/new_ebrains_logo_rgb/250901_new_ebrains_logo_rgb_positive.svg
+ * (the gradient-filled wave segments only — wordmark dropped).
+ *
+ * Gradient ids carry a `__UID__` placeholder so each badge instance can
+ * namespace them (no <defs> collisions when several badges share a page).
+ * Gradient template inheritance uses SVG2 `href` (no xlink namespace needed).
+ * Use markDefs() inside the badge <defs> and markGroup() in the body.
+ */
+const MARK_DEFS = `<linearGradient id="__UID__Unbenannter_Verlauf_29" x1="-26.7" y1="64.8" x2="155" y2="-19.9" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#03a98f"/> <stop offset=".1" stop-color="#10a97b"/> <stop offset=".3" stop-color="#23aa5f"/> <stop offset="1" stop-color="#00ff9d"/> </linearGradient><linearGradient id="__UID__Unbenannter_Verlauf_291" x1="38.6" y1="205" x2="220.3" y2="120.2" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_292" x1="33" y1="193" x2="214.8" y2="108.3" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_293" x1="-3.5" y1="114.7" x2="178.3" y2="30" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_294" x1="4.5" y1="131.8" x2="186.2" y2="47.1" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_295" x1="28.6" y1="183.6" x2="210.4" y2="98.9" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_296" x1="3.8" y1="130.3" x2="185.5" y2="45.5" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_297" x1="18" y1="160.6" x2="199.7" y2="75.9" href="#__UID__Unbenannter_Verlauf_29"/>`;
+const MARK_PATHS = `<path fill="url(#__UID__Unbenannter_Verlauf_29)" d="M67.3,19.9c11.2-2.3,22.5-1,32.1,1.5.8.2,1.2-.8.5-1.3-11.6-7.3-20.9-11.4-26.6-13.5l-18.3,4.9c-3.4.9-6.4,2.7-8.9,5.1l-29.6,29.6c-2.5,2.5-4.2,5.5-5.1,8.9l-.7,2.6c1.7-1.5,3.4-3.2,5.2-4.9,12.6-12,29.9-28.4,51.3-32.9Z"/><path fill="url(#__UID__Unbenannter_Verlauf_291)" d="M33.8,172.2l12.3,12.3c2.5,2.5,5.5,4.2,8.9,5.1l40.4,10.8c3.4.9,6.9.9,10.2,0l40.4-10.8c3.4-.9,6.4-2.7,8.9-5.1l2.8-2.8c-80-32.2-119-12.3-123.9-9.5Z"/><path fill="url(#__UID__Unbenannter_Verlauf_292)" d="M97.7,137.4c-25.1.2-51.1.4-78.8,19.8l10.5,10.5h.1c2-1.5,42.4-27.9,132.8,9.1h.2c0,.1,18.6-18.4,18.6-18.4-7.8-2.8-58.6-21-83.1-21h-.3Z"/><path fill="url(#__UID__Unbenannter_Verlauf_293)" d="M137.2,41h0c2.6,2.4,5.3,5,8,7.7,26.3,26.3,43.8,37.2,53.9,41.8l-9.5-35.5c-.9-3.4-2.7-6.4-5.1-8.9l-29.6-29.6c-2.5-2.5-5.5-4.2-8.9-5.1L105.7.7c-3.4-.9-6.9-.9-10.2,0l-12.1,3.2c12.4,5.6,31.5,16.5,53.7,37,0,0,.1.1.2.2Z"/><path fill="url(#__UID__Unbenannter_Verlauf_294)" d="M132.7,86.1c4.9,1.6,26.3,12,26.3,12,1.7.7,7.3,3.3,8.9,4.1.7.3,1.3-.6.8-1.1-1.5-1.4-5.8-5-10.9-8.6,0,0-21.8-15.4-27.2-18.5-7.8-4.3-47.4-26.7-81.3-10C25.8,75.6,8,89.7.6,96c-.8,3.2-.7,6.5.1,9.7l3.4,12.8c7.2-6.7,20.2-17.2,40.4-28.2,35.4-19.2,61.9-12.8,88.2-4.2Z"/><path fill="url(#__UID__Unbenannter_Verlauf_295)" d="M55.9,128c-3.1,1.7-17.5,10.3-17.5,10.3,0,0-4.9,3-.2,1.9,2-.5,7.8-3.1,9.7-3.6,0,0,19.1-7,49.8-5.4.1,0,.2,0,.4,0,27.6,0,84.2,21,86.6,21.9l1.1.5c1.8-2.2,3.2-4.7,3.9-7.5l2.7-10.2c-14.1-5.9-55.1-22.3-81-22.3s-55.3,14.3-55.5,14.4Z"/><path fill="url(#__UID__Unbenannter_Verlauf_296)" d="M131.7,44.5c-2-1.7-4.9-3.9-8.5-6.3-1.8-1.3-3.6-2.3-5.4-3.2-8.1-4.1-29.1-13.1-49.2-9-19.7,4.1-35.5,19.2-48.2,31.3-4.7,4.5-8.7,8.3-12.4,11.1l-4.6,17.2c9.4-7.4,24.4-18,43.2-27.2,36.9-18.1,79.2,5.4,87.3,10.3,12.1,7.3,47.9,34.4,64,46.8l2.6-9.8c.7-2.5.8-5,.5-7.5-10.4-3.8-29.7-14.5-60.2-45-3.1-3.1-6.1-5.9-9.1-8.6Z"/><path fill="url(#__UID__Unbenannter_Verlauf_297)" d="M47.5,95.8c-22.1,12-35.5,23.6-41.5,29.6l5.5,20.7c.3,1.2.8,2.4,1.4,3.5,9.5-9.3,38.6-26.3,39.8-27,1-.6,25.6-15.3,58.7-15.3s67.5,16,82.6,22.4l1.1-4.2c-9.9-6.7-37.4-24.5-64.4-33.5-24.9-8.3-50-14.3-83.2,3.8Z"/>`;
+/** Gradient <defs> for the mark, namespaced with `uid`. */
+function markDefs(uid) {
+  return MARK_DEFS.replace(/__UID__/g, uid);
+}
+/**
+ * The mark paths wrapped in a positioned, scaled group.
+ * The source artwork lives in a ~201×201 canvas; `size` is the rendered px.
+ */
+function markGroup(uid, x, y, size = 16) {
+  const s = (size / 201.1).toFixed(4);
+  const paths = MARK_PATHS.replace(/__UID__/g, uid);
+  return `<g transform="translate(${x},${y}) scale(${s})">${paths}</g>`;
+}
+const edsTrlBadgeCss = ":host{display:inline-block;line-height:0;}.link{display:inline-block;line-height:0;text-decoration:none;color:inherit}.link svg{display:block}";
+const EdsTrlBadgeStyle0 = edsTrlBadgeCss;
+let _uid = 0;
+const EdsTrlBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Per-instance suffix so the mark's gradient ids never collide. */
+    this.uid = `trl${++_uid}-`;
+    this.level = undefined;
+    this.assessed = undefined;
+    this.methodology = undefined;
+    this.theme = 'dark';
+    this.variant = 'tone';
+    this.size = undefined;
+    this.label = 'EBRAINS TRL';
+    this.href = undefined;
+  }
+  esc(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+  /** Maturity tier → value/pip colour (brand palette). */
+  levelColor() {
+    const n = Number(this.level);
+    if (n >= 7) return '#00FF9D';
+    if (n >= 4) return '#00C87B';
+    return '#7A7B7A';
+  }
+  /** Readable value text on a coloured segment (black on green, light on grey). */
+  valueText() {
+    return Number(this.level) >= 4 ? '#07140D' : '#ECECEC';
+  }
+  fullText() {
+    const parts = [`${this.label} ${this.level}`];
+    if (this.assessed) parts.push(`assessed ${this.assessed}`);
+    if (this.methodology) parts.push(`methodology ${this.methodology}`);
+    return parts.join(' · ');
+  }
+  /** Build the inner markup + intrinsic dimensions for the chosen variant. */
+  build() {
+    const CW = EdsTrlBadge.CW;
+    const uid = this.uid;
+    const clip = `${uid}clip`;
+    const valColor = this.levelColor();
+    const logoSpace = 28; // 8 margin + ~16 mark + 4 gap
+    const mono = `font-family="'IBM Plex Mono',monospace"`;
+    const lvl = this.esc(String(this.level));
+    if (this.variant === 'full') {
+      const tail = (this.assessed ? ` · assessed ${this.esc(this.assessed)}` : '') + (this.methodology ? ` · methodology ${this.esc(this.methodology)}` : '');
+      const w = Math.ceil(logoSpace + this.fullText().length * CW + 10);
+      const inner = `<defs><clipPath id="${clip}"><rect width="${w}" height="24" rx="6"/></clipPath>${markDefs(uid)}</defs>` + `<g clip-path="url(#${clip})"><rect width="${w}" height="24" fill="#07140D"/></g>${markGroup(uid, 8, 4, 16)}` + `<text x="30" y="15.5" ${mono} font-size="11" letter-spacing=".2">` + `<tspan fill="#ECECEC">${this.esc(this.label)} </tspan>` + `<tspan fill="${valColor}" font-weight="600">${lvl}</tspan>` + `<tspan fill="#7A7B7A">${this.esc(tail)}</tspan></text>`;
+      return {
+        w,
+        h: 24,
+        inner
+      };
+    }
+    if (this.variant === 'pill') {
+      const txt = `TRL ${this.level}`;
+      const w = Math.ceil(logoSpace + txt.length * CW + 14);
+      const tx = logoSpace + (w - logoSpace) / 2 - 4;
+      const inner = `<defs>${markDefs(uid)}</defs>` + `<rect width="${w}" height="24" rx="12" fill="#07140D"/>${markGroup(uid, 7, 4, 16)}` + `<text x="${tx}" y="16" ${mono} font-size="11" font-weight="500" letter-spacing=".5" text-anchor="middle">` + `<tspan fill="#ECECEC">TRL </tspan><tspan fill="${valColor}" font-weight="600">${lvl}</tspan></text>`;
+      return {
+        w,
+        h: 24,
+        inner
+      };
+    }
+    if (this.variant === 'outline') {
+      const dark = this.theme !== 'light';
+      const bg = dark ? '#0c1c14' : '#ffffff';
+      const stroke = dark ? '#34473d' : '#07140D';
+      const labelColor = dark ? '#ECECEC' : '#07140D';
+      const sep = dark ? '#5a6b62' : '#9aa39d';
+      const value = dark ? valColor : Number(this.level) >= 4 ? '#00966a' : '#7A7B7A';
+      const w = Math.ceil(logoSpace + (this.label + ' · ' + this.level).length * CW + 12);
+      const inner = `<defs>${markDefs(uid)}</defs>` + `<rect x=".5" y=".5" width="${w - 1}" height="23" rx="6" fill="${bg}" stroke="${stroke}"/>${markGroup(uid, 8, 4, 16)}` + `<text x="30" y="16" ${mono} font-size="11" letter-spacing=".3">` + `<tspan fill="${labelColor}">${this.esc(this.label)} </tspan>` + `<tspan fill="${sep}">· </tspan>` + `<tspan fill="${value}" font-weight="600">${lvl}</tspan></text>`;
+      return {
+        w,
+        h: 24,
+        inner
+      };
+    }
+    if (this.variant === 'scale') {
+      const dark = this.theme !== 'light';
+      const bg = dark ? '#07140D' : '#ECECEC';
+      const labelColor = dark ? '#ECECEC' : '#07140D';
+      const emptyPip = dark ? '#2f4339' : '#c4ccc7';
+      const sep = dark ? '#5a6b62' : '#9aa39d';
+      const n = Math.max(0, Math.min(9, Number(this.level) || 0));
+      const pipStart = Math.ceil(30 + this.label.length * CW + 12);
+      const pipStep = 9,
+        pipW = 6,
+        pipH = 8,
+        pipY = 9;
+      let pips = '';
+      for (let i = 0; i < 9; i++) {
+        const x = pipStart + i * pipStep;
+        pips += `<rect x="${x}" y="${pipY}" width="${pipW}" height="${pipH}" rx="1" fill="${i < n ? valColor : emptyPip}"/>`;
+      }
+      const valueX = pipStart + 9 * pipStep + 5;
+      const w = Math.ceil(valueX + `${this.level}/9`.length * CW + 8);
+      const inner = `<defs>${markDefs(uid)}</defs>` + `<rect width="${w}" height="26" rx="6" fill="${bg}"/>${markGroup(uid, 8, 5, 16)}` + `<text x="30" y="17" ${mono} font-size="11" letter-spacing=".3" fill="${labelColor}">${this.esc(this.label)}</text>` + `<g>${pips}</g>` + `<text x="${valueX}" y="17" ${mono} font-size="11" font-weight="500">` + `<tspan fill="${valColor}">${lvl}</tspan><tspan fill="${sep}">/9</tspan></text>`;
+      return {
+        w,
+        h: 26,
+        inner
+      };
+    }
+    // tone (default) — dark or light theme
+    const dark = this.theme !== 'light';
+    const labelBg = dark ? '#07140D' : '#ECECEC';
+    const labelTextColor = dark ? '#ECECEC' : '#07140D';
+    const valTextColor = dark ? this.valueText() : '#07140D';
+    const labelSegW = Math.ceil(logoSpace + this.label.length * CW + 12);
+    const valSegW = Math.ceil(12 + String(this.level).length * CW + 12);
+    const w = labelSegW + valSegW;
+    const inner = `<defs><clipPath id="${clip}"><rect width="${w}" height="24" rx="6"/></clipPath>${markDefs(uid)}</defs>` + `<g clip-path="url(#${clip})"><rect width="${labelSegW}" height="24" fill="${labelBg}"/>` + `<rect x="${labelSegW}" width="${valSegW}" height="24" fill="${valColor}"/></g>${markGroup(uid, 8, 4, 16)}` + `<text x="${logoSpace + (labelSegW - logoSpace) / 2}" y="16" ${mono} font-size="11" letter-spacing=".4" fill="${labelTextColor}" text-anchor="middle">${this.esc(this.label)}</text>` + `<text x="${labelSegW + valSegW / 2}" y="16" ${mono} font-size="11" font-weight="600" fill="${valTextColor}" text-anchor="middle">${lvl}</text>`;
+    return {
+      w,
+      h: 24,
+      inner
+    };
+  }
+  buildSvg() {
+    const {
+      w,
+      h,
+      inner
+    } = this.build();
+    const aria = this.esc(this.fullText());
+    const k = this.size ? this.size / h : 1;
+    const outW = Math.round(w * k);
+    const outH = Math.round(h * k);
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${outW}" height="${outH}" ` + `viewBox="0 0 ${w} ${h}" role="img" aria-label="${aria}"><title>${aria}</title>${inner}</svg>`;
+  }
+  render() {
+    const svg = this.buildSvg();
+    return h(Host, {
+      key: 'eddfb49f35ff9771d76eef13a024b840b3a24cca'
+    }, this.href ? h("a", {
+      class: "link",
+      href: this.href,
+      "aria-label": this.fullText(),
+      innerHTML: svg
+    }) : h("span", {
+      class: "link",
+      innerHTML: svg
+    }));
+  }
+};
+// IBM Plex Mono advance width at 11px (used to size segments to the text).
+EdsTrlBadge.CW = 6.8;
+EdsTrlBadge.style = EdsTrlBadgeStyle0;
+
+export { EdsTrlBadge as eds_trl_badge };

package/eu-8ac3e99c.esm.js

@@ -0,0 +1,7 @@
+const euSvg = `<svg width="63" height="50" viewBox="0 0 640 480" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 0h640v480H0V0z" fill="#039"/>
+  <path d="M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z" fill="#FC0"/>
+</svg>
+`;
+
+export { euSvg as e };