@descope/web-components-ui 1.0.75 → 1.0.76

package/dist/index.esm.js

@@ -692,7 +692,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
   }
 };
 
-const errorAttrs = ['invalid', 'has-error-message'];
+const errorAttrs = ['invalid', 'required'];
 
 const propertyObserver = (src, target, property) => {
 	Object.defineProperty(src, property, {
@@ -991,15 +991,22 @@ const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
   }
 };
 
-// we want all the valueless attributes to have "true" value 
+// we want all the valueless attributes to have "true" value
+// and all the falsy attribute to be removed
 const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (newValue === '') {
-      this.setAttribute(attrName, 'true');
-      newValue = 'true';
-    }
+  init() {
+    super.init?.();
 
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    observeAttributes(this, (attrs) =>
+      attrs.forEach(attr => {
+        const attrVal = this.getAttribute(attr);
+
+        if (attrVal === '') {
+          this.setAttribute(attr, 'true');
+        } else if (attrVal === 'false') {
+          this.removeAttribute(attr);
+        }
+      }), {});
   }
 };
 
@@ -1466,39 +1473,44 @@ customElements.define(componentName$f, Divider);
 
 const selectors$2 = {
 	label: '::part(label)',
-	input: '::part(input-field)',
+	inputWrapper: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
 	placeholder: '> input:placeholder-shown',
-	host: () => ':host'
+	host: () => ':host',
+	input: 'input'
 };
 
 var textFieldMappings = {
-	backgroundColor: { selector: selectors$2.input },
-	color: { selector: selectors$2.input },
+	backgroundColor: { selector: selectors$2.inputWrapper },
+	color: { selector: selectors$2.inputWrapper },
 	width: { selector: selectors$2.host },
 	borderColor: [
-		{ selector: selectors$2.input },
+		{ selector: selectors$2.inputWrapper },
 		{ selector: selectors$2.readOnlyInput }
 	],
 	borderWidth: [
-		{ selector: selectors$2.input },
+		{ selector: selectors$2.inputWrapper },
 		{ selector: selectors$2.readOnlyInput }
 	],
 	borderStyle: [
-		{ selector: selectors$2.input },
+		{ selector: selectors$2.inputWrapper },
 		{ selector: selectors$2.readOnlyInput }
 	],
-	borderRadius: { selector: selectors$2.input },
-	boxShadow: { selector: selectors$2.input },
+	borderRadius: { selector: selectors$2.inputWrapper },
+	boxShadow: { selector: selectors$2.inputWrapper },
 
 	// we apply font-size also on the host so we can set its width with em
 	fontSize: [{}, { selector: selectors$2.host }],
-
-	height: { selector: selectors$2.input },
-	padding: { selector: selectors$2.input },
-	outline: { selector: selectors$2.input },
-	outlineOffset: { selector: selectors$2.input },
-
+	
+	height: { selector: selectors$2.inputWrapper },
+	padding: { selector: selectors$2.inputWrapper },
+	margin: { selector: selectors$2.inputWrapper },
+	caretColor: { selector: selectors$2.input },
+	outlineColor: { selector: selectors$2.inputWrapper },
+	outlineStyle: { selector: selectors$2.inputWrapper },
+	outlineWidth: { selector: selectors$2.inputWrapper },
+	outlineOffset: { selector: selectors$2.inputWrapper },
+	textAlign: {selector: selectors$2.input},
 	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
 };
 
