@descope/web-components-ui 1.0.266 → 1.0.268

package/dist/index.esm.js

@@ -12,8 +12,8 @@ import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
 import '@vaadin/multi-select-combo-box';
 import '@vaadin/dialog';
+import '@vaadin/notification';
 import merge from 'lodash.merge';
-import set from 'lodash.set';
 import Color from 'color';
 
 const kebabCase = (str) =>
@@ -1289,7 +1289,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$H = getComponentName('button');
+const componentName$I = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1391,7 +1391,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$H,
+    componentName: componentName$I,
   })
 );
 
@@ -1428,7 +1428,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$H, ButtonClass);
+customElements.define(componentName$I, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1438,11 +1438,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$G = getComponentName('boolean-field-internal');
+const componentName$H = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$H, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -1518,14 +1518,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$G}
+				<${componentName$H}
 					tabindex="-1"
 					slot="input"
-				></${componentName$G}>
+				></${componentName$H}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$G);
+      this.inputElement = this.shadowRoot.querySelector(componentName$H);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1724,7 +1724,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$F = getComponentName('checkbox');
+const componentName$G = getComponentName('checkbox');
 
 const {
   host: host$g,
@@ -1830,15 +1830,15 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$F,
+    componentName: componentName$G,
   })
 );
 
-customElements.define(componentName$G, BooleanInputInternal);
+customElements.define(componentName$H, BooleanInputInternal);
 
-customElements.define(componentName$F, CheckboxClass);
+customElements.define(componentName$G, CheckboxClass);
 
-const componentName$E = getComponentName('switch-toggle');
+const componentName$F = getComponentName('switch-toggle');
 
 const {
   host: host$f,
@@ -1970,17 +1970,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
-customElements.define(componentName$E, SwitchToggleClass);
+customElements.define(componentName$F, SwitchToggleClass);
 
-const componentName$D = getComponentName('loader-linear');
+const componentName$E = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$D;
+    return componentName$E;
   }
 
   constructor() {
@@ -2041,11 +2041,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$D, LoaderLinearClass);
+customElements.define(componentName$E, LoaderLinearClass);
 
-const componentName$C = getComponentName('loader-radial');
+const componentName$D = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2089,11 +2089,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$C, LoaderRadialClass);
+customElements.define(componentName$D, LoaderRadialClass);
 
-const componentName$B = getComponentName('container');
+const componentName$C = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$B, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$C, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2145,13 +2145,13 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$B, ContainerClass);
+customElements.define(componentName$C, ContainerClass);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$A = getComponentName('text');
+const componentName$B = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2211,8 +2211,8 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const componentName$z = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
+const componentName$A = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2311,9 +2311,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$A, TextClass);
+customElements.define(componentName$B, TextClass);
 
-customElements.define(componentName$z, DividerClass);
+customElements.define(componentName$A, DividerClass);
 
 const { host: host$c, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$9, inputField: inputField$6, input, helperText: helperText$7, errorMessage: errorMessage$9 } =
   {
@@ -2370,7 +2370,7 @@ var textFieldMappings = {
   inputPlaceholderColor: { ...placeholder$3, property: 'color' },
 };
 
-const componentName$y = getComponentName('email-field');
+const componentName$z = getComponentName('email-field');
 
 const customMixin$6 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -2405,15 +2405,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
-customElements.define(componentName$y, EmailFieldClass);
+customElements.define(componentName$z, EmailFieldClass);
 
-const componentName$x = getComponentName('link');
+const componentName$y = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$x, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2478,7 +2478,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$x, LinkClass);
+customElements.define(componentName$y, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2530,37 +2530,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$w = getComponentName('logo');
+const componentName$x = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$w,
+  componentName: componentName$x,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$w, LogoClass);
+customElements.define(componentName$x, LogoClass);
 
-const componentName$v = getComponentName('totp-image');
+const componentName$w = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$v,
+  componentName: componentName$w,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$v, TotpImageClass);
+customElements.define(componentName$w, TotpImageClass);
 
