@descope/web-components-ui 1.0.258 → 1.0.260

package/dist/cjs/index.cjs.js

@@ -526,10 +526,9 @@ const globals = {
   fonts,
   direction,
 };
-const vars$x = getThemeVars(globals);
+const vars$y = getThemeVars(globals);
 
-const createCssVarFallback = (first, ...rest) =>
-  `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
 
 const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
   isFunction(relativeSelectorOrSelectorFn)
@@ -582,13 +581,15 @@ const createStyle = (componentName, baseSelector, mappings) => {
 
     const cssVarName = getCssVarName(componentName, attr);
 
-    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
-      style.add(
-        createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-        isFunction(property) ? property() : property,
-        createCssVarFallback(cssVarName) + (important ? '!important' : '')
-      );
-    });
+    attrConfig.forEach(
+      ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
+        style.add(
+          createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+          isFunction(property) ? property() : property,
+          createCssVar(cssVarName, fallback) + (important ? '!important' : '')
+        );
+      }
+    );
   });
 
   return style.toString();
@@ -2413,7 +2414,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$E = getComponentName('button');
+const componentName$F = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -2432,7 +2433,6 @@ const resetStyles = `
 		box-shadow: none;
 	}
 	vaadin-button::part(label) {
-    justify-content: center;
 		padding: 0;
     width: 100%;
 	}
@@ -2486,7 +2486,7 @@ const ButtonClass = compose(
       labelTextColor: { property: 'color' },
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
       labelSpacing: { ...label$a, property: 'gap' },
-      textAlign: { ...label$a, property: 'justify-content', important: true },
+      textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
     },
   }),
   clickableMixin,
@@ -2516,7 +2516,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
@@ -2564,7 +2564,7 @@ const mode = {
   surface: globalRefs$i.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$F);
 
 const button = {
   ...helperTheme$3,
@@ -2669,7 +2669,7 @@ const button = {
   },
 };
 
-const vars$w = {
+const vars$x = {
   ...compVars$4,
   ...helperVars$3,
 };
@@ -2677,7 +2677,7 @@ const vars$w = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$w
+  vars: vars$x
 });
 
 const { host: host$g, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$b, inputField: inputField$6, input, helperText: helperText$9, errorMessage: errorMessage$b } =
@@ -2864,7 +2864,7 @@ const resetInputLabelPosition = (name) => `
     }
 `;
 
-const componentName$D = getComponentName('text-field');
+const componentName$E = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -2914,14 +2914,14 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
-const componentName$C = getComponentName('input-wrapper');
+const componentName$D = getComponentName('input-wrapper');
 const globalRefs$h = getThemeRefs(globals);
 
-const [theme$1, refs, vars$v] = createHelperVars(
+const [theme$1, refs, vars$w] = createHelperVars(
   {
     labelTextColor: globalRefs$h.colors.surface.contrast,
     valueTextColor: globalRefs$h.colors.surface.contrast,
@@ -2987,44 +2987,44 @@ const [theme$1, refs, vars$v] = createHelperVars(
       backgroundColor: globalRefs$h.colors.surface.main,
     },
   },
-  componentName$C
+  componentName$D
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$v
+  vars: vars$w
 });
 
