@ebrains/react 0.4.0-alpha.0 → 0.6.0-alpha.0

package/eds-alert.entry.esm.js

@@ -0,0 +1,104 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { c as cva } from './index-39c58238.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsAlertCss = ":root {\n  font-optical-sizing: auto;\n}\nhtml,\nbody {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n/*\n:focus[data-focus-method=\"mouse\"],\n:focus[data-focus-method=\"touch\"] {\n  outline: none !important;\n}\n*/\n/*FADE*/\n/*FADE TRANSLATE Y*/\n/*SLIDE LEFT*/\n/*SLIDE BOTTOM*/\n/*COLLAPSE Y*/\n*, ::before, ::after {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\n::backdrop {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\n/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n::before,\n::after {\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n  font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n  font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n  text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n  resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\niframe,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg {\n  max-width: 100%;\n  height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n:root {\n  --inner-gutter: 8px;\n}\n@media (min-width: 750px) {\n  :root {\n    --inner-gutter: 12px;\n  }\n}\n@media (min-width: 900px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n@media (min-width: 1024px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n@media (min-width: 1280px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n@media (min-width: 2200px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n:root {\n}\n@media (min-width: 900px) {\n  :root {\n}\n}\n:root {\n  --sans: Inter, Helvetica, Arial, sans-serif;\n  --f-ui-01-fontFamily: var(--sans);\n  --f-ui-01-fontWeight: 800;\n  --f-ui-01-fontSize: 18px;\n  --f-ui-01-lineHeight: 110%;\n  --f-ui-01-letterSpacing: -0.01em;\n}\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n@media (min-width: 750px) {\n  :root {\n}\n}\n@media (min-width: 900px) {\n  :root {\n}\n}\n@media (min-width: 1024px) {\n  :root {\n}\n}\n.f-ui-01 b, .f-ui-01 strong {\n  font-weight: var(--f-ui-01---bold-weight, bold);\n}\n:root {\n  --grey-300: #e6e6e6;\n  --green-200: #d3ffdc;\n  --yellow-200: #ffffcb;\n  --red-200: #ffe0e1;\n}\n@media (min-width: 750px) {\n  .md\\:grid-line-x > *::before {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .md\\:grid-line-xfull > *::before {\n    content: attr(👻);\n    inset-inline-start: calc(var(--inner-gutter) / -2);\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .md\\:grid-line-x-0 > *::before {\n    content: none;\n  }\n  .md\\:grid-line-y > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .md\\:grid-line-yfull > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: calc(var(--inner-gutter) / -1);\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .md\\:grid-line-y-0 > *::after {\n    content: none;\n  }\n}\n@media (min-width: 900px) {\n  .lg\\:grid-line-x > *::before {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .lg\\:grid-line-xfull > *::before {\n    content: attr(👻);\n    inset-inline-start: calc(var(--inner-gutter) / -2);\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .lg\\:grid-line-x-0 > *::before {\n    content: none;\n  }\n  .lg\\:grid-line-y > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .lg\\:grid-line-yfull > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: calc(var(--inner-gutter) / -1);\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .lg\\:grid-line-y-0 > *::after {\n    content: none;\n  }\n}\n.border-inside {\n  position: relative;\n\n    &::after {\n    pointer-events: none;\n  }\n\n    &::after {\n    position: absolute;\n  }\n\n    &::after {\n    inset: 0rem;\n  }\n\n    &::after {\n    z-index: 1;\n  }\n\n    &::after {\n    border-radius: 8px;\n  }\n\n    &::after {\n    border-width: 1px;\n  }\n\n    &::after {\n    border-width: 2px;\n  }\n\n    &::after {\n    border-color: rgba(0, 0, 0, .1 );\n  }\n\n    &::after {\n      content: '';\n    }\n}\n/** region TRANSITIONS */\n/** endregion */\n/* region FOCUS */\n/* endregion */\n/* region BG */\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.flex {\n  display: flex;\n}\n.w-full {\n  width: 100%;\n}\n.flex-row {\n  flex-direction: row;\n}\n.items-center {\n  align-items: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-x-12 {\n  -moz-column-gap: 0.75rem;\n       column-gap: 0.75rem;\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.rounded-lg {\n  border-radius: 16px;\n}\n.bg-dark {\n  background-color: var(--grey-300);\n}\n.bg-error {\n  background-color: var(--red-200);\n}\n.bg-success {\n  background-color: var(--green-200);\n}\n.bg-warning {\n  background-color: var(--yellow-200);\n}\n.p-16 {\n  padding: 1rem;\n}\n.p-20 {\n  padding: 1.25rem;\n}\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-20 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.py-12 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-20 {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.pr-12 {\n  padding-right: 0.75rem;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n[class*=underline-] {\n  text-decoration-line: underline;\n}\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n.after\\:border-softest::after {\n  border-color: rgba(0, 0, 0, .05 );\n}\n";
+const EdsAlertStyle0 = edsAlertCss;
+const alertStyles = cva(['w-full bg-dark rounded-lg border-inside after:border-softest after:rounded-lg'], {
+  variants: {
+    intent: {
+      default: '',
+      warning: 'bg-warning',
+      error: 'bg-error',
+      success: 'bg-success'
+    },
+    direction: {
+      vertical: 'space-y-12',
+      horizontal: 'flex flex-row items-center justify-between gap-x-12'
+    },
+    withBtn: {
+      false: '',
+      true: ''
+    }
+  },
+  compoundVariants: [{
+    direction: 'horizontal',
+    withBtn: true,
+    class: 'px-20 pr-12 py-12'
+  }, {
+    direction: 'horizontal',
+    withBtn: false,
+    class: 'p-20'
+  }, {
+    direction: 'vertical',
+    withBtn: true,
+    class: 'p-16'
+  }, {
+    direction: 'vertical',
+    withBtn: false,
+    class: 'px-12 py-20'
+  }],
+  defaultVariants: {
+    intent: 'default',
+    direction: 'horizontal'
+  }
+});
+const EdsAlert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.message = undefined;
+    this.pressableLabel = undefined;
+    this.pressableUrl = undefined;
+    this.direction = 'horizontal';
+    this.intent = 'default';
+    this.withBtn = false;
+  }
+  componentWillLoad() {
+    this.withBtn = Boolean(this.pressableLabel);
+  }
+  componentDidLoad() {
+    var _a;
+    // Query for the 'eds-link' element inside the shadow root.
+    const lnk = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('eds-link');
+    if (lnk) {
+      this.emitContext(lnk);
+    }
+  }
+  emitContext(linkElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  render() {
+    return h("div", {
+      key: '519742081f681d6d67bc1b42c89fe1b6d005fe0f',
+      class: alertStyles({
+        intent: this.intent,
+        direction: this.direction,
+        withBtn: this.withBtn
+      }),
+      role: "alert"
+    }, h("p", {
+      key: '6a5d11fdc2a975512b12c307286b0a8b06998bec',
+      class: "f-ui-01 py-8"
+    }, this.message), this.withBtn && (this.pressableUrl ? h("eds-link", {
+      class: "eds-alert-link",
+      label: this.pressableLabel,
+      url: this.pressableUrl,
+      intent: "secondary",
+      external: true
+    }) : null));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsAlert.style = EdsAlertStyle0;
+
+export { EdsAlert as eds_alert };

package/eds-block-break.entry.esm.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsBlockBreakCss = ".border-soft{border-color:rgba(0, 0, 0, .15)}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-softest{border-color:rgba(0, 0, 0, .05)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.w-full{width:100%}.border-t-2{border-top-width:2px}";
+const EdsBlockBreakStyle0 = edsBlockBreakCss;
+const EdsBlockBreak = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.extraClass = '';
+  }
+  render() {
+    return h("hr", {
+      key: '8cb39dda5d7f909b459390fe7e3f86dfd147ba98',
+      class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}`
+    });
+  }
+};
+EdsBlockBreak.style = EdsBlockBreakStyle0;
+
+export { EdsBlockBreak as eds_block_break };

package/eds-breadcrumb.entry.esm.js

@@ -0,0 +1,182 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsBreadcrumbCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}";
+const EdsBreadcrumbStyle0 = edsBreadcrumbCss;
+const EdsBreadcrumb = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Updates the maximum number of visible items and tracks if the screen is small.
+     */
+    this.updateScreenSize = () => {
+      const width = window.innerWidth;
+      if (width < 769) {
+        this.maxVisibleItems = 3;
+        this.isSmallScreen = true;
+      } else if (width <= 1024) {
+        this.maxVisibleItems = 4;
+        this.isSmallScreen = true;
+      } else {
+        this.maxVisibleItems = 6;
+        this.isSmallScreen = false;
+      }
+    };
+    this.items = [];
+    this.intent = 'ghost';
+    this.parsedItems = [];
+    this.isSmallScreen = false;
+    this.maxVisibleItems = 6;
+  }
+  /**
+   * Watches for changes to the `items` prop and parses it.
+   */
+  parseItems(newValue) {
+    if (typeof newValue === 'string') {
+      try {
+        const parsed = JSON.parse(newValue);
+        this.parsedItems = Array.isArray(parsed) ? parsed : [];
+      } catch (e) {
+        //console.error('Error parsing breadcrumb items:', e);
+        this.parsedItems = [];
+      }
+    } else if (Array.isArray(newValue)) {
+      this.parsedItems = newValue;
+    } else {
+      this.parsedItems = [];
+    }
+  }
+  /**
+   * Lifecycle method that runs when the component is about to be loaded.
+   * It parses the initial `items` prop value.
+   */
+  componentWillLoad() {
+    this.parseItems(this.items);
+    this.updateScreenSize();
+    window.addEventListener('resize', this.updateScreenSize);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.updateScreenSize);
+  }
+  /**
+   * Lifecycle method that runs when the component has fully loaded.
+   * It emits a custom event for each `eds-link` element contained within the breadcrumb.
+   */
+  componentDidLoad() {
+    var _a;
+    const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link');
+    links === null || links === void 0 ? void 0 : links.forEach(link => {
+      this.emitContext(link);
+    });
+  }
+  /**
+   * Emits a custom event called `parentContext` for a given link element.
+   * This event provides context information about the breadcrumb component.
+   *
+   * @param linkElement - The link element to which the event will be dispatched.
+   */
+  emitContext(linkElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  /**
+   * Returns breadcrumb items with potential truncation if there are too many.
+   * It inserts an ellipsis item where necessary.
+   */
+  getTruncatedItems() {
+    const totalItems = this.parsedItems.length;
+    const ellipsis = {
+      label: '...',
+      url: '',
+      isHidden: true
+    };
+    if (totalItems > this.maxVisibleItems) {
+      const firstItem = this.parsedItems[0];
+      const lastItems = this.parsedItems.slice(-2);
+      if (this.maxVisibleItems === 3) {
+        return [firstItem, ellipsis, ...lastItems];
+      } else if (this.maxVisibleItems === 4) {
+        const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
+        return [firstItem, middleItem, ellipsis, ...lastItems];
+      }
+    }
+    return this.parsedItems;
+  }
+  /**
+   * Helper to determine the display label and full label.
+   * If the label is longer than 15 characters and the item is not the current (last) item,
+   * we display a truncated version but use the full label for aria attributes.
+   */
+  getLabels(item, isCurrent) {
+    if (!isCurrent && item.label.length > 15) {
+      return {
+        displayLabel: `${item.label.slice(0, 15)}...`,
+        fullLabel: item.label
+      };
+    }
+    return {
+      displayLabel: item.label,
+      fullLabel: item.label
+    };
+  }
+  /**
+   * Render method for the breadcrumb component.
+   * It creates a navigation element with an ordered list of breadcrumb links.
+   * The last link is marked as the current page.
+   */
+  render() {
+    const itemsToRender = this.getTruncatedItems();
+    return h("nav", {
+      key: 'd177957e1b3218c21991bbdc9636a8e32befe990',
+      "aria-label": "Breadcrumb"
+    }, h("ol", {
+      key: 'd10336ddee99b9fb84d17e53093c57c6a025982f',
+      class: "flex items-center space-x-2"
+    }, itemsToRender.map((item, index) => {
+      const isLast = index === itemsToRender.length - 1;
+      return h("li", {
+        class: "flex items-center"
+      }, !item.isHidden ? (() => {
+        const {
+          displayLabel,
+          fullLabel
+        } = this.getLabels(item, isLast);
+        return h("eds-link", Object.assign({
+          label: displayLabel,
+          url: item.url,
+          intent: this.intent,
+          current: isLast,
+          "aria-label": fullLabel,
+          size: "small",
+          "icon-small": "false"
+        }, isLast ? {
+          'aria-current': 'page'
+        } : {}));
+      })() : h("span", {
+        class: "truncate px-2",
+        "aria-hidden": "true"
+      }, "..."), !isLast && !item.isHidden && h("eds-icon-wrapper", {
+        icon: "chevron-right",
+        class: "w-20 h-20"
+      }));
+    })));
+  }
+  get el() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "items": ["parseItems"]
+    };
+  }
+};
+EdsBreadcrumb.style = EdsBreadcrumbStyle0;
+
+export { EdsBreadcrumb as eds_breadcrumb };

package/eds-card-project.entry.esm.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics, g as gradientBGColorVariants } from './color-bb472c37.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
+import { g as gradientBGColorVariants } from './color-2554aad6.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -49,38 +50,38 @@ const EdsCardProject = class {
     }) : 'bg-default', this.bgOnHover && this.color ? 'effect-background bg-default focus-within:bg-transparent hover:bg-transparent' : 'effect-background hover:bg-default', this.vertical ? 'flex-col gap-y-16' : 'flex-col gap-x-16 gap-y-12 lg:flex-row'].join(' ');
     const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
     return h("article", {
-      key: '6af49754300ded8748ac3f40175e262480054969',
+      key: '98c5dbd033ec05d08965559e00f32d9fe18698ef',
       class: cardClasses,
       onClick: event => this.handleClick(event)
     }, h("div", {
-      key: '91e8501312957c44d9dc075f2ec3a9e5a5d425cb',
+      key: 'e083c43e38c3c24fcd996a90267f7cd92d3651b3',
       class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}`
     }, h("div", {
-      key: '44e3cf2d67255bb5669b6c721741ed060ba599e7',
+      key: '37de1e46023b533fd8595a3077c4e68c11fb01af',
       class: "lg:max-w-[720px]"
     }, h("eds-card-title", {
-      key: '0cf1d124b975e4d7223bab58db0d5861d348ceb2',
+      key: 'ee31ae2804d2c17c82e8f4c0c3269ac8254331df',
       "heading-level": this.headingLevel,
       titleClass: this.image ? 'f-ui-01' : undefined,
       "card-title": this.titleProject,
       url: this.url
     }), this.editorialTitle && h("span", {
-      key: '85e1158691ae876bc0f3c6d0c5557f394ae935cb',
+      key: 'c6f74ba9b5b522f713e25d3339f541efa68cdddd',
       class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}`
     }, this.editorialTitle)), this.categoryTitle && h("div", {
-      key: '9ffdc9f14709600b623c3a5f878b2700864ced79',
+      key: 'ab18e55046777cf4a4f58ebd057641db9b9e0328',
       class: "mt-auto flex items-center gap-x-12 pt-12"
     }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", {
-      key: 'ecc5e55430df355c13420add9969855d1d54c27f',
+      key: '3714ee86a74dce7f33a8f953fd726db349ba9271',
       label: this.categoryTitle
     }))), this.parsedImage && h("div", {
-      key: '97de7a06a13d9843cb18fe4eb19303f436e2ce16',
+      key: '2818d15f7ab671b7b2dfb34ec3085b390150f38d',
       class: imageClasses
     }, h("div", {
-      key: '532d3c8252316a68976b4587c3d5b63167c0c598',
+      key: '5166feef3674631298f699449b956655f38f0db9',
       class: "aspect-1x1 w-full"
     }, h("eds-img", Object.assign({
-      key: '37ee3dbbc99ec8c9139b0a89f9c725768eac5f6d',
+      key: '86555a43491da5b2aa3b287e539e603a2c2adaf3',
       sizes: this.vertical ? this.parsedImage.sizes || '' : '192px'
     }, this.parsedImage)))));
   }

package/eds-card-tags.entry.esm.js

@@ -13,7 +13,7 @@ const EdsCardTags = class {
   }
   render() {
     return h("div", {
-      key: '60a129de62d45736eba0884cc24c9738f3a0f55c',
+      key: '272d53abb9be9086881cb2f8e99f7fb7aae1bb59',
       class: "flex flex-wrap gap-y-4"
     }, this.tags.map((tag, index) => h("eds-tag", {
       key: index,

package/eds-card-tool.entry.esm.js

@@ -1,9 +1,8 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './color-bb472c37.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
-import './index-39c58238.esm.js';
 
 const edsCardToolCss = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15 )}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}";
 const EdsCardToolStyle0 = edsCardToolCss;
@@ -63,11 +62,11 @@ const EdsCardTool = class {
   }
   render() {
     return h("article", {
-      key: 'b46c0464688e45ab29f5b58b6cd2e22ed28e1034',
+      key: 'da61b384e966b148cd1f77eec59671bc4d92e259',
       class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`,
       onClick: () => this.handleClick()
     }, h("eds-card-title", {
-      key: 'a4da791280db14754b445b1a52e33cc9a25f765e',
+      key: '00702d032bc25f52b2a2c98255ceb60a1d314f4d',
       "heading-level": this.headingLevel,
       titleClass: this.image ? 'f-ui-01' : undefined,
       "card-title": this.cardTitle,
@@ -75,7 +74,7 @@ const EdsCardTool = class {
       "external-link": this.external,
       hierarchy: this.hierarchy
     }), this.description && h("eds-card-desc", {
-      key: '86f7c6c80b83f244ba7d07d820d5793e1dda2933',
+      key: 'd2b135ed422fb64f142af71330dc666e2f0c2b1f',
       class: "mt-8",
       "truncate-lines": "3",
       description: this.description
@@ -89,7 +88,7 @@ const EdsCardTool = class {
       picture: this.avatar,
       initials: this.shortAbbreviation
     }) : null, h("div", {
-      key: '46307b57160f908aa7066b2a636c4db38e0e7a8e',
+      key: '54111e90175754cb0c1f2eb339e86926914ca0e7',
       class: "flex flex-wrap gap-y-4"
     }, this.parsedTags.map((tag, index) => h("eds-tag", {
       key: index,

package/eds-card-wrapper.entry.esm.js

@@ -19,15 +19,15 @@ const EdsCardWrapper = class {
   render() {
     const articleClasses = [this.tiny ? 'min-h-120' : 'min-h-156', this.withBg ? 'bg-inverse' : 'bg-default', this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '', 'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'].join(' ');
     return h("article", {
-      key: '7c12b1d147f061e189b5dda5d517ec4eae0c3691',
+      key: 'f21cc9703011026652765b399e2b87b1ef80d220',
       class: articleClasses
     }, h("slot", {
-      key: 'f506bad73ed38ae36931f88f7d7c5f5d94705e4f'
+      key: '9a37adad73d2d49edcc9ca9222d5b188202c5612'
     }), this.hasSlot('footer') && h("div", {
-      key: '783f480be269e4a2f61aa8d4396e757fe41bfcc6',
+      key: '87addfc052ed4ae33736724fbd8fbc8aca873b4d',
       class: "mt-auto"
     }, h("slot", {
-      key: 'f07ddaa2d930518a5c8ac82efab3cb0dd6647bdd',
+      key: '2e48677f42ac2aa951bc1a82afa9291fea3ddd72',
       name: "footer"
     })));
   }

package/eds-code-block.entry.esm.js

@@ -2242,15 +2242,15 @@ const EdsCodeBlock = class {
       return Prism$1.highlight(this.code, Prism$1.languages[this.language], this.language);
     }
     // eslint-disable-next-line
-    console.warn(`Unsupported or missing language: ${this.language}`);
+    //console.warn(`Unsupported or missing language: ${this.language}`);
     return this.code; // Fallback if language is not provided or unsupported
   }
   render() {
     return h("div", {
-      key: '00eba9265ee17605f699d1e5606013b68e900b29',
+      key: 'cb379e82bcf71345945b0b88397650ecd4992770',
       class: "relative bg-stronger rounded-sm"
     }, h("div", {
-      key: '1192584f04de5ff74e91c88597a3360b92053456',
+      key: '945046d4fd747cd64a83155b421a897e380cc612',
       class: "text-inverse flex justify-between items-center p-8"
     }, this.language ? h("span", {
       class: "f-ui-03"
@@ -2261,23 +2261,23 @@ const EdsCodeBlock = class {
     }, h("code", {
       innerHTML: this.getHighlightedCode()
     })), h("span", {
-      key: '3666b6529a16a8cc64f448527db4ddee08f977a3',
+      key: '3f6c7e996101f0bb83fb8c9e6991a205a0b268c8',
       "aria-hidden": "true",
       class: "w-20 h-20 mt-8"
     }, h("eds-icon-wrapper", {
-      key: 'f222d95a2e548429f6c4de96a7646e3cef1f360f',
+      key: '8ad9beb61058f29e688f6777233c61f7fb3ccfe8',
       icon: this.copied ? 'success' : 'copy',
       onClick: () => this.copyToClipboard()
     })), h("span", {
-      key: '8c539deda773909c01a41eb04ee51380c0a9c4bb',
+      key: 'a4f9a07906e1c2d9febb7ae789a3eed76dc422e9',
       class: "sr-only"
     }, "Copy Code")), this.language && h("pre", {
-      key: '99541dedb32c543da5e780ffee4460333fbb3724',
+      key: 'e31339126dd3cc885511aaa2bdf6f06f3a113c74',
       class: `language-${this.language} bg-stronger pl-8 pb-8`,
       role: "region",
       "aria-label": `Code block in ${this.language}`
     }, h("code", {
-      key: '4e6ae6fcfae3de8c1fe5ad9d22309e0c8bee0c2c',
+      key: '7efacd276f26a00f0f61793f6b8748259e1614b5',
       innerHTML: this.getHighlightedCode()
     })));
   }

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

@@ -45,6 +45,18 @@ const EdsDocsInstallation = () => h("div", null, h("p", null, "Before proceeding
   code: "npm install @ebrains/react",
   language: "html",
   "copy-label": "Copy Code"
+})), h("div", {
+  class: "my-8"
+}, h("eds-code-block", {
+  code: "npm install @ebrains/vue",
+  language: "html",
+  "copy-label": "Copy Code"
+})), h("div", {
+  class: "my-8"
+}, h("eds-code-block", {
+  code: "npm install @ebrains/angular",
+  language: "html",
+  "copy-label": "Copy Code"
 })));
 const EdsDocsReact = () => h("div", null, h("h2", null, "React Wrappers"), h("p", null, "Learn how to use our components in a React Application.Simple install the package below and check out the examples"), h("div", {
   class: "my-8"
@@ -56,7 +68,7 @@ const EdsDocsReact = () => h("div", null, h("h2", null, "React Wrappers"), h("p"
   "section-title": "Example React App",
   "heading-level": "h3"
 }, h("eds-code-block", {
-  code: '\nimport { EdsHeader } from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  \n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    \n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    const handleTabChange = (\n      event: CustomEvent<{ index: number; name: string }>,\n    ) => {\n      console.log(event.detail);\n      setActiveTabIndex(event.detail.index);\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n    document.addEventListener("tabChange", handleTabChange as EventListener);\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n      document.removeEventListener(\n        "tabChange",\n        handleTabChange as EventListener,\n      );\n    };\n  }, []); // Empty dependency array ensures this runs only once after mounting\n\n  return (\n    <div id="main">\n      <EdsHeader\n        home-url="/"\n        user-feature={false}\n        keycloak-url="http://localhost:8080"\n        keycloak-realm="nigeor-realm"\n        keycloak-client-id="stencil-app"\n        links="[\n            { "label": "About", "url": "/about" },\n            { "label": "Focus Areas", "url": "/focus-areas" },\n            { "label": "News & Events", "url": "/news-and-events" },\n            { "label": "Contact", "url": "/contact" }\n          ]"\n      ></EdsHeader>\n\n      <div> \n        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n',
+  code: '\nimport {\n  EdsHeader,\n  EdsFullscreenMenu,\n  EdsUser\n} from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n  // Add any other properties your user object might have\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n    };\n  }, []);\n\n  return (\n    <div>\n      <EdsHeader\n        homeUrl="/"\n        menuEnabled={true}\n        inverseHeader={false}\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      >\n        <div className="px-16">\n          <EdsUser\n            keycloak-url="http://localhost:8080"\n            keycloak-realm="nigeor-realm"\n            keycloak-client-id="stencil-app"\n          ></EdsUser>\n        </div>\n      </EdsHeader>\n\n      <EdsFullscreenMenu\n        home-url="/"\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      ></EdsFullscreenMenu>\n      \n      <div>\n        User is{" "}\n        {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n\n      <div id="main"></div>\n    </div>\n  );\n}\n\nexport default App;\n\n',
   language: "javascript",
   "copy-label": "Copy Code"
 })));
@@ -137,7 +149,7 @@ const EdsComponentsSection = class {
   }
   render() {
     return h("div", {
-      key: 'ce34514ab73daa5baa011bda56a13d6197f8bfd0',
+      key: '7e582a0eeafc2687229454532b5a7f66f91c1856',
       class: "container"
     }, this.renderContent());
   }

package/eds-cookies-preference.entry.esm.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsCookiesPreferenceCss = "";
+const EdsCookiesPreferenceStyle0 = edsCookiesPreferenceCss;
+const EdsCookiesPreference = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.buttonText = 'Cookies Preferences';
+    this.intent = undefined;
+    this.showMatomoNotice = false;
+    this.noticeKey = 0;
+  }
+  /**
+   * Always shows the eds-matomo-notice popup.
+   * Every click removes the "matomo-deferred" key and forces a remount.
+   */
+  toggleCookiesPopup() {
+    // Remove the key from session storage so that the notice will run its checks (or be forced to show)
+    sessionStorage.removeItem('matomo-deferred');
+    if (this.showMatomoNotice) {
+      // Force a remount by changing the key
+      this.noticeKey = this.noticeKey + 1;
+    } else {
+      this.showMatomoNotice = true;
+    }
+  }
+  render() {
+    return h("div", {
+      key: 'ca5d44522f94e9ea009c657c5eae6e357cd0d13a'
+    }, h("eds-link", {
+      key: '563a369e2ed44d08a6dd47922c1c1c888e81543a',
+      size: "small",
+      intent: this.intent,
+      label: this.buttonText,
+      onClick: () => this.toggleCookiesPopup()
+    }), this.showMatomoNotice && h("eds-matomo-notice", {
+      "force-show": true,
+      key: this.noticeKey
+    }));
+  }
+};
+EdsCookiesPreference.style = EdsCookiesPreferenceStyle0;
+
+export { EdsCookiesPreference as eds_cookies_preference };

package/eds-docs-palettes.entry.esm.js

@@ -20,7 +20,7 @@ const EdsDocsPalettes = class {
   }
   render() {
     return h("div", {
-      key: '42f0a4598c64661d98054522e88366ec591a2cb3',
+      key: 'e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a',
       class: "container"
     }, this.renderContent());
   }

package/eds-docs-tokens.entry.esm.js

@@ -36,7 +36,7 @@ const EdsDocsContent = class {
   }
   render() {
     return h("div", {
-      key: '10708d591c4077e4e1fe94073322f01121253bdb',
+      key: 'b140f7650e5e01711dc0778b04af83f9d004efc7',
       class: "container"
     }, this.renderContent());
   }