@descope/web-components-ui 1.0.222 → 1.0.223

package/dist/index.esm.js

@@ -231,11 +231,11 @@ const createStyle = (componentName, baseSelector, mappings) => {
 
     const cssVarName = getCssVarName(componentName, attr);
 
-    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
+    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
       style.add(
         createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
         isFunction(property) ? property() : property,
-        createCssVarFallback(cssVarName)
+        createCssVarFallback(cssVarName) + (important ? '!important' : '')
       );
     });
   });
@@ -392,10 +392,10 @@ const createStyleMixin =
         (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
       }
 
-      init() {
+      async init() {
         super.init?.();
         if (this.shadowRoot.isConnected) {
-          this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
+          this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
 
           this.#addClassName(componentName);
 
@@ -1048,7 +1048,27 @@ const DISPLAY_NAME_SEPARATOR = '_';
 
 const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
-const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
+const withWaitForShadowRoot = (getRootElementFn) => (that) =>
+  new Promise((res) => {
+    const MAX_RETRIES = 20;
+    const ele = getRootElementFn(that);
+    let counter = 0;
+
+    const check = () => {
+      if (counter > MAX_RETRIES) {
+        // eslint-disable-next-line no-console
+        console.error('could not get shadow root for element', ele);
+        res(ele);
+        return;
+      }
+
+      counter++;
+
+      if (!ele.shadowRoot) setTimeout(check);
+      else res(ele.shadowRoot);
+    };
+    check();
+  });
 
 const portalMixin =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
@@ -1078,17 +1098,17 @@ const portalMixin =
           const baseEle = that.shadowRoot.querySelector(that.baseSelector);
           const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
 
-          return portal.shadowRoot || portal;
+          return portal;
         };
 
         super({
-          getRootElement,
+          getRootElement: withWaitForShadowRoot(getRootElement),
           componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
           themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
           baseSelector: ':host',
         });
 
-        this.#portalEle = getDomNode(getRootElement(this));
+        this.#portalEle = getRootElement(this);
       }
 
       #handleHoverAttribute() {
@@ -1214,7 +1234,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$w = getComponentName('button');
+const componentName$x = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1311,7 +1331,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$w,
+    componentName: componentName$x,
   })
 );
 
@@ -1348,7 +1368,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$w, ButtonClass);
+customElements.define(componentName$x, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1358,11 +1378,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$v = getComponentName('boolean-field-internal');
+const componentName$w = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$5 {
   constructor() {
@@ -1422,14 +1442,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$v}
+				<${componentName$w}
 					tabindex="-1"
 					slot="input"
-				></${componentName$v}>
+				></${componentName$w}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$v);
+      this.inputElement = this.shadowRoot.querySelector(componentName$w);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1592,7 +1612,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$u = getComponentName('checkbox');
+const componentName$v = getComponentName('checkbox');
 
 const {
   host: host$e,
@@ -1689,15 +1709,15 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$u,
+    componentName: componentName$v,
   })
 );
 
-customElements.define(componentName$v, BooleanInputInternal);
+customElements.define(componentName$w, BooleanInputInternal);
 
-customElements.define(componentName$u, CheckboxClass);
+customElements.define(componentName$v, CheckboxClass);
 
-const componentName$t = getComponentName('switch-toggle');
+const componentName$u = getComponentName('switch-toggle');
 
 const {
   host: host$d,
@@ -1816,17 +1836,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$t,
+    componentName: componentName$u,
   })
 );
 
-customElements.define(componentName$t, SwitchToggleClass);
+customElements.define(componentName$u, SwitchToggleClass);
 
-const componentName$s = getComponentName('loader-linear');
+const componentName$t = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$s;
+    return componentName$t;
   }
 
   constructor() {
@@ -1887,11 +1907,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$s, LoaderLinearClass);
+customElements.define(componentName$t, LoaderLinearClass);
 
-const componentName$r = getComponentName('loader-radial');
+const componentName$s = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -1935,11 +1955,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$r, LoaderRadialClass);
+customElements.define(componentName$s, LoaderRadialClass);
 
-const componentName$q = getComponentName('container');
+const componentName$r = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -1991,10 +2011,10 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$q, ContainerClass);
+customElements.define(componentName$r, ContainerClass);
 
-const componentName$p = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
+const componentName$q = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2092,9 +2112,9 @@ const DividerClass = compose(
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$o = getComponentName('text');
+const componentName$p = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2153,9 +2173,9 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-customElements.define(componentName$o, TextClass);
+customElements.define(componentName$p, TextClass);
 
-customElements.define(componentName$p, DividerClass);
+customElements.define(componentName$q, DividerClass);
 
 const { host: host$a, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
   {
@@ -2211,9 +2231,9 @@ var textFieldMappings = {
   inputPlaceholderColor: { ...placeholder$2, property: 'color' },
 };
 
-const componentName$n = getComponentName('email-field');
+const componentName$o = getComponentName('email-field');
 
-const customMixin$6 = (superclass) =>
+const customMixin$7 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
@@ -2227,7 +2247,7 @@ const EmailFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$6
+  customMixin$7
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -2245,15 +2265,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$n,
+    componentName: componentName$o,
   })
 );
 
-customElements.define(componentName$n, EmailFieldClass);
+customElements.define(componentName$o, EmailFieldClass);
 
-const componentName$m = getComponentName('link');
+const componentName$n = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$m, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$n, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2317,7 +2337,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$m, LinkClass);
+customElements.define(componentName$n, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2369,27 +2389,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$l = getComponentName('logo');
+const componentName$m = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$l,
+  componentName: componentName$m,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$l, LogoClass);
+customElements.define(componentName$m, LogoClass);
 
-const componentName$k = getComponentName('totp-image');
+const componentName$l = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$k,
+  componentName: componentName$l,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$k, TotpImageClass);
+customElements.define(componentName$l, TotpImageClass);
 
-const componentName$j = getComponentName('number-field');
+const componentName$k = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2414,11 +2434,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$j,
+    componentName: componentName$k,
   })
 );
 
-customElements.define(componentName$j, NumberFieldClass);
+customElements.define(componentName$k, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2436,13 +2456,13 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$i = getComponentName('passcode-internal');
+const componentName$j = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -2639,11 +2659,11 @@ class PasscodeInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$h = getComponentName('text-field');
+const componentName$i = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
-const customMixin$5 = (superclass) =>
+const customMixin$6 = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2670,7 +2690,7 @@ const TextFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$5
+  customMixin$6
 )(
   createProxy({
     slots: ['prefix', 'suffix'],
@@ -2688,15 +2708,15 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$h,
+    componentName: componentName$i,
   })
 );
 
-const componentName$g = getComponentName('passcode');
+const componentName$h = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
-const customMixin$4 = (superclass) =>
+const customMixin$5 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
       return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -2711,17 +2731,17 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$i}
+      <${componentName$j}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$i}>
+      ><slot></slot></${componentName$j}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$i);
+      this.inputElement = this.shadowRoot.querySelector(componentName$j);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
     }
@@ -2788,7 +2808,7 @@ const PasscodeClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$4
+  customMixin$5
 )(
   createProxy({
     slots: [],
@@ -2859,15 +2879,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$g,
+    componentName: componentName$h,
   })
 );
 
-customElements.define(componentName$h, TextFieldClass);
+customElements.define(componentName$i, TextFieldClass);
 
-customElements.define(componentName$i, PasscodeInternal);
+customElements.define(componentName$j, PasscodeInternal);
 
-customElements.define(componentName$g, PasscodeClass);
+customElements.define(componentName$h, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -2903,7 +2923,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$f = getComponentName('password');
+const componentName$g = getComponentName('password');
 
 const {
   host: host$7,
@@ -3032,13 +3052,13 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$f,
+    componentName: componentName$g,
   })
 );
 
-customElements.define(componentName$f, PasswordClass);
+customElements.define(componentName$g, PasswordClass);
 
-const componentName$e = getComponentName('text-area');
+const componentName$f = getComponentName('text-area');
 
 const {
   host: host$6,
@@ -3111,17 +3131,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$e,
+    componentName: componentName$f,
   })
 );
 
-customElements.define(componentName$e, TextAreaClass);
+customElements.define(componentName$f, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$d = getComponentName('image');
+const componentName$e = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$d, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$e, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3161,9 +3181,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$d, ImageClass);
+customElements.define(componentName$e, ImageClass);
 
-const componentName$c = getComponentName('combo-box');
+const componentName$d = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3514,12 +3534,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$c,
+    componentName: componentName$d,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$c, ComboBoxClass);
+customElements.define(componentName$d, ComboBoxClass);
 
 var CountryCodes = [
   {
@@ -4759,7 +4779,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$b = getComponentName('phone-field-internal');
+const componentName$c = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -4771,7 +4791,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -4943,14 +4963,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   }
 };
 
