@descope/web-components-ui 1.0.134 → 1.0.136

package/dist/cjs/index.cjs.js

@@ -508,7 +508,7 @@ const globals = {
 	shadow,
 	fonts
 };
-const vars$m = getThemeVars(globals);
+const vars$n = getThemeVars(globals);
 
 const resetInputOverrides = (name, cssVarList) => `
     ${resetInputContainer(name)}
@@ -1555,7 +1555,7 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
   }
 };
 
-const componentName$o = getComponentName('button');
+const componentName$p = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1643,7 +1643,7 @@ const ButtonClass = compose(
 			${useHostExternalPadding(ButtonClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$o
+		componentName: componentName$p
 	})
 );
 
@@ -1687,7 +1687,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;
@@ -1769,7 +1769,7 @@ const button = {
 	}
 };
 
-const vars$l = {
+const vars$m = {
 	...compVars$2,
 	...helperVars$2
 };
@@ -1777,7 +1777,7 @@ const vars$l = {
 var button$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: button,
-	vars: vars$l
+	vars: vars$m
 });
 
 const {
@@ -1849,7 +1849,7 @@ var textFieldMappings = {
 	inputPlaceholderColor: { ...placeholder$2, property: 'color' }
 };
 
-const componentName$n = getComponentName('text-field');
+const componentName$o = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -1895,14 +1895,14 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$n
+		componentName: componentName$o
 	})
 );
 
-const componentName$m = getComponentName('input-wrapper');
+const componentName$n = 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,
@@ -1961,44 +1961,44 @@ const [theme$1, refs, vars$k] = createHelperVars({
         placeholderTextColor: globalRefs$a.colors.surface.dark,
         backgroundColor: globalRefs$a.colors.surface.main
     }
-}, componentName$m);
+}, componentName$n);
 
 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$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.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars$j.inputValueTextColor]: refs.valueTextColor,
-	[vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
-	[vars$j.inputBorderWidth]: refs.borderWidth,
-	[vars$j.inputBorderStyle]: refs.borderStyle,
-	[vars$j.inputBorderColor]: refs.borderColor,
-	[vars$j.inputBorderRadius]: refs.borderRadius,
-	[vars$j.inputOutlineWidth]: refs.outlineWidth,
-	[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$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$j
+	vars: vars$k
 });
 
 const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
@@ -2034,7 +2034,7 @@ const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass
 	}
 };
 
-const componentName$l = getComponentName('password');
+const componentName$m = getComponentName('password');
 
 const {
 	host: host$a,
@@ -2170,43 +2170,43 @@ const PasswordClass = compose(
 			}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$l
+		componentName: componentName$m
 	})
 );
 
 const globalRefs$9 = getThemeRefs(globals);
-const vars$i = PasswordClass.cssVarList;
+const vars$j = PasswordClass.cssVarList;
 
 const password = {
-	[vars$i.hostWidth]: refs.width,
-	[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.inputBorderWidth]: refs.borderWidth,
-	[vars$i.inputBorderStyle]: refs.borderStyle,
-	[vars$i.inputBorderColor]: refs.borderColor,
-	[vars$i.inputBorderRadius]: refs.borderRadius,
-	[vars$i.inputOutlineWidth]: refs.outlineWidth,
-	[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$j.hostWidth]: refs.width,
+	[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.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars$j.inputBorderWidth]: refs.borderWidth,
+	[vars$j.inputBorderStyle]: refs.borderStyle,
+	[vars$j.inputBorderColor]: refs.borderColor,
+	[vars$j.inputBorderRadius]: refs.borderRadius,
+	[vars$j.inputOutlineWidth]: refs.outlineWidth,
+	[vars$j.inputOutlineStyle]: refs.outlineStyle,
+	[vars$j.inputOutlineColor]: refs.outlineColor,
+	[vars$j.inputOutlineOffset]: refs.outlineOffset,
+	[vars$j.revealButtonOffset]: globalRefs$9.spacing.md,
+	[vars$j.revealButtonSize]: refs.toggleButtonSize
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: password,
-	vars: vars$i
+	vars: vars$j
 });
 
-const componentName$k = getComponentName('number-field');
+const componentName$l = getComponentName('number-field');
 
 const NumberFieldClass = compose(
 	createStyleMixin({
@@ -2229,41 +2229,41 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$k
+		componentName: componentName$l
 	})
 );
 
-const vars$h = NumberFieldClass.cssVarList;
+const vars$i = NumberFieldClass.cssVarList;
 
 const numberField = {
-	[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.inputPlaceholderColor]: refs.placeholderTextColor,
-	[vars$h.inputBorderWidth]: refs.borderWidth,
-	[vars$h.inputBorderStyle]: refs.borderStyle,
-	[vars$h.inputBorderColor]: refs.borderColor,
-	[vars$h.inputBorderRadius]: refs.borderRadius,
-	[vars$h.inputOutlineWidth]: refs.outlineWidth,
-	[vars$h.inputOutlineStyle]: refs.outlineStyle,
-	[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
+	[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.inputValueTextColor]: refs.valueTextColor,
+	[vars$i.inputPlaceholderColor]: refs.placeholderTextColor,
+	[vars$i.inputBorderWidth]: refs.borderWidth,
+	[vars$i.inputBorderStyle]: refs.borderStyle,
+	[vars$i.inputBorderColor]: refs.borderColor,
+	[vars$i.inputBorderRadius]: refs.borderRadius,
+	[vars$i.inputOutlineWidth]: refs.outlineWidth,
+	[vars$i.inputOutlineStyle]: refs.outlineStyle,
+	[vars$i.inputOutlineColor]: refs.outlineColor,
+	[vars$i.inputOutlineOffset]: refs.outlineOffset,
+	[vars$i.inputBackgroundColor]: refs.backgroundColor,
+	[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
+	[vars$i.inputHeight]: refs.inputHeight
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: numberField,
-	vars: vars$h
+	vars: vars$i
 });
 
-const componentName$j = getComponentName('email-field');
+const componentName$k = getComponentName('email-field');
 
 const EmailFieldClass = compose(
 	createStyleMixin({
@@ -2286,41 +2286,41 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$j
+		componentName: componentName$k
 	})
 );
 
-const vars$g = EmailFieldClass.cssVarList;
+const vars$h = EmailFieldClass.cssVarList;
 
 const emailField = {
-	[vars$g.hostWidth]: refs.width,
-	[vars$g.hostMinWidth]: refs.minWidth,
-	[vars$g.fontSize]: refs.fontSize,
-	[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.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
+	[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,
+	[vars$h.inputBorderColor]: refs.borderColor,
+	[vars$h.inputBorderRadius]: refs.borderRadius,
+	[vars$h.inputOutlineWidth]: refs.outlineWidth,
+	[vars$h.inputOutlineStyle]: refs.outlineStyle,
+	[vars$h.inputOutlineColor]: refs.outlineColor,
+	[vars$h.inputOutlineOffset]: refs.outlineOffset,
+	[vars$h.inputBackgroundColor]: refs.backgroundColor,
+	[vars$h.inputHorizontalPadding]: refs.horizontalPadding,
+	[vars$h.inputHeight]: refs.inputHeight
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: emailField,
-	vars: vars$g
+	vars: vars$h
 });
 
-const componentName$i = getComponentName('text-area');
+const componentName$j = getComponentName('text-area');
 
 const {
 	host: host$9,
@@ -2395,46 +2395,46 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$i
+		componentName: componentName$j
 	})
 );
 
 const globalRefs$8 = getThemeRefs(globals);
-const vars$f = TextAreaClass.cssVarList;
+const vars$g = 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.hostWidth]: refs.width,
+	[vars$g.hostMinWidth]: refs.minWidth,
+	[vars$g.fontSize]: '14px',
+	[vars$g.fontFamily]: refs.fontFamily,
+	[vars$g.labelTextColor]: refs.labelTextColor,
+	[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
+	[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.inputOutlineWidth]: refs.outlineWidth,
+	[vars$g.inputOutlineStyle]: refs.outlineStyle,
+	[vars$g.inputOutlineColor]: refs.outlineColor,
+	[vars$g.inputOutlineOffset]: refs.outlineOffset,
+	[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
 });
 
 const createBaseInputClass = (...args) => compose(
@@ -2444,9 +2444,9 @@ const createBaseInputClass = (...args) => compose(
   inputEventsDispatchingMixin
 )(createBaseClass(...args));
 
-const componentName$h = getComponentName('boolean-field-internal');
+const componentName$i = getComponentName('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
     class BooleanFieldMixinClass extends superclass {
@@ -2459,14 +2459,14 @@ const booleanFieldMixin = (superclass) =>
 
             const template = document.createElement('template');
             template.innerHTML = `