@@ -1765,6 +1777,10 @@ const getSanitizedCharacters = (str) => {
 const componentName$9 = getComponentName('passcode-internal');
 
 const observedAttributes$1 = [
+	'digits'
+];
+
+const forwardAttributes = [
 	'disabled',
 	'bordered',
 	'size',
@@ -1788,22 +1804,35 @@ class PasscodeInternal extends BaseInputClass$1 {
 
 	constructor() {
 		super();
+
+		this.innerHTML = `
+		<div class="wrapper"></div>
+		<style>
+			.wrapper {
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+			}
+		</style>
+		`;
+
+		this.wrapperEle = this.querySelector('div');
+	}
+
+	renderInputs() {
 		const inputs = [...Array(this.digits).keys()].map((idx) => `
 		<descope-text-field
-			st-width="35px"
 			data-id=${idx}
 			type="tel"
 			autocomplete="off"
 		></descope-text-field>
 	`);
 
-		this.innerHTML = `
-		<div>
-			${inputs.join('')}
-		</div>
-		`;
+		this.wrapperEle.innerHTML = inputs.join('');
 
 		this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
+
+		this.initInputs();
 	}
 
 	get digits() {
@@ -1811,7 +1840,7 @@ class PasscodeInternal extends BaseInputClass$1 {
 	}
 
 	get value() {
-		return this.inputs.map(({ value }) => value).join('')
+		return this.inputs?.map(({ value }) => value).join('') || ''
 	}
 
 	set value(val) {
@@ -1850,7 +1879,8 @@ class PasscodeInternal extends BaseInputClass$1 {
 
 		super.init?.();
 
-		this.initInputs();
+		this.renderInputs();
+
 	}
 
 	getInputIdx(inputEle) {
@@ -1939,6 +1969,8 @@ class PasscodeInternal extends BaseInputClass$1 {
 					input.value = ''; // we are clearing the previous value so we can override it with the new value
 				}
 			};
+
+			forwardAttrs(this, input, { includeAttrs: forwardAttributes });
 		});
 	}
 
@@ -1948,11 +1980,9 @@ class PasscodeInternal extends BaseInputClass$1 {
 		// sync attributes to inputs
 		if (oldValue !== newValue) {
 			if (observedAttributes$1.includes(attrName)) {
-				this.inputs.forEach(
-					(input) => newValue === null ?
-						input.removeAttribute(attrName) :
-						input.setAttribute(attrName, newValue)
-				);
+				if (attrName === 'digits') {
+					this.renderInputs();
+				}
 			}
 		}
 	}
@@ -2013,9 +2043,7 @@ overrides$3 = `
 		width: 100%;
 		height: 100%;
 	}
-	vaadin-text-field input {
-		min-height: 0;
-	}
+
 	vaadin-text-field::part(input-field) {
 		overflow: hidden;
 		padding: 0;
@@ -2031,6 +2059,11 @@ overrides$3 = `
 		-webkit-text-fill-color: var(${TextField.cssVarList.color});
 		box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
 	}
+
+	vaadin-text-field input {
+		-webkit-mask-image: none;
+	}
+
 	vaadin-text-field > label,
 	vaadin-text-field::part(input-field) {
 		color: var(${TextField.cssVarList.color});
@@ -2046,6 +2079,10 @@ overrides$3 = `
 	vaadin-text-field[readonly]::part(input-field)::after {
 		border: 0 solid;
 	}
+
+	vaadin-text-field::before {
+		height: unset;
+	}
 `;
 
 const componentName$7 = getComponentName('passcode');
@@ -2076,16 +2113,20 @@ const customMixin$1 = (superclass) =>
 			this.baseElement.appendChild(template.content.cloneNode(true));
 
 			this.inputElement = this.shadowRoot.querySelector(componentName$9);
+
+			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
 		}
 	};
 
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
-const { digitField, label: label$1, requiredIndicator: requiredIndicator$1 } = {
+const { digitField, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, focusedValidDigitField } = {
+	focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
 	digitField: { selector: () => TextField.componentName },
 	label: { selector: '> label' },
-	requiredIndicator: { selector: '[required]::part(required-indicator)::after' }
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
 };
 
 const textVars$1 = TextField.cssVarList;
@@ -2095,7 +2136,20 @@ const Passcode = compose(
 		mappings: {
 			...restTextFieldMappings,
 			borderColor: { ...digitField, property: textVars$1.borderColor },
+			outlineColor: { ...digitField, property: textVars$1.outlineColor },
+			outlineWidth: [
+				{ ...digitField, property: textVars$1.outlineWidth },
+				// we want to leave enough space to the digits outline, 
+				// ideally, this would be part of the text field
+				{ ...internalWrapper, property: 'padding' }
+			],
 			color: [restTextFieldMappings.color, label$1, requiredIndicator$1],
+			padding: { ...digitField, property: textVars$1.padding },
+			margin: { ...digitField, property: textVars$1.margin },
+			textAlign: { ...digitField, property: textVars$1.textAlign },
+			caretColor: { ...digitField, property: textVars$1.caretColor },
+			digitsGap: { ...internalWrapper, property: 'gap' },
+			focusedValidDigitFieldBorderColor: { ...focusedValidDigitField, property: textVars$1.borderColor }
 		},
 	}),
 	draggableMixin,