-const componentName$u = getComponentName('notp-image');
+const componentName$v = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$u,
+  componentName: componentName$v,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$u, NotpImageClass);
+customElements.define(componentName$v, NotpImageClass);
 
-const componentName$t = getComponentName('number-field');
+const componentName$u = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2586,11 +2586,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$t,
+    componentName: componentName$u,
   })
 );
 
-customElements.define(componentName$t, NumberFieldClass);
+customElements.define(componentName$u, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2608,13 +2608,13 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$s = getComponentName('passcode-internal');
+const componentName$t = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -2840,7 +2840,7 @@ class PasscodeInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$r = getComponentName('text-field');
+const componentName$s = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -2890,11 +2890,11 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$r,
+    componentName: componentName$s,
   })
 );
 
-const componentName$q = getComponentName('passcode');
+const componentName$r = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -2913,17 +2913,17 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$s}
+      <${componentName$t}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$s}>
+      ><slot></slot></${componentName$t}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$s);
+      this.inputElement = this.shadowRoot.querySelector(componentName$t);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -3070,15 +3070,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$r,
   })
 );
 
-customElements.define(componentName$r, TextFieldClass);
+customElements.define(componentName$s, TextFieldClass);
 
-customElements.define(componentName$s, PasscodeInternal);
+customElements.define(componentName$t, PasscodeInternal);
 
-customElements.define(componentName$q, PasscodeClass);
+customElements.define(componentName$r, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -3114,7 +3114,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$p = getComponentName('password');
+const componentName$q = getComponentName('password');
 
 const {
   host: host$9,
@@ -3245,13 +3245,13 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$p,
+    componentName: componentName$q,
   })
 );
 
-customElements.define(componentName$p, PasswordClass);
+customElements.define(componentName$q, PasswordClass);
 
-const componentName$o = getComponentName('text-area');
+const componentName$p = getComponentName('text-area');
 
 const {
   host: host$8,
@@ -3327,17 +3327,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$o,
+    componentName: componentName$p,
   })
 );
 
-customElements.define(componentName$o, TextAreaClass);
+customElements.define(componentName$p, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$n = getComponentName('image');
+const componentName$o = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$n, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$o, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3377,9 +3377,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$n, ImageClass);
+customElements.define(componentName$o, ImageClass);
 
-const componentName$m = getComponentName('combo-box');
+const componentName$n = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3758,12 +3758,12 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data'],
-    componentName: componentName$m,
+    componentName: componentName$n,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$m, ComboBoxClass);
+customElements.define(componentName$n, ComboBoxClass);
 
 var CountryCodes = [
   {
@@ -5003,7 +5003,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$l = getComponentName('phone-field-internal');
+const componentName$m = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5015,7 +5015,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -5187,12 +5187,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   }
 };
 
-customElements.define(componentName$l, PhoneFieldInternal$1);
+customElements.define(componentName$m, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$k = getComponentName('phone-field');
+const componentName$l = getComponentName('phone-field');
 
 const customMixin$3 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -5206,15 +5206,15 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$l}
+				<${componentName$m}
 					tabindex="-1"
 					slot="input"
-				></${componentName$l}>
+				></${componentName$m}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$l);
+      this.inputElement = this.shadowRoot.querySelector(componentName$m);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5410,17 +5410,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$k,
+    componentName: componentName$l,
   })
 );
 
-customElements.define(componentName$k, PhoneFieldClass);
+customElements.define(componentName$l, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$j = getComponentName('phone-field-internal-input-box');
+const componentName$k = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -5434,7 +5434,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -5573,11 +5573,11 @@ class PhoneFieldInternal extends BaseInputClass$2 {
   }
 }
 
-customElements.define(componentName$j, PhoneFieldInternal);
+customElements.define(componentName$k, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$i = getComponentName('phone-input-box-field');
+const componentName$j = getComponentName('phone-input-box-field');
 
 const customMixin$2 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -5591,15 +5591,15 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$j}
