@descope/web-components-ui 1.0.402 → 1.0.404

package/dist/index.esm.js

@@ -1433,13 +1433,13 @@ const inputEventsDispatchingMixin = (superclass) =>
     handleInputEventDispatching() {
       let previousRootComponentValue = this.value;
 
+      // we are comparing the previous value to the new one,
+      // and if they have the same value, we are blocking the input event
       this.addEventListener('input', (e) => {
-        // we are comparing the previous value to the new one,
-        // and if they have the same value, we are blocking the input event
-        if (previousRootComponentValue === this.value) {
-          e.stopImmediatePropagation();
-        } else {
+        e.stopImmediatePropagation();
+        if (previousRootComponentValue !== this.value) {
           previousRootComponentValue = this.value;
+          createDispatchEvent.call(this, 'input', { bubbles: true });
         }
       });
     }
@@ -1755,9 +1755,9 @@ const createIcon = async (src) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$14 = getComponentName('icon');
+const componentName$15 = getComponentName('icon');
 
-class RawIcon extends createBaseClass({ componentName: componentName$14, baseSelector: 'slot' }) {
+class RawIcon extends createBaseClass({ componentName: componentName$15, baseSelector: 'slot' }) {
   static get observedAttributes() {
     return ['src'];
   }
@@ -1842,7 +1842,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$13 = getComponentName('button');
+const componentName$14 = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1958,7 +1958,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$13,
+    componentName: componentName$14,
   })
 );
 
@@ -1995,7 +1995,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$13, ButtonClass);
+customElements.define(componentName$14, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -2005,11 +2005,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$12 = getComponentName('boolean-field-internal');
+const componentName$13 = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$a = createBaseInputClass({ componentName: componentName$12, baseSelector: 'div' });
+const BaseInputClass$a = createBaseInputClass({ componentName: componentName$13, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$a {
   static get observedAttributes() {
@@ -2085,14 +2085,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$12}
+				<${componentName$13}
 					tabindex="-1"
 					slot="input"
-				></${componentName$12}>
+				></${componentName$13}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$12);
+      this.inputElement = this.shadowRoot.querySelector(componentName$13);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -2306,7 +2306,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$11 = getComponentName('checkbox');
+const componentName$12 = getComponentName('checkbox');
 
 const {
   host: host$n,
@@ -2418,15 +2418,15 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$11,
+    componentName: componentName$12,
   })
 );
 
-customElements.define(componentName$12, BooleanInputInternal);
+customElements.define(componentName$13, BooleanInputInternal);
 
-customElements.define(componentName$11, CheckboxClass);
+customElements.define(componentName$12, CheckboxClass);
 
-const componentName$10 = getComponentName('switch-toggle');
+const componentName$11 = getComponentName('switch-toggle');
 
 const {
   host: host$m,
@@ -2558,17 +2558,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$10,
+    componentName: componentName$11,
   })
 );
 
-customElements.define(componentName$10, SwitchToggleClass);
+customElements.define(componentName$11, SwitchToggleClass);
 
-const componentName$$ = getComponentName('loader-linear');
+const componentName$10 = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$$, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$10, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$$;
+    return componentName$10;
   }
 
   constructor() {
@@ -2629,11 +2629,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$$, LoaderLinearClass);
+customElements.define(componentName$10, LoaderLinearClass);
 
-const componentName$_ = getComponentName('loader-radial');
+const componentName$$ = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$_, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$$, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2677,11 +2677,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$_, LoaderRadialClass);
+customElements.define(componentName$$, LoaderRadialClass);
 
-const componentName$Z = getComponentName('container');
+const componentName$_ = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$Z, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$_, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2740,9 +2740,9 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$Z, ContainerClass);
+customElements.define(componentName$_, ContainerClass);
 
-const componentName$Y = getComponentName('combo-box');
+const componentName$Z = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3187,14 +3187,14 @@ 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$Y,
+    componentName: componentName$Z,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$Y, ComboBoxClass);
+customElements.define(componentName$Z, ComboBoxClass);
 
-customElements.define(componentName$14, IconClass);
+customElements.define(componentName$15, IconClass);
 
 const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
 
@@ -3511,7 +3511,7 @@ const nextMonth = (timestamp) => {
   return date;
 };
 
-const componentName$X = getComponentName('calendar');
+const componentName$Y = getComponentName('calendar');
 
 const observedAttrs$2 = [
   'initial-value',
@@ -3528,7 +3528,7 @@ const observedAttrs$2 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$X, baseSelector: 'div' });
+const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$Y, baseSelector: 'div' });
 
 class RawCalendar extends BaseInputClass$9 {
   static get observedAttributes() {
@@ -4141,7 +4141,7 @@ const CalendarClass = compose(
   componentNameValidationMixin
 )(RawCalendar);
 
-customElements.define(componentName$X, CalendarClass);
+customElements.define(componentName$Y, CalendarClass);
 
 const {
   host: host$j,
@@ -4289,7 +4289,7 @@ var textFieldMappings = {
   inputIconColor: { ...inputIcon, property: 'color' },
 };
 
-const componentName$W = getComponentName('text-field');
+const componentName$X = getComponentName('text-field');
 
 const observedAttrs$1 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -4411,11 +4411,11 @@ const TextFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$W,
+    componentName: componentName$X,
   })
 );
 
-customElements.define(componentName$W, TextFieldClass);
+customElements.define(componentName$X, TextFieldClass);
 
 const patterns = {
   MM: '(0?[1-9]|1[0-2])',
@@ -4548,12 +4548,12 @@ class DateCounter {
   }
 }
 
-const componentName$V = getComponentName('date-field');
+const componentName$W = getComponentName('date-field');
 
 // we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
 // be able to process this component's overlay. The whole process needs refactoring as soon as possible.
 const BASE_SELECTOR = 'vaadin-popover';
-const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$V, baseSelector: BASE_SELECTOR });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$W, baseSelector: BASE_SELECTOR });
 
 const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
@@ -5224,11 +5224,11 @@ const DateFieldClass = compose(
   componentNameValidationMixin
 )(RawDateFieldClass);
 
-customElements.define(componentName$V, DateFieldClass);
+customElements.define(componentName$W, DateFieldClass);
 
-const componentName$U = getComponentName('text');
+const componentName$V = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$U, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$V, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -5285,8 +5285,8 @@ const TextClass = compose(
   componentNameValidationMixin
 )(RawText);
 
-const componentName$T = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$T, baseSelector: ':host > div' }) {
+const componentName$U = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$U, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -5385,11 +5385,11 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$U, TextClass);
+customElements.define(componentName$V, TextClass);
 
-customElements.define(componentName$T, DividerClass);
+customElements.define(componentName$U, DividerClass);
 
-const componentName$S = getComponentName('email-field');
+const componentName$T = getComponentName('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -5458,15 +5458,15 @@ const EmailFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$S,
+    componentName: componentName$T,
   })
 );
 
-customElements.define(componentName$S, EmailFieldClass);
+customElements.define(componentName$T, EmailFieldClass);
 
-const componentName$R = getComponentName('link');
+const componentName$S = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$R, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$S, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -5530,7 +5530,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$R, LinkClass);
+customElements.define(componentName$S, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -5582,37 +5582,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$Q = getComponentName('logo');
+const componentName$R = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$Q,
+  componentName: componentName$R,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$Q, LogoClass);
+customElements.define(componentName$R, LogoClass);
 
-const componentName$P = getComponentName('totp-image');
+const componentName$Q = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$P,
+  componentName: componentName$Q,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$P, TotpImageClass);
+customElements.define(componentName$Q, TotpImageClass);
 
-const componentName$O = getComponentName('notp-image');
+const componentName$P = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$O,
+  componentName: componentName$P,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$O, NotpImageClass);
+customElements.define(componentName$P, NotpImageClass);
 
-const componentName$N = getComponentName('number-field');
+const componentName$O = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -5646,11 +5646,11 @@ const NumberFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$N,
+    componentName: componentName$O,
   })
 );
 
-customElements.define(componentName$N, NumberFieldClass);
+customElements.define(componentName$O, NumberFieldClass);
 
 const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
 const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
@@ -5696,13 +5696,13 @@ const toggleMaskVisibility = (input, value) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$M = getComponentName('passcode-internal');
+const componentName$N = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$M, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$N, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -5920,7 +5920,7 @@ class PasscodeInternal extends BaseInputClass$7 {
   }
 }
 
-const componentName$L = getComponentName('passcode');
+const componentName$M = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -5939,17 +5939,17 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$M}
+      <${componentName$N}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$M}>
+      ><slot></slot></${componentName$N}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$M);
+      this.inputElement = this.shadowRoot.querySelector(componentName$N);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -6101,13 +6101,13 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$L,
+    componentName: componentName$M,
   })
 );
 
-customElements.define(componentName$M, PasscodeInternal);
+customElements.define(componentName$N, PasscodeInternal);
 
-customElements.define(componentName$L, PasscodeClass);
+customElements.define(componentName$M, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -6148,7 +6148,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$K = getComponentName('password');
+const componentName$L = getComponentName('password');
 
 const customMixin$9 = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -6424,11 +6424,11 @@ const PasswordClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$K,
+    componentName: componentName$L,
   })
 );
 
-customElements.define(componentName$K, PasswordClass);
+customElements.define(componentName$L, PasswordClass);
 
 const disableRules = [
   'blockquote',
@@ -6454,9 +6454,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
 
 
-const componentName$J = getComponentName('enriched-text');
+const componentName$K = getComponentName('enriched-text');
 
-class EnrichedText extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -6652,9 +6652,9 @@ const EnrichedTextClass = compose(
   componentNameValidationMixin
 )(EnrichedText);
 
-customElements.define(componentName$J, EnrichedTextClass);
+customElements.define(componentName$K, EnrichedTextClass);
 
-const componentName$I = getComponentName('text-area');
+const componentName$J = getComponentName('text-area');
 
 const {
   host: host$d,
@@ -6730,20 +6730,20 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$I,
+    componentName: componentName$J,
   })
 );
 