-customElements.define(componentName$b, PhoneFieldInternal$1);
+customElements.define(componentName$c, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$a = getComponentName('phone-field');
+const componentName$b = getComponentName('phone-field');
 
-const customMixin$3 = (superclass) =>
+const customMixin$4 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -4962,15 +4982,15 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$b}
+				<${componentName$c}
 					tabindex="-1"
 					slot="input"
-				></${componentName$b}>
+				></${componentName$c}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$b);
+      this.inputElement = this.shadowRoot.querySelector(componentName$c);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5089,7 +5109,7 @@ const PhoneFieldClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$3
+  customMixin$4
 )(
   createProxy({
     slots: [],
@@ -5165,17 +5185,17 @@ const PhoneFieldClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$a,
+    componentName: componentName$b,
   })
 );
 
-customElements.define(componentName$a, PhoneFieldClass);
+customElements.define(componentName$b, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$9 = getComponentName('phone-field-internal-input-box');
+const componentName$a = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -5189,7 +5209,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -5328,13 +5348,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
   }
 }
 
-customElements.define(componentName$9, PhoneFieldInternal);
+customElements.define(componentName$a, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$8 = getComponentName('phone-input-box-field');
+const componentName$9 = getComponentName('phone-input-box-field');
 
-const customMixin$2 = (superclass) =>
+const customMixin$3 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -5346,15 +5366,15 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$9}
+				<${componentName$a}
 					tabindex="-1"
 					slot="input"
-				></${componentName$9}>
+				></${componentName$a}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$9);
+      this.inputElement = this.shadowRoot.querySelector(componentName$a);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5420,7 +5440,7 @@ const PhoneFieldInputBoxClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$2
+  customMixin$3
 )(
   createProxy({
     slots: [],
@@ -5486,17 +5506,17 @@ const PhoneFieldInputBoxClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$8,
+    componentName: componentName$9,
   })
 );
 
-customElements.define(componentName$8, PhoneFieldInputBoxClass);
+customElements.define(componentName$9, PhoneFieldInputBoxClass);
 
-const componentName$7 = getComponentName('new-password-internal');
+const componentName$8 = getComponentName('new-password-internal');
 
-const componentName$6 = getComponentName('new-password');
+const componentName$7 = getComponentName('new-password');
 
-const customMixin$1 = (superclass) =>
+const customMixin$2 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
       super.init?.();
@@ -5504,16 +5524,16 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$7}
+			<${componentName$8}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$7}>
+			></${componentName$8}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$7);
+      this.inputElement = this.shadowRoot.querySelector(componentName$8);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5563,7 +5583,7 @@ const NewPasswordClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$1
+  customMixin$2
 )(
   createProxy({
     slots: [],
@@ -5612,7 +5632,7 @@ const NewPasswordClass = compose(
 		},
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$6,
+    componentName: componentName$7,
   })
 );
 
@@ -5637,7 +5657,7 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -5797,16 +5817,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$7, NewPasswordInternal);
+customElements.define(componentName$8, NewPasswordInternal);
 
-customElements.define(componentName$6, NewPasswordClass);
+customElements.define(componentName$7, NewPasswordClass);
 
-const componentName$5 = getComponentName('recaptcha');
+const componentName$6 = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
-  componentName: componentName$5,
+  componentName: componentName$6,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -5958,7 +5978,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$5, RecaptchaClass);
+customElements.define(componentName$6, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -5972,7 +5992,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$4 = getComponentName('upload-file');
+const componentName$5 = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -5987,7 +6007,7 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -6197,12 +6217,12 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$4, UploadFileClass);
+customElements.define(componentName$5, UploadFileClass);
 
-const componentName$3 = getComponentName('button-selection-group-internal');
+const componentName$4 = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseInputClass({
-  componentName: componentName$3,
+  componentName: componentName$4,
   baseSelector: 'slot',
 }) {
   constructor() {
@@ -6339,9 +6359,9 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
   }
 }
 
-const componentName$2 = getComponentName('button-selection-group');
+const componentName$3 = getComponentName('button-selection-group');
 
-const customMixin = (superclass) =>
+const customMixin$1 = (superclass) =>
   class ButtonSelectionGroupMixinClass extends superclass {
     // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ value, label }) =>
@@ -6414,18 +6434,18 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$3}
+			<${componentName$4}
 				name="button-selection-group"
 				slot="input"
         tabindex="-1"
 			>
         <slot></slot>
-      </${componentName$3}>
+      </${componentName$4}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$3);
+      this.inputElement = this.shadowRoot.querySelector(componentName$4);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6469,7 +6489,7 @@ const ButtonSelectionGroupClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin
+  customMixin$1
 )(
   createProxy({
     slots: [],
@@ -6528,18 +6548,18 @@ const ButtonSelectionGroupClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$2,
+    componentName: componentName$3,
   })
 );
 
-customElements.define(componentName$3, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$4, ButtonSelectionGroupInternalClass);
 
-customElements.define(componentName$2, ButtonSelectionGroupClass);
+customElements.define(componentName$3, ButtonSelectionGroupClass);
 
-const componentName$1 = getComponentName('button-selection-group-item');
+const componentName$2 = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$1,
+  componentName: componentName$2,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -6633,7 +6653,7 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$1, ButtonSelectionGroupItemClass);
+customElements.define(componentName$2, ButtonSelectionGroupItemClass);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -6961,10 +6981,10 @@ const globals = {
   shadow,
   fonts,
 };
-const vars$r = getThemeVars(globals);
+const vars$s = getThemeVars(globals);
 
 const globalRefs$d = getThemeRefs(globals);
-const compVars$3 = ButtonClass.cssVarList;
+const compVars$4 = ButtonClass.cssVarList;
 
 const mode = {
   primary: globalRefs$d.colors.primary,
@@ -6974,51 +6994,51 @@ const mode = {
   surface: globalRefs$d.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$w);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$x);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$3.fontFamily]: globalRefs$d.fonts.font1.family,
+  [compVars$4.fontFamily]: globalRefs$d.fonts.font1.family,
 
-  [compVars$3.cursor]: 'pointer',
-  [compVars$3.hostHeight]: '3em',
-  [compVars$3.hostWidth]: 'auto',
+  [compVars$4.cursor]: 'pointer',
+  [compVars$4.hostHeight]: '3em',
+  [compVars$4.hostWidth]: 'auto',
 
-  [compVars$3.borderRadius]: globalRefs$d.radius.sm,
-  [compVars$3.borderWidth]: globalRefs$d.border.xs,
-  [compVars$3.borderStyle]: 'solid',
-  [compVars$3.borderColor]: 'transparent',
+  [compVars$4.borderRadius]: globalRefs$d.radius.sm,
+  [compVars$4.borderWidth]: globalRefs$d.border.xs,
+  [compVars$4.borderStyle]: 'solid',
+  [compVars$4.borderColor]: 'transparent',
 
-  [compVars$3.labelSpacing]: '0.25em',
+  [compVars$4.labelSpacing]: '0.25em',
 
-  [compVars$3.verticalPadding]: '1em',
+  [compVars$4.verticalPadding]: '1em',
 
