@ebrains/react 2.0.0 → 2.1.0

package/token-ratios.entry.esm.js

@@ -17,15 +17,15 @@ const TokenRatios = class {
   }
   render() {
     return h("section", {
-      key: 'be577f9c398a29f5bd996a68d102017488f8ac17',
+      key: '255775984f1d0edd52f48814776dfb5739b4885e',
       class: "w-full"
     }, h("eds-section-core", {
-      key: '291b8f1692e0ba050c0871af65429db95733990c',
+      key: '7fd28e74db00800fcaa4adb13dd6b0b9cace371d',
       tag: "div",
       "section-title": "Aspect Ratios",
       "heading-level": "h3"
     }, h("ul", {
-      key: '2ac59025091444b8e14b5106d8909c54fa8227aa',
+      key: '1e4c0af9a699e69c5bc6c86df821c457bb20614a',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, Object.entries(ratios).map(([key, value]) => h("li", {
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"

package/token-spacing.entry.esm.js

@@ -9,82 +9,82 @@ const TokenSpacing = class {
   }
   render() {
     return h("div", {
-      key: 'ccc58496f0918a9da7f1d4412391613f3f568cc9',
+      key: '9967174337c771b175eb51d9cd77ec227071178e',
       class: "w-full"
     }, h("ul", {
-      key: 'e5a8d47319a9c994e7755d3576d71b634ab20063',
+      key: 'db8df572ea997ea83600cb522c761ec5c99788bc',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: '3d0a29e2c91d351ab116ce416e00c42590d035b3',
+      key: '25a7b31970e56ce8ff62c81a69daac121984d9d6',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: 'd2d85017b45172a0b0b092de400d9151ef539ef8',
+      key: '1a1dfa005e39237c2fedb210c0082293770387c6',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: '88de94aaba4d635cc525a67542b5d472cd896c5d',
+      key: '473024ed6927d1a140eee0e021af92790c3ec5b0',
       class: "spacing-sample m-16 bg-strong"
     }, h("span", {
-      key: 'b59a5fa9df2d4083fa06c9a258ec5ba5ccf60c0a',
+      key: '7b691bf830943134160396ddcd8f71e419eb29e2',
       class: "f-body-01 text-inverse"
     }, "Margin: 1rem / m-16")))), h("li", {
-      key: '70767120c9cd4be53f96f375fd329703a963b63a',
+      key: '38f1d4d7e78b1efdbc55cf732b6be2ac3a62b5b7',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: '855d6bacf1b1423485fbf4a6d57eaae41a7a1444',
+      key: '3a0fc8cdfa13bf0998a4829c36a74b17a6ee2314',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: '7857867bba76856db7530bacd73f142a2b503c51',
+      key: 'ec730379e1041a68c9d980bb6b5d4b16560debb0',
       class: "spacing-sample ml-64 bg-strong"
     }, h("span", {
-      key: '14b4241fc260b9d6b690dbd141098dc61a5eded9',
+      key: 'fd6f3ab787f1d43fb0b060e8408a1464eacd9875',
       class: "f-body-01 text-inverse"
     }, "Margin Left: 4rem / ml-64")))), h("li", {
-      key: 'fa5b994aab19f80b3fa26393844b0bed46ecfa64',
+      key: '60a45420ca9cd7f4dab1524c8d6be31b39295b0c',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: '3c600983badcd59dcf5735e9a4c42c87a306236b',
+      key: 'ec433621396341959df05dd4becf2844c4266ea5',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: '77abcf6391bc3fe5f798a7837e12e9f3581213d0',
+      key: 'e2ae2d3a3f0eb5226fae09d70eff099ed79ca0e6',
       class: "spacing-sample mt-32 bg-strong"
     }, h("span", {
-      key: 'd4626346b81f99c4690853d00c097d523616db1f',
+      key: '1da10931bb4dae62a1a1c020c89463634a3c1630',
       class: "f-body-01 text-inverse"
     }, "Margin Top: 2rem / mt-32")))), h("li", {
-      key: '2ce80fc1b53afa0e157f4b185ae70f16779b9f3f',
+      key: 'f2f6ff5c992df7d4d426a3488cb7aa7ad9b7bc85',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: '95f69eac2055d60ae42808fa09f4f6a68bdff4f6',
+      key: '23700500e04f2ec99fb5329092b7e430f7ac4274',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: 'e553f7c58b018cba77b7141be6142d3c7b34194a',
+      key: 'bc304e082326c02787a62681fa86d20382fbb2d7',
       class: "spacing-sample p-32 bg-strong"
     }, h("span", {
-      key: '13450e5d8c07cbeb640e0b3aea1e526365f0f743',
+      key: '32692a307c58603ac232bb1004b88e0b5bff0c3d',
       class: "f-body-01 text-inverse"
     }, "Padding: 2rem / p-32")))), h("li", {
-      key: 'dce557ae08a4800fd5d98c91b5675d4839da622f',
+      key: '6fc5032427724389d29d200347e3f5de984d6ec5',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: '9a134b12e3829b5529921ee24ba095231ea9a70f',
+      key: 'f66687c53866291f4f455153e34813d53bbb6d68',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: '2f30c7339974f96fa881b43f8b7ec9a018c2f372',
+      key: 'c4305cf37d1f08f50be085664d9a4da0c4859805',
       class: "spacing-sample pt-32 bg-strong"
     }, h("span", {
-      key: '663a2b9a903effbd5eb1988d6803934c41a26b93',
+      key: '4bd0c2056950a34d119c11ffd04e1dce1b8136c5',
       class: "f-body-01 text-inverse"
     }, "Padding Top: 2rem / pt-32")))), h("li", {
-      key: '363143700c339ab934b466ef9f84f257be3adbbc',
+      key: '67053133a6c121e02b7cab1da4cf4bc025dcc28d',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: 'e72006b92c553dfb7c3df21cbbea3a7234cbf725',
+      key: 'dc7c1198e284eb0d71d183017e99fca72c3fb2a7',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: '251e68c910ee1d0485d630fde091e6790183f4f9',
+      key: '3e69f16b8673007197f18b736e07a9e2c86e7eeb',
       class: "spacing-sample pl-32 bg-strong"
     }, h("span", {
-      key: 'cf2f10404629bf2e7ab10d51b2917361cf93279b',
+      key: '5a112de1bf2ce66ea278da76b8890aff02cce8af',
       class: "f-body-01 text-inverse"
     }, "Padding Left: 2rem / pl-32"))))));
   }