+				<${componentName$k}
 					tabindex="-1"
 					slot="input"
-				></${componentName$j}>
+				></${componentName$k}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$j);
+      this.inputElement = this.shadowRoot.querySelector(componentName$k);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5732,15 +5732,15 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$i,
+    componentName: componentName$j,
   })
 );
 
-customElements.define(componentName$i, PhoneFieldInputBoxClass);
+customElements.define(componentName$j, PhoneFieldInputBoxClass);
 
-const componentName$h = getComponentName('new-password-internal');
+const componentName$i = getComponentName('new-password-internal');
 
-const componentName$g = getComponentName('new-password');
+const componentName$h = getComponentName('new-password');
 
 const customMixin$1 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
@@ -5750,16 +5750,16 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$h}
+			<${componentName$i}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$h}>
+			></${componentName$i}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$h);
+      this.inputElement = this.shadowRoot.querySelector(componentName$i);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5866,7 +5866,7 @@ const NewPasswordClass = compose(
 		}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$g,
+    componentName: componentName$h,
   })
 );
 
@@ -5891,7 +5891,7 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -6056,16 +6056,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$h, NewPasswordInternal);
+customElements.define(componentName$i, NewPasswordInternal);
 
-customElements.define(componentName$g, NewPasswordClass);
+customElements.define(componentName$h, NewPasswordClass);
 
-const componentName$f = getComponentName('recaptcha');
+const componentName$g = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
-  componentName: componentName$f,
+  componentName: componentName$g,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -6217,7 +6217,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$f, RecaptchaClass);
+customElements.define(componentName$g, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -6231,7 +6231,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$e = getComponentName('upload-file');
+const componentName$f = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -6246,7 +6246,7 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$e, baseSelector: ':host > div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$f, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -6461,7 +6461,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$e, UploadFileClass);
+customElements.define(componentName$f, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -6559,10 +6559,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$d = getComponentName('button-selection-group-internal');
+const componentName$e = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$d
+  componentName$e
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -6794,7 +6794,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$c = getComponentName('button-selection-group');
+const componentName$d = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -6803,19 +6803,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$d}
+      <${componentName$e}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$d}>
+      </${componentName$e}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$d);
+      this.inputElement = this.shadowRoot.querySelector(componentName$e);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6840,16 +6840,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$c,
+    componentName: componentName$d,
   })
 );
 
-customElements.define(componentName$d, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$e, ButtonSelectionGroupInternalClass);
 
-const componentName$b = getComponentName('button-selection-group-item');
+const componentName$c = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$b,
+  componentName: componentName$c,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -6947,14 +6947,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$b, ButtonSelectionGroupItemClass);
+customElements.define(componentName$c, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$c, ButtonSelectionGroupClass);
+customElements.define(componentName$d, ButtonSelectionGroupClass);
 
-const componentName$a = getComponentName('button-multi-selection-group-internal');
+const componentName$b = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$a
+  componentName$b
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -7057,7 +7057,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$9 = getComponentName('button-multi-selection-group');
+const componentName$a = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7066,19 +7066,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$a}
+      <${componentName$b}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$a}>
+      </${componentName$b}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$a);
+      this.inputElement = this.shadowRoot.querySelector(componentName$b);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -7103,13 +7103,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$9,
+    componentName: componentName$a,
   })
 );
 
