npm - @descope/web-components-ui - Versions diffs - 1.0.401 → 1.0.403 - Mend

@descope/web-components-ui 1.0.401 → 1.0.403

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/dist/index.esm.js CHANGED Viewed

@@ -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 {
@@ -11758,6 +11853,14 @@ const multiSelectComboBoxMixin = (superclass) =>
     setGetValidity() {
       // eslint-disable-next-line func-names
       this.getValidity = function () {
+        if (this.pattern) {
+          const patternRegex = new RegExp(this.pattern);
+          if (this.value.some((val) => !patternRegex.test(val)))
+            return {
+              patternMismatch: true,
+            };
+        }
         if (this.isRequired && !this.value.length) {
           return {
             valueMissing: true,
@@ -12152,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();
@@ -12212,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 {
@@ -12313,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');
@@ -12328,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 {
@@ -12436,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 {
@@ -12537,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();
@@ -12648,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;
@@ -12887,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 {
@@ -12916,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: [
@@ -13055,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() {
@@ -13215,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() {
@@ -13459,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() {
@@ -13658,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() {
@@ -13788,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 {
@@ -13798,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: [
@@ -13882,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 {
@@ -13955,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 {
@@ -13974,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
@@ -14129,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 {
@@ -14152,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 {
@@ -14201,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'];
   }
@@ -14352,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>`;
@@ -14454,7 +14557,7 @@ const createDynamicDataMixin =
       }
     };
-const componentName$5 = getComponentName('apps-list');
+const componentName$6 = getComponentName('apps-list');
 const limitAbbreviation = (str, limit = 2) =>
   str
@@ -14516,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%;
@@ -14541,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) => {
@@ -14562,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();
@@ -14667,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() {
@@ -14767,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',
@@ -14785,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();
@@ -14892,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 [];
     }
   }
@@ -15000,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',
@@ -15023,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();
@@ -15094,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 [];
     }
   }
@@ -15204,7 +15307,299 @@ 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;
+  }
+  init() {
+    super.init?.();
+    this.initInputs();
+    this.updateAttrs();
+    this.toggleInputVisibility();
+  }
+  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;
+    this.initInputEles();
+    this.overrideEmailInputType();
+    // We want to prevent Vaadin from changing the input type to `email`
+    // otherwise, we cannot get the selectionStart from the input.
+    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;
+    };
+  }
+  // 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');
+      });
+    });
+  }
+  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);
@@ -15643,7 +16038,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;
@@ -15656,7 +16051,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,
@@ -15768,7 +16163,7 @@ const button = {
   },
 };
-const vars$R = {
+const vars$S = {
   ...compVars$6,
   ...helperVars$4,
 };
@@ -15776,13 +16171,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
@@ -15901,13 +16296,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,
@@ -15916,10 +16367,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,
@@ -15928,16 +16382,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,
@@ -15947,23 +16394,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,
@@ -15973,12 +16414,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,
@@ -15987,9 +16424,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,
@@ -15999,17 +16437,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,
@@ -16020,6 +16459,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,
@@ -16030,7 +16470,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,
@@ -16045,197 +16484,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
-});
+  [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 knobMargin = '2px';
-const checkboxHeight = '1.25em';
-const globalRefs$u = getThemeRefs(globals);
-const vars$J = SwitchToggleClass.cssVarList;
-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);
@@ -16260,7 +16655,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;
@@ -16355,7 +16750,7 @@ const container = {
   },
 };
-const vars$I = {
+const vars$J = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -16363,168 +16758,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,
     },
   },
 };
@@ -16532,37 +16927,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',
     },
   },
 };
@@ -16570,7 +16965,7 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$C
+  vars: vars$D
 });
 const globalRefs$p = getThemeRefs(globals);
@@ -16581,7 +16976,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$T
+  componentName$U
 );
 const divider = {
@@ -16612,7 +17007,7 @@ const divider = {
   },
 };
-const vars$B = {
+const vars$C = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -16620,93 +17015,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);
@@ -16724,7 +17119,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
       },
     },
   },
-  componentName$_
+  componentName$$
 );
 const loaderRadial = {
@@ -16753,7 +17148,7 @@ const loaderRadial = {
     [compVars$3.hostDisplay]: 'none',
   },
 };
-const vars$y = {
+const vars$z = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -16761,93 +17156,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,
@@ -16861,28 +17297,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,
@@ -16890,171 +17330,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);
@@ -17069,28 +17464,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);
@@ -17103,58 +17498,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,
   },
 };
@@ -17162,53 +17557,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,
     },
   },
 };
@@ -17216,148 +17611,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,
       },
     },
   },
@@ -17366,7 +17761,7 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$k
+  vars: vars$l
 });
 const globalRefs$d = getThemeRefs(globals);
@@ -17404,144 +17799,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',
@@ -17576,50 +17971,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]: '',
@@ -17631,50 +18026,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,
   },
 };
@@ -17682,36 +18077,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,
   },
 };
@@ -17719,24 +18114,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: {
@@ -17745,16 +18140,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',
     },
   },
 };
@@ -17763,128 +18158,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);
@@ -17893,7 +18288,7 @@ const compVars = ListClass.cssVarList;
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   { shadowColor: '#00000020' },
-  componentName$6
+  componentName$7
 );
 const { shadowColor } = helperRefs;
@@ -17933,7 +18328,7 @@ const list$1 = {
   },
 };
-const vars$7 = {
+const vars$8 = {
   ...compVars,
   ...helperVars,
 };
@@ -17941,78 +18336,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',
     },
   },
 };
@@ -18020,52 +18415,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',
     },
   },
 };
@@ -18073,39 +18468,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
 });
@@ -18163,6 +18574,7 @@ const components = {
   thirdPartyAppLogo: thirdPartyAppLogo$1,
   securityQuestionsSetup: securityQuestionsSetup$1,
   securityQuestionsVerify: securityQuestionsVerify$1,
+  hybridField: hybridField$1,
 };
 const theme = Object.keys(components).reduce(
@@ -18175,7 +18587,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: {
@@ -18224,5 +18636,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