@@ -2114,30 +2168,47 @@ const Passcode = compose(
 
     descope-passcode-internal {
       -webkit-mask-image: none;
-      display: flex;
-      gap: 2px;
-      align-items: center;
       padding: 0;
+			width: 100%;
+			height: 100%;
+			min-height: initial;
     }
+
+		descope-passcode-internal .wrapper {
+			box-sizing: border-box;
+			min-height: initial;
+			height: 100%;
+    }
+
+		descope-passcode-internal descope-text-field {
+			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 {
 			margin: 0;
 			padding: 0;
+			width: 100%
+		}
+
+		vaadin-text-field::before {
+			height: initial;
 		}
+
 		vaadin-text-field[readonly] > input:placeholder-shown {
 			opacity: 1;
 		}
-		vaadin-text-field > label,
-		vaadin-text-field::part(input-field) {
-			cursor: pointer;
-		}
+	
 		vaadin-text-field::part(input-field):focus {
 			cursor: text;
 		}
+
 		vaadin-text-field[required]::part(required-indicator)::after {
 			font-size: "12px";
 			content: "*";
@@ -2331,7 +2402,9 @@ const TextArea = compose(
 			borderStyle: { selector: selectors.input },
 			borderColor: { selector: selectors.input },
 			borderRadius: { selector: selectors.input },
-			outline: { selector: selectors.input },
+			outlineWidth: { selector: selectors.input },
+			outlineStyle: { selector: selectors.input },
+			outlineColor: { selector: selectors.input },
 			outlineOffset: { selector: selectors.input }
 		}
 	}),
@@ -4100,7 +4173,7 @@ const PhoneField = compose(
 
 			phoneInputWidth: { ...phoneInput, property: 'width' },
 
-			color: [label, requiredIndicator],
+			color: [label, requiredIndicator, {...phoneInput, property: textVars.color}, {...countryCodeInput, property: comboVars.color}],
 
 			placeholderColor: {
 				...phoneInput,
@@ -4178,6 +4251,13 @@ const PhoneField = compose(
 	})
 );
 
+/*
+Bugs:
+- default code value, open the dropdown and click outside, the value is gone
+- make invalid by blur, enter a 6 digit number, component is valid but the divider is red
+- missing handling of outline when focused, hiding the divider when focusing the phone
+*/
+
 customElements.define(componentName, PhoneField);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
@@ -4451,146 +4531,143 @@ var globals = {
 	fonts
 };
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$e = Button.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const vars$f = Button.cssVarList;
 
 const mode = {
-	primary: globalRefs$9.colors.primary,
-	secondary: globalRefs$9.colors.secondary,
-	success: globalRefs$9.colors.success,
-	error: globalRefs$9.colors.error,
-	surface: globalRefs$9.colors.surface
+	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
 };
 
 const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$l);
 
 const button = {
 	...helperTheme$2,
-	[vars$e.width]: 'fit-content',
+	[vars$f.width]: 'fit-content',
 	size: {
 		xs: {
-			[vars$e.height]: '10px',
-			[vars$e.fontSize]: '10px',
-			[vars$e.padding]: `0 ${globalRefs$9.spacing.xs}`
+			[vars$f.height]: '10px',
+			[vars$f.fontSize]: '10px',
+			[vars$f.padding]: `0 ${globalRefs$a.spacing.xs}`
 		},
 		sm: {
-			[vars$e.height]: '20px',
-			[vars$e.fontSize]: '10px',
-			[vars$e.padding]: `0 ${globalRefs$9.spacing.sm}`
+			[vars$f.height]: '20px',
+			[vars$f.fontSize]: '10px',
+			[vars$f.padding]: `0 ${globalRefs$a.spacing.sm}`
 		},
 		md: {
-			[vars$e.height]: '30px',
-			[vars$e.fontSize]: '14px',
-			[vars$e.padding]: `0 ${globalRefs$9.spacing.md}`
+			[vars$f.height]: '30px',
+			[vars$f.fontSize]: '14px',
+			[vars$f.padding]: `0 ${globalRefs$a.spacing.md}`
 		},
 		lg: {
-			[vars$e.height]: '40px',
-			[vars$e.fontSize]: '20px',
-			[vars$e.padding]: `0 ${globalRefs$9.spacing.lg}`
+			[vars$f.height]: '40px',
+			[vars$f.fontSize]: '20px',
+			[vars$f.padding]: `0 ${globalRefs$a.spacing.lg}`
 		},
 		xl: {
-			[vars$e.height]: '50px',
-			[vars$e.fontSize]: '25px',
-			[vars$e.padding]: `0 ${globalRefs$9.spacing.xl}`
+			[vars$f.height]: '50px',
+			[vars$f.fontSize]: '25px',
+			[vars$f.padding]: `0 ${globalRefs$a.spacing.xl}`
 		}
 	},
 
-	[vars$e.borderRadius]: globalRefs$9.radius.lg,
-	[vars$e.cursor]: 'pointer',
-	[vars$e.borderWidth]: '2px',
-	[vars$e.borderStyle]: 'solid',
-	[vars$e.borderColor]: 'transparent',
+	[vars$f.borderRadius]: globalRefs$a.radius.lg,
+	[vars$f.cursor]: 'pointer',
+	[vars$f.borderWidth]: '2px',
+	[vars$f.borderStyle]: 'solid',
+	[vars$f.borderColor]: 'transparent',
 
 	_fullWidth: {
-		[vars$e.width]: '100%'
+		[vars$f.width]: '100%'
 	},
 	_loading: {
-		[vars$e.cursor]: 'wait'
+		[vars$f.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$e.color]: helperRefs$2.contrast,
-			[vars$e.backgroundColor]: helperRefs$2.main,
+			[vars$f.color]: helperRefs$2.contrast,
+			[vars$f.backgroundColor]: helperRefs$2.main,
 			_hover: {
-				[vars$e.backgroundColor]: helperRefs$2.dark
+				[vars$f.backgroundColor]: helperRefs$2.dark
 			},
 			_loading: {
-				[vars$e.backgroundColor]: helperRefs$2.main
+				[vars$f.backgroundColor]: helperRefs$2.main
 			}
 		},
 		outline: {
-			[vars$e.color]: helperRefs$2.main,
-			[vars$e.borderColor]: helperRefs$2.main,
+			[vars$f.color]: helperRefs$2.main,
+			[vars$f.borderColor]: helperRefs$2.main,
 			_hover: {
-				[vars$e.color]: helperRefs$2.dark,
-				[vars$e.borderColor]: helperRefs$2.dark,
+				[vars$f.color]: helperRefs$2.dark,
+				[vars$f.borderColor]: helperRefs$2.dark,
 				_error: {
-					[vars$e.color]: helperRefs$2.error
+					[vars$f.color]: helperRefs$2.error
 				}
 			}
 		},
 		link: {
-			[vars$e.color]: helperRefs$2.main,
-			[vars$e.padding]: 0,
-			[vars$e.margin]: 0,
-			[vars$e.lineHeight]: helperRefs$2.height,
-			[vars$e.borderRadius]: 0,
+			[vars$f.color]: helperRefs$2.main,
+			[vars$f.lineHeight]: helperRefs$2.height,
 			_hover: {
-				[vars$e.color]: helperRefs$2.main,
-				[vars$e.textDecoration]: 'underline'
+				[vars$f.color]: helperRefs$2.main,
+				[vars$f.textDecoration]: 'underline'
 			}
 		}
 	}
 };
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 
-const vars$d = TextField.cssVarList;
+const vars$e = TextField.cssVarList;
 
 const textField = (vars) => ({
 	size: {
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$8.spacing.xs}`
+			[vars.padding]: `0 ${globalRefs$9.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$8.spacing.sm}`
+			[vars.padding]: `0 ${globalRefs$9.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$8.spacing.md}`
+			[vars.padding]: `0 ${globalRefs$9.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '20px',
-			[vars.padding]: `0 ${globalRefs$8.spacing.lg}`
+			[vars.padding]: `0 ${globalRefs$9.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$8.spacing.xl}`
+			[vars.padding]: `0 ${globalRefs$9.spacing.xl}`
 		}
 	},
 
-	[vars.color]: globalRefs$8.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$8.colors.surface.main,
+	[vars.color]: globalRefs$9.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$9.colors.surface.main,
 
-	[vars.backgroundColor]: globalRefs$8.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$9.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$8.radius.sm,
+	[vars.borderRadius]: globalRefs$9.radius.sm,
 
 	_disabled: {
-		[vars.color]: globalRefs$8.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$8.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$8.colors.surface.main
+		[vars.color]: globalRefs$9.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$9.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$9.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -4598,27 +4675,30 @@ const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outline]: `2px solid ${globalRefs$8.colors.surface.main}`
+		[vars.outlineWidth]: '2px',
+		[vars.outlineStyle]: 'solid',
+		[vars.outlineColor]: globalRefs$9.colors.surface.main
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$8.colors.surface.main
+		[vars.borderColor]: globalRefs$9.colors.surface.main
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs$8.colors.error.main,
-		[vars.color]: globalRefs$8.colors.error.main,
-		[vars.placeholderColor]: globalRefs$8.colors.error.light
+		[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
 	}
 });
 