-customElements.define(componentName$a, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$b, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$9, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$a, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7138,9 +7138,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$8 = getComponentName('grid-text-column');
+const componentName$9 = getComponentName('grid-text-column');
 
-customElements.define(componentName$8, GridTextColumnClass);
+customElements.define(componentName$9, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7175,9 +7175,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$7 = getComponentName('grid-custom-column');
+const componentName$8 = getComponentName('grid-custom-column');
 
-customElements.define(componentName$7, GridCustomColumnClass);
+customElements.define(componentName$8, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -7236,9 +7236,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$6 = getComponentName('grid-selection-column');
+const componentName$7 = getComponentName('grid-selection-column');
 
-customElements.define(componentName$6, GridSelectionColumnClass);
+customElements.define(componentName$7, GridSelectionColumnClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -7250,7 +7250,7 @@ const isValidDataType = (data) => {
   return isValid;
 };
 
-const componentName$5 = getComponentName('grid');
+const componentName$6 = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -7483,13 +7483,13 @@ const GridClass = compose(
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$5,
+    componentName: componentName$6,
   })
 );
 
-customElements.define(componentName$5, GridClass);
+customElements.define(componentName$6, GridClass);
 
-const componentName$4 = getComponentName('multi-select-combo-box');
+const componentName$5 = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -8093,16 +8093,16 @@ const MultiSelectComboBoxClass = compose(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-    componentName: componentName$4,
+    componentName: componentName$5,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$4, MultiSelectComboBoxClass);
+customElements.define(componentName$5, MultiSelectComboBoxClass);
 
-const componentName$3 = getComponentName('badge');
+const componentName$4 = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$3, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -8150,9 +8150,9 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
 
-customElements.define(componentName$3, BadgeClass);
+customElements.define(componentName$4, BadgeClass);
 
-const componentName$2 = getComponentName('modal');
+const componentName$3 = getComponentName('modal');
 
 const customMixin = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -8251,14 +8251,248 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
+    componentName: componentName$3,
+  })
+);
+
+customElements.define(componentName$3, ModalClass);
+
+const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
+
+if (!vaadinContainerClass) {
+  throw new Error('could not get vaadin-notification-container class');
+}
+
+class NotificationContainerClass extends vaadinContainerClass {}
+customElements.define(getComponentName('notification-container'), NotificationContainerClass);
+
+const componentName$2 = getComponentName('notification-card');
+
+const notificationCardMixin = (superclass) =>
+  class NotificationCardMixinClass extends superclass {
+    close() {
+      // if animation is not applied to the element, the node will not be removed
+      // from the DOM. We should avoid that. So, if in any case we allow
+      // customizing the animation - we should check if animation is applied
+      // and if it's not applied - remove the element from the DOM and dispatch
+      // `card-closed` event.
+      this.baseElement.addEventListener('animationend', () => {
+        this.remove();
+        this.dispatchEvent(new Event('card-closed'));
+      });
+
+      this.setAttribute('opened', 'false');
+    }
+
+    constructor() {
+      super();
+
+      this.baseElement.innerHTML = `
+      <div part="root">
+        <div part="content">
+          <slot></slot>
+        </div>
+        <div part="close">
+          <slot name="close"></slot>
+        </div>
+      </div>
+      `;
+
+      this.closeEle = this.shadowRoot.querySelector('[part="close"]');
+    }
+
+    init() {
+      super.init?.();
+
+      this.closeEle.onclick = () => {
+        this.close();
+      };
+    }
+  };
+
+const selectors = {
+  content: () => 'vaadin-notification-card::part(content)',
+  overlay: () => 'vaadin-notification-card::part(overlay)',
+};
+
+const NotificationCardClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostMinWidth: { selector: selectors.content, property: 'min-width' },
+      fontFamily: {},
+      fontSize: {},
+      backgroundColor: { selector: selectors.content },
+      textColor: { property: 'color' },
+      boxShadow: {},
+      borderWidth: { selector: selectors.content, property: 'border-width' },
+      borderColor: { selector: selectors.content, property: 'border-color' },
+      borderStyle: { selector: selectors.content, property: 'border-style' },
+      borderRadius: [
+        { selector: selectors.content, property: 'border-radius' },
+        { selector: selectors.overlay, property: 'border-radius' },
+      ],
+      verticalPadding: [
+        { selector: selectors.content, property: 'padding-top' },
+        { selector: selectors.content, property: 'padding-bottom' },
+      ],
+      horizontalPadding: [
+        { selector: selectors.content, property: 'padding-right' },
+        { selector: selectors.content, property: 'padding-left' },
+      ],
+    },
+  }),
+  notificationCardMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-notification-card',
+    style: () => `
+    vaadin-notification-card {
+      box-shadow: none;
+    }
+    ::part(overlay) {
+      box-shadow: none;
+      background: none;
+    }
+
+    [part="close"] {
+      cursor: pointer;
+      display: flex;
+    }
+
+    [part="content"] {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+    }
+
+    [part="root"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+    `,
+    excludeAttrsSync: ['tabindex'],
     componentName: componentName$2,
   })
 );
 