package/token-typography.entry.esm.js

@@ -202,10 +202,10 @@ const TokenTypography = class {
   }
   render() {
     return h("section", {
-      key: '62bc664d442830ac40bc6aae9a5dbd38f5d18f05',
+      key: 'b638ddc335ade66f9eb0af8752f56945270fc5ee',
       class: "w-full"
     }, h("ul", {
-      key: 'e8a97077420f77631e75ec99e14b22fd77a36c11',
+      key: '40f638bc0eccdcc79aecaf5da8fc9c1332122d49',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, Object.entries(typography.typesets).filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
     .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => h("li", {

package/view-e900f2d4.esm.js

@@ -0,0 +1,3 @@
+const view = `<svg width="20" height="20" viewBox="-102.4 -102.4 1228.80 1228.80" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000" stroke-width="0.01024" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#000000" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path></g></svg>`;
+
+export { view as v };

package/edit-1dc8d11b.esm.js

@@ -1,3 +0,0 @@
-const edit = `<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="edit"> <g> <path d="M20,16v4a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4H8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path> <polygon fill="none" points="12.5 15.8 22 6.2 17.8 2 8.3 11.5 8 16 12.5 15.8" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polygon> </g> </g> </g> </g></svg>`;
-
-export { edit as e };

package/eds-accordion.entry.esm.js

@@ -1,133 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsAccordionCss = "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}.min-h-56{min-height:3.5rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.break-words{overflow-wrap:break-word}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.relative{position:relative}.absolute{position:absolute}.inset-x-16{left:1rem;right:1rem}.top-16{top:1rem}.pr-32{padding-right:2rem}.pr-36{padding-right:2.25rem}.pr-40{padding-right:2.5rem}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-md{border-radius:12px}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-light{color:var(--grey-700)}.z-1{z-index:1}.z-10{z-index:10}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.h-0{height:0rem}.h-auto{height:auto}.pt-4{padding-top:0.25rem}.overflow-hidden{overflow:hidden}.grid{display:grid}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-16{padding:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.text-left{text-align:left}.text-center{text-align:center}";
-const EdsAccordionStyle0 = edsAccordionCss;
-const EdsAccordion = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.accordion = createEvent(this, "accordion", 7);
-    /**
-     * Handles the click event on the accordion header to toggle expansion.
-     * Toggles the `isExpanded` state and emits the `accordion` event.
-     */
-    this.handleClick = () => {
-      var _a;
-      this.isExpanded = !this.isExpanded;
-      this.accordion.emit(this.isExpanded);
-      this.setPanelHeight();
-      sendAnalytics({
-        category: 'ui-component',
-        parentContext: null,
-        tag: this.el.tagName.toLowerCase(),
-        name: ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
-        action: this.isExpanded ? 'expanded' : 'collapsed'
-      });
-    };
-    /**
-     * Calculates and sets the panel height based on the content height
-     * and adjusts based on the `shortContent` and `isExpanded` states.
-     */
-    this.setPanelHeight = () => {
-      if (this.childContentRef) {
-        this.shortContent = this.wrapperRef.scrollWidth > 830 && !this.description ? this.childContentRef.scrollHeight <= 80 : this.childContentRef.scrollHeight <= 20;
-        this.panelHeight = this.isExpanded && !this.shortContent ? this.childContentRef.scrollHeight : 0;
-      }
-      if (this.headerRef) {
-        this.headerHeight = this.headerRef.scrollHeight - 30;
-      }
-    };
-    this.heading = undefined;
-    this.description = undefined;
-    this.switchBg = true;
-    this.expanded = false;
-    this.clampText = true;
-    this.buttonIntent = 'tertiary';
-    this.isExpanded = this.expanded;
-    this.panelHeight = 0;
-    this.shortContent = false;
-    this.headerHeight = 0;
-  }
-  /**
-   * Lifecycle method that sets up the initial panel height and adds a resize event listener
-   * to recalculate height on window resize.
-   */
-  componentDidLoad() {
-    this.setPanelHeight();
-    window.addEventListener('resize', this.setPanelHeight);
-  }
-  /**
-   * Lifecycle method that cleans up the resize event listener when the component is removed.
-   */
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.setPanelHeight);
-  }
-  /**
-   * Renders the accordion structure, including header, content, description, and any slotted content.
-   * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
-   */
-  render() {
-    return h("div", {
-      key: '1abfd8bfea763bc10e6f17148dbc252d0c3ffdea',
-      ref: el => this.wrapperRef = el,
-      class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
-          ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
-          ${this.switchBg ? 'hover:bg-inverse' : ''}
-          ${this.description ? 'min-h-56' : ''}`
-    }, h("h3", {
-      key: '137a3311195d51f46c6677558219828e5f4d06b5',
-      ref: el => this.headerRef = el,
-      class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40"
-    }, this.heading), h("div", {
-      key: '0fc6d493fd61726a53a8c4311bd183eb3ad5b270',
-      class: "ml-auto"
-    }, h("eds-button", {
-      key: '61e5e7727de895a9dc9d4a9d909cabea3b82e709',
-      id: "toggleAccordion",
-      intent: this.buttonIntent,
-      "aria-expanded": this.isExpanded || this.shortContent,
-      "aria-label": "Toggle accordion",
-      "aria-controls": "accordionSection",
-      class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`,
-      onClick: this.handleClick,
-      icon: "chevron-down"
-    })), h("div", {
-      key: '659ad4db8fd78dea0604afce003124a7c19987dc',
-      class: `w-full`,
-      style: Number.isFinite(this.headerHeight) ? {
-        marginTop: `${this.headerHeight}px`
-      } : {}
-    }, this.description ? h("span", {
-      class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}`
-    }, this.description) : null, h("section", {
-      key: '0b463bb9d634b9dd1aa6c512e072bf8004e54db5',
-      id: "accordionSection",
-      role: "region",
-      "aria-labelledby": "accordionHeader",
-      "aria-hidden": !this.isExpanded,
-      class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`,
-      style: {
-        height: this.isExpanded ? 'auto' : '0'
-      }
-    }, h("div", {
-      key: '7f2eb016e377e3f2c08fd042e903291ad67bd20b',
-      ref: el => this.childContentRef = el,
-      class: `accordion-content effect-color pt-4`,
-      "aria-hidden": !this.isExpanded
-    }, h("span", {
-      key: '25be3a617a42699e2adeb1c9fc711e5a55ce69ea',
-      class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}`
-    }, h("slot", {
-      key: 'de7e5481940295571543c43f4b65f97dc7cec62c'
-    }))))));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsAccordion.style = EdsAccordionStyle0;
-
-export { EdsAccordion as eds_accordion };

package/eds-alert.entry.esm.js

@@ -1,112 +0,0 @@
-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 = "*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: currentColor;\n}\n\np {\n  margin: 0;\n}\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\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\n.flex {\n  display: flex;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-x-12 {\n  -moz-column-gap: 0.75rem;\n  column-gap: 0.75rem;\n}\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\n.rounded-lg {\n  border-radius: 16px;\n}\n\n.bg-dark {\n  background-color: var(--grey-300);\n}\n\n.bg-error {\n  background-color: var(--red-200);\n}\n\n.bg-success {\n  background-color: var(--green-200);\n}\n\n.bg-warning {\n  background-color: var(--yellow-200);\n}\n\n.p-16 {\n  padding: 1rem;\n}\n\n.p-20 {\n  padding: 1.25rem;\n}\n\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.px-20 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.py-12 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.py-20 {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.pr-12 {\n  padding-right: 0.75rem;\n}\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\n[class*=underline-] {\n  text-decoration-line: underline;\n}\n\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n\n.after\\:border-softest::after {\n  border-color: rgba(0, 0, 0, .05);\n}";
-const EdsAlertStyle0 = edsAlertCss;
-const alertStyles = cva(['w-full bg-dark'], {
-  variants: {
-    intent: {
-      default: '',
-      warning: 'bg-warning',
-      error: 'bg-error',
-      success: 'bg-success'
-    },
-    brd: {
-      rounded: 'rounded-lg border-inside after:border-softest after:rounded-lg',
-      normal: ''
-    },
-    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',
-    brd: 'rounded',
-    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.brd = 'rounded';
-    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: '5252aca583e87d8c3249c501e55368e340ef0d64',
-      class: alertStyles({
-        intent: this.intent,
-        brd: this.brd,
-        direction: this.direction,
-        withBtn: this.withBtn
-      }),
-      role: "alert"
-    }, h("p", {
-      key: 'bb23c94e802ec5e287a2b8619277e83de173b498',
-      class: "f-ui-01 py-8",
-      innerHTML: 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 };