-var textField$1 = textField(vars$d);
+var textField$1 = textField(vars$e);
 
-const vars$c = PasswordField.cssVarList;
+const vars$d = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars$c),
-	[vars$c.revealCursor]: 'pointer'
+	...textField(vars$d),
+	[vars$d.revealCursor]: 'pointer'
 };
 
 const numberField = {
@@ -4629,58 +4709,61 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$7 = getThemeRefs(globals);
-const vars$b = TextArea.cssVarList;
+const globalRefs$8 = getThemeRefs(globals);
+const vars$c = TextArea.cssVarList;
 
 const textArea = {
-	[vars$b.width]: '100%',
-	[vars$b.color]: globalRefs$7.colors.primary.main,
-	[vars$b.backgroundColor]: globalRefs$7.colors.surface.light,
-	[vars$b.resize]: 'vertical',
+	[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$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$b.borderRadius]: globalRefs$7.radius.sm,
-	[vars$b.borderWidth]: '1px',
-	[vars$b.borderStyle]: 'solid',
-	[vars$b.borderColor]: 'transparent',
 
 	_bordered: {
-		[vars$b.borderColor]: globalRefs$7.colors.surface.main
+		[vars$c.borderColor]: globalRefs$8.colors.surface.main
 	},
 
 	_focused: {
-		[vars$b.outline]: `2px solid ${globalRefs$7.colors.surface.main}`
+		[vars$c.outlineColor]: globalRefs$8.colors.surface.main
 	},
 
 	_fullWidth: {
-		[vars$b.width]: '100%'
+		[vars$c.width]: '100%'
 	},
 
 	_disabled: {
-		[vars$b.cursor]: 'not-allowed'
+		[vars$c.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
-		[vars$b.outline]: `2px solid ${globalRefs$7.colors.error.main}`
+		[vars$c.outlineColor]: globalRefs$8.colors.error.main
 	}
 };
 
-const vars$a = Checkbox.cssVarList;
+const vars$b = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$a.cursor]: 'pointer',
-	[vars$a.width]: 'fit-content'
+	[vars$b.cursor]: 'pointer',
+	[vars$b.width]: 'fit-content'
 };
 
