@descope/web-components-ui 1.0.102 → 1.0.104

package/dist/index.esm.js

@@ -658,7 +658,7 @@ const createProxy = ({
 	return ProxyClass;
 };
 
-const observedAttributes$2 = [
+const observedAttributes$3 = [
   'required',
   'pattern',
 ];
@@ -673,7 +673,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
   static get observedAttributes() {
     return [
       ...superclass.observedAttributes || [],
-      ...observedAttributes$2
+      ...observedAttributes$3
     ];
   }
 
@@ -706,20 +706,29 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
   }
 
   getErrorMessage(flags) {
+    const {
+      valueMissing,
+      patternMismatch,
+      typeMismatch,
+      stepMismatch,
+      tooShort,
+      tooLong,
+      customError
+    } = flags;
     switch (true) {
-      case flags.valueMissing:
+      case valueMissing:
         return this.getAttribute(errorAttributes.valueMissing) ||
           this.defaultErrorMsgValueMissing
-      case flags.patternMismatch || flags.typeMismatch:
+      case patternMismatch || typeMismatch || stepMismatch:
         return this.getAttribute(errorAttributes.patternMismatch) ||
           this.defaultErrorMsgPatternMismatch
-      case flags.tooShort:
+      case tooShort:
         return this.getAttribute(errorAttributes.tooShort) ||
           this.defaultErrorMsgTooShort
-      case flags.tooLong:
+      case tooLong:
         return this.getAttribute(errorAttributes.tooLong) ||
           this.defaultErrorMsgTooLong
-      case flags.customError:
+      case customError:
         return this.validationMessage
       default:
         return ''
@@ -751,7 +760,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
     return this.#internals.validity
   }
 
-  get validationTarget () {
+  get validationTarget() {
     return this.inputElement
   }
 
@@ -783,7 +792,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-    if (observedAttributes$2.includes(attrName)) {
+    if (observedAttributes$3.includes(attrName)) {
       this.#setValidity();
     }
   }
@@ -863,7 +872,6 @@ const proxyInputMixin = (superclass) =>
 
 			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
 
-
 			return this.#inputElement
 		}
 
@@ -930,6 +938,8 @@ const proxyInputMixin = (superclass) =>
 			propertyObserver(this, this.inputElement, 'value');
 			propertyObserver(this, this.inputElement, 'selectionStart');
 			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+
+			forwardAttrs(this, this.inputElement, {includeAttrs: ['inputmode']});
 		}
 	};
 
