@descope/web-components-ui 1.0.78 → 1.0.80

package/dist/index.esm.js

@@ -559,7 +559,7 @@ const createProxy = ({
 		#dispatchFocus = createDispatchEvent.bind(this, 'focus')
 
 		constructor() {
-			super().attachShadow({ mode: 'open' }).innerHTML = `
+			super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
 			<style id="create-proxy">${isFunction(style) ? style() : style
 				}</style>
 			<${wrappedEleName}>
@@ -569,8 +569,6 @@ const createProxy = ({
 		`;
 		}
 
-		focus = () => this.baseElement.focus()
-
 		init() {
 			super.init?.();
 
@@ -582,30 +580,10 @@ const createProxy = ({
 				this.#dispatchFocus();
 			});
 
-			this.addEventListener('focus', (e) => {
-				// if we got a focus event we want to focus the proxy element
-				if (e.isTrusted) {
-					this.focus();
-				}
-			});
 
 			// this is needed for components that uses props, such as combo box
 			forwardProps(this, this.baseElement, includeForwardProps);
 
-			// `onkeydown` is set on `baseElement` support proper tab-index navigation
-			// this support is needed since both proxy host and element catch `focus`/`blur` event
-			// which causes faulty behavior.
-			// we need this to happen only when the proxy component is in the light DOM, 
-			// otherwise it will focus the nested proxy element
-			this.baseElement.onkeydown = (e) => {
-				if (e.shiftKey && e.keyCode === 9 && this.getRootNode() === document) {
-					this.removeAttribute('tabindex');
-					// We want to defer the action of setting the tab index back
-					// so it will happen after focusing the previous element
-					setTimeout(() => this.setAttribute('tabindex', '0'), 0);
-				}
-			};
-
 			syncAttrs(this.baseElement, this, {
 				excludeAttrs: excludeAttrsSync,
 				includeAttrs: includeAttrsSync
@@ -686,7 +664,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
 
   #setValidity() {
     const validity = this.getValidity();
-    this.#internals.setValidity(validity, this.getErrorMessage(validity));
+    this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
   }
 
   get validationMessage() {
@@ -709,9 +687,13 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
     return this.#internals.validity
   }
 
+  get validationTarget () {
+    return this.inputElement
+  }
+
   setCustomValidity(errorMessage) {
     if (errorMessage) {
-      this.#internals.setValidity({ customError: true }, errorMessage);
+      this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget);
     } else {
       this.#internals.setValidity({});
       this.#setValidity();
@@ -814,21 +796,6 @@ const proxyInputMixin = (superclass) =>
 			return this.inputElement.validity
 		}
 
-		reportValidityOnInternalInput() {
-			setTimeout(() => {
-				this.inputElement.focus();
-				this.inputElement.reportValidity();
-			});
-		}
-
-		// we want reportValidity to behave like form submission
-		reportValidity() {
-			if (!this.checkValidity()) {
-				this.setAttribute('invalid', 'true');
-				this.reportValidityOnInternalInput();
-			}
-		}
-
 		handleInternalInputErrorMessage() {
 			if (!this.inputElement.checkValidity()) {
 				this.inputElement.setCustomValidity(this.validationMessage);
@@ -870,31 +837,16 @@ const proxyInputMixin = (superclass) =>
 				}
 			});
 
-			this.addEventListener('focus', (e) => {
-				// when clicking on the form submit button and the input is invalid, we want it to appear as invalid
-				// this is a best effort, we cannot identify it for sure without listening to the form submission event
-				// this will also be triggered when the focus is moving from the submit button to the input by pressing TAB key
-				if (e.relatedTarget?.form && e.relatedTarget?.form === this.form && e.relatedTarget?.nodeName === 'BUTTON') {
-					if (!this.checkValidity()) {
-						this.setAttribute('invalid', 'true');
-					}
 
-					if (this.hasAttribute('invalid')) {
-						this.reportValidityOnInternalInput();
-					}
+			this.addEventListener('invalid', () => {
+				if (!this.checkValidity()) {
+					this.setAttribute('invalid', 'true');
 				}
+				this.#handleErrorMessage();
 			});
 
-			this.addEventListener('invalid', this.#handleErrorMessage);
-
 			this.handleInternalInputErrorMessage();
 
-			// this is needed in order to make sure the form input validation is working
-			// we do not want it to happen when the component is nested
-			if (!this.hasAttribute('tabindex') && this.getRootNode() === document) {
-				this.setAttribute('tabindex', 0);
-			}
-
 			// sync properties
 			propertyObserver(this, this.inputElement, 'value');
 			propertyObserver(this, this.inputElement, 'selectionStart');
@@ -902,30 +854,6 @@ const proxyInputMixin = (superclass) =>
 		}
 	};
 
-const focusMixin = (superclass) => class FocusMixinClass extends superclass {
-  // we want to block all native events, 
-  // so the input can control when to dispatch it based on its internal behavior
-  init() {
-		super.init?.();
-		
-    this.addEventListener('blur', (e) => {
-			e.isTrusted && e.stopImmediatePropagation();
-		});
-
-		this.addEventListener('focus', (e) => {
-			e.isTrusted && e.stopImmediatePropagation();
-		});
-
-		this.addEventListener('focusout', (e) => {
-			e.isTrusted && e.stopImmediatePropagation();
-		});
-
-		this.addEventListener('focusin', (e) => {
-			e.isTrusted && e.stopImmediatePropagation();
-		});
-  }
-};
-
 // this is needed because we might generate the same css vars names
 // e.g. "overlayColor" attribute in style mixin's mapping, 
 // will generate the same var as "color" attribute in portals's mapping 
@@ -1032,59 +960,76 @@ const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclas
 };
 
 const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
-  handleFocusEventsDispatching(focusableElements = []) {
-    let blurTimerId;
-
-    // in order to simulate blur on the input
-    // we are checking if focus on one of the other elements happened immediately after blur
-    // if not, the component is no longer focused and we should dispatch blur
-    focusableElements.forEach(ele => {
-      ele?.addEventListener('blur', (e) => {
+  init() {
+    this.#blockNativeEvents();
+
+    super.init?.();
+  }
+
+  // we want to block the native (trusted) events and control when these events are being dispatched
+  #blockNativeEvents() {
+    ['blur', 'focus', 'focusin', 'focusout'].forEach(event => {
+      this.addEventListener(event, (e) => {
+        e.isTrusted && e.target === this && e.stopImmediatePropagation();
+      });
+    });
+  }
+
+  handleFocusEventsDispatching(inputs) {
+    let timerId;
+
+    // in order to simulate blur & focusout on root input element
+    // we are checking if focus on one of the inner elements happened immediately after blur
+    // if not, the component is no longer focused and we should dispatch blur & focusout
+    inputs?.forEach(input => {
+      input?.addEventListener('focusout', (e) => {
         e.stopImmediatePropagation();
-        blurTimerId = setTimeout(() => {
-          blurTimerId = null;
+        timerId = setTimeout(() => {
+          timerId = null;
+
           createDispatchEvent.call(this, 'blur');
           createDispatchEvent.call(this, 'focusout', { bubbles: true });
         });
       });
 
-      // in order to simulate focus on the input
-      // we are holding a blur timer id and clearing it on blur
-      // if there is a timer id, it means that there was no blur on the input, so it's still focused
-      // otherwise, it was not focused before, and we need to dispatch a focus event
-      ele?.addEventListener('focus', (e) => {
+      // in order to simulate focus & focusin on the root input element
+      // we are holding a timer id and clearing it on focusin
+      // if there is a timer id, it means that the root input is still focused
+      // otherwise, it was not focused before, and we should dispatch focus & focusin
+      const onFocus = (e) => {
         e.stopImmediatePropagation();
-        clearTimeout(blurTimerId);
-        if (!blurTimerId) {
+        clearTimeout(timerId);
+        if (!timerId) {
           createDispatchEvent.call(this, 'focus');
           createDispatchEvent.call(this, 'focusin', { bubbles: true });
         }
-      });
+      };
+
+      // some components are not dispatching focusin but only focus
+      input?.addEventListener('focusin', onFocus);
+      input?.addEventListener('focus', onFocus);
     });
   }
 
   // we want to block the input events from propagating in case the value of the root input wasn't change
   // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
   // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
-  handleInputEventDispatching(inputElements) {
+  handleInputEventDispatching() {
     let previousRootComponentValue = this.value;
 
-    inputElements.forEach(input => {
-      input.addEventListener('input', (e) => {
-        // we are comparing the previous value to the new one,
-        // and if they have the same value, we are blocking the input event
-        if (previousRootComponentValue === this.value) {
-          e.stopImmediatePropagation();
-        } else {
-          previousRootComponentValue = this.value;
-        }
-      });
+    this.addEventListener('input', (e) => {
+      // we are comparing the previous value to the new one,
+      // and if they have the same value, we are blocking the input event
+      if (previousRootComponentValue === this.value) {
+        e.stopImmediatePropagation();
+      } else {
+        previousRootComponentValue = this.value;
+      }
     });
-
   }
 };
 
-const componentName$l = getComponentName('button');
+const componentName$n = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -1107,7 +1052,7 @@ const iconStyles = `
 	}
 `;
 
-const { label: label$2, host: host$4 } = {
+const { label: label$3, host: host$7 } = {
 	label: { selector: '::part(label)' },
 	host: { selector: () => ':host' }
 };
@@ -1117,16 +1062,16 @@ const Button = compose(
 		mappings: {
 			backgroundColor: {},
 			borderRadius: {},
-			color: label$2,
+			color: label$3,
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
 			fontSize: {},
 			height: {},
-			width: host$4,
+			width: host$7,
 			cursor: {},
-			padding: label$2,
-			textDecoration: label$2
+			padding: label$3,
+			textDecoration: label$3
 		}
 	}),
 	draggableMixin,
@@ -1138,7 +1083,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$l
+		componentName: componentName$n
 	})
 );
 
@@ -1175,9 +1120,9 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$l, Button);
+customElements.define(componentName$n, Button);
 
-const componentName$k = getComponentName('checkbox');
+const componentName$m = getComponentName('checkbox');
 
 const Checkbox = compose(
 	createStyleMixin({
@@ -1203,17 +1148,17 @@ const Checkbox = compose(
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$k
+		componentName: componentName$m
 	})
 );
 
-customElements.define(componentName$k, Checkbox);
+customElements.define(componentName$m, Checkbox);
 
-const componentName$j = getComponentName('loader-linear');
+const componentName$l = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
 	static get componentName() {
-		return componentName$j;
+		return componentName$l;
 	}
 	constructor() {
 		super();
@@ -1250,13 +1195,13 @@ const selectors$4 = {
 	host: { selector: () => ':host' }
 };
 
-const { root: root$1, after: after$1, host: host$3 } = selectors$4;
+const { root: root$1, after: after$1, host: host$6 } = selectors$4;
 
 const LoaderLinear = compose(
 	createStyleMixin({
 		mappings: {
 			display: root$1,
-			width: host$3,
+			width: host$6,
 			height: [root$1, after$1],
 			borderRadius: [root$1, after$1],
 			surfaceColor: [{ property: 'background-color' }],
@@ -1271,11 +1216,11 @@ const LoaderLinear = compose(
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$j, LoaderLinear);
+customElements.define(componentName$l, LoaderLinear);
 
-const componentName$i = getComponentName('loader-radial');
+const componentName$k = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1321,11 +1266,11 @@ const LoaderRadial = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$i, LoaderRadial);
+customElements.define(componentName$k, LoaderRadial);
 
-const componentName$h = getComponentName('container');
+const componentName$j = getComponentName('container');
 
-class RawContainer extends createBaseClass({componentName: componentName$h, baseSelector: ':host > slot'}) {
+class RawContainer extends createBaseClass({componentName: componentName$j, baseSelector: ':host > slot'}) {
 	constructor() {
 		super();
 
@@ -1381,26 +1326,26 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$h, Container);
+customElements.define(componentName$j, Container);
 
-const componentName$g = getComponentName('date-picker');
+const componentName$i = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$g,
+		componentName: componentName$i,
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-date-picker',
 		style: ``
 	})
 );
 
-customElements.define(componentName$g, DatePicker);
+customElements.define(componentName$i, DatePicker);
 
-const componentName$f = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
+const componentName$h = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1454,7 +1399,7 @@ const selectors$3 = {
 	host: { selector: () => ':host' },
 };
 
-const { root, before, after, text: text$2, host: host$2 } = selectors$3;
+const { root, before, after, text: text$2, host: host$5 } = selectors$3;
 
 const Divider = compose(
 	createStyleMixin({
@@ -1465,8 +1410,8 @@ const Divider = compose(
 			alignSelf: root,
 			flexDirection: root,
 			textPadding: { ...text$2, property: 'padding' },
-			width: host$2,
-			padding: host$2,
+			width: host$5,
+			padding: host$5,
 			backgroundColor: [before, after],
 			opacity: [before, after],
 			textWidth: { ...text$2, property: 'width' },
@@ -1478,9 +1423,9 @@ const Divider = compose(
 	componentNameValidationMixin
 )(RawDivider);
 
-const componentName$e = getComponentName('text');
+const componentName$g = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -1522,9 +1467,9 @@ const Text = compose(
 	componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$e, Text);
+customElements.define(componentName$g, Text);
 
-customElements.define(componentName$f, Divider);
+customElements.define(componentName$h, Divider);
 
 const selectors$2 = {
 	label: '::part(label)',
@@ -1569,9 +1514,9 @@ var textFieldMappings = {
 	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
 };
 
-const componentName$d = getComponentName('email-field');
+const componentName$f = getComponentName('email-field');
 
-let overrides$5 = ``;
+let overrides$6 = ``;
 
 const EmailField = compose(
 	createStyleMixin({
@@ -1586,13 +1531,13 @@ const EmailField = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-email-field',
-		style: () => overrides$5,
+		style: () => overrides$6,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$d
+		componentName: componentName$f
 	})
 );
 
-overrides$5 = `
+overrides$6 = `
 	:host {
 		display: inline-block;
 	}
@@ -1632,10 +1577,10 @@ overrides$5 = `
 	}
 `;
 
-customElements.define(componentName$d, EmailField);
+customElements.define(componentName$f, EmailField);
 
-const componentName$c = getComponentName('link');
-class RawLink extends createBaseClass({ componentName: componentName$c, baseSelector: ':host a' }) {
+const componentName$e = getComponentName('link');
+class RawLink extends createBaseClass({ componentName: componentName$e, baseSelector: ':host a' }) {
 	constructor() {
 		super();
 		document.createElement('template');
@@ -1678,12 +1623,12 @@ const selectors$1 = {
 	text: { selector: () => Text.componentName }
 };
 
-const { anchor, text: text$1, host: host$1, wrapper } = selectors$1;
+const { anchor, text: text$1, host: host$4, wrapper } = selectors$1;
 
 const Link = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$1,
+			width: host$4,
 			textAlign: wrapper,
 			color: [anchor, { ...text$1, property: Text.cssVarList.color }],
 			cursor: anchor,
@@ -1696,14 +1641,14 @@ const Link = compose(
 	componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$c, Link);
+customElements.define(componentName$e, Link);
 
-const componentName$b = getComponentName('logo');
+const componentName$d = getComponentName('logo');
 
 let style;
 const getStyle = () => style;
 
-class RawLogo extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
+class RawLogo extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1741,11 +1686,11 @@ style = `
 }
 `;
 
-customElements.define(componentName$b, Logo);
+customElements.define(componentName$d, Logo);
 
-const componentName$a = getComponentName('number-field');
+const componentName$c = getComponentName('number-field');
 
-let overrides$4 = ``;
+let overrides$5 = ``;
 
 const NumberField = compose(
 	createStyleMixin({
@@ -1760,13 +1705,13 @@ const NumberField = compose(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-number-field',
-		style: () => overrides$4,
+		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$a
+		componentName: componentName$c
 	})
 );
 
-overrides$4 = `
+overrides$5 = `
 	:host {
 		display: inline-block;
 	}
@@ -1806,10 +1751,9 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$a, NumberField);
+customElements.define(componentName$c, NumberField);
 
 const createBaseInputClass = (...args) => compose(
-  focusMixin,
   inputValidationMixin,
   changeMixin,
   readOnlyMixin,
@@ -1831,7 +1775,7 @@ const getSanitizedCharacters = (str) => {
 	return [...pin]; // creating array of chars
 };
 
-const componentName$9 = getComponentName('passcode-internal');
+const componentName$b = getComponentName('passcode-internal');
 
 const observedAttributes$1 = [
 	'digits'
@@ -1845,15 +1789,15 @@ const forwardAttributes = [
 	'readonly'
 ];
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
 
-class PasscodeInternal extends BaseInputClass$1 {
+class PasscodeInternal extends BaseInputClass$2 {
 	static get observedAttributes() {
-		return observedAttributes$1.concat(BaseInputClass$1.observedAttributes || []);
+		return observedAttributes$1.concat(BaseInputClass$2.observedAttributes || []);
 	}
 
 	static get componentName() {
-		return componentName$9;
+		return componentName$b;
 	}
 
 	#dispatchBlur = createDispatchEvent.bind(this, 'blur')
@@ -2002,7 +1946,7 @@ class PasscodeInternal extends BaseInputClass$1 {
 		});
 
 		this.handleFocusEventsDispatching(this.inputs);
-		this.handleInputEventDispatching(this.inputs);
+		this.handleInputEventDispatching();
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {
@@ -2019,13 +1963,13 @@ class PasscodeInternal extends BaseInputClass$1 {
 	}
 }
 
-const componentName$8 = getComponentName('text-field');
+const componentName$a = getComponentName('text-field');
 
-let overrides$3 = ``;
+let overrides$4 = ``;
 
 const observedAttrs = ['type'];
 
-const customMixin$2 = (superclass) =>
+const customMixin$3 = (superclass) =>
 	class TextFieldClass extends superclass {
 		static get observedAttributes() {
 			return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2052,18 +1996,18 @@ const TextField = compose(
 	draggableMixin,
 	proxyInputMixin,
 	componentNameValidationMixin,
-	customMixin$2
+	customMixin$3
 )(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides$3,
+		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$8
+		componentName: componentName$a
 	})
 );
 
-overrides$3 = `
+overrides$4 = `
 	:host {
 		display: inline-block;
 		--vaadin-field-default-width: auto;
@@ -2116,9 +2060,9 @@ overrides$3 = `
 	}
 `;
 
-const componentName$7 = getComponentName('passcode');
+const componentName$9 = getComponentName('passcode');
 
-const customMixin$1 = (superclass) =>
+const customMixin$2 = (superclass) =>
 	class PasscodeClass extends superclass {
 		constructor() {
 			super();
@@ -2133,17 +2077,17 @@ const customMixin$1 = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-			<${componentName$9} 
+			<${componentName$b} 
 				bordered="true" 
 				name="code" 
 				tabindex="-1"
 				slot="input"
-			></${componentName$9}>
+			></${componentName$b}>
 			`;
 
 			this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(componentName$9);
+			this.inputElement = this.shadowRoot.querySelector(componentName$b);
 
 			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
 		}
@@ -2152,7 +2096,7 @@ const customMixin$1 = (superclass) =>
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
-const { digitField, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, focusedValidDigitField } = {
+const { digitField, label: label$2, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
 	focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
 	digitField: { selector: () => TextField.componentName },
 	label: { selector: '> label' },
@@ -2174,7 +2118,7 @@ const Passcode = compose(
 				// ideally, this would be part of the text field
 				{ ...internalWrapper, property: 'padding' }
 			],
-			color: [restTextFieldMappings.color, label$1, requiredIndicator$1],
+			color: [restTextFieldMappings.color, label$2, requiredIndicator$2],
 			padding: { ...digitField, property: textVars$1.padding },
 			margin: { ...digitField, property: textVars$1.margin },
 			textAlign: { ...digitField, property: textVars$1.textAlign },
@@ -2186,7 +2130,7 @@ const Passcode = compose(
 	draggableMixin,
 	proxyInputMixin,
 	componentNameValidationMixin,
-	customMixin$1
+	customMixin$2
 )(
 	createProxy({
 		slots: [],
@@ -2249,30 +2193,51 @@ const Passcode = compose(
 		}
     `,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$7
+		componentName: componentName$9
 	})
 );
 
-customElements.define(componentName$8, TextField);
+customElements.define(componentName$a, TextField);
 
-customElements.define(componentName$9, PasscodeInternal);
+customElements.define(componentName$b, PasscodeInternal);
 
-customElements.define(componentName$7, Passcode);
+customElements.define(componentName$9, Passcode);
 
-const componentName$6 = getComponentName('password-field');
+const componentName$8 = getComponentName('password-field');
 
-let overrides$2 = ``;
+let overrides$3 = ``;
+
+const { host: host$3, inputWrapper: inputWrapper$1, inputElement, inputElementPlaceholder, revealButton, label: label$1, requiredIndicator: requiredIndicator$1 } = {
+	host: () => ':host',
+	inputWrapper: { selector: '::part(input-field)' },
+	inputElement: { selector: '> input' },
+	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
+	revealButton: { selector: 'vaadin-password-field-button' },
+	label: { selector: '> label' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
+};
 
 const PasswordField = compose(
 	createStyleMixin({
 		mappings: {
-			...textFieldMappings,
-			revealCursor: [
-				{
-					selector: '::part(reveal-button)::before',
-					property: 'cursor'
-				}
-			]
+			wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
+			wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
+			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
+			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
+			labelTextColor: [
+				{ ...label$1, property: 'color' },
+				{ ...requiredIndicator$1, property: 'color' }
+			],
+			inputTextColor: [{ ...inputElement, property: 'color' }],
+			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+			fontSize: [{}, host$3],
+			height: inputWrapper$1,
+			padding: inputWrapper$1,
+			pointerCursor: [
+				{ ...revealButton, property: 'cursor' },
+				{ ...label$1, property: 'cursor' },
+				{ ...requiredIndicator$1, property: 'cursor' }
+			],
 		}
 	}),
 	draggableMixin,
@@ -2282,57 +2247,36 @@ const PasswordField = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-password-field',
-		style: () => overrides$2,
+		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$6
+		componentName: componentName$8
 	})
 );
 
-overrides$2 = `
+overrides$3 = `
 	:host {
 		display: inline-block;
 	}
 	vaadin-password-field {
-		margin: 0;
+		width: 100%;
 		padding: 0;
 	}
 	vaadin-password-field::part(input-field) {
-		overflow: hidden;
-	}
-	vaadin-password-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-password-field input:-webkit-autofill,
-	vaadin-password-field input:-webkit-autofill::first-line,
-	vaadin-password-field input:-webkit-autofill:hover,
-	vaadin-password-field input:-webkit-autofill:active,
-	vaadin-password-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${PasswordField.cssVarList.color});
-		box-shadow: 0 0 0 var(${PasswordField.cssVarList.height}) var(${PasswordField.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-password-field > label,
-	vaadin-password-field::part(input-field) {
-		cursor: pointer;
-		color: var(${PasswordField.cssVarList.color});
+		background: transparent;
 	}
-	vaadin-password-field::part(input-field):focus {
-		cursor: text;
-	}
-	vaadin-password-field[required]::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-		color: var(${PasswordField.cssVarList.color});
-	}
-	vaadin-password-field[readonly]::part(input-field)::after {
-		border: 0 solid;
+	vaadin-password-field::part(input-field)::after {
+		opacity: 0;
+	}	
+	vaadin-password-field::before {
+		height: initial;
 	}
 `;
 
-customElements.define(componentName$6, PasswordField);
+customElements.define(componentName$8, PasswordField);
 
-const componentName$5 = getComponentName('switch-toggle');
+const componentName$7 = getComponentName('switch-toggle');
 
-let overrides$1 = ``;
+let overrides$2 = ``;
 
 const SwitchToggle = compose(
 	createStyleMixin({
@@ -2348,13 +2292,13 @@ const SwitchToggle = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-checkbox',
-		style: () => overrides$1,
+		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$5
+		componentName: componentName$7
 	})
 );
 
-overrides$1 = `
+overrides$2 = `
 	:host {
 		display: inline-block;
 	}
@@ -2408,9 +2352,9 @@ overrides$1 = `
 	}
 `;
 
-customElements.define(componentName$5, SwitchToggle);
+customElements.define(componentName$7, SwitchToggle);
 
-const componentName$4 = getComponentName('text-area');
+const componentName$6 = getComponentName('text-area');
 
 const selectors = {
 	label: '::part(label)',
@@ -2419,7 +2363,7 @@ const selectors = {
 	host: () => ':host'
 };
 
-let overrides = ``;
+let overrides$1 = ``;
 
 const TextArea = compose(
 	createStyleMixin({
@@ -2446,13 +2390,13 @@ const TextArea = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-text-area',
-		style: () => overrides,
+		style: () => overrides$1,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$4
+		componentName: componentName$6
 	})
 );
 
-overrides = `
+overrides$1 = `
 	:host {
 		display: inline-block;
 	}
@@ -2474,13 +2418,13 @@ overrides = `
 	}	
 `;
 
-customElements.define(componentName$4, TextArea);
+customElements.define(componentName$6, TextArea);
 
 const observedAttributes = ['src', 'alt'];
 
-const componentName$3 = getComponentName('image');
+const componentName$5 = getComponentName('image');
 
-const BaseClass = createBaseClass({ componentName: componentName$3, baseSelector: ':host > img' });
+const BaseClass = createBaseClass({ componentName: componentName$5, baseSelector: ':host > img' });
 class RawImage extends BaseClass {
 	static get observedAttributes() {
 		return observedAttributes.concat(BaseClass.observedAttributes || []);
@@ -2520,9 +2464,9 @@ const Image = compose(
 	draggableMixin,
 )(RawImage);
 
-customElements.define(componentName$3, Image);
+customElements.define(componentName$5, Image);
 
-const componentName$2 = getComponentName('combo-box');
+const componentName$4 = getComponentName('combo-box');
 
 
 const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
@@ -2575,7 +2519,7 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 	}
 };
 
-const { host, input, placeholder, toggle } = {
+const { host: host$2, input, placeholder, toggle } = {
 	host: { selector: () => ':host' },
 	input: { selector: '::part(input-field)' },
 	placeholder: { selector: '> input:placeholder-shown' },
@@ -2590,7 +2534,7 @@ const { host, input, placeholder, toggle } = {
 const ComboBox = compose(
 	createStyleMixin({
 		mappings: {
-			width: host,
+			width: host$2,
 			height: input,
 			padding: input,
 
@@ -2605,7 +2549,7 @@ const ComboBox = compose(
 			color: input,
 
 			// we apply font-size also on the host so we can set its width with em
-			fontSize: [{}, host],
+			fontSize: [{}, host$2],
 
 			placeholderColor: { ...placeholder, property: 'color' },
 
@@ -2665,12 +2609,12 @@ const ComboBox = compose(
 		// and reset items to an empty array, and opening the list box with no items
 		// to display.
 		excludeAttrsSync: ['tabindex', 'size'],
-		componentName: componentName$2,
+		componentName: componentName$4,
 		includeForwardProps: ['items', 'renderer']
 	})
 );
 
-customElements.define(componentName$2, ComboBox);
+customElements.define(componentName$4, ComboBox);
 
 var CountryCodes = [
 	{
@@ -3909,9 +3853,9 @@ const comboBoxItem = ({ code, dialCode, name: country }) => (`
 	</div>
 `);
 
-const componentName$1 = getComponentName('phone-field-internal');
+const componentName$3 = getComponentName('phone-field-internal');
 
-const commonAttrs = [
+const commonAttrs$1 = [
 	'disabled',
 	'size',
 	'bordered',
@@ -3924,15 +3868,15 @@ const mapAttrs = {
 	'phone-input-placeholder': 'placeholder',
 };
 
-const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs);
+const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
 
-class PhoneFieldInternal extends BaseInputClass {
+class PhoneFieldInternal extends BaseInputClass$1 {
 	static get observedAttributes() {
 		return [].concat(
-			BaseInputClass.observedAttributes || [],
-			inputRelatedAttrs,
+			BaseInputClass$1.observedAttributes || [],
+			inputRelatedAttrs$1,
 		);
 	}
 
@@ -4068,7 +4012,7 @@ class PhoneFieldInternal extends BaseInputClass {
 		});
 
 		this.handleFocusEventsDispatching(this.inputs);
-		this.handleInputEventDispatching(this.inputs);
+		this.handleInputEventDispatching();
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {
@@ -4078,10 +4022,10 @@ class PhoneFieldInternal extends BaseInputClass {
 			if (attrName === 'default-code' && newValue) {
 				this.handleDefaultCountryCode(newValue);
 			}
-			else if (inputRelatedAttrs.includes(attrName)) {
+			else if (inputRelatedAttrs$1.includes(attrName)) {
 				const attr = mapAttrs[attrName] || attrName;
 
-				if (commonAttrs.includes(attrName)) {
+				if (commonAttrs$1.includes(attrName)) {
 					this.inputs.forEach(input => input.setAttribute(attr, newValue));
 				}
 				else if (countryAttrs.includes(attrName)) {
@@ -4095,14 +4039,14 @@ class PhoneFieldInternal extends BaseInputClass {
 	}
 }
 
-customElements.define(componentName$1, PhoneFieldInternal);
+customElements.define(componentName$3, PhoneFieldInternal);
 
 const textVars = TextField.cssVarList;
 const comboVars = ComboBox.cssVarList;
 
-const componentName = getComponentName('phone-field');
+const componentName$2 = getComponentName('phone-field');
 
-const customMixin = (superclass) =>
+const customMixin$1 = (superclass) =>
 	class PhoneFieldClass extends superclass {
 		constructor() {
 			super();
@@ -4114,15 +4058,15 @@ const customMixin = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-				<${componentName$1} 
+				<${componentName$3} 
 					tabindex="-1"
 					slot="input"
-				></${componentName$1}>
+				></${componentName$3}>
       		`;
 
 			this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(componentName$1);
+			this.inputElement = this.shadowRoot.querySelector(componentName$3);
 
 			forwardAttrs(this.shadowRoot.host, this.inputElement, {
 				includeAttrs: [
@@ -4140,6 +4084,7 @@ const customMixin = (superclass) =>
 	};
 
 const {
+	host: host$1,
 	inputWrapper,
 	countryCodeInput,
 	phoneInput,
@@ -4147,6 +4092,7 @@ const {
 	requiredIndicator,
 	separator
 } = {
+	host: { selector: () => ':host' },
 	inputWrapper: { selector: '::part(input-field)' },
 	phoneInput: { selector: () => 'descope-text-field' },
 	countryCodeInput: { selector: () => 'descope-combo-box' },
@@ -4158,7 +4104,7 @@ const {
 const PhoneField = compose(
 	createStyleMixin({
 		mappings: {
-			componentWidth: { selector: () => ':host', property: 'width' },
+			componentWidth: { ...host$1, property: 'width' },
 
 			wrapperBorderStyle: [
 				{ ...inputWrapper, property: 'border-style' },
@@ -4199,7 +4145,7 @@ const PhoneField = compose(
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	customMixin,
+	customMixin$1,
 )(
 	createProxy({
 		slots: [],
@@ -4258,11 +4204,317 @@ const PhoneField = compose(
 			}
 		`,
 		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$2
+	})
+);
+
+customElements.define(componentName$2, PhoneField);
+
+const componentName$1 = getComponentName('new-password-internal');
+
+const componentName = getComponentName('new-password');
+
+const customMixin = (superclass) =>
+	class NewPasswordMixinClass extends superclass {
+		constructor() {
+			super();
+		}
+
+		init() {
+			super.init?.();
+
+			const template = document.createElement('template');
+
+			template.innerHTML = `
+			<${componentName$1} 
+				name="new-password" 
+				tabindex="-1"
+				slot="input"
+			></${componentName$1}>
+			`;
+
+			this.baseElement.appendChild(template.content.cloneNode(true));
+
+			this.inputElement = this.shadowRoot.querySelector(componentName$1);
+
+			forwardAttrs(this, this.inputElement, {
+				includeAttrs: [
+					'password-label',
+					'password-placeholder',
+					'confirm-label',
+					'confirm-placeholder',
+					'full-width',
+					'size',
+					'bordered',
+					'label',
+					'has-confirm',
+					'invalid',
+				]
+			});
+		}
+	};
+
+const { host, internalInputsWrapper } = {
+	host: { selector: () => ':host' },
+	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
+};
+const NewPassword = compose(
+	createStyleMixin({
+		mappings: {
+			componentWidth: { ...host, property: 'width' },
+			requiredContent: { ...host, property: 'content' },
+			inputLabelTextColor: {
+				selector: PasswordField.componentName,
+				property: PasswordField.cssVarList.labelTextColor
+			},
+			inputTextColor: {
+				selector: PasswordField.componentName,
+				property: PasswordField.cssVarList.inputTextColor
+			},
+			inputsGap: {...internalInputsWrapper, property: 'gap'}
+		}
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	customMixin,
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
 		componentName
 	})
 );
 
-customElements.define(componentName, PhoneField);
+const overrides = `
+	:host {
+		--vaadin-field-default-width: auto;
+		display: inline-block;
+	}
+	vaadin-text-field {
+		padding: 0;
+		width: 100%;
+		height: 100%;
+	}
+	vaadin-text-field::part(input-field) {
+		min-height: 0;
+		background: transparent;
+		overflow: hidden;
+		box-shadow: none;
+	}
+	vaadin-text-field::part(input-field)::after {
+		background: transparent;
+		opacity: 0;
+	}
+	descope-new-password-internal {
+		-webkit-mask-image: none;
+		padding: 0;
+		min-height: 0;
+		width: 100%;
+		height: 100%;		
+	}
+	descope-new-password-internal > .wrapper {
+		width: 100%;
+		height: 100%;
+		display: flex;
+    flex-direction: column;
+	}
+	descope-password-field {
+		display: block;
+		width: 100%;
+	}
+	descope-new-password-internal vaadin-password-field::before {
+		height: initial;
+	}
+`;
+
+const passwordAttrPrefixRegex = /^password-/;
+const confirmAttrPrefixRegex = /^confirm-/;
+
+const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
+
+const passwordInputAttrs = ['password-label', 'password-placeholder'];
+const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
+const commonAttrs = [
+	'disabled',
+	'bordered',
+	'size',
+	'full-width',
+	'maxlength',
+	'invalid',
+];
+
+const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
+
+const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
+
+class NewPasswordInternal extends BaseInputClass {
+	static get observedAttributes() {
+		return ['has-confirm'].concat(
+			BaseInputClass.observedAttributes || [],
+			inputRelatedAttrs,
+		);
+	}
+
+	constructor() {
+		super();
+
+		this.innerHTML = `
+			<div class="wrapper"></div>
+		`;
+
+		this.wrapperEle = this.querySelector('.wrapper');
+	}
+
+	get value() {
+		return this.passwordInput?.value || '';
+	}
+
+	set value(val) {
+		if (val === this.value) return;
+		this.value = val;
+	}
+
+	get hasConfirm() {
+		return this.getAttribute('has-confirm') === 'true';
+	}
+
+	getValidity() {
+		if (this.isRequired && !this.value) {
+			return { valueMissing: true };
+		}
+		if (this.hasConfirm && this.confirmInput && this.value !== this.confirmInput.value) {
+			return { patternMismatch: true };
+		}
+
+		const min = this.getAttribute('minlength');
+		const minVal = parseInt(min, 10) || 0;
+		const minValid = this.value.length >= minVal;
+		if (!minValid) {
+			return { tooShort: true }
+		}
+
+		return {}
+	};
+
+	init() {
+		this.addEventListener('focus', (e) => {
+			// we want to ignore focus events we are dispatching
+			if (e.isTrusted) {
+				this.passwordInput.focus();
+			}
+		});
+
+		super.init();
+		this.renderInputs(this.hasConfirm);
+	}
+
+	renderInputs(shouldRenderConfirm) {
+		let template = `<descope-password-field data-id="password"></descope-password-field>`;
+
+		if (shouldRenderConfirm) {
+			template += `<descope-password-field data-id="confirm"></descope-password-field>`;
+		}
+
+		this.wrapperEle.innerHTML = template;
+
+		this.passwordInput = this.querySelector('[data-id="password"]');
+		this.confirmInput = this.querySelector('[data-id="confirm"]');
+
+		this.inputs = [this.passwordInput, this.confirmInput];
+
+		this.initInputs();
+
+		// we are calling attributeChangedCallback with all the input related attributes
+		// in order to set it on the newly generated input
+		[...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach(attr => {
+			this.attributeChangedCallback(attr, null, this.getAttribute(attr));
+		});
+	}
+
+	// the inputs are not required but we still want it to have a required
+	// indicator in case the root component is required
+	handleIndicatorStyle() {
+		for (const input of this.inputs) {
+			const styleTag = document.createElement('style');
+			styleTag.innerHTML = `
+				:host::part(required-indicator)::after {
+					content: var(${NewPassword.cssVarList.requiredContent});
+				}
+				`;
+			input?.shadowRoot.appendChild(styleTag);
+		}
+	}
+
+	get isInvalid() {
+		return this.hasAttribute('invalid') && this.getAttribute('invalid') !== 'false'
+	}
+
+	// for some reason, Vaadin is removing the invalid attribute on several events, 
+	// e.g. focus, input, etc..., so we need to make sure the inputs will stay invalid
+	// if the root component is invalid
+	handleInputsInvalidAttribute() {
+		this.inputs.forEach(input => {
+			input && observeAttributes(input, (changedAttributes) => {
+				if (changedAttributes.includes('invalid')) {
+					const inputInvalidValue = input.getAttribute('invalid');
+					const rootInvalidValue = this.getAttribute('invalid');
+
+					if (this.isInvalid && rootInvalidValue !== inputInvalidValue) {
+						input.setAttribute('invalid', 'true');
+					}
+				}
+			}, {});
+		});
+	}
+
+	initInputs() {
+		this.handleIndicatorStyle();
+		this.handleInputsInvalidAttribute();
+		this.handleFocusEventsDispatching(this.inputs);
+	}
+
+	toggleBooleanAttribute(ele, name, value) {
+		value === null ?
+			ele?.removeAttribute(name) :
+			ele?.setAttribute(name, value);
+	}
+
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+		if (oldValue !== newValue) {
+			if (attrName === 'has-confirm') {
+				this.renderInputs(newValue !== null && newValue !== 'false');
+			}
+			else if (commonAttrs.includes(attrName)) {
+				this.inputs.forEach(
+					(input) => this.toggleBooleanAttribute(input, attrName, newValue)
+				);
+			}
+			else if (passwordInputAttrs.includes(attrName)) {
+				this.toggleBooleanAttribute(
+					this.passwordInput,
+					removeAttrPrefix(attrName, passwordAttrPrefixRegex),
+					newValue
+				);
+			}
+			else if (confirmInputAttrs.includes(attrName)) {
+				this.toggleBooleanAttribute(
+					this.confirmInput,
+					removeAttrPrefix(attrName, confirmAttrPrefixRegex),
+					newValue
+				);
+
+			}
+		}
+	}
+}
+
+customElements.define(componentName$1, NewPasswordInternal);
+
+customElements.define(componentName, NewPassword);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -4535,143 +4787,143 @@ var globals = {
 	fonts
 };
 
-const globalRefs$a = getThemeRefs(globals);
-const vars$f = Button.cssVarList;
+const globalRefs$c = getThemeRefs(globals);
+const vars$g = Button.cssVarList;
 
 const mode = {
-	primary: globalRefs$a.colors.primary,
-	secondary: globalRefs$a.colors.secondary,
-	success: globalRefs$a.colors.success,
-	error: globalRefs$a.colors.error,
-	surface: globalRefs$a.colors.surface
+	primary: globalRefs$c.colors.primary,
+	secondary: globalRefs$c.colors.secondary,
+	success: globalRefs$c.colors.success,
+	error: globalRefs$c.colors.error,
+	surface: globalRefs$c.colors.surface
 };
 
-const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$l);
+const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$n);
 
 const button = {
 	...helperTheme$2,
-	[vars$f.width]: 'fit-content',
+	[vars$g.width]: 'fit-content',
 	size: {
 		xs: {
-			[vars$f.height]: '10px',
-			[vars$f.fontSize]: '10px',
-			[vars$f.padding]: `0 ${globalRefs$a.spacing.xs}`
+			[vars$g.height]: '10px',
+			[vars$g.fontSize]: '10px',
+			[vars$g.padding]: `0 ${globalRefs$c.spacing.xs}`
 		},
 		sm: {
-			[vars$f.height]: '20px',
-			[vars$f.fontSize]: '10px',
-			[vars$f.padding]: `0 ${globalRefs$a.spacing.sm}`
+			[vars$g.height]: '20px',
+			[vars$g.fontSize]: '10px',
+			[vars$g.padding]: `0 ${globalRefs$c.spacing.sm}`
 		},
 		md: {
-			[vars$f.height]: '30px',
-			[vars$f.fontSize]: '14px',
-			[vars$f.padding]: `0 ${globalRefs$a.spacing.md}`
+			[vars$g.height]: '30px',
+			[vars$g.fontSize]: '14px',
+			[vars$g.padding]: `0 ${globalRefs$c.spacing.md}`
 		},
 		lg: {
-			[vars$f.height]: '40px',
-			[vars$f.fontSize]: '20px',
-			[vars$f.padding]: `0 ${globalRefs$a.spacing.lg}`
+			[vars$g.height]: '40px',
+			[vars$g.fontSize]: '20px',
+			[vars$g.padding]: `0 ${globalRefs$c.spacing.lg}`
 		},
 		xl: {
-			[vars$f.height]: '50px',
-			[vars$f.fontSize]: '25px',
-			[vars$f.padding]: `0 ${globalRefs$a.spacing.xl}`
+			[vars$g.height]: '50px',
+			[vars$g.fontSize]: '25px',
+			[vars$g.padding]: `0 ${globalRefs$c.spacing.xl}`
 		}
 	},
 
-	[vars$f.borderRadius]: globalRefs$a.radius.lg,
-	[vars$f.cursor]: 'pointer',
-	[vars$f.borderWidth]: '2px',
-	[vars$f.borderStyle]: 'solid',
-	[vars$f.borderColor]: 'transparent',
+	[vars$g.borderRadius]: globalRefs$c.radius.lg,
+	[vars$g.cursor]: 'pointer',
+	[vars$g.borderWidth]: '2px',
+	[vars$g.borderStyle]: 'solid',
+	[vars$g.borderColor]: 'transparent',
 
 	_fullWidth: {
-		[vars$f.width]: '100%'
+		[vars$g.width]: '100%'
 	},
 	_loading: {
-		[vars$f.cursor]: 'wait'
+		[vars$g.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$f.color]: helperRefs$2.contrast,
-			[vars$f.backgroundColor]: helperRefs$2.main,
+			[vars$g.color]: helperRefs$2.contrast,
+			[vars$g.backgroundColor]: helperRefs$2.main,
 			_hover: {
-				[vars$f.backgroundColor]: helperRefs$2.dark
+				[vars$g.backgroundColor]: helperRefs$2.dark
 			},
 			_loading: {
-				[vars$f.backgroundColor]: helperRefs$2.main
+				[vars$g.backgroundColor]: helperRefs$2.main
 			}
 		},
 		outline: {
-			[vars$f.color]: helperRefs$2.main,
-			[vars$f.borderColor]: helperRefs$2.main,
+			[vars$g.color]: helperRefs$2.main,
+			[vars$g.borderColor]: helperRefs$2.main,
 			_hover: {
-				[vars$f.color]: helperRefs$2.dark,
-				[vars$f.borderColor]: helperRefs$2.dark,
+				[vars$g.color]: helperRefs$2.dark,
+				[vars$g.borderColor]: helperRefs$2.dark,
 				_error: {
-					[vars$f.color]: helperRefs$2.error
+					[vars$g.color]: helperRefs$2.error
 				}
 			}
 		},
 		link: {
-			[vars$f.color]: helperRefs$2.main,
-			[vars$f.lineHeight]: helperRefs$2.height,
+			[vars$g.color]: helperRefs$2.main,
+			[vars$g.lineHeight]: helperRefs$2.height,
 			_hover: {
-				[vars$f.color]: helperRefs$2.main,
-				[vars$f.textDecoration]: 'underline'
+				[vars$g.color]: helperRefs$2.main,
+				[vars$g.textDecoration]: 'underline'
 			}
 		}
 	}
 };
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 
-const vars$e = TextField.cssVarList;
+const vars$f = TextField.cssVarList;
 
 const textField = (vars) => ({
 	size: {
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$9.spacing.xs}`
+			[vars.padding]: `0 ${globalRefs$b.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$9.spacing.sm}`
+			[vars.padding]: `0 ${globalRefs$b.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$9.spacing.md}`
+			[vars.padding]: `0 ${globalRefs$b.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '20px',
-			[vars.padding]: `0 ${globalRefs$9.spacing.lg}`
+			[vars.padding]: `0 ${globalRefs$b.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$9.spacing.xl}`
+			[vars.padding]: `0 ${globalRefs$b.spacing.xl}`
 		}
 	},
 
-	[vars.color]: globalRefs$9.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$9.colors.surface.main,
+	[vars.color]: globalRefs$b.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$b.colors.surface.main,
 
-	[vars.backgroundColor]: globalRefs$9.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$b.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$9.radius.sm,
+	[vars.borderRadius]: globalRefs$b.radius.sm,
 
 	_disabled: {
-		[vars.color]: globalRefs$9.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$9.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$9.colors.surface.main
+		[vars.color]: globalRefs$b.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$b.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$b.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -4681,28 +4933,79 @@ const textField = (vars) => ({
 	_focused: {
 		[vars.outlineWidth]: '2px',
 		[vars.outlineStyle]: 'solid',
-		[vars.outlineColor]: globalRefs$9.colors.surface.main
+		[vars.outlineColor]: globalRefs$b.colors.surface.main
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$9.colors.surface.main
+		[vars.borderColor]: globalRefs$b.colors.surface.main
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs$9.colors.error.main,
-		[vars.color]: globalRefs$9.colors.error.main,
-		[vars.outlineColor]: globalRefs$9.colors.error.light,
-		[vars.placeholderColor]: globalRefs$9.colors.error.light
+		[vars.borderColor]: globalRefs$b.colors.error.main,
+		[vars.color]: globalRefs$b.colors.error.main,
+		[vars.outlineColor]: globalRefs$b.colors.error.light,
+		[vars.placeholderColor]: globalRefs$b.colors.error.light
 	}
 });
 
-var textField$1 = textField(vars$e);
+var textField$1 = textField(vars$f);
+
+const globalRefs$a = getThemeRefs(globals);
 
-const vars$d = PasswordField.cssVarList;
+const vars$e = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars$d),
-	[vars$d.revealCursor]: 'pointer'
+	[vars$e.wrapperBorderStyle]: 'solid',
+	[vars$e.wrapperBorderWidth]: '1px',
+	[vars$e.wrapperBorderColor]: 'transparent',
+	[vars$e.wrapperBorderRadius]: globalRefs$a.radius.sm,
+
+	[vars$e.labelTextColor]: globalRefs$a.colors.surface.contrast,
+	[vars$e.inputTextColor]: globalRefs$a.colors.surface.contrast,
+	[vars$e.placeholderTextColor]: globalRefs$a.colors.surface.main,
+
+	[vars$e.pointerCursor]: 'pointer',
+
+	[vars$e.padding]: `0`,
+
+	size: {
+		xs: {
+			[vars$e.height]: '14px',
+			[vars$e.fontSize]: '8px',
+		},
+		sm: {
+			[vars$e.height]: '20px',
+			[vars$e.fontSize]: '10px',
+		},
+		md: {
+			[vars$e.height]: '30px',
+			[vars$e.fontSize]: '14px',
+		},
+		lg: {
+			[vars$e.height]: '40px',
+			[vars$e.fontSize]: '20px',
+		},
+		xl: {
+			[vars$e.height]: '50px',
+			[vars$e.fontSize]: '25px',
+		}
+	},
+
+	_bordered: {
+		[vars$e.padding]: `0 0.5em`,
+		[vars$e.wrapperBorderColor]: globalRefs$a.colors.surface.main
+	},
+
+	_fullWidth: {
+		[vars$e.width]: '100%'
+	},
+
+	_invalid: {
+		[vars$e.labelTextColor]: globalRefs$a.colors.error.main,
+		[vars$e.inputTextColor]: globalRefs$a.colors.error.main,
+		[vars$e.placeholderTextColor]: globalRefs$a.colors.error.light,
+		[vars$e.wrapperBorderColor]: globalRefs$a.colors.error.main
+	},
 };
 
 const numberField = {
@@ -4713,61 +5016,61 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$8 = getThemeRefs(globals);
-const vars$c = TextArea.cssVarList;
+const globalRefs$9 = getThemeRefs(globals);
+const vars$d = TextArea.cssVarList;
 
 const textArea = {
-	[vars$c.width]: '100%',
-	[vars$c.color]: globalRefs$8.colors.primary.main,
-	[vars$c.backgroundColor]: globalRefs$8.colors.surface.light,
-	[vars$c.resize]: 'vertical',
+	[vars$d.width]: '100%',
+	[vars$d.color]: globalRefs$9.colors.primary.main,
+	[vars$d.backgroundColor]: globalRefs$9.colors.surface.light,
+	[vars$d.resize]: 'vertical',
 
-	[vars$c.borderRadius]: globalRefs$8.radius.sm,
-	[vars$c.borderWidth]: '1px',
-	[vars$c.borderStyle]: 'solid',
-	[vars$c.borderColor]: 'transparent',
-	[vars$c.outlineWidth]: '2px',
-	[vars$c.outlineStyle]: 'solid',
+	[vars$d.borderRadius]: globalRefs$9.radius.sm,
+	[vars$d.borderWidth]: '1px',
+	[vars$d.borderStyle]: 'solid',
+	[vars$d.borderColor]: 'transparent',
+	[vars$d.outlineWidth]: '2px',
+	[vars$d.outlineStyle]: 'solid',
 
 
 	_bordered: {
-		[vars$c.borderColor]: globalRefs$8.colors.surface.main
+		[vars$d.borderColor]: globalRefs$9.colors.surface.main
 	},
 
 	_focused: {
-		[vars$c.outlineColor]: globalRefs$8.colors.surface.main
+		[vars$d.outlineColor]: globalRefs$9.colors.surface.main
 	},
 
 	_fullWidth: {
-		[vars$c.width]: '100%'
+		[vars$d.width]: '100%'
 	},
 
 	_disabled: {
-		[vars$c.cursor]: 'not-allowed'
+		[vars$d.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
-		[vars$c.outlineColor]: globalRefs$8.colors.error.main
+		[vars$d.outlineColor]: globalRefs$9.colors.error.main
 	}
 };
 
-const vars$b = Checkbox.cssVarList;
+const vars$c = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$b.cursor]: 'pointer',
-	[vars$b.width]: 'fit-content'
+	[vars$c.cursor]: 'pointer',
+	[vars$c.width]: 'fit-content'
 };
 
-const vars$a = SwitchToggle.cssVarList;
+const vars$b = SwitchToggle.cssVarList;
 
 const swtichToggle = {
-	[vars$a.width]: '70px',
-	[vars$a.cursor]: [{}, { selector: '> label' }]
+	[vars$b.width]: '70px',
+	[vars$b.cursor]: [{}, { selector: '> label' }]
 };
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 
-const vars$9 = Container.cssVarList;
+const vars$a = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -4790,31 +5093,31 @@ const [helperTheme$1, helperRefs$1, helperVars] =
 
 const container = {
 	...helperTheme$1,
-	[vars$9.width]: '100%',
+	[vars$a.width]: '100%',
 	verticalPadding: {
-		sm: { [vars$9.verticalPadding]: '5px' },
-		md: { [vars$9.verticalPadding]: '10px' },
-		lg: { [vars$9.verticalPadding]: '20px' },
+		sm: { [vars$a.verticalPadding]: '5px' },
+		md: { [vars$a.verticalPadding]: '10px' },
+		lg: { [vars$a.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars$9.horizontalPadding]: '5px' },
-		md: { [vars$9.horizontalPadding]: '10px' },
-		lg: { [vars$9.horizontalPadding]: '20px' },
+		sm: { [vars$a.horizontalPadding]: '5px' },
+		md: { [vars$a.horizontalPadding]: '10px' },
+		lg: { [vars$a.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars$9.flexDirection]: 'row',
-			[vars$9.alignItems]: helperRefs$1.verticalAlignment,
-			[vars$9.justifyContent]: helperRefs$1.horizontalAlignment,
+			[vars$a.flexDirection]: 'row',
+			[vars$a.alignItems]: helperRefs$1.verticalAlignment,
+			[vars$a.justifyContent]: helperRefs$1.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars$9.flexDirection]: 'column',
-			[vars$9.alignItems]: helperRefs$1.horizontalAlignment,
-			[vars$9.justifyContent]: helperRefs$1.verticalAlignment,
+			[vars$a.flexDirection]: 'column',
+			[vars$a.alignItems]: helperRefs$1.horizontalAlignment,
+			[vars$a.justifyContent]: helperRefs$1.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -4823,398 +5126,398 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars$9.gap]: '10px'
+			[vars$a.gap]: '10px'
 		},
 		md: {
-			[vars$9.gap]: '20px'
+			[vars$a.gap]: '20px'
 		},
 		lg: {
-			[vars$9.gap]: '30px'
+			[vars$a.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
+			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
 		},
 		md: {
-			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.md} ${helperRefs$1.shadowColor}`
+			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
 		},
 		lg: {
-			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
+			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
 		},
 		xl: {
-			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
+			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
+			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$9.borderRadius]: globalRefs$7.radius.sm
+			[vars$a.borderRadius]: globalRefs$8.radius.sm
 		},
 		md: {
-			[vars$9.borderRadius]: globalRefs$7.radius.md
+			[vars$a.borderRadius]: globalRefs$8.radius.md
 		},
 		lg: {
-			[vars$9.borderRadius]: globalRefs$7.radius.lg
+			[vars$a.borderRadius]: globalRefs$8.radius.lg
 		},
 	}
 };
 
-const vars$8 = Logo.cssVarList;
+const vars$9 = Logo.cssVarList;
 
 const logo = {
-	[vars$8.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+	[vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
 };
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 
-const vars$7 = Text.cssVarList;
+const vars$8 = Text.cssVarList;
 
 const text = {
-	[vars$7.lineHeight]: '1em',
-	[vars$7.display]: 'inline-block',
-	[vars$7.textAlign]: 'left',
-	[vars$7.color]: globalRefs$6.colors.surface.dark,
+	[vars$8.lineHeight]: '1em',
+	[vars$8.display]: 'inline-block',
+	[vars$8.textAlign]: 'left',
+	[vars$8.color]: globalRefs$7.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$7.fontSize]: globalRefs$6.typography.h1.size,
-			[vars$7.fontWeight]: globalRefs$6.typography.h1.weight,
-			[vars$7.fontFamily]: globalRefs$6.typography.h1.font
+			[vars$8.fontSize]: globalRefs$7.typography.h1.size,
+			[vars$8.fontWeight]: globalRefs$7.typography.h1.weight,
+			[vars$8.fontFamily]: globalRefs$7.typography.h1.font
 		},
 		h2: {
-			[vars$7.fontSize]: globalRefs$6.typography.h2.size,
-			[vars$7.fontWeight]: globalRefs$6.typography.h2.weight,
-			[vars$7.fontFamily]: globalRefs$6.typography.h2.font
+			[vars$8.fontSize]: globalRefs$7.typography.h2.size,
+			[vars$8.fontWeight]: globalRefs$7.typography.h2.weight,
+			[vars$8.fontFamily]: globalRefs$7.typography.h2.font
 		},
 		h3: {
-			[vars$7.fontSize]: globalRefs$6.typography.h3.size,
-			[vars$7.fontWeight]: globalRefs$6.typography.h3.weight,
-			[vars$7.fontFamily]: globalRefs$6.typography.h3.font
+			[vars$8.fontSize]: globalRefs$7.typography.h3.size,
+			[vars$8.fontWeight]: globalRefs$7.typography.h3.weight,
+			[vars$8.fontFamily]: globalRefs$7.typography.h3.font
 		},
 		subtitle1: {
-			[vars$7.fontSize]: globalRefs$6.typography.subtitle1.size,
-			[vars$7.fontWeight]: globalRefs$6.typography.subtitle1.weight,
-			[vars$7.fontFamily]: globalRefs$6.typography.subtitle1.font
+			[vars$8.fontSize]: globalRefs$7.typography.subtitle1.size,
+			[vars$8.fontWeight]: globalRefs$7.typography.subtitle1.weight,
+			[vars$8.fontFamily]: globalRefs$7.typography.subtitle1.font
 		},
 		subtitle2: {
-			[vars$7.fontSize]: globalRefs$6.typography.subtitle2.size,
-			[vars$7.fontWeight]: globalRefs$6.typography.subtitle2.weight,
-			[vars$7.fontFamily]: globalRefs$6.typography.subtitle2.font
+			[vars$8.fontSize]: globalRefs$7.typography.subtitle2.size,
+			[vars$8.fontWeight]: globalRefs$7.typography.subtitle2.weight,
+			[vars$8.fontFamily]: globalRefs$7.typography.subtitle2.font
 		},
 		body1: {
-			[vars$7.fontSize]: globalRefs$6.typography.body1.size,
-			[vars$7.fontWeight]: globalRefs$6.typography.body1.weight,
-			[vars$7.fontFamily]: globalRefs$6.typography.body1.font
+			[vars$8.fontSize]: globalRefs$7.typography.body1.size,
+			[vars$8.fontWeight]: globalRefs$7.typography.body1.weight,
+			[vars$8.fontFamily]: globalRefs$7.typography.body1.font
 		},
 		body2: {
-			[vars$7.fontSize]: globalRefs$6.typography.body2.size,
-			[vars$7.fontWeight]: globalRefs$6.typography.body2.weight,
-			[vars$7.fontFamily]: globalRefs$6.typography.body2.font
+			[vars$8.fontSize]: globalRefs$7.typography.body2.size,
+			[vars$8.fontWeight]: globalRefs$7.typography.body2.weight,
+			[vars$8.fontFamily]: globalRefs$7.typography.body2.font
 		}
 	},
 	mode: {
 		primary: {
-			[vars$7.color]: globalRefs$6.colors.primary.main
+			[vars$8.color]: globalRefs$7.colors.primary.main
 		},
 		secondary: {
-			[vars$7.color]: globalRefs$6.colors.secondary.main
+			[vars$8.color]: globalRefs$7.colors.secondary.main
 		},
 		error: {
-			[vars$7.color]: globalRefs$6.colors.error.main
+			[vars$8.color]: globalRefs$7.colors.error.main
 		},
 		success: {
-			[vars$7.color]: globalRefs$6.colors.success.main
+			[vars$8.color]: globalRefs$7.colors.success.main
 		}
 	},
 	textAlign: {
-		right: { [vars$7.textAlign]: 'right' },
-		left: { [vars$7.textAlign]: 'left' },
-		center: { [vars$7.textAlign]: 'center' }
+		right: { [vars$8.textAlign]: 'right' },
+		left: { [vars$8.textAlign]: 'left' },
+		center: { [vars$8.textAlign]: 'center' }
 	},
 	_fullWidth: {
-		[vars$7.width]: '100%',
-		[vars$7.display]: 'block'
+		[vars$8.width]: '100%',
+		[vars$8.display]: 'block'
 	},
 	_italic: {
-		[vars$7.fontStyle]: 'italic'
+		[vars$8.fontStyle]: 'italic'
 	},
 	_uppercase: {
-		[vars$7.textTransform]: 'uppercase'
+		[vars$8.textTransform]: 'uppercase'
 	},
 	_lowercase: {
-		[vars$7.textTransform]: 'lowercase'
+		[vars$8.textTransform]: 'lowercase'
 	}
 };
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$6 = Link.cssVarList;
+const globalRefs$6 = getThemeRefs(globals);
+const vars$7 = Link.cssVarList;
 
 const link = {
-	[vars$6.cursor]: 'pointer',
-	[vars$6.borderBottomWidth]: '2px',
-	[vars$6.borderBottomStyle]: 'solid',
-	[vars$6.borderBottomColor]: 'transparent',
-	[vars$6.color]: globalRefs$5.colors.primary.main,
+	[vars$7.cursor]: 'pointer',
+	[vars$7.borderBottomWidth]: '2px',
+	[vars$7.borderBottomStyle]: 'solid',
+	[vars$7.borderBottomColor]: 'transparent',
+	[vars$7.color]: globalRefs$6.colors.primary.main,
 
 	_hover: {
-		[vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
+		[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
 	},
 
 	textAlign: {
-		right: { [vars$6.textAlign]: 'right' },
-		left: { [vars$6.textAlign]: 'left' },
-		center: { [vars$6.textAlign]: 'center' }
+		right: { [vars$7.textAlign]: 'right' },
+		left: { [vars$7.textAlign]: 'left' },
+		center: { [vars$7.textAlign]: 'center' }
 	},
 
 	_fullWidth: {
-		[vars$6.width]: '100%'
+		[vars$7.width]: '100%'
 	},
 
 	mode: {
 		primary: {
-			[vars$6.color]: globalRefs$5.colors.primary.main,
+			[vars$7.color]: globalRefs$6.colors.primary.main,
 			_hover: {
-				[vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
+				[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
 			}
 		},
 		secondary: {
-			[vars$6.color]: globalRefs$5.colors.secondary.main,
+			[vars$7.color]: globalRefs$6.colors.secondary.main,
 			_hover: {
-				[vars$6.borderBottomColor]: globalRefs$5.colors.secondary.main
+				[vars$7.borderBottomColor]: globalRefs$6.colors.secondary.main
 			}
 		},
 		error: {
-			[vars$6.color]: globalRefs$5.colors.error.main,
+			[vars$7.color]: globalRefs$6.colors.error.main,
 			_hover: {
-				[vars$6.borderBottomColor]: globalRefs$5.colors.error.main
+				[vars$7.borderBottomColor]: globalRefs$6.colors.error.main
 			}
 		},
 		success: {
-			[vars$6.color]: globalRefs$5.colors.success.main,
+			[vars$7.color]: globalRefs$6.colors.success.main,
 			_hover: {
-				[vars$6.borderBottomColor]: globalRefs$5.colors.success.main
+				[vars$7.borderBottomColor]: globalRefs$6.colors.success.main
 			}
 		}
 	}
 };
 
-const vars$5 = Divider.cssVarList;
+const vars$6 = Divider.cssVarList;
 
 const thickness = '2px';
 const textPaddingSize = '10px';
-const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$f);
+const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$h);
 
 
 const divider = {
 	...helperTheme,
-	[vars$5.alignItems]: 'center',
-	[vars$5.dividerHeight]: helperRefs.thickness,
-	[vars$5.backgroundColor]: 'currentColor',
-	[vars$5.opacity]: '0.2',
-	[vars$5.textPadding]: `0 ${helperRefs.textPaddingSize}`,
-	[vars$5.width]: '100%',
-	[vars$5.flexDirection]: 'row',
-	[vars$5.alignSelf]: 'strech',
-	[vars$5.textWidth]: 'fit-content',
-	[vars$5.maxTextWidth]: 'calc(100% - 100px)',
+	[vars$6.alignItems]: 'center',
+	[vars$6.dividerHeight]: helperRefs.thickness,
+	[vars$6.backgroundColor]: 'currentColor',
+	[vars$6.opacity]: '0.2',
+	[vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
+	[vars$6.width]: '100%',
+	[vars$6.flexDirection]: 'row',
+	[vars$6.alignSelf]: 'strech',
+	[vars$6.textWidth]: 'fit-content',
+	[vars$6.maxTextWidth]: 'calc(100% - 100px)',
 	_vertical: {
-		[vars$5.padding]: `0 calc(${thickness} * 3)`,
-		[vars$5.width]: 'fit-content',
-		[vars$5.textPadding]: `${helperRefs.textPaddingSize} 0`,
-		[vars$5.flexDirection]: 'column',
-		[vars$5.minHeight]: '200px',
-		[vars$5.textWidth]: 'fit-content',
-		[vars$5.dividerWidth]: helperRefs.thickness,
-		[vars$5.maxTextWidth]: '100%',
+		[vars$6.padding]: `0 calc(${thickness} * 3)`,
+		[vars$6.width]: 'fit-content',
+		[vars$6.textPadding]: `${helperRefs.textPaddingSize} 0`,
+		[vars$6.flexDirection]: 'column',
+		[vars$6.minHeight]: '200px',
+		[vars$6.textWidth]: 'fit-content',
+		[vars$6.dividerWidth]: helperRefs.thickness,
+		[vars$6.maxTextWidth]: '100%',
 	}
 };
 
-const vars$4 = Passcode.cssVarList;
-const globalRefs$4 = getThemeRefs(globals);
+const vars$5 = Passcode.cssVarList;
+const globalRefs$5 = getThemeRefs(globals);
 
 const passcode = {
-	[vars$4.backgroundColor]: globalRefs$4.colors.surface.light,
-	[vars$4.outlineWidth]: '2px',
-	[vars$4.outlineColor]: globalRefs$4.colors.primary.main,
-	[vars$4.padding]: '0',
-	[vars$4.textAlign]: 'center',
-	[vars$4.borderColor]: 'transparent',
-	[vars$4.digitsGap]: '4px',
-	[vars$4.focusedValidDigitFieldBorderColor]: globalRefs$4.colors.primary.main,
+	[vars$5.backgroundColor]: globalRefs$5.colors.surface.light,
+	[vars$5.outlineWidth]: '2px',
+	[vars$5.outlineColor]: globalRefs$5.colors.primary.main,
+	[vars$5.padding]: '0',
+	[vars$5.textAlign]: 'center',
+	[vars$5.borderColor]: 'transparent',
+	[vars$5.digitsGap]: '4px',
+	[vars$5.focusedValidDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
 
 	_hideCursor: {
-		[vars$4.caretColor]: 'transparent',
+		[vars$5.caretColor]: 'transparent',
 	},
 
 	_disabled: {
-		[vars$4.backgroundColor]: globalRefs$4.colors.surface.main
+		[vars$5.backgroundColor]: globalRefs$5.colors.surface.main
 	},
 
 	_fullWidth: {
-		[vars$4.width]: '100%'
+		[vars$5.width]: '100%'
 	},
 
 	_bordered: {
-		[vars$4.borderColor]: globalRefs$4.colors.surface.main
+		[vars$5.borderColor]: globalRefs$5.colors.surface.main
 	},
 
 	_invalid: {
-		[vars$4.borderColor]: globalRefs$4.colors.error.main,
-		[vars$4.color]: globalRefs$4.colors.error.main,
-		[vars$4.outlineColor]: globalRefs$4.colors.error.light,
+		[vars$5.borderColor]: globalRefs$5.colors.error.main,
+		[vars$5.color]: globalRefs$5.colors.error.main,
+		[vars$5.outlineColor]: globalRefs$5.colors.error.light,
 	},
 };
 
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 
-const vars$3 = LoaderLinear.cssVarList;
+const vars$4 = LoaderLinear.cssVarList;
 
 const loaderLinear = {
-	[vars$3.display]: 'inline-block',
-	[vars$3.barColor]: globalRefs$3.colors.surface.contrast,
-	[vars$3.barWidth]: '20%',
-	[vars$3.surfaceColor]: globalRefs$3.colors.surface.main,
-	[vars$3.borderRadius]: '4px',
-	[vars$3.animationDuration]: '2s',
-	[vars$3.animationTimingFunction]: 'linear',
-	[vars$3.animationIterationCount]: 'infinite',
-	[vars$3.width]: '100%',
+	[vars$4.display]: 'inline-block',
+	[vars$4.barColor]: globalRefs$4.colors.surface.contrast,
+	[vars$4.barWidth]: '20%',
+	[vars$4.surfaceColor]: globalRefs$4.colors.surface.main,
+	[vars$4.borderRadius]: '4px',
+	[vars$4.animationDuration]: '2s',
+	[vars$4.animationTimingFunction]: 'linear',
+	[vars$4.animationIterationCount]: 'infinite',
+	[vars$4.width]: '100%',
 	size: {
 		xs: {
-			[vars$3.height]: '6px'
+			[vars$4.height]: '6px'
 		},
 		sm: {
-			[vars$3.height]: '8px'
+			[vars$4.height]: '8px'
 		},
 		md: {
-			[vars$3.height]: '10px'
+			[vars$4.height]: '10px'
 		},
 		lg: {
-			[vars$3.height]: '12px'
+			[vars$4.height]: '12px'
 		},
 		xl: {
-			[vars$3.height]: '14px'
+			[vars$4.height]: '14px'
 		}
 	},
 	mode: {
 		primary: {
-			[vars$3.barColor]: globalRefs$3.colors.primary.main
+			[vars$4.barColor]: globalRefs$4.colors.primary.main
 		},
 		secondary: {
-			[vars$3.barColor]: globalRefs$3.colors.secondary.main
+			[vars$4.barColor]: globalRefs$4.colors.secondary.main
 		}
 	},
 	_hidden: {
-		[vars$3.display]: 'none'
+		[vars$4.display]: 'none'
 	}
 };
 
-const globalRefs$2 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 
-const vars$2 = LoaderRadial.cssVarList;
+const vars$3 = LoaderRadial.cssVarList;
 
 const loaderRadial = {
-	[vars$2.display]: 'inline-block',
-	[vars$2.color]: globalRefs$2.colors.surface.contrast,
-	[vars$2.animationDuration]: '2s',
-	[vars$2.animationTimingFunction]: 'linear',
-	[vars$2.animationIterationCount]: 'infinite',
-	[vars$2.spinnerStyle]: 'solid',
-	[vars$2.spinnerWidth]: '4px',
-	[vars$2.spinnerRadius]: '50%',
-	[vars$2.spinnerTopColor]: 'currentColor',
-	[vars$2.spinnerBottomColor]: 'transparent',
-	[vars$2.spinnerRightColor]: 'currentColor',
-	[vars$2.spinnerLeftColor]: 'transparent',
+	[vars$3.display]: 'inline-block',
+	[vars$3.color]: globalRefs$3.colors.surface.contrast,
+	[vars$3.animationDuration]: '2s',
+	[vars$3.animationTimingFunction]: 'linear',
+	[vars$3.animationIterationCount]: 'infinite',
+	[vars$3.spinnerStyle]: 'solid',
+	[vars$3.spinnerWidth]: '4px',
+	[vars$3.spinnerRadius]: '50%',
+	[vars$3.spinnerTopColor]: 'currentColor',
+	[vars$3.spinnerBottomColor]: 'transparent',
+	[vars$3.spinnerRightColor]: 'currentColor',
+	[vars$3.spinnerLeftColor]: 'transparent',
 	size: {
 		xs: {
-			[vars$2.width]: '20px',
-			[vars$2.height]: '20px',
-			[vars$2.spinnerWidth]: '2px'
+			[vars$3.width]: '20px',
+			[vars$3.height]: '20px',
+			[vars$3.spinnerWidth]: '2px'
 		},
 		sm: {
-			[vars$2.width]: '30px',
-			[vars$2.height]: '30px',
-			[vars$2.spinnerWidth]: '3px'
+			[vars$3.width]: '30px',
+			[vars$3.height]: '30px',
+			[vars$3.spinnerWidth]: '3px'
 		},
 		md: {
-			[vars$2.width]: '40px',
-			[vars$2.height]: '40px',
-			[vars$2.spinnerWidth]: '4px'
+			[vars$3.width]: '40px',
+			[vars$3.height]: '40px',
+			[vars$3.spinnerWidth]: '4px'
 		},
 		lg: {
-			[vars$2.width]: '60px',
-			[vars$2.height]: '60px',
-			[vars$2.spinnerWidth]: '5px'
+			[vars$3.width]: '60px',
+			[vars$3.height]: '60px',
+			[vars$3.spinnerWidth]: '5px'
 		},
 		xl: {
-			[vars$2.width]: '80px',
-			[vars$2.height]: '80px',
-			[vars$2.spinnerWidth]: '6px'
+			[vars$3.width]: '80px',
+			[vars$3.height]: '80px',
+			[vars$3.spinnerWidth]: '6px'
 		}
 	},
 	mode: {
 		primary: {
-			[vars$2.color]: globalRefs$2.colors.primary.main
+			[vars$3.color]: globalRefs$3.colors.primary.main
 		},
 		secondary: {
-			[vars$2.color]: globalRefs$2.colors.secondary.main
+			[vars$3.color]: globalRefs$3.colors.secondary.main
 		}
 	},
 	_hidden: {
-		[vars$2.display]: 'none'
+		[vars$3.display]: 'none'
 	}
 };
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$2 = getThemeRefs(globals);
 
-const vars$1 = ComboBox.cssVarList;
+const vars$2 = ComboBox.cssVarList;
 
 const comboBox = {
-	[vars$1.borderColor]: globalRefs$1.colors.surface.main,
-	[vars$1.borderWidth]: '1px',
-	[vars$1.borderStyle]: 'solid',
-	[vars$1.cursor]: 'pointer',
-	[vars$1.padding]: '0',
-	[vars$1.placeholderColor]: globalRefs$1.colors.surface.main,
-	[vars$1.toggleColor]: globalRefs$1.colors.surface.contrast,
-	[vars$1.toggleCursor]: 'pointer',
+	[vars$2.borderColor]: globalRefs$2.colors.surface.main,
+	[vars$2.borderWidth]: '1px',
+	[vars$2.borderStyle]: 'solid',
+	[vars$2.cursor]: 'pointer',
+	[vars$2.padding]: '0',
+	[vars$2.placeholderColor]: globalRefs$2.colors.surface.main,
+	[vars$2.toggleColor]: globalRefs$2.colors.surface.contrast,
+	[vars$2.toggleCursor]: 'pointer',
 	size: {
 		xs: {
-			[vars$1.height]: '14px',
-			[vars$1.fontSize]: '8px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`
+			[vars$2.height]: '14px',
+			[vars$2.fontSize]: '8px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.xs}`
 		},
 		sm: {
-			[vars$1.height]: '20px',
-			[vars$1.fontSize]: '10px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`
+			[vars$2.height]: '20px',
+			[vars$2.fontSize]: '10px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.sm}`
 		},
 		md: {
-			[vars$1.height]: '30px',
-			[vars$1.fontSize]: '14px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.md}`
+			[vars$2.height]: '30px',
+			[vars$2.fontSize]: '14px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.md}`
 		},
 		lg: {
-			[vars$1.height]: '40px',
-			[vars$1.fontSize]: '20px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.lg}`
+			[vars$2.height]: '40px',
+			[vars$2.fontSize]: '20px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.lg}`
 		},
 		xl: {
-			[vars$1.height]: '50px',
-			[vars$1.fontSize]: '25px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.xl}`
+			[vars$2.height]: '50px',
+			[vars$2.fontSize]: '25px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.xl}`
 		}
 	},
 	_invalid: {
-		[vars$1.borderColor]: globalRefs$1.colors.error.main,
-		[vars$1.placeholderColor]: globalRefs$1.colors.error.light,
-		[vars$1.toggleColor]: globalRefs$1.colors.error.main,
+		[vars$2.borderColor]: globalRefs$2.colors.error.main,
+		[vars$2.placeholderColor]: globalRefs$2.colors.error.light,
+		[vars$2.toggleColor]: globalRefs$2.colors.error.main,
 	},
 	// [vars.overlayCursor]: 'pointer',
 	// [vars.overlayBackground]: globalRefs.colors.surface.light,
@@ -5225,68 +5528,68 @@ Image.cssVarList;
 
 const image = {};
 
-const globalRefs = getThemeRefs(globals);
-const vars = PhoneField.cssVarList;
+const globalRefs$1 = getThemeRefs(globals);
+const vars$1 = PhoneField.cssVarList;
 
 const phoneField = {
-	[vars.wrapperBorderStyle]: 'solid',
-	[vars.wrapperBorderWidth]: '1px',
-	[vars.wrapperBorderColor]: 'transparent',
-	[vars.wrapperBorderRadius]: globalRefs.radius.sm,
-	[vars.placeholderColor]: globalRefs.colors.surface.main,
+	[vars$1.wrapperBorderStyle]: 'solid',
+	[vars$1.wrapperBorderWidth]: '1px',
+	[vars$1.wrapperBorderColor]: 'transparent',
+	[vars$1.wrapperBorderRadius]: globalRefs$1.radius.sm,
+	[vars$1.placeholderColor]: globalRefs$1.colors.surface.main,
 
-	[vars.padding]: '0',
+	[vars$1.padding]: '0',
 
-	[vars.phoneInputWidth]: '15em',
-	[vars.countryCodeInputWidth]: '7em',
+	[vars$1.phoneInputWidth]: '15em',
+	[vars$1.countryCodeInputWidth]: '7em',
 
 	size: {
 		xs: {
-			[vars.inputHeight]: '14px',
-			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs.spacing.xs}`,
-			[vars.countryCodeDropdownWidth]: '200px',
+			[vars$1.inputHeight]: '14px',
+			[vars$1.fontSize]: '8px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`,
+			[vars$1.countryCodeDropdownWidth]: '200px',
 		},
 		sm: {
-			[vars.inputHeight]: '20px',
-			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs.spacing.sm}`,
-			[vars.countryCodeDropdownWidth]: '240px',
+			[vars$1.inputHeight]: '20px',
+			[vars$1.fontSize]: '10px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`,
+			[vars$1.countryCodeDropdownWidth]: '240px',
 		},
 		md: {
-			[vars.inputHeight]: '30px',
-			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs.spacing.md}`,
-			[vars.countryCodeDropdownWidth]: '250px',
+			[vars$1.inputHeight]: '30px',
+			[vars$1.fontSize]: '14px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.md}`,
+			[vars$1.countryCodeDropdownWidth]: '250px',
 		},
 		lg: {
-			[vars.inputHeight]: '40px',
-			[vars.fontSize]: '46px',
-			[vars.padding]: `0 ${globalRefs.spacing.lg}`,
-			[vars.countryCodeDropdownWidth]: '250px',
+			[vars$1.inputHeight]: '40px',
+			[vars$1.fontSize]: '46px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.lg}`,
+			[vars$1.countryCodeDropdownWidth]: '250px',
 		},
 		xl: {
-			[vars.inputHeight]: '50px',
-			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs.spacing.xl}`,
-			[vars.countryCodeDropdownWidth]: '400px',
+			[vars$1.inputHeight]: '50px',
+			[vars$1.fontSize]: '25px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.xl}`,
+			[vars$1.countryCodeDropdownWidth]: '400px',
 		}
 	},
 
 	_fullWidth: {
-		[vars.componentWidth]: '100%',
-		[vars.phoneInputWidth]: '100%',
-		[vars.countryCodeDropdownWidth]: '100%',
+		[vars$1.componentWidth]: '100%',
+		[vars$1.phoneInputWidth]: '100%',
+		[vars$1.countryCodeDropdownWidth]: '100%',
 	},
 
 	_bordered: {
-		[vars.wrapperBorderColor]: globalRefs.colors.surface.main
+		[vars$1.wrapperBorderColor]: globalRefs$1.colors.surface.main
 	},
 
 	_invalid: {
-		[vars.color]: globalRefs.colors.error.main,
-		[vars.placeholderColor]: globalRefs.colors.error.light,
-		[vars.wrapperBorderColor]: globalRefs.colors.error.main
+		[vars$1.color]: globalRefs$1.colors.error.main,
+		[vars$1.placeholderColor]: globalRefs$1.colors.error.light,
+		[vars$1.wrapperBorderColor]: globalRefs$1.colors.error.main
 	},
 
 	// '@overlay': {
@@ -5294,6 +5597,49 @@ const phoneField = {
 	// }
 };
 
+const globalRefs = getThemeRefs(globals);
+
+const vars = NewPassword.cssVarList;
+
+const newPassword = {
+	_required: {
+		[vars.requiredContent]: "'*'",
+	},
+
+	[vars.inputLabelTextColor]: globalRefs.colors.surface.contrast,
+	[vars.inputTextColor]: globalRefs.colors.surface.contrast,
+	[vars.placeholderTextColor]: globalRefs.colors.surface.main,
+	[vars.inputsGap]: '1em',
+
+	size: {
+		xs: {
+			[vars.fieldsMargin]: '0',
+		},
+		sm: {
+			[vars.fieldsMargin]: '0',
+		},
+		md: {
+			[vars.fieldsMargin]: '0.5em',
+		},
+		lg: {
+			[vars.fieldsMargin]: '1em',
+		},
+		xl: {
+			[vars.fieldsMargin]: '2em',
+		},
+	},
+
+	_fullWidth: {
+		[vars.componentWidth]: '100%'
+	},
+
+	_invalid: {
+		[vars.inputLabelTextColor]: globalRefs.colors.error.main,
+		[vars.inputTextColor]: globalRefs.colors.error.main,
+		[vars.placeholderTextColor]: globalRefs.colors.error.light,
+	}
+};
+
 var components = {
 	button,
 	textField: textField$1,
@@ -5313,7 +5659,8 @@ var components = {
 	loaderLinear,
 	comboBox,
 	image,
-	phoneField
+	phoneField,
+	newPassword,
 };
 
 var index = { globals, components };