@descope/web-components-ui 1.0.173 → 1.0.175

package/dist/index.esm.js

@@ -700,7 +700,7 @@ const createProxy = ({
   return ProxyClass;
 };
 
-const observedAttributes$5 = ['required', 'pattern'];
+const observedAttributes$6 = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
@@ -711,7 +711,7 @@ const errorAttributes = {
 const inputValidationMixin = (superclass) =>
   class InputValidationMixinClass extends superclass {
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$6];
     }
 
     static get formAssociated() {
@@ -842,7 +842,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$5.includes(attrName)) {
+      if (observedAttributes$6.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -1185,7 +1185,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$r = getComponentName('button');
+const componentName$t = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1223,7 +1223,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$d, label: label$9 } = {
+const { host: host$e, label: label$a } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
 };
@@ -1233,7 +1233,7 @@ let loadingIndicatorStyles;
 const ButtonClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$d, property: 'width' },
+      hostWidth: { ...host$e, property: 'width' },
       hostHeight: { property: 'height' },
       fontSize: {},
       fontFamily: {},
@@ -1255,8 +1255,8 @@ const ButtonClass = compose(
       horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
 
       labelTextColor: { property: 'color' },
-      labelTextDecoration: { ...label$9, property: 'text-decoration' },
-      labelSpacing: { ...label$9, property: 'gap' },
+      labelTextDecoration: { ...label$a, property: 'text-decoration' },
+      labelSpacing: { ...label$a, property: 'gap' },
     },
   }),
   clickableMixin,
@@ -1279,7 +1279,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$r,
+    componentName: componentName$t,
   })
 );
 
@@ -1316,7 +1316,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$r, ButtonClass);
+customElements.define(componentName$t, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1326,13 +1326,13 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$q = getComponentName('boolean-field-internal');
+const componentName$s = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
 
-class BooleanInputInternal extends BaseInputClass$4 {
+class BooleanInputInternal extends BaseInputClass$5 {
   constructor() {
     super();
     this.innerHTML = `
@@ -1390,14 +1390,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$q}
+				<${componentName$s}
 					tabindex="-1"
 					slot="input"
-				></${componentName$q}>
+				></${componentName$s}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$q);
+      this.inputElement = this.shadowRoot.querySelector(componentName$s);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1577,18 +1577,18 @@ vaadin-checkbox::part(checkbox) {
 }
 `;
 
-const componentName$p = getComponentName('checkbox');
+const componentName$r = getComponentName('checkbox');
 
 const {
-  host: host$c,
+  host: host$d,
   component: component$1,
   checkboxElement,
   checkboxSurface,
   checkboxHiddenLabel: checkboxHiddenLabel$1,
-  label: label$8,
-  requiredIndicator: requiredIndicator$8,
-  helperText: helperText$7,
-  errorMessage: errorMessage$8,
+  label: label$9,
+  requiredIndicator: requiredIndicator$9,
+  helperText: helperText$8,
+  errorMessage: errorMessage$9,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -1604,25 +1604,25 @@ const {
 const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$c, property: 'width' },
+      hostWidth: { ...host$d, property: 'width' },
 
-      fontSize: [host$c, checkboxElement, label$8, checkboxHiddenLabel$1],
-      fontFamily: [label$8, checkboxHiddenLabel$1, helperText$7, errorMessage$8],
+      fontSize: [host$d, checkboxElement, label$9, checkboxHiddenLabel$1],
+      fontFamily: [label$9, checkboxHiddenLabel$1, helperText$8, errorMessage$9],
 
       labelTextColor: [
-        { ...label$8, property: 'color' },
-        { ...requiredIndicator$8, property: 'color' },
-        { ...label$8, property: '-webkit-text-fill-color' },
+        { ...label$9, property: 'color' },
+        { ...requiredIndicator$9, property: 'color' },
+        { ...label$9, property: '-webkit-text-fill-color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
 
       labelFontWeight: [
-        { ...label$8, property: 'font-weight' },
+        { ...label$9, property: 'font-weight' },
         { ...checkboxHiddenLabel$1, property: 'font-weight' },
       ],
       labelSpacing: [
-        { ...label$8, property: 'left' },
+        { ...label$9, property: 'left' },
         { ...checkboxHiddenLabel$1, property: 'padding-left' },
       ],
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
@@ -1645,8 +1645,8 @@ const CheckboxClass = compose(
         { ...checkboxSurface, property: 'font-size' },
         { ...component$1, property: 'font-size' },
         { ...checkboxHiddenLabel$1, property: 'line-height' },
-        { ...label$8, property: 'margin-left' },
-        { ...label$8, property: 'line-height' },
+        { ...label$9, property: 'margin-left' },
+        { ...label$9, property: 'line-height' },
       ],
     },
   }),
@@ -1667,26 +1667,26 @@ const CheckboxClass = compose(
 			${useHostExternalPadding(CheckboxClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$p,
+    componentName: componentName$r,
   })
 );
 
-customElements.define(componentName$q, BooleanInputInternal);
+customElements.define(componentName$s, BooleanInputInternal);
 
-customElements.define(componentName$p, CheckboxClass);
+customElements.define(componentName$r, CheckboxClass);
 
-const componentName$o = getComponentName('switch-toggle');
+const componentName$q = getComponentName('switch-toggle');
 
 const {
-  host: host$b,
+  host: host$c,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
   checkboxHiddenLabel,
-  label: label$7,
-  requiredIndicator: requiredIndicator$7,
-  helperText: helperText$6,
-  errorMessage: errorMessage$7,
+  label: label$8,
+  requiredIndicator: requiredIndicator$8,
+  helperText: helperText$7,
+  errorMessage: errorMessage$8,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -1702,9 +1702,9 @@ const {
 const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$b, property: 'width' },
-      fontSize: [component, label$7, checkboxHiddenLabel],
-      fontFamily: [label$7, helperText$6, errorMessage$7],
+      hostWidth: { ...host$c, property: 'width' },
+      fontSize: [component, label$8, checkboxHiddenLabel],
+      fontFamily: [label$8, helperText$7, errorMessage$8],
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
       trackBorderColor: { ...track, property: 'border-color' },
@@ -1728,24 +1728,24 @@ const SwitchToggleClass = compose(
       knobLeftOffset: { ...knob, property: 'left' },
 
       labelSpacing: [
-        { ...label$7, property: 'padding-left' },
+        { ...label$8, property: 'padding-left' },
         { ...checkboxHiddenLabel, property: 'padding-left' },
       ],
       labelLineHeight: [
-        { ...label$7, property: 'line-height' },
+        { ...label$8, property: 'line-height' },
         { ...checkboxHiddenLabel, property: 'line-height' },
       ],
       labelFontWeight: [
-        { ...label$7, property: 'font-weight' },
+        { ...label$8, property: 'font-weight' },
         { ...checkboxHiddenLabel, property: 'font-weight' },
       ],
       labelTextColor: [
-        { ...label$7, property: 'color' },
-        { ...requiredIndicator$7, property: 'color' },
-        { ...label$7, property: '-webkit-text-fill-color' },
+        { ...label$8, property: 'color' },
+        { ...requiredIndicator$8, property: 'color' },
+        { ...label$8, property: '-webkit-text-fill-color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
       inputOutlineWidth: { ...track, property: 'outline-width' },
       inputOutlineOffset: { ...track, property: 'outline-offset' },
       inputOutlineColor: { ...track, property: 'outline-color' },
@@ -1778,17 +1778,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$o,
+    componentName: componentName$q,
   })
 );
 
-customElements.define(componentName$o, SwitchToggleClass);
+customElements.define(componentName$q, SwitchToggleClass);
 
-const componentName$n = getComponentName('loader-linear');
+const componentName$p = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$n;
+    return componentName$p;
   }
 
   constructor() {
@@ -1824,18 +1824,18 @@ const selectors$1 = {
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$a } = selectors$1;
+const { after: after$1, host: host$b } = selectors$1;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$a, property: 'width' },
+      hostWidth: { ...host$b, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$a, property: 'padding-top' },
-        { ...host$a, property: 'padding-bottom' },
+        { ...host$b, property: 'padding-top' },
+        { ...host$b, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after$1, property: 'background-color' },
@@ -1849,11 +1849,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$n, LoaderLinearClass);
+customElements.define(componentName$p, LoaderLinearClass);
 
-const componentName$m = getComponentName('loader-radial');
+const componentName$o = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -1897,11 +1897,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$m, LoaderRadialClass);
+customElements.define(componentName$o, LoaderRadialClass);
 
-const componentName$l = getComponentName('container');
+const componentName$n = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -1953,10 +1953,10 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$l, ContainerClass);
+customElements.define(componentName$n, ContainerClass);
 
-const componentName$k = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
+const componentName$m = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2001,7 +2001,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$k, baseS
   }
 }
 