-				<${componentName$h} 
+				<${componentName$i} 
 					tabindex="-1"
 					slot="input"
-				></${componentName$h}>
+				></${componentName$i}>
 			`;
 
             this.baseElement.appendChild(template.content.cloneNode(true));
-            this.inputElement = this.shadowRoot.querySelector(componentName$h);
+            this.inputElement = this.shadowRoot.querySelector(componentName$i);
             this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
             forwardAttrs(this, this.inputElement, {
@@ -2552,7 +2552,7 @@ vaadin-checkbox::part(checkbox) {
 }
 `;
 
-const componentName$g = getComponentName('checkbox');
+const componentName$h = getComponentName('checkbox');
 
 const {
 	host: host$8,
@@ -2647,49 +2647,49 @@ const CheckboxClass = compose(
 			${useHostExternalPadding(CheckboxClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$g
+		componentName: componentName$h
 	})
 );
 
 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 componentName$f = getComponentName('switch-toggle');
+const componentName$g = getComponentName('switch-toggle');
 
 const {
 	host: host$7,
@@ -2799,7 +2799,7 @@ const SwitchToggleClass = compose(
 			}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$f
+		componentName: componentName$g
 	})
 );
 
@@ -2807,74 +2807,74 @@ 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 componentName$e = getComponentName('container');
+const componentName$f = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -2953,7 +2953,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$e);
+	}, componentName$f);
 
 const { shadowColor } = helperRefs$2;
 