-  [compVars$3.outlineWidth]: globals.border.sm,
-  [compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
-  [compVars$3.outlineStyle]: 'solid',
-  [compVars$3.outlineColor]: 'transparent',
+  [compVars$4.outlineWidth]: globals.border.sm,
+  [compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
+  [compVars$4.outlineStyle]: 'solid',
+  [compVars$4.outlineColor]: 'transparent',
 
   size: {
-    xs: { [compVars$3.fontSize]: '12px' },
-    sm: { [compVars$3.fontSize]: '14px' },
-    md: { [compVars$3.fontSize]: '16px' },
-    lg: { [compVars$3.fontSize]: '18px' },
+    xs: { [compVars$4.fontSize]: '12px' },
+    sm: { [compVars$4.fontSize]: '14px' },
+    md: { [compVars$4.fontSize]: '16px' },
+    lg: { [compVars$4.fontSize]: '18px' },
   },
 
   _square: {
-    [compVars$3.hostHeight]: '3em',
-    [compVars$3.hostWidth]: '3em',
-    [compVars$3.verticalPadding]: '0',
+    [compVars$4.hostHeight]: '3em',
+    [compVars$4.hostWidth]: '3em',
+    [compVars$4.verticalPadding]: '0',
   },
 
   _fullWidth: {
-    [compVars$3.hostWidth]: '100%',
+    [compVars$4.hostWidth]: '100%',
   },
 
   _loading: {
-    [compVars$3.cursor]: 'wait',
-    [compVars$3.labelTextColor]: helperRefs$3.main,
+    [compVars$4.cursor]: 'wait',
+    [compVars$4.labelTextColor]: helperRefs$3.main,
   },
 
   _disabled: {
@@ -7030,62 +7050,62 @@ const button = {
 
   variant: {
     contained: {
-      [compVars$3.labelTextColor]: helperRefs$3.contrast,
-      [compVars$3.backgroundColor]: helperRefs$3.main,
+      [compVars$4.labelTextColor]: helperRefs$3.contrast,
+      [compVars$4.backgroundColor]: helperRefs$3.main,
       _hover: {
-        [compVars$3.backgroundColor]: helperRefs$3.dark,
+        [compVars$4.backgroundColor]: helperRefs$3.dark,
         _loading: {
-          [compVars$3.backgroundColor]: helperRefs$3.main,
+          [compVars$4.backgroundColor]: helperRefs$3.main,
         },
       },
       _active: {
-        [compVars$3.backgroundColor]: helperRefs$3.main,
+        [compVars$4.backgroundColor]: helperRefs$3.main,
       },
     },
 
     outline: {
-      [compVars$3.labelTextColor]: helperRefs$3.main,
-      [compVars$3.borderColor]: 'currentColor',
+      [compVars$4.labelTextColor]: helperRefs$3.main,
+      [compVars$4.borderColor]: 'currentColor',
       _hover: {
-        [compVars$3.labelTextColor]: helperRefs$3.dark,
+        [compVars$4.labelTextColor]: helperRefs$3.dark,
       },
       _active: {
-        [compVars$3.labelTextColor]: helperRefs$3.main,
+        [compVars$4.labelTextColor]: helperRefs$3.main,
       },
     },
 
     link: {
-      [compVars$3.labelTextColor]: helperRefs$3.main,
+      [compVars$4.labelTextColor]: helperRefs$3.main,
       _hover: {
-        [compVars$3.labelTextColor]: helperRefs$3.dark,
-        [compVars$3.labelTextDecoration]: 'underline',
+        [compVars$4.labelTextColor]: helperRefs$3.dark,
+        [compVars$4.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars$3.labelTextColor]: helperRefs$3.dark,
+        [compVars$4.labelTextColor]: helperRefs$3.dark,
       },
     },
   },
 
   _focused: {
-    [compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
+    [compVars$4.outlineColor]: globalRefs$d.colors.surface.main,
   },
 };
 
-const vars$q = {
-  ...compVars$3,
+const vars$r = {
+  ...compVars$4,
   ...helperVars$3,
 };
 
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$q
+  vars: vars$r
 });
 
-const componentName = getComponentName('input-wrapper');
+const componentName$1 = getComponentName('input-wrapper');
 const globalRefs$c = getThemeRefs(globals);
 
-const [theme$1, refs, vars$p] = createHelperVars(
+const [theme$1, refs, vars$q] = createHelperVars(
   {
     labelTextColor: globalRefs$c.colors.surface.contrast,
     valueTextColor: globalRefs$c.colors.surface.contrast,
@@ -7147,28 +7167,63 @@ const [theme$1, refs, vars$p] = createHelperVars(
       backgroundColor: globalRefs$c.colors.surface.main,
     },
   },
-  componentName
+  componentName$1
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$p
+  vars: vars$q
 });
 
-const vars$o = TextFieldClass.cssVarList;
+const vars$p = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$p.hostWidth]: refs.width,
+  [vars$p.hostMinWidth]: refs.minWidth,
+  [vars$p.fontSize]: refs.fontSize,
+  [vars$p.fontFamily]: refs.fontFamily,
+  [vars$p.labelTextColor]: refs.labelTextColor,
+  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$p.inputValueTextColor]: refs.valueTextColor,
+  [vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$p.inputBorderWidth]: refs.borderWidth,
+  [vars$p.inputBorderStyle]: refs.borderStyle,
+  [vars$p.inputBorderColor]: refs.borderColor,
+  [vars$p.inputBorderRadius]: refs.borderRadius,
+  [vars$p.inputOutlineWidth]: refs.outlineWidth,
+  [vars$p.inputOutlineStyle]: refs.outlineStyle,
+  [vars$p.inputOutlineColor]: refs.outlineColor,
+  [vars$p.inputOutlineOffset]: refs.outlineOffset,
+  [vars$p.inputBackgroundColor]: refs.backgroundColor,
+  [vars$p.inputHeight]: refs.inputHeight,
+  [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$p
+});
+
+const globalRefs$b = getThemeRefs(globals);
+const vars$o = PasswordClass.cssVarList;
+
+const password = {
   [vars$o.hostWidth]: refs.width,
-  [vars$o.hostMinWidth]: refs.minWidth,
   [vars$o.fontSize]: refs.fontSize,
   [vars$o.fontFamily]: refs.fontFamily,
   [vars$o.labelTextColor]: refs.labelTextColor,
-  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$o.inputHeight]: refs.inputHeight,
+  [vars$o.inputBackgroundColor]: refs.backgroundColor,
+  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$o.inputValueTextColor]: refs.valueTextColor,
-  [vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$o.inputBorderWidth]: refs.borderWidth,
   [vars$o.inputBorderStyle]: refs.borderStyle,
   [vars$o.inputBorderColor]: refs.borderColor,
@@ -7177,33 +7232,27 @@ const textField = {
   [vars$o.inputOutlineStyle]: refs.outlineStyle,
   [vars$o.inputOutlineColor]: refs.outlineColor,
   [vars$o.inputOutlineOffset]: refs.outlineOffset,
-  [vars$o.inputBackgroundColor]: refs.backgroundColor,
-  [vars$o.inputHeight]: refs.inputHeight,
-  [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$o.revealButtonOffset]: globalRefs$b.spacing.md,
+  [vars$o.revealButtonSize]: refs.toggleButtonSize,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$o
 });
 
-const globalRefs$b = getThemeRefs(globals);
-const vars$n = PasswordClass.cssVarList;
+const vars$n = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$n.hostWidth]: refs.width,
+  [vars$n.hostMinWidth]: refs.minWidth,
   [vars$n.fontSize]: refs.fontSize,
   [vars$n.fontFamily]: refs.fontFamily,
   [vars$n.labelTextColor]: refs.labelTextColor,
   [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$n.inputHeight]: refs.inputHeight,
-  [vars$n.inputBackgroundColor]: refs.backgroundColor,
-  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$n.inputValueTextColor]: refs.valueTextColor,
-  [vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$n.inputBorderWidth]: refs.borderWidth,
   [vars$n.inputBorderStyle]: refs.borderStyle,
   [vars$n.inputBorderColor]: refs.borderColor,
@@ -7212,19 +7261,21 @@ const password = {
   [vars$n.inputOutlineStyle]: refs.outlineStyle,
   [vars$n.inputOutlineColor]: refs.outlineColor,
   [vars$n.inputOutlineOffset]: refs.outlineOffset,
-  [vars$n.revealButtonOffset]: globalRefs$b.spacing.md,
-  [vars$n.revealButtonSize]: refs.toggleButtonSize,
+  [vars$n.inputBackgroundColor]: refs.backgroundColor,
+  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$n.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$n
 });
 
-const vars$m = NumberFieldClass.cssVarList;
+const vars$m = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$m.hostWidth]: refs.width,
   [vars$m.hostMinWidth]: refs.minWidth,
   [vars$m.fontSize]: refs.fontSize,
@@ -7232,6 +7283,7 @@ const numberField = {
   [vars$m.labelTextColor]: refs.labelTextColor,
   [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$m.inputValueTextColor]: refs.valueTextColor,
+  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$m.inputBorderWidth]: refs.borderWidth,
   [vars$m.inputBorderStyle]: refs.borderStyle,
@@ -7242,199 +7294,167 @@ const numberField = {
   [vars$m.inputOutlineColor]: refs.outlineColor,
   [vars$m.inputOutlineOffset]: refs.outlineOffset,
   [vars$m.inputBackgroundColor]: refs.backgroundColor,
-  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$m.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$m
 });
 
-const vars$l = EmailFieldClass.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const vars$l = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [vars$l.hostWidth]: refs.width,
   [vars$l.hostMinWidth]: refs.minWidth,
   [vars$l.fontSize]: refs.fontSize,
   [vars$l.fontFamily]: refs.fontFamily,
   [vars$l.labelTextColor]: refs.labelTextColor,
+  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$l.inputBackgroundColor]: refs.backgroundColor,
   [vars$l.inputValueTextColor]: refs.valueTextColor,
-  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$l.inputBorderRadius]: refs.borderRadius,
   [vars$l.inputBorderWidth]: refs.borderWidth,
   [vars$l.inputBorderStyle]: refs.borderStyle,
   [vars$l.inputBorderColor]: refs.borderColor,
-  [vars$l.inputBorderRadius]: refs.borderRadius,
   [vars$l.inputOutlineWidth]: refs.outlineWidth,
   [vars$l.inputOutlineStyle]: refs.outlineStyle,
   [vars$l.inputOutlineColor]: refs.outlineColor,
   [vars$l.inputOutlineOffset]: refs.outlineOffset,
-  [vars$l.inputBackgroundColor]: refs.backgroundColor,
-  [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$l.inputHeight]: refs.inputHeight,
+  [vars$l.inputResizeType]: 'vertical',
+  [vars$l.inputMinHeight]: '5em',
+
+  _disabled: {
+    [vars$l.inputBackgroundColor]: globalRefs$a.colors.surface.light,
+  },
+
+  _readonly: {
+    [vars$l.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$l
 });
 