-const { host: host$9, before, after, text: text$3 } = {
+const { host: host$a, before, after, text: text$3 } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
   after: { selector: '::after' },
@@ -2011,8 +2011,8 @@ const { host: host$9, before, after, text: text$3 } = {
 const DividerClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$9, property: 'width' },
-      hostPadding: { ...host$9, property: 'padding' },
+      hostWidth: { ...host$a, property: 'width' },
+      hostPadding: { ...host$a, property: 'padding' },
 
       minHeight: {},
       alignItems: {},
@@ -2052,9 +2052,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-const componentName$j = getComponentName('text');
+const componentName$l = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2096,11 +2096,11 @@ const TextClass = compose(
   componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$j, TextClass);
+customElements.define(componentName$l, TextClass);
 
-customElements.define(componentName$k, DividerClass);
+customElements.define(componentName$m, DividerClass);
 
-const { host: host$8, label: label$6, placeholder: placeholder$2, requiredIndicator: requiredIndicator$6, inputField: inputField$4, input, helperText: helperText$5, errorMessage: errorMessage$6 } =
+const { host: host$9, label: label$7, placeholder: placeholder$2, requiredIndicator: requiredIndicator$7, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$7 } =
   {
     host: { selector: () => ':host' },
     label: { selector: '::part(label)' },
@@ -2114,49 +2114,49 @@ const { host: host$8, label: label$6, placeholder: placeholder$2, requiredIndica
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host$8],
-  fontFamily: [label$6, inputField$4, helperText$5, errorMessage$6],
+  fontSize: [{}, host$9],
+  fontFamily: [label$7, inputField$5, helperText$6, errorMessage$7],
 
-  hostWidth: { ...host$8, property: 'width' },
-  hostMinWidth: { ...host$8, property: 'min-width' },
+  hostWidth: { ...host$9, property: 'width' },
+  hostMinWidth: { ...host$9, property: 'min-width' },
 
-  inputBackgroundColor: { ...inputField$4, property: 'background-color' },
+  inputBackgroundColor: { ...inputField$5, property: 'background-color' },
 
   labelTextColor: [
-    { ...label$6, property: 'color' },
-    { ...requiredIndicator$6, property: 'color' },
+    { ...label$7, property: 'color' },
+    { ...requiredIndicator$7, property: 'color' },
   ],
-  errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+  errorMessageTextColor: { ...errorMessage$7, property: 'color' },
 
-  inputValueTextColor: { ...inputField$4, property: 'color' },
+  inputValueTextColor: { ...inputField$5, property: 'color' },
   inputCaretTextColor: { ...input, property: 'color' },
 
-  labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
+  labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
 
-  inputBorderColor: { ...inputField$4, property: 'border-color' },
-  inputBorderWidth: { ...inputField$4, property: 'border-width' },
-  inputBorderStyle: { ...inputField$4, property: 'border-style' },
-  inputBorderRadius: { ...inputField$4, property: 'border-radius' },
+  inputBorderColor: { ...inputField$5, property: 'border-color' },
+  inputBorderWidth: { ...inputField$5, property: 'border-width' },
+  inputBorderStyle: { ...inputField$5, property: 'border-style' },
+  inputBorderRadius: { ...inputField$5, property: 'border-radius' },
 
-  inputHeight: { ...inputField$4, property: 'height' },
+  inputHeight: { ...inputField$5, property: 'height' },
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
   ],
 
-  inputOutlineColor: { ...inputField$4, property: 'outline-color' },
-  inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
-  inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
-  inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
+  inputOutlineColor: { ...inputField$5, property: 'outline-color' },
+  inputOutlineStyle: { ...inputField$5, property: 'outline-style' },
+  inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
+  inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
 
   inputTextAlign: { ...input, property: 'text-align' },
 
   inputPlaceholderColor: { ...placeholder$2, property: 'color' },
 };
 
-const componentName$i = getComponentName('email-field');
+const componentName$k = getComponentName('email-field');
 
-const customMixin$4 = (superclass) =>
+const customMixin$5 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
@@ -2170,7 +2170,7 @@ const EmailFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin,
   componentNameValidationMixin,
-  customMixin$4
+  customMixin$5
 )(
   createProxy({
     slots: ['suffix'],
@@ -2187,15 +2187,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$i,
+    componentName: componentName$k,
   })
 );
 
-customElements.define(componentName$i, EmailFieldClass);
+customElements.define(componentName$k, EmailFieldClass);
 
-const componentName$h = getComponentName('link');
+const componentName$j = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$h, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$j, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2241,12 +2241,12 @@ const selectors = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$7, wrapper: wrapper$1 } = selectors;
+const { anchor, text: text$2, host: host$8, wrapper: wrapper$1 } = selectors;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$7, property: 'width' },
+      hostWidth: { ...host$8, property: 'width' },
       textAlign: wrapper$1,
       textColor: [
         { ...anchor, property: 'color' },
@@ -2259,7 +2259,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$h, LinkClass);
+customElements.define(componentName$j, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2311,27 +2311,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$g = getComponentName('logo');
+const componentName$i = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$g,
+  componentName: componentName$i,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$g, LogoClass);
+customElements.define(componentName$i, LogoClass);
 
-const componentName$f = getComponentName('totp-image');
+const componentName$h = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$f,
+  componentName: componentName$h,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$f, TotpImageClass);
+customElements.define(componentName$h, TotpImageClass);
 
-const componentName$e = getComponentName('number-field');
+const componentName$g = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2356,11 +2356,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$e,
+    componentName: componentName$g,
   })
 );
 
-customElements.define(componentName$e, NumberFieldClass);
+customElements.define(componentName$g, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2378,21 +2378,21 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$d = getComponentName('passcode-internal');
+const componentName$f = getComponentName('passcode-internal');
 
-const observedAttributes$4 = ['digits'];
+const observedAttributes$5 = ['digits'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
 
-class PasscodeInternal extends BaseInputClass$3 {
+class PasscodeInternal extends BaseInputClass$4 {
   static get observedAttributes() {
-    return observedAttributes$4.concat(BaseInputClass$3.observedAttributes || []);
+    return observedAttributes$5.concat(BaseInputClass$4.observedAttributes || []);
   }
 
   static get componentName() {
-    return componentName$d;
+    return componentName$f;
   }
 
   constructor() {
@@ -2571,7 +2571,7 @@ class PasscodeInternal extends BaseInputClass$3 {
 
     // sync attributes to inputs
     if (oldValue !== newValue) {
-      if (observedAttributes$4.includes(attrName)) {
+      if (observedAttributes$5.includes(attrName)) {
         if (attrName === 'digits') {
           this.renderInputs();
         }
@@ -2584,11 +2584,11 @@ class PasscodeInternal extends BaseInputClass$3 {
   }
 }
 
-const componentName$c = getComponentName('text-field');
+const componentName$e = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
-const customMixin$3 = (superclass) =>
+const customMixin$4 = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2615,7 +2615,7 @@ const TextFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin,
   componentNameValidationMixin,
-  customMixin$3
+  customMixin$4
 )(
   createProxy({
     slots: ['prefix', 'suffix'],
@@ -2632,18 +2632,18 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$c,
+    componentName: componentName$e,
   })
 );
 
-const componentName$b = getComponentName('passcode');
+const componentName$d = getComponentName('passcode');
 
-const observedAttributes$3 = ['digits'];
+const observedAttributes$4 = ['digits'];
 
-const customMixin$2 = (superclass) =>
+const customMixin$3 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
-      return observedAttributes$3.concat(superclass.observedAttributes || []);
+      return observedAttributes$4.concat(superclass.observedAttributes || []);
     }
 
     get digits() {
@@ -2655,17 +2655,17 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$d}
+			<${componentName$f}
 				bordered="true"
 				name="code"
 				tabindex="-1"
 				slot="input"
-			></${componentName$d}>
+			></${componentName$f}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$d);
+      this.inputElement = this.shadowRoot.querySelector(componentName$f);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
     }
@@ -2680,13 +2680,13 @@ const customMixin$2 = (superclass) =>
   };
 
 const {
-  host: host$6,
+  host: host$7,
   digitField,
-  label: label$5,
-  requiredIndicator: requiredIndicator$5,
+  label: label$6,
+  requiredIndicator: requiredIndicator$6,
   internalWrapper,
   focusedDigitField,
-  errorMessage: errorMessage$5,
+  errorMessage: errorMessage$6,
 } = {
   host: { selector: () => ':host' },
   focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -2697,42 +2697,42 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const textVars$1 = TextFieldClass.cssVarList;
+const textVars$2 = TextFieldClass.cssVarList;
 
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$1.fontSize }, host$6],
+      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
       hostWidth: { property: 'width' },
-      fontFamily: host$6,
+      fontFamily: host$7,
       labelTextColor: [
-        { ...label$5, property: 'color' },
-        { ...requiredIndicator$5, property: 'color' },
+        { ...label$6, property: 'color' },
+        { ...requiredIndicator$6, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
-        property: textVars$1.inputValueTextColor,
+        property: textVars$2.inputValueTextColor,
       },
       digitSize: [
         { ...digitField, property: 'height' },
         { ...digitField, property: 'width' },
       ],
-      digitPadding: { ...digitField, property: textVars$1.inputHorizontalPadding },
-      digitTextAlign: { ...digitField, property: textVars$1.inputTextAlign },
-      digitCaretTextColor: { ...digitField, property: textVars$1.inputCaretTextColor },
+      digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
+      digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
+      digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
       digitSpacing: { ...internalWrapper, property: 'gap' },
-      digitOutlineColor: { ...digitField, property: textVars$1.inputOutlineColor },
-      digitOutlineWidth: { ...digitField, property: textVars$1.inputOutlineWidth },
+      digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
+      digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
 
-      focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$1.inputOutlineColor },
+      focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$2.inputOutlineColor },
     },
   }),
   draggableMixin,
   composedProxyInputMixin,
   componentNameValidationMixin,