-const vars$u = TextFieldClass.cssVarList;
+const vars$v = TextFieldClass.cssVarList;
 
 const textField = {
-  [vars$u.hostWidth]: refs.width,
-  [vars$u.hostMinWidth]: refs.minWidth,
-  [vars$u.hostDirection]: refs.direction,
-  [vars$u.fontSize]: refs.fontSize,
-  [vars$u.fontFamily]: refs.fontFamily,
-  [vars$u.labelTextColor]: refs.labelTextColor,
-  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$u.inputValueTextColor]: refs.valueTextColor,
-  [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$u.inputBorderWidth]: refs.borderWidth,
-  [vars$u.inputBorderStyle]: refs.borderStyle,
-  [vars$u.inputBorderColor]: refs.borderColor,
-  [vars$u.inputBorderRadius]: refs.borderRadius,
-  [vars$u.inputOutlineWidth]: refs.outlineWidth,
-  [vars$u.inputOutlineStyle]: refs.outlineStyle,
-  [vars$u.inputOutlineColor]: refs.outlineColor,
-  [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.inputBackgroundColor]: refs.backgroundColor,
-  [vars$u.inputHeight]: refs.inputHeight,
-  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$v.hostWidth]: refs.width,
+  [vars$v.hostMinWidth]: refs.minWidth,
+  [vars$v.hostDirection]: refs.direction,
+  [vars$v.fontSize]: refs.fontSize,
+  [vars$v.fontFamily]: refs.fontFamily,
+  [vars$v.labelTextColor]: refs.labelTextColor,
+  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$v.inputValueTextColor]: refs.valueTextColor,
+  [vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$v.inputBorderWidth]: refs.borderWidth,
+  [vars$v.inputBorderStyle]: refs.borderStyle,
+  [vars$v.inputBorderColor]: refs.borderColor,
+  [vars$v.inputBorderRadius]: refs.borderRadius,
+  [vars$v.inputOutlineWidth]: refs.outlineWidth,
+  [vars$v.inputOutlineStyle]: refs.outlineStyle,
+  [vars$v.inputOutlineColor]: refs.outlineColor,
+  [vars$v.inputOutlineOffset]: refs.outlineOffset,
+  [vars$v.inputBackgroundColor]: refs.backgroundColor,
+  [vars$v.inputHeight]: refs.inputHeight,
+  [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
   textAlign: {
-    right: { [vars$u.inputTextAlign]: 'right' },
-    left: { [vars$u.inputTextAlign]: 'left' },
-    center: { [vars$u.inputTextAlign]: 'center' },
+    right: { [vars$v.inputTextAlign]: 'right' },
+    left: { [vars$v.inputTextAlign]: 'left' },
+    center: { [vars$v.inputTextAlign]: 'center' },
   },
 };
 
@@ -3032,7 +3032,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textField,
   textField: textField,
-  vars: vars$u
+  vars: vars$v
 });
 
 const passwordDraggableMixin = (superclass) =>
@@ -3069,7 +3069,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$B = getComponentName('password');
+const componentName$C = getComponentName('password');
 
 const {
   host: host$f,
@@ -3200,45 +3200,45 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$B,
+    componentName: componentName$C,
   })
 );
 
 const globalRefs$g = getThemeRefs(globals);
-const vars$t = PasswordClass.cssVarList;
+const vars$u = PasswordClass.cssVarList;
 
 const password = {
-  [vars$t.hostWidth]: refs.width,
-  [vars$t.hostDirection]: refs.direction,
-  [vars$t.fontSize]: refs.fontSize,
-  [vars$t.fontFamily]: refs.fontFamily,
-  [vars$t.labelTextColor]: refs.labelTextColor,
-  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$t.inputHeight]: refs.inputHeight,
-  [vars$t.inputBackgroundColor]: refs.backgroundColor,
-  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$t.inputValueTextColor]: refs.valueTextColor,
-  [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$t.inputBorderWidth]: refs.borderWidth,
-  [vars$t.inputBorderStyle]: refs.borderStyle,
-  [vars$t.inputBorderColor]: refs.borderColor,
-  [vars$t.inputBorderRadius]: refs.borderRadius,
-  [vars$t.inputOutlineWidth]: refs.outlineWidth,
-  [vars$t.inputOutlineStyle]: refs.outlineStyle,
-  [vars$t.inputOutlineColor]: refs.outlineColor,
-  [vars$t.inputOutlineOffset]: refs.outlineOffset,
-  [vars$t.revealButtonOffset]: globalRefs$g.spacing.md,
-  [vars$t.revealButtonSize]: refs.toggleButtonSize,
+  [vars$u.hostWidth]: refs.width,
+  [vars$u.hostDirection]: refs.direction,
+  [vars$u.fontSize]: refs.fontSize,
+  [vars$u.fontFamily]: refs.fontFamily,
+  [vars$u.labelTextColor]: refs.labelTextColor,
+  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$u.inputHeight]: refs.inputHeight,
+  [vars$u.inputBackgroundColor]: refs.backgroundColor,
+  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$u.inputValueTextColor]: refs.valueTextColor,
+  [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$u.inputBorderWidth]: refs.borderWidth,
+  [vars$u.inputBorderStyle]: refs.borderStyle,
+  [vars$u.inputBorderColor]: refs.borderColor,
+  [vars$u.inputBorderRadius]: refs.borderRadius,
+  [vars$u.inputOutlineWidth]: refs.outlineWidth,
+  [vars$u.inputOutlineStyle]: refs.outlineStyle,
+  [vars$u.inputOutlineColor]: refs.outlineColor,
+  [vars$u.inputOutlineOffset]: refs.outlineOffset,
+  [vars$u.revealButtonOffset]: globalRefs$g.spacing.md,
+  [vars$u.revealButtonSize]: refs.toggleButtonSize,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: password,
-  vars: vars$t
+  vars: vars$u
 });
 
