@descope/web-components-ui 1.0.134 → 1.0.136

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, {
@@ -1519,7 +1519,7 @@ vaadin-checkbox::part(checkbox) {
 }
 `;
 
-const componentName$m = getComponentName('checkbox');
+const componentName$n = getComponentName('checkbox');
 
 const {
 	host: host$b,
@@ -1614,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,
@@ -1732,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();
@@ -1804,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();
 
@@ -1855,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();
 
@@ -1917,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();
 
@@ -2021,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();
 
@@ -2065,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,
@@ -2138,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({
@@ -2161,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();
 
@@ -2233,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$e, LogoClass);
+
+const componentName$d = getComponentName('totp-image');
+
+const TotpImageClass = createCssVarImageClass({ componentName: componentName$d, varName: 'url', fallbackVarName: 'fallbackUrl' });
 
-customElements.define(componentName$d, LogoClass);
+customElements.define(componentName$d, TotpImageClass);
 
 const componentName$c = getComponentName('number-field');
 
@@ -5566,7 +5575,7 @@ const globals = {
 	shadow,
 	fonts
 };
-const vars$m = getThemeVars(globals);
+const vars$n = getThemeVars(globals);
 
 const globalRefs$b = getThemeRefs(globals);
 const compVars$2 = ButtonClass.cssVarList;
@@ -5579,7 +5588,7 @@ const mode = {
 	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;
@@ -5661,7 +5670,7 @@ const button = {
 	}
 };
 
-const vars$l = {
+const vars$m = {
 	...compVars$2,
 	...helperVars$2
 };
@@ -5669,13 +5678,13 @@ 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$a = getThemeRefs(globals);
 
-const [theme$1, refs, vars$k] = createHelperVars({
+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,
@@ -5740,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,
@@ -5762,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$9 = 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,
@@ -5796,25 +5833,28 @@ const password = {
 	[vars$i.inputOutlineStyle]: refs.outlineStyle,
 	[vars$i.inputOutlineColor]: refs.outlineColor,
 	[vars$i.inputOutlineOffset]: refs.outlineOffset,
-	[vars$i.revealButtonOffset]: globalRefs$9.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,
@@ -5825,190 +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$8 = 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$8.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
 });
 
 getThemeRefs(globals);
-const vars$e = CheckboxClass.cssVarList;
+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.75em',
-	[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.inputBorderColor]: refs.borderColor,
-	[vars$e.inputBorderWidth]: refs.borderWidth,
-	[vars$e.inputBorderStyle]: refs.borderStyle,
-	[vars$e.inputBackgroundColor]: refs.inputBackgroundColor,
-	[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]: refs.backgroundColor,
-		[vars$e.inputValueTextColor]: refs.valueTextColor,
+		[vars$f.inputBackgroundColor]: refs.backgroundColor,
+		[vars$f.inputValueTextColor]: refs.valueTextColor,
 	},
 
 	_disabled: {
-		[vars$e.labelTextColor]: refs.labelTextColor,
+		[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]: refs.borderColor,
-    [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]: refs.borderColor,
-        [vars$d.trackBackgroundColor]: refs.backgroundColor,
-        [vars$d.knobLeftOffset]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
-        [vars$d.knobColor]: refs.valueTextColor,
-        [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.light,
-        [vars$d.trackBorderColor]: globalRefs$7.colors.surface.main,
-        [vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.main,
-        [vars$d.labelTextColor]: refs.labelTextColor,
+        [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$d.knobColor]: globalRefs$7.colors.surface.light,
-            [vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.main,
+            [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);
@@ -6032,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;
 
@@ -6107,7 +6116,7 @@ const container = {
 	}
 };
 
-const vars$c = {
+const vars$d = {
 	...compVars$1,
 	...helperVars$1
 };
@@ -6115,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://imgs.descope.com/components/totp-placeholder.svg)'
 };
 
-var logo$1 = /*#__PURE__*/Object.freeze({
+var totpImage = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: logo,
 	vars: vars$b
@@ -6276,7 +6297,7 @@ const [
 ] = createHelperVars({
 	thickness: '2px',
 	spacing: '10px'
-}, componentName$h);
+}, componentName$i);
 
 const divider = {
 	...helperTheme$1,
@@ -6402,7 +6423,7 @@ const [helperTheme, helperRefs] = createHelperVars({
 			spinnerColor: globalRefs$1.colors.secondary.main
 		}
 	}
-}, componentName$j);
+}, componentName$k);
 
 const loaderRadial = {
 	...helperTheme,
@@ -6560,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,
@@ -6578,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