-  customMixin$2
+  customMixin$3
 )(
   createProxy({
     slots: [],
@@ -2768,7 +2768,7 @@ const PasscodeClass = compose(
 
 			descope-passcode-internal descope-text-field {
 				min-width: 2em;
-				max-width: var(${textVars$1.inputHeight});
+				max-width: var(${textVars$2.inputHeight});
 			}
 
 			vaadin-text-field::part(input-field) {
@@ -2803,15 +2803,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$b,
+    componentName: componentName$d,
   })
 );
 
-customElements.define(componentName$c, TextFieldClass);
+customElements.define(componentName$e, TextFieldClass);
 
-customElements.define(componentName$d, PasscodeInternal);
+customElements.define(componentName$f, PasscodeInternal);
 
-customElements.define(componentName$b, PasscodeClass);
+customElements.define(componentName$d, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -2847,19 +2847,19 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$a = getComponentName('password');
+const componentName$c = getComponentName('password');
 
 const {
-  host: host$5,
-  inputField: inputField$3,
+  host: host$6,
+  inputField: inputField$4,
   inputElement: inputElement$1,
   inputElementPlaceholder,
   revealButtonContainer,
   revealButtonIcon,
-  label: label$4,
-  requiredIndicator: requiredIndicator$4,
-  errorMessage: errorMessage$4,
-  helperText: helperText$4,
+  label: label$5,
+  requiredIndicator: requiredIndicator$5,
+  errorMessage: errorMessage$5,
+  helperText: helperText$5,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -2876,33 +2876,33 @@ const {
 const PasswordClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$5, property: 'width' },
-      hostMinWidth: { ...host$5, property: 'min-width' },
-      fontSize: [{}, host$5],
-      fontFamily: [label$4, inputField$3, errorMessage$4, helperText$4],
-      inputHeight: { ...inputField$3, property: 'height' },
+      hostWidth: { ...host$6, property: 'width' },
+      hostMinWidth: { ...host$6, property: 'min-width' },
+      fontSize: [{}, host$6],
+      fontFamily: [label$5, inputField$4, errorMessage$5, helperText$5],
+      inputHeight: { ...inputField$4, property: 'height' },
       inputHorizontalPadding: [
         { ...inputElement$1, property: 'padding-left' },
         { ...inputElement$1, property: 'padding-right' },
       ],
-      inputBackgroundColor: { ...inputField$3, property: 'background-color' },
+      inputBackgroundColor: { ...inputField$4, property: 'background-color' },
 
-      inputBorderStyle: { ...inputField$3, property: 'border-style' },
-      inputBorderWidth: { ...inputField$3, property: 'border-width' },
-      inputBorderColor: { ...inputField$3, property: 'border-color' },
-      inputBorderRadius: { ...inputField$3, property: 'border-radius' },
+      inputBorderStyle: { ...inputField$4, property: 'border-style' },
+      inputBorderWidth: { ...inputField$4, property: 'border-width' },
+      inputBorderColor: { ...inputField$4, property: 'border-color' },
+      inputBorderRadius: { ...inputField$4, property: 'border-radius' },
 
-      inputOutlineColor: { ...inputField$3, property: 'outline-color' },
-      inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
-      inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
-      inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
+      inputOutlineColor: { ...inputField$4, property: 'outline-color' },
+      inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
+      inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
 
       labelTextColor: [
-        { ...label$4, property: 'color' },
-        { ...requiredIndicator$4, property: 'color' },
+        { ...label$5, property: 'color' },
+        { ...requiredIndicator$5, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
 
       inputValueTextColor: [
         { ...inputElement$1, property: 'color' },
@@ -2975,23 +2975,23 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$a,
+    componentName: componentName$c,
   })
 );
 
-customElements.define(componentName$a, PasswordClass);
+customElements.define(componentName$c, PasswordClass);
 
-const componentName$9 = getComponentName('text-area');
+const componentName$b = getComponentName('text-area');
 
 const {
-  host: host$4,
-  label: label$3,
+  host: host$5,
+  label: label$4,
   placeholder: placeholder$1,
-  inputField: inputField$2,
+  inputField: inputField$3,
   textArea: textArea$2,
-  requiredIndicator: requiredIndicator$3,
-  helperText: helperText$3,
-  errorMessage: errorMessage$3,
+  requiredIndicator: requiredIndicator$4,
+  helperText: helperText$4,
+  errorMessage: errorMessage$4,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -3006,27 +3006,27 @@ const {
 const TextAreaClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$4, property: 'width' },
-      hostMinWidth: { ...host$4, property: 'min-width' },
-      fontSize: [host$4, textArea$2],
-      fontFamily: [label$3, inputField$2, helperText$3, errorMessage$3],
+      hostWidth: { ...host$5, property: 'width' },
+      hostMinWidth: { ...host$5, property: 'min-width' },
+      fontSize: [host$5, textArea$2],
+      fontFamily: [label$4, inputField$3, helperText$4, errorMessage$4],
       labelTextColor: [
-        { ...label$3, property: 'color' },
-        { ...requiredIndicator$3, property: 'color' },
+        { ...label$4, property: 'color' },
+        { ...requiredIndicator$4, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
-      inputBackgroundColor: { ...inputField$2, property: 'background-color' },
+      labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
+      inputBackgroundColor: { ...inputField$3, property: 'background-color' },
       inputValueTextColor: { ...textArea$2, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
-      inputBorderWidth: { ...inputField$2, property: 'border-width' },
-      inputBorderStyle: { ...inputField$2, property: 'border-style' },
-      inputBorderColor: { ...inputField$2, property: 'border-color' },
-      inputBorderRadius: { ...inputField$2, property: 'border-radius' },
-      inputOutlineStyle: { ...inputField$2, property: 'outline-Style' },
-      inputOutlineColor: { ...inputField$2, property: 'outline-color' },
-      inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
-      inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
+      inputBorderWidth: { ...inputField$3, property: 'border-width' },
+      inputBorderStyle: { ...inputField$3, property: 'border-style' },
+      inputBorderColor: { ...inputField$3, property: 'border-color' },
+      inputBorderRadius: { ...inputField$3, property: 'border-radius' },
+      inputOutlineStyle: { ...inputField$3, property: 'outline-Style' },
+      inputOutlineColor: { ...inputField$3, property: 'outline-color' },
+      inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
+      inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
       inputResizeType: { ...textArea$2, property: 'resize' },
       inputMinHeight: { ...textArea$2, property: 'min-height' },
     },
@@ -3053,20 +3053,20 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$9,
+    componentName: componentName$b,
   })
 );
 
-customElements.define(componentName$9, TextAreaClass);
+customElements.define(componentName$b, TextAreaClass);
 
-const observedAttributes$2 = ['src', 'alt'];
+const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$8 = getComponentName('image');
+const componentName$a = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$8, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$a, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
-    return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
+    return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
   }
 
   constructor() {
@@ -3089,7 +3089,7 @@ class RawImage extends BaseClass$1 {
   connectedCallback() {
     super.connectedCallback?.();
 
-    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$2 });
+    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$3 });
   }
 }
 
@@ -3103,9 +3103,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$8, ImageClass);
+customElements.define(componentName$a, ImageClass);
 
-const componentName$7 = getComponentName('combo-box');
+const componentName$9 = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3157,15 +3157,15 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$3,
-  inputField: inputField$1,
+  host: host$4,
+  inputField: inputField$2,
   inputElement,
   placeholder,
   toggle,
-  label: label$2,
-  requiredIndicator: requiredIndicator$2,
-  helperText: helperText$2,
-  errorMessage: errorMessage$2,
+  label: label$3,
+  requiredIndicator: requiredIndicator$3,
+  helperText: helperText$3,
+  errorMessage: errorMessage$3,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -3186,23 +3186,23 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$3, property: 'width' },
+      hostWidth: { ...host$4, property: 'width' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$3],
-      fontFamily: [label$2, placeholder, inputField$1, helperText$2, errorMessage$2],
+      fontSize: [{}, host$4],
+      fontFamily: [label$3, placeholder, inputField$2, helperText$3, errorMessage$3],
       labelTextColor: [
-        { ...label$2, property: 'color' },
-        { ...requiredIndicator$2, property: 'color' },
+        { ...label$3, property: 'color' },
+        { ...requiredIndicator$3, property: 'color' },
       ],