-customElements.define(componentName$I, TextAreaClass);
+customElements.define(componentName$J, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$H = getComponentName('image');
+const componentName$I = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$H, baseSelector: ':host > img' });
-class RawImage extends BaseClass$1 {
+const BaseClass$2 = createBaseClass({ componentName: componentName$I, baseSelector: ':host > img' });
+class RawImage extends BaseClass$2 {
   static get observedAttributes() {
-    return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
+    return observedAttributes$3.concat(BaseClass$2.observedAttributes || []);
   }
 
   constructor() {
@@ -6780,7 +6780,7 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$H, ImageClass);
+customElements.define(componentName$I, ImageClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -8049,9 +8049,9 @@ const parsePhoneNumber = (val) => {
   return [countryCode, phoneNumber];
 };
 
-const componentName$G = getComponentName('phone-field-internal');
+const componentName$H = getComponentName('phone-field-internal');
 
-const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
+const commonAttrs$1 = ['disabled', 'size', 'bordered', 'readonly', 'allow-alphanumeric-input'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
 const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
 const labelTypeAttrs = ['label-type', 'country-input-label', 'label'];
@@ -8063,7 +8063,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
 
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$H, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -8074,7 +8074,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
     super();
 
     this.innerHTML = `
-    <div>
+    <div class="wrapper">
       <descope-combo-box
         item-label-path="data-name"
         item-value-path="data-id"
@@ -8100,6 +8100,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
     };
   }
 
+  get countryCodeInputData() {
+    return this.countryCodeInput.items;
+  }
+
+  get allowAlphanumericInput() {
+    return this.getAttribute('allow-alphanumeric-input') === 'true';
+  }
+
   get value() {
     if (!this.phoneNumberValue) {
       return '';
@@ -8110,15 +8118,35 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   set value(val) {
     const [countryCode, phoneNumber] = parsePhoneNumber(val);
 
-    if (countryCode) {
-      const countryCodeItem = this.getCountryByDialCode(countryCode);
+    this.#setCountryCode(countryCode);
+    this.#setPhoneNumber(phoneNumber);
+  }
+
+  setSelectionRange(...args) {
+    this.phoneNumberInput.setSelectionRange(...args);
+  }
+
+  get selectionStart() {
+    return this.phoneNumberInput.selectionStart;
+  }
+
+  #setCountryCode(val) {
+    if (val) {
+      const countryCodeItem = this.getCountryByDialCode(val);
       if (countryCodeItem) {
         this.countryCodeInput.selectedItem = countryCodeItem;
       }
     } else {
       this.countryCodeInput.selectedItem = undefined;
     }
-    this.phoneNumberInput.value = this.phoneNumberInput.value || phoneNumber;
+  }
+
+  #setPhoneNumber(val) {
+    if (this.phoneNumberInput.value === val) {
+      return;
+    }
+
+    this.phoneNumberInput.value = val;
   }
 
   get phoneNumberValue() {
@@ -8129,6 +8157,10 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
     return this.countryCodeInput.shadowRoot.querySelector('input').value;
   }
 
+  get phoneNumberInputEle() {
+    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  }
+
   get minLength() {
     return parseInt(this.getAttribute('minlength'), 10) || 0;
   }
@@ -8202,12 +8234,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   initInputs() {
     // Sanitize phone input value to filter everything but digits
     this.phoneNumberInput.addEventListener('input', (e) => {
-      const telDigitsRegExp = /^\d$/;
-      const sanitizedInput = e.target.value
-        .split('')
-        .filter((char) => telDigitsRegExp.test(char))
-        .join('');
-      e.target.value = sanitizedInput;
+      if (!this.allowAlphanumericInput) {
+        const telDigitsRegExp = /^\d$/;
+        const sanitizedInput = e.target.value
+          .split('')
+          .filter((char) => telDigitsRegExp.test(char))
+          .join('');
+        e.target.value = sanitizedInput;
+      }
     });
 
     this.handleFocusEventsDispatching(this.inputs);
@@ -8280,12 +8314,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   }
 };
 
-customElements.define(componentName$G, PhoneFieldInternal$1);
+customElements.define(componentName$H, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$F = getComponentName('phone-field');
+const componentName$G = getComponentName('phone-field');
 
 const customMixin$8 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -8299,15 +8333,15 @@ const customMixin$8 = (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);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -8325,9 +8359,28 @@ const customMixin$8 = (superclass) =>
           'readonly',
           'label',
           'label-type',
+          'allow-alphanumeric-input',
         ],
       });
     }
+
+    get countryCodeItems() {
+      return this.inputElement?.countryCodeValue;
+    }
+
+    get phoneNumberInputEle() {
+      return this.inputElement?.phoneNumberInputEle;
+    }
+
+    get countryCodeInputData() {
+      return this.inputElement?.countryCodeInputData;
+    }
+
+    get countryCodes() {
+      return Array.from(this.inputElement.countryCodeInputData).map((ele) =>
+        ele.getAttribute('data-country-code')
+      );
+    }
   };
 
 const {
@@ -8335,6 +8388,7 @@ const {
   label: label$4,
   requiredIndicator: requiredIndicator$4,
   inputField: inputField$2,
+  internalAfter,
   countryCodeInput,
   phoneInput: phoneInput$1,
   separator: separator$1,
@@ -8345,6 +8399,7 @@ const {
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   inputField: { selector: '::part(input-field)' },
+  internalAfter: { selector: 'descope-phone-field-internal::after' },
   phoneInput: { selector: () => 'descope-text-field' },
   countryCodeInput: { selector: () => 'descope-combo-box' },
   separator: { selector: 'descope-phone-field-internal .separator' },
@@ -8384,18 +8439,21 @@ const PhoneFieldClass = compose(
       hostDirection: { ...host$c, property: 'direction' },
 
       inputBorderStyle: [
-        { ...inputField$2, property: 'border-style' },
+        { ...internalAfter, property: 'outline-style' },
         { ...separator$1, property: 'border-left-style' },
       ],
       inputBorderWidth: [
-        { ...inputField$2, property: 'border-width' },
+        { ...internalAfter, property: 'outline-width' },
         { ...separator$1, property: 'border-left-width' },
       ],
       inputBorderColor: [
-        { ...inputField$2, property: 'border-color' },
+        { ...internalAfter, property: 'outline-color' },
         { ...separator$1, property: 'border-left-color' },
       ],
-      inputBorderRadius: { ...inputField$2, property: 'border-radius' },
+      inputBorderRadius: [
+        { ...inputField$2, property: 'border-radius' },
+        { ...internalAfter, property: 'border-radius' },
+      ],
 
       countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
       countryCodeDropdownWidth: {
@@ -8477,6 +8535,10 @@ const PhoneFieldClass = compose(
 			vaadin-text-field::before {
 				height: 0;
 			}
+			vaadin-text-field::part(label) {
+        margin-left: 0;
+        margin-right: 0;
+      }
 			vaadin-text-field::part(input-field) {
 				padding: 0;
 				background: transparent;
@@ -8488,7 +8550,19 @@ const PhoneFieldClass = compose(
 				width: 100%;
 				height: 100%;
         direction: ltr;
+        position: relative;
 			}
+      descope-phone-field-internal::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+        outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);
+        pointer-events: none;
+      }
 			descope-phone-field-internal > div {
 				width: 100%;
 				height: 100%;
@@ -8499,7 +8573,7 @@ const PhoneFieldClass = compose(
 			}
 			descope-combo-box {
 				flex-shrink: 0;
-				min-width: 5.75em;
+        min-width: 5.75em;
 				${comboVars.inputOutlineWidth}: 0;
 				${comboVars.inputOutlineOffset}: 0;
 				${comboVars.inputBorderWidth}: 0;
@@ -8529,17 +8603,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$F,
+    componentName: componentName$G,
   })
 );
 
-customElements.define(componentName$F, PhoneFieldClass);
+customElements.define(componentName$G, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$E = getComponentName('phone-field-internal-input-box');
+const componentName$F = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -8551,12 +8625,13 @@ const observedAttributes$2 = [
   'name',
   'autocomplete',
   'label-type',
+  'allow-alphanumeric-input',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -8583,6 +8658,10 @@ class PhoneFieldInternal extends BaseInputClass$5 {
     return !!this.getAttribute('default-code');
   }
 
+  get allowAlphanumericInput() {
+    return this.getAttribute('allow-alphanumeric-input') === 'true';
+  }
+
   get value() {
     if (!this.phoneNumberValue) {
       return '';
@@ -8613,6 +8692,10 @@ class PhoneFieldInternal extends BaseInputClass$5 {
     return this.phoneNumberInput.value;
   }
 
+  get phoneNumberInputEle() {
+    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  }
+
   get minLength() {
     return parseInt(this.getAttribute('minlength'), 10) || 0;
   }
@@ -8672,11 +8755,14 @@ class PhoneFieldInternal extends BaseInputClass$5 {
         .replace('--', '-')
         .replace('+-', '+');
 
-      const telDigitsRegExp = /^[+\d-]+$/;
-      const sanitizedInput = e.target.value
-        .split('')
-        .filter((char) => telDigitsRegExp.test(char))
-        .join('');
+      let sanitizedInput = e.target.value;
+      if (!this.allowAlphanumericInput) {
+        const telDigitsRegExp = /^[+\d-]+$/;
+        sanitizedInput = e.target.value
+          .split('')
+          .filter((char) => telDigitsRegExp.test(char))
+          .join('');
+      }
 
       e.target.value = sanitizedInput;
     });
@@ -8695,11 +8781,11 @@ class PhoneFieldInternal extends BaseInputClass$5 {
   }
 }
 
-customElements.define(componentName$E, PhoneFieldInternal);
+customElements.define(componentName$F, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$D = getComponentName('phone-input-box-field');
+const componentName$E = getComponentName('phone-input-box-field');
 
 const customMixin$7 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -8713,15 +8799,15 @@ const customMixin$7 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$E}
+				<${componentName$F}
 					tabindex="-1"
 					slot="input"
-				></${componentName$E}>
+				></${componentName$F}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$E);
+      this.inputElement = this.shadowRoot.querySelector(componentName$F);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -8735,9 +8821,14 @@ const customMixin$7 = (superclass) =>
           'phone-input-placeholder',
           'label',
           'label-type',
+          'allow-alphanumeric-input',
         ],
       });
     }
+
+    get phoneNumberInputEle() {
+      return this.inputElement?.phoneNumberInputEle;
+    }
   };
 
 const {
@@ -8746,6 +8837,7 @@ const {
   inputElement: inputElement$1,
   requiredIndicator: requiredIndicator$3,
   inputField: inputField$1,
+  inputFieldInternal,
   phoneInput,
   errorMessage: errorMessage$4,
   helperText: helperText$3,
@@ -8755,7 +8847,10 @@ const {
   placeholder: { selector: '> input:placeholder-shown' },
   inputElement: { selector: 'input' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-  inputField: { selector: '::part(input-field)' },
+  inputField: { selector: () => 'vaadin-text-field::part(input-field)' },
+  inputFieldInternal: {
+    selector: () => 'descope-phone-field-internal-input-box vaadin-text-field::part(input-field)',
+  },
   phoneInput: { selector: () => 'descope-text-field' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
@@ -8777,10 +8872,13 @@ const PhoneFieldInputBoxClass = compose(
       hostMinWidth: { ...host$b, property: 'min-width' },
       hostDirection: { ...host$b, property: 'direction' },
 
-      inputBorderStyle: { ...inputField$1, property: 'border-style' },
-      inputBorderWidth: { ...inputField$1, property: 'border-width' },
-      inputBorderColor: { ...inputField$1, property: 'border-color' },
-      inputBorderRadius: { ...inputField$1, property: 'border-radius' },
+      inputBorderStyle: { ...inputFieldInternal, property: 'border-style' },
+      inputBorderWidth: { ...inputFieldInternal, property: 'border-width' },
+      inputBorderColor: { ...inputFieldInternal, property: 'border-color' },
+      inputBorderRadius: [
+        { ...inputField$1, property: 'border-radius' },
+        { ...inputFieldInternal, property: 'border-radius' },
+      ],
 
       inputHorizontalPadding: [
         { ...phoneInput, property: 'padding-left' },
@@ -8841,7 +8939,6 @@ const PhoneFieldInputBoxClass = compose(
 
     vaadin-text-field {
       width: 100%;
-      height: 100%;
       box-sizing: border-box;
       padding: 0;
     }
@@ -8861,23 +8958,21 @@ const PhoneFieldInputBoxClass = compose(
       -webkit-mask-image: none;
       padding: 0;
       width: 100%;
-      height: 100%;
     }
     descope-phone-field-internal-input-box > div {
       width: 100%;
-      height: 100%;
     }
     descope-phone-field-internal-input-box .separator {
       flex: 0;
       border: none;
     }
+    descope-phone-field-internal-input-box descope-text-field {
+      ${textVars.inputOutlineWidth}: 0;
+      ${textVars.inputOutlineOffset}: 0;
+    }
     descope-text-field {
       flex-grow: 1;
       width: 100%;
-      ${textVars.inputOutlineWidth}: 0;
-      ${textVars.inputOutlineOffset}: 0;
-      ${textVars.inputBorderWidth}: 0;
-      ${textVars.inputBorderRadius}: 0;
       direction: ltr;
     }
     vaadin-text-field[readonly] > input:placeholder-shown {
@@ -8898,26 +8993,26 @@ const PhoneFieldInputBoxClass = compose(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
-customElements.define(componentName$D, PhoneFieldInputBoxClass);
+customElements.define(componentName$E, PhoneFieldInputBoxClass);
 
-const componentName$C = getComponentName('new-password-internal');
+const componentName$D = getComponentName('new-password-internal');
 
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$B = getComponentName('policy-validation');
+const componentName$C = getComponentName('policy-validation');
 
 const overrideAttrs = ['data-password-policy-value-minlength'];
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -9125,7 +9220,7 @@ const PolicyValidationClass = compose(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$A = getComponentName('new-password');
+const componentName$B = getComponentName('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -9139,18 +9234,18 @@ const customMixin$6 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$C}
+			<${componentName$D}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$C}>
+      </${componentName$D}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$C);
+      this.inputElement = this.shadowRoot.querySelector(componentName$D);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -9327,11 +9422,11 @@ const NewPasswordClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
 
-customElements.define(componentName$B, PolicyValidationClass);
+customElements.define(componentName$C, PolicyValidationClass);
 
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -9363,7 +9458,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -9573,21 +9668,21 @@ class NewPasswordInternal extends BaseInputClass$4 {
   }
 }
 
-customElements.define(componentName$C, NewPasswordInternal);
+customElements.define(componentName$D, NewPasswordInternal);
 
-customElements.define(componentName$A, NewPasswordClass);
+customElements.define(componentName$B, NewPasswordClass);
 
-const componentName$z = getComponentName('recaptcha');
+const componentName$A = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
-const BaseClass = createBaseClass({
-  componentName: componentName$z,
+const BaseClass$1 = createBaseClass({
+  componentName: componentName$A,
   baseSelector: ':host > div',
 });
-class RawRecaptcha extends BaseClass {
+class RawRecaptcha extends BaseClass$1 {
   static get observedAttributes() {
-    return observedAttributes$1.concat(BaseClass.observedAttributes || []);
+    return observedAttributes$1.concat(BaseClass$1.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -9769,7 +9864,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$z, RecaptchaClass);
+customElements.define(componentName$A, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -9783,7 +9878,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$y = getComponentName('upload-file');
+const componentName$z = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -9798,7 +9893,7 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$y, baseSelector: ':host > div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$z, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -10013,7 +10108,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$y, UploadFileClass);
+customElements.define(componentName$z, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -10111,10 +10206,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$x = getComponentName('button-selection-group-internal');
+const componentName$y = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$x
+  componentName$y
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -10346,7 +10441,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$w = getComponentName('button-selection-group');
+const componentName$x = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10355,19 +10450,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$x}
+      <${componentName$y}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$x}>
+      </${componentName$y}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$x);
+      this.inputElement = this.shadowRoot.querySelector(componentName$y);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -10392,16 +10487,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$w,
+    componentName: componentName$x,
   })
 );
 
-customElements.define(componentName$x, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$y, ButtonSelectionGroupInternalClass);
 
-const componentName$v = getComponentName('button-selection-group-item');
+const componentName$w = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$v,
+  componentName: componentName$w,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -10508,14 +10603,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$v, ButtonSelectionGroupItemClass);
+customElements.define(componentName$w, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$w, ButtonSelectionGroupClass);
+customElements.define(componentName$x, ButtonSelectionGroupClass);
 
-const componentName$u = getComponentName('button-multi-selection-group-internal');
+const componentName$v = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$u
+  componentName$v
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -10618,7 +10713,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$t = getComponentName('button-multi-selection-group');
+const componentName$u = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10627,19 +10722,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$u}
+      <${componentName$v}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$u}>
+      </${componentName$v}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$u);
+      this.inputElement = this.shadowRoot.querySelector(componentName$v);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -10664,13 +10759,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$t,
+    componentName: componentName$u,
   })
 );
 
-customElements.define(componentName$u, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$v, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$t, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$u, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -10698,9 +10793,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$s = getComponentName('grid-text-column');
+const componentName$t = getComponentName('grid-text-column');
 
-customElements.define(componentName$s, GridTextColumnClass);
+customElements.define(componentName$t, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -10735,9 +10830,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$r = getComponentName('grid-custom-column');
+const componentName$s = getComponentName('grid-custom-column');
 
-customElements.define(componentName$r, GridCustomColumnClass);
+customElements.define(componentName$s, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -10796,9 +10891,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$q = getComponentName('grid-selection-column');
+const componentName$r = getComponentName('grid-selection-column');
 
-customElements.define(componentName$q, GridSelectionColumnClass);
+customElements.define(componentName$r, GridSelectionColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -10837,9 +10932,9 @@ class GridItemDetailsColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$p = getComponentName('grid-item-details-column');
+const componentName$q = getComponentName('grid-item-details-column');
 
-customElements.define(componentName$p, GridItemDetailsColumnClass);
+customElements.define(componentName$q, GridItemDetailsColumnClass);
 
 const decode = (input) => {
   const txt = document.createElement('textarea');
@@ -10851,9 +10946,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
 
-const componentName$o = getComponentName('code-snippet');
+const componentName$p = getComponentName('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -11083,7 +11178,7 @@ const CodeSnippetClass = compose(
   componentNameValidationMixin
 )(CodeSnippet$1);
 
-customElements.define(componentName$o, CodeSnippetClass);
+customElements.define(componentName$p, CodeSnippetClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -11158,7 +11253,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$n = getComponentName('grid');
+const componentName$o = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -11512,13 +11607,13 @@ const GridClass = compose(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$n,
+    componentName: componentName$o,
   })
 );
 
-customElements.define(componentName$n, GridClass);
+customElements.define(componentName$o, GridClass);
 
-const componentName$m = getComponentName('multi-select-combo-box');
+const componentName$n = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -12160,16 +12255,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$m,
+    componentName: componentName$n,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$m, MultiSelectComboBoxClass);
+customElements.define(componentName$n, MultiSelectComboBoxClass);
 
-const componentName$l = getComponentName('badge');
+const componentName$m = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -12220,9 +12315,9 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
 
-customElements.define(componentName$l, BadgeClass);
+customElements.define(componentName$m, BadgeClass);
 
-const componentName$k = getComponentName('modal');
+const componentName$l = getComponentName('modal');
 
 const customMixin$5 = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -12321,11 +12416,11 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$k,
+    componentName: componentName$l,
   })
 );
 
-customElements.define(componentName$k, ModalClass);
+customElements.define(componentName$l, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -12336,7 +12431,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$j = getComponentName('notification-card');
+const componentName$k = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -12444,13 +12539,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$j,
+    componentName: componentName$k,
   })
 );
 
-customElements.define(componentName$j, NotificationCardClass);
+customElements.define(componentName$k, NotificationCardClass);
 
-const componentName$i = getComponentName('notification');
+const componentName$j = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -12545,14 +12640,14 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$i,
+    componentName: componentName$j,
   })
 );
 
-customElements.define(componentName$i, NotificationClass);
+customElements.define(componentName$j, NotificationClass);
 
-const componentName$h = getComponentName('avatar');
-class RawAvatar extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > .wrapper' }) {
+const componentName$i = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > .wrapper' }) {
   constructor() {
     super();
 
@@ -12656,11 +12751,11 @@ const AvatarClass = compose(
   componentNameValidationMixin
 )(RawAvatar);
 
-customElements.define(componentName$h, AvatarClass);
+customElements.define(componentName$i, AvatarClass);
 
-const componentName$g = getComponentName('mappings-field-internal');
+const componentName$h = getComponentName('mappings-field-internal');
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$2 {
   #errorItem;
@@ -12895,7 +12990,7 @@ class MappingsFieldInternal extends BaseInputClass$2 {
   }
 }
 
-const componentName$f = getComponentName('mappings-field');
+const componentName$g = getComponentName('mappings-field');
 
 const customMixin$4 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -12924,14 +13019,14 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$g}
+      <${componentName$h}
         tabindex="-1"
-      ></${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);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -13063,17 +13158,17 @@ const MappingsFieldClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$f,
+    componentName: componentName$g,
   })
 );
 
-customElements.define(componentName$g, MappingsFieldInternal);
+customElements.define(componentName$h, MappingsFieldInternal);
 
-const componentName$e = getComponentName('mapping-item');
+const componentName$f = getComponentName('mapping-item');
 
 const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -13223,17 +13318,17 @@ class MappingItem extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$e, MappingItem);
+customElements.define(componentName$f, MappingItem);
 
-customElements.define(componentName$f, MappingsFieldClass);
+customElements.define(componentName$g, MappingsFieldClass);
 
 var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$d = getComponentName('user-attribute');
+const componentName$e = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$d,
+  componentName: componentName$e,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -13467,13 +13562,13 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
 
-customElements.define(componentName$d, UserAttributeClass);
+customElements.define(componentName$e, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$c = getComponentName('user-auth-method');
+const componentName$d = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$c,
+  componentName: componentName$d,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -13666,11 +13761,11 @@ const UserAuthMethodClass = compose(
   componentNameValidationMixin
 )(RawUserAuthMethod);
 
-customElements.define(componentName$c, UserAuthMethodClass);
+customElements.define(componentName$d, UserAuthMethodClass);
 
-const componentName$b = getComponentName('saml-group-mappings-internal');
+const componentName$c = getComponentName('saml-group-mappings-internal');
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$b, baseSelector: '' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$c, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass {
   static get observedAttributes() {
@@ -13796,7 +13891,7 @@ class SamlGroupMappingsInternal extends BaseInputClass {
   }
 }
 
-const componentName$a = getComponentName('saml-group-mappings');
+const componentName$b = getComponentName('saml-group-mappings');
 
 const customMixin$3 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -13806,14 +13901,14 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$b}
+      <${componentName$c}
         tabindex="-1"
-      ></${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, this.inputElement, {
         includeAttrs: [
@@ -13890,15 +13985,15 @@ const SamlGroupMappingsClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$a,
+    componentName: componentName$b,
   })
 );
 
-customElements.define(componentName$b, SamlGroupMappingsInternal);
+customElements.define(componentName$c, SamlGroupMappingsInternal);
 
-customElements.define(componentName$a, SamlGroupMappingsClass);
+customElements.define(componentName$b, SamlGroupMappingsClass);
 
-const componentName$9 = getComponentName('radio-button');
+const componentName$a = getComponentName('radio-button');
 
 const customMixin$2 = (superclass) =>
   class CustomMixin extends superclass {
@@ -13963,11 +14058,11 @@ const RadioButtonClass = compose(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$9,
+    componentName: componentName$a,
   })
 );
 
-const componentName$8 = getComponentName('radio-group');
+const componentName$9 = getComponentName('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -13982,12 +14077,12 @@ const RadioGroupMixin = (superclass) =>
 
       // we are overriding vaadin children getter so it will run on our custom elements
       Object.defineProperty(this.baseElement, 'children', {
-        get: () => this.querySelectorAll(componentName$9),
+        get: () => this.querySelectorAll(componentName$a),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) => {
-        return nodes.filter((node) => node.localName === componentName$9);
+        return nodes.filter((node) => node.localName === componentName$a);
       };
 
       // vaadin radio group missing some input properties
@@ -14137,13 +14232,13 @@ const RadioGroupClass = compose(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
-    componentName: componentName$8,
+    componentName: componentName$9,
     includeForwardProps: ['value'],
   })
 );
 
-customElements.define(componentName$8, RadioGroupClass);
-customElements.define(componentName$9, RadioButtonClass);
+customElements.define(componentName$9, RadioGroupClass);
+customElements.define(componentName$a, RadioButtonClass);
 
 const activeableMixin = (superclass) =>
   class ActiveableMixinClass extends superclass {
@@ -14160,7 +14255,7 @@ const activeableMixin = (superclass) =>
     }
   };
 
-const componentName$7 = getComponentName('list-item');
+const componentName$8 = getComponentName('list-item');
 
 const customMixin$1 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -14209,11 +14304,11 @@ const ListItemClass = compose(
   componentNameValidationMixin,
   customMixin$1,
   activeableMixin
-)(createBaseClass({ componentName: componentName$7, baseSelector: 'slot' }));
+)(createBaseClass({ componentName: componentName$8, baseSelector: 'slot' }));
 
-const componentName$6 = getComponentName('list');
+const componentName$7 = getComponentName('list');
 
-class RawList extends createBaseClass({ componentName: componentName$6, baseSelector: '.wrapper' }) {
+class RawList extends createBaseClass({ componentName: componentName$7, baseSelector: '.wrapper' }) {
   static get observedAttributes() {
     return ['variant', 'readonly'];
   }
@@ -14360,8 +14455,8 @@ const ListClass = compose(
   componentNameValidationMixin
 )(RawList);
 
-customElements.define(componentName$6, ListClass);
-customElements.define(componentName$7, ListItemClass);
+customElements.define(componentName$7, ListClass);
+customElements.define(componentName$8, ListItemClass);
 
 const defaultValidateSchema = () => true;
 const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
@@ -14462,7 +14557,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$5 = getComponentName('apps-list');
+const componentName$6 = getComponentName('apps-list');
 
 const limitAbbreviation = (str, limit = 2) =>
   str
@@ -14524,7 +14619,7 @@ const AppsListClass = compose(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty'],
-    componentName: componentName$5,
+    componentName: componentName$6,
     style: () => `
       :host {
         width: 100%;
@@ -14549,9 +14644,9 @@ const AppsListClass = compose(
   })
 );
 
-customElements.define(componentName$5, AppsListClass);
+customElements.define(componentName$6, AppsListClass);
 
-const componentName$4 = getComponentName('scopes-list');
+const componentName$5 = getComponentName('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer = ({ id, desc, required = false }, _, ref) => {
@@ -14570,7 +14665,7 @@ const itemRenderer = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass({ componentName: componentName$4, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass({ componentName: componentName$5, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -14675,13 +14770,13 @@ const ScopesListClass = compose(
   componentNameValidationMixin
 )(RawScopesList);
 
-customElements.define(componentName$4, ScopesListClass);
+customElements.define(componentName$5, ScopesListClass);
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$3 = getComponentName('third-party-app-logo');
+const componentName$4 = getComponentName('third-party-app-logo');
 class RawThirdPartyAppLogoClass extends createBaseClass({
-  componentName: componentName$3,
+  componentName: componentName$4,
   baseSelector: '.wrapper',
 }) {
   constructor() {
@@ -14775,9 +14870,9 @@ const ThirdPartyAppLogoClass = compose(
   componentNameValidationMixin
 )(RawThirdPartyAppLogoClass);
 
-customElements.define(componentName$3, ThirdPartyAppLogoClass);
+customElements.define(componentName$4, ThirdPartyAppLogoClass);
 
-const componentName$2 = getComponentName('security-questions-setup');
+const componentName$3 = getComponentName('security-questions-setup');
 
 const attrsToSync$1 = [
   'full-width',
@@ -14793,7 +14888,7 @@ const attrsToSync$1 = [
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
-class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$2, baseSelector: 'div' }) {
+class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$3, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -14900,7 +14995,7 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName: compone
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$2, 'Error parsing questions attribute', e);
+      console.error(componentName$3, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -15008,9 +15103,9 @@ const SecurityQuestionsSetupClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsSetup);
 
-customElements.define(componentName$2, SecurityQuestionsSetupClass);
+customElements.define(componentName$3, SecurityQuestionsSetupClass);
 
-const componentName$1 = getComponentName('security-questions-verify');
+const componentName$2 = getComponentName('security-questions-verify');
 
 const textFieldsAttrs = [
   'full-width',
@@ -15031,7 +15126,7 @@ const attrMappings = {
 const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 const attrsToReRender = ['questions'];
-class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$1, baseSelector: 'div' }) {
+class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$2, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -15102,7 +15197,7 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName: compon
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$1, 'Error parsing questions attribute', e);
+      console.error(componentName$2, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -15212,7 +15307,316 @@ const SecurityQuestionsVerifyClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsVerify);
 
-customElements.define(componentName$1, SecurityQuestionsVerifyClass);
+customElements.define(componentName$2, SecurityQuestionsVerifyClass);
+
+const NUMERIC_RE = /^\d+$/;
+
+const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceAll('-', ''));
+
+const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
+
+const componentName$1 = getComponentName('hybrid-field');
+
+const attrs = {
+  shared: [
+    'label',
+    'placeholder',
+    'bordered',
+    'full-width',
+    'label-type',
+    'size',
+    'disabled',
+    'readonly',
+    'required',
+    'st-host-direction',
+  ],
+  email: [
+    'data-errormessage-value-missing-email',
+    'data-errormessage-pattern-mismatch-email',
+    'external-input',
+  ],
+  phone: {
+    countryCode: [
+      'country-input-label',
+      'country-input-placeholder',
+      'restrict-countries',
+      'default-code',
+      'phone-minlength',
+      'data-errormessage-value-missing-phone',
+    ],
+    inputBox: [
+      'restrict-countries',
+      'default-code',
+      'phone-minlength',
+      'data-errormessage-value-missing-phone',
+    ],
+  },
+};
+
+const attrMap = {
+  email: {
+    'data-errormessage-value-missing-email': 'data-errormessage-value-missing',
+    'data-errormessage-pattern-mismatch-email': 'data-errormessage-pattern-mismatch',
+  },
+  phone: {
+    placeholder: 'phone-input-placeholder',
+    'phone-minlength': 'minlength',
+    'data-errormessage-value-missing-phone': 'data-errormessage-value-missing',
+  },
+};
+
+const EMAIL_FIELD = 'descope-email-field';
+const PHONE_FIELD = 'descope-phone-field';
+const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
+
+const BaseClass = createBaseClass({
+  componentName: componentName$1,
+  baseSelector: 'div',
+});
+
+class RawHybridField extends BaseClass {
+  #isReportedValidity = false;
+
+  #selectionStart;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+		  :host {
+        display: inline-flex;
+        box-sizing: border-box;
+        padding: 0;
+        gap: 0;
+      }
+      .wrapper {
+        display: grid;
+        place-content: center;
+      }
+      descope-email-field,
+      descope-phone-field,
+      descope-phone-input-box-field {
+        grid-area: 1/1;
+        width: 100%;
+        height: 100%;
+      }
+      .hidden {
+        visibility: hidden;
+      }        
+		</style>
+    <div class="wrapper">
+      <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>
+      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>
+      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>
+    </div>
+		`;
+  }
+
+  get isExternalInput() {
+    return this.getAttribute('external-input') === 'true';
+  }
+
+  get emailInputEle() {
+    return this.isExternalInput ? this.emailInput.externalInput : this.emailInput.inputElement;
+  }
+
+  get phoneVariant() {
+    const isInputBox = this.getAttribute('phone-variant') === 'inputBox';
+    return isInputBox ? this.phoneInputBoxInput : this.phoneCountryCodeInput;
+  }
+
+  get defaultCode() {
+    const firstItem = this.phoneCountryCodeInput.countryCodes?.[0] || '';
+    return this.getAttribute('default-code') || firstItem;
+  }
+
+  get activeInputEle() {
+    if (this.activeInput === this.emailInput) {
+      return this.emailInputEle;
+    }
+    return this.phoneVariant.phoneNumberInputEle;
+  }
+
+  get value() {
+    return this.activeInput?.value || '';
+  }
+
+  set value(val) {
+    this.handleActiveInput(val);
+    this.activeInput.value = val;
+  }
+
+  async init() {
+    super.init?.();
+
+    this.initInputs();
+    this.updateAttrs();
+    this.toggleInputVisibility();
+
+    await this.waitForInputs();
+
+    this.initInputEles();
+    this.overrideEmailInputType();
+    this.overrideEmailSetAttribute();
+  }
+
+  waitForInputs() {
+    return new Promise((resolve) => {
+      const check = setInterval(() => {
+        if (this.emailInputEle) {
+          clearInterval(check);
+          resolve();
+        }
+      });
+    });
+  }
+
+  initInputs() {
+    this.emailInput = this.shadowRoot.querySelector(EMAIL_FIELD);
+    this.phoneCountryCodeInput = this.shadowRoot.querySelector(PHONE_FIELD);
+    this.phoneInputBoxInput = this.shadowRoot.querySelector(PHONE_INPUT_BOX_FIELD);
+
+    this.inputs = [this.emailInput, this.phoneCountryCodeInput, this.phoneInputBoxInput];
+
+    this.activeInput = this.emailInput;
+  }
+
+  // we need to listen on the inner `input` element itself, otherwise we don't always get an `input` event
+  initInputEles() {
+    const inputEles = [
+      this.emailInputEle,
+      this.phoneCountryCodeInput.phoneNumberInputEle,
+      this.phoneInputBoxInput.phoneNumberInputEle,
+    ];
+
+    inputEles.forEach((ele) => {
+      ele.addEventListener('input', this.onValueChange.bind(this));
+    });
+  }
+
+  overrideEmailInputType() {
+    this.emailInputEle.addEventListener('focus', () => {
+      this.emailInputEle.setAttribute('type', 'text');
+    });
+    this.emailInputEle.addEventListener('blur', () => {
+      setTimeout(() => {
+        this.emailInputEle.setAttribute('type', 'email');
+      });
+    });
+  }
+
+  // We want to prevent Vaadin from changing the input type to `email`
+  // otherwise, we cannot get the selectionStart from the input.
+  overrideEmailSetAttribute() {
+    const origEmailSetAttr = this.emailInput.setAttribute.bind(this.emailInputEle);
+    this.emailInputEle.setAttribute = (name, value) => {
+      if (name !== 'type' || value !== 'email' || !this.emailInput.hasAttribute('focused')) {
+        return origEmailSetAttr(name, value);
+      }
+      return false;
+    };
+  }
+
+  updateAttrs() {
+    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));
+
+    forwardAttrs(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });
+
+    forwardAttrs(this, this.phoneCountryCodeInput, {
+      includeAttrs: attrs.phone.countryCode,
+      mapAttrs: attrMap.phone,
+    });
+
+    forwardAttrs(this, this.phoneInputBoxInput, {
+      includeAttrs: attrs.phone.inputBox,
+      mapAttrs: attrMap.phone,
+    });
+
+    setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));
+  }
+
+  onValueChange() {
+    this.#selectionStart = this.activeInputEle.selectionStart;
+    this.handleActiveInput(this.activeInput.value);
+  }
+
+  handleActiveInput(val) {
+    const expectedActiveInput = isNumericValue(val) ? this.phoneVariant : this.emailInput;
+
+    if (this.activeInput !== expectedActiveInput) {
+      this.setActiveInput(expectedActiveInput);
+    }
+  }
+
+  setActiveInput(expectedActiveInput) {
+    const val = this.activeInput.value;
+    this.activeInput = expectedActiveInput;
+    this.setActiveInputValue(val);
+    if (this.#isReportedValidity) this.activeInput.reportValidity();
+    this.setActiveInputSelectionStart();
+    this.toggleInputVisibility();
+  }
+
+  setActiveInputSelectionStart() {
+    setTimeout(() => {
+      this.activeInputEle.focus();
+      this.activeInputEle.setSelectionRange?.(this.#selectionStart, this.#selectionStart);
+    });
+  }
+
+  setActiveInputValue(val) {
+    const sanitizedVal = sanitizeCountryCodePrefix(val);
+    const isPhoneField = this.activeInput.localName === PHONE_FIELD;
+    const value = isPhoneField
+      ? `${this.phoneCountryCodeInput.countryCodeItems}-${sanitizedVal}`
+      : sanitizedVal;
+    this.activeInput.value = value;
+  }
+
+  toggleInputVisibility() {
+    this.inputs.forEach((input) => {
+      input !== this.activeInput ? input.classList.add('hidden') : input.classList.remove('hidden');
+    });
+  }
+
+  reportValidity() {
+    this.#isReportedValidity = true;
+
+    const ele = this.activeInputEle;
+
+    // On reportValidity we want to set the caret at the end of the input value.
+    // Since checkValidity triggers `focus` on the input, it sets the caret at the start of the input,
+    // regardless the existing value.
+    setTimeout(() => {
+      ele.setSelectionRange?.(ele.value.length, ele.value.length);
+    });
+
+    return this.activeInput.reportValidity();
+  }
+
+  checkValidity() {
+    return this.activeInput.checkValidity();
+  }
+}
+
+const HybridFieldClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: [
+        { selector: () => 'descope-email-field', property: 'direction' },
+        { selector: () => 'descope-phone-field', property: 'direction' },
+        { selector: () => 'descope-phone-input-box-field', property: 'direction' },
+      ],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawHybridField);
+
+customElements.define(componentName$1, HybridFieldClass);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -15651,7 +16055,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$S = getThemeVars(globals);
+const vars$T = getThemeVars(globals);
 
 const globalRefs$y = getThemeRefs(globals);
 const compVars$6 = ButtonClass.cssVarList;
@@ -15664,7 +16068,7 @@ const mode = {
   surface: globalRefs$y.colors.surface,
 };
 
-const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$13);
+const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$14);
 
 const button = {
   ...helperTheme$4,
@@ -15776,7 +16180,7 @@ const button = {
   },
 };
 
-const vars$R = {
+const vars$S = {
   ...compVars$6,
   ...helperVars$4,
 };
@@ -15784,13 +16188,13 @@ const vars$R = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$R
+  vars: vars$S
 });
 
 const componentName = getComponentName('input-wrapper');
 const globalRefs$x = getThemeRefs(globals);
 
-const [theme$1, refs, vars$Q] = createHelperVars(
+const [theme$1, refs, vars$R] = createHelperVars(
   {
     labelTextColor: globalRefs$x.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
@@ -15909,13 +16313,69 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$Q
+  vars: vars$R
 });
 
 const globalRefs$w = getThemeRefs(globals);
-const vars$P = TextFieldClass.cssVarList;
+const vars$Q = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$Q.hostWidth]: refs.width,
+  [vars$Q.hostMinWidth]: refs.minWidth,
+  [vars$Q.hostDirection]: refs.direction,
+  [vars$Q.fontSize]: refs.fontSize,
+  [vars$Q.fontFamily]: refs.fontFamily,
+  [vars$Q.labelFontSize]: refs.labelFontSize,
+  [vars$Q.labelFontWeight]: refs.labelFontWeight,
+  [vars$Q.labelTextColor]: refs.labelTextColor,
+  [vars$Q.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$Q.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$Q.inputValueTextColor]: refs.valueTextColor,
+  [vars$Q.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$Q.inputBorderWidth]: refs.borderWidth,
+  [vars$Q.inputBorderStyle]: refs.borderStyle,
+  [vars$Q.inputBorderColor]: refs.borderColor,
+  [vars$Q.inputBorderRadius]: refs.borderRadius,
+  [vars$Q.inputOutlineWidth]: refs.outlineWidth,
+  [vars$Q.inputOutlineStyle]: refs.outlineStyle,
+  [vars$Q.inputOutlineColor]: refs.outlineColor,
+  [vars$Q.inputOutlineOffset]: refs.outlineOffset,
+  [vars$Q.inputBackgroundColor]: refs.backgroundColor,
+  [vars$Q.inputHeight]: refs.inputHeight,
+  [vars$Q.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$Q.helperTextColor]: refs.helperTextColor,
+  [vars$Q.textAlign]: refs.textAlign,
+  textAlign: {
+    right: { [vars$Q.inputTextAlign]: 'right' },
+    left: { [vars$Q.inputTextAlign]: 'left' },
+    center: { [vars$Q.inputTextAlign]: 'center' },
+  },
+  [vars$Q.labelPosition]: refs.labelPosition,
+  [vars$Q.labelTopPosition]: refs.labelTopPosition,
+  [vars$Q.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$Q.inputTransformY]: refs.inputTransformY,
+  [vars$Q.inputTransition]: refs.inputTransition,
+  [vars$Q.marginInlineStart]: refs.marginInlineStart,
+  [vars$Q.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$Q.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$Q.valueInputHeight]: refs.valueInputHeight,
+  [vars$Q.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$Q.inputIconOffset]: globalRefs$w.spacing.md,
+  [vars$Q.inputIconSize]: refs.inputIconSize,
+  [vars$Q.inputIconColor]: refs.placeholderTextColor,
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$Q
+});
+
+const globalRefs$v = getThemeRefs(globals);
+const vars$P = PasswordClass.cssVarList;
+
+const password = {
   [vars$P.hostWidth]: refs.width,
   [vars$P.hostMinWidth]: refs.minWidth,
   [vars$P.hostDirection]: refs.direction,
@@ -15924,10 +16384,13 @@ const textField = {
   [vars$P.labelFontSize]: refs.labelFontSize,
   [vars$P.labelFontWeight]: refs.labelFontWeight,
   [vars$P.labelTextColor]: refs.labelTextColor,
-  [vars$P.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$P.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$P.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$P.inputHeight]: refs.inputHeight,
+  [vars$P.inputBackgroundColor]: refs.backgroundColor,
+  [vars$P.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$P.inputValueTextColor]: refs.valueTextColor,
-  [vars$P.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$P.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$P.inputBorderWidth]: refs.borderWidth,
   [vars$P.inputBorderStyle]: refs.borderStyle,
   [vars$P.inputBorderColor]: refs.borderColor,
@@ -15936,16 +16399,9 @@ const textField = {
   [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,
-  [vars$P.helperTextColor]: refs.helperTextColor,
-  [vars$P.textAlign]: refs.textAlign,
-  textAlign: {
-    right: { [vars$P.inputTextAlign]: 'right' },
-    left: { [vars$P.inputTextAlign]: 'left' },
-    center: { [vars$P.inputTextAlign]: 'center' },
-  },
+  [vars$P.revealButtonOffset]: globalRefs$v.spacing.md,
+  [vars$P.revealButtonSize]: refs.toggleButtonSize,
+  [vars$P.revealButtonColor]: refs.placeholderTextColor,
   [vars$P.labelPosition]: refs.labelPosition,
   [vars$P.labelTopPosition]: refs.labelTopPosition,
   [vars$P.labelHorizontalPosition]: refs.labelHorizontalPosition,
@@ -15955,23 +16411,17 @@ const textField = {
   [vars$P.placeholderOpacity]: refs.placeholderOpacity,
   [vars$P.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$P.valueInputHeight]: refs.valueInputHeight,
-  [vars$P.valueInputMarginBottom]: refs.valueInputMarginBottom,
-  [vars$P.inputIconOffset]: globalRefs$w.spacing.md,
-  [vars$P.inputIconSize]: refs.inputIconSize,
-  [vars$P.inputIconColor]: refs.placeholderTextColor,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$P
 });
 
-const globalRefs$v = getThemeRefs(globals);
-const vars$O = PasswordClass.cssVarList;
+const vars$O = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$O.hostWidth]: refs.width,
   [vars$O.hostMinWidth]: refs.minWidth,
   [vars$O.hostDirection]: refs.direction,
@@ -15981,12 +16431,8 @@ const password = {
   [vars$O.labelFontWeight]: refs.labelFontWeight,
   [vars$O.labelTextColor]: refs.labelTextColor,
   [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.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$O.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$O.inputBorderWidth]: refs.borderWidth,
   [vars$O.inputBorderStyle]: refs.borderStyle,
   [vars$O.inputBorderColor]: refs.borderColor,
@@ -15995,9 +16441,10 @@ const password = {
   [vars$O.inputOutlineStyle]: refs.outlineStyle,
   [vars$O.inputOutlineColor]: refs.outlineColor,
   [vars$O.inputOutlineOffset]: refs.outlineOffset,
-  [vars$O.revealButtonOffset]: globalRefs$v.spacing.md,
-  [vars$O.revealButtonSize]: refs.toggleButtonSize,
-  [vars$O.revealButtonColor]: refs.placeholderTextColor,
+  [vars$O.inputBackgroundColor]: refs.backgroundColor,
+  [vars$O.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$O.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$O.inputHeight]: refs.inputHeight,
   [vars$O.labelPosition]: refs.labelPosition,
   [vars$O.labelTopPosition]: refs.labelTopPosition,
   [vars$O.labelHorizontalPosition]: refs.labelHorizontalPosition,
@@ -16007,17 +16454,18 @@ const password = {
   [vars$O.placeholderOpacity]: refs.placeholderOpacity,
   [vars$O.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$O.valueInputHeight]: refs.valueInputHeight,
+  [vars$O.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$O
 });
 
-const vars$N = NumberFieldClass.cssVarList;
+const vars$N = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$N.hostWidth]: refs.width,
   [vars$N.hostMinWidth]: refs.minWidth,
   [vars$N.hostDirection]: refs.direction,
@@ -16028,6 +16476,7 @@ const numberField = {
   [vars$N.labelTextColor]: refs.labelTextColor,
   [vars$N.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$N.inputValueTextColor]: refs.valueTextColor,
+  [vars$N.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$N.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$N.inputBorderWidth]: refs.borderWidth,
   [vars$N.inputBorderStyle]: refs.borderStyle,
@@ -16038,7 +16487,6 @@ const numberField = {
   [vars$N.inputOutlineColor]: refs.outlineColor,
   [vars$N.inputOutlineOffset]: refs.outlineOffset,
   [vars$N.inputBackgroundColor]: refs.backgroundColor,
-  [vars$N.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$N.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$N.inputHeight]: refs.inputHeight,
   [vars$N.labelPosition]: refs.labelPosition,
@@ -16053,197 +16501,153 @@ const numberField = {
   [vars$N.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$N
 });
 
-const vars$M = EmailFieldClass.cssVarList;
+const vars$M = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [vars$M.hostWidth]: refs.width,
   [vars$M.hostMinWidth]: refs.minWidth,
   [vars$M.hostDirection]: refs.direction,
   [vars$M.fontSize]: refs.fontSize,
   [vars$M.fontFamily]: refs.fontFamily,
-  [vars$M.labelFontSize]: refs.labelFontSize,
-  [vars$M.labelFontWeight]: refs.labelFontWeight,
   [vars$M.labelTextColor]: refs.labelTextColor,
+  [vars$M.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$M.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$M.inputBackgroundColor]: refs.backgroundColor,
   [vars$M.inputValueTextColor]: refs.valueTextColor,
-  [vars$M.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$M.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$M.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$M.inputBorderRadius]: refs.borderRadius,
   [vars$M.inputBorderWidth]: refs.borderWidth,
   [vars$M.inputBorderStyle]: refs.borderStyle,
   [vars$M.inputBorderColor]: refs.borderColor,
-  [vars$M.inputBorderRadius]: refs.borderRadius,
   [vars$M.inputOutlineWidth]: refs.outlineWidth,
   [vars$M.inputOutlineStyle]: refs.outlineStyle,
   [vars$M.inputOutlineColor]: refs.outlineColor,
   [vars$M.inputOutlineOffset]: refs.outlineOffset,
-  [vars$M.inputBackgroundColor]: refs.backgroundColor,
-  [vars$M.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$M.inputHeight]: refs.inputHeight,
-  [vars$M.labelPosition]: refs.labelPosition,
-  [vars$M.labelTopPosition]: refs.labelTopPosition,
-  [vars$M.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$M.inputTransformY]: refs.inputTransformY,
-  [vars$M.inputTransition]: refs.inputTransition,
-  [vars$M.marginInlineStart]: refs.marginInlineStart,
-  [vars$M.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$M.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$M.valueInputHeight]: refs.valueInputHeight,
-  [vars$M.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$M.inputResizeType]: 'vertical',
+  [vars$M.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$M.inputTextAlign]: 'right' },
+    left: { [vars$M.inputTextAlign]: 'left' },
+    center: { [vars$M.inputTextAlign]: 'center' },
+  },
+
+  _readonly: {
+    [vars$M.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$M
 });
 
-const vars$L = TextAreaClass.cssVarList;
+const vars$L = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [vars$L.hostWidth]: refs.width,
-  [vars$L.hostMinWidth]: refs.minWidth,
   [vars$L.hostDirection]: refs.direction,
   [vars$L.fontSize]: refs.fontSize,
   [vars$L.fontFamily]: refs.fontFamily,
   [vars$L.labelTextColor]: refs.labelTextColor,
   [vars$L.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$L.labelFontWeight]: '400',
+  [vars$L.labelLineHeight]: checkboxSize,
+  [vars$L.labelSpacing]: '1em',
   [vars$L.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$L.inputBackgroundColor]: refs.backgroundColor,
-  [vars$L.inputValueTextColor]: refs.valueTextColor,
-  [vars$L.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$L.inputOutlineWidth]: refs.outlineWidth,
+  [vars$L.inputOutlineOffset]: refs.outlineOffset,
+  [vars$L.inputOutlineColor]: refs.outlineColor,
+  [vars$L.inputOutlineStyle]: refs.outlineStyle,
   [vars$L.inputBorderRadius]: refs.borderRadius,
+  [vars$L.inputBorderColor]: refs.borderColor,
   [vars$L.inputBorderWidth]: refs.borderWidth,
   [vars$L.inputBorderStyle]: refs.borderStyle,
-  [vars$L.inputBorderColor]: refs.borderColor,
-  [vars$L.inputOutlineWidth]: refs.outlineWidth,
-  [vars$L.inputOutlineStyle]: refs.outlineStyle,
-  [vars$L.inputOutlineColor]: refs.outlineColor,
-  [vars$L.inputOutlineOffset]: refs.outlineOffset,
-  [vars$L.inputResizeType]: 'vertical',
-  [vars$L.inputMinHeight]: '5em',
-  textAlign: {
-    right: { [vars$L.inputTextAlign]: 'right' },
-    left: { [vars$L.inputTextAlign]: 'left' },
-    center: { [vars$L.inputTextAlign]: 'center' },
-  },
-
-  _readonly: {
-    [vars$L.inputResizeType]: 'none',
-  },
+  [vars$L.inputBackgroundColor]: refs.backgroundColor,
+  [vars$L.inputSize]: checkboxSize,
+  [vars$L.inputValueTextColor]: refs.valueTextColor,
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$L
 });
 
-const vars$K = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$u = getThemeRefs(globals);
+const vars$K = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [vars$K.hostWidth]: refs.width,
   [vars$K.hostDirection]: refs.direction,
   [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.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.inputBackgroundColor]: refs.backgroundColor,
-  [vars$K.inputSize]: checkboxSize,
-  [vars$K.inputValueTextColor]: refs.valueTextColor,
-};
 
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$K
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
-
-const globalRefs$u = getThemeRefs(globals);
-const vars$J = SwitchToggleClass.cssVarList;
+  [vars$K.trackBorderStyle]: refs.borderStyle,
+  [vars$K.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$K.trackBorderColor]: refs.borderColor,
+  [vars$K.trackBackgroundColor]: refs.backgroundColor,
+  [vars$K.trackBorderRadius]: globalRefs$u.radius.md,
+  [vars$K.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$K.trackHeight]: checkboxHeight,
+
+  [vars$K.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$K.knobRadius]: '50%',
+  [vars$K.knobTopOffset]: '1px',
+  [vars$K.knobLeftOffset]: knobMargin,
+  [vars$K.knobColor]: refs.labelTextColor,
+  [vars$K.knobTransitionDuration]: '0.3s',
 
-const switchToggle = {
-  [vars$J.hostWidth]: refs.width,
-  [vars$J.hostDirection]: refs.direction,
-  [vars$J.fontSize]: refs.fontSize,
-  [vars$J.fontFamily]: refs.fontFamily,
-
-  [vars$J.inputOutlineWidth]: refs.outlineWidth,
-  [vars$J.inputOutlineOffset]: refs.outlineOffset,
-  [vars$J.inputOutlineColor]: refs.outlineColor,
-  [vars$J.inputOutlineStyle]: refs.outlineStyle,
-
-  [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]: refs.backgroundColor,
-  [vars$J.trackBorderRadius]: globalRefs$u.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.labelTextColor,
-  [vars$J.knobTransitionDuration]: '0.3s',
-
-  [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,
+  [vars$K.labelTextColor]: refs.labelTextColor,
+  [vars$K.labelFontWeight]: '400',
+  [vars$K.labelLineHeight]: '1.35em',
+  [vars$K.labelSpacing]: '1em',
+  [vars$K.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$K.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$J.trackBorderColor]: refs.borderColor,
-    [vars$J.knobLeftOffset]: `calc(100% - var(${vars$J.knobSize}) - ${knobMargin})`,
-    [vars$J.knobColor]: refs.valueTextColor,
-    [vars$J.knobTextColor]: refs.valueTextColor,
+    [vars$K.trackBorderColor]: refs.borderColor,
+    [vars$K.knobLeftOffset]: `calc(100% - var(${vars$K.knobSize}) - ${knobMargin})`,
+    [vars$K.knobColor]: refs.valueTextColor,
+    [vars$K.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$J.knobColor]: globalRefs$u.colors.surface.light,
-    [vars$J.trackBorderColor]: globalRefs$u.colors.surface.light,
-    [vars$J.trackBackgroundColor]: globalRefs$u.colors.surface.main,
-    [vars$J.labelTextColor]: refs.labelTextColor,
+    [vars$K.knobColor]: globalRefs$u.colors.surface.light,
+    [vars$K.trackBorderColor]: globalRefs$u.colors.surface.light,
+    [vars$K.trackBackgroundColor]: globalRefs$u.colors.surface.main,
+    [vars$K.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$J.knobColor]: globalRefs$u.colors.surface.light,
-      [vars$J.trackBackgroundColor]: globalRefs$u.colors.surface.main,
+      [vars$K.knobColor]: globalRefs$u.colors.surface.light,
+      [vars$K.trackBackgroundColor]: globalRefs$u.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$J.trackBorderColor]: globalRefs$u.colors.error.main,
-    [vars$J.knobColor]: globalRefs$u.colors.error.main,
+    [vars$K.trackBorderColor]: globalRefs$u.colors.error.main,
+    [vars$K.knobColor]: globalRefs$u.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$J
+  vars: vars$K
 });
 
 const globalRefs$t = getThemeRefs(globals);
@@ -16268,7 +16672,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$Z
+  componentName$_
 );
 
 const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -16363,7 +16767,7 @@ const container = {
   },
 };
 
-const vars$I = {
+const vars$J = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -16371,168 +16775,168 @@ const vars$I = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$I
+  vars: vars$J
 });
 
-const vars$H = LogoClass.cssVarList;
+const vars$I = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$H.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$I.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$H
+  vars: vars$I
 });
 
-const vars$G = TotpImageClass.cssVarList;
+const vars$H = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$G.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$H.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$G
+  vars: vars$H
 });
 
-const vars$F = NotpImageClass.cssVarList;
+const vars$G = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$F.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$G.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$F
+  vars: vars$G
 });
 
 const globalRefs$s = getThemeRefs(globals);
-const vars$E = TextClass.cssVarList;
+const vars$F = TextClass.cssVarList;
 
 const text = {
-  [vars$E.hostDirection]: globalRefs$s.direction,
-  [vars$E.textLineHeight]: '1.35em',
-  [vars$E.textAlign]: 'left',
-  [vars$E.textColor]: globalRefs$s.colors.surface.dark,
+  [vars$F.hostDirection]: globalRefs$s.direction,
+  [vars$F.textLineHeight]: '1.35em',
+  [vars$F.textAlign]: 'left',
+  [vars$F.textColor]: globalRefs$s.colors.surface.dark,
 
   variant: {
     h1: {
-      [vars$E.fontSize]: globalRefs$s.typography.h1.size,
-      [vars$E.fontWeight]: globalRefs$s.typography.h1.weight,
-      [vars$E.fontFamily]: globalRefs$s.typography.h1.font,
+      [vars$F.fontSize]: globalRefs$s.typography.h1.size,
+      [vars$F.fontWeight]: globalRefs$s.typography.h1.weight,
+      [vars$F.fontFamily]: globalRefs$s.typography.h1.font,
     },
     h2: {
-      [vars$E.fontSize]: globalRefs$s.typography.h2.size,
-      [vars$E.fontWeight]: globalRefs$s.typography.h2.weight,
-      [vars$E.fontFamily]: globalRefs$s.typography.h2.font,
+      [vars$F.fontSize]: globalRefs$s.typography.h2.size,
+      [vars$F.fontWeight]: globalRefs$s.typography.h2.weight,
+      [vars$F.fontFamily]: globalRefs$s.typography.h2.font,
     },
     h3: {
-      [vars$E.fontSize]: globalRefs$s.typography.h3.size,
-      [vars$E.fontWeight]: globalRefs$s.typography.h3.weight,
-      [vars$E.fontFamily]: globalRefs$s.typography.h3.font,
+      [vars$F.fontSize]: globalRefs$s.typography.h3.size,
+      [vars$F.fontWeight]: globalRefs$s.typography.h3.weight,
+      [vars$F.fontFamily]: globalRefs$s.typography.h3.font,
     },
     subtitle1: {
-      [vars$E.fontSize]: globalRefs$s.typography.subtitle1.size,
-      [vars$E.fontWeight]: globalRefs$s.typography.subtitle1.weight,
-      [vars$E.fontFamily]: globalRefs$s.typography.subtitle1.font,
+      [vars$F.fontSize]: globalRefs$s.typography.subtitle1.size,
+      [vars$F.fontWeight]: globalRefs$s.typography.subtitle1.weight,
+      [vars$F.fontFamily]: globalRefs$s.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$E.fontSize]: globalRefs$s.typography.subtitle2.size,
-      [vars$E.fontWeight]: globalRefs$s.typography.subtitle2.weight,
-      [vars$E.fontFamily]: globalRefs$s.typography.subtitle2.font,
+      [vars$F.fontSize]: globalRefs$s.typography.subtitle2.size,
+      [vars$F.fontWeight]: globalRefs$s.typography.subtitle2.weight,
+      [vars$F.fontFamily]: globalRefs$s.typography.subtitle2.font,
     },
     body1: {
-      [vars$E.fontSize]: globalRefs$s.typography.body1.size,
-      [vars$E.fontWeight]: globalRefs$s.typography.body1.weight,
-      [vars$E.fontFamily]: globalRefs$s.typography.body1.font,
+      [vars$F.fontSize]: globalRefs$s.typography.body1.size,
+      [vars$F.fontWeight]: globalRefs$s.typography.body1.weight,
+      [vars$F.fontFamily]: globalRefs$s.typography.body1.font,
     },
     body2: {
-      [vars$E.fontSize]: globalRefs$s.typography.body2.size,
-      [vars$E.fontWeight]: globalRefs$s.typography.body2.weight,
-      [vars$E.fontFamily]: globalRefs$s.typography.body2.font,
+      [vars$F.fontSize]: globalRefs$s.typography.body2.size,
+      [vars$F.fontWeight]: globalRefs$s.typography.body2.weight,
+      [vars$F.fontFamily]: globalRefs$s.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$E.textColor]: globalRefs$s.colors.surface.contrast,
+      [vars$F.textColor]: globalRefs$s.colors.surface.contrast,
     },
     secondary: {
-      [vars$E.textColor]: globalRefs$s.colors.surface.dark,
+      [vars$F.textColor]: globalRefs$s.colors.surface.dark,
     },
     error: {
-      [vars$E.textColor]: globalRefs$s.colors.error.main,
+      [vars$F.textColor]: globalRefs$s.colors.error.main,
     },
     success: {
-      [vars$E.textColor]: globalRefs$s.colors.success.main,
+      [vars$F.textColor]: globalRefs$s.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$r = getThemeRefs(globals);
-const vars$D = LinkClass.cssVarList;
+const vars$E = LinkClass.cssVarList;
 
 const link = {
-  [vars$D.hostDirection]: globalRefs$r.direction,
-  [vars$D.cursor]: 'pointer',
+  [vars$E.hostDirection]: globalRefs$r.direction,
+  [vars$E.cursor]: 'pointer',
 
-  [vars$D.textColor]: globalRefs$r.colors.primary.main,
+  [vars$E.textColor]: globalRefs$r.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%',
   },
 
   _hover: {
-    [vars$D.textDecoration]: 'underline',
+    [vars$E.textDecoration]: 'underline',
   },
 
   mode: {
     secondary: {
-      [vars$D.textColor]: globalRefs$r.colors.secondary.main,
+      [vars$E.textColor]: globalRefs$r.colors.secondary.main,
     },
     error: {
-      [vars$D.textColor]: globalRefs$r.colors.error.main,
+      [vars$E.textColor]: globalRefs$r.colors.error.main,
     },
     success: {
-      [vars$D.textColor]: globalRefs$r.colors.success.main,
+      [vars$E.textColor]: globalRefs$r.colors.success.main,
     },
   },
 };
@@ -16540,37 +16944,37 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$D
+  vars: vars$E
 });
 
 const globalRefs$q = getThemeRefs(globals);
-const vars$C = EnrichedTextClass.cssVarList;
+const vars$D = EnrichedTextClass.cssVarList;
 
 const enrichedText = {
-  [vars$C.hostDirection]: globalRefs$q.direction,
-  [vars$C.hostWidth]: useVar(vars$E.hostWidth),
+  [vars$D.hostDirection]: globalRefs$q.direction,
+  [vars$D.hostWidth]: useVar(vars$F.hostWidth),
 
-  [vars$C.textLineHeight]: useVar(vars$E.textLineHeight),
-  [vars$C.textColor]: useVar(vars$E.textColor),
-  [vars$C.textAlign]: useVar(vars$E.textAlign),
+  [vars$D.textLineHeight]: useVar(vars$F.textLineHeight),
+  [vars$D.textColor]: useVar(vars$F.textColor),
+  [vars$D.textAlign]: useVar(vars$F.textAlign),
 
-  [vars$C.fontSize]: useVar(vars$E.fontSize),
-  [vars$C.fontWeight]: useVar(vars$E.fontWeight),
-  [vars$C.fontFamily]: useVar(vars$E.fontFamily),
+  [vars$D.fontSize]: useVar(vars$F.fontSize),
+  [vars$D.fontWeight]: useVar(vars$F.fontWeight),
+  [vars$D.fontFamily]: useVar(vars$F.fontFamily),
 
-  [vars$C.linkColor]: useVar(vars$D.textColor),
-  [vars$C.linkTextDecoration]: 'none',
-  [vars$C.linkHoverTextDecoration]: 'underline',
+  [vars$D.linkColor]: useVar(vars$E.textColor),
+  [vars$D.linkTextDecoration]: 'none',
+  [vars$D.linkHoverTextDecoration]: 'underline',
 
-  [vars$C.fontWeightBold]: '900',
-  [vars$C.minWidth]: '0.25em',
-  [vars$C.minHeight]: '1.35em',
+  [vars$D.fontWeightBold]: '900',
+  [vars$D.minWidth]: '0.25em',
+  [vars$D.minHeight]: '1.35em',
 
-  [vars$C.hostDisplay]: 'inline-block',
+  [vars$D.hostDisplay]: 'inline-block',
 
   _empty: {
     _hideWhenEmpty: {
-      [vars$C.hostDisplay]: 'none',
+      [vars$D.hostDisplay]: 'none',
     },
   },
 };
@@ -16578,7 +16982,7 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$C
+  vars: vars$D
 });
 
 const globalRefs$p = getThemeRefs(globals);
@@ -16589,7 +16993,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$T
+  componentName$U
 );
 
 const divider = {
@@ -16620,7 +17024,7 @@ const divider = {
   },
 };
 
-const vars$B = {
+const vars$C = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -16628,93 +17032,93 @@ const vars$B = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$B
+  vars: vars$C
 });
 
-const vars$A = PasscodeClass.cssVarList;
+const vars$B = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$A.hostDirection]: refs.direction,
-  [vars$A.fontFamily]: refs.fontFamily,
-  [vars$A.fontSize]: refs.fontSize,
-  [vars$A.labelTextColor]: refs.labelTextColor,
-  [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$A.digitValueTextColor]: refs.valueTextColor,
-  [vars$A.digitPadding]: '0',
-  [vars$A.digitTextAlign]: 'center',
-  [vars$A.digitSpacing]: '4px',
-  [vars$A.hostWidth]: refs.width,
-  [vars$A.digitOutlineColor]: 'transparent',
-  [vars$A.digitOutlineWidth]: refs.outlineWidth,
-  [vars$A.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$A.digitSize]: refs.inputHeight,
+  [vars$B.hostDirection]: refs.direction,
+  [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,
 
   size: {
-    xs: { [vars$A.spinnerSize]: '15px' },
-    sm: { [vars$A.spinnerSize]: '20px' },
-    md: { [vars$A.spinnerSize]: '20px' },
-    lg: { [vars$A.spinnerSize]: '20px' },
+    xs: { [vars$B.spinnerSize]: '15px' },
+    sm: { [vars$B.spinnerSize]: '20px' },
+    md: { [vars$B.spinnerSize]: '20px' },
+    lg: { [vars$B.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$A.digitCaretTextColor]: 'transparent',
+    [vars$B.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$A.overlayOpacity]: refs.overlayOpacity,
+    [vars$B.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$A
+  vars: vars$B
 });
 
 const globalRefs$o = getThemeRefs(globals);
-const vars$z = LoaderLinearClass.cssVarList;
+const vars$A = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$z.hostDisplay]: 'inline-block',
-  [vars$z.hostWidth]: '100%',
+  [vars$A.hostDisplay]: 'inline-block',
+  [vars$A.hostWidth]: '100%',
 
-  [vars$z.barColor]: globalRefs$o.colors.surface.contrast,
-  [vars$z.barWidth]: '20%',
+  [vars$A.barColor]: globalRefs$o.colors.surface.contrast,
+  [vars$A.barWidth]: '20%',
 
-  [vars$z.barBackgroundColor]: globalRefs$o.colors.surface.light,
-  [vars$z.barBorderRadius]: '4px',
+  [vars$A.barBackgroundColor]: globalRefs$o.colors.surface.light,
+  [vars$A.barBorderRadius]: '4px',
 
-  [vars$z.animationDuration]: '2s',
-  [vars$z.animationTimingFunction]: 'linear',
-  [vars$z.animationIterationCount]: 'infinite',
-  [vars$z.verticalPadding]: '0.25em',
+  [vars$A.animationDuration]: '2s',
+  [vars$A.animationTimingFunction]: 'linear',
+  [vars$A.animationIterationCount]: 'infinite',
+  [vars$A.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$z.barHeight]: '2px' },
-    sm: { [vars$z.barHeight]: '4px' },
-    md: { [vars$z.barHeight]: '6px' },
-    lg: { [vars$z.barHeight]: '8px' },
+    xs: { [vars$A.barHeight]: '2px' },
+    sm: { [vars$A.barHeight]: '4px' },
+    md: { [vars$A.barHeight]: '6px' },
+    lg: { [vars$A.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$z.barColor]: globalRefs$o.colors.primary.main,
+      [vars$A.barColor]: globalRefs$o.colors.primary.main,
     },
     secondary: {
-      [vars$z.barColor]: globalRefs$o.colors.secondary.main,
+      [vars$A.barColor]: globalRefs$o.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$z.hostDisplay]: 'none',
+    [vars$A.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$z
+  vars: vars$A
 });
 
 const globalRefs$n = getThemeRefs(globals);
@@ -16732,7 +17136,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
       },
     },
   },
-  componentName$_
+  componentName$$
 );
 
 const loaderRadial = {
@@ -16761,7 +17165,7 @@ const loaderRadial = {
     [compVars$3.hostDisplay]: 'none',
   },
 };
-const vars$y = {
+const vars$z = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -16769,93 +17173,134 @@ const vars$y = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$y
+  vars: vars$z
 });
 
 const globalRefs$m = getThemeRefs(globals);
-const vars$x = ComboBoxClass.cssVarList;
+const vars$y = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$x.hostWidth]: refs.width,
-  [vars$x.hostDirection]: refs.direction,
-  [vars$x.fontSize]: refs.fontSize,
-  [vars$x.fontFamily]: refs.fontFamily,
-  [vars$x.labelFontSize]: refs.labelFontSize,
-  [vars$x.labelFontWeight]: refs.labelFontWeight,
-  [vars$x.labelTextColor]: refs.labelTextColor,
-  [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$x.inputBorderColor]: refs.borderColor,
-  [vars$x.inputBorderWidth]: refs.borderWidth,
-  [vars$x.inputBorderStyle]: refs.borderStyle,
-  [vars$x.inputBorderRadius]: refs.borderRadius,
-  [vars$x.inputOutlineColor]: refs.outlineColor,
-  [vars$x.inputOutlineOffset]: refs.outlineOffset,
-  [vars$x.inputOutlineWidth]: refs.outlineWidth,
-  [vars$x.inputOutlineStyle]: refs.outlineStyle,
-  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$x.inputValueTextColor]: refs.valueTextColor,
-  [vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$x.inputBackgroundColor]: refs.backgroundColor,
-  [vars$x.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$x.inputHeight]: refs.inputHeight,
-  [vars$x.inputDropdownButtonColor]: globalRefs$m.colors.surface.dark,
-  [vars$x.inputDropdownButtonCursor]: 'pointer',
-  [vars$x.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$x.inputDropdownButtonOffset]: globalRefs$m.spacing.xs,
-  [vars$x.overlayItemPaddingInlineStart]: globalRefs$m.spacing.xs,
-  [vars$x.overlayItemPaddingInlineEnd]: globalRefs$m.spacing.lg,
-  [vars$x.labelPosition]: refs.labelPosition,
-  [vars$x.labelTopPosition]: refs.labelTopPosition,
-  [vars$x.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$x.inputTransformY]: refs.inputTransformY,
-  [vars$x.inputTransition]: refs.inputTransition,
-  [vars$x.marginInlineStart]: refs.marginInlineStart,
-  [vars$x.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$x.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$x.valueInputHeight]: refs.valueInputHeight,
-  [vars$x.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$y.hostWidth]: refs.width,
+  [vars$y.hostDirection]: refs.direction,
+  [vars$y.fontSize]: refs.fontSize,
+  [vars$y.fontFamily]: refs.fontFamily,
+  [vars$y.labelFontSize]: refs.labelFontSize,
+  [vars$y.labelFontWeight]: refs.labelFontWeight,
+  [vars$y.labelTextColor]: refs.labelTextColor,
+  [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$y.inputBorderColor]: refs.borderColor,
+  [vars$y.inputBorderWidth]: refs.borderWidth,
+  [vars$y.inputBorderStyle]: refs.borderStyle,
+  [vars$y.inputBorderRadius]: refs.borderRadius,
+  [vars$y.inputOutlineColor]: refs.outlineColor,
+  [vars$y.inputOutlineOffset]: refs.outlineOffset,
+  [vars$y.inputOutlineWidth]: refs.outlineWidth,
+  [vars$y.inputOutlineStyle]: refs.outlineStyle,
+  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$y.inputValueTextColor]: refs.valueTextColor,
+  [vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$y.inputBackgroundColor]: refs.backgroundColor,
+  [vars$y.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$y.inputHeight]: refs.inputHeight,
+  [vars$y.inputDropdownButtonColor]: globalRefs$m.colors.surface.dark,
+  [vars$y.inputDropdownButtonCursor]: 'pointer',
+  [vars$y.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$y.inputDropdownButtonOffset]: globalRefs$m.spacing.xs,
+  [vars$y.overlayItemPaddingInlineStart]: globalRefs$m.spacing.xs,
+  [vars$y.overlayItemPaddingInlineEnd]: globalRefs$m.spacing.lg,
+  [vars$y.labelPosition]: refs.labelPosition,
+  [vars$y.labelTopPosition]: refs.labelTopPosition,
+  [vars$y.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$y.inputTransformY]: refs.inputTransformY,
+  [vars$y.inputTransition]: refs.inputTransition,
+  [vars$y.marginInlineStart]: refs.marginInlineStart,
+  [vars$y.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$y.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$y.valueInputHeight]: refs.valueInputHeight,
+  [vars$y.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
   _readonly: {
-    [vars$x.inputDropdownButtonCursor]: 'default',
+    [vars$y.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$x.overlayFontSize]: refs.fontSize,
-  [vars$x.overlayFontFamily]: refs.fontFamily,
-  [vars$x.overlayCursor]: 'pointer',
-  [vars$x.overlayItemBoxShadow]: 'none',
-  [vars$x.overlayBackground]: refs.backgroundColor,
-  [vars$x.overlayTextColor]: refs.valueTextColor,
+  [vars$y.overlayFontSize]: refs.fontSize,
+  [vars$y.overlayFontFamily]: refs.fontFamily,
+  [vars$y.overlayCursor]: 'pointer',
+  [vars$y.overlayItemBoxShadow]: 'none',
+  [vars$y.overlayBackground]: refs.backgroundColor,
+  [vars$y.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$x.overlay.minHeight]: '400px',
-  [vars$x.overlay.margin]: '0',
+  [vars$y.overlay.minHeight]: '400px',
+  [vars$y.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$x
+  vars: vars$y
 });
 
-const vars$w = ImageClass.cssVarList;
+const vars$x = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$w
+  vars: vars$x
 });
 
-const vars$v = PhoneFieldClass.cssVarList;
+const vars$w = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$v.hostWidth]: refs.width,
+  [vars$w.hostWidth]: refs.width,
+  [vars$w.hostDirection]: refs.direction,
+  [vars$w.fontSize]: refs.fontSize,
+  [vars$w.fontFamily]: refs.fontFamily,
+  [vars$w.labelTextColor]: refs.labelTextColor,
+  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$w.inputValueTextColor]: refs.valueTextColor,
+  [vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$w.inputBorderStyle]: refs.borderStyle,
+  [vars$w.inputBorderWidth]: refs.borderWidth,
+  [vars$w.inputBorderColor]: refs.borderColor,
+  [vars$w.inputBorderRadius]: refs.borderRadius,
+  [vars$w.inputOutlineStyle]: refs.outlineStyle,
+  [vars$w.inputOutlineWidth]: refs.outlineWidth,
+  [vars$w.inputOutlineColor]: refs.outlineColor,
+  [vars$w.inputOutlineOffset]: refs.outlineOffset,
+  [vars$w.phoneInputWidth]: refs.minWidth,
+  [vars$w.countryCodeInputWidth]: '5em',
+  [vars$w.countryCodeDropdownWidth]: '20em',
+  [vars$w.marginInlineStart]: '-0.25em',
+  [vars$w.valueInputHeight]: refs.valueInputHeight,
+  [vars$w.valueInputMarginBottom]: refs.valueInputMarginBottom,
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$w
+});
+
+const vars$v = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$v.hostWidth]: '16em',
+  [vars$v.hostMinWidth]: refs.minWidth,
   [vars$v.hostDirection]: refs.direction,
   [vars$v.fontSize]: refs.fontSize,
   [vars$v.fontFamily]: refs.fontFamily,
+  [vars$v.labelFontSize]: refs.labelFontSize,
+  [vars$v.labelFontWeight]: refs.labelFontWeight,
   [vars$v.labelTextColor]: refs.labelTextColor,
   [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -16869,28 +17314,32 @@ const phoneField = {
   [vars$v.inputOutlineWidth]: refs.outlineWidth,
   [vars$v.inputOutlineColor]: refs.outlineColor,
   [vars$v.inputOutlineOffset]: refs.outlineOffset,
-  [vars$v.phoneInputWidth]: refs.minWidth,
-  [vars$v.countryCodeInputWidth]: '5em',
-  [vars$v.countryCodeDropdownWidth]: '20em',
-  [vars$v.marginInlineStart]: '-0.25em',
+  [vars$v.labelPosition]: refs.labelPosition,
+  [vars$v.labelTopPosition]: refs.labelTopPosition,
+  [vars$v.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$v.inputTransformY]: refs.inputTransformY,
+  [vars$v.inputTransition]: refs.inputTransition,
+  [vars$v.marginInlineStart]: refs.marginInlineStart,
   [vars$v.valueInputHeight]: refs.valueInputHeight,
   [vars$v.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$v.inputHorizontalPadding]: '0',
 
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$v.hostWidth]: refs.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$v
 });
 
-const vars$u = PhoneFieldInputBoxClass.cssVarList;
+const globalRefs$l = getThemeRefs(globals);
+const vars$u = NewPasswordClass.cssVarList;
 
-const phoneInputBoxField = {
-  [vars$u.hostWidth]: '16em',
+const newPassword = {
+  [vars$u.hostWidth]: refs.width,
   [vars$u.hostMinWidth]: refs.minWidth,
   [vars$u.hostDirection]: refs.direction,
   [vars$u.fontSize]: refs.fontSize,
@@ -16898,171 +17347,126 @@ const phoneInputBoxField = {
   [vars$u.labelFontSize]: refs.labelFontSize,
   [vars$u.labelFontWeight]: refs.labelFontWeight,
   [vars$u.labelTextColor]: refs.labelTextColor,
-  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$u.spaceBetweenInputs]: '1em',
   [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$u.inputValueTextColor]: refs.valueTextColor,
-  [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$u.inputBorderStyle]: refs.borderStyle,
-  [vars$u.inputBorderWidth]: refs.borderWidth,
-  [vars$u.inputBorderColor]: refs.borderColor,
-  [vars$u.inputBorderRadius]: refs.borderRadius,
-  [vars$u.inputOutlineStyle]: refs.outlineStyle,
-  [vars$u.inputOutlineWidth]: refs.outlineWidth,
-  [vars$u.inputOutlineColor]: refs.outlineColor,
-  [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.labelPosition]: refs.labelPosition,
-  [vars$u.labelTopPosition]: refs.labelTopPosition,
-  [vars$u.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$u.inputTransformY]: refs.inputTransformY,
-  [vars$u.inputTransition]: refs.inputTransition,
-  [vars$u.marginInlineStart]: refs.marginInlineStart,
+  [vars$u.policyPreviewBackgroundColor]: 'none',
+  [vars$u.policyPreviewPadding]: globalRefs$l.spacing.lg,
   [vars$u.valueInputHeight]: refs.valueInputHeight,
-  [vars$u.valueInputMarginBottom]: refs.valueInputMarginBottom,
-  [vars$u.inputHorizontalPadding]: '0',
-
-  _fullWidth: {
-    [vars$u.hostWidth]: refs.width,
-  },
-};
-
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$u
-});
-
-const globalRefs$l = getThemeRefs(globals);
-const vars$t = NewPasswordClass.cssVarList;
-
-const newPassword = {
-  [vars$t.hostWidth]: refs.width,
-  [vars$t.hostMinWidth]: refs.minWidth,
-  [vars$t.hostDirection]: refs.direction,
-  [vars$t.fontSize]: refs.fontSize,
-  [vars$t.fontFamily]: refs.fontFamily,
-  [vars$t.labelFontSize]: refs.labelFontSize,
-  [vars$t.labelFontWeight]: refs.labelFontWeight,
-  [vars$t.labelTextColor]: refs.labelTextColor,
-  [vars$t.spaceBetweenInputs]: '1em',
-  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$t.policyPreviewBackgroundColor]: 'none',
-  [vars$t.policyPreviewPadding]: globalRefs$l.spacing.lg,
-  [vars$t.valueInputHeight]: refs.valueInputHeight,
 
   _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$t.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$u.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$t
+  vars: vars$u
 });
 
-const vars$s = UploadFileClass.cssVarList;
+const vars$t = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$s.hostDirection]: refs.direction,
-  [vars$s.labelTextColor]: refs.labelTextColor,
-  [vars$s.fontFamily]: refs.fontFamily,
+  [vars$t.hostDirection]: refs.direction,
+  [vars$t.labelTextColor]: refs.labelTextColor,
+  [vars$t.fontFamily]: refs.fontFamily,
 
-  [vars$s.iconSize]: '2em',
+  [vars$t.iconSize]: '2em',
 
-  [vars$s.hostPadding]: '0.75em',
-  [vars$s.gap]: '0.5em',
+  [vars$t.hostPadding]: '0.75em',
+  [vars$t.gap]: '0.5em',
 
-  [vars$s.fontSize]: '16px',
-  [vars$s.titleFontWeight]: '500',
-  [vars$s.lineHeight]: '1em',
+  [vars$t.fontSize]: '16px',
+  [vars$t.titleFontWeight]: '500',
+  [vars$t.lineHeight]: '1em',
 
-  [vars$s.borderWidth]: refs.borderWidth,
-  [vars$s.borderColor]: refs.borderColor,
-  [vars$s.borderRadius]: refs.borderRadius,
-  [vars$s.borderStyle]: 'dashed',
+  [vars$t.borderWidth]: refs.borderWidth,
+  [vars$t.borderColor]: refs.borderColor,
+  [vars$t.borderRadius]: refs.borderRadius,
+  [vars$t.borderStyle]: 'dashed',
 
   _required: {
-    [vars$s.requiredIndicator]: refs.requiredIndicator,
+    [vars$t.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$s.hostHeight]: '196px',
-      [vars$s.hostWidth]: '200px',
-      [vars$s.titleFontSize]: '0.875em',
-      [vars$s.descriptionFontSize]: '0.875em',
-      [vars$s.lineHeight]: '1.25em',
+      [vars$t.hostHeight]: '196px',
+      [vars$t.hostWidth]: '200px',
+      [vars$t.titleFontSize]: '0.875em',
+      [vars$t.descriptionFontSize]: '0.875em',
+      [vars$t.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$s.hostHeight]: '216px',
-      [vars$s.hostWidth]: '230px',
-      [vars$s.titleFontSize]: '1em',
-      [vars$s.descriptionFontSize]: '0.875em',
-      [vars$s.lineHeight]: '1.25em',
+      [vars$t.hostHeight]: '216px',
+      [vars$t.hostWidth]: '230px',
+      [vars$t.titleFontSize]: '1em',
+      [vars$t.descriptionFontSize]: '0.875em',
+      [vars$t.lineHeight]: '1.25em',
     },
     md: {
-      [vars$s.hostHeight]: '256px',
-      [vars$s.hostWidth]: '312px',
-      [vars$s.titleFontSize]: '1.125em',
-      [vars$s.descriptionFontSize]: '1em',
-      [vars$s.lineHeight]: '1.5em',
+      [vars$t.hostHeight]: '256px',
+      [vars$t.hostWidth]: '312px',
+      [vars$t.titleFontSize]: '1.125em',
+      [vars$t.descriptionFontSize]: '1em',
+      [vars$t.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$s.hostHeight]: '280px',
-      [vars$s.hostWidth]: '336px',
-      [vars$s.titleFontSize]: '1.125em',
-      [vars$s.descriptionFontSize]: '1.125em',
-      [vars$s.lineHeight]: '1.75em',
+      [vars$t.hostHeight]: '280px',
+      [vars$t.hostWidth]: '336px',
+      [vars$t.titleFontSize]: '1.125em',
+      [vars$t.descriptionFontSize]: '1.125em',
+      [vars$t.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$s.hostWidth]: refs.width,
+    [vars$t.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$s
+  vars: vars$t
 });
 
 const globalRefs$k = getThemeRefs(globals);
 
-const vars$r = ButtonSelectionGroupItemClass.cssVarList;
+const vars$s = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$r.hostDirection]: 'inherit',
-  [vars$r.backgroundColor]: globalRefs$k.colors.surface.main,
-  [vars$r.labelTextColor]: globalRefs$k.colors.surface.contrast,
-  [vars$r.borderColor]: globalRefs$k.colors.surface.light,
-  [vars$r.borderStyle]: 'solid',
-  [vars$r.borderRadius]: globalRefs$k.radius.sm,
-  [vars$r.outlineColor]: 'transparent',
-  [vars$r.borderWidth]: globalRefs$k.border.xs,
+  [vars$s.hostDirection]: 'inherit',
+  [vars$s.backgroundColor]: globalRefs$k.colors.surface.main,
+  [vars$s.labelTextColor]: globalRefs$k.colors.surface.contrast,
+  [vars$s.borderColor]: globalRefs$k.colors.surface.light,
+  [vars$s.borderStyle]: 'solid',
+  [vars$s.borderRadius]: globalRefs$k.radius.sm,
+  [vars$s.outlineColor]: 'transparent',
+  [vars$s.borderWidth]: globalRefs$k.border.xs,
 
   _hover: {
-    [vars$r.backgroundColor]: globalRefs$k.colors.surface.highlight,
+    [vars$s.backgroundColor]: globalRefs$k.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$r.outlineColor]: globalRefs$k.colors.surface.light,
+    [vars$s.outlineColor]: globalRefs$k.colors.surface.light,
   },
 
   _selected: {
-    [vars$r.borderColor]: globalRefs$k.colors.surface.contrast,
-    [vars$r.backgroundColor]: globalRefs$k.colors.surface.contrast,
-    [vars$r.labelTextColor]: globalRefs$k.colors.surface.main,
+    [vars$s.borderColor]: globalRefs$k.colors.surface.contrast,
+    [vars$s.backgroundColor]: globalRefs$k.colors.surface.contrast,
+    [vars$s.labelTextColor]: globalRefs$k.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$r
+  vars: vars$s
 });
 
 const globalRefs$j = getThemeRefs(globals);
@@ -17077,28 +17481,28 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostWidth]: refs.width,
 });
 
-const vars$q = ButtonSelectionGroupClass.cssVarList;
+const vars$r = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$q),
+  ...createBaseButtonSelectionGroupMappings(vars$r),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$q
+  vars: vars$r
 });
 
-const vars$p = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$q = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$p),
+  ...createBaseButtonSelectionGroupMappings(vars$q),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$p
+  vars: vars$q
 });
 
 const globalRefs$i = getThemeRefs(globals);
@@ -17111,58 +17515,58 @@ const modal = {
   [compVars$2.overlayWidth]: '540px',
 };
 
-const vars$o = {
+const vars$p = {
   ...compVars$2,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$o
+  vars: vars$p
 });
 
 const globalRefs$h = getThemeRefs(globals);
-const vars$n = GridClass.cssVarList;
+const vars$o = GridClass.cssVarList;
 
 const grid = {
-  [vars$n.hostWidth]: '100%',
-  [vars$n.hostHeight]: '100%',
-  [vars$n.hostMinHeight]: '400px',
-  [vars$n.fontWeight]: '400',
-  [vars$n.backgroundColor]: globalRefs$h.colors.surface.main,
-
-  [vars$n.fontSize]: refs.fontSize,
-  [vars$n.fontFamily]: refs.fontFamily,
-
-  [vars$n.sortIndicatorsColor]: globalRefs$h.colors.surface.light,
-  [vars$n.activeSortIndicator]: globalRefs$h.colors.surface.dark,
-  [vars$n.resizeHandleColor]: globalRefs$h.colors.surface.light,
-
-  [vars$n.borderWidth]: refs.borderWidth,
-  [vars$n.borderStyle]: refs.borderStyle,
-  [vars$n.borderRadius]: refs.borderRadius,
-  [vars$n.borderColor]: 'transparent',
-
-  [vars$n.headerRowTextColor]: globalRefs$h.colors.surface.dark,
-  [vars$n.separatorColor]: globalRefs$h.colors.surface.light,
-
-  [vars$n.valueTextColor]: globalRefs$h.colors.surface.contrast,
-  [vars$n.selectedBackgroundColor]: globalRefs$h.colors.surface.highlight,
-  [vars$n.hostDirection]: globalRefs$h.direction,
-
-  [vars$n.toggleDetailsPanelButtonSize]: '1em',
-  [vars$n.toggleDetailsPanelButtonOpenedColor]: globalRefs$h.colors.surface.contrast,
-  [vars$n.toggleDetailsPanelButtonClosedColor]: globalRefs$h.colors.surface.light,
-  [vars$n.toggleDetailsPanelButtonCursor]: 'pointer',
-  [vars$n.detailsPanelBackgroundColor]: globalRefs$h.colors.surface.highlight,
-  [vars$n.detailsPanelBorderTopColor]: globalRefs$h.colors.surface.light,
-  [vars$n.detailsPanelLabelsColor]: globalRefs$h.colors.surface.dark,
-  [vars$n.detailsPanelLabelsFontSize]: '0.8em',
-  [vars$n.detailsPanelItemsGap]: '2em',
-  [vars$n.detailsPanelPadding]: '12px 0',
+  [vars$o.hostWidth]: '100%',
+  [vars$o.hostHeight]: '100%',
+  [vars$o.hostMinHeight]: '400px',
+  [vars$o.fontWeight]: '400',
+  [vars$o.backgroundColor]: globalRefs$h.colors.surface.main,
+
+  [vars$o.fontSize]: refs.fontSize,
+  [vars$o.fontFamily]: refs.fontFamily,
+
+  [vars$o.sortIndicatorsColor]: globalRefs$h.colors.surface.light,
+  [vars$o.activeSortIndicator]: globalRefs$h.colors.surface.dark,
+  [vars$o.resizeHandleColor]: globalRefs$h.colors.surface.light,
+
+  [vars$o.borderWidth]: refs.borderWidth,
+  [vars$o.borderStyle]: refs.borderStyle,
+  [vars$o.borderRadius]: refs.borderRadius,
+  [vars$o.borderColor]: 'transparent',
+
+  [vars$o.headerRowTextColor]: globalRefs$h.colors.surface.dark,
+  [vars$o.separatorColor]: globalRefs$h.colors.surface.light,
+
+  [vars$o.valueTextColor]: globalRefs$h.colors.surface.contrast,
+  [vars$o.selectedBackgroundColor]: globalRefs$h.colors.surface.highlight,
+  [vars$o.hostDirection]: globalRefs$h.direction,
+
+  [vars$o.toggleDetailsPanelButtonSize]: '1em',
+  [vars$o.toggleDetailsPanelButtonOpenedColor]: globalRefs$h.colors.surface.contrast,
+  [vars$o.toggleDetailsPanelButtonClosedColor]: globalRefs$h.colors.surface.light,
+  [vars$o.toggleDetailsPanelButtonCursor]: 'pointer',
+  [vars$o.detailsPanelBackgroundColor]: globalRefs$h.colors.surface.highlight,
+  [vars$o.detailsPanelBorderTopColor]: globalRefs$h.colors.surface.light,
+  [vars$o.detailsPanelLabelsColor]: globalRefs$h.colors.surface.dark,
+  [vars$o.detailsPanelLabelsFontSize]: '0.8em',
+  [vars$o.detailsPanelItemsGap]: '2em',
+  [vars$o.detailsPanelPadding]: '12px 0',
 
   _bordered: {
-    [vars$n.borderColor]: refs.borderColor,
+    [vars$o.borderColor]: refs.borderColor,
   },
 };
 
@@ -17170,53 +17574,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$n
+  vars: vars$o
 });
 
 const globalRefs$g = getThemeRefs(globals);
-const vars$m = NotificationCardClass.cssVarList;
+const vars$n = NotificationCardClass.cssVarList;
 
 const shadowColor$2 = '#00000020';
 
 const notification = {
-  [vars$m.hostMinWidth]: '415px',
-  [vars$m.fontFamily]: globalRefs$g.fonts.font1.family,
-  [vars$m.fontSize]: globalRefs$g.typography.body1.size,
-  [vars$m.backgroundColor]: globalRefs$g.colors.surface.main,
-  [vars$m.textColor]: globalRefs$g.colors.surface.contrast,
-  [vars$m.boxShadow]: `${globalRefs$g.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$g.shadow.narrow.xl} ${shadowColor$2}`,
-  [vars$m.verticalPadding]: '0.625em',
-  [vars$m.horizontalPadding]: '1.5em',
-  [vars$m.borderRadius]: globalRefs$g.radius.xs,
+  [vars$n.hostMinWidth]: '415px',
+  [vars$n.fontFamily]: globalRefs$g.fonts.font1.family,
+  [vars$n.fontSize]: globalRefs$g.typography.body1.size,
+  [vars$n.backgroundColor]: globalRefs$g.colors.surface.main,
+  [vars$n.textColor]: globalRefs$g.colors.surface.contrast,
+  [vars$n.boxShadow]: `${globalRefs$g.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$g.shadow.narrow.xl} ${shadowColor$2}`,
+  [vars$n.verticalPadding]: '0.625em',
+  [vars$n.horizontalPadding]: '1.5em',
+  [vars$n.borderRadius]: globalRefs$g.radius.xs,
 
   _bordered: {
-    [vars$m.borderWidth]: globalRefs$g.border.sm,
-    [vars$m.borderStyle]: 'solid',
-    [vars$m.borderColor]: 'transparent',
+    [vars$n.borderWidth]: globalRefs$g.border.sm,
+    [vars$n.borderStyle]: 'solid',
+    [vars$n.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$m.fontSize]: '12px' },
-    sm: { [vars$m.fontSize]: '14px' },
-    md: { [vars$m.fontSize]: '16px' },
-    lg: { [vars$m.fontSize]: '18px' },
+    xs: { [vars$n.fontSize]: '12px' },
+    sm: { [vars$n.fontSize]: '14px' },
+    md: { [vars$n.fontSize]: '16px' },
+    lg: { [vars$n.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$m.backgroundColor]: globalRefs$g.colors.primary.main,
-      [vars$m.textColor]: globalRefs$g.colors.primary.contrast,
-      [vars$m.borderColor]: globalRefs$g.colors.primary.light,
+      [vars$n.backgroundColor]: globalRefs$g.colors.primary.main,
+      [vars$n.textColor]: globalRefs$g.colors.primary.contrast,
+      [vars$n.borderColor]: globalRefs$g.colors.primary.light,
     },
     success: {
-      [vars$m.backgroundColor]: globalRefs$g.colors.success.main,
-      [vars$m.textColor]: globalRefs$g.colors.success.contrast,
-      [vars$m.borderColor]: globalRefs$g.colors.success.light,
+      [vars$n.backgroundColor]: globalRefs$g.colors.success.main,
+      [vars$n.textColor]: globalRefs$g.colors.success.contrast,
+      [vars$n.borderColor]: globalRefs$g.colors.success.light,
     },
     error: {
-      [vars$m.backgroundColor]: globalRefs$g.colors.error.main,
-      [vars$m.textColor]: globalRefs$g.colors.error.contrast,
-      [vars$m.borderColor]: globalRefs$g.colors.error.light,
+      [vars$n.backgroundColor]: globalRefs$g.colors.error.main,
+      [vars$n.textColor]: globalRefs$g.colors.error.contrast,
+      [vars$n.borderColor]: globalRefs$g.colors.error.light,
     },
   },
 };
@@ -17224,148 +17628,148 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$m
+  vars: vars$n
 });
 
 const globalRefs$f = getThemeRefs(globals);
-const vars$l = MultiSelectComboBoxClass.cssVarList;
+const vars$m = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$l.hostWidth]: refs.width,
-  [vars$l.hostDirection]: refs.direction,
-  [vars$l.fontSize]: refs.fontSize,
-  [vars$l.fontFamily]: refs.fontFamily,
-  [vars$l.labelFontSize]: refs.labelFontSize,
-  [vars$l.labelFontWeight]: refs.labelFontWeight,
-  [vars$l.labelTextColor]: refs.labelTextColor,
-  [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$l.inputBorderColor]: refs.borderColor,
-  [vars$l.inputBorderWidth]: refs.borderWidth,
-  [vars$l.inputBorderStyle]: refs.borderStyle,
-  [vars$l.inputBorderRadius]: refs.borderRadius,
-  [vars$l.inputOutlineColor]: refs.outlineColor,
-  [vars$l.inputOutlineOffset]: refs.outlineOffset,
-  [vars$l.inputOutlineWidth]: refs.outlineWidth,
-  [vars$l.inputOutlineStyle]: refs.outlineStyle,
-  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$l.inputValueTextColor]: refs.valueTextColor,
-  [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$l.inputBackgroundColor]: refs.backgroundColor,
-  [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$l.inputVerticalPadding]: refs.verticalPadding,
-  [vars$l.inputHeight]: refs.inputHeight,
-  [vars$l.inputDropdownButtonColor]: globalRefs$f.colors.surface.dark,
-  [vars$l.inputDropdownButtonCursor]: 'pointer',
-  [vars$l.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$l.inputDropdownButtonOffset]: globalRefs$f.spacing.xs,
-  [vars$l.overlayItemPaddingInlineStart]: globalRefs$f.spacing.xs,
-  [vars$l.overlayItemPaddingInlineEnd]: globalRefs$f.spacing.lg,
-  [vars$l.chipFontSize]: refs.chipFontSize,
-  [vars$l.chipTextColor]: globalRefs$f.colors.surface.contrast,
-  [vars$l.chipBackgroundColor]: globalRefs$f.colors.surface.light,
-  [vars$l.labelPosition]: refs.labelPosition,
-  [vars$l.labelTopPosition]: refs.labelTopPosition,
-  [vars$l.labelLeftPosition]: refs.labelLeftPosition,
-  [vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$l.inputTransformY]: refs.inputTransformY,
-  [vars$l.inputTransition]: refs.inputTransition,
-  [vars$l.marginInlineStart]: refs.marginInlineStart,
-  [vars$l.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$l.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$m.hostWidth]: refs.width,
+  [vars$m.hostDirection]: refs.direction,
+  [vars$m.fontSize]: refs.fontSize,
+  [vars$m.fontFamily]: refs.fontFamily,
+  [vars$m.labelFontSize]: refs.labelFontSize,
+  [vars$m.labelFontWeight]: refs.labelFontWeight,
+  [vars$m.labelTextColor]: refs.labelTextColor,
+  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$m.inputBorderColor]: refs.borderColor,
+  [vars$m.inputBorderWidth]: refs.borderWidth,
+  [vars$m.inputBorderStyle]: refs.borderStyle,
+  [vars$m.inputBorderRadius]: refs.borderRadius,
+  [vars$m.inputOutlineColor]: refs.outlineColor,
+  [vars$m.inputOutlineOffset]: refs.outlineOffset,
+  [vars$m.inputOutlineWidth]: refs.outlineWidth,
+  [vars$m.inputOutlineStyle]: refs.outlineStyle,
+  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$m.inputValueTextColor]: refs.valueTextColor,
+  [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$m.inputBackgroundColor]: refs.backgroundColor,
+  [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$m.inputVerticalPadding]: refs.verticalPadding,
+  [vars$m.inputHeight]: refs.inputHeight,
+  [vars$m.inputDropdownButtonColor]: globalRefs$f.colors.surface.dark,
+  [vars$m.inputDropdownButtonCursor]: 'pointer',
+  [vars$m.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$m.inputDropdownButtonOffset]: globalRefs$f.spacing.xs,
+  [vars$m.overlayItemPaddingInlineStart]: globalRefs$f.spacing.xs,
+  [vars$m.overlayItemPaddingInlineEnd]: globalRefs$f.spacing.lg,
+  [vars$m.chipFontSize]: refs.chipFontSize,
+  [vars$m.chipTextColor]: globalRefs$f.colors.surface.contrast,
+  [vars$m.chipBackgroundColor]: globalRefs$f.colors.surface.light,
+  [vars$m.labelPosition]: refs.labelPosition,
+  [vars$m.labelTopPosition]: refs.labelTopPosition,
+  [vars$m.labelLeftPosition]: refs.labelLeftPosition,
+  [vars$m.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$m.inputTransformY]: refs.inputTransformY,
+  [vars$m.inputTransition]: refs.inputTransition,
+  [vars$m.marginInlineStart]: refs.marginInlineStart,
+  [vars$m.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$m.inputVerticalAlignment]: refs.inputVerticalAlignment,
 
   labelType: {
     floating: {
-      [vars$l.inputHorizontalPadding]: '0.25em',
+      [vars$m.inputHorizontalPadding]: '0.25em',
       _hasValue: {
-        [vars$l.inputHorizontalPadding]: '0.45em',
+        [vars$m.inputHorizontalPadding]: '0.45em',
       },
     },
   },
 
   _readonly: {
-    [vars$l.inputDropdownButtonCursor]: 'default',
+    [vars$m.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$l.overlayFontSize]: refs.fontSize,
-  [vars$l.overlayFontFamily]: refs.fontFamily,
-  [vars$l.overlayCursor]: 'pointer',
-  [vars$l.overlayItemBoxShadow]: 'none',
-  [vars$l.overlayBackground]: refs.backgroundColor,
-  [vars$l.overlayTextColor]: refs.valueTextColor,
+  [vars$m.overlayFontSize]: refs.fontSize,
+  [vars$m.overlayFontFamily]: refs.fontFamily,
+  [vars$m.overlayCursor]: 'pointer',
+  [vars$m.overlayItemBoxShadow]: 'none',
+  [vars$m.overlayBackground]: refs.backgroundColor,
+  [vars$m.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$l.overlay.minHeight]: '400px',
-  [vars$l.overlay.margin]: '0',
+  [vars$m.overlay.minHeight]: '400px',
+  [vars$m.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$l
+  vars: vars$m
 });
 
 const globalRefs$e = getThemeRefs(globals);
-const vars$k = BadgeClass.cssVarList;
+const vars$l = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$k.hostWidth]: 'fit-content',
-  [vars$k.hostDirection]: globalRefs$e.direction,
+  [vars$l.hostWidth]: 'fit-content',
+  [vars$l.hostDirection]: globalRefs$e.direction,
 
-  [vars$k.textAlign]: 'center',
+  [vars$l.textAlign]: 'center',
 
-  [vars$k.fontFamily]: globalRefs$e.fonts.font1.family,
-  [vars$k.fontWeight]: '400',
+  [vars$l.fontFamily]: globalRefs$e.fonts.font1.family,
+  [vars$l.fontWeight]: '400',
 
-  [vars$k.verticalPadding]: '0.25em',
-  [vars$k.horizontalPadding]: '0.5em',
+  [vars$l.verticalPadding]: '0.25em',
+  [vars$l.horizontalPadding]: '0.5em',
 
-  [vars$k.borderWidth]: globalRefs$e.border.xs,
-  [vars$k.borderRadius]: globalRefs$e.radius.xs,
-  [vars$k.borderColor]: 'transparent',
-  [vars$k.borderStyle]: 'solid',
+  [vars$l.borderWidth]: globalRefs$e.border.xs,
+  [vars$l.borderRadius]: globalRefs$e.radius.xs,
+  [vars$l.borderColor]: 'transparent',
+  [vars$l.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$k.hostWidth]: '100%',
+    [vars$l.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$k.fontSize]: '12px' },
-    sm: { [vars$k.fontSize]: '14px' },
-    md: { [vars$k.fontSize]: '16px' },
-    lg: { [vars$k.fontSize]: '18px' },
+    xs: { [vars$l.fontSize]: '12px' },
+    sm: { [vars$l.fontSize]: '14px' },
+    md: { [vars$l.fontSize]: '16px' },
+    lg: { [vars$l.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$k.textColor]: globalRefs$e.colors.surface.dark,
+      [vars$l.textColor]: globalRefs$e.colors.surface.dark,
       _bordered: {
-        [vars$k.borderColor]: globalRefs$e.colors.surface.light,
+        [vars$l.borderColor]: globalRefs$e.colors.surface.light,
       },
     },
     primary: {
-      [vars$k.textColor]: globalRefs$e.colors.primary.main,
+      [vars$l.textColor]: globalRefs$e.colors.primary.main,
       _bordered: {
-        [vars$k.borderColor]: globalRefs$e.colors.primary.light,
+        [vars$l.borderColor]: globalRefs$e.colors.primary.light,
       },
     },
     secondary: {
-      [vars$k.textColor]: globalRefs$e.colors.secondary.main,
+      [vars$l.textColor]: globalRefs$e.colors.secondary.main,
       _bordered: {
-        [vars$k.borderColor]: globalRefs$e.colors.secondary.light,
+        [vars$l.borderColor]: globalRefs$e.colors.secondary.light,
       },
     },
     error: {
-      [vars$k.textColor]: globalRefs$e.colors.error.main,
+      [vars$l.textColor]: globalRefs$e.colors.error.main,
       _bordered: {
-        [vars$k.borderColor]: globalRefs$e.colors.error.light,
+        [vars$l.borderColor]: globalRefs$e.colors.error.light,
       },
     },
     success: {
-      [vars$k.textColor]: globalRefs$e.colors.success.main,
+      [vars$l.textColor]: globalRefs$e.colors.success.main,
       _bordered: {
-        [vars$k.borderColor]: globalRefs$e.colors.success.light,
+        [vars$l.borderColor]: globalRefs$e.colors.success.light,
       },
     },
   },
@@ -17374,7 +17778,7 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$k
+  vars: vars$l
 });
 
 const globalRefs$d = getThemeRefs(globals);
@@ -17412,144 +17816,144 @@ const avatar = {
   },
 };
 
-const vars$j = {
+const vars$k = {
   ...compVars$1,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$j
+  vars: vars$k
 });
 
 const globalRefs$c = getThemeRefs(globals);
 
-const vars$i = MappingsFieldClass.cssVarList;
+const vars$j = MappingsFieldClass.cssVarList;
 
 const mappingsField = {
-  [vars$i.hostWidth]: refs.width,
-  [vars$i.hostDirection]: refs.direction,
-  [vars$i.fontSize]: refs.fontSize,
-  [vars$i.fontFamily]: refs.fontFamily,
-  [vars$i.separatorFontSize]: '14px',
-  [vars$i.labelsFontSize]: '14px',
-  [vars$i.labelsLineHeight]: '1',
-  [vars$i.labelsMarginBottom]: '6px',
-  [vars$i.labelTextColor]: refs.labelTextColor,
-  [vars$i.itemMarginBottom]: '1em',
+  [vars$j.hostWidth]: refs.width,
+  [vars$j.hostDirection]: refs.direction,
+  [vars$j.fontSize]: refs.fontSize,
+  [vars$j.fontFamily]: refs.fontFamily,
+  [vars$j.separatorFontSize]: '14px',
+  [vars$j.labelsFontSize]: '14px',
+  [vars$j.labelsLineHeight]: '1',
+  [vars$j.labelsMarginBottom]: '6px',
+  [vars$j.labelTextColor]: refs.labelTextColor,
+  [vars$j.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$i.valueLabelMinWidth]: refs.minWidth,
+  [vars$j.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$i.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$c.border.xs})`,
-  [vars$i.separatorWidth]: '70px',
-  [vars$i.removeButtonWidth]: '60px',
+  [vars$j.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$c.border.xs})`,
+  [vars$j.separatorWidth]: '70px',
+  [vars$j.removeButtonWidth]: '60px',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
-  vars: vars$i
+  vars: vars$j
 });
 
 const globalRefs$b = getThemeRefs(globals);
-const vars$h = UserAttributeClass.cssVarList;
+const vars$i = UserAttributeClass.cssVarList;
 
 const userAttribute = {
-  [vars$h.hostDirection]: globalRefs$b.direction,
-  [vars$h.labelTextWidth]: '150px',
-  [vars$h.valueTextWidth]: '200px',
-  [vars$h.badgeMaxWidth]: '85px',
-  [vars$h.itemsGap]: '16px',
-  [vars$h.hostMinWidth]: '530px',
+  [vars$i.hostDirection]: globalRefs$b.direction,
+  [vars$i.labelTextWidth]: '150px',
+  [vars$i.valueTextWidth]: '200px',
+  [vars$i.badgeMaxWidth]: '85px',
+  [vars$i.itemsGap]: '16px',
+  [vars$i.hostMinWidth]: '530px',
   _fullWidth: {
-    [vars$h.hostWidth]: '100%',
+    [vars$i.hostWidth]: '100%',
   },
 };
 
 var userAttribute$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAttribute,
-  vars: vars$h
+  vars: vars$i
 });
 
 const globalRefs$a = getThemeRefs(globals);
-const vars$g = UserAuthMethodClass.cssVarList;
+const vars$h = UserAuthMethodClass.cssVarList;
 
 const userAuthMethod = {
-  [vars$g.hostDirection]: globalRefs$a.direction,
-  [vars$g.labelTextWidth]: '200px',
-  [vars$g.itemsGap]: '16px',
-  [vars$g.hostMinWidth]: '530px',
-  [vars$g.iconSize]: '24px',
-  [vars$g.iconColor]: 'currentcolor',
+  [vars$h.hostDirection]: globalRefs$a.direction,
+  [vars$h.labelTextWidth]: '200px',
+  [vars$h.itemsGap]: '16px',
+  [vars$h.hostMinWidth]: '530px',
+  [vars$h.iconSize]: '24px',
+  [vars$h.iconColor]: 'currentcolor',
   _fullWidth: {
-    [vars$g.hostWidth]: '100%',
+    [vars$h.hostWidth]: '100%',
   },
 };
 
 var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAuthMethod,
-  vars: vars$g
+  vars: vars$h
 });
 
-const vars$f = SamlGroupMappingsClass.cssVarList;
+const vars$g = SamlGroupMappingsClass.cssVarList;
 
 const samlGroupMappings = {
-  [vars$f.hostWidth]: refs.width,
-  [vars$f.hostDirection]: refs.direction,
-  [vars$f.groupNameInputMarginBottom]: '1em',
+  [vars$g.hostWidth]: refs.width,
+  [vars$g.hostDirection]: refs.direction,
+  [vars$g.groupNameInputMarginBottom]: '1em',
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: samlGroupMappings,
   samlGroupMappings: samlGroupMappings,
-  vars: vars$f
+  vars: vars$g
 });
 
 const globalRefs$9 = getThemeRefs(globals);
-const vars$e = PolicyValidationClass.cssVarList;
+const vars$f = PolicyValidationClass.cssVarList;
 
 const policyValidation = {
-  [vars$e.fontFamily]: refs.fontFamily,
-  [vars$e.fontSize]: refs.labelFontSize,
-  [vars$e.textColor]: refs.labelTextColor,
-  [vars$e.borderWidth]: refs.borderWidth,
-  [vars$e.borderStyle]: refs.borderStyle,
-  [vars$e.borderColor]: refs.borderColor,
-  [vars$e.borderRadius]: globalRefs$9.radius.sm,
-  [vars$e.backgroundColor]: 'none',
-  [vars$e.padding]: '0px',
-  [vars$e.labelMargin]: globalRefs$9.spacing.sm,
-  [vars$e.itemsSpacing]: globalRefs$9.spacing.lg,
-  [vars$e.itemSymbolDefault]: "'\\2022'", // "•"
-  [vars$e.itemSymbolSuccess]: "'\\2713'", // "✓"
-  [vars$e.itemSymbolError]: "'\\2A09'", // "⨉"
-  [vars$e.itemSymbolSuccessColor]: globalRefs$9.colors.success.main,
-  [vars$e.itemSymbolErrorColor]: globalRefs$9.colors.error.main,
+  [vars$f.fontFamily]: refs.fontFamily,
+  [vars$f.fontSize]: refs.labelFontSize,
+  [vars$f.textColor]: refs.labelTextColor,
+  [vars$f.borderWidth]: refs.borderWidth,
+  [vars$f.borderStyle]: refs.borderStyle,
+  [vars$f.borderColor]: refs.borderColor,
+  [vars$f.borderRadius]: globalRefs$9.radius.sm,
+  [vars$f.backgroundColor]: 'none',
+  [vars$f.padding]: '0px',
+  [vars$f.labelMargin]: globalRefs$9.spacing.sm,
+  [vars$f.itemsSpacing]: globalRefs$9.spacing.lg,
+  [vars$f.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars$f.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars$f.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars$f.itemSymbolSuccessColor]: globalRefs$9.colors.success.main,
+  [vars$f.itemSymbolErrorColor]: globalRefs$9.colors.error.main,
 };
 
 var policyValidation$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: policyValidation,
-  vars: vars$e
+  vars: vars$f
 });
 
-const vars$d = IconClass.cssVarList;
+const vars$e = IconClass.cssVarList;
 
 const icon = {};
 
 var icon$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon,
-  vars: vars$d
+  vars: vars$e
 });
 
 const globalRefs$8 = getThemeRefs(globals);
 
-const vars$c = CodeSnippetClass.cssVarList;
+const vars$d = CodeSnippetClass.cssVarList;
 
 const light = {
   color1: '#fa0',
@@ -17584,50 +17988,50 @@ const dark = {
 };
 
 const CodeSnippet = {
-  [vars$c.rootBgColor]: globalRefs$8.colors.surface.main,
-  [vars$c.rootTextColor]: globalRefs$8.colors.surface.contrast,
-  [vars$c.docTagTextColor]: light.color2,
-  [vars$c.keywordTextColor]: light.color2,
-  [vars$c.metaKeywordTextColor]: light.color2,
-  [vars$c.templateTagTextColor]: light.color2,
-  [vars$c.templateVariableTextColor]: light.color2,
-  [vars$c.typeTextColor]: light.color2,
-  [vars$c.variableLanguageTextColor]: light.color2,
-  [vars$c.titleTextColor]: light.color3,
-  [vars$c.titleClassTextColor]: light.color3,
-  [vars$c.titleClassInheritedTextColor]: light.color3,
-  [vars$c.titleFunctionTextColor]: light.color3,
-  [vars$c.attrTextColor]: light.color4,
-  [vars$c.attributeTextColor]: light.color4,
-  [vars$c.literalTextColor]: light.color4,
-  [vars$c.metaTextColor]: light.color4,
-  [vars$c.numberTextColor]: light.color4,
-  [vars$c.operatorTextColor]: light.color4,
-  [vars$c.variableTextColor]: light.color4,
-  [vars$c.selectorAttrTextColor]: light.color4,
-  [vars$c.selectorClassTextColor]: light.color4,
-  [vars$c.selectorIdTextColor]: light.color4,
-  [vars$c.regexpTextColor]: light.color13,
-  [vars$c.stringTextColor]: light.color13,
-  [vars$c.metaStringTextColor]: light.color13,
-  [vars$c.builtInTextColor]: light.color5,
-  [vars$c.symbolTextColor]: light.color5,
-  [vars$c.commentTextColor]: light.color6,
-  [vars$c.codeTextColor]: light.color6,
-  [vars$c.formulaTextColor]: light.color6,
-  [vars$c.nameTextColor]: light.color7,
-  [vars$c.quoteTextColor]: light.color7,
-  [vars$c.selectorTagTextColor]: light.color7,
-  [vars$c.selectorPseudoTextColor]: light.color7,
-  [vars$c.substTextColor]: light.color8,
-  [vars$c.sectionTextColor]: light.color4,
-  [vars$c.bulletTextColor]: light.color9,
-  [vars$c.emphasisTextColor]: light.color8,
-  [vars$c.strongTextColor]: light.color8,
-  [vars$c.additionTextColor]: light.color7,
-  [vars$c.additionBgColor]: light.color10,
-  [vars$c.deletionTextColor]: light.color2,
-  [vars$c.deletionBgColor]: light.color10,
+  [vars$d.rootBgColor]: globalRefs$8.colors.surface.main,
+  [vars$d.rootTextColor]: globalRefs$8.colors.surface.contrast,
+  [vars$d.docTagTextColor]: light.color2,
+  [vars$d.keywordTextColor]: light.color2,
+  [vars$d.metaKeywordTextColor]: light.color2,
+  [vars$d.templateTagTextColor]: light.color2,
+  [vars$d.templateVariableTextColor]: light.color2,
+  [vars$d.typeTextColor]: light.color2,
+  [vars$d.variableLanguageTextColor]: light.color2,
+  [vars$d.titleTextColor]: light.color3,
+  [vars$d.titleClassTextColor]: light.color3,
+  [vars$d.titleClassInheritedTextColor]: light.color3,
+  [vars$d.titleFunctionTextColor]: light.color3,
+  [vars$d.attrTextColor]: light.color4,
+  [vars$d.attributeTextColor]: light.color4,
+  [vars$d.literalTextColor]: light.color4,
+  [vars$d.metaTextColor]: light.color4,
+  [vars$d.numberTextColor]: light.color4,
+  [vars$d.operatorTextColor]: light.color4,
+  [vars$d.variableTextColor]: light.color4,
+  [vars$d.selectorAttrTextColor]: light.color4,
+  [vars$d.selectorClassTextColor]: light.color4,
+  [vars$d.selectorIdTextColor]: light.color4,
+  [vars$d.regexpTextColor]: light.color13,
+  [vars$d.stringTextColor]: light.color13,
+  [vars$d.metaStringTextColor]: light.color13,
+  [vars$d.builtInTextColor]: light.color5,
+  [vars$d.symbolTextColor]: light.color5,
+  [vars$d.commentTextColor]: light.color6,
+  [vars$d.codeTextColor]: light.color6,
+  [vars$d.formulaTextColor]: light.color6,
+  [vars$d.nameTextColor]: light.color7,
+  [vars$d.quoteTextColor]: light.color7,
+  [vars$d.selectorTagTextColor]: light.color7,
+  [vars$d.selectorPseudoTextColor]: light.color7,
+  [vars$d.substTextColor]: light.color8,
+  [vars$d.sectionTextColor]: light.color4,
+  [vars$d.bulletTextColor]: light.color9,
+  [vars$d.emphasisTextColor]: light.color8,
+  [vars$d.strongTextColor]: light.color8,
+  [vars$d.additionTextColor]: light.color7,
+  [vars$d.additionBgColor]: light.color10,
+  [vars$d.deletionTextColor]: light.color2,
+  [vars$d.deletionBgColor]: light.color10,
   /* purposely ignored */
   // [vars.charEscapeTextColor]: '',
   // [vars.linkTextColor]: '',
@@ -17639,50 +18043,50 @@ const CodeSnippet = {
 
 const codeSnippetDarkThemeOverrides = {
   codeSnippet: {
-    [vars$c.rootBgColor]: globalRefs$8.colors.surface.main,
-    [vars$c.rootTextColor]: globalRefs$8.colors.surface.contrast,
-    [vars$c.docTagTextColor]: dark.color2,
-    [vars$c.keywordTextColor]: dark.color2,
-    [vars$c.metaKeywordTextColor]: dark.color2,
-    [vars$c.templateTagTextColor]: dark.color2,
-    [vars$c.templateVariableTextColor]: dark.color2,
-    [vars$c.typeTextColor]: dark.color2,
-    [vars$c.variableLanguageTextColor]: dark.color2,
-    [vars$c.titleTextColor]: dark.color3,
-    [vars$c.titleClassTextColor]: dark.color3,
-    [vars$c.titleClassInheritedTextColor]: dark.color3,
-    [vars$c.titleFunctionTextColor]: dark.color3,
-    [vars$c.attrTextColor]: dark.color4,
-    [vars$c.attributeTextColor]: dark.color4,
-    [vars$c.literalTextColor]: dark.color4,
-    [vars$c.metaTextColor]: dark.color4,
-    [vars$c.numberTextColor]: dark.color4,
-    [vars$c.operatorTextColor]: dark.color4,
-    [vars$c.variableTextColor]: dark.color4,
-    [vars$c.selectorAttrTextColor]: dark.color4,
-    [vars$c.selectorClassTextColor]: dark.color4,
-    [vars$c.selectorIdTextColor]: dark.color4,
-    [vars$c.regexpTextColor]: dark.color13,
-    [vars$c.stringTextColor]: dark.color13,
-    [vars$c.metaStringTextColor]: dark.color13,
-    [vars$c.builtInTextColor]: dark.color5,
-    [vars$c.symbolTextColor]: dark.color5,
-    [vars$c.commentTextColor]: dark.color6,
-    [vars$c.codeTextColor]: dark.color6,
-    [vars$c.formulaTextColor]: dark.color6,
-    [vars$c.nameTextColor]: dark.color7,
-    [vars$c.quoteTextColor]: dark.color7,
-    [vars$c.selectorTagTextColor]: dark.color7,
-    [vars$c.selectorPseudoTextColor]: dark.color7,
-    [vars$c.substTextColor]: dark.color8,
-    [vars$c.sectionTextColor]: dark.color4,
-    [vars$c.bulletTextColor]: dark.color9,
-    [vars$c.emphasisTextColor]: dark.color8,
-    [vars$c.strongTextColor]: dark.color8,
-    [vars$c.additionTextColor]: dark.color7,
-    [vars$c.additionBgColor]: dark.color10,
-    [vars$c.deletionTextColor]: dark.color2,
-    [vars$c.deletionBgColor]: dark.color10,
+    [vars$d.rootBgColor]: globalRefs$8.colors.surface.main,
+    [vars$d.rootTextColor]: globalRefs$8.colors.surface.contrast,
+    [vars$d.docTagTextColor]: dark.color2,
+    [vars$d.keywordTextColor]: dark.color2,
+    [vars$d.metaKeywordTextColor]: dark.color2,
+    [vars$d.templateTagTextColor]: dark.color2,
+    [vars$d.templateVariableTextColor]: dark.color2,
+    [vars$d.typeTextColor]: dark.color2,
+    [vars$d.variableLanguageTextColor]: dark.color2,
+    [vars$d.titleTextColor]: dark.color3,
+    [vars$d.titleClassTextColor]: dark.color3,
+    [vars$d.titleClassInheritedTextColor]: dark.color3,
+    [vars$d.titleFunctionTextColor]: dark.color3,
+    [vars$d.attrTextColor]: dark.color4,
+    [vars$d.attributeTextColor]: dark.color4,
+    [vars$d.literalTextColor]: dark.color4,
+    [vars$d.metaTextColor]: dark.color4,
+    [vars$d.numberTextColor]: dark.color4,
+    [vars$d.operatorTextColor]: dark.color4,
+    [vars$d.variableTextColor]: dark.color4,
+    [vars$d.selectorAttrTextColor]: dark.color4,
+    [vars$d.selectorClassTextColor]: dark.color4,
+    [vars$d.selectorIdTextColor]: dark.color4,
+    [vars$d.regexpTextColor]: dark.color13,
+    [vars$d.stringTextColor]: dark.color13,
+    [vars$d.metaStringTextColor]: dark.color13,
+    [vars$d.builtInTextColor]: dark.color5,
+    [vars$d.symbolTextColor]: dark.color5,
+    [vars$d.commentTextColor]: dark.color6,
+    [vars$d.codeTextColor]: dark.color6,
+    [vars$d.formulaTextColor]: dark.color6,
+    [vars$d.nameTextColor]: dark.color7,
+    [vars$d.quoteTextColor]: dark.color7,
+    [vars$d.selectorTagTextColor]: dark.color7,
+    [vars$d.selectorPseudoTextColor]: dark.color7,
+    [vars$d.substTextColor]: dark.color8,
+    [vars$d.sectionTextColor]: dark.color4,
+    [vars$d.bulletTextColor]: dark.color9,
+    [vars$d.emphasisTextColor]: dark.color8,
+    [vars$d.strongTextColor]: dark.color8,
+    [vars$d.additionTextColor]: dark.color7,
+    [vars$d.additionBgColor]: dark.color10,
+    [vars$d.deletionTextColor]: dark.color2,
+    [vars$d.deletionBgColor]: dark.color10,
   },
 };
 
@@ -17690,36 +18094,36 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
   __proto__: null,
   codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
   default: CodeSnippet,
-  vars: vars$c
+  vars: vars$d
 });
 
-const vars$b = RadioGroupClass.cssVarList;
+const vars$c = RadioGroupClass.cssVarList;
 const globalRefs$7 = getThemeRefs(globals);
 
 const radioGroup = {
-  [vars$b.buttonsRowGap]: '9px',
-  [vars$b.hostWidth]: refs.width,
-  [vars$b.hostDirection]: refs.direction,
-  [vars$b.fontSize]: refs.fontSize,
-  [vars$b.fontFamily]: refs.fontFamily,
-  [vars$b.labelTextColor]: refs.labelTextColor,
-  [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$b.helperTextColor]: refs.helperTextColor,
-  [vars$b.itemsLabelColor]: globalRefs$7.colors.surface.contrast,
+  [vars$c.buttonsRowGap]: '9px',
+  [vars$c.hostWidth]: refs.width,
+  [vars$c.hostDirection]: refs.direction,
+  [vars$c.fontSize]: refs.fontSize,
+  [vars$c.fontFamily]: refs.fontFamily,
+  [vars$c.labelTextColor]: refs.labelTextColor,
+  [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$c.helperTextColor]: refs.helperTextColor,
+  [vars$c.itemsLabelColor]: globalRefs$7.colors.surface.contrast,
 
   textAlign: {
-    right: { [vars$b.inputTextAlign]: 'right' },
-    left: { [vars$b.inputTextAlign]: 'left' },
-    center: { [vars$b.inputTextAlign]: 'center' },
+    right: { [vars$c.inputTextAlign]: 'right' },
+    left: { [vars$c.inputTextAlign]: 'left' },
+    center: { [vars$c.inputTextAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$b.buttonsSpacing]: 'space-between',
+    [vars$c.buttonsSpacing]: 'space-between',
   },
 
   _disabled: {
-    [vars$b.itemsLabelColor]: globalRefs$7.colors.surface.light,
+    [vars$c.itemsLabelColor]: globalRefs$7.colors.surface.light,
   },
 };
 
@@ -17727,24 +18131,24 @@ var radioGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: radioGroup,
   radioGroup: radioGroup,
-  vars: vars$b
+  vars: vars$c
 });
 
-const vars$a = RadioButtonClass.cssVarList;
+const vars$b = RadioButtonClass.cssVarList;
 const globalRefs$6 = getThemeRefs(globals);
 
 const radioButton = {
-  [vars$a.fontFamily]: refs.fontFamily,
-  [vars$a.radioSize]: 'calc(1em + 6px)',
-  [vars$a.radioMargin]: 'auto 4px',
-  [vars$a.radioCheckedSize]: `calc(var(${vars$a.radioSize})/5)`,
-  [vars$a.radioCheckedColor]: globalRefs$6.colors.surface.light,
-  [vars$a.radioBackgroundColor]: globalRefs$6.colors.surface.light,
-  [vars$a.radioBorderColor]: 'none',
-  [vars$a.radioBorderWidth]: 0,
+  [vars$b.fontFamily]: refs.fontFamily,
+  [vars$b.radioSize]: 'calc(1em + 6px)',
+  [vars$b.radioMargin]: 'auto 4px',
+  [vars$b.radioCheckedSize]: `calc(var(${vars$b.radioSize})/5)`,
+  [vars$b.radioCheckedColor]: globalRefs$6.colors.surface.light,
+  [vars$b.radioBackgroundColor]: globalRefs$6.colors.surface.light,
+  [vars$b.radioBorderColor]: 'none',
+  [vars$b.radioBorderWidth]: 0,
 
   _checked: {
-    [vars$a.radioBackgroundColor]: globalRefs$6.colors.surface.contrast,
+    [vars$b.radioBackgroundColor]: globalRefs$6.colors.surface.contrast,
   },
 
   _hover: {
@@ -17753,16 +18157,16 @@ const radioButton = {
 
   size: {
     xs: {
-      [vars$a.fontSize]: '12px',
+      [vars$b.fontSize]: '12px',
     },
     sm: {
-      [vars$a.fontSize]: '14px',
+      [vars$b.fontSize]: '14px',
     },
     md: {
-      [vars$a.fontSize]: '16px',
+      [vars$b.fontSize]: '16px',
     },
     lg: {
-      [vars$a.fontSize]: '18px',
+      [vars$b.fontSize]: '18px',
     },
   },
 };
@@ -17771,128 +18175,128 @@ var radioButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: radioButton,
   radioButton: radioButton,
-  vars: vars$a
+  vars: vars$b
 });
 
 const globalRefs$5 = getThemeRefs(globals);
 
-const vars$9 = CalendarClass.cssVarList;
+const vars$a = CalendarClass.cssVarList;
 
 const calendar = {
-  [vars$9.fontFamily]: refs.fontFamily,
-  [vars$9.fontSize]: refs.fontSize,
-  [vars$9.hostDirection]: refs.direction,
+  [vars$a.fontFamily]: refs.fontFamily,
+  [vars$a.fontSize]: refs.fontSize,
+  [vars$a.hostDirection]: refs.direction,
 
-  [vars$9.calendarPadding]: '1em',
+  [vars$a.calendarPadding]: '1em',
 
-  [vars$9.topNavVerticalPadding]: '1em',
-  [vars$9.topNavAlignment]: 'space-between',
-  [vars$9.topNavGap]: '0',
-  [vars$9.topNavSelectorsGap]: '0.5em',
+  [vars$a.topNavVerticalPadding]: '1em',
+  [vars$a.topNavAlignment]: 'space-between',
+  [vars$a.topNavGap]: '0',
+  [vars$a.topNavSelectorsGap]: '0.5em',
 
-  [vars$9.bottomNavVerticalPadding]: '0.75em',
-  [vars$9.bottomNavHorizontalPadding]: '1.5em',
-  [vars$9.bottomNavAlignment]: 'space-between',
-  [vars$9.bottomNavGap]: '0.5em',
+  [vars$a.bottomNavVerticalPadding]: '0.75em',
+  [vars$a.bottomNavHorizontalPadding]: '1.5em',
+  [vars$a.bottomNavAlignment]: 'space-between',
+  [vars$a.bottomNavGap]: '0.5em',
 
-  [vars$9.navMarginBottom]: '0.75em',
-  [vars$9.navBorderBottomWidth]: '1px',
-  [vars$9.navBorderBottomColor]: globalRefs$5.colors.surface.highlight,
-  [vars$9.navBorderBottomStyle]: 'solid',
+  [vars$a.navMarginBottom]: '0.75em',
+  [vars$a.navBorderBottomWidth]: '1px',
+  [vars$a.navBorderBottomColor]: globalRefs$5.colors.surface.highlight,
+  [vars$a.navBorderBottomStyle]: 'solid',
 
-  [vars$9.yearInputWidth]: '6em',
-  [vars$9.monthInputWidth]: '8em',
+  [vars$a.yearInputWidth]: '6em',
+  [vars$a.monthInputWidth]: '8em',
 
-  [vars$9.navButtonSize]: '24px',
-  [vars$9.navButtonCursor]: 'pointer',
+  [vars$a.navButtonSize]: '24px',
+  [vars$a.navButtonCursor]: 'pointer',
 
-  [vars$9.weekdayFontSize]: '0.875em',
-  [vars$9.weekdayFontWeight]: '500',
+  [vars$a.weekdayFontSize]: '0.875em',
+  [vars$a.weekdayFontWeight]: '500',
 
   // day table cell
-  [vars$9.dayHeight]: '3.125em',
+  [vars$a.dayHeight]: '3.125em',
 
   // day value
-  [vars$9.daySize]: '2.125em',
-  [vars$9.dayFontSize]: '1em',
-  [vars$9.dayRadius]: '50%',
-  [vars$9.dayTextAlign]: 'center',
-  [vars$9.dayPadding]: '0',
-  [vars$9.dayTextColor]: globalRefs$5.colors.surface.contrast,
-  [vars$9.dayFontWeight]: '500',
-  [vars$9.dayBackgroundColor]: 'transparent',
-  [vars$9.dayCursor]: 'pointer',
-  [vars$9.dayBackgroundColorHover]: globalRefs$5.colors.primary.highlight,
+  [vars$a.daySize]: '2.125em',
+  [vars$a.dayFontSize]: '1em',
+  [vars$a.dayRadius]: '50%',
+  [vars$a.dayTextAlign]: 'center',
+  [vars$a.dayPadding]: '0',
+  [vars$a.dayTextColor]: globalRefs$5.colors.surface.contrast,
+  [vars$a.dayFontWeight]: '500',
+  [vars$a.dayBackgroundColor]: 'transparent',
+  [vars$a.dayCursor]: 'pointer',
+  [vars$a.dayBackgroundColorHover]: globalRefs$5.colors.primary.highlight,
 
   // selected day
-  [vars$9.daySelectedBackgroundColor]: globalRefs$5.colors.primary.main,
-  [vars$9.daySelectedTextdColor]: globalRefs$5.colors.primary.contrast,
+  [vars$a.daySelectedBackgroundColor]: globalRefs$5.colors.primary.main,
+  [vars$a.daySelectedTextdColor]: globalRefs$5.colors.primary.contrast,
 
   // disabled day (out of min/max range)
-  [vars$9.dayDisabledTextdColor]: globalRefs$5.colors.surface.light,
+  [vars$a.dayDisabledTextdColor]: globalRefs$5.colors.surface.light,
 
   // today
-  [vars$9.currentDayBorderColor]: globalRefs$5.colors.surface.light,
-  [vars$9.currentDayBorderWidth]: '1px',
-  [vars$9.currentDayBorderStyle]: 'solid',
+  [vars$a.currentDayBorderColor]: globalRefs$5.colors.surface.light,
+  [vars$a.currentDayBorderWidth]: '1px',
+  [vars$a.currentDayBorderStyle]: 'solid',
 
   size: {
-    xs: { [vars$9.fontSize]: '12px' },
-    sm: { [vars$9.fontSize]: '14px' },
-    md: { [vars$9.fontSize]: '16px' },
-    lg: { [vars$9.fontSize]: '18px' },
+    xs: { [vars$a.fontSize]: '12px' },
+    sm: { [vars$a.fontSize]: '14px' },
+    md: { [vars$a.fontSize]: '16px' },
+    lg: { [vars$a.fontSize]: '18px' },
   },
 
-  [vars$9.navButtonRotation]: 'rotate(180deg)',
+  [vars$a.navButtonRotation]: 'rotate(180deg)',
 
   _disabled: {
-    [vars$9.navButtonOpacity]: '0.5',
-    [vars$9.dayBackgroundColorHover]: 'none',
-    [vars$9.navButtonCursor]: 'default',
-    [vars$9.dayCursor]: 'default',
+    [vars$a.navButtonOpacity]: '0.5',
+    [vars$a.dayBackgroundColorHover]: 'none',
+    [vars$a.navButtonCursor]: 'default',
+    [vars$a.dayCursor]: 'default',
   },
 
   _fullWidth: {
-    [vars$9.hostWidth]: '100%',
-    [vars$9.dayBlockAlign]: '0 auto',
+    [vars$a.hostWidth]: '100%',
+    [vars$a.dayBlockAlign]: '0 auto',
   },
 };
 
 var calendar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: calendar,
-  vars: vars$9
+  vars: vars$a
 });
 
 const globalRefs$4 = getThemeRefs(globals);
 const shadowColor$1 = '#00000020';
 const { shadow } = globalRefs$4;
 
-const vars$8 = DateFieldClass.cssVarList;
+const vars$9 = DateFieldClass.cssVarList;
 
 const dateField = {
-  [vars$8.hostWidth]: refs.width,
-  [vars$8.hostDirection]: refs.direction,
-  [vars$8.iconMargin]: '0.375em',
-
-  [vars$8.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
-  [vars$8.overlay.backgroundColor]: refs.backgroundColor,
-  [vars$8.overlay.backdropBackgroundColor]: 'transparent',
-  [vars$8.overlay.backdropPointerEvents]: 'all',
-  [vars$8.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$1}, ${shadow.narrow.xl} ${shadowColor$1}`,
-  [vars$8.overlay.outlineWidth]: '0',
-  [vars$8.overlay.outlineColor]: 'transparent',
-  [vars$8.overlay.outlineStyle]: 'none',
-  [vars$8.overlay.padding]: '0',
-
-  [vars$8.rtlInputDirection]: 'ltr',
-  [vars$8.rtlInputAlignment]: 'right',
+  [vars$9.hostWidth]: refs.width,
+  [vars$9.hostDirection]: refs.direction,
+  [vars$9.iconMargin]: '0.375em',
+
+  [vars$9.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
+  [vars$9.overlay.backgroundColor]: refs.backgroundColor,
+  [vars$9.overlay.backdropBackgroundColor]: 'transparent',
+  [vars$9.overlay.backdropPointerEvents]: 'all',
+  [vars$9.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$1}, ${shadow.narrow.xl} ${shadowColor$1}`,
+  [vars$9.overlay.outlineWidth]: '0',
+  [vars$9.overlay.outlineColor]: 'transparent',
+  [vars$9.overlay.outlineStyle]: 'none',
+  [vars$9.overlay.padding]: '0',
+
+  [vars$9.rtlInputDirection]: 'ltr',
+  [vars$9.rtlInputAlignment]: 'right',
 };
 
 var dateField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: dateField,
-  vars: vars$8
+  vars: vars$9
 });
 
 const globalRefs$3 = getThemeRefs(globals);
@@ -17901,7 +18305,7 @@ const compVars = ListClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   { shadowColor: '#00000020' },
-  componentName$6
+  componentName$7
 );
 
 const { shadowColor } = helperRefs;
@@ -17941,7 +18345,7 @@ const list$1 = {
   },
 };
 
-const vars$7 = {
+const vars$8 = {
   ...compVars,
   ...helperVars,
 };
@@ -17949,78 +18353,78 @@ const vars$7 = {
 var list$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list$1,
-  vars: vars$7
+  vars: vars$8
 });
 
 const globalRefs$2 = getThemeRefs(globals);
 
-const vars$6 = ListItemClass.cssVarList;
+const vars$7 = ListItemClass.cssVarList;
 
 const list = {
-  [vars$6.backgroundColor]: globalRefs$2.colors.surface.main,
-  [vars$6.padding]: globalRefs$2.spacing.lg,
-  [vars$6.gap]: globalRefs$2.spacing.md,
-  [vars$6.borderStyle]: 'solid',
-  [vars$6.borderWidth]: globalRefs$2.border.xs,
-  [vars$6.borderColor]: globalRefs$2.colors.surface.main,
-  [vars$6.borderRadius]: globalRefs$2.radius.sm,
-  [vars$6.cursor]: 'pointer',
-  [vars$6.alignItems]: 'center',
-  [vars$6.flexDirection]: 'row',
-  [vars$6.transition]: 'border-color 0.2s, background-color 0.2s',
+  [vars$7.backgroundColor]: globalRefs$2.colors.surface.main,
+  [vars$7.padding]: globalRefs$2.spacing.lg,
+  [vars$7.gap]: globalRefs$2.spacing.md,
+  [vars$7.borderStyle]: 'solid',
+  [vars$7.borderWidth]: globalRefs$2.border.xs,
+  [vars$7.borderColor]: globalRefs$2.colors.surface.main,
+  [vars$7.borderRadius]: globalRefs$2.radius.sm,
+  [vars$7.cursor]: 'pointer',
+  [vars$7.alignItems]: 'center',
+  [vars$7.flexDirection]: 'row',
+  [vars$7.transition]: 'border-color 0.2s, background-color 0.2s',
 
   variant: {
     tile: {
-      [vars$6.alignItems]: 'flex-start',
-      [vars$6.flexDirection]: 'column',
-      [vars$6.borderColor]: globalRefs$2.colors.surface.light,
+      [vars$7.alignItems]: 'flex-start',
+      [vars$7.flexDirection]: 'column',
+      [vars$7.borderColor]: globalRefs$2.colors.surface.light,
     },
   },
 
   _hover: {
-    [vars$6.backgroundColor]: globalRefs$2.colors.surface.highlight,
+    [vars$7.backgroundColor]: globalRefs$2.colors.surface.highlight,
   },
 
   _active: {
-    [vars$6.backgroundColor]: globalRefs$2.colors.surface.main,
-    [vars$6.borderColor]: globalRefs$2.colors.primary.light,
-    [vars$6.outline]: `1px solid ${globalRefs$2.colors.primary.light}`,
+    [vars$7.backgroundColor]: globalRefs$2.colors.surface.main,
+    [vars$7.borderColor]: globalRefs$2.colors.primary.light,
+    [vars$7.outline]: `1px solid ${globalRefs$2.colors.primary.light}`,
   },
 };
 
 var listItem = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list,
-  vars: vars$6
+  vars: vars$7
 });
 
-const vars$5 = AppsListClass.cssVarList;
+const vars$6 = AppsListClass.cssVarList;
 const globalRefs$1 = getThemeRefs(globals);
 
 const defaultHeight = '400px';
 
 const appsList = {
-  [vars$5.itemsFontWeight]: 'normal',
-  [vars$5.itemsTextAlign]: 'start',
-  [vars$5.hostDirection]: globalRefs$1.direction,
-  [vars$5.maxHeight]: defaultHeight,
+  [vars$6.itemsFontWeight]: 'normal',
+  [vars$6.itemsTextAlign]: 'start',
+  [vars$6.hostDirection]: globalRefs$1.direction,
+  [vars$6.maxHeight]: defaultHeight,
 
   _empty: {
-    [vars$5.minHeight]: defaultHeight,
+    [vars$6.minHeight]: defaultHeight,
   },
 
   size: {
     xs: {
-      [vars$5.itemsFontSize]: '14px',
+      [vars$6.itemsFontSize]: '14px',
     },
     sm: {
-      [vars$5.itemsFontSize]: '14px',
+      [vars$6.itemsFontSize]: '14px',
     },
     md: {
-      [vars$5.itemsFontSize]: '16px',
+      [vars$6.itemsFontSize]: '16px',
     },
     lg: {
-      [vars$5.itemsFontSize]: '20px',
+      [vars$6.itemsFontSize]: '20px',
     },
   },
 };
@@ -18028,52 +18432,52 @@ const appsList = {
 var appsList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: appsList,
-  vars: vars$5
+  vars: vars$6
 });
 
-const vars$4 = ScopesListClass.cssVarList;
+const vars$5 = ScopesListClass.cssVarList;
 
 const scopesList = {
-  [vars$4.requiredInputBorderColor]: theme$1._disabled[vars$Q.borderColor],
-  [vars$4.requiredInputValueTextColor]: theme$1._disabled[vars$Q.valueTextColor],
-  [vars$4.hostWidth]: '280px',
+  [vars$5.requiredInputBorderColor]: theme$1._disabled[vars$R.borderColor],
+  [vars$5.requiredInputValueTextColor]: theme$1._disabled[vars$R.valueTextColor],
+  [vars$5.hostWidth]: '280px',
   _fullWidth: {
-    [vars$4.hostWidth]: '100%',
+    [vars$5.hostWidth]: '100%',
   },
 };
 
 var scopesList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: scopesList,
-  vars: vars$4
+  vars: vars$5
 });
 
 const globalRefs = getThemeRefs(globals);
-const vars$3 = ThirdPartyAppLogoClass.cssVarList;
+const vars$4 = ThirdPartyAppLogoClass.cssVarList;
 
 const thirdPartyAppLogo = {
-  [vars$3.gap]: globalRefs.spacing.lg,
-  [vars$3.arrowsColor]: globalRefs.colors.surface.dark,
-  [vars$3.thirdPartyAppLogoFallback]:
+  [vars$4.gap]: globalRefs.spacing.lg,
+  [vars$4.arrowsColor]: globalRefs.colors.surface.dark,
+  [vars$4.thirdPartyAppLogoFallback]:
     'url(https://imgs.descope.com/components/third-party-app-logo-placeholder.svg)',
-  [vars$3.companyLogoFallback]:
+  [vars$4.companyLogoFallback]:
     'url(https://imgs.descope.com/components/project-logo-placeholder.svg)',
   size: {
     xs: {
-      [vars$3.logoMaxHeight]: '30px',
-      [vars$3.logoMaxWidth]: '120px',
+      [vars$4.logoMaxHeight]: '30px',
+      [vars$4.logoMaxWidth]: '120px',
     },
     sm: {
-      [vars$3.logoMaxHeight]: '40px',
-      [vars$3.logoMaxWidth]: '160px',
+      [vars$4.logoMaxHeight]: '40px',
+      [vars$4.logoMaxWidth]: '160px',
     },
     md: {
-      [vars$3.logoMaxHeight]: '48px',
-      [vars$3.logoMaxWidth]: '200px',
+      [vars$4.logoMaxHeight]: '48px',
+      [vars$4.logoMaxWidth]: '200px',
     },
     lg: {
-      [vars$3.logoMaxHeight]: '60px',
-      [vars$3.logoMaxWidth]: '240px',
+      [vars$4.logoMaxHeight]: '60px',
+      [vars$4.logoMaxWidth]: '240px',
     },
   },
 };
@@ -18081,39 +18485,55 @@ const thirdPartyAppLogo = {
 var thirdPartyAppLogo$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: thirdPartyAppLogo,
-  vars: vars$3
+  vars: vars$4
 });
 
-const vars$2 = SecurityQuestionsSetupClass.cssVarList;
+const vars$3 = SecurityQuestionsSetupClass.cssVarList;
 
 const securityQuestionsSetup = {
-  [vars$2.hostWidth]: 'fit-content',
+  [vars$3.hostWidth]: 'fit-content',
   _fullWidth: {
-    [vars$2.hostWidth]: '100%',
+    [vars$3.hostWidth]: '100%',
   },
 };
 
 var securityQuestionsSetup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: securityQuestionsSetup,
-  vars: vars$2
+  vars: vars$3
 });
 
-const vars$1 = SecurityQuestionsVerifyClass.cssVarList;
+const vars$2 = SecurityQuestionsVerifyClass.cssVarList;
 
 const securityQuestionsVerify = {
-  [vars$1.hostWidth]: 'min-content',
-  [vars$1.questionCursor]: 'pointer',
+  [vars$2.hostWidth]: 'min-content',
+  [vars$2.questionCursor]: 'pointer',
   _fullWidth: {
-    [vars$1.hostWidth]: '100%',
+    [vars$2.hostWidth]: '100%',
   },
-  [vars$1.questionFontSize]: refs.fontSize,
-  [vars$1.questionFontFamily]: refs.fontFamily,
+  [vars$2.questionFontSize]: refs.fontSize,
+  [vars$2.questionFontFamily]: refs.fontFamily,
 };
 
 var securityQuestionsVerify$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: securityQuestionsVerify,
+  vars: vars$2
+});
+
+const vars$1 = HybridFieldClass.cssVarList;
+
+const hybridField = {
+  [vars$1.hostDirection]: refs.direction,
+
+  _fullWidth: {
+    [vars$1.hostWidth]: '100%',
+  },
+};
+
+var hybridField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: hybridField,
   vars: vars$1
 });
 
@@ -18171,6 +18591,7 @@ const components = {
   thirdPartyAppLogo: thirdPartyAppLogo$1,
   securityQuestionsSetup: securityQuestionsSetup$1,
   securityQuestionsVerify: securityQuestionsVerify$1,
+  hybridField: hybridField$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -18183,7 +18604,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$S, components: vars };
+const themeVars = { globals: vars$T, components: vars };
 
 const colors = {
   surface: {
@@ -18232,5 +18653,5 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-export { AppsListClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, ComboBoxClass, ContainerClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, IconClass, ImageClass, LinkClass, ListClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, SamlGroupMappingsClass, ScopesListClass, SecurityQuestionsSetupClass, SecurityQuestionsVerifyClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, ThirdPartyAppLogoClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AppsListClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, ComboBoxClass, ContainerClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, HybridFieldClass, IconClass, ImageClass, LinkClass, ListClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, SamlGroupMappingsClass, ScopesListClass, SecurityQuestionsSetupClass, SecurityQuestionsVerifyClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, ThirdPartyAppLogoClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map