-const vars$9 = SwitchToggle.cssVarList;
+const vars$a = SwitchToggle.cssVarList;
 
 const swtichToggle = {
-	[vars$9.width]: '70px',
-	[vars$9.cursor]: [{}, { selector: '> label' }]
+	[vars$a.width]: '70px',
+	[vars$a.cursor]: [{}, { selector: '> label' }]
 };
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 
-const vars$8 = Container.cssVarList;
+const vars$9 = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -4703,31 +4786,31 @@ const [helperTheme$1, helperRefs$1, helperVars] =
 
 const container = {
 	...helperTheme$1,
-	[vars$8.width]: '100%',
+	[vars$9.width]: '100%',
 	verticalPadding: {
-		sm: { [vars$8.verticalPadding]: '5px' },
-		md: { [vars$8.verticalPadding]: '10px' },
-		lg: { [vars$8.verticalPadding]: '20px' },
+		sm: { [vars$9.verticalPadding]: '5px' },
+		md: { [vars$9.verticalPadding]: '10px' },
+		lg: { [vars$9.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars$8.horizontalPadding]: '5px' },
-		md: { [vars$8.horizontalPadding]: '10px' },
-		lg: { [vars$8.horizontalPadding]: '20px' },
+		sm: { [vars$9.horizontalPadding]: '5px' },
+		md: { [vars$9.horizontalPadding]: '10px' },
+		lg: { [vars$9.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars$8.flexDirection]: 'row',
-			[vars$8.alignItems]: helperRefs$1.verticalAlignment,
-			[vars$8.justifyContent]: helperRefs$1.horizontalAlignment,
+			[vars$9.flexDirection]: 'row',
+			[vars$9.alignItems]: helperRefs$1.verticalAlignment,
+			[vars$9.justifyContent]: helperRefs$1.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars$8.flexDirection]: 'column',
-			[vars$8.alignItems]: helperRefs$1.horizontalAlignment,
-			[vars$8.justifyContent]: helperRefs$1.verticalAlignment,
+			[vars$9.flexDirection]: 'column',
+			[vars$9.alignItems]: helperRefs$1.horizontalAlignment,
+			[vars$9.justifyContent]: helperRefs$1.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -4736,187 +4819,187 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars$8.gap]: '10px'
+			[vars$9.gap]: '10px'
 		},
 		md: {
-			[vars$8.gap]: '20px'
+			[vars$9.gap]: '20px'
 		},
 		lg: {
-			[vars$8.gap]: '30px'
+			[vars$9.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
+			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
 		},
 		md: {
-			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$6.shadow.narrow.md} ${helperRefs$1.shadowColor}`
+			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.md} ${helperRefs$1.shadowColor}`
 		},
 		lg: {
-			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
+			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
 		},
 		xl: {
-			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
+			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
+			[vars$9.boxShadow]: `${globalRefs$7.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$8.borderRadius]: globalRefs$6.radius.sm
+			[vars$9.borderRadius]: globalRefs$7.radius.sm
 		},
 		md: {
-			[vars$8.borderRadius]: globalRefs$6.radius.md
+			[vars$9.borderRadius]: globalRefs$7.radius.md
 		},
 		lg: {
-			[vars$8.borderRadius]: globalRefs$6.radius.lg
+			[vars$9.borderRadius]: globalRefs$7.radius.lg
 		},
 	}
 };
 
-const vars$7 = Logo.cssVarList;
+const vars$8 = Logo.cssVarList;
 
 const logo = {
-	[vars$7.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+	[vars$8.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
 };
 
-const globalRefs$5 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 
-const vars$6 = Text.cssVarList;
+const vars$7 = Text.cssVarList;
 
 const text = {
-	[vars$6.lineHeight]: '1em',
-	[vars$6.display]: 'inline-block',
-	[vars$6.textAlign]: 'left',
-	[vars$6.color]: globalRefs$5.colors.surface.dark,
+	[vars$7.lineHeight]: '1em',
+	[vars$7.display]: 'inline-block',
+	[vars$7.textAlign]: 'left',
+	[vars$7.color]: globalRefs$6.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$6.fontSize]: globalRefs$5.typography.h1.size,
-			[vars$6.fontWeight]: globalRefs$5.typography.h1.weight,
-			[vars$6.fontFamily]: globalRefs$5.typography.h1.font
+			[vars$7.fontSize]: globalRefs$6.typography.h1.size,
+			[vars$7.fontWeight]: globalRefs$6.typography.h1.weight,
+			[vars$7.fontFamily]: globalRefs$6.typography.h1.font
 		},
 		h2: {
-			[vars$6.fontSize]: globalRefs$5.typography.h2.size,
-			[vars$6.fontWeight]: globalRefs$5.typography.h2.weight,
-			[vars$6.fontFamily]: globalRefs$5.typography.h2.font
+			[vars$7.fontSize]: globalRefs$6.typography.h2.size,
+			[vars$7.fontWeight]: globalRefs$6.typography.h2.weight,
+			[vars$7.fontFamily]: globalRefs$6.typography.h2.font
 		},
 		h3: {
-			[vars$6.fontSize]: globalRefs$5.typography.h3.size,
-			[vars$6.fontWeight]: globalRefs$5.typography.h3.weight,
-			[vars$6.fontFamily]: globalRefs$5.typography.h3.font
+			[vars$7.fontSize]: globalRefs$6.typography.h3.size,
+			[vars$7.fontWeight]: globalRefs$6.typography.h3.weight,
+			[vars$7.fontFamily]: globalRefs$6.typography.h3.font
 		},
 		subtitle1: {
-			[vars$6.fontSize]: globalRefs$5.typography.subtitle1.size,
-			[vars$6.fontWeight]: globalRefs$5.typography.subtitle1.weight,
-			[vars$6.fontFamily]: globalRefs$5.typography.subtitle1.font
+			[vars$7.fontSize]: globalRefs$6.typography.subtitle1.size,
+			[vars$7.fontWeight]: globalRefs$6.typography.subtitle1.weight,
+			[vars$7.fontFamily]: globalRefs$6.typography.subtitle1.font
 		},
 		subtitle2: {
-			[vars$6.fontSize]: globalRefs$5.typography.subtitle2.size,
-			[vars$6.fontWeight]: globalRefs$5.typography.subtitle2.weight,
-			[vars$6.fontFamily]: globalRefs$5.typography.subtitle2.font
+			[vars$7.fontSize]: globalRefs$6.typography.subtitle2.size,
+			[vars$7.fontWeight]: globalRefs$6.typography.subtitle2.weight,
+			[vars$7.fontFamily]: globalRefs$6.typography.subtitle2.font
 		},
 		body1: {
-			[vars$6.fontSize]: globalRefs$5.typography.body1.size,
-			[vars$6.fontWeight]: globalRefs$5.typography.body1.weight,
-			[vars$6.fontFamily]: globalRefs$5.typography.body1.font
+			[vars$7.fontSize]: globalRefs$6.typography.body1.size,
+			[vars$7.fontWeight]: globalRefs$6.typography.body1.weight,
+			[vars$7.fontFamily]: globalRefs$6.typography.body1.font
 		},
 		body2: {
-			[vars$6.fontSize]: globalRefs$5.typography.body2.size,
-			[vars$6.fontWeight]: globalRefs$5.typography.body2.weight,
-			[vars$6.fontFamily]: globalRefs$5.typography.body2.font
+			[vars$7.fontSize]: globalRefs$6.typography.body2.size,
+			[vars$7.fontWeight]: globalRefs$6.typography.body2.weight,
+			[vars$7.fontFamily]: globalRefs$6.typography.body2.font
 		}
 	},
 	mode: {
 		primary: {
-			[vars$6.color]: globalRefs$5.colors.primary.main
+			[vars$7.color]: globalRefs$6.colors.primary.main
 		},
 		secondary: {
-			[vars$6.color]: globalRefs$5.colors.secondary.main
+			[vars$7.color]: globalRefs$6.colors.secondary.main
 		},
 		error: {
-			[vars$6.color]: globalRefs$5.colors.error.main
+			[vars$7.color]: globalRefs$6.colors.error.main
 		},
 		success: {
-			[vars$6.color]: globalRefs$5.colors.success.main
+			[vars$7.color]: globalRefs$6.colors.success.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$6.display]: 'block'
+		[vars$7.width]: '100%',
+		[vars$7.display]: 'block'
 	},
 	_italic: {
-		[vars$6.fontStyle]: 'italic'
+		[vars$7.fontStyle]: 'italic'
 	},
 	_uppercase: {
-		[vars$6.textTransform]: 'uppercase'
+		[vars$7.textTransform]: 'uppercase'
 	},
 	_lowercase: {
-		[vars$6.textTransform]: 'lowercase'
+		[vars$7.textTransform]: 'lowercase'
 	}
 };
 
-const globalRefs$4 = getThemeRefs(globals);
-const vars$5 = Link.cssVarList;
+const globalRefs$5 = getThemeRefs(globals);
+const vars$6 = Link.cssVarList;
 
 const link = {
-	[vars$5.cursor]: 'pointer',
-	[vars$5.borderBottomWidth]: '2px',
-	[vars$5.borderBottomStyle]: 'solid',
-	[vars$5.borderBottomColor]: 'transparent',
-	[vars$5.color]: globalRefs$4.colors.primary.main,
+	[vars$6.cursor]: 'pointer',
+	[vars$6.borderBottomWidth]: '2px',
+	[vars$6.borderBottomStyle]: 'solid',
+	[vars$6.borderBottomColor]: 'transparent',
+	[vars$6.color]: globalRefs$5.colors.primary.main,
 
 	_hover: {
-		[vars$5.borderBottomColor]: globalRefs$4.colors.primary.main
+		[vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
 	},
 
 	textAlign: {
-		right: { [vars$5.textAlign]: 'right' },
-		left: { [vars$5.textAlign]: 'left' },
-		center: { [vars$5.textAlign]: 'center' }
+		right: { [vars$6.textAlign]: 'right' },
+		left: { [vars$6.textAlign]: 'left' },
+		center: { [vars$6.textAlign]: 'center' }
 	},
 
 	_fullWidth: {
-		[vars$5.width]: '100%'
+		[vars$6.width]: '100%'
 	},
 
 	mode: {
 		primary: {
-			[vars$5.color]: globalRefs$4.colors.primary.main,
+			[vars$6.color]: globalRefs$5.colors.primary.main,
 			_hover: {
-				[vars$5.borderBottomColor]: globalRefs$4.colors.primary.main
+				[vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
 			}
 		},
 		secondary: {
-			[vars$5.color]: globalRefs$4.colors.secondary.main,
+			[vars$6.color]: globalRefs$5.colors.secondary.main,
 			_hover: {
-				[vars$5.borderBottomColor]: globalRefs$4.colors.secondary.main
+				[vars$6.borderBottomColor]: globalRefs$5.colors.secondary.main
 			}
 		},
 		error: {
-			[vars$5.color]: globalRefs$4.colors.error.main,
+			[vars$6.color]: globalRefs$5.colors.error.main,
 			_hover: {
-				[vars$5.borderBottomColor]: globalRefs$4.colors.error.main
+				[vars$6.borderBottomColor]: globalRefs$5.colors.error.main
 			}
 		},
 		success: {
-			[vars$5.color]: globalRefs$4.colors.success.main,
+			[vars$6.color]: globalRefs$5.colors.success.main,
 			_hover: {
-				[vars$5.borderBottomColor]: globalRefs$4.colors.success.main
+				[vars$6.borderBottomColor]: globalRefs$5.colors.success.main
 			}
 		}
 	}
 };
 
-const vars$4 = Divider.cssVarList;
+const vars$5 = Divider.cssVarList;
 
 const thickness = '2px';
 const textPaddingSize = '10px';
@@ -4925,30 +5008,62 @@ const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize
 
 const divider = {
 	...helperTheme,
-	[vars$4.alignItems]: 'center',
-	[vars$4.dividerHeight]: helperRefs.thickness,
-	[vars$4.backgroundColor]: 'currentColor',
-	[vars$4.opacity]: '0.2',
-	[vars$4.textPadding]: `0 ${helperRefs.textPaddingSize}`,
-	[vars$4.width]: '100%',
-	[vars$4.flexDirection]: 'row',
-	[vars$4.alignSelf]: 'strech',
-	[vars$4.textWidth]: 'fit-content',
-	[vars$4.maxTextWidth]: 'calc(100% - 100px)',
+	[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)',
 	_vertical: {
-		[vars$4.padding]: `0 calc(${thickness} * 3)`,
-		[vars$4.width]: 'fit-content',
-		[vars$4.textPadding]: `${helperRefs.textPaddingSize} 0`,
-		[vars$4.flexDirection]: 'column',
-		[vars$4.minHeight]: '200px',
-		[vars$4.textWidth]: 'fit-content',
-		[vars$4.dividerWidth]: helperRefs.thickness,
-		[vars$4.maxTextWidth]: '100%',
+		[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%',
 	}
 };
 
+const vars$4 = Passcode.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
+
 const passcode = {
-	...textField(Passcode.cssVarList),
+	[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,
+
+	_hideCursor: {
+		[vars$4.caretColor]: 'transparent',
+	},
+
+	_disabled: {
+		[vars$4.backgroundColor]: globalRefs$4.colors.surface.main
+	},
+
+	_fullWidth: {
+		[vars$4.width]: '100%'
+	},
+
+	_bordered: {
+		[vars$4.borderColor]: globalRefs$4.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,
+	},
 };
 
 const globalRefs$3 = getThemeRefs(globals);