-      errorMessageTextColor: { ...errorMessage$2, property: 'color' },
-      inputHeight: { ...inputField$1, property: 'height' },
-      inputBackgroundColor: { ...inputField$1, property: 'background-color' },
-      inputBorderColor: { ...inputField$1, property: 'border-color' },
-      inputBorderWidth: { ...inputField$1, property: 'border-width' },
-      inputBorderStyle: { ...inputField$1, property: 'border-style' },
-      inputBorderRadius: { ...inputField$1, property: 'border-radius' },
-      labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
-      inputValueTextColor: { ...inputField$1, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
+      inputHeight: { ...inputField$2, property: 'height' },
+      inputBackgroundColor: { ...inputField$2, property: 'background-color' },
+      inputBorderColor: { ...inputField$2, property: 'border-color' },
+      inputBorderWidth: { ...inputField$2, property: 'border-width' },
+      inputBorderStyle: { ...inputField$2, property: 'border-style' },
+      inputBorderRadius: { ...inputField$2, property: 'border-radius' },
+      labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
+      inputValueTextColor: { ...inputField$2, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder, property: 'color' },
       inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
       inputDropdownButtonColor: { ...toggle, property: 'color' },
@@ -3211,10 +3211,10 @@ const ComboBoxClass = compose(
         { ...toggle, property: 'margin-right' },
         { ...toggle, property: 'margin-left' },
       ],
-      inputOutlineColor: { ...inputField$1, property: 'outline-color' },
-      inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
-      inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
-      inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
+      inputOutlineColor: { ...inputField$2, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
+      inputOutlineStyle: { ...inputField$2, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
       inputHorizontalPadding: [
         { ...inputElement, property: 'padding-left' },
         { ...inputElement, property: 'padding-right' },
@@ -3285,12 +3285,12 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size'],
-    componentName: componentName$7,
+    componentName: componentName$9,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$7, ComboBoxClass);
+customElements.define(componentName$9, ComboBoxClass);
 
 var CountryCodes = [
   {
@@ -4530,10 +4530,10 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$6 = getComponentName('phone-field-internal');
+const componentName$8 = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
-const countryAttrs = ['country-input-placeholder', 'default-code'];
+const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
 const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
 const mapAttrs = {
   'country-input-placeholder': 'placeholder',
@@ -4542,27 +4542,28 @@ const mapAttrs = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
 
-class PhoneFieldInternal extends BaseInputClass$2 {
+let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$2.observedAttributes || [], inputRelatedAttrs$1);
+    return [].concat(BaseInputClass$3.observedAttributes || [], inputRelatedAttrs$1);
   }
 
   constructor() {
     super();
 
     this.innerHTML = `
-        <div>
-            <descope-combo-box
-				item-label-path="data-name"
-				item-value-path="data-id"
-			>
-			${CountryCodes.map((item) => comboBoxItem(item)).join('')}
-			</descope-combo-box>
-			<div class="separator"></div>
-            <descope-text-field type="tel"></descope-text-field>
-         </div>`;
+    <div>
+        <descope-combo-box
+          item-label-path="data-name"
+          item-value-path="data-id"
+        >
+        ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
+        </descope-combo-box>
+      <div class="separator"></div>
+        <descope-text-field type="tel"></descope-text-field>
+     </div>
+    `;
 
     this.countryCodeInput = this.querySelector('descope-combo-box');
     this.phoneNumberInput = this.querySelector('descope-text-field');
@@ -4570,10 +4571,10 @@ class PhoneFieldInternal extends BaseInputClass$2 {
   }
 
   get value() {
-    if (!this.countryCodeValue || !this.phoneNumberValue) {
+    if (!this.phoneNumberValue) {
       return '';
     }
-    return this.inputs.map(({ value }) => value).join('-');
+    return `${this.countryCodeInput.value}-${this.phoneNumberInput.value}`;
   }
 
   set value(val) {
@@ -4610,7 +4611,7 @@ class PhoneFieldInternal extends BaseInputClass$2 {
     if (hasMinPhoneLength) {
       return { tooShort: true };
     }
-    if ((hasCode && !hasPhone) || (!hasCode && hasPhone)) {
+    if (hasPhone && !hasCode) {
       return { valueMissing: true };
     }
     return {};
@@ -4627,14 +4628,27 @@ class PhoneFieldInternal extends BaseInputClass$2 {
     this.setComboBoxDescriptor();
   }
 
+  getRestrictedCountries() {
+    return this.getAttribute('restrict-countries')?.split(',') || [];
+  }
+
   getCountryByDialCode(countryDialCode) {
-    return this.countryCodeInput.items.find(
+    return this.countryCodeInput.items?.find(
       (c) => c.getAttribute('data-dial-code') === countryDialCode
     );
   }
 
   getCountryByCodeId(countryCode) {
-    return this.countryCodeInput.items.find((c) => c['data-id'] === countryCode)?.['data-name'];
+    return this.countryCodeInput.items?.find((c) => c['data-id'] === countryCode)?.['data-name'];
+  }
+
+  updateCountryCodeItems(restrictCountries) {
+    const items = restrictCountries.length
+      ? CountryCodes.filter((c) => restrictCountries.includes(c.code))
+      : CountryCodes;
+    this.querySelector('descope-combo-box').innerHTML = items
+      .map((item) => comboBoxItem(item))
+      .join('');
   }
 
   handleDefaultCountryCode(countryCode) {
@@ -4711,18 +4725,21 @@ class PhoneFieldInternal extends BaseInputClass$2 {
           this.phoneNumberInput.setAttribute(attr, newValue);
         }
       }
+      if (attrName === 'restrict-countries') {
+        this.updateCountryCodeItems(this.getRestrictedCountries());
+      }
     }
   }
-}
+};
 
-customElements.define(componentName$6, PhoneFieldInternal);
+customElements.define(componentName$8, PhoneFieldInternal$1);
 
-const textVars = TextFieldClass.cssVarList;
+const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$5 = getComponentName('phone-field');
+const componentName$7 = getComponentName('phone-field');
 
-const customMixin$1 = (superclass) =>
+const customMixin$2 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -4734,15 +4751,15 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$6}
+				<${componentName$8}
 					tabindex="-1"
 					slot="input"
-				></${componentName$6}>
+				></${componentName$8}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$6);
+      this.inputElement = this.shadowRoot.querySelector(componentName$8);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -4755,21 +4772,22 @@ const customMixin$1 = (superclass) =>
           'country-input-placeholder',
           'phone-input-placeholder',
           'disabled',
+          'restrict-countries',
         ],
       });
     }
   };
 
 const {
-  host: host$2,
-  label: label$1,
-  requiredIndicator: requiredIndicator$1,
-  inputField,
+  host: host$3,
+  label: label$2,
+  requiredIndicator: requiredIndicator$2,
+  inputField: inputField$1,
   countryCodeInput,
-  phoneInput,
+  phoneInput: phoneInput$1,
   separator,
-  errorMessage: errorMessage$1,
-  helperText: helperText$1,
+  errorMessage: errorMessage$2,
+  helperText: helperText$2,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -4786,8 +4804,8 @@ const PhoneFieldClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$2,
-        inputField,
+        host$3,
+        inputField$1,
         {
           selector: TextFieldClass.componentName,
           property: TextFieldClass.cssVarList.fontSize,
@@ -4798,69 +4816,69 @@ const PhoneFieldClass = compose(
         },
       ],
       fontFamily: [
-        label$1,
-        errorMessage$1,
-        helperText$1,
+        label$2,
+        errorMessage$2,
+        helperText$2,
         {
           ...countryCodeInput,
           property: ComboBoxClass.cssVarList.overlay.fontFamily,
         },
       ],
       hostWidth: [
-        { ...host$2, property: 'width' },
-        { ...phoneInput, property: 'width' },
+        { ...host$3, property: 'width' },
+        { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
 
       inputBorderStyle: [
-        { ...inputField, property: 'border-style' },
+        { ...inputField$1, property: 'border-style' },
         { ...separator, property: 'border-left-style' },
       ],
       inputBorderWidth: [
-        { ...inputField, property: 'border-width' },
+        { ...inputField$1, property: 'border-width' },
         { ...separator, property: 'border-left-width' },
       ],
       inputBorderColor: [
-        { ...inputField, property: 'border-color' },
+        { ...inputField$1, property: 'border-color' },
         { ...separator, property: 'border-left-color' },
       ],
-      inputBorderRadius: { ...inputField, property: 'border-radius' },
+      inputBorderRadius: { ...inputField$1, property: 'border-radius' },
 
       countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
       countryCodeDropdownWidth: {
         ...countryCodeInput,
         property: '--vaadin-combo-box-overlay-width',
       },
-      phoneInputWidth: { ...phoneInput, property: 'width' },
+      phoneInputWidth: { ...phoneInput$1, property: 'width' },
 
       labelTextColor: [
-        { ...label$1, property: 'color' },
-        { ...requiredIndicator$1, property: 'color' },
+        { ...label$2, property: 'color' },
+        { ...requiredIndicator$2, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$2, property: 'color' },
 
       inputValueTextColor: [
-        { ...phoneInput, property: textVars.inputValueTextColor },
+        { ...phoneInput$1, property: textVars$1.inputValueTextColor },
         { ...countryCodeInput, property: comboVars.inputValueTextColor },
       ],
 
-      inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
+      inputPlaceholderTextColor: { ...phoneInput$1, property: textVars$1.inputPlaceholderColor },
 
       overlayItemBackgroundColor: {
         selector: 'descope-combo-box',
         property: comboVars.overlayItemBackgroundColor,
       },
 
-      inputOutlineStyle: { ...inputField, property: 'outline-style' },
-      inputOutlineColor: { ...inputField, property: 'outline-color' },
-      inputOutlineWidth: { ...inputField, property: 'outline-width' },
-      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
+      inputOutlineColor: { ...inputField$1, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
+      inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
     },
   }),
   draggableMixin,
   composedProxyInputMixin,
-  customMixin$1
+  customMixin$2
 )(
   createProxy({
     slots: [],
@@ -4923,10 +4941,10 @@ const PhoneFieldClass = compose(
 			}
 			descope-text-field {
 				flex-grow: 1;
-				${textVars.inputOutlineWidth}: 0;
-				${textVars.inputOutlineOffset}: 0;
-				${textVars.inputBorderWidth}: 0;
-				${textVars.inputBorderRadius}: 0;
+				${textVars$1.inputOutlineWidth}: 0;
+				${textVars$1.inputOutlineOffset}: 0;
+				${textVars$1.inputBorderWidth}: 0;
+				${textVars$1.inputBorderRadius}: 0;
 			}
 			vaadin-text-field[readonly] > input:placeholder-shown {
 				opacity: 1;
@@ -4936,51 +4954,360 @@ const PhoneFieldClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$5,
+    componentName: componentName$7,
   })
 );
 
-customElements.define(componentName$5, PhoneFieldClass);
+customElements.define(componentName$7, PhoneFieldClass);
 
-const componentName$4 = getComponentName('new-password-internal');
+const getCountryByCodeId = (countryCode) => {
+  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
+};
 
-const componentName$3 = getComponentName('new-password');
+const componentName$6 = getComponentName('phone-field-internal-input-box');
 
-const customMixin = (superclass) =>
-  class NewPasswordMixinClass extends superclass {
-    init() {
-      super.init?.();
+const observedAttributes$2 = ['disabled', 'size', 'bordered', 'invalid', 'readonly', 'placeholder'];
 
-      const template = document.createElement('template');
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
 
-      template.innerHTML = `
-			<${componentName$4}
-				name="new-password"
-				tabindex="-1"
-				slot="input"
-			></${componentName$4}>
-			`;
+class PhoneFieldInternal extends BaseInputClass$2 {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass$2.observedAttributes || [], observedAttributes$2);
+  }
 
-      this.baseElement.appendChild(template.content.cloneNode(true));
+  constructor() {
+    super();
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$4);
+    this.innerHTML = `
+      <div>
+        <descope-text-field tabindex="1"></descope-text-field>
+      </div>
+      `;
 
-      forwardAttrs(this, this.inputElement, {
-        includeAttrs: [
-          'password-label',
-          'password-placeholder',
-          'confirm-label',
-          'confirm-placeholder',
-          'full-width',
-          'size',
-          'bordered',
-          'label',
-          'has-confirm',
-          'invalid',
-          'readonly',
-          'draggable',
-        ],
-      });
+    this.phoneNumberInput = this.querySelector('descope-text-field');
+  }
+
+  get defaultCountryCode() {
+    return getCountryByCodeId(this.getAttribute('default-code'));
+  }
+
+  get hasDefaultCode() {
+    return !!this.getAttribute('default-code');
+  }
+
+  get value() {
+    if (!this.phoneNumberValue) {
+      return '';
+    }
+
+    if (this.hasDefaultCode) {
+      // we want to transform phone numbers to a valid {dialCode}-{phoneNumber} format
+      // e.g.:
+      // +972-12345 => +972-12345
+      // 972-12345 => +972-12345
+      // 12345 => +972-12345
+      //
+      // we also want to handle any extra dash if added in the start of the phone number
+      // e.g.:
+      // +972--12345 => +972-12345
+      const pattern = new RegExp(`\\+?${parseInt(this.defaultCountryCode, 10)}--?`);
+      return `${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(pattern, '')}`;
+    }
+
+    return this.phoneNumberInput.value;
+  }
+
+  set value(val) {
+    this.phoneNumberInput.value = val;
+  }
+
+  get phoneNumberValue() {
+    return this.phoneNumberInput.value;
+  }
+
+  get minLength() {
+    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  }
+
+  get maxLength() {
+    return parseInt(this.getAttribute('maxlength'), 10) || 50;
+  }
+
+  getValidity() {
+    const validPhonePattern = /^\+\d{1,4}-(?:\d-?){1,15}$/;
+    const stripValue = this.value.replace(/\D/g, '');
+
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+
+    if (stripValue.length < this.minLength) {
+      return { tooShort: true };
+    }
+
+    if (stripValue.length > this.maxLength) {
+      return { tooLong: true };
+    }
+
+    if (!validPhonePattern.test(this.value)) {
+      return { patternMismatch: true };
+    }
+
+    return {};
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.phoneNumberInput.focus();
+    });
+
+    super.init?.();
+    this.initInputs();
+  }
+
+  getCountryByDialCode(countryDialCode) {
+    return this.countryCodeInput.items?.find(
+      (c) => c.getAttribute('data-dial-code') === countryDialCode
+    );
+  }
+
+  initInputs() {
+    // Sanitize phone input value to filter everything but digits
+    this.phoneNumberInput.addEventListener('input', (e) => {
+      if (e.target.value.length === 1 && e.target.value === '-') {
+        e.target.value = '';
+      }
+
+      e.target.value = e.target.value
+        .replace(/(?!^)\+/g, '')
+        .replace('--', '-')
+        .replace('+-', '+');
+
+      const telDigitsRegExp = /^[+\d-]+$/;
+      const sanitizedInput = e.target.value
+        .split('')
+        .filter((char) => telDigitsRegExp.test(char))
+        .join('');
+
+      e.target.value = sanitizedInput;
+    });
+
+    this.handleFocusEventsDispatching([this.phoneNumberInput]);
+    this.handleInputEventDispatching();
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue && observedAttributes$2.includes(attrName)) {
+      this.phoneNumberInput.setAttribute(attrName, newValue);
+    }
+  }
+}
+
+customElements.define(componentName$6, PhoneFieldInternal);
+
+const textVars = TextFieldClass.cssVarList;
+
+const componentName$5 = getComponentName('phone-input-box-field');
+
+const customMixin$1 = (superclass) =>
+  class PhoneInputBoxFieldMixinClass extends superclass {
+    static get CountryCodes() {
+      return CountryCodes;
+    }
+
+    init() {
+      super.init?.();
+
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+				<${componentName$6}
+					tabindex="-1"
+					slot="input"
+				></${componentName$6}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(componentName$6);
+
+      forwardAttrs(this.shadowRoot.host, this.inputElement, {
+        includeAttrs: [
+          'size',
+          'bordered',
+          'invalid',
+          'minlength',
+          'maxlength',
+          'default-code',
+          'disabled',
+        ],
+      });
+    }
+  };
+
+const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, inputField, phoneInput, errorMessage: errorMessage$1, helperText: helperText$1 } = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  inputField: { selector: '::part(input-field)' },
+  phoneInput: { selector: () => 'descope-text-field' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+const PhoneFieldInputBoxClass = compose(
+  createStyleMixin({
+    mappings: {
+      fontSize: [
+        host$2,
+        inputField,
+        {
+          selector: TextFieldClass.componentName,
+          property: TextFieldClass.cssVarList.fontSize,
+        },
+      ],
+      fontFamily: [label$1, errorMessage$1, helperText$1],
+      hostWidth: { ...host$2, property: 'width' },
+      hostMinWidth: { ...host$2, property: 'min-width' },
+
+      inputBorderStyle: { ...inputField, property: 'border-style' },
+      inputBorderWidth: { ...inputField, property: 'border-width' },
+      inputBorderColor: { ...inputField, property: 'border-color' },
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
+
+      labelTextColor: [
+        { ...label$1, property: 'color' },
+        { ...requiredIndicator$1, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
+
+      inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
+
+      inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
+
+      inputOutlineStyle: { ...inputField, property: 'outline-style' },
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+    },
+  }),
+  draggableMixin,
+  composedProxyInputMixin,
+  customMixin$1
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+    :host {
+      display: inline-flex;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+    ${useHostExternalPadding(PhoneFieldInputBoxClass.cssVarList)}
+    ${resetInputCursor('vaadin-text-field')}
+    ${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
+    ${resetInputFieldDefaultWidth()}
+
+    vaadin-text-field {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 0;
+    }
+    vaadin-text-field[focus-ring]::part(input-field) {
+      box-shadow: none;
+    }
+    vaadin-text-field::before {
+      height: 0;
+    }
+    vaadin-text-field::part(input-field) {
+      padding: 0;
+      min-height: 0;
+      background: transparent;
+      overflow: hidden;
+      -webkit-mask-image: none;
+    }
+    descope-phone-field-internal-input-box {
+      -webkit-mask-image: none;
+      padding: 0;
+      min-height: 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-text-field {
+      flex-grow: 1;
+      width: 100%;
+      ${textVars.inputOutlineWidth}: 0;
+      ${textVars.inputOutlineOffset}: 0;
+      ${textVars.inputBorderWidth}: 0;
+      ${textVars.inputBorderRadius}: 0;
+    }
+    vaadin-text-field[readonly] > input:placeholder-shown {
+      opacity: 1;
+    }
+    vaadin-text-field::part(input-field)::after {
+      border: none;
+    }
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$5,
+  })
+);
+
+customElements.define(componentName$5, PhoneFieldInputBoxClass);
+
+const componentName$4 = getComponentName('new-password-internal');
+
+const componentName$3 = getComponentName('new-password');
+
+const customMixin = (superclass) =>
+  class NewPasswordMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+			<${componentName$4}
+				name="new-password"
+				tabindex="-1"
+				slot="input"
+			></${componentName$4}>
+			`;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(componentName$4);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'password-label',
+          'password-placeholder',
+          'confirm-label',
+          'confirm-placeholder',
+          'full-width',
+          'size',
+          'bordered',
+          'label',
+          'has-confirm',
+          'invalid',
+          'readonly',
+          'draggable',
+        ],
+      });
     }
   };
 
@@ -5963,7 +6290,7 @@ const globals = {
   shadow,
   fonts,
 };
-const vars$o = getThemeVars(globals);
+const vars$p = getThemeVars(globals);
 
 const globalRefs$b = getThemeRefs(globals);
 const compVars$3 = ButtonClass.cssVarList;
@@ -5976,7 +6303,7 @@ const mode = {
   surface: globalRefs$b.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$r);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$t);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -6063,7 +6390,7 @@ const button = {
   },
 };
 
