@ebrains/react 0.0.1-alpha.0 → 0.2.0-alpha.0

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

@@ -0,0 +1,113 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsComponentsOverview = () => h("div", {
+  class: "static-content container"
+}, h("eds-alert", {
+  message: "EBRAINS Design System makes it easy to implement and use its components across any framework or no framework at all. We\n      accomplish this by using standardized web platform APIs and Web Components.",
+  intent: "default"
+}), h("h2", null, "Load the module"), h("p", null, "Integrating EDSs components to a project without a JavaScript framework is straight forward. If you\u2019re working on a simple HTML page, you can start using the components immediately by adding the tags below to the", ' ', h("code", null, "head"), "."), h("eds-code-block", {
+  code: '<script type="module" href="https://unpkg.com/@ebrains/components@0.0.1/loader"/></script>',
+  language: "javascript",
+  "copy-label": "Copy Code"
+}), h("h2", null, "Load the styles"), h("p", null, "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the", ' ', h("code", null, "head")), h("eds-code-block", {
+  code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/output.css"/>',
+  language: "css",
+  "copy-label": "Copy Code"
+}), h("h2", null, "Load the fonts"), h("p", null, "To load the correct webfonts as well, add either one of these tags to the ", h("code", null, "head")), h("eds-code-block", {
+  code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/base/fonts.css"/>',
+  language: "css",
+  "copy-label": "Copy Code"
+}), h("h2", null, "Component Usage"), h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"), h("eds-code-block", {
+  code: '<eds-button label="my bytton" intent="primary"></eds-button>',
+  language: "html",
+  "copy-label": "Copy Code"
+}));
+const EdsDocsInstallation = () => h("div", null, h("p", null, "To start using the EBRAINS Design System, include the following scripts and styles in your project. You can also install it via npm for use with modern build tools."), h("eds-code-block", {
+  code: "npm install @ebrains/components",
+  language: "html",
+  "copy-label": "Copy Code"
+}), h("p", null, "TBD"));
+const EdsDocsUsage = () => h("div", null, h("h1", null, "Usage with basic HTML "), h("p", null, "TBD"));
+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("eds-code-block", {
+  code: "npm install @ebrains/react",
+  language: "javascript",
+  "copy-label": "Copy Code"
+}), h("eds-section-core", {
+  "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  // 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\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',
+  language: "javascript",
+  "copy-label": "Copy Code"
+})));
+const EdsDocsVue = () => h("div", null, h("h2", null, "Vue Wrappers"), h("p", null, "Learn how to use our components in a Vue Application."), h("eds-code-block", {
+  code: "npm install @ebrains/vue",
+  language: "javascript",
+  "copy-label": "Copy Code"
+}), h("p", null, "Define the custom elements"), h("eds-code-block", {
+  code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();",
+  language: "javascript",
+  "copy-label": "Copy Code"
+}), h("eds-section-core", {
+  "section-title": "Example Vue App",
+  "heading-level": "h3"
+}, h("eds-code-block", {
+  code: '\n<template>\n  <h1 className="f-heading-02">Vue App</h1>\n\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</template>\n\n<script>\n\nimport { EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: {\n    EdsHeader,\n  }\n};\n</script>\n',
+  language: "javascript",
+  "copy-label": "Copy Code"
+})));
+const EdsDocsAngular = () => h("div", null, h("h2", null, "Angular Wrappers"), h("p", null, "Learn how to use our components in a Angular Application."), h("eds-code-block", {
+  code: "npm install @ebrains/angular",
+  language: "javascript",
+  "copy-label": "Copy Code"
+}), h("p", null, "Define the custom elements"), h("eds-code-block", {
+  code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();",
+  language: "javascript",
+  "copy-label": "Copy Code"
+}), h("p", null, "Angular Custom Elements Schema"), h("eds-code-block", {
+  code: 'import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";',
+  language: "javascript",
+  "copy-label": "Copy Code"
+}), h("eds-section-core", {
+  "section-title": "Example Angular App",
+  "heading-level": "h3"
+}, h("eds-code-block", {
+  code: '\n<div class="container">\n  <h1 class="f-heading-01">{{ title }}</h1>\n  <eds-breadcrumb\n    intent="tertiary"\n    items="[\n      { "label": "Home", "url": "#" },\n      { "label": "Products", "url": "#" },\n    ]">\n  </eds-breadcrumb>\n  <eds-footer></eds-footer>\n</div>',
+  language: "javascript",
+  "copy-label": "Copy Code"
+})));
+const EdsComponentsSection = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabIndex = undefined;
+  }
+  renderContent() {
+    switch (this.tabIndex) {
+      case 0:
+        return h(EdsComponentsOverview, null);
+      case 1:
+        return h(EdsDocsInstallation, null);
+      case 2:
+        return h(EdsDocsUsage, null);
+      case 3:
+        return h(EdsDocsReact, null);
+      case 4:
+        return h(EdsDocsVue, null);
+      case 5:
+        return h(EdsDocsAngular, null);
+      default:
+        return h("p", null, "Content not available.");
+    }
+  }
+  render() {
+    return h("div", {
+      key: 'faa14dc7bb5d966ea1328f60d8ca88b3c406ad51',
+      class: "container"
+    }, this.renderContent());
+  }
+};
+
+export { EdsComponentsSection as eds_components_section };

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