@@ -1695,10 +1705,11 @@ class RawContainer extends createBaseClass({ componentName: componentName$h, bas
 				width: 100%;
 				height: 100%;
 				display: flex;
-				overflow: auto;
+				overflow: hidden;
 			}
 			:host {
 				display: inline-block;
+				overflow: auto;
 			}
 		</style>
 		<slot></slot>
@@ -1768,6 +1779,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$g, baseS
 			descope-text {
 				flex-grow: 0;
 				flex-shrink: 0;
+				min-width: fit-content;
 			}
 
 			:host(:empty) descope-text {
@@ -1885,6 +1897,7 @@ const selectors$1 = {
 
 var textFieldMappings = {
 	backgroundColor: { selector: selectors$1.inputWrapper },
+	labelTextColor: { selector: selectors$1.label, property: 'color' },
 	color: { selector: selectors$1.inputWrapper },
 	width: { selector: selectors$1.host },
 	borderColor: [
@@ -1947,6 +1960,8 @@ const EmailField = compose(
 overrides$4 = `
 	:host {
 		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
 	}
 	vaadin-email-field {
 		margin: 0;
@@ -1956,8 +1971,12 @@ overrides$4 = `
 	vaadin-email-field::before {
 		height: 0;
 	}
+	vaadin-email-field > input {
+		-webkit-mask-image: none;
+	}
 	vaadin-email-field::part(input-field) {
 		overflow: hidden;
+		padding: 0;
 	}
 	vaadin-email-field[readonly] > input:placeholder-shown {
 		opacity: 1;
@@ -1970,14 +1989,6 @@ overrides$4 = `
 		-webkit-text-fill-color: var(${EmailField.cssVarList.color});
 		box-shadow: 0 0 0 var(${EmailField.cssVarList.height}) var(${EmailField.cssVarList.backgroundColor}) inset;
 	}
-	vaadin-email-field > label,
-	vaadin-email-field::part(input-field) {
-		cursor: pointer;
-		color: var(${EmailField.cssVarList.color});
-	}
-	vaadin-email-field::part(input-field):focus {
-		cursor: text;
-	}
 	vaadin-email-field[required]::part(required-indicator)::after {
 		content: "*";
 		color: var(${EmailField.cssVarList.color});
@@ -2123,13 +2134,19 @@ const NumberField = compose(
 overrides$3 = `
 	:host {
 		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
 	}
 	vaadin-number-field {
 		margin: 0;
 		padding: 0;
+		width: 100%;
+	}
+	vaadin-number-field > input {
+		-webkit-mask-image: none;
 	}
 	vaadin-number-field::part(input-field) {
-		overflow: hidden;
+		padding: 0;
 	}
 	vaadin-number-field[readonly] > input:placeholder-shown {
 		opacity: 1;
@@ -2142,16 +2159,7 @@ overrides$3 = `
 		-webkit-text-fill-color: var(${NumberField.cssVarList.color});
 		box-shadow: 0 0 0 var(${NumberField.cssVarList.height}) var(${NumberField.cssVarList.backgroundColor}) inset;
 	}
-	vaadin-number-field > label,
-	vaadin-number-field::part(input-field) {
-		cursor: pointer;
-		color: var(${NumberField.cssVarList.color});
-	}
-	vaadin-number-field::part(input-field):focus {
-		cursor: text;
-	}
 	vaadin-number-field[required]::part(required-indicator)::after {
-		font-size: "12px";
 		content: "*";
 		color: var(${NumberField.cssVarList.color});
 	}
@@ -2178,7 +2186,7 @@ const getSanitizedCharacters = (str) => {
 
 const componentName$a = getComponentName('passcode-internal');
 
-const observedAttributes$1 = [
+const observedAttributes$2 = [
 	'digits'
 ];
 
@@ -2194,16 +2202,13 @@ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a,
 
 class PasscodeInternal extends BaseInputClass$2 {
 	static get observedAttributes() {
-		return observedAttributes$1.concat(BaseInputClass$2.observedAttributes || []);
+		return observedAttributes$2.concat(BaseInputClass$2.observedAttributes || []);
 	}
 
 	static get componentName() {
 		return componentName$a;
 	}
 
-	#dispatchBlur = createDispatchEvent.bind(this, 'blur')
-	#dispatchFocus = createDispatchEvent.bind(this, 'focus')
-
 	constructor() {
 		super();
 
@@ -2226,7 +2231,8 @@ class PasscodeInternal extends BaseInputClass$2 {
 		<descope-text-field
 			data-id=${idx}
 			type="tel"
-			autocomplete="off"
+			autocomplete="one-time-code"
+			inputMode="numeric"
 		></descope-text-field>
 	`);
 
@@ -2282,7 +2288,6 @@ class PasscodeInternal extends BaseInputClass$2 {
 		super.init?.();
 
 		this.renderInputs();
-
 	}
 
 	getInputIdx(inputEle) {
@@ -2355,7 +2360,7 @@ class PasscodeInternal extends BaseInputClass$2 {
 
 		// sync attributes to inputs
 		if (oldValue !== newValue) {
-			if (observedAttributes$1.includes(attrName)) {
+			if (observedAttributes$2.includes(attrName)) {
 				if (attrName === 'digits') {
 					this.renderInputs();
 				}
@@ -2412,10 +2417,12 @@ overrides$2 = `
 	:host {
 		display: inline-block;
 		--vaadin-field-default-width: auto;
+		max-width: 100%;
+		min-width: 10em;
+
 	}
 	vaadin-text-field {
 		margin: 0;
-		padding: 0;
 		width: 100%;
 		height: 100%;
 		box-sizing: border-box;
@@ -2438,18 +2445,11 @@ overrides$2 = `
 		box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
 	}
 
-	vaadin-text-field input {
+	vaadin-text-field > input {
 		-webkit-mask-image: none;
 		min-height: 0;
 	}
 
-	vaadin-text-field > label,
-	vaadin-text-field::part(input-field) {
-		color: var(${TextField.cssVarList.color});
-	}
-	vaadin-text-field::part(input-field):focus {
-		cursor: text;
-	}
 	vaadin-text-field[required]::part(required-indicator)::after {
 		content: "*";
 		color: var(${TextField.cssVarList.color});
@@ -2458,7 +2458,6 @@ overrides$2 = `
 		opacity: 0 !important;
 	}
 
-
 	vaadin-text-field::before {
 		height: unset;
 	}
@@ -2466,8 +2465,16 @@ overrides$2 = `
 
 const componentName$8 = getComponentName('passcode');
 
+const observedAttributes$1 = [
+	'digits'
+];
+
 const customMixin$2 = (superclass) =>
 	class PasscodeClass extends superclass {
+		static get observedAttributes() {
+			return observedAttributes$1.concat(superclass.observedAttributes || []);
+		}
+
 		constructor() {
 			super();
 		}
@@ -2495,6 +2502,14 @@ const customMixin$2 = (superclass) =>
 
 			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
 		}
+
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+			if (attrName === 'digits') {
+				this.style.setProperty('--passcode-digits-count', newValue);
+			}
+		}
 	};
 
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
@@ -2503,7 +2518,7 @@ const { borderStyle, borderWidth, ...restTextFieldMappings } =
 const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
 	focusedDigitField: { selector: () => `${TextField.componentName}[focused="true"]` },
 	digitField: { selector: () => TextField.componentName },
-	label: { selector: '> label' },
+	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
 	internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
 };
@@ -2528,10 +2543,7 @@ const Passcode = compose(
 			textAlign: { ...digitField, property: textVars$1.textAlign },
 			caretColor: { ...digitField, property: textVars$1.caretColor },
 			digitsGap: { ...internalWrapper, property: 'gap' },
-			focusedDigitFieldBorderColor: [
-				{ ...focusedDigitField, property: textVars$1.borderColor },
-				{ ...focusedDigitField, property: textVars$1.outlineColor }
-			]
+			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$1.outlineColor }
 		},
 	}),
 	draggableMixin,
@@ -2543,68 +2555,71 @@ const Passcode = compose(
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
-    :host {
-      --vaadin-field-default-width: auto;
-			display: inline-block;
-    }
-	:host::after {
-		background-color: transparent;
-	}
-	:host::part(input-field)::after {
-		background-color: transparent;
-	}
+			:host {
+				--vaadin-field-default-width: auto;
+				display: inline-block;
+				max-width: 100%;
+				min-width: calc(var(--passcode-digits-count) * 2em);
+			}
+			:host::after {
+				background-color: transparent;
+			}
+			:host::part(input-field)::after {
+				background-color: transparent;
+			}
 
-    descope-passcode-internal {
-		-webkit-mask-image: none;
-		padding: 0;
-		width: 100%;
-		height: 100%;
-		min-height: initial;
-    }
+			descope-passcode-internal {
+				-webkit-mask-image: none;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+				min-height: initial;
+			}
 
-	descope-passcode-internal .wrapper {
-		box-sizing: border-box;
-		min-height: initial;
-		height: 100%;
-		justify-content: center;
-    }
+			descope-passcode-internal .wrapper {
+				box-sizing: border-box;
+				min-height: initial;
+				height: 100%;
+				justify-content: space-between;
+			}
 
-	descope-passcode-internal descope-text-field {
-		width: var(${textVars$1.height})			
-	}
+			descope-passcode-internal descope-text-field {
+				min-width: 2em;
+				max-width: var(${textVars$1.height});
+			}
 
-    vaadin-text-field::part(input-field) {
-		background-color: transparent;
-		padding: 0;
-		overflow: hidden;
-		-webkit-mask-image: none;
-    }
+			vaadin-text-field::part(input-field) {
+				background-color: transparent;
+				padding: 0;
+				overflow: hidden;
+				-webkit-mask-image: none;
+			}
 
-	vaadin-text-field {
-		margin: 0;
-		padding: 0;
-		width: 100%
-	}
+			vaadin-text-field {
+				margin: 0;
+				padding: 0;
+				width: 100%
+			}
 
-	vaadin-text-field::before {
-		height: 0;
-	}
+			vaadin-text-field::before {
+				height: 0;
+			}
 
-	vaadin-text-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
 
-	vaadin-text-field::part(input-field):focus {
-		cursor: text;
-	}
+			vaadin-text-field::part(input-field):focus {
+				cursor: text;
+			}
 
-	vaadin-text-field[required]::part(required-indicator)::after {
-		content: "*";
-	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-    `,
+			vaadin-text-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
+			vaadin-text-field[readonly]::part(input-field)::after {
+				border: 0 solid;
+			}
+    	`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$8
 	})
@@ -2628,11 +2643,12 @@ const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass
 		this.addEventListener('mousedown', (e) => {
 			if (this.isDraggable & this.isReadOnly) {
 				const inputEle = this.baseElement.querySelector('input');
-
 				const prevType = inputEle.getAttribute('type');
+
 				inputEle.setAttribute('type', 'text');
+				setTimeout(() => inputEle.focus());
 
-				const onComplete = () => {
+				const onComplete = (e) => {
 					inputEle.setAttribute('type', prevType);
 
 					e.target.removeEventListener('mouseup', onComplete);
@@ -2657,27 +2673,37 @@ const {
 	inputElementPlaceholder,
 	revealButton,
 	revealButtonIcon,
+	revealButtonIconOutline,
 	label: label$3,
 	requiredIndicator: requiredIndicator$2
 } = {
-	host: () => ':host',
+	host: { selector: () => ':host' },
 	inputWrapper: { selector: '::part(input-field)' },
 	inputElement: { selector: '> input' },
 	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
 	revealButton: { selector: 'vaadin-password-field-button' },
 	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
-	label: { selector: '> label' },
+	revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
+	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '::part(required-indicator)::after' },
 };
 
 const PasswordField = compose(
 	createStyleMixin({
 		mappings: {
-			width: { selector: host$4 },
+			width: host$4,
 			wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
 			wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
 			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
 			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
+
+			revealButtonOutlineBoxShadow: [
+				{
+					...revealButtonIconOutline,
+					property: 'box-shadow'
+				}
+			],
+
 			labelTextColor: [
 				{ ...label$3, property: 'color' },
 				{ ...requiredIndicator$2, property: 'color' }
@@ -2695,10 +2721,10 @@ const PasswordField = compose(
 				{ ...label$3, property: 'cursor' },
 				{ ...requiredIndicator$2, property: 'cursor' }
 			],
-			outlineColor: { ...inputWrapper$1 },
-			outlineStyle: { ...inputWrapper$1 },
+			outlineColor: inputWrapper$1,
+			outlineStyle: inputWrapper$1,
 			outlineWidth: [
-				{ ...inputWrapper$1 },
+				inputWrapper$1,
 				// we need to make sure there is enough space for the outline
 				{ property: 'padding' }
 			],
@@ -2715,32 +2741,36 @@ const PasswordField = compose(
 		wrappedEleName: 'vaadin-password-field',
 		style: `
 			:host {
-				display: inline-flex;
+				display: inline-block;
+				min-width: 10em;
+				max-width: 100%;
 			}
 			vaadin-password-field {
 				width: 100%;
+				box-sizing: border-box;
 			}
 			vaadin-password-field::part(input-field) {
 				padding: 0;
 			}
 			vaadin-password-field > input {
 				min-height: 0;
+				-webkit-mask-image: none;
 			}
-
 			vaadin-password-field[readonly] > input:placeholder-shown {
 				opacity: 1;
 			}
-
-			vaadin-password-field::part(input-field)::after {
-				opacity: 0;
-			}	
 			vaadin-password-field::before {
 				height: initial;
 			}
-
+			vaadin-password-field::part(input-field)::after {
+				opacity: 0;
+			}	
 			vaadin-password-field[required]::part(required-indicator)::after {
 				content: "*";
 			}
+			[readonly] vaadin-password-field-button {
+				pointer-events: none;
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$7
@@ -2772,6 +2802,7 @@ let overrides$1 = ``;
 const TextArea = compose(
 	createStyleMixin({
 		mappings: {
+			fontSize: [host$3, textArea$1],
 			resize: textArea$1,
 			color: textArea$1,
 			cursor: {},
@@ -2786,10 +2817,10 @@ const TextArea = compose(
 			borderStyle: input$1,
 			borderColor: input$1,
 			borderRadius: input$1,
-			outlineWidth: input$1,
+			outlineWidth: [input$1, { property: 'padding' }],
 			outlineStyle: input$1,
 			outlineColor: input$1,
-			outlineOffset: [input$1, { property: 'padding' }],
+			outlineOffset: input$1,
 		}
 	}),
 	draggableMixin,
@@ -2808,8 +2839,9 @@ const TextArea = compose(
 overrides$1 = `
 	:host {
 		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
 	}
-
 	vaadin-text-area {
 		margin: 0;
 		width: 100%;
@@ -2817,10 +2849,7 @@ overrides$1 = `
 	}
 	vaadin-text-area > label,
 	vaadin-text-area::part(input-field) {
-		cursor: pointer;
-	}
-	vaadin-text-area[focused]::part(input-field) {
-		cursor: text;
+		padding: 0;
 	}
 	vaadin-text-area[required]::part(required-indicator)::after {
 		content: "*";
@@ -3039,7 +3068,7 @@ const ComboBox = compose(
 		// to display.
 		excludeAttrsSync: ['tabindex', 'size'],
 		componentName: componentName$4,
-		includeForwardProps: ['items', 'renderer']
+		includeForwardProps: ['items', 'renderer', 'selectedItem']
 	})
 );
 
@@ -4381,7 +4410,7 @@ class PhoneFieldInternal extends BaseInputClass$1 {
 				this.inputs[0].focus();
 		});
 
-		super.init();
+		super.init?.();
 		this.initInputs();
 		this.setComboBoxDescriptor();
 	}
@@ -4394,7 +4423,10 @@ class PhoneFieldInternal extends BaseInputClass$1 {
 			// Vaadin resets the input's value. We use setTimeout in order to make sure this happens
 			// after the reset.
 			if (countryData) {
-				setTimeout(() => this.countryCodeInput.value = countryData);
+				setTimeout(() => {
+					this.countryCodeInput.selectedItem = this.countryCodeInput.items.find(node => node['data-id'] === countryCode);
+				});
+
 			}
 		}
 	}
@@ -4538,6 +4570,18 @@ const {
 const PhoneField = compose(
 	createStyleMixin({
 		mappings: {
+			fontSize: [
+				host$1, inputWrapper,
+				{
+					selector: TextField.componentName,
+					property: TextField.cssVarList.fontSize
+				},
+				{
+					selector: ComboBox.componentName,
+					property: ComboBox.cssVarList.fontSize
+				}
+			],
+
 			componentWidth: { ...host$1, property: 'width' },
 
 			wrapperBorderStyle: [
@@ -4597,6 +4641,8 @@ const PhoneField = compose(
 			:host {
 				--vaadin-field-default-width: auto;
 				display: inline-block;
+				max-width: 100%;
+				min-width: 15em;
 			}
 			div {
 				display: inline-flex;
@@ -4623,7 +4669,7 @@ const PhoneField = compose(
 				padding: 0;
 				min-height: 0;
 				width: 100%;
-				height: 100%;	
+				height: 100%;
 			}
 			descope-phone-field-internal > div {
 				width: 100%;
@@ -4702,6 +4748,8 @@ const customMixin = (superclass) =>
 					'label',
 					'has-confirm',
 					'invalid',
+					'readonly',
+					'draggable'
 				]
 			});
 		}
@@ -4714,17 +4762,16 @@ const { host, internalInputsWrapper } = {
 const NewPassword = compose(
 	createStyleMixin({
 		mappings: {
+			fontSize: [
+				host,
+				{
+					selector: PasswordField.componentName,
+					property: PasswordField.cssVarList.fontSize
+				}
+			],
 			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' }
+			inputsGap: { ...internalInputsWrapper, property: 'gap' },
 		}
 	}),
 	draggableMixin,
@@ -4744,6 +4791,8 @@ const overrides = `
 	:host {
 		--vaadin-field-default-width: auto;
 		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
 	}
 	vaadin-text-field {
 		padding: 0;
@@ -4763,16 +4812,16 @@ const overrides = `
 	}
 	descope-new-password-internal {
 		-webkit-mask-image: none;
-		padding: 0;
 		min-height: 0;
 		width: 100%;
-		height: 100%;		
+		height: 100%;
+		padding: 0;
 	}
 	descope-new-password-internal > .wrapper {
 		width: 100%;
 		height: 100%;
 		display: flex;
-    flex-direction: column;
+   		flex-direction: column;
 	}
 	descope-password-field {
 		display: block;
@@ -4797,6 +4846,9 @@ const commonAttrs = [
 	'full-width',
 	'maxlength',
 	'invalid',
+	'readonly',
+	'draggable'
+
 ];
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
@@ -4860,7 +4912,7 @@ class NewPasswordInternal extends BaseInputClass {
 			}
 		});
 
-		super.init();
+		super.init?.();
 		this.renderInputs(this.hasConfirm);
 	}
 
@@ -5062,7 +5114,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 			[componentName]: {
 				[themeName]: {
 					[selector]: {
-						[property]: val
+						[property]: getCssVarValue(val)
 					}
 				}
 			}
@@ -5300,15 +5352,15 @@ var globals = {
 	fonts
 };
 
-const globalRefs$f = getThemeRefs(globals);
+const globalRefs$e = getThemeRefs(globals);
 const vars$g = Button.cssVarList;
 
 const mode = {
-	primary: globalRefs$f.colors.primary,
-	secondary: globalRefs$f.colors.secondary,
-	success: globalRefs$f.colors.success,
-	error: globalRefs$f.colors.error,
-	surface: globalRefs$f.colors.surface
+	primary: globalRefs$e.colors.primary,
+	secondary: globalRefs$e.colors.secondary,
+	success: globalRefs$e.colors.success,
+	error: globalRefs$e.colors.error,
+	surface: globalRefs$e.colors.surface
 };
 
 const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$n);
@@ -5321,7 +5373,7 @@ const button = {
 
 	[vars$g.cursor]: 'pointer',
 
-	[vars$g.borderRadius]: globalRefs$f.radius.sm,
+	[vars$g.borderRadius]: globalRefs$e.radius.sm,
 	[vars$g.borderWidth]: '2px',
 	[vars$g.borderStyle]: 'solid',
 	[vars$g.borderColor]: 'transparent',
@@ -5383,7 +5435,7 @@ const button = {
 	}
 };
 
-const globalRefs$e = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 
 const vars$f = TextField.cssVarList;
 
@@ -5394,43 +5446,41 @@ const textField = (vars) => ({
 	[vars.outlineStyle]: 'solid',
 	[vars.outlineColor]: 'transparent',
 
+	[vars.height]: '2em',
+
 	size: {
 		xs: {
-			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
 		},
 		sm: {
-			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
 		},
 		md: {
-			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
 		},
 		lg: {
-			[vars.height]: '40px',
 			[vars.fontSize]: '20px',
 		},
 		xl: {
-			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
 		}
 	},
 
-	[vars.color]: globalRefs$e.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$e.colors.surface.main,
+	[vars.color]: globalRefs$d.colors.surface.contrast,
+	[vars.labelTextColor]: globalRefs$d.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$d.colors.surface.main,
 
-	[vars.backgroundColor]: globalRefs$e.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$d.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$e.radius.xs,
+	[vars.borderRadius]: globalRefs$d.radius.xs,
 
 	_disabled: {
-		[vars.color]: globalRefs$e.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$e.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$e.colors.surface.main
+		[vars.color]: globalRefs$d.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$d.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$d.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5438,24 +5488,24 @@ const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outlineColor]: globalRefs$e.colors.surface.main
+		[vars.outlineColor]: globalRefs$d.colors.surface.main
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$e.colors.surface.main
+		[vars.borderColor]: globalRefs$d.colors.surface.main
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs$e.colors.error.main,
-		[vars.color]: globalRefs$e.colors.error.main,
-		[vars.outlineColor]: globalRefs$e.colors.error.light,
-		[vars.placeholderColor]: globalRefs$e.colors.error.light
+		[vars.borderColor]: globalRefs$d.colors.error.main,
+		[vars.color]: globalRefs$d.colors.error.main,
+		[vars.outlineColor]: globalRefs$d.colors.error.light,
+		[vars.placeholderColor]: globalRefs$d.colors.error.light
 	}
 });
 
 var textField$1 = textField(vars$f);
 
-const globalRefs$d = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
 
 const vars$e = PasswordField.cssVarList;
 
@@ -5463,47 +5513,46 @@ const passwordField = {
 	[vars$e.wrapperBorderStyle]: 'solid',
 	[vars$e.wrapperBorderWidth]: '1px',
 	[vars$e.wrapperBorderColor]: 'transparent',
-	[vars$e.wrapperBorderRadius]: globalRefs$d.radius.xs,
-	[vars$e.backgroundColor]: globalRefs$d.colors.surface.light,
+	[vars$e.wrapperBorderRadius]: globalRefs$c.radius.xs,
+	[vars$e.backgroundColor]: globalRefs$c.colors.surface.light,
 
 	[vars$e.outlineWidth]: '2px',
 	[vars$e.outlineStyle]: 'solid',
 	[vars$e.outlineColor]: 'transparent',
 
-	[vars$e.labelTextColor]: globalRefs$d.colors.surface.contrast,
-	[vars$e.inputTextColor]: globalRefs$d.colors.surface.contrast,
-	[vars$e.placeholderTextColor]: globalRefs$d.colors.surface.main,
+	[vars$e.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs$c.colors.surface.main}`,
+
+
+	[vars$e.labelTextColor]: globalRefs$c.colors.surface.contrast,
+	[vars$e.inputTextColor]: globalRefs$c.colors.surface.contrast,
+	[vars$e.placeholderTextColor]: globalRefs$c.colors.surface.main,
 
 	[vars$e.pointerCursor]: 'pointer',
 
-	[vars$e.padding]: `0`,
+	[vars$e.padding]: '0',
+	[vars$e.height]: '2em',
 
 	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$d.colors.surface.main
+		[vars$e.padding]: '0 0.5em',
+		[vars$e.wrapperBorderColor]: globalRefs$c.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5511,15 +5560,15 @@ const passwordField = {
 	},
 
 	_focused: {
-		[vars$e.outlineColor]: globalRefs$d.colors.surface.main
+		[vars$e.outlineColor]: globalRefs$c.colors.surface.main
 	},
 
 	_invalid: {
-		[vars$e.labelTextColor]: globalRefs$d.colors.error.main,
-		[vars$e.inputTextColor]: globalRefs$d.colors.error.main,
-		[vars$e.placeholderTextColor]: globalRefs$d.colors.error.light,
-		[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main,
-		[vars$e.outlineColor]: globalRefs$d.colors.error.main,
+		[vars$e.labelTextColor]: globalRefs$c.colors.error.main,
+		[vars$e.inputTextColor]: globalRefs$c.colors.error.main,
+		[vars$e.placeholderTextColor]: globalRefs$c.colors.error.light,
+		[vars$e.wrapperBorderColor]: globalRefs$c.colors.error.main,
+		[vars$e.outlineColor]: globalRefs$c.colors.error.light,
 	},
 };
 
@@ -5531,32 +5580,33 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 const vars$d = TextArea.cssVarList;
 
 const textArea = {
-	[vars$d.labelColor]: globalRefs$c.colors.surface.contrast,
-	[vars$d.placeholderColor]: globalRefs$c.colors.surface.main,
-	[vars$d.color]: globalRefs$c.colors.surface.contrast,
+	[vars$d.labelColor]: globalRefs$b.colors.surface.contrast,
+	[vars$d.placeholderColor]: globalRefs$b.colors.surface.main,
+	[vars$d.color]: globalRefs$b.colors.surface.contrast,
+	[vars$d.fontSize]: '14px',
 
-	[vars$d.backgroundColor]: globalRefs$c.colors.surface.light,
+	[vars$d.backgroundColor]: globalRefs$b.colors.surface.light,
 	[vars$d.resize]: 'vertical',
 
-	[vars$d.borderRadius]: globalRefs$c.radius.sm,
+	[vars$d.borderRadius]: globalRefs$b.radius.sm,
 	[vars$d.borderWidth]: '1px',
 	[vars$d.borderStyle]: 'solid',
 	[vars$d.borderColor]: 'transparent',
 	[vars$d.outlineWidth]: '2px',
 	[vars$d.outlineStyle]: 'solid',
 	[vars$d.outlineColor]: 'transparent',
-	[vars$d.outlineOffset]: '0px',
+	[vars$d.outlineOffset]: '0',
 
 	_fullWidth: {
 		[vars$d.width]: '100%'
 	},
 
 	_focused: {
-		[vars$d.outlineColor]: globalRefs$c.colors.surface.main
+		[vars$d.outlineColor]: globalRefs$b.colors.surface.main
 	},
 
 	_disabled: {
@@ -5564,31 +5614,37 @@ const textArea = {
 	},
 
 	_bordered: {
-		[vars$d.borderColor]: globalRefs$c.colors.surface.main,
+		[vars$d.borderColor]: globalRefs$b.colors.surface.main,
 	},
 
 	_invalid: {
-		[vars$d.labelColor]: globalRefs$c.colors.error.main,
-		[vars$d.outlineColor]: globalRefs$c.colors.error.main
+		[vars$d.labelColor]: globalRefs$b.colors.error.main,
+		[vars$d.borderColor]: globalRefs$b.colors.error.main,
+		[vars$d.outlineColor]: globalRefs$b.colors.error.light,
+		[vars$d.placeholderColor]: globalRefs$b.colors.error.light,
+	},
+
+	_readonly: {
+		[vars$d.resize]: 'none',
 	}
 };
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 const vars$c = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
+	[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
 
 	[vars$c.labelFontSize]: '12px',
 	[vars$c.labelFontWeight]: '400',
-	[vars$c.labelTextColor]: globalRefs$b.colors.surface.contrast,
+	[vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
 	[vars$c.cursor]: 'pointer',
 
 	[vars$c.checkboxWidth]: 'calc(1em - 2px)',
 	[vars$c.checkboxHeight]: 'calc(1em - 2px)',
 	[vars$c.labelMargin]: 'calc(1em + 5px)',
 
-	[vars$c.checkboxRadius]: globalRefs$b.radius.xs,
+	[vars$c.checkboxRadius]: globalRefs$a.radius.xs,
 
 	size: {
 		xs: {
@@ -5623,24 +5679,24 @@ const checkbox = {
 	},
 
 	_checked: {
-		[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.primary.main,
-		[vars$c.checkmarkTextColor]: globalRefs$b.colors.primary.contrast,
+		[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
+		[vars$c.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
 	},
 
 	_disabled: {
-		[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
+		[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
 	},
 
 	_focused: {
 		[vars$c.checkboxOutlineWidth]: '2px',
 		[vars$c.checkboxOutlineOffset]: '1px',
-		[vars$c.checkboxOutlineColor]: globalRefs$b.colors.primary.main,
+		[vars$c.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
 		[vars$c.checkboxOutlineStyle]: 'solid'
 	},
 
 	_invalid: {
-		[vars$c.checkboxOutlineColor]: globalRefs$b.colors.error.main,
-		[vars$c.labelTextColor]: globalRefs$b.colors.error.main
+		[vars$c.checkboxOutlineColor]: globalRefs$a.colors.error.main,
+		[vars$c.labelTextColor]: globalRefs$a.colors.error.main
 	},
 
 };
@@ -5649,7 +5705,7 @@ const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 const trackBorderWidth = '2px';
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 const vars$b = SwitchToggle.cssVarList;
 
 const switchToggle = {
@@ -5665,21 +5721,21 @@ const switchToggle = {
 
     [vars$b.trackBorderStyle]: 'solid',
     [vars$b.trackBorderWidth]: trackBorderWidth,
-    [vars$b.trackBorderColor]: globalRefs$a.colors.surface.contrast,
+    [vars$b.trackBorderColor]: globalRefs$9.colors.surface.contrast,
 
     [vars$b.trackBackgroundColor]: 'none',
-    [vars$b.trackRadius]: globalRefs$a.radius.md,
+    [vars$b.trackRadius]: globalRefs$9.radius.md,
     [vars$b.trackWidth]: '2.5em',
     [vars$b.trackHeight]: checkboxHeight,
 
     [vars$b.knobSize]: `calc(1em - ${knobMargin})`,
     [vars$b.knobRadius]: '50%',
     [vars$b.knobTopOffset]: '1px',
-    [vars$b.knobColor]: globalRefs$a.colors.surface.contrast,
+    [vars$b.knobColor]: globalRefs$9.colors.surface.contrast,
     [vars$b.knobPosition]: knobMargin,
     [vars$b.knobTransition]: '0.3s',
 
-    [vars$b.labelTextColor]: globalRefs$a.colors.surface.contrast,
+    [vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
     [vars$b.labelFontWeight]: '400',
     [vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
     [vars$b.labelMargin]: '0.25em',
@@ -5689,35 +5745,35 @@ const switchToggle = {
     },
 
     _checked: {
-        [vars$b.trackBorderColor]: globalRefs$a.colors.primary.main,
+        [vars$b.trackBorderColor]: globalRefs$9.colors.primary.main,
         [vars$b.knobPosition]: `calc(100% - var(${vars$b.knobSize}) - ${knobMargin})`,
-        [vars$b.knobColor]: globalRefs$a.colors.primary.main,
-        [vars$b.knobTextColor]: globalRefs$a.colors.primary.contrast,
+        [vars$b.knobColor]: globalRefs$9.colors.primary.main,
+        [vars$b.knobTextColor]: globalRefs$9.colors.primary.contrast,
     },
 
     _disabled: {
         [vars$b.cursor]: 'not-allowed', // todo: fix cursor
-        [vars$b.knobColor]: globalRefs$a.colors.surface.main,
-        [vars$b.trackBorderColor]: globalRefs$a.colors.surface.main,
-        [vars$b.trackBackgroundColor]: globalRefs$a.colors.surface.light,
+        [vars$b.knobColor]: globalRefs$9.colors.surface.main,
+        [vars$b.trackBorderColor]: globalRefs$9.colors.surface.main,
+        [vars$b.trackBackgroundColor]: globalRefs$9.colors.surface.light,
     },
 
     _focused: {
         [vars$b.switchOutlineWidth]: '2px',
         [vars$b.switchOutlineOffset]: '1px',
-        [vars$b.switchOutlineColor]: globalRefs$a.colors.primary.main,
+        [vars$b.switchOutlineColor]: globalRefs$9.colors.primary.main,
         [vars$b.switchOutlineStyle]: 'solid'
     },
 
     _invalid: {
-        [vars$b.switchOutlineColor]: globalRefs$a.colors.error.main,
-        [vars$b.trackBorderColor]: globalRefs$a.colors.error.main,
-        [vars$b.knobColor]: globalRefs$a.colors.error.main,
-        [vars$b.labelTextColor]: globalRefs$a.colors.error.main
+        [vars$b.switchOutlineColor]: globalRefs$9.colors.error.main,
+        [vars$b.trackBorderColor]: globalRefs$9.colors.error.main,
+        [vars$b.knobColor]: globalRefs$9.colors.error.main,
+        [vars$b.labelTextColor]: globalRefs$9.colors.error.main
     },
 };
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 
 const vars$a = Container.cssVarList;
 
@@ -5744,8 +5800,8 @@ const container = {
 	...helperTheme$1,
 	[vars$a.width]: '100%',
 	[vars$a.boxShadow]: 'none',
-	[vars$a.backgroundColor]: globalRefs$9.colors.surface.light,
-	[vars$a.color]: globalRefs$9.colors.surface.contrast,
+	[vars$a.backgroundColor]: globalRefs$8.colors.surface.light,
+	[vars$a.color]: globalRefs$8.colors.surface.contrast,
 	verticalPadding: {
 		sm: { [vars$a.verticalPadding]: '5px' },
 		md: { [vars$a.verticalPadding]: '10px' },
@@ -5791,41 +5847,41 @@ const container = {
 
 	shadow: {
 		sm: {
-			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$9.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$a.boxShadow]: `${globalRefs$9.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$9.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$a.boxShadow]: `${globalRefs$9.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$9.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$a.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$9.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', // mimic daisyUI shadow settings 
-			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
+			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$a.borderRadius]: globalRefs$9.radius.sm
+			[vars$a.borderRadius]: globalRefs$8.radius.sm
 		},
 		md: {
-			[vars$a.borderRadius]: globalRefs$9.radius.md
+			[vars$a.borderRadius]: globalRefs$8.radius.md
 		},
 		lg: {
-			[vars$a.borderRadius]: globalRefs$9.radius.lg
+			[vars$a.borderRadius]: globalRefs$8.radius.lg
 		},
 		xl: {
-			[vars$a.borderRadius]: globalRefs$9.radius.xl
+			[vars$a.borderRadius]: globalRefs$8.radius.xl
 		},
 		'2xl': {
-			[vars$a.borderRadius]: globalRefs$9.radius['2xl']
+			[vars$a.borderRadius]: globalRefs$8.radius['2xl']
 		},
 		'3xl': {
-			[vars$a.borderRadius]: globalRefs$9.radius['3xl']
+			[vars$a.borderRadius]: globalRefs$8.radius['3xl']
 		},
 	}
 };
@@ -5833,66 +5889,67 @@ const container = {
 const vars$9 = Logo.cssVarList;
 
 const logo = {
+	[vars$9.width]: '100%',
 	[vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
 };
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 
 const vars$8 = Text.cssVarList;
 
 const text = {
 	[vars$8.lineHeight]: '1em',
 	[vars$8.textAlign]: 'left',
-	[vars$8.color]: globalRefs$8.colors.surface.dark,
+	[vars$8.color]: globalRefs$7.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$8.fontSize]: globalRefs$8.typography.h1.size,
-			[vars$8.fontWeight]: globalRefs$8.typography.h1.weight,
-			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.h2.size,
-			[vars$8.fontWeight]: globalRefs$8.typography.h2.weight,
-			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.h3.size,
-			[vars$8.fontWeight]: globalRefs$8.typography.h3.weight,
-			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.subtitle1.size,
-			[vars$8.fontWeight]: globalRefs$8.typography.subtitle1.weight,
-			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.subtitle2.size,
-			[vars$8.fontWeight]: globalRefs$8.typography.subtitle2.weight,
-			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.body1.size,
-			[vars$8.fontWeight]: globalRefs$8.typography.body1.weight,
-			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.body2.size,
-			[vars$8.fontWeight]: globalRefs$8.typography.body2.weight,
-			[vars$8.fontFamily]: globalRefs$8.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$8.color]: globalRefs$8.colors.primary.main
+			[vars$8.color]: globalRefs$7.colors.primary.main
 		},
 		secondary: {
-			[vars$8.color]: globalRefs$8.colors.secondary.main
+			[vars$8.color]: globalRefs$7.colors.secondary.main
 		},
 		error: {
-			[vars$8.color]: globalRefs$8.colors.error.main
+			[vars$8.color]: globalRefs$7.colors.error.main
 		},
 		success: {
-			[vars$8.color]: globalRefs$8.colors.success.main
+			[vars$8.color]: globalRefs$7.colors.success.main
 		}
 	},
 	textAlign: {
@@ -5914,7 +5971,7 @@ const text = {
 	}
 };
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 const vars$7 = Link.cssVarList;
 
 const link = {
@@ -5922,10 +5979,10 @@ const link = {
 	[vars$7.borderBottomWidth]: '2px',
 	[vars$7.borderBottomStyle]: 'solid',
 	[vars$7.borderBottomColor]: 'transparent',
-	[vars$7.color]: globalRefs$7.colors.primary.main,
+	[vars$7.color]: globalRefs$6.colors.primary.main,
 
 	_hover: {
-		[vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
+		[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
 	},
 
 	textAlign: {
@@ -5940,33 +5997,33 @@ const link = {
 
 	mode: {
 		primary: {
-			[vars$7.color]: globalRefs$7.colors.primary.main,
+			[vars$7.color]: globalRefs$6.colors.primary.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
+				[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
 			}
 		},
 		secondary: {
-			[vars$7.color]: globalRefs$7.colors.secondary.main,
+			[vars$7.color]: globalRefs$6.colors.secondary.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$7.colors.secondary.main
+				[vars$7.borderBottomColor]: globalRefs$6.colors.secondary.main
 			}
 		},
 		error: {
-			[vars$7.color]: globalRefs$7.colors.error.main,
+			[vars$7.color]: globalRefs$6.colors.error.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$7.colors.error.main
+				[vars$7.borderBottomColor]: globalRefs$6.colors.error.main
 			}
 		},
 		success: {
-			[vars$7.color]: globalRefs$7.colors.success.main,
+			[vars$7.color]: globalRefs$6.colors.success.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$7.colors.success.main
+				[vars$7.borderBottomColor]: globalRefs$6.colors.success.main
 			}
 		}
 	}
 };
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 
 const vars$6 = Divider.cssVarList;
 
@@ -5978,7 +6035,7 @@ const divider = {
 	...helperTheme,
 	[vars$6.alignItems]: 'center',
 	[vars$6.dividerHeight]: helperRefs.thickness,
-	[vars$6.backgroundColor]: globalRefs$6.colors.surface.main,
+	[vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
 	[vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
 	[vars$6.width]: '100%',
 	[vars$6.flexDirection]: 'row',
@@ -5998,25 +6055,25 @@ const divider = {
 };
 
 const vars$5 = Passcode.cssVarList;
-const globalRefs$5 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 
 const passcode = {
-	[vars$5.backgroundColor]: globalRefs$5.colors.surface.light,
+	[vars$5.backgroundColor]: globalRefs$4.colors.surface.light,
 	[vars$5.outlineWidth]: '2px',
 	[vars$5.outlineColor]: 'transparent',
 	[vars$5.padding]: '0',
 	[vars$5.textAlign]: 'center',
 	[vars$5.borderColor]: 'transparent',
-	[vars$5.digitsGap]: '4px',
-	[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
-	[vars$5.color]: globalRefs$5.colors.surface.contrast,
+	[vars$5.digitsGap]: '0',
+	[vars$5.focusedDigitFieldOutlineColor]: globalRefs$4.colors.surface.main,
+	[vars$5.color]: globalRefs$4.colors.surface.contrast,
 
 	_hideCursor: {
 		[vars$5.caretColor]: 'transparent',
 	},
 
 	_disabled: {
-		[vars$5.backgroundColor]: globalRefs$5.colors.surface.main
+		[vars$5.backgroundColor]: globalRefs$4.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -6024,25 +6081,25 @@ const passcode = {
 	},
 
 	_bordered: {
-		[vars$5.borderColor]: globalRefs$5.colors.surface.main
+		[vars$5.borderColor]: globalRefs$4.colors.surface.main
 	},
 
 	_invalid: {
-		[vars$5.borderColor]: globalRefs$5.colors.error.main,
-		[vars$5.color]: globalRefs$5.colors.error.main,
-		[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.error.light,
+		[vars$5.borderColor]: globalRefs$4.colors.error.main,
+		[vars$5.color]: globalRefs$4.colors.error.main,
+		[vars$5.focusedDigitFieldOutlineColor]: globalRefs$4.colors.error.light,
 	},
 };
 
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 
 const vars$4 = LoaderLinear.cssVarList;
 
 const loaderLinear = {
 	[vars$4.display]: 'inline-block',
-	[vars$4.barColor]: globalRefs$4.colors.surface.contrast,
+	[vars$4.barColor]: globalRefs$3.colors.surface.contrast,
 	[vars$4.barWidth]: '20%',
-	[vars$4.surfaceColor]: globalRefs$4.colors.surface.main,
+	[vars$4.surfaceColor]: globalRefs$3.colors.surface.main,
 	[vars$4.borderRadius]: '4px',
 	[vars$4.animationDuration]: '2s',
 	[vars$4.animationTimingFunction]: 'linear',
@@ -6067,10 +6124,10 @@ const loaderLinear = {
 	},
 	mode: {
 		primary: {
-			[vars$4.barColor]: globalRefs$4.colors.primary.main
+			[vars$4.barColor]: globalRefs$3.colors.primary.main
 		},
 		secondary: {
-			[vars$4.barColor]: globalRefs$4.colors.secondary.main
+			[vars$4.barColor]: globalRefs$3.colors.secondary.main
 		}
 	},
 	_hidden: {
@@ -6078,13 +6135,13 @@ const loaderLinear = {
 	}
 };
 
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$2 = getThemeRefs(globals);
 
 const vars$3 = LoaderRadial.cssVarList;
 
 const loaderRadial = {
 	[vars$3.display]: 'inline-block',
-	[vars$3.color]: globalRefs$3.colors.surface.contrast,
+	[vars$3.color]: globalRefs$2.colors.surface.contrast,
 	[vars$3.animationDuration]: '2s',
 	[vars$3.animationTimingFunction]: 'linear',
 	[vars$3.animationIterationCount]: 'infinite',
@@ -6124,10 +6181,10 @@ const loaderRadial = {
 	},
 	mode: {
 		primary: {
-			[vars$3.color]: globalRefs$3.colors.primary.main
+			[vars$3.color]: globalRefs$2.colors.primary.main
 		},
 		secondary: {
-			[vars$3.color]: globalRefs$3.colors.secondary.main
+			[vars$3.color]: globalRefs$2.colors.secondary.main
 		}
 	},
 	_hidden: {
@@ -6135,45 +6192,39 @@ const loaderRadial = {
 	}
 };
 
-const globalRefs$2 = getThemeRefs(globals);
+const globalRefs$1 = getThemeRefs(globals);
 
 const vars$2 = ComboBox.cssVarList;
 
 const comboBox = {
-	[vars$2.borderColor]: globalRefs$2.colors.surface.main,
+	[vars$2.borderColor]: globalRefs$1.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.placeholderColor]: globalRefs$1.colors.surface.main,
+	[vars$2.toggleColor]: globalRefs$1.colors.surface.contrast,
 	[vars$2.toggleCursor]: 'pointer',
-	[vars$2.inputBackgroundColor]: globalRefs$2.colors.surface.light,
+	[vars$2.inputBackgroundColor]: globalRefs$1.colors.surface.light,
+	[vars$2.padding]: `0 ${globalRefs$1.spacing.xs}`,
+
+	[vars$2.height]: '2em',
+
 	size: {
 		xs: {
-			[vars$2.height]: '14px',
 			[vars$2.fontSize]: '8px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.xs}`
 		},
 		sm: {
-			[vars$2.height]: '20px',
 			[vars$2.fontSize]: '10px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.sm}`
 		},
 		md: {
-			[vars$2.height]: '30px',
 			[vars$2.fontSize]: '14px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.md}`
 		},
 		lg: {
-			[vars$2.height]: '40px',
 			[vars$2.fontSize]: '20px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.lg}`
 		},
 		xl: {
-			[vars$2.height]: '50px',
 			[vars$2.fontSize]: '25px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.xl}`
 		}
 	},
 
@@ -6182,9 +6233,9 @@ const comboBox = {
 	},
 
 	_invalid: {
-		[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$2.borderColor]: globalRefs$1.colors.error.main,
+		[vars$2.placeholderColor]: globalRefs$1.colors.error.light,
+		[vars$2.toggleColor]: globalRefs$1.colors.error.main,
 	},
 	// [vars.overlayCursor]: 'pointer',
 	// [vars.overlayBackground]: globalRefs.colors.surface.light,
@@ -6195,46 +6246,38 @@ Image.cssVarList;
 
 const image = {};
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs = getThemeRefs(globals);
 const vars$1 = PhoneField.cssVarList;
 
 const phoneField = {
 	[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$1.wrapperBorderRadius]: globalRefs.radius.xs,
+	[vars$1.placeholderColor]: globalRefs.colors.surface.main,
+	[vars$1.color]: globalRefs.colors.surface.contrast,
 
-	[vars$1.padding]: '0',
+	[vars$1.phoneInputWidth]: '10em',
+	[vars$1.countryCodeInputWidth]: '5em',
 
-	[vars$1.phoneInputWidth]: '15em',
-	[vars$1.countryCodeInputWidth]: '7em',
+	[vars$1.inputHeight]: '2em',
+	[vars$1.countryCodeDropdownWidth]: '12em',
 
 	size: {
 		xs: {
-			[vars$1.inputHeight]: '14px',
 			[vars$1.fontSize]: '8px',
-			[vars$1.countryCodeDropdownWidth]: '200px',
 		},
 		sm: {
-			[vars$1.inputHeight]: '20px',
-			[vars$1.fontSize]: '10px',
-			[vars$1.countryCodeDropdownWidth]: '240px',
+			[vars$1.fontSize]: '20px',
 		},
 		md: {
-			[vars$1.inputHeight]: '30px',
 			[vars$1.fontSize]: '14px',
-			[vars$1.countryCodeDropdownWidth]: '250px',
 		},
 		lg: {
-			[vars$1.inputHeight]: '40px',
-			[vars$1.fontSize]: '46px',
-			[vars$1.countryCodeDropdownWidth]: '250px',
+			[vars$1.fontSize]: '20px',
 		},
 		xl: {
-			[vars$1.inputHeight]: '50px',
 			[vars$1.fontSize]: '25px',
-			[vars$1.countryCodeDropdownWidth]: '400px',
 		}
 	},
 
@@ -6245,7 +6288,7 @@ const phoneField = {
 	},
 
 	_bordered: {
-		[vars$1.wrapperBorderColor]: globalRefs$1.colors.surface.main
+		[vars$1.wrapperBorderColor]: globalRefs.colors.surface.main
 	},
 
 	[vars$1.outlineStyle]: 'solid',
@@ -6253,14 +6296,14 @@ const phoneField = {
 	[vars$1.outlineColor]: 'transparent',
 
 	_focused: {
-		[vars$1.outlineColor]: globalRefs$1.colors.surface.main
+		[vars$1.outlineColor]: globalRefs.colors.surface.main
 	},
 
 	_invalid: {
-		[vars$1.outlineColor]: globalRefs$1.colors.error.light,
-		[vars$1.color]: globalRefs$1.colors.error.main,
-		[vars$1.placeholderColor]: globalRefs$1.colors.error.light,
-		[vars$1.wrapperBorderColor]: globalRefs$1.colors.error.main
+		[vars$1.outlineColor]: globalRefs.colors.error.light,
+		[vars$1.color]: globalRefs.colors.error.main,
+		[vars$1.placeholderColor]: globalRefs.colors.error.light,
+		[vars$1.wrapperBorderColor]: globalRefs.colors.error.main
 	},
 
 	// '@overlay': {
@@ -6268,47 +6311,36 @@ const phoneField = {
 	// }
 };
 
-const globalRefs = getThemeRefs(globals);
-
 const vars = NewPassword.cssVarList;
 
 const newPassword = {
+	[vars.inputsGap]: '1em',
+
 	_required: {
 		[vars.requiredContent]: "'*'",
 	},
 
-	[vars.inputLabelTextColor]: globalRefs.colors.surface.contrast,
-	[vars.inputTextColor]: globalRefs.colors.surface.contrast,
-	[vars.placeholderTextColor]: globalRefs.colors.surface.main,
-	[vars.inputsGap]: '1em',
+	_fullWidth: {
+		[vars.componentWidth]: '100%'
+	},
 
 	size: {
 		xs: {
-			[vars.fieldsMargin]: '0',
+			[vars.fontSize]: '8px',
 		},
 		sm: {
-			[vars.fieldsMargin]: '0',
+			[vars.fontSize]: '10px',
 		},
 		md: {
-			[vars.fieldsMargin]: '0.5em',
+			[vars.fontSize]: '14px',
 		},
 		lg: {
-			[vars.fieldsMargin]: '1em',
+			[vars.fontSize]: '20px',
 		},
 		xl: {
-			[vars.fieldsMargin]: '2em',
-		},
-	},
-
-	_fullWidth: {
-		[vars.componentWidth]: '100%'
+			[vars.fontSize]: '25px',
+		}
 	},
-
-	_invalid: {
-		[vars.inputLabelTextColor]: globalRefs.colors.error.main,
-		[vars.inputTextColor]: globalRefs.colors.error.main,
-		[vars.placeholderTextColor]: globalRefs.colors.error.light,
-	}
 };
 
 var components = {