-const vars$n = {
+const vars$o = {
   ...compVars$3,
   ...helperVars$3,
 };
@@ -6071,13 +6398,13 @@ const vars$n = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$n
+  vars: vars$o
 });
 
 const componentName = getComponentName('input-wrapper');
 const globalRefs$a = getThemeRefs(globals);
 
-const [theme$1, refs, vars$m] = createHelperVars(
+const [theme$1, refs, vars$n] = createHelperVars(
   {
     labelTextColor: globalRefs$a.colors.surface.contrast,
     valueTextColor: globalRefs$a.colors.surface.contrast,
@@ -6146,21 +6473,56 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$m
+  vars: vars$n
 });
 
-const vars$l = TextFieldClass.cssVarList;
+const vars$m = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$m.hostWidth]: refs.width,
+  [vars$m.hostMinWidth]: refs.minWidth,
+  [vars$m.fontSize]: refs.fontSize,
+  [vars$m.fontFamily]: refs.fontFamily,
+  [vars$m.labelTextColor]: refs.labelTextColor,
+  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$m.inputValueTextColor]: refs.valueTextColor,
+  [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
+  [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.inputHeight]: refs.inputHeight,
+  [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$m
+});
+
+const globalRefs$9 = getThemeRefs(globals);
+const vars$l = PasswordClass.cssVarList;
+
+const password = {
   [vars$l.hostWidth]: refs.width,
-  [vars$l.hostMinWidth]: refs.minWidth,
   [vars$l.fontSize]: refs.fontSize,
   [vars$l.fontFamily]: refs.fontFamily,
   [vars$l.labelTextColor]: refs.labelTextColor,
-  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$l.inputHeight]: refs.inputHeight,
+  [vars$l.inputBackgroundColor]: refs.backgroundColor,
+  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$l.inputValueTextColor]: refs.valueTextColor,
-  [vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$l.inputBorderWidth]: refs.borderWidth,
   [vars$l.inputBorderStyle]: refs.borderStyle,
   [vars$l.inputBorderColor]: refs.borderColor,
@@ -6169,33 +6531,27 @@ const textField = {
   [vars$l.inputOutlineStyle]: refs.outlineStyle,
   [vars$l.inputOutlineColor]: refs.outlineColor,
   [vars$l.inputOutlineOffset]: refs.outlineOffset,
-  [vars$l.inputBackgroundColor]: refs.backgroundColor,
-  [vars$l.inputHeight]: refs.inputHeight,
-  [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$l.revealButtonOffset]: globalRefs$9.spacing.md,
+  [vars$l.revealButtonSize]: refs.toggleButtonSize,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$l
 });
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$k = PasswordClass.cssVarList;
+const vars$k = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$k.hostWidth]: refs.width,
+  [vars$k.hostMinWidth]: refs.minWidth,
   [vars$k.fontSize]: refs.fontSize,
   [vars$k.fontFamily]: refs.fontFamily,
   [vars$k.labelTextColor]: refs.labelTextColor,
   [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$k.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$k.inputHeight]: refs.inputHeight,