-const componentName$A = getComponentName('number-field');
+const componentName$B = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -3264,43 +3264,43 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
 
-const vars$s = NumberFieldClass.cssVarList;
+const vars$t = NumberFieldClass.cssVarList;
 
 const numberField = {
-  [vars$s.hostWidth]: refs.width,
-  [vars$s.hostMinWidth]: refs.minWidth,
-  [vars$s.hostDirection]: refs.direction,
-  [vars$s.fontSize]: refs.fontSize,
-  [vars$s.fontFamily]: refs.fontFamily,
-  [vars$s.labelTextColor]: refs.labelTextColor,
-  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$s.inputValueTextColor]: refs.valueTextColor,
-  [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$s.inputBorderWidth]: refs.borderWidth,
-  [vars$s.inputBorderStyle]: refs.borderStyle,
-  [vars$s.inputBorderColor]: refs.borderColor,
-  [vars$s.inputBorderRadius]: refs.borderRadius,
-  [vars$s.inputOutlineWidth]: refs.outlineWidth,
-  [vars$s.inputOutlineStyle]: refs.outlineStyle,
-  [vars$s.inputOutlineColor]: refs.outlineColor,
-  [vars$s.inputOutlineOffset]: refs.outlineOffset,
-  [vars$s.inputBackgroundColor]: refs.backgroundColor,
-  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$s.inputHeight]: refs.inputHeight,
+  [vars$t.hostWidth]: refs.width,
+  [vars$t.hostMinWidth]: refs.minWidth,
+  [vars$t.hostDirection]: refs.direction,
+  [vars$t.fontSize]: refs.fontSize,
+  [vars$t.fontFamily]: refs.fontFamily,
+  [vars$t.labelTextColor]: refs.labelTextColor,
+  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$t.inputValueTextColor]: refs.valueTextColor,
+  [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$t.inputBorderWidth]: refs.borderWidth,
+  [vars$t.inputBorderStyle]: refs.borderStyle,
+  [vars$t.inputBorderColor]: refs.borderColor,
+  [vars$t.inputBorderRadius]: refs.borderRadius,
+  [vars$t.inputOutlineWidth]: refs.outlineWidth,
+  [vars$t.inputOutlineStyle]: refs.outlineStyle,
+  [vars$t.inputOutlineColor]: refs.outlineColor,
+  [vars$t.inputOutlineOffset]: refs.outlineOffset,
+  [vars$t.inputBackgroundColor]: refs.backgroundColor,
+  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$t.inputHeight]: refs.inputHeight,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: numberField,
-  vars: vars$s
+  vars: vars$t
 });
 
-const componentName$z = getComponentName('email-field');
+const componentName$A = getComponentName('email-field');
 
 const customMixin$5 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -3335,43 +3335,43 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$z,
+    componentName: componentName$A,
   })
 );
 