-const globalRefs$a = getThemeRefs(globals);
-const vars$k = TextAreaClass.cssVarList;
+const vars$k = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [vars$k.hostWidth]: refs.width,
-  [vars$k.hostMinWidth]: refs.minWidth,
   [vars$k.fontSize]: refs.fontSize,
   [vars$k.fontFamily]: refs.fontFamily,
   [vars$k.labelTextColor]: refs.labelTextColor,
   [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$k.labelFontWeight]: '400',
+  [vars$k.labelLineHeight]: checkboxSize,
+  [vars$k.labelSpacing]: '1em',
   [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$k.inputBackgroundColor]: refs.backgroundColor,
-  [vars$k.inputValueTextColor]: refs.valueTextColor,
-  [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$k.inputOutlineWidth]: refs.outlineWidth,
+  [vars$k.inputOutlineOffset]: refs.outlineOffset,
+  [vars$k.inputOutlineColor]: refs.outlineColor,
+  [vars$k.inputOutlineStyle]: refs.outlineStyle,
   [vars$k.inputBorderRadius]: refs.borderRadius,
+  [vars$k.inputBorderColor]: refs.borderColor,
   [vars$k.inputBorderWidth]: refs.borderWidth,
   [vars$k.inputBorderStyle]: refs.borderStyle,
-  [vars$k.inputBorderColor]: refs.borderColor,
-  [vars$k.inputOutlineWidth]: refs.outlineWidth,
-  [vars$k.inputOutlineStyle]: refs.outlineStyle,
-  [vars$k.inputOutlineColor]: refs.outlineColor,
-  [vars$k.inputOutlineOffset]: refs.outlineOffset,
-  [vars$k.inputResizeType]: 'vertical',
-  [vars$k.inputMinHeight]: '5em',
+  [vars$k.inputBackgroundColor]: refs.backgroundColor,
+  [vars$k.inputSize]: checkboxSize,
 