-customElements.define(componentName$2, ModalClass);
+customElements.define(componentName$2, NotificationCardClass);
+
+const componentName$1 = getComponentName('notification');
+
+const NotificationMixin = (superclass) =>
+  class NotificationMixinClass extends superclass {
+    #card;
+
+    constructor() {
+      super();
+
+      const that = this;
+
+      Object.defineProperty(this.baseElement, '_container', {
+        get() {
+          if (!NotificationMixinClass._container) {
+            NotificationMixinClass._container = document.createElement(
+              'descope-notification-container'
+            );
+
+            // we're adding the container to body to avoid Vaadin's container's `openChanged`
+            // from breaking when trying to remove it directly from the body.
+            document.body.appendChild(NotificationMixinClass._container);
+          }
+
+          if (!NotificationMixinClass._container.isConnected) {
+            // Then, we're adding the container to the parentNode, which is the desired location
+            // for us on the DOM
+            setTimeout(() => that.parentNode.appendChild(NotificationMixinClass._container));
+          }
+
+          return NotificationMixinClass._container;
+        },
+      });
+
+      Object.defineProperty(this.baseElement, '_card', {
+        get() {
+          return that.#card;
+        },
+      });
+
+      // we want to replace the card with vaadin's remove notification so it will not throw
+      this.baseElement._removeNotificationCard = this.close.bind(this);
+    }
+
+    close() {
+      this.#card.close();
+    }
+
+    init() {
+      super.init?.();
+
+      this.createCard();
+
+      forwardAttrs(this, this.#card);
+      syncAttrs(this.#card, this, { includeAttrs: ['opened'] });
+
+      this.baseElement.renderer = (cardRoot) => {
+        Array.from(this.childNodes).forEach((child) => cardRoot.appendChild(child));
+      };
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    get isContainerEmpty() {
+      return !NotificationMixinClass._container.children.length;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    removeContainer() {
+      NotificationMixinClass._container.remove();
+    }
+
+    removeNotification() {
+      // remove descope-notification from the DOM
+      this.remove();
+      // if needed, remove descope-notification-container
+      if (this.isContainerEmpty) this.removeContainer();
+    }
+
+    createCard() {
+      this.#card = document.createElement('descope-notification-card');
+      this.#card.addEventListener('card-closed', this.removeNotification.bind(this));
+    }
+  };
+
+const NotificationClass = compose(
+  draggableMixin,
+  componentNameValidationMixin,
+  hoverableMixin,
+  NotificationMixin
+)(
+  createProxy({
+    wrappedEleName: 'vaadin-notification',
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$1,
+  })
+);
+
+customElements.define(componentName$1, NotificationClass);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
+// lodash.set alternative
+const set = (obj, path, value) => {
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+
+  pathArray.reduce((acc, key, i) => {
+    if (acc[key] === undefined) acc[key] = {};
+    if (i === pathArray.length - 1) acc[key] = value;
+    return acc[key];
+  }, obj);
+
+  return obj;
+};
+
 const transformTheme = (theme, path, getTransformation) => {
   return Object.entries(theme).reduce((acc, [key, val]) => {
     if (val?.constructor !== Object) {
@@ -8599,7 +8833,7 @@ const mode = {
   surface: globalRefs$i.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$H);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$I);
 
 const button = {
   ...helperTheme$3,
@@ -8715,7 +8949,7 @@ var button$1 = /*#__PURE__*/Object.freeze({
   vars: vars$x
 });
 
-const componentName$1 = getComponentName('input-wrapper');
+const componentName = getComponentName('input-wrapper');
 const globalRefs$h = getThemeRefs(globals);
 
 const [theme$1, refs, vars$w] = createHelperVars(
@@ -8784,7 +9018,7 @@ const [theme$1, refs, vars$w] = createHelperVars(
       backgroundColor: globalRefs$h.colors.surface.main,
     },
   },
-  componentName$1
+  componentName
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -9108,7 +9342,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$B
+  componentName$C
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -9379,7 +9613,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$z
+  componentName$A
 );
 
 const divider = {
@@ -9522,7 +9756,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$C
+  componentName$D
 );
 
 const loaderRadial = {
@@ -9910,118 +10144,6 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   vars: vars$4
 });
 
-const componentName = getComponentName('notification-card');
-
-const notificationCardMixin = (superclass) =>
-  class NotificationCardMixinClass extends superclass {
-    close() {
-      // if animation is not applied to the element, the node will not be removed
-      // from the DOM. We should avoid that. So, if in any case we allow
-      // customizing the animation - we should check if animation is applied
-      // and if it's not applied - remove the element from the DOM and dispatch
-      // `card-closed` event.
-      this.baseElement.addEventListener('animationend', () => {
-        this.remove();
-        this.dispatchEvent(new Event('card-closed'));
-      });
-
-      this.setAttribute('opened', 'false');
-    }
-
-    constructor() {
-      super();
-
-      this.baseElement.innerHTML = `
-      <div part="root">
-        <div part="content">
-          <slot></slot>
-        </div>
-        <div part="close">
-          <slot name="close"></slot>
-        </div>
-      </div>
-      `;
-
-      this.closeEle = this.shadowRoot.querySelector('[part="close"]');
-    }
-
-    init() {
-      super.init?.();
-
-      this.closeEle.onclick = () => {
-        this.close();
-      };
-    }
-  };
-
-const selectors = {
-  content: () => 'vaadin-notification-card::part(content)',
-  overlay: () => 'vaadin-notification-card::part(overlay)',
-};
-
-const NotificationCardClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostMinWidth: { selector: selectors.content, property: 'min-width' },
-      fontFamily: {},
-      fontSize: {},
-      backgroundColor: { selector: selectors.content },
-      textColor: { property: 'color' },
-      boxShadow: {},
-      borderWidth: { selector: selectors.content, property: 'border-width' },
-      borderColor: { selector: selectors.content, property: 'border-color' },
-      borderStyle: { selector: selectors.content, property: 'border-style' },
-      borderRadius: [
-        { selector: selectors.content, property: 'border-radius' },
-        { selector: selectors.overlay, property: 'border-radius' },
-      ],
-      verticalPadding: [
-        { selector: selectors.content, property: 'padding-top' },
-        { selector: selectors.content, property: 'padding-bottom' },
-      ],
-      horizontalPadding: [
-        { selector: selectors.content, property: 'padding-right' },
-        { selector: selectors.content, property: 'padding-left' },
-      ],
-    },
-  }),
-  notificationCardMixin
-)(
-  createProxy({
-    slots: [],
-    wrappedEleName: 'vaadin-notification-card',
-    style: () => `
-    vaadin-notification-card {
-      box-shadow: none;
-    }
-    ::part(overlay) {
-      box-shadow: none;
-      background: none;
-    }
-
-    [part="close"] {
-      cursor: pointer;
-      display: flex;
-    }
-
-    [part="content"] {
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-    }
-
-    [part="root"] {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-    }
-    `,
-    excludeAttrsSync: ['tabindex'],
-    componentName,
-  })
-);
-
 const globalRefs$2 = getThemeRefs(globals);
 const vars$3 = NotificationCardClass.cssVarList;
 
@@ -10254,5 +10376,5 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$y, components: vars };
 
-export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map