-const vars$r = EmailFieldClass.cssVarList;
+const vars$s = EmailFieldClass.cssVarList;
 
 const emailField = {
-  [vars$r.hostWidth]: refs.width,
-  [vars$r.hostMinWidth]: refs.minWidth,
-  [vars$r.hostDirection]: refs.direction,
-  [vars$r.fontSize]: refs.fontSize,
-  [vars$r.fontFamily]: refs.fontFamily,
-  [vars$r.labelTextColor]: refs.labelTextColor,
-  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$r.inputValueTextColor]: refs.valueTextColor,
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$r.inputBorderWidth]: refs.borderWidth,
-  [vars$r.inputBorderStyle]: refs.borderStyle,
-  [vars$r.inputBorderColor]: refs.borderColor,
-  [vars$r.inputBorderRadius]: refs.borderRadius,
-  [vars$r.inputOutlineWidth]: refs.outlineWidth,
-  [vars$r.inputOutlineStyle]: refs.outlineStyle,
-  [vars$r.inputOutlineColor]: refs.outlineColor,
-  [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.inputBackgroundColor]: refs.backgroundColor,
-  [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$r.inputHeight]: refs.inputHeight,
+  [vars$s.hostWidth]: refs.width,
+  [vars$s.hostMinWidth]: refs.minWidth,
+  [vars$s.hostDirection]: refs.direction,
+  [vars$s.fontSize]: refs.fontSize,
+  [vars$s.fontFamily]: refs.fontFamily,
+  [vars$s.labelTextColor]: refs.labelTextColor,
+  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$s.inputValueTextColor]: refs.valueTextColor,
+  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$s.inputBorderWidth]: refs.borderWidth,
+  [vars$s.inputBorderStyle]: refs.borderStyle,
+  [vars$s.inputBorderColor]: refs.borderColor,
+  [vars$s.inputBorderRadius]: refs.borderRadius,
+  [vars$s.inputOutlineWidth]: refs.outlineWidth,
+  [vars$s.inputOutlineStyle]: refs.outlineStyle,
+  [vars$s.inputOutlineColor]: refs.outlineColor,
+  [vars$s.inputOutlineOffset]: refs.outlineOffset,
+  [vars$s.inputBackgroundColor]: refs.backgroundColor,
+  [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$s.inputHeight]: refs.inputHeight,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: emailField,
-  vars: vars$r
+  vars: vars$s
 });
 
-const componentName$y = getComponentName('text-area');
+const componentName$z = getComponentName('text-area');
 
 const {
   host: host$e,
@@ -3447,54 +3447,54 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
 const globalRefs$f = getThemeRefs(globals);
-const vars$q = TextAreaClass.cssVarList;
+const vars$r = TextAreaClass.cssVarList;
 
 const textArea = {
-  [vars$q.hostWidth]: refs.width,
-  [vars$q.hostMinWidth]: refs.minWidth,
-  [vars$q.hostDirection]: refs.direction,
-  [vars$q.fontSize]: refs.fontSize,
-  [vars$q.fontFamily]: refs.fontFamily,
-  [vars$q.labelTextColor]: refs.labelTextColor,
-  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$q.inputBackgroundColor]: refs.backgroundColor,
-  [vars$q.inputValueTextColor]: refs.valueTextColor,
-  [vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$q.inputBorderRadius]: refs.borderRadius,
-  [vars$q.inputBorderWidth]: refs.borderWidth,
-  [vars$q.inputBorderStyle]: refs.borderStyle,
-  [vars$q.inputBorderColor]: refs.borderColor,
-  [vars$q.inputOutlineWidth]: refs.outlineWidth,
-  [vars$q.inputOutlineStyle]: refs.outlineStyle,
-  [vars$q.inputOutlineColor]: refs.outlineColor,
-  [vars$q.inputOutlineOffset]: refs.outlineOffset,
-  [vars$q.inputResizeType]: 'vertical',
-  [vars$q.inputMinHeight]: '5em',
+  [vars$r.hostWidth]: refs.width,
+  [vars$r.hostMinWidth]: refs.minWidth,
+  [vars$r.hostDirection]: refs.direction,
+  [vars$r.fontSize]: refs.fontSize,
+  [vars$r.fontFamily]: refs.fontFamily,
+  [vars$r.labelTextColor]: refs.labelTextColor,
+  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$r.inputBackgroundColor]: refs.backgroundColor,
+  [vars$r.inputValueTextColor]: refs.valueTextColor,
+  [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$r.inputBorderRadius]: refs.borderRadius,
+  [vars$r.inputBorderWidth]: refs.borderWidth,
+  [vars$r.inputBorderStyle]: refs.borderStyle,
+  [vars$r.inputBorderColor]: refs.borderColor,
+  [vars$r.inputOutlineWidth]: refs.outlineWidth,
+  [vars$r.inputOutlineStyle]: refs.outlineStyle,
+  [vars$r.inputOutlineColor]: refs.outlineColor,
+  [vars$r.inputOutlineOffset]: refs.outlineOffset,
+  [vars$r.inputResizeType]: 'vertical',
+  [vars$r.inputMinHeight]: '5em',
   textAlign: {
-    right: { [vars$q.inputTextAlign]: 'right' },
-    left: { [vars$q.inputTextAlign]: 'left' },
-    center: { [vars$q.inputTextAlign]: 'center' },
+    right: { [vars$r.inputTextAlign]: 'right' },
+    left: { [vars$r.inputTextAlign]: 'left' },
+    center: { [vars$r.inputTextAlign]: 'center' },
   },
 
   _disabled: {
-    [vars$q.inputBackgroundColor]: globalRefs$f.colors.surface.light,
+    [vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
   },
 
   _readonly: {
-    [vars$q.inputResizeType]: 'none',
+    [vars$r.inputResizeType]: 'none',
   },
 };
 
 var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textArea,