-  [vars$k.inputBackgroundColor]: refs.backgroundColor,
-  [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$k.inputValueTextColor]: refs.valueTextColor,
-  [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$k.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$k.inputBorderWidth]: refs.borderWidth,
   [vars$k.inputBorderStyle]: refs.borderStyle,
   [vars$k.inputBorderColor]: refs.borderColor,
@@ -6204,19 +6560,21 @@ const password = {
   [vars$k.inputOutlineStyle]: refs.outlineStyle,
   [vars$k.inputOutlineColor]: refs.outlineColor,
   [vars$k.inputOutlineOffset]: refs.outlineOffset,
-  [vars$k.revealButtonOffset]: globalRefs$9.spacing.md,
-  [vars$k.revealButtonSize]: refs.toggleButtonSize,
+  [vars$k.inputBackgroundColor]: refs.backgroundColor,
+  [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$k.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$k.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$k
 });
 
-const vars$j = NumberFieldClass.cssVarList;
+const vars$j = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$j.hostWidth]: refs.width,
   [vars$j.hostMinWidth]: refs.minWidth,
   [vars$j.fontSize]: refs.fontSize,
@@ -6224,6 +6582,7 @@ const numberField = {
   [vars$j.labelTextColor]: refs.labelTextColor,
   [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$j.inputValueTextColor]: refs.valueTextColor,
+  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$j.inputBorderWidth]: refs.borderWidth,
   [vars$j.inputBorderStyle]: refs.borderStyle,
@@ -6234,194 +6593,162 @@ const numberField = {
   [vars$j.inputOutlineColor]: refs.outlineColor,
   [vars$j.inputOutlineOffset]: refs.outlineOffset,
   [vars$j.inputBackgroundColor]: refs.backgroundColor,
-  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$j.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$j.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$j
 });
 
-const vars$i = EmailFieldClass.cssVarList;
+const globalRefs$8 = getThemeRefs(globals);
+const vars$i = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [vars$i.hostWidth]: refs.width,
   [vars$i.hostMinWidth]: refs.minWidth,
-  [vars$i.fontSize]: refs.fontSize,
+  [vars$i.fontSize]: globalRefs$8.typography.body2.size,
   [vars$i.fontFamily]: refs.fontFamily,
   [vars$i.labelTextColor]: refs.labelTextColor,
+  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$i.inputBackgroundColor]: refs.backgroundColor,
   [vars$i.inputValueTextColor]: refs.valueTextColor,
-  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$i.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$i.inputBorderRadius]: refs.borderRadius,
   [vars$i.inputBorderWidth]: refs.borderWidth,
   [vars$i.inputBorderStyle]: refs.borderStyle,
   [vars$i.inputBorderColor]: refs.borderColor,
-  [vars$i.inputBorderRadius]: refs.borderRadius,
   [vars$i.inputOutlineWidth]: refs.outlineWidth,
   [vars$i.inputOutlineStyle]: refs.outlineStyle,
   [vars$i.inputOutlineColor]: refs.outlineColor,
   [vars$i.inputOutlineOffset]: refs.outlineOffset,
-  [vars$i.inputBackgroundColor]: refs.backgroundColor,
-  [vars$i.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$i.inputHeight]: refs.inputHeight,
+  [vars$i.inputResizeType]: 'vertical',
+  [vars$i.inputMinHeight]: '5em',
+
+  _disabled: {
+    [vars$i.inputBackgroundColor]: globalRefs$8.colors.surface.light,
+  },
+
+  _readonly: {
+    [vars$i.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$i
 });
 
-const globalRefs$8 = getThemeRefs(globals);
-const vars$h = TextAreaClass.cssVarList;
+const vars$h = CheckboxClass.cssVarList;
 