@@ -0,0 +1,29 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsDocsPalettes = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabIndex = undefined;
+  }
+  renderContent() {
+    switch (this.tabIndex) {
+      case 0:
+        return h("div", null, h("h2", null, "Primary Palette"), h("color-primary-palette", null), h("h2", null, "Secondary Palette"), h("color-secondary-palette", null), h("h2", null, "Support Palette"), h("color-support-palette", null));
+      case 1:
+        return h("div", null, h("h2", null, "Primary Palette"), h("gradient-primary-palette", null), h("h2", null, "Secondary Palette"), h("gradient-secondary-palette", null), h("h2", null, "Support Palette"), h("gradient-support-palette", null));
+      default:
+        return h("p", null, "Content not available.");
+    }
+  }
+  render() {
+    return h("div", {
+      key: 'c11e0de66c41770e7ebca46d3fb7ab11b454511e',
+      class: "container"
+    }, this.renderContent());
+  }
+};
+
+export { EdsDocsPalettes as eds_docs_palettes };

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsDocsContent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabIndex = undefined;
+  }
+  renderContent() {
+    switch (this.tabIndex) {
+      case 0:
+        return h("token-list", {
+          show: "background"
+        });
+      case 1:
+        return h("token-list", {
+          show: "text"
+        });
+      case 2:
+        return h("token-list", {
+          show: "border"
+        });
+      case 3:
+        return h("token-radii", null);
+      case 4:
+        return h("token-list", {
+          show: "outline"
+        });
+      case 5:
+        return h("token-shadows", null);
+      default:
+        return h("p", null, "Content not available.");
+    }
+  }
+  render() {
+    return h("div", {
+      key: 'ef9cf093af7bc730b73f3561b36187f70aea29a7',
+      class: "container"
+    }, this.renderContent());
+  }
+};
+
+export { EdsDocsContent as eds_docs_tokens };

package/eds-footer.entry.esm.js