-  vars: vars$q
+  vars: vars$r
 });
 
 const createBaseInputClass = (...args) =>
@@ -3505,9 +3505,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$x = getComponentName('boolean-field-internal');
+const componentName$y = getComponentName('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -3516,14 +3516,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$x}
+				<${componentName$y}
 					tabindex="-1"
 					slot="input"
-				></${componentName$x}>
+				></${componentName$y}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$x);
+      this.inputElement = this.shadowRoot.querySelector(componentName$y);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -3593,7 +3593,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$w = getComponentName('checkbox');
+const componentName$x = getComponentName('checkbox');
 
 const {
   host: host$d,
@@ -3699,51 +3699,51 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$w,
+    componentName: componentName$x,
   })
 );
 
-const vars$p = CheckboxClass.cssVarList;
+const vars$q = CheckboxClass.cssVarList;
 const checkboxSize = '1.35em';
 
 const checkbox = {
-  [vars$p.hostWidth]: refs.width,
-  [vars$p.hostDirection]: refs.direction,
-  [vars$p.fontSize]: refs.fontSize,
-  [vars$p.fontFamily]: refs.fontFamily,
-  [vars$p.labelTextColor]: refs.labelTextColor,
-  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$p.labelFontWeight]: '400',
-  [vars$p.labelLineHeight]: checkboxSize,
-  [vars$p.labelSpacing]: '1em',
-  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$p.inputOutlineWidth]: refs.outlineWidth,
-  [vars$p.inputOutlineOffset]: refs.outlineOffset,
-  [vars$p.inputOutlineColor]: refs.outlineColor,
-  [vars$p.inputOutlineStyle]: refs.outlineStyle,
-  [vars$p.inputBorderRadius]: refs.borderRadius,
-  [vars$p.inputBorderColor]: refs.borderColor,
-  [vars$p.inputBorderWidth]: refs.borderWidth,
-  [vars$p.inputBorderStyle]: refs.borderStyle,
-  [vars$p.inputBackgroundColor]: refs.backgroundColor,
-  [vars$p.inputSize]: checkboxSize,
+  [vars$q.hostWidth]: refs.width,
+  [vars$q.hostDirection]: refs.direction,
+  [vars$q.fontSize]: refs.fontSize,
+  [vars$q.fontFamily]: refs.fontFamily,
+  [vars$q.labelTextColor]: refs.labelTextColor,
+  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$q.labelFontWeight]: '400',
+  [vars$q.labelLineHeight]: checkboxSize,
+  [vars$q.labelSpacing]: '1em',
+  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$q.inputOutlineWidth]: refs.outlineWidth,
+  [vars$q.inputOutlineOffset]: refs.outlineOffset,
+  [vars$q.inputOutlineColor]: refs.outlineColor,
+  [vars$q.inputOutlineStyle]: refs.outlineStyle,
+  [vars$q.inputBorderRadius]: refs.borderRadius,
+  [vars$q.inputBorderColor]: refs.borderColor,
+  [vars$q.inputBorderWidth]: refs.borderWidth,
+  [vars$q.inputBorderStyle]: refs.borderStyle,
+  [vars$q.inputBackgroundColor]: refs.backgroundColor,
+  [vars$q.inputSize]: checkboxSize,
 
   _checked: {
-    [vars$p.inputValueTextColor]: refs.valueTextColor,
+    [vars$q.inputValueTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$p.labelTextColor]: refs.labelTextColor,
+    [vars$q.labelTextColor]: refs.labelTextColor,
   },
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: checkbox,
-  vars: vars$p
+  vars: vars$q
 });
 