-const textArea = {
+const checkbox = {
   [vars$h.hostWidth]: refs.width,
-  [vars$h.hostMinWidth]: refs.minWidth,
-  [vars$h.fontSize]: globalRefs$8.typography.body2.size,
+  [vars$h.fontSize]: refs.fontSize,
   [vars$h.fontFamily]: refs.fontFamily,
   [vars$h.labelTextColor]: refs.labelTextColor,
   [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$h.labelFontWeight]: '400',
+  [vars$h.labelSpacing]: '0.75em',
   [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$h.inputBackgroundColor]: refs.backgroundColor,
-  [vars$h.inputValueTextColor]: refs.valueTextColor,
-  [vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$h.inputOutlineWidth]: refs.outlineWidth,
+  [vars$h.inputOutlineOffset]: refs.outlineOffset,
+  [vars$h.inputOutlineColor]: refs.outlineColor,
+  [vars$h.inputOutlineStyle]: refs.outlineStyle,
   [vars$h.inputBorderRadius]: refs.borderRadius,
+  [vars$h.inputBorderColor]: refs.borderColor,
   [vars$h.inputBorderWidth]: refs.borderWidth,
   [vars$h.inputBorderStyle]: refs.borderStyle,
-  [vars$h.inputBorderColor]: refs.borderColor,
-  [vars$h.inputOutlineWidth]: refs.outlineWidth,
-  [vars$h.inputOutlineStyle]: refs.outlineStyle,
-  [vars$h.inputOutlineColor]: refs.outlineColor,
-  [vars$h.inputOutlineOffset]: refs.outlineOffset,
-  [vars$h.inputResizeType]: 'vertical',
-  [vars$h.inputMinHeight]: '5em',
+  [vars$h.inputBackgroundColor]: refs.inputBackgroundColor,
+  [vars$h.inputSize]: '2em',
 
-  _disabled: {
-    [vars$h.inputBackgroundColor]: globalRefs$8.colors.surface.light,
+  _checked: {
+    [vars$h.inputBackgroundColor]: refs.backgroundColor,
+    [vars$h.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$h.inputResizeType]: 'none',
+  _disabled: {
+    [vars$h.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$h
 });
 
-const vars$g = CheckboxClass.cssVarList;
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
+
+const globalRefs$7 = getThemeRefs(globals);
+const vars$g = SwitchToggleClass.cssVarList;
 
-const checkbox = {
-  [vars$g.hostWidth]: refs.width,
+const switchToggle = {
   [vars$g.fontSize]: refs.fontSize,
   [vars$g.fontFamily]: refs.fontFamily,
-  [vars$g.labelTextColor]: refs.labelTextColor,
-  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$g.labelFontWeight]: '400',
-  [vars$g.labelSpacing]: '0.75em',
-  [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$g.inputOutlineWidth]: refs.outlineWidth,
   [vars$g.inputOutlineOffset]: refs.outlineOffset,
   [vars$g.inputOutlineColor]: refs.outlineColor,
   [vars$g.inputOutlineStyle]: refs.outlineStyle,
-  [vars$g.inputBorderRadius]: refs.borderRadius,
-  [vars$g.inputBorderColor]: refs.borderColor,
-  [vars$g.inputBorderWidth]: refs.borderWidth,
-  [vars$g.inputBorderStyle]: refs.borderStyle,
-  [vars$g.inputBackgroundColor]: refs.inputBackgroundColor,
-  [vars$g.inputSize]: '2em',
 
-  _checked: {
-    [vars$g.inputBackgroundColor]: refs.backgroundColor,
-    [vars$g.inputValueTextColor]: refs.valueTextColor,
-  },
+  [vars$g.trackBorderStyle]: refs.borderStyle,
+  [vars$g.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$g.trackBorderColor]: refs.borderColor,
+  [vars$g.trackBackgroundColor]: 'none',
+  [vars$g.trackBorderRadius]: globalRefs$7.radius.md,
+  [vars$g.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$g.trackHeight]: checkboxHeight,
+
+  [vars$g.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$g.knobRadius]: '50%',
+  [vars$g.knobTopOffset]: '1px',
+  [vars$g.knobLeftOffset]: knobMargin,
+  [vars$g.knobColor]: refs.valueTextColor,
+  [vars$g.knobTransitionDuration]: '0.3s',
 
-  _disabled: {
-    [vars$g.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$g
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
-
-const globalRefs$7 = getThemeRefs(globals);
-const vars$f = SwitchToggleClass.cssVarList;
+  [vars$g.labelTextColor]: refs.labelTextColor,
+  [vars$g.labelFontWeight]: '400',
+  [vars$g.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
+  [vars$g.labelSpacing]: '0.25em',
+  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
 
-const switchToggle = {
-  [vars$f.fontSize]: refs.fontSize,
-  [vars$f.fontFamily]: refs.fontFamily,
-
-  [vars$f.inputOutlineWidth]: refs.outlineWidth,
-  [vars$f.inputOutlineOffset]: refs.outlineOffset,
-  [vars$f.inputOutlineColor]: refs.outlineColor,
-  [vars$f.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$f.trackBorderStyle]: refs.borderStyle,
-  [vars$f.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$f.trackBorderColor]: refs.borderColor,
-  [vars$f.trackBackgroundColor]: 'none',
-  [vars$f.trackBorderRadius]: globalRefs$7.radius.md,
-  [vars$f.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$f.trackHeight]: checkboxHeight,
-
-  [vars$f.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$f.knobRadius]: '50%',
-  [vars$f.knobTopOffset]: '1px',
-  [vars$f.knobLeftOffset]: knobMargin,
-  [vars$f.knobColor]: refs.valueTextColor,
-  [vars$f.knobTransitionDuration]: '0.3s',
-
-  [vars$f.labelTextColor]: refs.labelTextColor,
-  [vars$f.labelFontWeight]: '400',
-  [vars$f.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
-  [vars$f.labelSpacing]: '0.25em',
-  [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
-
-  [vars$f.hostWidth]: refs.width,
+  [vars$g.hostWidth]: refs.width,
 
   _checked: {
-    [vars$f.trackBorderColor]: refs.borderColor,
-    [vars$f.trackBackgroundColor]: refs.backgroundColor,
-    [vars$f.knobLeftOffset]: `calc(100% - var(${vars$f.knobSize}) - ${knobMargin})`,
-    [vars$f.knobColor]: refs.valueTextColor,
-    [vars$f.knobTextColor]: refs.valueTextColor,
+    [vars$g.trackBorderColor]: refs.borderColor,
+    [vars$g.trackBackgroundColor]: refs.backgroundColor,
+    [vars$g.knobLeftOffset]: `calc(100% - var(${vars$g.knobSize}) - ${knobMargin})`,
+    [vars$g.knobColor]: refs.valueTextColor,
+    [vars$g.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$f.knobColor]: globalRefs$7.colors.surface.light,
-    [vars$f.trackBorderColor]: globalRefs$7.colors.surface.main,
-    [vars$f.trackBackgroundColor]: globalRefs$7.colors.surface.main,
-    [vars$f.labelTextColor]: refs.labelTextColor,
+    [vars$g.knobColor]: globalRefs$7.colors.surface.light,
+    [vars$g.trackBorderColor]: globalRefs$7.colors.surface.main,
+    [vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
+    [vars$g.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$f.knobColor]: globalRefs$7.colors.surface.light,
-      [vars$f.trackBackgroundColor]: globalRefs$7.colors.surface.main,
+      [vars$g.knobColor]: globalRefs$7.colors.surface.light,
+      [vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$f.trackBorderColor]: globalRefs$7.colors.error.main,
-    [vars$f.knobColor]: globalRefs$7.colors.error.main,
+    [vars$g.trackBorderColor]: globalRefs$7.colors.error.main,
+    [vars$g.knobColor]: globalRefs$7.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$f
+  vars: vars$g
 });
 
 const globalRefs$6 = getThemeRefs(globals);
@@ -6446,7 +6773,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$l
+  componentName$n
 );
 
 const { shadowColor } = helperRefs$2;
@@ -6530,7 +6857,7 @@ const container = {
   },
 };
 
-const vars$e = {
+const vars$f = {
   ...compVars$2,
   ...helperVars$2,
 };
@@ -6538,152 +6865,152 @@ const vars$e = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$e
+  vars: vars$f
 });
 
-const vars$d = LogoClass.cssVarList;
+const vars$e = LogoClass.cssVarList;
 
 const logo$1 = {
-  [vars$d.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$e.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$d
+  vars: vars$e
 });
 
-const vars$c = TotpImageClass.cssVarList;
+const vars$d = TotpImageClass.cssVarList;
 
 const logo = {
-  [vars$c.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$d.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$c
+  vars: vars$d
 });
 
 const globalRefs$5 = getThemeRefs(globals);
-const vars$b = TextClass.cssVarList;
+const vars$c = TextClass.cssVarList;
 
 const text = {
-  [vars$b.textLineHeight]: '1em',
-  [vars$b.textAlign]: 'left',
-  [vars$b.textColor]: globalRefs$5.colors.surface.dark,
+  [vars$c.textLineHeight]: '1em',
+  [vars$c.textAlign]: 'left',
+  [vars$c.textColor]: globalRefs$5.colors.surface.dark,
   variant: {
     h1: {
-      [vars$b.fontSize]: globalRefs$5.typography.h1.size,
-      [vars$b.fontWeight]: globalRefs$5.typography.h1.weight,
-      [vars$b.fontFamily]: globalRefs$5.typography.h1.font,
+      [vars$c.fontSize]: globalRefs$5.typography.h1.size,
+      [vars$c.fontWeight]: globalRefs$5.typography.h1.weight,
+      [vars$c.fontFamily]: globalRefs$5.typography.h1.font,
     },
     h2: {
-      [vars$b.fontSize]: globalRefs$5.typography.h2.size,
-      [vars$b.fontWeight]: globalRefs$5.typography.h2.weight,
-      [vars$b.fontFamily]: globalRefs$5.typography.h2.font,
+      [vars$c.fontSize]: globalRefs$5.typography.h2.size,
+      [vars$c.fontWeight]: globalRefs$5.typography.h2.weight,
+      [vars$c.fontFamily]: globalRefs$5.typography.h2.font,
     },
     h3: {
-      [vars$b.fontSize]: globalRefs$5.typography.h3.size,
-      [vars$b.fontWeight]: globalRefs$5.typography.h3.weight,
-      [vars$b.fontFamily]: globalRefs$5.typography.h3.font,
+      [vars$c.fontSize]: globalRefs$5.typography.h3.size,
+      [vars$c.fontWeight]: globalRefs$5.typography.h3.weight,
+      [vars$c.fontFamily]: globalRefs$5.typography.h3.font,
     },
     subtitle1: {
-      [vars$b.fontSize]: globalRefs$5.typography.subtitle1.size,
-      [vars$b.fontWeight]: globalRefs$5.typography.subtitle1.weight,
-      [vars$b.fontFamily]: globalRefs$5.typography.subtitle1.font,
+      [vars$c.fontSize]: globalRefs$5.typography.subtitle1.size,
+      [vars$c.fontWeight]: globalRefs$5.typography.subtitle1.weight,
+      [vars$c.fontFamily]: globalRefs$5.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$b.fontSize]: globalRefs$5.typography.subtitle2.size,
-      [vars$b.fontWeight]: globalRefs$5.typography.subtitle2.weight,
-      [vars$b.fontFamily]: globalRefs$5.typography.subtitle2.font,
+      [vars$c.fontSize]: globalRefs$5.typography.subtitle2.size,
+      [vars$c.fontWeight]: globalRefs$5.typography.subtitle2.weight,
+      [vars$c.fontFamily]: globalRefs$5.typography.subtitle2.font,
     },
     body1: {
-      [vars$b.fontSize]: globalRefs$5.typography.body1.size,
-      [vars$b.fontWeight]: globalRefs$5.typography.body1.weight,
-      [vars$b.fontFamily]: globalRefs$5.typography.body1.font,
+      [vars$c.fontSize]: globalRefs$5.typography.body1.size,
+      [vars$c.fontWeight]: globalRefs$5.typography.body1.weight,
+      [vars$c.fontFamily]: globalRefs$5.typography.body1.font,
     },
     body2: {
-      [vars$b.fontSize]: globalRefs$5.typography.body2.size,
-      [vars$b.fontWeight]: globalRefs$5.typography.body2.weight,
-      [vars$b.fontFamily]: globalRefs$5.typography.body2.font,
+      [vars$c.fontSize]: globalRefs$5.typography.body2.size,
+      [vars$c.fontWeight]: globalRefs$5.typography.body2.weight,
+      [vars$c.fontFamily]: globalRefs$5.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$b.textColor]: globalRefs$5.colors.primary.main,
+      [vars$c.textColor]: globalRefs$5.colors.primary.main,
     },
     secondary: {
-      [vars$b.textColor]: globalRefs$5.colors.secondary.main,
+      [vars$c.textColor]: globalRefs$5.colors.secondary.main,
     },
     error: {
-      [vars$b.textColor]: globalRefs$5.colors.error.main,
+      [vars$c.textColor]: globalRefs$5.colors.error.main,
     },
     success: {
-      [vars$b.textColor]: globalRefs$5.colors.success.main,
+      [vars$c.textColor]: globalRefs$5.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$b.textAlign]: 'right' },
-    left: { [vars$b.textAlign]: 'left' },
-    center: { [vars$b.textAlign]: 'center' },
+    right: { [vars$c.textAlign]: 'right' },
+    left: { [vars$c.textAlign]: 'left' },
+    center: { [vars$c.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$b.hostWidth]: '100%',
+    [vars$c.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$b.fontStyle]: 'italic',
+    [vars$c.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$b.textTransform]: 'uppercase',
+    [vars$c.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$b.textTransform]: 'lowercase',
+    [vars$c.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$b
+  vars: vars$c
 });
 
 const globalRefs$4 = getThemeRefs(globals);
-const vars$a = LinkClass.cssVarList;
+const vars$b = LinkClass.cssVarList;
 
 const link = {
-  [vars$a.cursor]: 'pointer',
+  [vars$b.cursor]: 'pointer',
 
-  [vars$a.textColor]: globalRefs$4.colors.primary.main,
+  [vars$b.textColor]: globalRefs$4.colors.primary.main,
 
   textAlign: {
-    right: { [vars$a.textAlign]: 'right' },
-    left: { [vars$a.textAlign]: 'left' },
-    center: { [vars$a.textAlign]: 'center' },
+    right: { [vars$b.textAlign]: 'right' },
+    left: { [vars$b.textAlign]: 'left' },
+    center: { [vars$b.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$a.hostWidth]: '100%',
+    [vars$b.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$a.textColor]: globalRefs$4.colors.primary.main,
+      [vars$b.textColor]: globalRefs$4.colors.primary.main,
     },
     secondary: {
-      [vars$a.textColor]: globalRefs$4.colors.secondary.main,
+      [vars$b.textColor]: globalRefs$4.colors.secondary.main,
     },
     error: {
-      [vars$a.textColor]: globalRefs$4.colors.error.main,
+      [vars$b.textColor]: globalRefs$4.colors.error.main,
     },
     success: {
-      [vars$a.textColor]: globalRefs$4.colors.success.main,
+      [vars$b.textColor]: globalRefs$4.colors.success.main,
     },
   },
 };
@@ -6691,7 +7018,7 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$a
+  vars: vars$b
 });
 
 const globalRefs$3 = getThemeRefs(globals);
@@ -6702,7 +7029,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$k
+  componentName$m
 );
 
 const divider = {
@@ -6731,7 +7058,7 @@ const divider = {
   },
 };
 
-const vars$9 = {
+const vars$a = {
   ...compVars$1,
   ...helperVars$1,
 };
@@ -6739,81 +7066,81 @@ const vars$9 = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$9
+  vars: vars$a
 });
 
-const vars$8 = PasscodeClass.cssVarList;
+const vars$9 = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$8.fontFamily]: refs.fontFamily,
-  [vars$8.fontSize]: refs.fontSize,
-  [vars$8.labelTextColor]: refs.labelTextColor,
-  [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$8.digitValueTextColor]: refs.valueTextColor,
-  [vars$8.digitPadding]: '0',
-  [vars$8.digitTextAlign]: 'center',
-  [vars$8.digitSpacing]: '4px',
-  [vars$8.hostWidth]: refs.width,
-  [vars$8.digitOutlineColor]: 'transparent',
-  [vars$8.digitOutlineWidth]: refs.outlineWidth,
-  [vars$8.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$8.digitSize]: refs.inputHeight,
+  [vars$9.fontFamily]: refs.fontFamily,
+  [vars$9.fontSize]: refs.fontSize,
+  [vars$9.labelTextColor]: refs.labelTextColor,
+  [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$9.digitValueTextColor]: refs.valueTextColor,
+  [vars$9.digitPadding]: '0',
+  [vars$9.digitTextAlign]: 'center',
+  [vars$9.digitSpacing]: '4px',
+  [vars$9.hostWidth]: refs.width,
+  [vars$9.digitOutlineColor]: 'transparent',
+  [vars$9.digitOutlineWidth]: refs.outlineWidth,
+  [vars$9.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$9.digitSize]: refs.inputHeight,
 
   _hideCursor: {
-    [vars$8.digitCaretTextColor]: 'transparent',
+    [vars$9.digitCaretTextColor]: 'transparent',
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$8
+  vars: vars$9
 });
 
 const globalRefs$2 = getThemeRefs(globals);
-const vars$7 = LoaderLinearClass.cssVarList;
+const vars$8 = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$7.hostDisplay]: 'inline-block',
-  [vars$7.hostWidth]: '100%',
+  [vars$8.hostDisplay]: 'inline-block',
+  [vars$8.hostWidth]: '100%',
 