@@ -3028,7 +3028,7 @@ const container = {
 	}
 };
 
-const vars$c = {
+const vars$d = {
 	...compVars$1,
 	...helperVars$1
 };
@@ -3036,63 +3036,82 @@ const vars$c = {
 var container$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: container,
-	vars: vars$c
+	vars: vars$d
 });
 
-const componentName$d = getComponentName('logo');
-
 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' });
+
+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 componentName$d = getComponentName('totp-image');
+
+const TotpImageClass = createCssVarImageClass({ componentName: componentName$d, varName: 'url', fallbackVarName: 'fallbackUrl' });
 
-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
@@ -5849,7 +5868,8 @@ const components = {
 	checkbox: checkbox$1,
 	switchToggle: switchToggle$1,
 	container: container$1,
-	logo: logo$1,
+	logo: logo$2,
+	totpImage,
 	text: text$3,
 	link: link$1,
 	divider: divider$1,
@@ -5867,7 +5887,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 };
 
 exports.ButtonClass = ButtonClass;
 exports.CheckboxClass = CheckboxClass;
@@ -5888,6 +5908,7 @@ exports.SwitchToggleClass = SwitchToggleClass;
 exports.TextAreaClass = TextAreaClass;
 exports.TextClass = TextClass;
 exports.TextFieldClass = TextFieldClass;
+exports.TotpImageClass = TotpImageClass;
 exports.componentsThemeManager = componentsThemeManager;
 exports.createComponentsTheme = createComponentsTheme;
 exports.createHelperVars = createHelperVars;