-const componentName$v = getComponentName('switch-toggle');
+const componentName$w = getComponentName('switch-toggle');
 
 const {
   host: host$c,
@@ -3875,7 +3875,7 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$v,
+    componentName: componentName$w,
   })
 );
 
@@ -3883,75 +3883,75 @@ const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
 const globalRefs$e = getThemeRefs(globals);
-const vars$o = SwitchToggleClass.cssVarList;
+const vars$p = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-  [vars$o.hostWidth]: refs.width,
-  [vars$o.hostDirection]: refs.direction,
-  [vars$o.fontSize]: refs.fontSize,
-  [vars$o.fontFamily]: refs.fontFamily,
-
-  [vars$o.inputOutlineWidth]: refs.outlineWidth,
-  [vars$o.inputOutlineOffset]: refs.outlineOffset,
-  [vars$o.inputOutlineColor]: refs.outlineColor,
-  [vars$o.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$o.trackBorderStyle]: refs.borderStyle,
-  [vars$o.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$o.trackBorderColor]: refs.borderColor,
-  [vars$o.trackBackgroundColor]: 'none',
-  [vars$o.trackBorderRadius]: globalRefs$e.radius.md,
-  [vars$o.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$o.trackHeight]: checkboxHeight,
-
-  [vars$o.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$o.knobRadius]: '50%',
-  [vars$o.knobTopOffset]: '1px',
-  [vars$o.knobLeftOffset]: knobMargin,
-  [vars$o.knobColor]: refs.valueTextColor,
-  [vars$o.knobTransitionDuration]: '0.3s',
-
-  [vars$o.labelTextColor]: refs.labelTextColor,
-  [vars$o.labelFontWeight]: '400',
-  [vars$o.labelLineHeight]: '1.35em',
-  [vars$o.labelSpacing]: '1em',
-  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$p.hostWidth]: refs.width,
+  [vars$p.hostDirection]: refs.direction,
+  [vars$p.fontSize]: refs.fontSize,
+  [vars$p.fontFamily]: refs.fontFamily,
+
+  [vars$p.inputOutlineWidth]: refs.outlineWidth,
+  [vars$p.inputOutlineOffset]: refs.outlineOffset,
+  [vars$p.inputOutlineColor]: refs.outlineColor,
+  [vars$p.inputOutlineStyle]: refs.outlineStyle,
+
+  [vars$p.trackBorderStyle]: refs.borderStyle,
+  [vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$p.trackBorderColor]: refs.borderColor,
+  [vars$p.trackBackgroundColor]: 'none',
+  [vars$p.trackBorderRadius]: globalRefs$e.radius.md,
+  [vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$p.trackHeight]: checkboxHeight,
+
+  [vars$p.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$p.knobRadius]: '50%',
+  [vars$p.knobTopOffset]: '1px',
+  [vars$p.knobLeftOffset]: knobMargin,
+  [vars$p.knobColor]: refs.valueTextColor,
+  [vars$p.knobTransitionDuration]: '0.3s',
+
+  [vars$p.labelTextColor]: refs.labelTextColor,
+  [vars$p.labelFontWeight]: '400',
+  [vars$p.labelLineHeight]: '1.35em',
+  [vars$p.labelSpacing]: '1em',
+  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$o.trackBorderColor]: refs.borderColor,
-    [vars$o.trackBackgroundColor]: refs.backgroundColor,
-    [vars$o.knobLeftOffset]: `calc(100% - var(${vars$o.knobSize}) - ${knobMargin})`,
-    [vars$o.knobColor]: refs.valueTextColor,
-    [vars$o.knobTextColor]: refs.valueTextColor,
+    [vars$p.trackBorderColor]: refs.borderColor,
+    [vars$p.trackBackgroundColor]: refs.backgroundColor,
+    [vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
+    [vars$p.knobColor]: refs.valueTextColor,
+    [vars$p.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$o.knobColor]: globalRefs$e.colors.surface.light,
-    [vars$o.trackBorderColor]: globalRefs$e.colors.surface.main,
-    [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
-    [vars$o.labelTextColor]: refs.labelTextColor,
+    [vars$p.knobColor]: globalRefs$e.colors.surface.light,
+    [vars$p.trackBorderColor]: globalRefs$e.colors.surface.main,
+    [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+    [vars$p.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$o.knobColor]: globalRefs$e.colors.surface.light,
-      [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+      [vars$p.knobColor]: globalRefs$e.colors.surface.light,
+      [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$o.trackBorderColor]: globalRefs$e.colors.error.main,
-    [vars$o.knobColor]: globalRefs$e.colors.error.main,
+    [vars$p.trackBorderColor]: globalRefs$e.colors.error.main,
+    [vars$p.knobColor]: globalRefs$e.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$o
+  vars: vars$p
 });
 
-const componentName$u = getComponentName('container');
+const componentName$v = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$u, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$v, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -4025,7 +4025,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$u
+  componentName$v
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -4110,7 +4110,7 @@ const container = {
   },
 };
 
-const vars$n = {
+const vars$o = {
   ...compVars$3,
   ...helperVars$2,
 };
@@ -4118,7 +4118,7 @@ const vars$n = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$n
+  vars: vars$o
 });
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4171,41 +4171,61 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$t = getComponentName('logo');
+const componentName$u = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
+  componentName: componentName$u,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});
+
+const vars$n = LogoClass.cssVarList;
+
+const logo$2 = {
+  [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+};
+
+var logo$3 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: logo$2,
+  vars: vars$n
+});
+
+const componentName$t = getComponentName('totp-image');
+
+const TotpImageClass = createCssVarImageClass({
   componentName: componentName$t,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$m = LogoClass.cssVarList;
+const vars$m = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
-var logo$2 = /*#__PURE__*/Object.freeze({
+var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
   vars: vars$m
 });
 
-const componentName$s = getComponentName('totp-image');
+const componentName$s = getComponentName('notp-image');
 
-const TotpImageClass = createCssVarImageClass({
+const NotpImageClass = createCssVarImageClass({
   componentName: componentName$s,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$l = TotpImageClass.cssVarList;
+const vars$l = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
-var totpImage = /*#__PURE__*/Object.freeze({
+var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
   vars: vars$l
@@ -9761,8 +9781,9 @@ const components = {
   checkbox: checkbox$1,
   switchToggle: switchToggle$1,
   container: container$1,
-  logo: logo$2,
+  logo: logo$3,
   totpImage,
+  notpImage,
   text: text$3,
   link: link$1,
   divider: divider$1,
@@ -9796,7 +9817,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$x, components: vars };
+const themeVars = { globals: vars$y, components: vars };
 
 const componentName$1 = getComponentName('recaptcha');
 
@@ -10070,6 +10091,7 @@ exports.ModalClass = ModalClass;
 exports.MultiSelectComboBoxClass = MultiSelectComboBoxClass;
 exports.NewPasswordClass = NewPasswordClass;
 exports.NotificationClass = NotificationClass;
+exports.NotpImageClass = NotpImageClass;
 exports.NumberFieldClass = NumberFieldClass;
 exports.PasscodeClass = PasscodeClass;
 exports.PasswordClass = PasswordClass;