@descope/web-components-ui 1.0.133 → 1.0.135

package/dist/index.esm.js

@@ -1223,7 +1223,7 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
   }
 };
 
-const componentName$o = getComponentName('button');
+const componentName$p = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1311,7 +1311,7 @@ const ButtonClass = compose(
 			${useHostExternalPadding(ButtonClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$o
+		componentName: componentName$p
 	})
 );
 
@@ -1344,7 +1344,7 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$o, ButtonClass);
+customElements.define(componentName$p, ButtonClass);
 
 const createBaseInputClass = (...args) => compose(
   inputValidationMixin,
@@ -1353,7 +1353,7 @@ const createBaseInputClass = (...args) => compose(
   inputEventsDispatchingMixin
 )(createBaseClass(...args));
 
-const componentName$n = getComponentName('boolean-field-internal');
+const componentName$o = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = [
 	'disabled',
@@ -1362,7 +1362,7 @@ const forwardAttributes$1 = [
 	'readonly'
 ];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$3 {
 	constructor() {
@@ -1426,14 +1426,14 @@ const booleanFieldMixin = (superclass) =>
 
             const template = document.createElement('template');
             template.innerHTML = `
-				<${componentName$n} 
+				<${componentName$o} 
 					tabindex="-1"
 					slot="input"
-				></${componentName$n}>
+				></${componentName$o}>
 			`;
 
             this.baseElement.appendChild(template.content.cloneNode(true));
-            this.inputElement = this.shadowRoot.querySelector(componentName$n);
+            this.inputElement = this.shadowRoot.querySelector(componentName$o);
             this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
             forwardAttrs(this, this.inputElement, {
@@ -1443,6 +1443,7 @@ const booleanFieldMixin = (superclass) =>
                     'size',
                     'label',
                     'invalid',
+                    'disabled'
                 ]
             });
 
@@ -1460,6 +1461,7 @@ ${resetInputFieldDefaultWidth()}
 
 .wrapper {
 	display: flex;
+	box-sizing: border-box;
 }
 
 vaadin-text-field {
@@ -1517,7 +1519,7 @@ vaadin-checkbox::part(checkbox) {
 }
 `;
 
-const componentName$m = getComponentName('checkbox');
+const componentName$n = getComponentName('checkbox');
 
 const {
 	host: host$b,
@@ -1562,6 +1564,7 @@ const CheckboxClass = compose(
 			labelTextColor: [
 				{ ...label$8, property: 'color' },
 				{ ...requiredIndicator$7, property: 'color' },
+				{ ...label$8, property: '-webkit-text-fill-color' }
 			],
 			labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
 
@@ -1575,19 +1578,26 @@ const CheckboxClass = compose(
 			],
 			inputValueTextColor: { ...checkboxSurface, property: 'color' },
 			inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
+
 			inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
+			inputBorderWidth: { ...checkboxElement, property: 'border-width' },
+			inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
+			inputBorderColor: { ...checkboxElement, property: 'border-color' },
+			inputBorderStyle: { ...checkboxElement, property: 'border-style' },
+
 			inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
 			inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
 			inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
 			inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+
 			inputSize: [
 				{ ...checkboxElement, property: 'width' },
-				{ ...label$8, property: 'margin-left' },
 				{ ...checkboxElement, property: 'height' },
 				{ ...checkboxSurface, property: 'font-size' },
 				{ ...component$1, property: 'font-size' },
+				{ ...checkboxHiddenLabel$1, property: 'line-height' },
+				{ ...label$8, property: 'margin-left' },
 				{ ...label$8, property: 'line-height' },
-				{ ...checkboxHiddenLabel$1, property: 'line-height' }
 			],
 		},
 	}),
@@ -1604,15 +1614,15 @@ const CheckboxClass = compose(
 			${useHostExternalPadding(CheckboxClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$m
+		componentName: componentName$n
 	})
 );
 
-customElements.define(componentName$n, BooleanInputInternal);
+customElements.define(componentName$o, BooleanInputInternal);
 
-customElements.define(componentName$m, CheckboxClass);
+customElements.define(componentName$n, CheckboxClass);
 
-const componentName$l = getComponentName('switch-toggle');
+const componentName$m = getComponentName('switch-toggle');
 
 const {
 	host: host$a,
@@ -1689,6 +1699,7 @@ const SwitchToggleClass = compose(
 			labelTextColor: [
 				{ ...label$7, property: 'color' },
 				{ ...requiredIndicator$6, property: 'color' },
+				{ ...label$7, property: '-webkit-text-fill-color' }
 			],
 			labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
 			inputOutlineWidth: { ...track, property: 'outline-width' },
@@ -1714,9 +1725,6 @@ const SwitchToggleClass = compose(
 			vaadin-checkbox[active]::part(checkbox) {
 				transform: none;
 			}
-			vaadin-checkbox[checked]::part(checkbox) {
-				background: none;
-			}
 			vaadin-checkbox::part(checkbox)::after {
 				position: absolute;
 				opacity: 1;
@@ -1724,17 +1732,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$l
+		componentName: componentName$m
 	})
 );
 
-customElements.define(componentName$l, SwitchToggleClass);
+customElements.define(componentName$m, SwitchToggleClass);
 
-const componentName$k = getComponentName('loader-linear');
+const componentName$l = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
 	static get componentName() {
-		return componentName$k;
+		return componentName$l;
 	}
 	constructor() {
 		super();
@@ -1796,11 +1804,11 @@ const LoaderLinearClass = compose(
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$k, LoaderLinearClass);
+customElements.define(componentName$l, LoaderLinearClass);
 
-const componentName$j = getComponentName('loader-radial');
+const componentName$k = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1847,11 +1855,11 @@ const LoaderRadialClass = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$j, LoaderRadialClass);
+customElements.define(componentName$k, LoaderRadialClass);
 
-const componentName$i = getComponentName('container');
+const componentName$j = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -1909,10 +1917,10 @@ const ContainerClass = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$i, ContainerClass);
+customElements.define(componentName$j, ContainerClass);
 
-const componentName$h = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
+const componentName$i = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -2013,9 +2021,9 @@ const DividerClass = compose(
 	componentNameValidationMixin
 )(RawDivider);
 
-const componentName$g = getComponentName('text');
+const componentName$h = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -2057,9 +2065,9 @@ const TextClass = compose(
 	componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$g, TextClass);
+customElements.define(componentName$h, TextClass);
 
-customElements.define(componentName$h, DividerClass);
+customElements.define(componentName$i, DividerClass);
 
 const {
 	host: host$7,
@@ -2130,7 +2138,7 @@ var textFieldMappings = {
 	inputPlaceholderColor: { ...placeholder$2, property: 'color' }
 };
 
-const componentName$f = getComponentName('email-field');
+const componentName$g = getComponentName('email-field');
 
 const EmailFieldClass = compose(
 	createStyleMixin({
@@ -2153,15 +2161,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$f
+		componentName: componentName$g
 	})
 );
 
-customElements.define(componentName$f, EmailFieldClass);
+customElements.define(componentName$g, EmailFieldClass);
 
-const componentName$e = getComponentName('link');
+const componentName$f = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$e, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$f, baseSelector: ':host a' }) {
 	constructor() {
 		super();
 
@@ -2225,56 +2233,65 @@ const LinkClass = compose(
 	componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$e, LinkClass);
-
-const componentName$d = getComponentName('logo');
+customElements.define(componentName$f, LinkClass);
 
 let style;
-const getStyle = () => style;
+const getContent = () => style;
+const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
+	class RawCssVarImageClass extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+		constructor() {
+			super();
+			this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+				:host([draggable="true"]) > div {
+					pointer-events: none
+				}		
+				:host > div {
+					display: inline-block;
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+					margin: auto;
+					${getContent()}
+				}
+			</style>
+			<div></div>
+			`;
+		}
+	}
 
-class RawLogo extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
-	constructor() {
-		super();
+	const CssVarImageClass = compose(
+		createStyleMixin({
+			mappings: {
+				height: { selector: () => ':host' },
+				width: { selector: () => ':host' },
+				[varName]: { property: 'content' },
+				[fallbackVarName]: { property: 'content' },
+			}
+		}),
+		draggableMixin,
+		componentNameValidationMixin
+	)(RawCssVarImageClass);
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			${getStyle()}
-		</style>
-		<div></div>`;
-	}
-}
+	style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;
 
-const LogoClass = compose(
-	createStyleMixin({
-		mappings: {
-			height: { selector: () => ':host' },
-			width: { selector: () => ':host' },
-			fallbackUrl: { property: 'content' },
-			url: { property: 'content' },
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawLogo);
+	return CssVarImageClass;
+};
 
-style = `
-:host {
-	display: inline-flex;
-}
-:host > div {
-	display: inline-block;
-	content: var(${LogoClass.cssVarList.url}, var(${LogoClass.cssVarList.fallbackUrl}));
-	max-width: 100%;
-	max-height: 100%;
-	object-fit: contain;
-	margin: auto;
-}
-:host([draggable="true"]) > div {
-	pointer-events: none
-}
-`;
+const componentName$e = getComponentName('logo');
+
+const LogoClass = createCssVarImageClass({ componentName: componentName$e, varName: 'url', fallbackVarName: 'fallbackUrl' });
 
-customElements.define(componentName$d, LogoClass);
+customElements.define(componentName$e, LogoClass);
+
+const componentName$d = getComponentName('totp-image');
+
+const TotpImageClass = createCssVarImageClass({ componentName: componentName$d, varName: 'url', fallbackVarName: 'fallbackUrl' });
+
+customElements.define(componentName$d, TotpImageClass);
 
 const componentName$c = getComponentName('number-field');
 
@@ -5558,20 +5575,20 @@ const globals = {
 	shadow,
 	fonts
 };
-const vars$m = getThemeVars(globals);
+const vars$n = getThemeVars(globals);
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 const compVars$2 = ButtonClass.cssVarList;
 
 const mode = {
-	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
+	primary: globalRefs$b.colors.primary,
+	secondary: globalRefs$b.colors.secondary,
+	success: globalRefs$b.colors.success,
+	error: globalRefs$b.colors.error,
+	surface: globalRefs$b.colors.surface
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$o);
+const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$p);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -5579,11 +5596,11 @@ const horizontalPaddingRatio = 2;
 const button = {
 	...helperTheme$3,
 
-	[compVars$2.fontFamily]: globalRefs$c.fonts.font1.family,
+	[compVars$2.fontFamily]: globalRefs$b.fonts.font1.family,
 
 	[compVars$2.cursor]: 'pointer',
 
-	[compVars$2.borderRadius]: globalRefs$c.radius.sm,
+	[compVars$2.borderRadius]: globalRefs$b.radius.sm,
 	[compVars$2.borderWidth]: '2px',
 	[compVars$2.borderStyle]: 'solid',
 	[compVars$2.borderColor]: 'transparent',
@@ -5653,7 +5670,7 @@ const button = {
 	}
 };
 
-const vars$l = {
+const vars$m = {
 	...compVars$2,
 	...helperVars$2
 };
@@ -5661,23 +5678,23 @@ const vars$l = {
 var button$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: button,
-	vars: vars$l
+	vars: vars$m
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 
-const [theme$1, refs, vars$k] = createHelperVars({
-    labelTextColor: globalRefs$b.colors.surface.contrast,
-    valueTextColor: globalRefs$b.colors.surface.contrast,
-    placeholderTextColor: globalRefs$b.colors.surface.main,
+const [theme$1, refs, vars$l] = createHelperVars({
+    labelTextColor: globalRefs$a.colors.surface.contrast,
+    valueTextColor: globalRefs$a.colors.surface.contrast,
+    placeholderTextColor: globalRefs$a.colors.surface.main,
     requiredIndicator: "'*'",
 
-    borderWidth: globalRefs$b.border.xs,
-    borderRadius: globalRefs$b.radius.xs,
+    borderWidth: globalRefs$a.border.xs,
+    borderRadius: globalRefs$a.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$b.border.sm,
+    outlineWidth: globalRefs$a.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -5688,9 +5705,9 @@ const [theme$1, refs, vars$k] = createHelperVars({
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$b.colors.surface.light,
+    backgroundColor: globalRefs$a.colors.surface.light,
 
-    fontFamily: globalRefs$b.fonts.font1.family,
+    fontFamily: globalRefs$a.fonts.font1.family,
 
     size: {
         xs: { fontSize: '12px' },
@@ -5704,26 +5721,27 @@ const [theme$1, refs, vars$k] = createHelperVars({
     },
 
     _focused: {
-        outlineColor: globalRefs$b.colors.surface.main,
+        outlineColor: globalRefs$a.colors.surface.main,
         _invalid: {
-            outlineColor: globalRefs$b.colors.error.main,
+            outlineColor: globalRefs$a.colors.error.main,
         }
     },
 
     _bordered: {
-        outlineWidth: globalRefs$b.border.xs,
-        borderColor: globalRefs$b.colors.surface.main,
+        outlineWidth: globalRefs$a.border.xs,
+        borderColor: globalRefs$a.colors.surface.main,
         borderStyle: 'solid',
         _invalid: {
-            borderColor: globalRefs$b.colors.error.main,
+            borderColor: globalRefs$a.colors.error.main,
         }
     },
 
     _disabled: {
-        labelTextColor: globalRefs$b.colors.surface.main,
-        valueTextColor: globalRefs$b.colors.surface.dark,
-        placeholderTextColor: globalRefs$b.colors.surface.dark,
-        backgroundColor: globalRefs$b.colors.surface.main
+        labelTextColor: globalRefs$a.colors.surface.main,
+        borderColor: globalRefs$a.colors.surface.main,
+        valueTextColor: globalRefs$a.colors.surface.dark,
+        placeholderTextColor: globalRefs$a.colors.surface.dark,
+        backgroundColor: globalRefs$a.colors.surface.main
     }
 }, componentName);
 
@@ -5731,20 +5749,54 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: theme$1,
 	refs: refs,
-	vars: vars$k
+	vars: vars$l
 });
 
-const vars$j = TextFieldClass.cssVarList;
+const vars$k = TextFieldClass.cssVarList;
 
 const textField = ({
+	[vars$k.hostWidth]: refs.width,
+	[vars$k.hostMinWidth]: refs.minWidth,
+	[vars$k.fontSize]: refs.fontSize,
+	[vars$k.fontFamily]: refs.fontFamily,
+	[vars$k.labelTextColor]: refs.labelTextColor,
+	[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$k.inputValueTextColor]: refs.valueTextColor,
+	[vars$k.inputPlaceholderColor]: refs.placeholderTextColor,
+	[vars$k.inputBorderWidth]: refs.borderWidth,
+	[vars$k.inputBorderStyle]: refs.borderStyle,
+	[vars$k.inputBorderColor]: refs.borderColor,
+	[vars$k.inputBorderRadius]: refs.borderRadius,
+	[vars$k.inputOutlineWidth]: refs.outlineWidth,
+	[vars$k.inputOutlineStyle]: refs.outlineStyle,
+	[vars$k.inputOutlineColor]: refs.outlineColor,
+	[vars$k.inputOutlineOffset]: refs.outlineOffset,
+	[vars$k.inputBackgroundColor]: refs.backgroundColor,
+	[vars$k.inputHeight]: refs.inputHeight,
+	[vars$k.inputHorizontalPadding]: refs.horizontalPadding
+});
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: textField,
+	textField: textField,
+	vars: vars$k
+});
+
+const globalRefs$9 = getThemeRefs(globals);
+const vars$j = PasswordClass.cssVarList;
+
+const password = {
 	[vars$j.hostWidth]: refs.width,
-	[vars$j.hostMinWidth]: refs.minWidth,
 	[vars$j.fontSize]: refs.fontSize,
 	[vars$j.fontFamily]: refs.fontFamily,
 	[vars$j.labelTextColor]: refs.labelTextColor,
+	[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
+	[vars$j.inputHeight]: refs.inputHeight,
+	[vars$j.inputBackgroundColor]: refs.backgroundColor,
 	[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars$j.inputValueTextColor]: refs.valueTextColor,
-	[vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
+	[vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
 	[vars$j.inputBorderWidth]: refs.borderWidth,
 	[vars$j.inputBorderStyle]: refs.borderStyle,
 	[vars$j.inputBorderColor]: refs.borderColor,
@@ -5753,32 +5805,26 @@ const textField = ({
 	[vars$j.inputOutlineStyle]: refs.outlineStyle,
 	[vars$j.inputOutlineColor]: refs.outlineColor,
 	[vars$j.inputOutlineOffset]: refs.outlineOffset,
-	[vars$j.inputBackgroundColor]: refs.backgroundColor,
-	[vars$j.inputHeight]: refs.inputHeight,
-	[vars$j.inputHorizontalPadding]: refs.horizontalPadding
-});
+	[vars$j.revealButtonOffset]: globalRefs$9.spacing.md,
+	[vars$j.revealButtonSize]: refs.toggleButtonSize
+};
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	default: textField,
-	textField: textField,
+	default: password,
 	vars: vars$j
 });
 
-const globalRefs$a = getThemeRefs(globals);
-const vars$i = PasswordClass.cssVarList;
+const vars$i = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
 	[vars$i.hostWidth]: refs.width,
+	[vars$i.hostMinWidth]: refs.minWidth,
 	[vars$i.fontSize]: refs.fontSize,
 	[vars$i.fontFamily]: refs.fontFamily,
 	[vars$i.labelTextColor]: refs.labelTextColor,
-	[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
-	[vars$i.inputHeight]: refs.inputHeight,
-	[vars$i.inputBackgroundColor]: refs.backgroundColor,
-	[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars$i.inputValueTextColor]: refs.valueTextColor,
-	[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars$i.inputPlaceholderColor]: refs.placeholderTextColor,
 	[vars$i.inputBorderWidth]: refs.borderWidth,
 	[vars$i.inputBorderStyle]: refs.borderStyle,
 	[vars$i.inputBorderColor]: refs.borderColor,
@@ -5787,25 +5833,28 @@ const password = {
 	[vars$i.inputOutlineStyle]: refs.outlineStyle,
 	[vars$i.inputOutlineColor]: refs.outlineColor,
 	[vars$i.inputOutlineOffset]: refs.outlineOffset,
-	[vars$i.revealButtonOffset]: globalRefs$a.spacing.md,
-	[vars$i.revealButtonSize]: refs.toggleButtonSize
+	[vars$i.inputBackgroundColor]: refs.backgroundColor,
+	[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
+	[vars$i.inputHeight]: refs.inputHeight
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	default: password,
+	default: numberField,
 	vars: vars$i
 });
 
-const vars$h = NumberFieldClass.cssVarList;
+const vars$h = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
 	[vars$h.hostWidth]: refs.width,
 	[vars$h.hostMinWidth]: refs.minWidth,
 	[vars$h.fontSize]: refs.fontSize,
 	[vars$h.fontFamily]: refs.fontFamily,
 	[vars$h.labelTextColor]: refs.labelTextColor,
 	[vars$h.inputValueTextColor]: refs.valueTextColor,
+	[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars$h.inputPlaceholderColor]: refs.placeholderTextColor,
 	[vars$h.inputBorderWidth]: refs.borderWidth,
 	[vars$h.inputBorderStyle]: refs.borderStyle,
@@ -5816,181 +5865,159 @@ const numberField = {
 	[vars$h.inputOutlineColor]: refs.outlineColor,
 	[vars$h.inputOutlineOffset]: refs.outlineOffset,
 	[vars$h.inputBackgroundColor]: refs.backgroundColor,
-	[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars$h.inputHorizontalPadding]: refs.horizontalPadding,
 	[vars$h.inputHeight]: refs.inputHeight
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	default: numberField,
+	default: emailField,
 	vars: vars$h
 });
 
-const vars$g = EmailFieldClass.cssVarList;
+const globalRefs$8 = getThemeRefs(globals);
+const vars$g = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
 	[vars$g.hostWidth]: refs.width,
 	[vars$g.hostMinWidth]: refs.minWidth,
-	[vars$g.fontSize]: refs.fontSize,
+	[vars$g.fontSize]: '14px',
 	[vars$g.fontFamily]: refs.fontFamily,
 	[vars$g.labelTextColor]: refs.labelTextColor,
-	[vars$g.inputValueTextColor]: refs.valueTextColor,
 	[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars$g.inputPlaceholderColor]: refs.placeholderTextColor,
+	[vars$g.inputBackgroundColor]: refs.backgroundColor,
+	[vars$g.inputValueTextColor]: refs.valueTextColor,
+	[vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars$g.inputBorderRadius]: refs.borderRadius,
 	[vars$g.inputBorderWidth]: refs.borderWidth,
 	[vars$g.inputBorderStyle]: refs.borderStyle,
 	[vars$g.inputBorderColor]: refs.borderColor,
-	[vars$g.inputBorderRadius]: refs.borderRadius,
 	[vars$g.inputOutlineWidth]: refs.outlineWidth,
 	[vars$g.inputOutlineStyle]: refs.outlineStyle,
 	[vars$g.inputOutlineColor]: refs.outlineColor,
 	[vars$g.inputOutlineOffset]: refs.outlineOffset,
-	[vars$g.inputBackgroundColor]: refs.backgroundColor,
-	[vars$g.inputHorizontalPadding]: refs.horizontalPadding,
-	[vars$g.inputHeight]: refs.inputHeight
-};
-
-var emailField$1 = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	default: emailField,
-	vars: vars$g
-});
-
-const globalRefs$9 = getThemeRefs(globals);
-const vars$f = TextAreaClass.cssVarList;
-
-const textArea = {
-	[vars$f.hostWidth]: refs.width,
-	[vars$f.hostMinWidth]: refs.minWidth,
-	[vars$f.fontSize]: '14px',
-	[vars$f.fontFamily]: refs.fontFamily,
-	[vars$f.labelTextColor]: refs.labelTextColor,
-	[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars$f.inputBackgroundColor]: refs.backgroundColor,
-	[vars$f.inputValueTextColor]: refs.valueTextColor,
-	[vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
-	[vars$f.inputBorderRadius]: refs.borderRadius,
-	[vars$f.inputBorderWidth]: refs.borderWidth,
-	[vars$f.inputBorderStyle]: refs.borderStyle,
-	[vars$f.inputBorderColor]: refs.borderColor,
-	[vars$f.inputOutlineWidth]: refs.outlineWidth,
-	[vars$f.inputOutlineStyle]: refs.outlineStyle,
-	[vars$f.inputOutlineColor]: refs.outlineColor,
-	[vars$f.inputOutlineOffset]: refs.outlineOffset,
-	[vars$f.inputResizeType]: 'vertical',
+	[vars$g.inputResizeType]: 'vertical',
 
 	_disabled: {
-		[vars$f.inputBackgroundColor]: globalRefs$9.colors.surface.light,
+		[vars$g.inputBackgroundColor]: globalRefs$8.colors.surface.light,
 	},
 
 	_readonly: {
-		[vars$f.inputResizeType]: 'none',
+		[vars$g.inputResizeType]: 'none',
 	}
 };
 
 var textArea$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: textArea,
-	vars: vars$f
+	vars: vars$g
 });
 
-const globalRefs$8 = getThemeRefs(globals);
-const vars$e = CheckboxClass.cssVarList;
+getThemeRefs(globals);
+const vars$f = CheckboxClass.cssVarList;
 
 const checkbox = {
-	[vars$e.hostWidth]: refs.width,
-	[vars$e.fontSize]: refs.fontSize,
-	[vars$e.fontFamily]: refs.fontFamily,
-	[vars$e.labelTextColor]: refs.labelTextColor,
-	[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars$e.labelFontWeight]: '400',
-	[vars$e.labelSpacing]: '0.5em',
-	[vars$e.inputOutlineWidth]: refs.outlineWidth,
-	[vars$e.inputOutlineOffset]: refs.outlineOffset,
-	[vars$e.inputOutlineColor]: refs.outlineColor,
-	[vars$e.inputOutlineStyle]: refs.outlineStyle,
-	[vars$e.inputBorderRadius]: refs.borderRadius,
-	[vars$e.inputBackgroundColor]: globalRefs$8.colors.surface.main,
-	[vars$e.inputSize]: '2em',
+	[vars$f.hostWidth]: refs.width,
+	[vars$f.fontSize]: refs.fontSize,
+	[vars$f.fontFamily]: refs.fontFamily,
+	[vars$f.labelTextColor]: refs.labelTextColor,
+	[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$f.labelFontWeight]: '400',
+	[vars$f.labelSpacing]: '0.75em',
+	[vars$f.inputOutlineWidth]: refs.outlineWidth,
+	[vars$f.inputOutlineOffset]: refs.outlineOffset,
+	[vars$f.inputOutlineColor]: refs.outlineColor,
+	[vars$f.inputOutlineStyle]: refs.outlineStyle,
+	[vars$f.inputBorderRadius]: refs.borderRadius,
+	[vars$f.inputBorderColor]: refs.borderColor,
+	[vars$f.inputBorderWidth]: refs.borderWidth,
+	[vars$f.inputBorderStyle]: refs.borderStyle,
+	[vars$f.inputBackgroundColor]: refs.inputBackgroundColor,
+	[vars$f.inputSize]: '2em',
 
 	_checked: {
-		[vars$e.inputBackgroundColor]: globalRefs$8.colors.primary.main,
-		[vars$e.inputValueTextColor]: globalRefs$8.colors.primary.contrast,
+		[vars$f.inputBackgroundColor]: refs.backgroundColor,
+		[vars$f.inputValueTextColor]: refs.valueTextColor,
 	},
 
 	_disabled: {
-		[vars$e.inputBackgroundColor]: globalRefs$8.colors.surface.main,
+		[vars$f.labelTextColor]: refs.labelTextColor,
 	},
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: checkbox,
-	vars: vars$e
+	vars: vars$f
 });
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
 const globalRefs$7 = getThemeRefs(globals);
-const vars$d = SwitchToggleClass.cssVarList;
+const vars$e = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-    [vars$d.fontSize]: refs.fontSize,
-    [vars$d.fontFamily]: refs.fontFamily,
-
-    [vars$d.inputOutlineWidth]: refs.outlineWidth,
-    [vars$d.inputOutlineOffset]: refs.outlineOffset,
-    [vars$d.inputOutlineColor]: refs.outlineColor,
-    [vars$d.inputOutlineStyle]: refs.outlineStyle,
-
-    [vars$d.trackBorderStyle]: refs.borderStyle,
-    [vars$d.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-    [vars$d.trackBorderColor]: globalRefs$7.colors.surface.contrast,
-    [vars$d.trackBackgroundColor]: 'none',
-    [vars$d.trackBorderRadius]: globalRefs$7.radius.md,
-    [vars$d.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-    [vars$d.trackHeight]: checkboxHeight,
-
-    [vars$d.knobSize]: `calc(1em - ${knobMargin})`,
-    [vars$d.knobRadius]: '50%',
-    [vars$d.knobTopOffset]: '1px',
-    [vars$d.knobLeftOffset]: knobMargin,
-    [vars$d.knobColor]: refs.valueTextColor,
-    [vars$d.knobTransitionDuration]: '0.3s',
-
-    [vars$d.labelTextColor]: refs.labelTextColor,
-    [vars$d.labelFontWeight]: '400',
-    [vars$d.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
-    [vars$d.labelSpacing]: '0.25em',
-    [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
-
-    [vars$d.hostWidth]: refs.width,
+    [vars$e.fontSize]: refs.fontSize,
+    [vars$e.fontFamily]: refs.fontFamily,
+
+    [vars$e.inputOutlineWidth]: refs.outlineWidth,
+    [vars$e.inputOutlineOffset]: refs.outlineOffset,
+    [vars$e.inputOutlineColor]: refs.outlineColor,
+    [vars$e.inputOutlineStyle]: refs.outlineStyle,
+
+    [vars$e.trackBorderStyle]: refs.borderStyle,
+    [vars$e.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+    [vars$e.trackBorderColor]: refs.borderColor,
+    [vars$e.trackBackgroundColor]: 'none',
+    [vars$e.trackBorderRadius]: globalRefs$7.radius.md,
+    [vars$e.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+    [vars$e.trackHeight]: checkboxHeight,
+
+    [vars$e.knobSize]: `calc(1em - ${knobMargin})`,
+    [vars$e.knobRadius]: '50%',
+    [vars$e.knobTopOffset]: '1px',
+    [vars$e.knobLeftOffset]: knobMargin,
+    [vars$e.knobColor]: refs.valueTextColor,
+    [vars$e.knobTransitionDuration]: '0.3s',
+
+    [vars$e.labelTextColor]: refs.labelTextColor,
+    [vars$e.labelFontWeight]: '400',
+    [vars$e.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
+    [vars$e.labelSpacing]: '0.25em',
+    [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
+
+    [vars$e.hostWidth]: refs.width,
 
     _checked: {
-        [vars$d.trackBorderColor]: globalRefs$7.colors.primary.main,
-        [vars$d.knobLeftOffset]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
-        [vars$d.knobColor]: globalRefs$7.colors.primary.main,
-        [vars$d.knobTextColor]: refs.valueTextColor,
+        [vars$e.trackBorderColor]: refs.borderColor,
+        [vars$e.trackBackgroundColor]: refs.backgroundColor,
+        [vars$e.knobLeftOffset]: `calc(100% - var(${vars$e.knobSize}) - ${knobMargin})`,
+        [vars$e.knobColor]: refs.valueTextColor,
+        [vars$e.knobTextColor]: refs.valueTextColor,
     },
 
     _disabled: {
-        [vars$d.knobColor]: globalRefs$7.colors.surface.main,
-        [vars$d.trackBorderColor]: globalRefs$7.colors.surface.main,
-        [vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.light,
+        [vars$e.knobColor]: globalRefs$7.colors.surface.light,
+        [vars$e.trackBorderColor]: globalRefs$7.colors.surface.main,
+        [vars$e.trackBackgroundColor]: globalRefs$7.colors.surface.main,
+        [vars$e.labelTextColor]: refs.labelTextColor,
+        _checked: {
+            [vars$e.knobColor]: globalRefs$7.colors.surface.light,
+            [vars$e.trackBackgroundColor]: globalRefs$7.colors.surface.main,
+        }
     },
 
     _invalid: {
-        [vars$d.trackBorderColor]: globalRefs$7.colors.error.main,
-        [vars$d.knobColor]: globalRefs$7.colors.error.main,
+        [vars$e.trackBorderColor]: globalRefs$7.colors.error.main,
+        [vars$e.knobColor]: globalRefs$7.colors.error.main,
     },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: switchToggle,
-	vars: vars$d
+	vars: vars$e
 });
 
 const globalRefs$6 = getThemeRefs(globals);
@@ -6014,7 +6041,7 @@ const [helperTheme$2, helperRefs$2, helperVars$1] =
 		verticalAlignment,
 		horizontalAlignment,
 		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
-	}, componentName$i);
+	}, componentName$j);
 
 const { shadowColor } = helperRefs$2;
 
@@ -6089,7 +6116,7 @@ const container = {
 	}
 };
 
-const vars$c = {
+const vars$d = {
 	...compVars$1,
 	...helperVars$1
 };
@@ -6097,16 +6124,28 @@ const vars$c = {
 var container$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: container,
+	vars: vars$d
+});
+
+const vars$c = LogoClass.cssVarList;
+
+const logo$1 = {
+	[vars$c.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
+};
+
+var logo$2 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: logo$1,
 	vars: vars$c
 });
 
-const vars$b = LogoClass.cssVarList;
+const vars$b = TotpImageClass.cssVarList;
 
 const logo = {
-	[vars$b.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
+	[vars$b.fallbackUrl]: 'url(https://app.descope.com/images/99ae31fd143ba38e072d.svg)'
 };
 
-var logo$1 = /*#__PURE__*/Object.freeze({
+var totpImage = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: logo,
 	vars: vars$b
@@ -6258,7 +6297,7 @@ const [
 ] = createHelperVars({
 	thickness: '2px',
 	spacing: '10px'
-}, componentName$h);
+}, componentName$i);
 
 const divider = {
 	...helperTheme$1,
@@ -6384,7 +6423,7 @@ const [helperTheme, helperRefs] = createHelperVars({
 			spinnerColor: globalRefs$1.colors.secondary.main
 		}
 	}
-}, componentName$j);
+}, componentName$k);
 
 const loaderRadial = {
 	...helperTheme,
@@ -6542,7 +6581,8 @@ const components = {
 	checkbox: checkbox$1,
 	switchToggle: switchToggle$1,
 	container: container$1,
-	logo: logo$1,
+	logo: logo$2,
+	totpImage,
 	text: text$1,
 	link: link$1,
 	divider: divider$1,
@@ -6560,7 +6600,7 @@ const theme = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: c
 const vars = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].vars }), {});
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$m, components: vars };
+const themeVars = { globals: vars$n, components: vars };
 
-export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map