@ebrains/react 0.9.3-beta → 1.1.0

package/components-section.entry.esm.js

@@ -5,7 +5,7 @@ import 'react-dom';
 
 const DocsOverview = () => h("div", {
   class: "static-content container"
-}, h("h2", null, "Load the module"), h("p", null, "Integrating the EBRAINS UI 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", {
+}, h("h2", null, "Load the module"), h("p", null, "Integrating the EBRAINS UI Components to a project ", h("b", null, "with or 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'>\n  import { defineCustomElements } from 'https://unpkg.com/@ebrains/components@latest/loader/index.js'; \n  // Define custom elements\n  defineCustomElements(window);\n</script>",
   language: "javascript",
   "copy-label": "Copy Code"
@@ -27,15 +27,15 @@ const DocsOverview = () => h("div", {
   code: '<eds-button \n  label="my bytton" \n  intent="primary">\n</eds-button>',
   language: "html",
   "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@latest/styles/output.css"/>',
+}), h("h2", null, "Load the variables and styles"), h("p", null, "To directly use only the produced variables (colors, breakpoints, typography) add the tag below to the", ' ', h("code", null, "head"), ". This approach is recommended when you\u2019re working solely with the web components and want minimal integration. That said, the components are configured to require only these CSS variables and nothing more."), h("eds-code-block", {
+  code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>',
   language: "css",
   "copy-label": "Copy Code"
-}), h("p", null, "To directly use only the produced variables add the tag below to the ", h("code", null, "head")), h("eds-code-block", {
-  code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>',
+}), 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"), ". Use this when you want quick access to ready-made utilities for building your own components or applications and you do not wish to dive deep to css configurations."), h("eds-code-block", {
+  code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>',
   language: "css",
   "copy-label": "Copy Code"
-}), h("p", null, "Note that, loading the predefined CSS framework above,", ' ', h("b", null, "automatically loads the fonts so you can skip loading them separately"), ". If you wish, however, to load the fonts, add the tag below to the ", h("code", null, "head")), h("eds-code-block", {
+}), h("p", null, "Note that, loading either the variables or the predefined CSS framework above,", ' ', h("b", null, "automatically loads the fonts so you can skip loading them separately"), ". If you wish, however, to load the fonts, add the tag below to the ", h("code", null, "head")), h("eds-code-block", {
   code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/base/fonts.css"/>',
   language: "css",
   "copy-label": "Copy Code"
@@ -49,25 +49,31 @@ const DocsInstallation = () => h("div", null, h("p", null, "Before proceeding, e
 })), h("div", {
   class: "my-8"
 }, h("eds-code-block", {
-  code: "npm install @ebrains/assets",
+  code: "npm install @ebrains/react",
   language: "html",
   "copy-label": "Copy Code"
 })), h("div", {
   class: "my-8"
 }, h("eds-code-block", {
-  code: "npm install @ebrains/react",
+  code: "npm install @ebrains/vue",
   language: "html",
   "copy-label": "Copy Code"
 })), h("div", {
   class: "my-8"
 }, h("eds-code-block", {
-  code: "npm install @ebrains/vue",
+  code: "npm install @ebrains/angular",
   language: "html",
   "copy-label": "Copy Code"
 })), h("div", {
   class: "my-8"
 }, h("eds-code-block", {
-  code: "npm install @ebrains/angular",
+  code: "npm install @ebrains/assets",
+  language: "html",
+  "copy-label": "Copy Code"
+})), h("div", {
+  class: "my-8"
+}, h("eds-code-block", {
+  code: "npm install @ebrains/svgs",
   language: "html",
   "copy-label": "Copy Code"
 })));
@@ -79,7 +85,7 @@ const DocsReact = () => h("div", null, h("h2", null, "React Wrappers"), h("p", n
   "section-title": "Example React App",
   "heading-level": "h3"
 }, h("p", null, "This code displays a Stencil-based splash screen that stays visible until an initialization promise resolves (or errors), then hides itself and reveals the main React app content."), h("eds-code-block", {
-  code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n",
+  code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader,\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n",
   language: "javascript",
   "copy-label": "Copy Code"
 })));
@@ -113,16 +119,16 @@ const DocsVue = () => h("div", null, h("h2", null, "Vue Wrappers"), h("p", null,
   language: "javascript",
   "copy-label": "Copy Code"
 })));
