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

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: '85b5253d4abb77072424452d2ff6a0d631e67652',
+      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,169 @@
+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;
+  }
+  /**
+   * Watch for changes to the `items` prop and parse it when it changes.
+   * Converts the `items` string into an array of objects if it is a JSON string.
+   * If the format is invalid, it logs an error and sets an empty array.
+   *
+   * @param newValue - The new value for the `items` prop.
+   */
+  parseItems(newValue) {
+    try {
+      if (typeof newValue === 'string') {
+        this.parsedItems = JSON.parse(newValue);
+      } else {
+        this.parsedItems = newValue;
+      }
+    } catch (e) {
+      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() {
+    // Emit context for each eds-link element after the component is fully loaded
+    const links = this.el.shadowRoot.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: null
+      }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  /**
+   * Truncates breadcrumb items based on the maxVisibleItems value.
+   * Truncates `label` to 10 characters if `isSmallScreen` is true, except for the last label.
+   */
+  getTruncatedItems() {
+    const totalItems = this.parsedItems.length;
+    if (totalItems > this.maxVisibleItems) {
+      const firstItem = this.parsedItems[0];
+      const lastItems = this.parsedItems.slice(-2);
+      const ellipsis = {
+        label: '...',
+        url: '',
+        isHidden: true
+      };
+      if (this.maxVisibleItems === 3) {
+        return [this.truncateLabel(firstItem), ellipsis, ...lastItems.map((item, index) => index === lastItems.length - 1 ? item : this.truncateLabel(item))];
+      } else if (this.maxVisibleItems === 4) {
+        const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
+        return [this.truncateLabel(firstItem), this.truncateLabel(middleItem), ellipsis, ...lastItems.map((item, index) => index === lastItems.length - 1 ? item : this.truncateLabel(item))];
+      }
+    }
+    return this.parsedItems.map((item, index) => index === this.parsedItems.length - 1 ? item : this.truncateLabel(item));
+  }
+  /**
+   * Truncates the label of a breadcrumb item to a maximum of 10 characters
+   * if the screen is small.
+   */
+  truncateLabel(item) {
+    if (item.label.length > 15) {
+      return Object.assign(Object.assign({}, item), {
+        label: `${item.label.slice(0, 15)}...`
+      });
+    }
+    return item;
+  }
+  /**
+   * Render method for the breadcrumb component.
+   * It creates a navigation element with an ordered list of breadcrumb links.
+   * The last link is disabled and marked as the current page.
+   */
+  render() {
+    const itemsToRender = this.getTruncatedItems();
+    return h("nav", {
+      key: 'b3f515670374a7451981638d658f8e37f07ab10c',
+      "aria-label": "Breadcrumb"
+    }, h("ol", {
+      key: '999b2035f3c996016e753be3826881a11054e184',
+      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 ? h("eds-link", {
+        label: item.label,
+        url: item.url,
+        intent: this.intent,
+        current: isLast,
+        "aria-label": item.label,
+        size: "small",
+        "icon-small": "false"
+      }) : 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

@@ -0,0 +1,92 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics, g as gradientBGColorVariants } from './color-0ba8ed56.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+import './index-39c58238.esm.js';
+
+const EdsCardProject = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.image = undefined;
+    this.editorialTitle = undefined;
+    this.headingLevel = 'h3';
+    this.categoryTitle = undefined;
+    this.color = undefined;
+    this.bgOnHover = false;
+    this.vertical = false;
+    this.titleProject = undefined;
+    this.url = undefined;
+    this.parsedImage = null;
+  }
+  componentWillLoad() {
+    // Parse the image prop if it's provided
+    if (this.image) {
+      try {
+        this.parsedImage = JSON.parse(this.image);
+        //console.log(this.parsedImage);
+      } catch (error) {
+        //console.error('Error parsing image prop:', error);
+      }
+    }
+  }
+  handleClick(event) {
+    var _a;
+    event.preventDefault();
+    sendAnalytics({
+      category: 'ui-component',
+      tag: this.el.tagName.toLowerCase(),
+      name: ((_a = this.titleProject) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+      action: 'click'
+    });
+  }
+  render() {
+    var _a;
+    const cardClasses = ['min-h-156 border-inside after:border-softest @container overflow-hidden border-0 after:rounded-lg', this.color ? gradientBGColorVariants({
+      color: this.color,
+      hover: this.bgOnHover,
+      class: 'before:border-2 before:rounded-lg before:border-softest'
+    }) : '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',
+      class: cardClasses,
+      onClick: event => this.handleClick(event)
+    }, h("div", {
+      key: '91e8501312957c44d9dc075f2ec3a9e5a5d425cb',
+      class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}`
+    }, h("div", {
+      key: '44e3cf2d67255bb5669b6c721741ed060ba599e7',
+      class: "lg:max-w-[720px]"
+    }, h("eds-card-title", {
+      key: '0cf1d124b975e4d7223bab58db0d5861d348ceb2',
+      "heading-level": this.headingLevel,
+      titleClass: this.image ? 'f-ui-01' : undefined,
+      "card-title": this.titleProject,
+      url: this.url
+    }), this.editorialTitle && h("span", {
+      key: '85e1158691ae876bc0f3c6d0c5557f394ae935cb',
+      class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}`
+    }, this.editorialTitle)), this.categoryTitle && h("div", {
+      key: '9ffdc9f14709600b623c3a5f878b2700864ced79',
+      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',
+      label: this.categoryTitle
+    }))), this.parsedImage && h("div", {
+      key: '97de7a06a13d9843cb18fe4eb19303f436e2ce16',
+      class: imageClasses
+    }, h("div", {
+      key: '532d3c8252316a68976b4587c3d5b63167c0c598',
+      class: "aspect-1x1 w-full"
+    }, h("eds-img", Object.assign({
+      key: '37ee3dbbc99ec8c9139b0a89f9c725768eac5f6d',
+      sizes: this.vertical ? this.parsedImage.sizes || '' : '192px'
+    }, this.parsedImage)))));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+
+export { EdsCardProject as eds_card_project };

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

@@ -0,0 +1,60 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsCardSectionCss = ".w-full{width:100%}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.gap-y-4{row-gap:0.25rem}.gap-y-8{row-gap:0.5rem}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 750px){.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.md\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-8-cols>*{--container-grid-columns:8}.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:block{display:block}.lg\\:flex{display:flex}.lg\\:hidden{display:none}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}";
+const EdsCardSectionStyle0 = edsCardSectionCss;
+const EdsCardSection = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cards = undefined;
+    this.cols = 4;
+  }
+  /**
+   * Parses the `cards` JSON string prop into an array of card objects.
+   * If parsing fails, returns an empty array.
+   *
+   * @returns {any[]} An array of parsed card objects.
+   */
+  get parsedCards() {
+    try {
+      return JSON.parse(this.cards);
+    } catch (e) {
+      //console.error('Error parsing links JSON', e);
+      return [];
+    }
+  }
+  /**
+   * Renders the card section as a grid layout.
+   * Each parsed card object is mapped to an `<eds-card-generic>` component,
+   * displaying card details such as title, description, avatar, etc.
+   *
+   * @returns {JSX.Element} The rendered section containing a list of cards.
+   */
+  render() {
+    return h("section", {
+      key: 'f8e6a03e37677623fad3c53327f6260920a5e914',
+      class: "w-full"
+    }, h("ul", {
+      key: '1da1bc3a5aecadd52b4d025d7d02dc252e47b34a',
+      class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, this.parsedCards.map(card => h("li", {
+      class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col`
+    }, h("eds-card-generic", {
+      cardTitle: card.title,
+      description: card.description,
+      avatar: card.avatar,
+      headingLevel: card.headingLevel,
+      tags: card.tags,
+      url: card.url,
+      bg: card.bg,
+      tiny: card.tiny,
+      image: card.image,
+      withHover: card.withHover
+    })))));
+  }
+};
+EdsCardSection.style = EdsCardSectionStyle0;
+
+export { EdsCardSection as eds_card_section };

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

@@ -0,0 +1,27 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsCardTagsCss = ".flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-y-4{row-gap:0.25rem}";
+const EdsCardTagsStyle0 = edsCardTagsCss;
+const EdsCardTags = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.accent = false;
+    this.tags = [];
+  }
+  render() {
+    return h("div", {
+      key: 'b201dc6df5e809d828a055fb5f01fe798e228361',
+      class: "flex flex-wrap gap-y-4"
+    }, this.tags.map((tag, index) => h("eds-tag", {
+      key: index,
+      intent: this.accent ? 'accent' : 'default',
+      label: tag
+    })));
+  }
+};
+EdsCardTags.style = EdsCardTagsStyle0;
+
+export { EdsCardTags as eds_card_tags };

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

@@ -0,0 +1,106 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './color-0ba8ed56.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;
+const EdsCardTool = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.url = undefined;
+    this.description = undefined;
+    this.image = undefined;
+    this.avatar = undefined;
+    this.shortAbbreviation = undefined;
+    this.headingLevel = 'h5';
+    this.tags = '';
+    this.tiny = false;
+    this.bg = true;
+    this.withHover = true;
+    this.external = false;
+    this.hierarchy = true;
+  }
+  /**
+   * Parses the `tags` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed link objects
+   */
+  get parsedTags() {
+    if (typeof this.tags === 'object') {
+      return this.tags;
+    } else if (typeof this.tags === 'string') {
+      try {
+        return JSON.parse(this.tags);
+      } catch (e) {
+        // eslint-disable-next-line
+        console.error('Error parsing links prop:', e);
+        return [];
+      }
+    }
+    return [];
+  }
+  componentWillLoad() {}
+  parseTags() {
+    return this.tags.split(',');
+  }
+  articleClasses() {
+    return [this.tiny ? 'min-h-120' : 'min-h-156', this.bg ? '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(' ');
+  }
+  handleClick() {
+    var _a;
+    //event.preventDefault();
+    sendAnalytics({
+      category: 'ui-component',
+      tag: this.el.tagName.toLowerCase(),
+      name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+      action: 'click'
+    });
+  }
+  render() {
+    return h("article", {
+      key: 'b46c0464688e45ab29f5b58b6cd2e22ed28e1034',
+      class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`,
+      onClick: () => this.handleClick()
+    }, h("eds-card-title", {
+      key: 'a4da791280db14754b445b1a52e33cc9a25f765e',
+      "heading-level": this.headingLevel,
+      titleClass: this.image ? 'f-ui-01' : undefined,
+      "card-title": this.cardTitle,
+      url: this.url,
+      "external-link": this.external,
+      hierarchy: this.hierarchy
+    }), this.description && h("eds-card-desc", {
+      key: '86f7c6c80b83f244ba7d07d820d5793e1dda2933',
+      class: "mt-8",
+      "truncate-lines": "3",
+      description: this.description
+    }), this.image ? h("eds-img", {
+      src: this.image,
+      alt: "Sample Image",
+      width: 200,
+      height: 150
+    }) : this.avatar || this.shortAbbreviation ? h("eds-avatar", {
+      class: "order-first mb-12",
+      picture: this.avatar,
+      initials: this.shortAbbreviation
+    }) : null, h("div", {
+      key: '46307b57160f908aa7066b2a636c4db38e0e7a8e',
+      class: "flex flex-wrap gap-y-4"
+    }, this.parsedTags.map((tag, index) => h("eds-tag", {
+      key: index,
+      intent: tag.style,
+      label: tag.label
+    }))));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsCardTool.style = EdsCardToolStyle0;
+
+export { EdsCardTool as eds_card_tool };

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

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsCardWrapper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tiny = false;
+    this.withBg = true;
+    this.withHover = true;
+  }
+  hasSlot(name) {
+    if (name) {
+      return !!this.el.querySelector(`[slot="${name}"]`);
+    }
+    return !!this.el.querySelector(':not([slot])');
+  }
+  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: 'c52f6ad7873050c052b8c0e68b2c812d74f2ddf1',
+      class: articleClasses
+    }, h("slot", {
+      key: 'dac6f9fe339c8baa191ee2fd622332ddf25ec08d'
+    }), this.hasSlot('footer') && h("div", {
+      key: '301862515ba88f320d1af722bec6120bc3e7d723',
+      class: "mt-auto"
+    }, h("slot", {
+      key: '85d939150663a4586934413c9965aa92a9babeef',
+      name: "footer"
+    })));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+
+export { EdsCardWrapper as eds_card_wrapper };