-  _disabled: {
-    [vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
+  _checked: {
+    [vars$k.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$k.inputResizeType]: 'none',
+  _disabled: {
+    [vars$k.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$k
 });
 
-const vars$j = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$9 = getThemeRefs(globals);
+const vars$j = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [vars$j.hostWidth]: refs.width,
   [vars$j.fontSize]: refs.fontSize,
   [vars$j.fontFamily]: refs.fontFamily,
-  [vars$j.labelTextColor]: refs.labelTextColor,
-  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$j.labelFontWeight]: '400',
-  [vars$j.labelLineHeight]: checkboxSize,
-  [vars$j.labelSpacing]: '1em',
-  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$j.inputOutlineWidth]: refs.outlineWidth,
   [vars$j.inputOutlineOffset]: refs.outlineOffset,
   [vars$j.inputOutlineColor]: refs.outlineColor,
   [vars$j.inputOutlineStyle]: refs.outlineStyle,
-  [vars$j.inputBorderRadius]: refs.borderRadius,
-  [vars$j.inputBorderColor]: refs.borderColor,
-  [vars$j.inputBorderWidth]: refs.borderWidth,
-  [vars$j.inputBorderStyle]: refs.borderStyle,
-  [vars$j.inputBackgroundColor]: refs.backgroundColor,
-  [vars$j.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars$j.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$j.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$j
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$i = SwitchToggleClass.cssVarList;
+  [vars$j.trackBorderStyle]: refs.borderStyle,
+  [vars$j.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$j.trackBorderColor]: refs.borderColor,
+  [vars$j.trackBackgroundColor]: 'none',
+  [vars$j.trackBorderRadius]: globalRefs$9.radius.md,
+  [vars$j.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$j.trackHeight]: checkboxHeight,
+
+  [vars$j.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$j.knobRadius]: '50%',
+  [vars$j.knobTopOffset]: '1px',
+  [vars$j.knobLeftOffset]: knobMargin,
+  [vars$j.knobColor]: refs.valueTextColor,
+  [vars$j.knobTransitionDuration]: '0.3s',
 
-const switchToggle = {
-  [vars$i.hostWidth]: refs.width,
-  [vars$i.fontSize]: refs.fontSize,
-  [vars$i.fontFamily]: refs.fontFamily,
-
-  [vars$i.inputOutlineWidth]: refs.outlineWidth,
-  [vars$i.inputOutlineOffset]: refs.outlineOffset,
-  [vars$i.inputOutlineColor]: refs.outlineColor,
-  [vars$i.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$i.trackBorderStyle]: refs.borderStyle,
-  [vars$i.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$i.trackBorderColor]: refs.borderColor,
-  [vars$i.trackBackgroundColor]: 'none',
-  [vars$i.trackBorderRadius]: globalRefs$9.radius.md,
-  [vars$i.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$i.trackHeight]: checkboxHeight,
-
-  [vars$i.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$i.knobRadius]: '50%',
-  [vars$i.knobTopOffset]: '1px',
-  [vars$i.knobLeftOffset]: knobMargin,
-  [vars$i.knobColor]: refs.valueTextColor,
-  [vars$i.knobTransitionDuration]: '0.3s',
-
-  [vars$i.labelTextColor]: refs.labelTextColor,
-  [vars$i.labelFontWeight]: '400',
-  [vars$i.labelLineHeight]: '1.35em',
-  [vars$i.labelSpacing]: '1em',
-  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$j.labelTextColor]: refs.labelTextColor,
+  [vars$j.labelFontWeight]: '400',
+  [vars$j.labelLineHeight]: '1.35em',
+  [vars$j.labelSpacing]: '1em',
+  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$i.trackBorderColor]: refs.borderColor,
-    [vars$i.trackBackgroundColor]: refs.backgroundColor,
-    [vars$i.knobLeftOffset]: `calc(100% - var(${vars$i.knobSize}) - ${knobMargin})`,
-    [vars$i.knobColor]: refs.valueTextColor,
-    [vars$i.knobTextColor]: refs.valueTextColor,
+    [vars$j.trackBorderColor]: refs.borderColor,
+    [vars$j.trackBackgroundColor]: refs.backgroundColor,
+    [vars$j.knobLeftOffset]: `calc(100% - var(${vars$j.knobSize}) - ${knobMargin})`,
+    [vars$j.knobColor]: refs.valueTextColor,
+    [vars$j.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$i.knobColor]: globalRefs$9.colors.surface.light,
-    [vars$i.trackBorderColor]: globalRefs$9.colors.surface.main,
-    [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
-    [vars$i.labelTextColor]: refs.labelTextColor,
+    [vars$j.knobColor]: globalRefs$9.colors.surface.light,
+    [vars$j.trackBorderColor]: globalRefs$9.colors.surface.main,
+    [vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
+    [vars$j.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$i.knobColor]: globalRefs$9.colors.surface.light,
-      [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
+      [vars$j.knobColor]: globalRefs$9.colors.surface.light,
+      [vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
-    [vars$i.knobColor]: globalRefs$9.colors.error.main,
+    [vars$j.trackBorderColor]: globalRefs$9.colors.error.main,
+    [vars$j.knobColor]: globalRefs$9.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$i
+  vars: vars$j
 });
 
 const globalRefs$8 = getThemeRefs(globals);
 
-const compVars$2 = ContainerClass.cssVarList;
+const compVars$3 = ContainerClass.cssVarList;
 
 const verticalAlignment = {
   start: { verticalAlignment: 'start' },
@@ -7454,7 +7474,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$q
+  componentName$r
 );
 
 const { shadowColor } = helperRefs$2;
@@ -7462,30 +7482,30 @@ const { shadowColor } = helperRefs$2;
 const container = {
   ...helperTheme$2,
 
-  [compVars$2.hostWidth]: '100%',
-  [compVars$2.boxShadow]: 'none',
-  [compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
-  [compVars$2.color]: globalRefs$8.colors.surface.contrast,
-  [compVars$2.borderRadius]: '0px',
+  [compVars$3.hostWidth]: '100%',
+  [compVars$3.boxShadow]: 'none',
+  [compVars$3.backgroundColor]: globalRefs$8.colors.surface.light,
+  [compVars$3.color]: globalRefs$8.colors.surface.contrast,
+  [compVars$3.borderRadius]: '0px',
 
   verticalPadding: {
-    sm: { [compVars$2.verticalPadding]: '5px' },
-    md: { [compVars$2.verticalPadding]: '10px' },
-    lg: { [compVars$2.verticalPadding]: '20px' },
+    sm: { [compVars$3.verticalPadding]: '5px' },
+    md: { [compVars$3.verticalPadding]: '10px' },
+    lg: { [compVars$3.verticalPadding]: '20px' },
   },
 
   horizontalPadding: {
-    sm: { [compVars$2.horizontalPadding]: '5px' },
-    md: { [compVars$2.horizontalPadding]: '10px' },
-    lg: { [compVars$2.horizontalPadding]: '20px' },
+    sm: { [compVars$3.horizontalPadding]: '5px' },
+    md: { [compVars$3.horizontalPadding]: '10px' },
+    lg: { [compVars$3.horizontalPadding]: '20px' },
   },
 
   direction: {
     row: {
-      [compVars$2.flexDirection]: 'row',
-      [compVars$2.alignItems]: helperRefs$2.verticalAlignment,
-      [compVars$2.justifyContent]: helperRefs$2.horizontalAlignment,
-      [compVars$2.flexWrap]: 'wrap',
+      [compVars$3.flexDirection]: 'row',
+      [compVars$3.alignItems]: helperRefs$2.verticalAlignment,
+      [compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
+      [compVars$3.flexWrap]: 'wrap',
       horizontalAlignment: {
         spaceBetween: {
           [helperVars$2.horizontalAlignment]: 'space-between',
@@ -7493,9 +7513,9 @@ const container = {
       },
     },
     column: {
-      [compVars$2.flexDirection]: 'column',
-      [compVars$2.alignItems]: helperRefs$2.horizontalAlignment,
-      [compVars$2.justifyContent]: helperRefs$2.verticalAlignment,
+      [compVars$3.flexDirection]: 'column',
+      [compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
+      [compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
       verticalAlignment: {
         spaceBetween: {
           [helperVars$2.verticalAlignment]: 'space-between',
@@ -7505,194 +7525,194 @@ const container = {
   },
 
   spaceBetween: {
-    sm: { [compVars$2.gap]: '10px' },
-    md: { [compVars$2.gap]: '20px' },
-    lg: { [compVars$2.gap]: '30px' },
+    sm: { [compVars$3.gap]: '10px' },
+    md: { [compVars$3.gap]: '20px' },
+    lg: { [compVars$3.gap]: '30px' },
   },
 
   shadow: {
     sm: {
-      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
+      [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
     },
     md: {
-      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
+      [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
     },
     lg: {
-      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
+      [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
     },
     xl: {
-      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
+      [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
+      [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$2.borderRadius]: globalRefs$8.radius.sm },
-    md: { [compVars$2.borderRadius]: globalRefs$8.radius.md },
-    lg: { [compVars$2.borderRadius]: globalRefs$8.radius.lg },
-    xl: { [compVars$2.borderRadius]: globalRefs$8.radius.xl },
-    '2xl': { [compVars$2.borderRadius]: globalRefs$8.radius['2xl'] },
-    '3xl': { [compVars$2.borderRadius]: globalRefs$8.radius['3xl'] },
+    sm: { [compVars$3.borderRadius]: globalRefs$8.radius.sm },
+    md: { [compVars$3.borderRadius]: globalRefs$8.radius.md },
+    lg: { [compVars$3.borderRadius]: globalRefs$8.radius.lg },
+    xl: { [compVars$3.borderRadius]: globalRefs$8.radius.xl },
+    '2xl': { [compVars$3.borderRadius]: globalRefs$8.radius['2xl'] },
+    '3xl': { [compVars$3.borderRadius]: globalRefs$8.radius['3xl'] },
   },
 };
 
-const vars$h = {
-  ...compVars$2,
+const vars$i = {
+  ...compVars$3,
   ...helperVars$2,
 };
 
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$h
+  vars: vars$i
 });
 
-const vars$g = LogoClass.cssVarList;
+const vars$h = LogoClass.cssVarList;
 
 const logo$1 = {
-  [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$h.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$g
+  vars: vars$h
 });
 
-const vars$f = TotpImageClass.cssVarList;
+const vars$g = TotpImageClass.cssVarList;
 
 const logo = {
-  [vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$f
+  vars: vars$g
 });
 
 const globalRefs$7 = getThemeRefs(globals);
-const vars$e = TextClass.cssVarList;
+const vars$f = TextClass.cssVarList;
 
 const text = {
-  [vars$e.textLineHeight]: '1.35em',
-  [vars$e.textAlign]: 'left',
-  [vars$e.textColor]: globalRefs$7.colors.surface.dark,
+  [vars$f.textLineHeight]: '1.35em',
+  [vars$f.textAlign]: 'left',
+  [vars$f.textColor]: globalRefs$7.colors.surface.dark,
   variant: {
     h1: {
-      [vars$e.fontSize]: globalRefs$7.typography.h1.size,
-      [vars$e.fontWeight]: globalRefs$7.typography.h1.weight,
-      [vars$e.fontFamily]: globalRefs$7.typography.h1.font,
+      [vars$f.fontSize]: globalRefs$7.typography.h1.size,
+      [vars$f.fontWeight]: globalRefs$7.typography.h1.weight,
+      [vars$f.fontFamily]: globalRefs$7.typography.h1.font,
     },
     h2: {
-      [vars$e.fontSize]: globalRefs$7.typography.h2.size,
-      [vars$e.fontWeight]: globalRefs$7.typography.h2.weight,
-      [vars$e.fontFamily]: globalRefs$7.typography.h2.font,
+      [vars$f.fontSize]: globalRefs$7.typography.h2.size,
+      [vars$f.fontWeight]: globalRefs$7.typography.h2.weight,
+      [vars$f.fontFamily]: globalRefs$7.typography.h2.font,
     },
     h3: {
-      [vars$e.fontSize]: globalRefs$7.typography.h3.size,
-      [vars$e.fontWeight]: globalRefs$7.typography.h3.weight,
-      [vars$e.fontFamily]: globalRefs$7.typography.h3.font,
+      [vars$f.fontSize]: globalRefs$7.typography.h3.size,
+      [vars$f.fontWeight]: globalRefs$7.typography.h3.weight,
+      [vars$f.fontFamily]: globalRefs$7.typography.h3.font,
     },
     subtitle1: {
-      [vars$e.fontSize]: globalRefs$7.typography.subtitle1.size,
-      [vars$e.fontWeight]: globalRefs$7.typography.subtitle1.weight,
-      [vars$e.fontFamily]: globalRefs$7.typography.subtitle1.font,
+      [vars$f.fontSize]: globalRefs$7.typography.subtitle1.size,
+      [vars$f.fontWeight]: globalRefs$7.typography.subtitle1.weight,
+      [vars$f.fontFamily]: globalRefs$7.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$e.fontSize]: globalRefs$7.typography.subtitle2.size,
-      [vars$e.fontWeight]: globalRefs$7.typography.subtitle2.weight,
-      [vars$e.fontFamily]: globalRefs$7.typography.subtitle2.font,
+      [vars$f.fontSize]: globalRefs$7.typography.subtitle2.size,
+      [vars$f.fontWeight]: globalRefs$7.typography.subtitle2.weight,
+      [vars$f.fontFamily]: globalRefs$7.typography.subtitle2.font,
     },
     body1: {
-      [vars$e.fontSize]: globalRefs$7.typography.body1.size,
-      [vars$e.fontWeight]: globalRefs$7.typography.body1.weight,
-      [vars$e.fontFamily]: globalRefs$7.typography.body1.font,
+      [vars$f.fontSize]: globalRefs$7.typography.body1.size,
+      [vars$f.fontWeight]: globalRefs$7.typography.body1.weight,
+      [vars$f.fontFamily]: globalRefs$7.typography.body1.font,
     },
     body2: {
-      [vars$e.fontSize]: globalRefs$7.typography.body2.size,
-      [vars$e.fontWeight]: globalRefs$7.typography.body2.weight,
-      [vars$e.fontFamily]: globalRefs$7.typography.body2.font,
+      [vars$f.fontSize]: globalRefs$7.typography.body2.size,
+      [vars$f.fontWeight]: globalRefs$7.typography.body2.weight,
+      [vars$f.fontFamily]: globalRefs$7.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$e.textColor]: globalRefs$7.colors.primary.main,
+      [vars$f.textColor]: globalRefs$7.colors.primary.main,
     },
     secondary: {
-      [vars$e.textColor]: globalRefs$7.colors.secondary.main,
+      [vars$f.textColor]: globalRefs$7.colors.secondary.main,
     },
     error: {
-      [vars$e.textColor]: globalRefs$7.colors.error.main,
+      [vars$f.textColor]: globalRefs$7.colors.error.main,
     },
     success: {
-      [vars$e.textColor]: globalRefs$7.colors.success.main,
+      [vars$f.textColor]: globalRefs$7.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$e.textAlign]: 'right' },
-    left: { [vars$e.textAlign]: 'left' },
-    center: { [vars$e.textAlign]: 'center' },
+    right: { [vars$f.textAlign]: 'right' },
+    left: { [vars$f.textAlign]: 'left' },
+    center: { [vars$f.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$e.hostWidth]: '100%',
+    [vars$f.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$e.fontStyle]: 'italic',
+    [vars$f.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$e.textTransform]: 'uppercase',
+    [vars$f.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$e.textTransform]: 'lowercase',
+    [vars$f.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$e
+  vars: vars$f
 });
 
 const globalRefs$6 = getThemeRefs(globals);
-const vars$d = LinkClass.cssVarList;
+const vars$e = LinkClass.cssVarList;
 
 const link = {
-  [vars$d.cursor]: 'pointer',
+  [vars$e.cursor]: 'pointer',
 
-  [vars$d.textColor]: globalRefs$6.colors.primary.main,
+  [vars$e.textColor]: globalRefs$6.colors.primary.main,
 
   textAlign: {
-    right: { [vars$d.textAlign]: 'right' },
-    left: { [vars$d.textAlign]: 'left' },
-    center: { [vars$d.textAlign]: 'center' },
+    right: { [vars$e.textAlign]: 'right' },
+    left: { [vars$e.textAlign]: 'left' },
+    center: { [vars$e.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$d.hostWidth]: '100%',
+    [vars$e.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$d.textColor]: globalRefs$6.colors.primary.main,
+      [vars$e.textColor]: globalRefs$6.colors.primary.main,
     },
     secondary: {
-      [vars$d.textColor]: globalRefs$6.colors.secondary.main,
+      [vars$e.textColor]: globalRefs$6.colors.secondary.main,
     },
     error: {
-      [vars$d.textColor]: globalRefs$6.colors.error.main,
+      [vars$e.textColor]: globalRefs$6.colors.error.main,
     },
     success: {
-      [vars$d.textColor]: globalRefs$6.colors.success.main,
+      [vars$e.textColor]: globalRefs$6.colors.success.main,
     },
   },
 };
@@ -7700,133 +7720,133 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$d
+  vars: vars$e
 });
 
 const globalRefs$5 = getThemeRefs(globals);
-const compVars$1 = DividerClass.cssVarList;
+const compVars$2 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   {
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$p
+  componentName$q
 );
 
 const divider = {
   ...helperTheme$1,
 
-  [compVars$1.alignItems]: 'center',
-  [compVars$1.flexDirection]: 'row',
-  [compVars$1.alignSelf]: 'stretch',
-  [compVars$1.hostWidth]: '100%',
-  [compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
-  [compVars$1.stripeColorOpacity]: '0.5',
-  [compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
-  [compVars$1.labelTextWidth]: 'fit-content',
-  [compVars$1.labelTextMaxWidth]: 'calc(100% - 100px)',
-  [compVars$1.labelTextHorizontalSpacing]: helperRefs$1.spacing,
+  [compVars$2.alignItems]: 'center',
+  [compVars$2.flexDirection]: 'row',
+  [compVars$2.alignSelf]: 'stretch',
+  [compVars$2.hostWidth]: '100%',
+  [compVars$2.stripeColor]: globalRefs$5.colors.surface.main,
+  [compVars$2.stripeColorOpacity]: '0.5',
+  [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
+  [compVars$2.labelTextWidth]: 'fit-content',
+  [compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
+  [compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
 
   _vertical: {
-    [compVars$1.minHeight]: '200px',
-    [compVars$1.flexDirection]: 'column',
-    [compVars$1.hostWidth]: 'fit-content',
-    [compVars$1.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
-    [compVars$1.stripeVerticalThickness]: helperRefs$1.thickness,
-    [compVars$1.labelTextWidth]: 'fit-content',
-    [compVars$1.labelTextMaxWidth]: '100%',
-    [compVars$1.labelTextVerticalSpacing]: helperRefs$1.spacing,
+    [compVars$2.minHeight]: '200px',
+    [compVars$2.flexDirection]: 'column',
+    [compVars$2.hostWidth]: 'fit-content',
+    [compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
+    [compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
+    [compVars$2.labelTextWidth]: 'fit-content',
+    [compVars$2.labelTextMaxWidth]: '100%',
+    [compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
   },
 };
 
-const vars$c = {
-  ...compVars$1,
+const vars$d = {
+  ...compVars$2,
   ...helperVars$1,
 };
 
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$c
+  vars: vars$d
 });
 
-const vars$b = PasscodeClass.cssVarList;
+const vars$c = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$b.fontFamily]: refs.fontFamily,
-  [vars$b.fontSize]: refs.fontSize,
-  [vars$b.labelTextColor]: refs.labelTextColor,
-  [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$b.digitValueTextColor]: refs.valueTextColor,
-  [vars$b.digitPadding]: '0',
-  [vars$b.digitTextAlign]: 'center',
-  [vars$b.digitSpacing]: '4px',
-  [vars$b.hostWidth]: refs.width,
-  [vars$b.digitOutlineColor]: 'transparent',
-  [vars$b.digitOutlineWidth]: refs.outlineWidth,
-  [vars$b.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$b.digitSize]: refs.inputHeight,
+  [vars$c.fontFamily]: refs.fontFamily,
+  [vars$c.fontSize]: refs.fontSize,
+  [vars$c.labelTextColor]: refs.labelTextColor,
+  [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$c.digitValueTextColor]: refs.valueTextColor,
+  [vars$c.digitPadding]: '0',
+  [vars$c.digitTextAlign]: 'center',
+  [vars$c.digitSpacing]: '4px',
+  [vars$c.hostWidth]: refs.width,
+  [vars$c.digitOutlineColor]: 'transparent',
+  [vars$c.digitOutlineWidth]: refs.outlineWidth,
+  [vars$c.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$c.digitSize]: refs.inputHeight,
 
   _hideCursor: {
-    [vars$b.digitCaretTextColor]: 'transparent',
+    [vars$c.digitCaretTextColor]: 'transparent',
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$b
+  vars: vars$c
 });
 
 const globalRefs$4 = getThemeRefs(globals);
-const vars$a = LoaderLinearClass.cssVarList;
+const vars$b = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$a.hostDisplay]: 'inline-block',
-  [vars$a.hostWidth]: '100%',
+  [vars$b.hostDisplay]: 'inline-block',
+  [vars$b.hostWidth]: '100%',
 
-  [vars$a.barColor]: globalRefs$4.colors.surface.contrast,
-  [vars$a.barWidth]: '20%',
+  [vars$b.barColor]: globalRefs$4.colors.surface.contrast,
+  [vars$b.barWidth]: '20%',
 
-  [vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
-  [vars$a.barBorderRadius]: '4px',
+  [vars$b.barBackgroundColor]: globalRefs$4.colors.surface.main,
+  [vars$b.barBorderRadius]: '4px',
 
-  [vars$a.animationDuration]: '2s',
-  [vars$a.animationTimingFunction]: 'linear',
-  [vars$a.animationIterationCount]: 'infinite',
-  [vars$a.verticalPadding]: '0.25em',
+  [vars$b.animationDuration]: '2s',
+  [vars$b.animationTimingFunction]: 'linear',
+  [vars$b.animationIterationCount]: 'infinite',
+  [vars$b.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$a.barHeight]: '2px' },
-    sm: { [vars$a.barHeight]: '4px' },
-    md: { [vars$a.barHeight]: '6px' },
-    lg: { [vars$a.barHeight]: '8px' },
+    xs: { [vars$b.barHeight]: '2px' },
+    sm: { [vars$b.barHeight]: '4px' },
+    md: { [vars$b.barHeight]: '6px' },
+    lg: { [vars$b.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$a.barColor]: globalRefs$4.colors.primary.main,
+      [vars$b.barColor]: globalRefs$4.colors.primary.main,
     },
     secondary: {
-      [vars$a.barColor]: globalRefs$4.colors.secondary.main,
+      [vars$b.barColor]: globalRefs$4.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$a.hostDisplay]: 'none',
+    [vars$b.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$a
+  vars: vars$b
 });
 
 const globalRefs$3 = getThemeRefs(globals);
-const compVars = LoaderRadialClass.cssVarList;
+const compVars$1 = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
@@ -7840,110 +7860,145 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$r
+  componentName$s
 );
 
 const loaderRadial = {
   ...helperTheme,
 
-  [compVars.animationDuration]: '2s',
-  [compVars.animationTimingFunction]: 'linear',
-  [compVars.animationIterationCount]: 'infinite',
-  [compVars.spinnerBorderStyle]: 'solid',
-  [compVars.spinnerBorderWidth]: '0.2em',
-  [compVars.spinnerBorderRadius]: '50%',
-  [compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
-  [compVars.spinnerQuadrant2Color]: 'transparent',
-  [compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
-  [compVars.spinnerQuadrant4Color]: 'transparent',
+  [compVars$1.animationDuration]: '2s',
+  [compVars$1.animationTimingFunction]: 'linear',
+  [compVars$1.animationIterationCount]: 'infinite',
+  [compVars$1.spinnerBorderStyle]: 'solid',
+  [compVars$1.spinnerBorderWidth]: '0.2em',
+  [compVars$1.spinnerBorderRadius]: '50%',
+  [compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
+  [compVars$1.spinnerQuadrant2Color]: 'transparent',
+  [compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
+  [compVars$1.spinnerQuadrant4Color]: 'transparent',
 
   size: {
-    xs: { [compVars.spinnerSize]: '20px' },
-    sm: { [compVars.spinnerSize]: '30px' },
-    md: { [compVars.spinnerSize]: '40px' },
-    lg: { [compVars.spinnerSize]: '60px' },
-    xl: { [compVars.spinnerSize]: '80px' },
+    xs: { [compVars$1.spinnerSize]: '20px' },
+    sm: { [compVars$1.spinnerSize]: '30px' },
+    md: { [compVars$1.spinnerSize]: '40px' },
+    lg: { [compVars$1.spinnerSize]: '60px' },
+    xl: { [compVars$1.spinnerSize]: '80px' },
   },
 
   _hidden: {
-    [compVars.hostDisplay]: 'none',
+    [compVars$1.hostDisplay]: 'none',
   },
 };
-const vars$9 = {
-  ...compVars,
+const vars$a = {
+  ...compVars$1,
   ...helperVars,
 };
 
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$9
+  vars: vars$a
 });
 
 const globalRefs$2 = getThemeRefs(globals);
-const vars$8 = ComboBoxClass.cssVarList;
+const vars$9 = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$8.hostWidth]: refs.width,
-  [vars$8.fontSize]: refs.fontSize,
-  [vars$8.fontFamily]: refs.fontFamily,
-  [vars$8.labelTextColor]: refs.labelTextColor,
-  [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$8.inputBorderColor]: refs.borderColor,
-  [vars$8.inputBorderWidth]: refs.borderWidth,
-  [vars$8.inputBorderStyle]: refs.borderStyle,
-  [vars$8.inputBorderRadius]: refs.borderRadius,
-  [vars$8.inputOutlineColor]: refs.outlineColor,
-  [vars$8.inputOutlineOffset]: refs.outlineOffset,
-  [vars$8.inputOutlineWidth]: refs.outlineWidth,
-  [vars$8.inputOutlineStyle]: refs.outlineStyle,
-  [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$8.inputValueTextColor]: refs.valueTextColor,
-  [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$8.inputBackgroundColor]: refs.backgroundColor,
-  [vars$8.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$8.inputHeight]: refs.inputHeight,
-  [vars$8.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
-  [vars$8.inputDropdownButtonCursor]: 'pointer',
-  [vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$8.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
+  [vars$9.hostWidth]: refs.width,
+  [vars$9.fontSize]: refs.fontSize,
+  [vars$9.fontFamily]: refs.fontFamily,
+  [vars$9.labelTextColor]: refs.labelTextColor,
+  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$9.inputBorderColor]: refs.borderColor,
+  [vars$9.inputBorderWidth]: refs.borderWidth,
+  [vars$9.inputBorderStyle]: refs.borderStyle,
+  [vars$9.inputBorderRadius]: refs.borderRadius,
+  [vars$9.inputOutlineColor]: refs.outlineColor,
+  [vars$9.inputOutlineOffset]: refs.outlineOffset,
+  [vars$9.inputOutlineWidth]: refs.outlineWidth,
+  [vars$9.inputOutlineStyle]: refs.outlineStyle,
+  [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$9.inputValueTextColor]: refs.valueTextColor,
+  [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$9.inputBackgroundColor]: refs.backgroundColor,
+  [vars$9.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$9.inputHeight]: refs.inputHeight,
+  [vars$9.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
+  [vars$9.inputDropdownButtonCursor]: 'pointer',
+  [vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$9.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
 
   _readonly: {
-    [vars$8.inputDropdownButtonCursor]: 'default',
+    [vars$9.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$8.overlayFontSize]: refs.fontSize,
-  [vars$8.overlayFontFamily]: refs.fontFamily,
-  [vars$8.overlayCursor]: 'pointer',
-  [vars$8.overlayItemBoxShadow]: 'none',
+  [vars$9.overlayFontSize]: refs.fontSize,
+  [vars$9.overlayFontFamily]: refs.fontFamily,
+  [vars$9.overlayCursor]: 'pointer',
+  [vars$9.overlayItemBoxShadow]: 'none',
 
   // Overlay direct theme:
-  [vars$8.overlay.minHeight]: '400px',
-  [vars$8.overlay.margin]: '0',
+  [vars$9.overlay.minHeight]: '400px',
+  [vars$9.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$8
+  vars: vars$9
 });
 
-const vars$7 = ImageClass.cssVarList;
+const vars$8 = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$7
+  vars: vars$8
 });
 
-const vars$6 = PhoneFieldClass.cssVarList;
+const vars$7 = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$6.hostWidth]: refs.width,
+  [vars$7.hostWidth]: refs.width,
+  [vars$7.fontSize]: refs.fontSize,
+  [vars$7.fontFamily]: refs.fontFamily,
+  [vars$7.labelTextColor]: refs.labelTextColor,
+  [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$7.inputValueTextColor]: refs.valueTextColor,
+  [vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$7.inputBorderStyle]: refs.borderStyle,
+  [vars$7.inputBorderWidth]: refs.borderWidth,
+  [vars$7.inputBorderColor]: refs.borderColor,
+  [vars$7.inputBorderRadius]: refs.borderRadius,
+  [vars$7.inputOutlineStyle]: refs.outlineStyle,
+  [vars$7.inputOutlineWidth]: refs.outlineWidth,
+  [vars$7.inputOutlineColor]: refs.outlineColor,
+  [vars$7.inputOutlineOffset]: refs.outlineOffset,
+  [vars$7.phoneInputWidth]: refs.minWidth,
+  [vars$7.countryCodeInputWidth]: '5em',
+  [vars$7.countryCodeDropdownWidth]: '20em',
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$7
+});
+
+const vars$6 = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$6.hostWidth]: '16em',
+  [vars$6.hostMinWidth]: refs.minWidth,
   [vars$6.fontSize]: refs.fontSize,
   [vars$6.fontFamily]: refs.fontFamily,
   [vars$6.labelTextColor]: refs.labelTextColor,
@@ -7959,185 +8014,269 @@ const phoneField = {
   [vars$6.inputOutlineWidth]: refs.outlineWidth,
   [vars$6.inputOutlineColor]: refs.outlineColor,
   [vars$6.inputOutlineOffset]: refs.outlineOffset,
-  [vars$6.phoneInputWidth]: refs.minWidth,
-  [vars$6.countryCodeInputWidth]: '5em',
-  [vars$6.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
-};
-
-var phoneField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneField,
-  vars: vars$6
-});
-
-const vars$5 = PhoneFieldInputBoxClass.cssVarList;
-
-const phoneInputBoxField = {
-  [vars$5.hostWidth]: '16em',
-  [vars$5.hostMinWidth]: refs.minWidth,
-  [vars$5.fontSize]: refs.fontSize,
-  [vars$5.fontFamily]: refs.fontFamily,
-  [vars$5.labelTextColor]: refs.labelTextColor,
-  [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$5.inputValueTextColor]: refs.valueTextColor,
-  [vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$5.inputBorderStyle]: refs.borderStyle,
-  [vars$5.inputBorderWidth]: refs.borderWidth,
-  [vars$5.inputBorderColor]: refs.borderColor,
-  [vars$5.inputBorderRadius]: refs.borderRadius,
-  [vars$5.inputOutlineStyle]: refs.outlineStyle,
-  [vars$5.inputOutlineWidth]: refs.outlineWidth,
-  [vars$5.inputOutlineColor]: refs.outlineColor,
-  [vars$5.inputOutlineOffset]: refs.outlineOffset,
   _fullWidth: {
-    [vars$5.hostWidth]: refs.width,
+    [vars$6.hostWidth]: refs.width,
   },
 };
 
 var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneInputBoxField,
-  vars: vars$5
+  vars: vars$6
 });
 
-const vars$4 = NewPasswordClass.cssVarList;
+const vars$5 = NewPasswordClass.cssVarList;
 
 const newPassword = {
-  [vars$4.hostWidth]: refs.width,
-  [vars$4.hostMinWidth]: refs.minWidth,
-  [vars$4.fontSize]: refs.fontSize,
-  [vars$4.fontFamily]: refs.fontFamily,
-  [vars$4.spaceBetweenInputs]: '1em',
-  [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$5.hostWidth]: refs.width,
+  [vars$5.hostMinWidth]: refs.minWidth,
+  [vars$5.fontSize]: refs.fontSize,
+  [vars$5.fontFamily]: refs.fontFamily,
+  [vars$5.spaceBetweenInputs]: '1em',
+  [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
     // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$4.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$5.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
   },
 };
 
 var newPassword$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: newPassword,
-  vars: vars$4
+  vars: vars$5
 });
 
-const vars$3 = UploadFileClass.cssVarList;
+const vars$4 = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$3.labelTextColor]: refs.labelTextColor,
-  [vars$3.fontFamily]: refs.fontFamily,
+  [vars$4.labelTextColor]: refs.labelTextColor,
+  [vars$4.fontFamily]: refs.fontFamily,
 
-  [vars$3.iconSize]: '2em',
+  [vars$4.iconSize]: '2em',
 
-  [vars$3.hostPadding]: '0.75em',
-  [vars$3.gap]: '0.5em',
+  [vars$4.hostPadding]: '0.75em',
+  [vars$4.gap]: '0.5em',
 
-  [vars$3.fontSize]: '16px',
-  [vars$3.titleFontWeight]: '500',
-  [vars$3.lineHeight]: '1em',
+  [vars$4.fontSize]: '16px',
+  [vars$4.titleFontWeight]: '500',
+  [vars$4.lineHeight]: '1em',
 
-  [vars$3.borderWidth]: refs.borderWidth,
-  [vars$3.borderColor]: refs.borderColor,
-  [vars$3.borderRadius]: refs.borderRadius,
-  [vars$3.borderStyle]: 'dashed',
+  [vars$4.borderWidth]: refs.borderWidth,
+  [vars$4.borderColor]: refs.borderColor,
+  [vars$4.borderRadius]: refs.borderRadius,
+  [vars$4.borderStyle]: 'dashed',
 
   _required: {
-    [vars$3.requiredIndicator]: refs.requiredIndicator,
+    [vars$4.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$3.hostHeight]: '196px',
-      [vars$3.hostWidth]: '200px',
-      [vars$3.titleFontSize]: '0.875em',
-      [vars$3.descriptionFontSize]: '0.875em',
-      [vars$3.lineHeight]: '1.25em',
+      [vars$4.hostHeight]: '196px',
+      [vars$4.hostWidth]: '200px',
+      [vars$4.titleFontSize]: '0.875em',
+      [vars$4.descriptionFontSize]: '0.875em',
+      [vars$4.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$3.hostHeight]: '216px',
-      [vars$3.hostWidth]: '230px',
-      [vars$3.titleFontSize]: '1em',
-      [vars$3.descriptionFontSize]: '0.875em',
-      [vars$3.lineHeight]: '1.25em',
+      [vars$4.hostHeight]: '216px',
+      [vars$4.hostWidth]: '230px',
+      [vars$4.titleFontSize]: '1em',
+      [vars$4.descriptionFontSize]: '0.875em',
+      [vars$4.lineHeight]: '1.25em',
     },
     md: {
-      [vars$3.hostHeight]: '256px',
-      [vars$3.hostWidth]: '312px',
-      [vars$3.titleFontSize]: '1.125em',
-      [vars$3.descriptionFontSize]: '1em',
-      [vars$3.lineHeight]: '1.5em',
+      [vars$4.hostHeight]: '256px',
+      [vars$4.hostWidth]: '312px',
+      [vars$4.titleFontSize]: '1.125em',
+      [vars$4.descriptionFontSize]: '1em',
+      [vars$4.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$3.hostHeight]: '280px',
-      [vars$3.hostWidth]: '336px',
-      [vars$3.titleFontSize]: '1.125em',
-      [vars$3.descriptionFontSize]: '1.125em',
-      [vars$3.lineHeight]: '1.75em',
+      [vars$4.hostHeight]: '280px',
+      [vars$4.hostWidth]: '336px',
+      [vars$4.titleFontSize]: '1.125em',
+      [vars$4.descriptionFontSize]: '1.125em',
+      [vars$4.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$3.hostWidth]: refs.width,
+    [vars$4.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$3
+  vars: vars$4
 });
 
 const globalRefs$1 = getThemeRefs(globals);
 
-const vars$2 = ButtonSelectionGroupItemClass.cssVarList;
+const vars$3 = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
-  [vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
-  [vars$2.borderColor]: globalRefs$1.colors.surface.main,
-  [vars$2.borderStyle]: 'solid',
-  [vars$2.borderRadius]: globalRefs$1.radius.sm,
+  [vars$3.backgroundColor]: globalRefs$1.colors.surface.light,
+  [vars$3.labelTextColor]: globalRefs$1.colors.surface.contrast,
+  [vars$3.borderColor]: globalRefs$1.colors.surface.main,
+  [vars$3.borderStyle]: 'solid',
+  [vars$3.borderRadius]: globalRefs$1.radius.sm,
 
   _hover: {
-    [vars$2.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+    [vars$3.backgroundColor]: '#f4f5f5', // can we take it from the palette?
   },
 
   _selected: {
-    [vars$2.borderColor]: globalRefs$1.colors.surface.contrast,
-    [vars$2.backgroundColor]: globalRefs$1.colors.surface.contrast,
-    [vars$2.labelTextColor]: globalRefs$1.colors.surface.light,
+    [vars$3.borderColor]: globalRefs$1.colors.surface.contrast,
+    [vars$3.backgroundColor]: globalRefs$1.colors.surface.contrast,
+    [vars$3.labelTextColor]: globalRefs$1.colors.surface.light,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$2
+  vars: vars$3
 });
 
 const globalRefs = getThemeRefs(globals);
-const vars$1 = ButtonSelectionGroupClass.cssVarList;
+const vars$2 = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  [vars$1.fontFamily]: refs.fontFamily,
-  [vars$1.labelTextColor]: refs.labelTextColor,
-  [vars$1.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$1.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$1.itemsSpacing]: globalRefs.spacing.sm,
-  [vars$1.hostWidth]: refs.width,
+  [vars$2.fontFamily]: refs.fontFamily,
+  [vars$2.labelTextColor]: refs.labelTextColor,
+  [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$2.itemsSpacing]: globalRefs.spacing.sm,
+  [vars$2.hostWidth]: refs.width,
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
+  vars: vars$2
+});
+
+const componentName = getComponentName('modal');
+
+const customMixin = (superclass) =>
+  class ModalMixinClass extends superclass {
+    get opened() {
+      return this.getAttribute('opened') === 'true';
+    }
+
+    handleOpened() {
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
+      if (this.opened) {
+        this.style.display = '';
+      } else {
+        this.style.display = 'none';
+      }
+    }
+
+    init() {
+      super.init?.();
+      this.style.display = 'none';
+
+      // vaadin-dialog might not be loaded in time
+      // in order to make sure it's loaded before this block is running
+      // we are wrapping it with setTimeout
+      setTimeout(() => {
+        // we want to sync descope-modal content through vaadin-dialog into the overlay
+        // so we are adding a slot to the overlay, which allows us to forward the content from
+        // vaadin-dialog to vaadin-dialog-overlay
+        this.baseElement.shadowRoot
+          .querySelector('vaadin-dialog-overlay')
+          .appendChild(document.createElement('slot'));
+
+        this.#overrideOverlaySettings();
+
+        // we need to always open the modal in `opened=false`
+        // to prevent it from rendering outside the dialog
+        // first, we have to run `overrideOverlaySettings` to setup
+        // the component.
+        this.handleOpened();
+      });
+    }
+
+    // the default vaadin behavior is to attach the overlay to the body when opened
+    // we do not want that because it's difficult to style the overlay in this way
+    // so we override it to open inside the shadow DOM
+    #overrideOverlaySettings() {
+      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
+
+      overlay._attachOverlay = () => {
+        overlay.bringToFront();
+        this.baseElement.setAttribute('style', 'display:flex!important;');
+      };
+      overlay._detachOverlay = () => {
+        this.baseElement.style.display = 'none';
+      };
+      overlay._enterModalState = () => {};
+
+      overlay.close = () => false;
+    }
+  };
+
+const ModalClass = compose(
+  createStyleMixin({
+    mappings: {
+      overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
+      overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
+      overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
+    },
+  }),
+  portalMixin({
+    name: 'overlay',
+    selector: '',
+    mappings: {
+      hostDisplay: {
+        selector: () => ':host(.descope-modal)',
+        property: 'display',
+        important: true,
+      },
+      backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
+      width: { selector: () => '::part(overlay)', property: 'width' },
+      shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
+    },
+    forward: {
+      include: false,
+      attributes: ['opened'],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [''],
+    wrappedEleName: 'vaadin-dialog',
+    style: () => ``,
+    excludeAttrsSync: ['tabindex', 'opened'],
+    componentName,
+  })
+);
+
+const compVars = ModalClass.cssVarList;
+
+const modal = {
+  [compVars.hostWidth]: '400px',
+  [compVars.hostHeight]: '400px',
+  [compVars.overlayShadow]: 'none',
+  [compVars.overlayWidth]: '700px',
+};
+
+const vars$1 = {
+  ...compVars,
+};
+
+var modal$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: modal,
   vars: vars$1
 });
 
@@ -8168,6 +8307,7 @@ const components = {
   uploadFile: uploadFile$1,
   buttonSelectionGroupItem: buttonSelectionGroupItem$1,
   buttonSelectionGroup: buttonSelectionGroup$1,
+  modal: modal$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -8180,7 +8320,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$r, components: vars };
+const themeVars = { globals: vars$s, components: vars };
 
 export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map