@@ -0,0 +1,110 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsFooterCss = "";
+const EdsFooterStyle0 = edsFooterCss;
+const EdsFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Scrolls the page smoothly back to the top.
+     * Called when the "Back to top" button is clicked.
+     * @private
+     */
+    this.backToTop = () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    };
+    this.extraClass = '';
+    this.social = false;
+    this.hasCookiesSetUp = false;
+    this.enableScrollTop = false;
+    this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
+    this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
+    this.cookiesPreference = 'Cookies Preferences';
+  }
+  /**
+   * Toggles the cookie preferences popup, if available.
+   * The actual implementation for handling cookie preferences should be defined here.
+   * @private
+   */
+  toggleCookiesPopup() {
+    // Implement logic for handling cookie preferences
+  }
+  /**
+   * Renders the footer component with optional sections and elements,
+   * including social network links, a Horizon Europe funding acknowledgment, and
+   * legal links such as "Cookies Preferences" and copyright information.
+   *
+   * @returns {JSX.Element} The rendered JSX for the footer component.
+   */
+  render() {
+    return h("footer", {
+      key: 'efffa9b96cc2a094255fcb6d08ec45c7c7f09ec4',
+      class: `${this.extraClass} pb-banner`
+    }, this.social ? h("div", {
+      class: "border-softest border-t-2 pt-20 pb-28 md:pt-28"
+    }, h("div", {
+      class: "container pb-20 xl:pb-40 "
+    }, h("div", {
+      class: "grid-layout"
+    }, h("div", {
+      class: "grid-col-span-12 lg:grid-col-span-5"
+    }, h("eds-social-networks", {
+      class: "mt-28"
+    })), h("nav", {
+      "aria-label": "Secondary nav",
+      class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0"
+    })))) : null, h("div", {
+      key: 'c3942c635dff3dc8cb47a21f20aca52acfaa3e18',
+      class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28`
+    }, h("div", {
+      key: '57e963272659ce2e63294c969f3724a03aef667e',
+      class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap"
+    }, h("div", {
+      key: 'c3e5cfe07fe9eb90450f7a87be1b95ed00ef38ce',
+      class: "flex items-center gap-x-12"
+    }, h("a", {
+      key: 'b0d0c65115b611f78d2b468559c16eb60f538907',
+      target: "_blank",
+      rel: "noopener noreferrer",
+      class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0",
+      href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en"
+    }, h("eds-img", {
+      key: '6cb5d067f07b456a8d828f3f42f2730e3e5374e0',
+      width: 54,
+      height: 41,
+      src: "https://www.ebrains.eu/flags/4x3/eu.svg"
+    }))), h("div", {
+      key: 'e5b768b0fb96fcdcb786d33fc808368005935491',
+      class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto"
+    }, h("p", {
+      key: '777263c2f4bde43d38690f41391eaf8e51d945fa'
+    }, this.fundedBy), h("div", {
+      key: 'a415687d08edf8f3e03a6edce9c45f58662c8595',
+      class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap"
+    }, h("span", {
+      key: 'c0b6498ad4f5e1f4f1945ebb971f9dd81cc74c77',
+      class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline"
+    }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && h("button", {
+      key: '10133d180bfb0d8a6354ea2cbea318a2c46fc463',
+      class: "effect-focus !no-underline underline-offset-4 hover:!underline",
+      onClick: () => this.toggleCookiesPopup()
+    }, this.cookiesPreference))), h("div", {
+      key: '917d0980f91a8c42a75bae301b0a18e3777dd021',
+      class: "ml-auto pl-12"
+    }, this.enableScrollTop ? h("eds-button", {
+      "aria-label": "Back to top",
+      intent: "ghostInverse",
+      icon: "chevron-up",
+      onClick: this.backToTop
+    }) : null))));
+  }
+};
+EdsFooter.style = EdsFooterStyle0;
+
+export { EdsFooter as eds_footer };

package/eds-frame.entry.esm.js

@@ -0,0 +1,117 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsFrame = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.frameLabel = undefined;
+    this.urlLabel = 'Open in Storybook';
+    this.errorMessage = 'Could not load the requested Storybook content. Please check the URL or try again later.';
+    this.storybookUrl = undefined;
+    this.storyPath = undefined;
+    this.intent = 'strong';
+    this.tiny = false;
+    this.size = 'auto';
+    this.bg = true;
+    this.iframeError = false;
+  }
+  articleClasses() {
+    return [this.tiny ? 'min-h-120' : 'min-h-156', this.bg ? 'bg-inverse' : 'bg-default', 'rounded border-softer effect-focus-within relative flex grow flex-col border-2', 'w-full h-full'].join(' ');
+  }
+  getFrameHeight() {
+    switch (this.size) {
+      case 'sm':
+        return '100px';
+      case 'md':
+        return '200px';
+      case 'lg':
+        return '400px';
+      case 'xl':
+        return '700px';
+      default:
+        return 'auto';
+    }
+  }
+  async checkIframeAvailability() {
+    try {
+      const response = await fetch(this.frameSrc, {
+        method: 'GET'
+      });
+      if (!response.ok) {
+        throw new Error('Failed to load');
+      }
+    } catch (error) {
+      this.iframeError = true;
+    }
+  }
+  componentWillLoad() {
+    this.checkIframeAvailability();
+  }
+  componentDidLoad() {
+    // Emit context for each eds-link element after the component is fully loaded
+    const links = this.el.querySelectorAll('eds-link');
+    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: this.frameLabel
+      }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  get storyLink() {
+    return `${this.storybookUrl}/?path=/story/${this.storyPath}`;
+  }
+  get frameSrc() {
+    return `${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`;
+  }
+  render() {
+    return h("div", {
+      key: '0c3a43efc1a125af5999af88c4eb071b5c3bc6c5',
+      class: this.articleClasses()
+    }, h("div", {
+      key: '32303d5e2c2f3b01efe1ceaf828346f873bea6b6',
+      class: "effect-height flex items-center justify-between py-8 px-12"
+    }, h("span", {
+      key: '75f7f6750413dad4af2ea62c12ffb994491d5d01',
+      class: "f-ui-02"
+    }, this.frameLabel), !this.iframeError ? h("eds-link", {
+      label: this.urlLabel,
+      url: this.storyLink,
+      intent: this.intent,
+      class: "ml-auto",
+      external: true,
+      disabled: false,
+      icon: "arrow-diagonal"
+    }) : null), h("div", {
+      key: '1fd99f6eda026814910b0cd93635616b7d3ffe09',
+      class: "border-softer border-t-2"
+    }, this.iframeError ? h("div", {
+      class: "container ml-8 mr-8 mt-16"
+    }, this.errorMessage) : h("iframe", {
+      src: this.frameSrc,
+      width: "100%",
+      height: this.getFrameHeight(),
+      title: this.frameLabel,
+      frameBorder: "0",
+      allowFullScreen: true
+    })));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+
+export { EdsFrame as eds_frame };

package/eds-fullscreen-menu.entry.esm.js

@@ -0,0 +1,143 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsFullscreenMenuCss = "";
+const EdsFullscreenMenuStyle0 = edsFullscreenMenuCss;
+const EdsFullscreenMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.menuClose = createEvent(this, "menuClose", 7);
+    this.links = undefined;
+    this.menuLinks = undefined;
+    this.homeUrl = '/';
+    this.inverseHeader = false;
+    this.isMenuOpen = false;
+  }
+  /**
+   * Listens for the toggleMenu event to open or close the menu.
+   * This event is emitted by the eds-header component.
+   */
+  handleToggleMenu(event) {
+    this.isMenuOpen = event.detail; // Set isMenuOpen based on the event payload
+  }
+  /** Opens the menu */
+  openMenu() {
+    this.isMenuOpen = true;
+  }
+  /** Closes the menu */
+  closeMenu() {
+    this.isMenuOpen = false;
+    this.menuClose.emit();
+  }
+  // Lifecycle method to add the resize event listener when component loads
+  componentDidLoad() {
+    window.addEventListener('resize', this.handleResize.bind(this));
+  }
+  // Lifecycle method to remove the resize event listener when component unloads
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.handleResize.bind(this));
+  }
+  // Function to close the menu if screen width is larger than a defined breakpoint (1024px)
+  handleResize() {
+    if (window.innerWidth >= 1024) {
+      this.isMenuOpen = false;
+    }
+  }
+  /**
+   * Parses the `links` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed link objects
+   */
+  get parsedLinks() {
+    if (typeof this.links === 'object') {
+      return this.links;
+    } else if (typeof this.links === 'string') {
+      try {
+        return JSON.parse(this.links);
+      } catch (e) {
+        // eslint-disable-next-line
+        console.error('Error parsing links prop:', e);
+        return [];
+      }
+    }
+    return [];
+  }
+  /**
+   * Parses the `menuLinks` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `menuLinks` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed menu link objects
+   */
+  get parsedMenuLinks() {
+    if (typeof this.menuLinks === 'object') {
+      return this.menuLinks;
+    } else if (typeof this.menuLinks === 'string') {
+      try {
+        return JSON.parse(this.menuLinks);
+      } catch (e) {
+        // eslint-disable-next-line
+        console.error('Error parsing menuLinks prop:', e);
+        return [];
+      }
+    }
+    return [];
+  }
+  render() {
+    return this.isMenuOpen ? h("div", {
+      class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll"
+    }, h("div", {
+      class: "flex min-h-full flex-col"
+    }, h("div", {
+      class: `bg-default w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}`
+    }, h("div", {
+      class: "mx-auto flex items-center justify-between"
+    }, h("div", {
+      class: "mr-auto w-[200px] h-[85px]"
+    }, h("eds-logo", {
+      type: this.inverseHeader ? 'color-white' : 'color',
+      href: this.homeUrl
+    })), h("div", {
+      class: "px-16"
+    }, h("eds-button", {
+      "aria-label": "Close menu",
+      intent: "ghostInverse",
+      icon: "close",
+      onClick: () => this.closeMenu()
+    })))), h("div", {
+      class: "py-16 px-16"
+    }, h("nav", {
+      class: "mt-28 flex flex-col gap-y-8"
+    }, this.parsedLinks.map((link, index) => h("eds-link", {
+      label: link.label,
+      key: index,
+      url: link.url,
+      intent: "tertiary",
+      size: "large",
+      class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit",
+      onClick: () => this.closeMenu(),
+      icon: "arrow-right"
+    }))), h("eds-block-break", null), h("nav", {
+      class: "mt-28 flex flex-col gap-y-8"
+    }, this.parsedMenuLinks.map((link, index) => h("eds-link", {
+      label: link.label,
+      key: index,
+      url: link.url,
+      intent: "tertiary",
+      size: "large",
+      class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit",
+      onClick: () => this.closeMenu(),
+      icon: "chevron-right"
+    })))), h("div", {
+      class: "mt-auto"
+    }, h("eds-footer", {
+      social: true,
+      "extra-class": "bg-darker"
+    })))) : null;
+  }
+};
+EdsFullscreenMenu.style = EdsFullscreenMenuStyle0;
+
+export { EdsFullscreenMenu as eds_fullscreen_menu };

package/eds-icon-arrow-diagonal.entry.esm.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import { a as arrowDiagonal } from './arrow-diagonal-black-8f0494c3.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsIconArrowDiagonal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.addClass = '';
+  }
+  render() {
+    return h("span", {
+      key: '08ebdce5cfbe75bf4bfab8f72493e2178be55c3c',
+      class: this.addClass,
+      innerHTML: arrowDiagonal
+    });
+  }
+};
+
+export { EdsIconArrowDiagonal as eds_icon_arrow_diagonal };

package/eds-icon-arrow-right.entry.esm.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import { a as arrowRight } from './arrow-right-9322ba8a.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsIconArrowRight = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.class = '';
+  }
+  render() {
+    return h("span", {
+      key: '6d704324784e6c3d9c221dcaf83bd86a8a6a94ab',
+      class: this.class,
+      innerHTML: arrowRight
+    });
+  }
+};
+
+export { EdsIconArrowRight as eds_icon_arrow_right };

package/eds-icon-bluesky.entry.esm.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import { b as bluesky } from './bluesky-cc5edd2d.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsIconBluesky = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.class = '';
+  }
+  render() {
+    return h("span", {
+      key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d',
+      class: this.class,
+      innerHTML: bluesky
+    });
+  }
+};
+
+export { EdsIconBluesky as eds_icon_bluesky };

package/eds-icon-chevron-down.entry.esm.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import { c as chevronDown } from './chevron-down-6144c823.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsIconChevronDown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.class = '';
+  }
+  render() {
+    return h("span", {
+      key: 'bc01e9e10033245e02403b6b919911018eef9919',
+      class: this.class,
+      innerHTML: chevronDown
+    });
+  }
+};
+
+export { EdsIconChevronDown as eds_icon_chevron_down };

package/eds-icon-chevron-left.entry.esm.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import { c as chevronLeft } from './chevron-left-ca6c66e1.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsIconChevronLeft = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.class = '';
+  }
+  render() {
+    return h("span", {
+      key: 'd74bd0b2ddfd5bd61c97309aebb71d7c29f0cf43',
+      class: this.class,
+      innerHTML: chevronLeft
+    });
+  }
+};
+
+export { EdsIconChevronLeft as eds_icon_chevron_left };