-  [vars$7.barColor]: globalRefs$2.colors.surface.contrast,
-  [vars$7.barWidth]: '20%',
+  [vars$8.barColor]: globalRefs$2.colors.surface.contrast,
+  [vars$8.barWidth]: '20%',
 
-  [vars$7.barBackgroundColor]: globalRefs$2.colors.surface.main,
-  [vars$7.barBorderRadius]: '4px',
+  [vars$8.barBackgroundColor]: globalRefs$2.colors.surface.main,
+  [vars$8.barBorderRadius]: '4px',
 
-  [vars$7.animationDuration]: '2s',
-  [vars$7.animationTimingFunction]: 'linear',
-  [vars$7.animationIterationCount]: 'infinite',
-  [vars$7.verticalPadding]: '0.25em',
+  [vars$8.animationDuration]: '2s',
+  [vars$8.animationTimingFunction]: 'linear',
+  [vars$8.animationIterationCount]: 'infinite',
+  [vars$8.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$7.barHeight]: '2px' },
-    sm: { [vars$7.barHeight]: '4px' },
-    md: { [vars$7.barHeight]: '6px' },
-    lg: { [vars$7.barHeight]: '8px' },
+    xs: { [vars$8.barHeight]: '2px' },
+    sm: { [vars$8.barHeight]: '4px' },
+    md: { [vars$8.barHeight]: '6px' },
+    lg: { [vars$8.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$7.barColor]: globalRefs$2.colors.primary.main,
+      [vars$8.barColor]: globalRefs$2.colors.primary.main,
     },
     secondary: {
-      [vars$7.barColor]: globalRefs$2.colors.secondary.main,
+      [vars$8.barColor]: globalRefs$2.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$7.hostDisplay]: 'none',
+    [vars$8.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$7
+  vars: vars$8
 });
 
 const globalRefs$1 = getThemeRefs(globals);
@@ -6831,7 +7158,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$m
+  componentName$o
 );
 
 const loaderRadial = {
@@ -6860,7 +7187,7 @@ const loaderRadial = {
     [compVars.hostDisplay]: 'none',
   },
 };
-const vars$6 = {
+const vars$7 = {
   ...compVars,
   ...helperVars,
 };
@@ -6868,43 +7195,43 @@ const vars$6 = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$6
+  vars: vars$7
 });
 
 const globalRefs = getThemeRefs(globals);
-const vars$5 = ComboBoxClass.cssVarList;
+const vars$6 = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$5.hostWidth]: refs.width,
-  [vars$5.fontSize]: refs.fontSize,
-  [vars$5.fontFamily]: refs.fontFamily,
-  [vars$5.labelTextColor]: refs.labelTextColor,
-  [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$5.inputBorderColor]: refs.borderColor,
-  [vars$5.inputBorderWidth]: refs.borderWidth,
-  [vars$5.inputBorderStyle]: refs.borderStyle,
-  [vars$5.inputBorderRadius]: refs.borderRadius,
-  [vars$5.inputOutlineColor]: refs.outlineColor,
-  [vars$5.inputOutlineOffset]: refs.outlineOffset,
-  [vars$5.inputOutlineWidth]: refs.outlineWidth,
-  [vars$5.inputOutlineStyle]: refs.outlineStyle,
-  [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$5.inputValueTextColor]: refs.valueTextColor,
-  [vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$5.inputBackgroundColor]: refs.backgroundColor,
-  [vars$5.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$5.inputHeight]: refs.inputHeight,
-  [vars$5.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
-  [vars$5.inputDropdownButtonCursor]: 'pointer',
-  [vars$5.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$5.inputDropdownButtonOffset]: globalRefs.spacing.xs,
+  [vars$6.hostWidth]: refs.width,
+  [vars$6.fontSize]: refs.fontSize,
+  [vars$6.fontFamily]: refs.fontFamily,
+  [vars$6.labelTextColor]: refs.labelTextColor,
+  [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$6.inputBorderColor]: refs.borderColor,
+  [vars$6.inputBorderWidth]: refs.borderWidth,
+  [vars$6.inputBorderStyle]: refs.borderStyle,
+  [vars$6.inputBorderRadius]: refs.borderRadius,
+  [vars$6.inputOutlineColor]: refs.outlineColor,
+  [vars$6.inputOutlineOffset]: refs.outlineOffset,
+  [vars$6.inputOutlineWidth]: refs.outlineWidth,
+  [vars$6.inputOutlineStyle]: refs.outlineStyle,
+  [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$6.inputValueTextColor]: refs.valueTextColor,
+  [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$6.inputBackgroundColor]: refs.backgroundColor,
+  [vars$6.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$6.inputHeight]: refs.inputHeight,
+  [vars$6.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
+  [vars$6.inputDropdownButtonCursor]: 'pointer',
+  [vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$6.inputDropdownButtonOffset]: globalRefs.spacing.xs,
 
   _readonly: {
-    [vars$5.inputDropdownButtonCursor]: 'default',
+    [vars$6.inputDropdownButtonCursor]: 'default',
   },
 
-  [vars$5.overlay.minHeight]: '400px',
-  [vars$5.overlay.margin]: '0 auto',
+  [vars$6.overlay.minHeight]: '400px',
+  [vars$6.overlay.margin]: '0 auto',
 
   // [vars.overlayCursor]: 'pointer',
   // [vars.overlayBackground]: globalRefs.colors.surface.light,
@@ -6915,23 +7242,58 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$5
+  vars: vars$6
 });
 
-const vars$4 = ImageClass.cssVarList;
+const vars$5 = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$4
+  vars: vars$5
 });
 
-const vars$3 = PhoneFieldClass.cssVarList;
+const vars$4 = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$3.hostWidth]: refs.width,
+  [vars$4.hostWidth]: refs.width,
+  [vars$4.fontSize]: refs.fontSize,
+  [vars$4.fontFamily]: refs.fontFamily,
+  [vars$4.labelTextColor]: refs.labelTextColor,
+  [vars$4.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$4.inputValueTextColor]: refs.valueTextColor,
+  [vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$4.inputBorderStyle]: refs.borderStyle,
+  [vars$4.inputBorderWidth]: refs.borderWidth,
+  [vars$4.inputBorderColor]: refs.borderColor,
+  [vars$4.inputBorderRadius]: refs.borderRadius,
+  [vars$4.inputOutlineStyle]: refs.outlineStyle,
+  [vars$4.inputOutlineWidth]: refs.outlineWidth,
+  [vars$4.inputOutlineColor]: refs.outlineColor,
+  [vars$4.inputOutlineOffset]: refs.outlineOffset,
+  [vars$4.phoneInputWidth]: refs.minWidth,
+  [vars$4.countryCodeInputWidth]: '5em',
+  [vars$4.countryCodeDropdownWidth]: '20em',
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$4
+});
+
+const vars$3 = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$3.hostWidth]: '16em',
+  [vars$3.hostMinWidth]: refs.minWidth,
   [vars$3.fontSize]: refs.fontSize,
   [vars$3.fontFamily]: refs.fontFamily,
   [vars$3.labelTextColor]: refs.labelTextColor,
@@ -6947,18 +7309,14 @@ const phoneField = {
   [vars$3.inputOutlineWidth]: refs.outlineWidth,
   [vars$3.inputOutlineColor]: refs.outlineColor,
   [vars$3.inputOutlineOffset]: refs.outlineOffset,
-  [vars$3.phoneInputWidth]: refs.minWidth,
-  [vars$3.countryCodeInputWidth]: '5em',
-  [vars$3.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$3.hostWidth]: refs.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$3
 });
 
@@ -7073,6 +7431,7 @@ const components = {
   comboBox: comboBox$1,
   image: image$1,
   phoneField: phoneField$1,
+  phoneInputBoxField: phoneInputBoxField$1,
   newPassword: newPassword$1,
   inputWrapper,
   uploadFile: uploadFile$1,
@@ -7088,7 +7447,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$o, components: vars };
+const themeVars = { globals: vars$p, components: vars };
 
-export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map