-const DocsAngular = () => h("div", null, h("h2", null, "Angular Wrappers"), h("p", null, "To use the EBRAINS web components in an Angular Application, simple install the package below and check out the examples."), h("eds-code-block", {
+const DocsAngular = () => h("div", null, h("h2", null, "Angular Wrappers"), h("p", null, "To use the EBRAINS web components in an Angular Application, simple install the package below and check out the examples. The Angular Stencil output type used for this package = `standalone`."), 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();",
+}), h("p", null, "Install the components dependency as this important for the angular package to work properly."), h("eds-code-block", {
+  code: "npm install @ebrains/components",
   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";',
+}), 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", {
@@ -156,7 +162,7 @@ const ComponentsSection = class {
   }
   render() {
     return h("div", {
-      key: 'ee1dd33b05afae12511c5876db4e8bd771117853',
+      key: 'd68c9ede251456d88ef2a033691927c87c8ec163',
       class: "container"
     }, this.renderContent());
   }

package/correct-use-of-colors.entry.esm.js

@@ -42,13 +42,13 @@ const CorrectUseOfColors = class {
   }
   render() {
     return h("div", {
-      key: '9f7fbb8254528663d833da6bb683c2bb19e2837b',
+      key: 'eb7fe8a13ba44aa0b8327fd042177817577aa9ca',
       class: "container"
     }, h("p", {
-      key: '71cdde5e7a803ccfbe49bfea00f208a23a10ab8d',
+      key: 'b9e731a3184cc72a0dd4c31bc207185789b1c747',
       class: "f-body-01"
     }, "This guide demonstrates the correct usage of the", h("eds-link", {
-      key: 'fecaba6a82952070d3deb88cf22e335e6e0d7a08',
+      key: '9ac1f24993a47743b62504a9ac5cfaa67ea94867',
       label: "primary",
       size: "small",
       intent: "underline",
@@ -56,7 +56,7 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#primary-palette",
       "extra-class": "inline-block ml-4"
     }), "and", h("eds-link", {
-      key: '0fb583c3d4542134f921649aef5f07738e00b086',
+      key: '82eb7946b881f69719a7785ded23355e34aa3023',
       label: "support",
       size: "small",
       intent: "underline",
@@ -64,13 +64,13 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#support-palette",
       "extra-class": "inline-block ml-4"
     }), "color palettes."), h("div", {
-      key: '3bfb272e2e2d5ab823f157aa1add3511f34a4c27',
+      key: 'a1bde4ba25a05fdc3a43bd008748f0ae74224142',
       class: "flex"
     }, h("div", {
-      key: 'baaf45c1f7b749b6f8f4035b1c62942e320d77d3',
+      key: 'e6399a78c1d41e79041ad0e91356468e9e94a004',
       class: "w-full"
     }, h("ul", {
-      key: '7e6d1a2051e98d7af54ef7061f39edaf2c7beb0a',
+      key: '438acfe268f49ca5b77c20af74213283ac68e851',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, primary.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -80,10 +80,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: '1bf98fe26e99af8473077ac13d3d9b8c405bf1c4',
+      key: '41cf8ea398e273788e32889e705debd21f102a9f',
       class: "w-full"
     }, h("ul", {
-      key: '1402fcefd163737b10c5b0d12014bc6e3fd66780',
+      key: 'b200fe46847e64efee26fb863151f08e2a175220',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, support.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -93,10 +93,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     })))))), h("p", {
-      key: 'b9bc90a0d0cc539349f10c51a1b3dfd19bb453ea',
+      key: '9fe567482bfbad7fc0bc4083756622259fd83e45',
       class: "f-body-01"
     }, "This guide demonstrates the correct usage of the", h("eds-link", {
-      key: '40a8a92005d47099d518281ed61f31888169dfcd',
+      key: 'bd26b1b4c4ac1082eef246f9d1b6b13245b1d69f',
       label: "purple",
       size: "small",
       intent: "underline",
@@ -104,7 +104,7 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#primary-palette",
       "extra-class": "inline-block ml-4"
     }), "and", h("eds-link", {
-      key: '7b530b15d10ce8591b2cd42299f2d6a0b6de575e',
+      key: 'b3a9897628cdcb7086397d7f7662591da4debdd4',
       label: "support",
       size: "small",
       intent: "underline",
@@ -112,13 +112,13 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#support-palette",
       "extra-class": "inline-block ml-4"
     }), "color palettes."), h("div", {
-      key: 'c2b1599f407579d58e36effc3d4ba0115f4fa453',
+      key: 'fc54b467ddd6faa62e81fe56170f0ed43fccd52e',
       class: "flex"
     }, h("div", {
-      key: '514a3c8c3a04f8e5607a606bf310b6173b973ba8',
+      key: '930d475074e002439847f152d95ed1f764536791',
       class: "w-full"
     }, h("ul", {
-      key: '81c56759b2aaf2153cf6150f892ba23f67b8296e',
+      key: 'ad8085fd5a4dcc8cd4cc2a4c0d6522673b0f69c3',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, purple.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -128,10 +128,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: 'ef65f00f5fbf77af47292e570e98d465d553a03a',
+      key: 'c9d7c736f8248fa7f1b689ec7a8eed24853de384',
       class: "w-full"
     }, h("ul", {
-      key: '8fb9499e6c4587db8a188aad5120c1a1bd93b049',
+      key: '9191d41ef9f3947f91420e925f4ae5029aaf0e73',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, support.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -141,10 +141,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     })))))), h("p", {
-      key: '045fe17ef474b7d7c55ee50b183ea8e40439f034',
+      key: 'ed9e3ebc14a1ecd0744d8adf6b58df54a325565f',
       class: "f-body-01"
     }, "This guide demonstrates the correct usage of the", h("eds-link", {
-      key: '20147150cb42c6105559457d364c28b09f9ba171',
+      key: '5104e373031bc9381db7e274fba47f3d36d8fc14',
       label: "blue",
       size: "small",
       intent: "underline",
@@ -152,7 +152,7 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#primary-palette",
       "extra-class": "inline-block ml-4"
     }), "and", h("eds-link", {
-      key: '37093d1dda45c1c114e95533bbf560934d529e4a',
+      key: '2d0ff6d98eaf2b195725eb87b1cf8c264071787c',
       label: "support",
       size: "small",
       intent: "underline",
@@ -160,13 +160,13 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#support-palette",
       "extra-class": "inline-block ml-4"
     }), "color palettes."), h("div", {
-      key: '1d53f16c58afa8f537d384434a6ac68e2d14c707',
+      key: 'a660e8df517ab4c1b4b47fa777bd0e5c06156161',
       class: "flex"
     }, h("div", {
-      key: 'cdd9390005122023dec3b5abcb88bf996e833c70',
+      key: '7346d762b781cf27fdf784a1100608b74a28eaca',
       class: "w-full"
     }, h("ul", {
-      key: 'e76d12d0b57b810c95788e9ccb0d39d4ab9ceb4e',
+      key: '91a7f50ffb513045c7d52987ecd33f3707332083',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, blue.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -176,10 +176,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: '3ff4f5c0ba01b4723e8e664633f7220c9703905f',
+      key: 'e4d61bb10342c7c27e19a5fc43a3823e2ac36db7',
       class: "w-full"
     }, h("ul", {
-      key: 'f69b766d268d5e1d10972723a4ebdc5d9e0cae07',
+      key: 'ab40fb356845c3c15255a591299d3aa3a4bcd415',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, support.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -189,10 +189,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     })))))), h("p", {
-      key: '6591ea37bd86b328c1c55a5150f8ce44d24f8f52',
+      key: '15c61baa18cac41eefdfd631e6e62d8ad665fd00',
       class: "f-body-01"
     }, "This guide demonstrates the correct usage of the", h("eds-link", {
-      key: '47110ceefffb0f391443845425d0e9d07a15e779',
+      key: '8abd1e309700248f865906e667ffdb2db172c923',
       label: "redish",
       size: "small",
       intent: "underline",
@@ -200,7 +200,7 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#primary-palette",
       "extra-class": "inline-block ml-4"
     }), "and", h("eds-link", {
-      key: '0e034de1c3c0ea2f1c0e71f1e1a0024e6bc66d79',
+      key: '9cc22cdc51c4e6b5ea28afd62e5b7fe10b6f57bf',
       label: "support",
       size: "small",
       intent: "underline",
@@ -208,13 +208,13 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#support-palette",
       "extra-class": "inline-block ml-4"
     }), "color palettes."), h("div", {
-      key: '0b0d5484f0d3569bfdc529ef49af00a6c41a25ce',
+      key: '8cb15f36de63b4425be410d395b56829427a2b13',
       class: "flex"
     }, h("div", {
-      key: '66e8d6d41bab4c18846885814b5a7aad6c08d240',
+      key: 'e47f595ad0af29333fdb3090eae08b65b908e87d',
       class: "w-full"
     }, h("ul", {
-      key: 'b9093c38be4aaca5045c62911cd6c789fdc12438',
+      key: '27b7f0ee1650d169f17bee8a776ced534c2f8b37',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, red.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -224,10 +224,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: 'eb682711d6439a79719062057440de519ba48ecb',
+      key: '40ed8de907089964f83ce2ebd2734b00ba378847',
       class: "w-full"
     }, h("ul", {
-      key: '79805bba02241029b99027dab0f9cf6673e0e1c3',
+      key: '8b1bdd17aa9e0c60484120b58e67ec3d09ddc533',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, support.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"

package/docs-palettes.entry.esm.js

@@ -20,7 +20,7 @@ const DocsPalettes = class {
   }
   render() {
     return h("div", {
-      key: '41ac7248f45204f420ab2954e26529577e2cb27f',
+      key: '638d6345ed0e32bda5d350f7ee8e54055d7fe770',
       class: "container"
     }, this.renderContent());
   }

package/docs-tokens.entry.esm.js

@@ -36,7 +36,7 @@ const DocsContent = class {
   }
   render() {
     return h("div", {
-      key: '2d4d06ef8d68dc42280f71042322a5f3ca528564',
+      key: '7d86f29bb4a82aec564b0600749d97aedc58925d',
       class: "container"
     }, this.renderContent());
   }

package/eds-accordion.entry.esm.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-44b1416b.esm.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-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.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 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) {
@@ -70,21 +70,21 @@ const EdsAccordion = class {
    */
   render() {
     return h("div", {
-      key: 'd2fcce2468130200dd1516902a203c4ca8ae543f',
+      key: 'addeb5f79d497efcd3eab9f849890adf48a5e275',
       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: 'f59a85e886736b483f6a311a00426340a36dcb71',
+      key: 'c522c074c205e471f9e95991a03f703bec8d3219',
       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: '9fe1d99f46f3c066bbb1e8f4ef695fe87e8fad54',
+      key: '5ee474856bf9a3cdc732c27c6fccb68c24e0dc3b',
       class: "ml-auto"
     }, h("eds-button", {
-      key: '4d4c16a958df05f1e773fe74fa49647fc94766c7',
+      key: 'a274b1d82f30607f61103433aa6ceb745464f530',
       id: "toggleAccordion",
       intent: "tertiary",
       "aria-expanded": this.isExpanded || this.shortContent,
@@ -94,7 +94,7 @@ const EdsAccordion = class {
       onClick: this.handleClick,
       icon: "chevron-down"
     })), h("div", {
-      key: '5d84ffe8032834575d165f7a5e097539de73350f',
+      key: '69a638f2dc3c5ebff95fc4049c47abd4884b13ad',
       class: `w-full`,
       style: Number.isFinite(this.headerHeight) ? {
         marginTop: `${this.headerHeight}px`
@@ -102,7 +102,7 @@ const EdsAccordion = class {
     }, this.description ? h("span", {
       class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}`
     }, this.description) : null, h("section", {
-      key: '1813aea1369b8883cd45088799f9715cf8fc0556',
+      key: '820f39174c6e6d42e7c4407a2a4175fb077f86ac',
       id: "accordionSection",
       role: "region",
       "aria-labelledby": "accordionHeader",
@@ -112,15 +112,15 @@ const EdsAccordion = class {
         height: this.isExpanded ? 'auto' : '0'
       }
     }, h("div", {
-      key: 'a9a95adbb819530f426045c55ca1a02f3a778f0a',
+      key: '3d9ea33856d350434d26c07ddc9d230e28d8c344',
       ref: el => this.childContentRef = el,
       class: `accordion-content effect-color pt-4`,
       "aria-hidden": !this.isExpanded
     }, h("span", {
-      key: '2518e3243e0bd199061ac255922d661e0558bdc8',
+      key: '1d0761d7894d5ba4d7c7f5051031857555ce0b0c',
       class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}`
     }, h("slot", {
-      key: '3f3ab74926e7e45d4aacc4c7003c05be3c6b82c3'
+      key: 'ed31f44736a8ce85a7df4216b2f90c2ca7d9b873'
     }))))));
   }
   get el() {

package/eds-alert.entry.esm.js

@@ -4,7 +4,7 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const edsAlertCss = ":root {\n  font-optical-sizing: auto;\n}\n\nhtml,\nbody {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\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*,\n::before,\n::after {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\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/*\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;\n  /* 1 */\n  border-width: 0;\n  /* 2 */\n  border-style: solid;\n  /* 2 */\n  border-color: currentColor;\n  /* 2 */\n}\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;\n  /* 1 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n  -moz-tab-size: 4;\n  /* 3 */\n  -o-tab-size: 4;\n  tab-size: 4;\n  /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  /* 4 */\n  font-feature-settings: normal;\n  /* 5 */\n  font-variation-settings: normal;\n  /* 6 */\n  -webkit-tap-highlight-color: transparent;\n  /* 7 */\n}\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;\n  /* 1 */\n  line-height: inherit;\n  /* 2 */\n}\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;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  border-top-width: 1px;\n  /* 3 */\n}\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\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\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n  font-weight: bolder;\n}\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;\n  /* 1 */\n  font-feature-settings: normal;\n  /* 2 */\n  font-variation-settings: normal;\n  /* 3 */\n  font-size: 1em;\n  /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n  font-size: 80%;\n}\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}\n\nsub {\n  bottom: -0.25em;\n}\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;\n  /* 1 */\n  border-color: inherit;\n  /* 2 */\n  border-collapse: collapse;\n  /* 3 */\n}\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;\n  /* 1 */\n  font-feature-settings: inherit;\n  /* 1 */\n  font-variation-settings: inherit;\n  /* 1 */\n  font-size: 100%;\n  /* 1 */\n  font-weight: inherit;\n  /* 1 */\n  line-height: inherit;\n  /* 1 */\n  letter-spacing: inherit;\n  /* 1 */\n  color: inherit;\n  /* 1 */\n  margin: 0;\n  /* 2 */\n  padding: 0;\n  /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n  text-transform: none;\n}\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;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\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\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;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\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;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n}\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}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n  resize: vertical;\n}\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,\ntextarea::-moz-placeholder {\n  opacity: 1;\n  /* 1 */\n  color: #9ca3af;\n  /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  /* 1 */\n  color: #9ca3af;\n  /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\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;\n  /* 1 */\n  vertical-align: middle;\n  /* 2 */\n}\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\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n:root {\n  --inner-gutter: 8px;\n}\n\n@media (min-width: 750px) {\n  :root {\n    --inner-gutter: 12px;\n  }\n}\n\n@media (min-width: 900px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n\n@media (min-width: 1024px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n\n@media (min-width: 1280px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n\n@media (min-width: 2200px) {\n  :root {\n    --inner-gutter: 16px;\n  }\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\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@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,\n.f-ui-01 strong {\n  font-weight: var(--f-ui-01---bold-weight, bold);\n}\n\n:root {\n  --grey-300: #e6e6e6;\n  --green-200: #d3ffdc;\n  --yellow-200: #ffffcb;\n  --red-200: #ffe0e1;\n}\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\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\n  .md\\:grid-line-x-0>*::before {\n    content: none;\n  }\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\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\n  .md\\:grid-line-y-0>*::after {\n    content: none;\n  }\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\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\n  .lg\\:grid-line-x-0>*::before {\n    content: none;\n  }\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\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\n  .lg\\:grid-line-y-0>*::after {\n    content: none;\n  }\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/** 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\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 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: {
@@ -83,7 +83,7 @@ const EdsAlert = class {
   }
   render() {
     return h("div", {
-      key: '90eae6088fb792c671eca1d74d9a6e7d212c2c1c',
+      key: '5252aca583e87d8c3249c501e55368e340ef0d64',
       class: alertStyles({
         intent: this.intent,
         brd: this.brd,
@@ -92,7 +92,7 @@ const EdsAlert = class {
       }),
       role: "alert"
     }, h("p", {
-      key: '201a9e6352350dbe9d4f1ab137a669f212519ea5',
+      key: 'bb23c94e802ec5e287a2b8619277e83de173b498',
       class: "f-ui-01 py-8",
       innerHTML: this.message
     }), this.withBtn && (this.pressableUrl ? h("eds-link", {

package/eds-app-root.entry.esm.js

@@ -34,18 +34,18 @@ const EdsAppRoot = class {
   }
   render() {
     return h("div", {
-      key: 'e17896f68a7a987b73756e1a0d572f48272ae65f'
+      key: 'f7ff644cea84bfc78190afcfa33f1f6d6c6de29a'
     }, h("eds-splash-screen", {
-      key: 'f269a92c479b27c1c3d4fa199889770dfc98e0e1',
+      key: '5e04f163eafe8f0d55394b8f508386bac013907e',
       inverse: true,
       initPromise: this.combinedInitPromise
     }), h("eds-login", {
-      key: '271e28d665f9676d9a75c8537553f29bbdab6651',
+      key: '94c9dc0546e48fe8f9e6fc17fde9dcbf75fbe3bc',
       "keycloak-url": "http://localhost:8080",
       "keycloak-realm": "nigeor-realm",
       "keycloak-client-id": "stencil-app"
     }), h("main", {
-      key: 'fbcbec5f93e57b450936e8df1a35da1cc6493175'
+      key: '975cfb32924ecf0a4bb7d8f4788792eae500e166'
     }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in.")));
   }
 };