@descope/flow-components 2.0.592 → 2.0.594

package/dist/index.cjs.js

@@ -78465,7 +78465,7 @@ function requireIndex_cjs () {
 	  fonts: fonts$1,
 	  direction: direction$1,
 	};
-	const vars$10 = getThemeVars(globals$1);
+	const vars$11 = getThemeVars(globals$1);
 
 	const direction = 'ltr';
 
@@ -79238,7 +79238,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const observedAttributes$5 = ['required', 'pattern'];
+	const observedAttributes$6 = ['required', 'pattern'];
 
 	const errorAttributes$1 = {
 	  valueMissing: 'data-errormessage-value-missing',
@@ -79257,7 +79257,7 @@ function requireIndex_cjs () {
 	    #validationTarget = validationTargetSymbol$1;
 
 	    static get observedAttributes() {
-	      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
+	      return [...(superclass.observedAttributes || []), ...observedAttributes$6];
 	    }
 
 	    static get formAssociated() {
@@ -79460,7 +79460,7 @@ function requireIndex_cjs () {
 	    attributeChangedCallback(attrName, oldValue, newValue) {
 	      super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-	      if (observedAttributes$5.includes(attrName)) {
+	      if (observedAttributes$6.includes(attrName)) {
 	        this.#setValidity();
 	      }
 	    }
@@ -80119,7 +80119,7 @@ function requireIndex_cjs () {
 	      }
 	    };
 
-	const componentName$1b = getComponentName('icon');
+	const componentName$1c = getComponentName('icon');
 
 	const IconClass = compose(
 	  createStyleMixin$1({
@@ -80139,7 +80139,7 @@ function requireIndex_cjs () {
       }
       `,
 	    excludeAttrsSync: ['tabindex', 'class'],
-	    componentName: componentName$1b,
+	    componentName: componentName$1c,
 	  }),
 	);
 
@@ -80154,7 +80154,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const componentName$1a = getComponentName('button');
+	const componentName$1b = getComponentName('button');
 
 	const resetStyles = `
 	:host {
@@ -80270,7 +80270,7 @@ function requireIndex_cjs () {
 			}
 		`,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$1a,
+	    componentName: componentName$1b,
 	  })
 	);
 
@@ -80318,7 +80318,7 @@ function requireIndex_cjs () {
 	  surface: globalRefs$G.colors.surface,
 	};
 
-	const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1({ mode }, componentName$1a);
+	const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1({ mode }, componentName$1b);
 
 	const button = {
 	  ...helperTheme$5,
@@ -80430,7 +80430,7 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const vars$$ = {
+	const vars$10 = {
 	  ...compVars$8,
 	  ...helperVars$5,
 	};
@@ -80438,7 +80438,7 @@ function requireIndex_cjs () {
 	var button$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: button,
-	  vars: vars$$
+	  vars: vars$10
 	});
 
 	const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
@@ -80970,7 +80970,7 @@ function requireIndex_cjs () {
 	  return ProxyClass;
 	};
 
-	const observedAttributes$4 = ['required', 'pattern'];
+	const observedAttributes$5 = ['required', 'pattern'];
 
 	const errorAttributes = {
 	  valueMissing: 'data-errormessage-value-missing',
@@ -80989,7 +80989,7 @@ function requireIndex_cjs () {
 	    #validationTarget = validationTargetSymbol;
 
 	    static get observedAttributes() {
-	      return [...(superclass.observedAttributes || []), ...observedAttributes$4];
+	      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
 	    }
 
 	    static get formAssociated() {
@@ -81167,7 +81167,7 @@ function requireIndex_cjs () {
 	    attributeChangedCallback(attrName, oldValue, newValue) {
 	      super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-	      if (observedAttributes$4.includes(attrName)) {
+	      if (observedAttributes$5.includes(attrName)) {
 	        this.#setValidity();
 	      }
 	    }
@@ -82190,7 +82190,7 @@ function requireIndex_cjs () {
   `;
 	};
 
-	const componentName$19 = getComponentName$1('text-field');
+	const componentName$1a = getComponentName$1('text-field');
 
 	const observedAttrs$4 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -82312,14 +82312,14 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$19,
+	    componentName: componentName$1a,
 	  })
 	);
 
-	const componentName$18 = getComponentName$1('input-wrapper');
+	const componentName$19 = getComponentName$1('input-wrapper');
 	const globalRefs$F = getThemeRefs(globals$1);
 
-	const [theme$2, refs$1, vars$_] = createHelperVars(
+	const [theme$2, refs$1, vars$$] = createHelperVars(
 	  {
 	    labelTextColor: globalRefs$F.colors.surface.dark,
 	    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
@@ -82438,78 +82438,78 @@ function requireIndex_cjs () {
 	      backgroundColor: globalRefs$F.colors.surface.main,
 	    },
 	  },
-	  componentName$18
+	  componentName$19
 	);
 
 	var inputWrapper = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: theme$2,
 	  refs: refs$1,
-	  vars: vars$_
+	  vars: vars$$
 	});
 
 	const globalRefs$E = getThemeRefs(globals$1);
-	const vars$Z = TextFieldClass.cssVarList;
+	const vars$_ = TextFieldClass.cssVarList;
 
 	const textField$1 = {
-	  [vars$Z.hostWidth]: refs$1.width,
-	  [vars$Z.hostMinWidth]: refs$1.minWidth,
-	  [vars$Z.hostDirection]: refs$1.direction,
-	  [vars$Z.fontSize]: refs$1.fontSize,
-	  [vars$Z.fontFamily]: refs$1.fontFamily,
-	  [vars$Z.labelFontSize]: refs$1.labelFontSize,
-	  [vars$Z.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$Z.labelTextColor]: refs$1.labelTextColor,
-	  [vars$Z.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$Z.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$Z.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$Z.inputPlaceholderColor]: refs$1.placeholderTextColor,
-	  [vars$Z.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$Z.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$Z.inputBorderColor]: refs$1.borderColor,
-	  [vars$Z.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$Z.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$Z.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$Z.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$Z.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$Z.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$Z.inputHeight]: refs$1.inputHeight,
-	  [vars$Z.inputHorizontalPadding]: refs$1.horizontalPadding,
-	  [vars$Z.helperTextColor]: refs$1.helperTextColor,
-	  [vars$Z.textAlign]: refs$1.textAlign,
+	  [vars$_.hostWidth]: refs$1.width,
+	  [vars$_.hostMinWidth]: refs$1.minWidth,
+	  [vars$_.hostDirection]: refs$1.direction,
+	  [vars$_.fontSize]: refs$1.fontSize,
+	  [vars$_.fontFamily]: refs$1.fontFamily,
+	  [vars$_.labelFontSize]: refs$1.labelFontSize,
+	  [vars$_.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$_.labelTextColor]: refs$1.labelTextColor,
+	  [vars$_.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$_.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$_.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$_.inputPlaceholderColor]: refs$1.placeholderTextColor,
+	  [vars$_.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$_.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$_.inputBorderColor]: refs$1.borderColor,
+	  [vars$_.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$_.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$_.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$_.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$_.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$_.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$_.inputHeight]: refs$1.inputHeight,
+	  [vars$_.inputHorizontalPadding]: refs$1.horizontalPadding,
+	  [vars$_.helperTextColor]: refs$1.helperTextColor,
+	  [vars$_.textAlign]: refs$1.textAlign,
 	  textAlign: {
-	    right: { [vars$Z.inputTextAlign]: 'right' },
-	    left: { [vars$Z.inputTextAlign]: 'left' },
-	    center: { [vars$Z.inputTextAlign]: 'center' },
+	    right: { [vars$_.inputTextAlign]: 'right' },
+	    left: { [vars$_.inputTextAlign]: 'left' },
+	    center: { [vars$_.inputTextAlign]: 'center' },
 	  },
-	  [vars$Z.labelPosition]: refs$1.labelPosition,
-	  [vars$Z.labelTopPosition]: refs$1.labelTopPosition,
-	  [vars$Z.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-	  [vars$Z.inputTransformY]: refs$1.inputTransformY,
-	  [vars$Z.inputTransition]: refs$1.inputTransition,
-	  [vars$Z.marginInlineStart]: refs$1.marginInlineStart,
-	  [vars$Z.placeholderOpacity]: refs$1.placeholderOpacity,
-	  [vars$Z.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-	  [vars$Z.valueInputHeight]: refs$1.valueInputHeight,
-	  [vars$Z.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
-	  [vars$Z.inputIconOffset]: globalRefs$E.spacing.md,
-	  [vars$Z.inputIconSize]: refs$1.inputIconSize,
-	  [vars$Z.inputIconColor]: refs$1.placeholderTextColor,
+	  [vars$_.labelPosition]: refs$1.labelPosition,
+	  [vars$_.labelTopPosition]: refs$1.labelTopPosition,
+	  [vars$_.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+	  [vars$_.inputTransformY]: refs$1.inputTransformY,
+	  [vars$_.inputTransition]: refs$1.inputTransition,
+	  [vars$_.marginInlineStart]: refs$1.marginInlineStart,
+	  [vars$_.placeholderOpacity]: refs$1.placeholderOpacity,
+	  [vars$_.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+	  [vars$_.valueInputHeight]: refs$1.valueInputHeight,
+	  [vars$_.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+	  [vars$_.inputIconOffset]: globalRefs$E.spacing.md,
+	  [vars$_.inputIconSize]: refs$1.inputIconSize,
+	  [vars$_.inputIconColor]: refs$1.placeholderTextColor,
 
 	  // error message icon
-	  [vars$Z.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$Z.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$Z.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$Z.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$Z.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$Z.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$_.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$_.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$_.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$_.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$_.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$_.errorMessageFontSize]: refs$1.errorMessageFontSize,
 	};
 
 	var textField$2 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: textField$1,
 	  textField: textField$1,
-	  vars: vars$Z
+	  vars: vars$_
 	});
 
 	const passwordDraggableMixin = (superclass) =>
@@ -82551,7 +82551,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const componentName$17 = getComponentName$1('password');
+	const componentName$18 = getComponentName$1('password');
 
 	const customMixin$d = (superclass) =>
 	  class PasswordFieldMixinClass extends superclass {
@@ -82833,66 +82833,66 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$17,
+	    componentName: componentName$18,
 	  })
 	);
 
 	const globalRefs$D = getThemeRefs(globals$1);
-	const vars$Y = PasswordClass.cssVarList;
+	const vars$Z = PasswordClass.cssVarList;
 
 	const password = {
-	  [vars$Y.hostWidth]: refs$1.width,
-	  [vars$Y.hostMinWidth]: refs$1.minWidth,
-	  [vars$Y.hostDirection]: refs$1.direction,
-	  [vars$Y.fontSize]: refs$1.fontSize,
-	  [vars$Y.fontFamily]: refs$1.fontFamily,
-	  [vars$Y.labelFontSize]: refs$1.labelFontSize,
-	  [vars$Y.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$Y.labelTextColor]: refs$1.labelTextColor,
-	  [vars$Y.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$Y.inputHorizontalPadding]: refs$1.horizontalPadding,
-	  [vars$Y.inputHeight]: refs$1.inputHeight,
-	  [vars$Y.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$Y.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$Y.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$Y.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-	  [vars$Y.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$Y.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$Y.inputBorderColor]: refs$1.borderColor,
-	  [vars$Y.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$Y.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$Y.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$Y.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$Y.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$Y.revealButtonOffset]: globalRefs$D.spacing.md,
-	  [vars$Y.revealButtonSize]: refs$1.toggleButtonSize,
-	  [vars$Y.revealButtonColor]: refs$1.placeholderTextColor,
-	  [vars$Y.labelPosition]: refs$1.labelPosition,
-	  [vars$Y.labelTopPosition]: refs$1.labelTopPosition,
-	  [vars$Y.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-	  [vars$Y.inputTransformY]: refs$1.inputTransformY,
-	  [vars$Y.inputTransition]: refs$1.inputTransition,
-	  [vars$Y.marginInlineStart]: refs$1.marginInlineStart,
-	  [vars$Y.placeholderOpacity]: refs$1.placeholderOpacity,
-	  [vars$Y.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-	  [vars$Y.valueInputHeight]: refs$1.valueInputHeight,
+	  [vars$Z.hostWidth]: refs$1.width,
+	  [vars$Z.hostMinWidth]: refs$1.minWidth,
+	  [vars$Z.hostDirection]: refs$1.direction,
+	  [vars$Z.fontSize]: refs$1.fontSize,
+	  [vars$Z.fontFamily]: refs$1.fontFamily,
+	  [vars$Z.labelFontSize]: refs$1.labelFontSize,
+	  [vars$Z.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$Z.labelTextColor]: refs$1.labelTextColor,
+	  [vars$Z.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$Z.inputHorizontalPadding]: refs$1.horizontalPadding,
+	  [vars$Z.inputHeight]: refs$1.inputHeight,
+	  [vars$Z.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$Z.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$Z.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$Z.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+	  [vars$Z.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$Z.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$Z.inputBorderColor]: refs$1.borderColor,
+	  [vars$Z.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$Z.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$Z.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$Z.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$Z.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$Z.revealButtonOffset]: globalRefs$D.spacing.md,
+	  [vars$Z.revealButtonSize]: refs$1.toggleButtonSize,
+	  [vars$Z.revealButtonColor]: refs$1.placeholderTextColor,
+	  [vars$Z.labelPosition]: refs$1.labelPosition,
+	  [vars$Z.labelTopPosition]: refs$1.labelTopPosition,
+	  [vars$Z.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+	  [vars$Z.inputTransformY]: refs$1.inputTransformY,
+	  [vars$Z.inputTransition]: refs$1.inputTransition,
+	  [vars$Z.marginInlineStart]: refs$1.marginInlineStart,
+	  [vars$Z.placeholderOpacity]: refs$1.placeholderOpacity,
+	  [vars$Z.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+	  [vars$Z.valueInputHeight]: refs$1.valueInputHeight,
 
 	  // error message icon
-	  [vars$Y.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$Y.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$Y.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$Y.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$Y.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$Y.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$Z.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$Z.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$Z.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$Z.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$Z.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$Z.errorMessageFontSize]: refs$1.errorMessageFontSize,
 	};
 
 	var password$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: password,
-	  vars: vars$Y
+	  vars: vars$Z
 	});
 
-	const componentName$16 = getComponentName$1('number-field');
+	const componentName$17 = getComponentName$1('number-field');
 
 	const NumberFieldClass = compose$1(
 	  createStyleMixin({
@@ -82926,63 +82926,63 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$16,
+	    componentName: componentName$17,
 	  })
 	);
 
-	const vars$X = NumberFieldClass.cssVarList;
+	const vars$Y = NumberFieldClass.cssVarList;
 
 	const numberField = {
-	  [vars$X.hostWidth]: refs$1.width,
-	  [vars$X.hostMinWidth]: refs$1.minWidth,
-	  [vars$X.hostDirection]: refs$1.direction,
-	  [vars$X.fontSize]: refs$1.fontSize,
-	  [vars$X.fontFamily]: refs$1.fontFamily,
-	  [vars$X.labelFontSize]: refs$1.labelFontSize,
-	  [vars$X.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$X.labelTextColor]: refs$1.labelTextColor,
-	  [vars$X.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$X.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$X.inputPlaceholderColor]: refs$1.placeholderTextColor,
-	  [vars$X.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$X.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$X.inputBorderColor]: refs$1.borderColor,
-	  [vars$X.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$X.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$X.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$X.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$X.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$X.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$X.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$X.inputHorizontalPadding]: refs$1.horizontalPadding,
-	  [vars$X.inputHeight]: refs$1.inputHeight,
-	  [vars$X.labelPosition]: refs$1.labelPosition,
-	  [vars$X.labelTopPosition]: refs$1.labelTopPosition,
-	  [vars$X.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-	  [vars$X.inputTransformY]: refs$1.inputTransformY,
-	  [vars$X.inputTransition]: refs$1.inputTransition,
-	  [vars$X.marginInlineStart]: refs$1.marginInlineStart,
-	  [vars$X.placeholderOpacity]: refs$1.placeholderOpacity,
-	  [vars$X.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-	  [vars$X.valueInputHeight]: refs$1.valueInputHeight,
-	  [vars$X.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+	  [vars$Y.hostWidth]: refs$1.width,
+	  [vars$Y.hostMinWidth]: refs$1.minWidth,
+	  [vars$Y.hostDirection]: refs$1.direction,
+	  [vars$Y.fontSize]: refs$1.fontSize,
+	  [vars$Y.fontFamily]: refs$1.fontFamily,
+	  [vars$Y.labelFontSize]: refs$1.labelFontSize,
+	  [vars$Y.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$Y.labelTextColor]: refs$1.labelTextColor,
+	  [vars$Y.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$Y.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$Y.inputPlaceholderColor]: refs$1.placeholderTextColor,
+	  [vars$Y.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$Y.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$Y.inputBorderColor]: refs$1.borderColor,
+	  [vars$Y.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$Y.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$Y.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$Y.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$Y.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$Y.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$Y.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$Y.inputHorizontalPadding]: refs$1.horizontalPadding,
+	  [vars$Y.inputHeight]: refs$1.inputHeight,
+	  [vars$Y.labelPosition]: refs$1.labelPosition,
+	  [vars$Y.labelTopPosition]: refs$1.labelTopPosition,
+	  [vars$Y.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+	  [vars$Y.inputTransformY]: refs$1.inputTransformY,
+	  [vars$Y.inputTransition]: refs$1.inputTransition,
+	  [vars$Y.marginInlineStart]: refs$1.marginInlineStart,
+	  [vars$Y.placeholderOpacity]: refs$1.placeholderOpacity,
+	  [vars$Y.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+	  [vars$Y.valueInputHeight]: refs$1.valueInputHeight,
+	  [vars$Y.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
 
 	  // error message icon
-	  [vars$X.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$X.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$X.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$X.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$X.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$X.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$Y.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$Y.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$Y.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$Y.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$Y.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$Y.errorMessageFontSize]: refs$1.errorMessageFontSize,
 	};
 
 	var numberField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: numberField,
-	  vars: vars$X
+	  vars: vars$Y
 	});
 
-	const componentName$15 = getComponentName$1('email-field');
+	const componentName$16 = getComponentName$1('email-field');
 
 	const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 	const defaultAutocomplete = 'username';
@@ -83051,63 +83051,63 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$15,
+	    componentName: componentName$16,
 	  })
 	);
 
-	const vars$W = EmailFieldClass.cssVarList;
+	const vars$X = EmailFieldClass.cssVarList;
 
 	const emailField = {
-	  [vars$W.hostWidth]: refs$1.width,
-	  [vars$W.hostMinWidth]: refs$1.minWidth,
-	  [vars$W.hostDirection]: refs$1.direction,
-	  [vars$W.fontSize]: refs$1.fontSize,
-	  [vars$W.fontFamily]: refs$1.fontFamily,
-	  [vars$W.labelFontSize]: refs$1.labelFontSize,
-	  [vars$W.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$W.labelTextColor]: refs$1.labelTextColor,
-	  [vars$W.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$W.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$W.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$W.inputPlaceholderColor]: refs$1.placeholderTextColor,
-	  [vars$W.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$W.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$W.inputBorderColor]: refs$1.borderColor,
-	  [vars$W.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$W.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$W.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$W.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$W.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$W.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$W.inputHorizontalPadding]: refs$1.horizontalPadding,
-	  [vars$W.inputHeight]: refs$1.inputHeight,
-	  [vars$W.labelPosition]: refs$1.labelPosition,
-	  [vars$W.labelTopPosition]: refs$1.labelTopPosition,
-	  [vars$W.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-	  [vars$W.inputTransformY]: refs$1.inputTransformY,
-	  [vars$W.inputTransition]: refs$1.inputTransition,
-	  [vars$W.marginInlineStart]: refs$1.marginInlineStart,
-	  [vars$W.placeholderOpacity]: refs$1.placeholderOpacity,
-	  [vars$W.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-	  [vars$W.valueInputHeight]: refs$1.valueInputHeight,
-	  [vars$W.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+	  [vars$X.hostWidth]: refs$1.width,
+	  [vars$X.hostMinWidth]: refs$1.minWidth,
+	  [vars$X.hostDirection]: refs$1.direction,
+	  [vars$X.fontSize]: refs$1.fontSize,
+	  [vars$X.fontFamily]: refs$1.fontFamily,
+	  [vars$X.labelFontSize]: refs$1.labelFontSize,
+	  [vars$X.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$X.labelTextColor]: refs$1.labelTextColor,
+	  [vars$X.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$X.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$X.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$X.inputPlaceholderColor]: refs$1.placeholderTextColor,
+	  [vars$X.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$X.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$X.inputBorderColor]: refs$1.borderColor,
+	  [vars$X.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$X.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$X.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$X.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$X.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$X.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$X.inputHorizontalPadding]: refs$1.horizontalPadding,
+	  [vars$X.inputHeight]: refs$1.inputHeight,
+	  [vars$X.labelPosition]: refs$1.labelPosition,
+	  [vars$X.labelTopPosition]: refs$1.labelTopPosition,
+	  [vars$X.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+	  [vars$X.inputTransformY]: refs$1.inputTransformY,
+	  [vars$X.inputTransition]: refs$1.inputTransition,
+	  [vars$X.marginInlineStart]: refs$1.marginInlineStart,
+	  [vars$X.placeholderOpacity]: refs$1.placeholderOpacity,
+	  [vars$X.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+	  [vars$X.valueInputHeight]: refs$1.valueInputHeight,
+	  [vars$X.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
 
 	  // error message icon
-	  [vars$W.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$W.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$W.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$W.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$W.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$W.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$X.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$X.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$X.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$X.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$X.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$X.errorMessageFontSize]: refs$1.errorMessageFontSize,
 	};
 
 	var emailField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: emailField,
-	  vars: vars$W
+	  vars: vars$X
 	});
 
-	const componentName$14 = getComponentName$1('text-area');
+	const componentName$15 = getComponentName$1('text-area');
 
 	const {
 	  host: host$q,
@@ -83189,58 +83189,58 @@ function requireIndex_cjs () {
 			${resetInputCursor('vaadin-text-area')}
 		`,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$14,
+	    componentName: componentName$15,
 	  })
 	);
 
-	const vars$V = TextAreaClass.cssVarList;
+	const vars$W = TextAreaClass.cssVarList;
 
 	const textArea = {
-	  [vars$V.hostWidth]: refs$1.width,
-	  [vars$V.hostMinWidth]: refs$1.minWidth,
-	  [vars$V.hostDirection]: refs$1.direction,
-	  [vars$V.fontSize]: refs$1.fontSize,
-	  [vars$V.fontFamily]: refs$1.fontFamily,
-	  [vars$V.labelTextColor]: refs$1.labelTextColor,
-	  [vars$V.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$V.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$V.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$V.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$V.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-	  [vars$V.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$V.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$V.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$V.inputBorderColor]: refs$1.borderColor,
-	  [vars$V.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$V.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$V.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$V.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$V.inputResizeType]: 'vertical',
-	  [vars$V.inputMinHeight]: '5em',
+	  [vars$W.hostWidth]: refs$1.width,
+	  [vars$W.hostMinWidth]: refs$1.minWidth,
+	  [vars$W.hostDirection]: refs$1.direction,
+	  [vars$W.fontSize]: refs$1.fontSize,
+	  [vars$W.fontFamily]: refs$1.fontFamily,
+	  [vars$W.labelTextColor]: refs$1.labelTextColor,
+	  [vars$W.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$W.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$W.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$W.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$W.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+	  [vars$W.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$W.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$W.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$W.inputBorderColor]: refs$1.borderColor,
+	  [vars$W.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$W.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$W.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$W.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$W.inputResizeType]: 'vertical',
+	  [vars$W.inputMinHeight]: '5em',
 
 	  // error message icon
-	  [vars$V.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$V.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$V.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$V.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$V.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$V.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$W.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$W.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$W.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$W.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$W.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$W.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  textAlign: {
-	    right: { [vars$V.inputTextAlign]: 'right' },
-	    left: { [vars$V.inputTextAlign]: 'left' },
-	    center: { [vars$V.inputTextAlign]: 'center' },
+	    right: { [vars$W.inputTextAlign]: 'right' },
+	    left: { [vars$W.inputTextAlign]: 'left' },
+	    center: { [vars$W.inputTextAlign]: 'center' },
 	  },
 
 	  _readonly: {
-	    [vars$V.inputResizeType]: 'none',
+	    [vars$W.inputResizeType]: 'none',
 	  },
 	};
 
 	var textArea$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: textArea,
-	  vars: vars$V
+	  vars: vars$W
 	});
 
 	const createBaseInputClass = (...args) =>
@@ -83251,9 +83251,9 @@ function requireIndex_cjs () {
 	    inputEventsDispatchingMixin
 	  )(createBaseClass(...args));
 
-	const componentName$13 = getComponentName$1('boolean-field-internal');
+	const componentName$14 = getComponentName$1('boolean-field-internal');
 
-	createBaseInputClass({ componentName: componentName$13, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$14, baseSelector: 'div' });
 
 	const booleanFieldMixin = (superclass) =>
 	  class BooleanFieldMixinClass extends superclass {
@@ -83262,14 +83262,14 @@ function requireIndex_cjs () {
 
 	      const template = document.createElement('template');
 	      template.innerHTML = `
-				<${componentName$13}
+				<${componentName$14}
 					tabindex="-1"
 					slot="input"
-				></${componentName$13}>
+				></${componentName$14}>
 			`;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
-	      this.inputElement = this.shadowRoot.querySelector(componentName$13);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$14);
 	      this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
 	      forwardAttrs$1(this, this.inputElement, {
@@ -83338,7 +83338,7 @@ descope-boolean-field-internal {
 }
 `;
 
-	const componentName$12 = getComponentName$1('checkbox');
+	const componentName$13 = getComponentName$1('checkbox');
 
 	const {
 	  host: host$p,
@@ -83456,52 +83456,52 @@ descope-boolean-field-internal {
       }
     `,
 	    excludeAttrsSync: ['label', 'tabindex'],
-	    componentName: componentName$12,
+	    componentName: componentName$13,
 	  })
 	);
 
-	const vars$U = CheckboxClass.cssVarList;
+	const vars$V = CheckboxClass.cssVarList;
 	const checkboxSize = '1.35em';
 
 	const checkbox = {
-	  [vars$U.hostWidth]: refs$1.width,
-	  [vars$U.hostDirection]: refs$1.direction,
-	  [vars$U.fontSize]: refs$1.fontSize,
-	  [vars$U.fontFamily]: refs$1.fontFamily,
-	  [vars$U.labelTextColor]: refs$1.labelTextColor,
-	  [vars$U.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$U.labelFontWeight]: '400',
-	  [vars$U.labelLineHeight]: checkboxSize,
-	  [vars$U.labelSpacing]: '1em',
-	  [vars$U.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$U.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$U.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$U.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$U.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$U.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$U.inputBorderColor]: refs$1.borderColor,
-	  [vars$U.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$U.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$U.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$U.inputSize]: checkboxSize,
-	  [vars$U.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$V.hostWidth]: refs$1.width,
+	  [vars$V.hostDirection]: refs$1.direction,
+	  [vars$V.fontSize]: refs$1.fontSize,
+	  [vars$V.fontFamily]: refs$1.fontFamily,
+	  [vars$V.labelTextColor]: refs$1.labelTextColor,
+	  [vars$V.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$V.labelFontWeight]: '400',
+	  [vars$V.labelLineHeight]: checkboxSize,
+	  [vars$V.labelSpacing]: '1em',
+	  [vars$V.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$V.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$V.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$V.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$V.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$V.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$V.inputBorderColor]: refs$1.borderColor,
+	  [vars$V.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$V.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$V.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$V.inputSize]: checkboxSize,
+	  [vars$V.inputValueTextColor]: refs$1.valueTextColor,
 
 	  // error message icon
-	  [vars$U.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$U.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$U.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$U.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$U.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$U.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$V.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$V.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$V.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$V.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$V.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$V.errorMessageFontSize]: refs$1.errorMessageFontSize,
 	};
 
 	var checkbox$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: checkbox,
-	  vars: vars$U
+	  vars: vars$V
 	});
 
-	const componentName$11 = getComponentName$1('switch-toggle');
+	const componentName$12 = getComponentName$1('switch-toggle');
 
 	const {
 	  host: host$o,
@@ -83640,7 +83640,7 @@ descope-boolean-field-internal {
 			}
 		`,
 	    excludeAttrsSync: ['label', 'tabindex'],
-	    componentName: componentName$11,
+	    componentName: componentName$12,
 	  })
 	);
 
@@ -83648,82 +83648,82 @@ descope-boolean-field-internal {
 	const checkboxHeight = '1.25em';
 
 	const globalRefs$C = getThemeRefs(globals$1);
-	const vars$T = SwitchToggleClass.cssVarList;
+	const vars$U = SwitchToggleClass.cssVarList;
 
 	const switchToggle = {
-	  [vars$T.hostWidth]: refs$1.width,
-	  [vars$T.hostDirection]: refs$1.direction,
-	  [vars$T.fontSize]: refs$1.fontSize,
-	  [vars$T.fontFamily]: refs$1.fontFamily,
-
-	  [vars$T.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$T.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$T.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$T.inputOutlineStyle]: refs$1.outlineStyle,
-
-	  [vars$T.trackBorderStyle]: refs$1.borderStyle,
-	  [vars$T.trackBorderWidth]: refs$1.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-	  [vars$T.trackBorderColor]: refs$1.borderColor,
-	  [vars$T.trackBackgroundColor]: refs$1.backgroundColor,
-	  [vars$T.trackBorderRadius]: globalRefs$C.radius.md,
-	  [vars$T.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-	  [vars$T.trackHeight]: checkboxHeight,
-
-	  [vars$T.knobSize]: `calc(1em - ${knobMargin})`,
-	  [vars$T.knobRadius]: '50%',
-	  [vars$T.knobTopOffset]: '1px',
-	  [vars$T.knobLeftOffset]: knobMargin,
-	  [vars$T.knobColor]: refs$1.labelTextColor,
-	  [vars$T.knobTransitionDuration]: '0.3s',
-
-	  [vars$T.labelTextColor]: refs$1.labelTextColor,
-	  [vars$T.labelFontWeight]: '400',
-	  [vars$T.labelLineHeight]: '1.35em',
-	  [vars$T.labelSpacing]: '1em',
-	  [vars$T.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$T.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$U.hostWidth]: refs$1.width,
+	  [vars$U.hostDirection]: refs$1.direction,
+	  [vars$U.fontSize]: refs$1.fontSize,
+	  [vars$U.fontFamily]: refs$1.fontFamily,
+
+	  [vars$U.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$U.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$U.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$U.inputOutlineStyle]: refs$1.outlineStyle,
+
+	  [vars$U.trackBorderStyle]: refs$1.borderStyle,
+	  [vars$U.trackBorderWidth]: refs$1.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+	  [vars$U.trackBorderColor]: refs$1.borderColor,
+	  [vars$U.trackBackgroundColor]: refs$1.backgroundColor,
+	  [vars$U.trackBorderRadius]: globalRefs$C.radius.md,
+	  [vars$U.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+	  [vars$U.trackHeight]: checkboxHeight,
+
+	  [vars$U.knobSize]: `calc(1em - ${knobMargin})`,
+	  [vars$U.knobRadius]: '50%',
+	  [vars$U.knobTopOffset]: '1px',
+	  [vars$U.knobLeftOffset]: knobMargin,
+	  [vars$U.knobColor]: refs$1.labelTextColor,
+	  [vars$U.knobTransitionDuration]: '0.3s',
+
+	  [vars$U.labelTextColor]: refs$1.labelTextColor,
+	  [vars$U.labelFontWeight]: '400',
+	  [vars$U.labelLineHeight]: '1.35em',
+	  [vars$U.labelSpacing]: '1em',
+	  [vars$U.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$U.errorMessageTextColor]: refs$1.errorMessageTextColor,
 
 	  // error message icon
-	  [vars$T.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$T.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$T.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$T.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$T.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$T.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$U.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$U.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$U.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$U.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$U.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$U.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  _checked: {
-	    [vars$T.trackBorderColor]: refs$1.borderColor,
-	    [vars$T.knobLeftOffset]: `calc(100% - var(${vars$T.knobSize}) - ${knobMargin})`,
-	    [vars$T.knobColor]: refs$1.valueTextColor,
-	    [vars$T.knobTextColor]: refs$1.valueTextColor,
+	    [vars$U.trackBorderColor]: refs$1.borderColor,
+	    [vars$U.knobLeftOffset]: `calc(100% - var(${vars$U.knobSize}) - ${knobMargin})`,
+	    [vars$U.knobColor]: refs$1.valueTextColor,
+	    [vars$U.knobTextColor]: refs$1.valueTextColor,
 	  },
 
 	  _disabled: {
-	    [vars$T.knobColor]: globalRefs$C.colors.surface.light,
-	    [vars$T.trackBorderColor]: globalRefs$C.colors.surface.light,
-	    [vars$T.trackBackgroundColor]: globalRefs$C.colors.surface.main,
-	    [vars$T.labelTextColor]: refs$1.labelTextColor,
+	    [vars$U.knobColor]: globalRefs$C.colors.surface.light,
+	    [vars$U.trackBorderColor]: globalRefs$C.colors.surface.light,
+	    [vars$U.trackBackgroundColor]: globalRefs$C.colors.surface.main,
+	    [vars$U.labelTextColor]: refs$1.labelTextColor,
 	    _checked: {
-	      [vars$T.knobColor]: globalRefs$C.colors.surface.light,
-	      [vars$T.trackBackgroundColor]: globalRefs$C.colors.surface.main,
+	      [vars$U.knobColor]: globalRefs$C.colors.surface.light,
+	      [vars$U.trackBackgroundColor]: globalRefs$C.colors.surface.main,
 	    },
 	  },
 
 	  _invalid: {
-	    [vars$T.trackBorderColor]: globalRefs$C.colors.error.main,
-	    [vars$T.knobColor]: globalRefs$C.colors.error.main,
+	    [vars$U.trackBorderColor]: globalRefs$C.colors.error.main,
+	    [vars$U.knobColor]: globalRefs$C.colors.error.main,
 	  },
 	};
 
 	var switchToggle$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: switchToggle,
-	  vars: vars$T
+	  vars: vars$U
 	});
 
-	const componentName$10 = getComponentName$1('container');
+	const componentName$11 = getComponentName$1('container');
 
-	class RawContainer extends createBaseClass({ componentName: componentName$10, baseSelector: 'slot' }) {
+	class RawContainer extends createBaseClass({ componentName: componentName$11, baseSelector: 'slot' }) {
 	  constructor() {
 	    super();
 
@@ -83808,7 +83808,7 @@ descope-boolean-field-internal {
 	    horizontalAlignment,
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$10
+	  componentName$11
 	);
 
 	const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -83903,7 +83903,7 @@ descope-boolean-field-internal {
 	  },
 	};
 
-	const vars$S = {
+	const vars$T = {
 	  ...compVars$7,
 	  ...helperVars$4,
 	};
@@ -83911,7 +83911,7 @@ descope-boolean-field-internal {
 	var container$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: container,
-	  vars: vars$S
+	  vars: vars$T
 	});
 
 	const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -83968,70 +83968,70 @@ descope-boolean-field-internal {
 	  return CssVarImageClass;
 	};
 
-	const componentName$$ = getComponentName$1('logo');
+	const componentName$10 = getComponentName$1('logo');
 
 	const LogoClass = createCssVarImageClass({
-	  componentName: componentName$$,
+	  componentName: componentName$10,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
 
-	const vars$R = LogoClass.cssVarList;
+	const vars$S = LogoClass.cssVarList;
 
 	const logo$2 = {
-	  [vars$R.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+	  [vars$S.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 	};
 
 	var logo$3 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: logo$2,
-	  vars: vars$R
+	  vars: vars$S
 	});
 
-	const componentName$_ = getComponentName$1('totp-image');
+	const componentName$$ = getComponentName$1('totp-image');
 
 	const TotpImageClass = createCssVarImageClass({
-	  componentName: componentName$_,
+	  componentName: componentName$$,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
 
-	const vars$Q = TotpImageClass.cssVarList;
+	const vars$R = TotpImageClass.cssVarList;
 
 	const logo$1 = {
-	  [vars$Q.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+	  [vars$R.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 	};
 
 	var totpImage = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: logo$1,
-	  vars: vars$Q
+	  vars: vars$R
 	});
 
-	const componentName$Z = getComponentName$1('notp-image');
+	const componentName$_ = getComponentName$1('notp-image');
 
 	const NotpImageClass = createCssVarImageClass({
-	  componentName: componentName$Z,
+	  componentName: componentName$_,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
 
-	const vars$P = NotpImageClass.cssVarList;
+	const vars$Q = NotpImageClass.cssVarList;
 
 	const logo = {
-	  [vars$P.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+	  [vars$Q.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 	};
 
 	var notpImage = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: logo,
-	  vars: vars$P
+	  vars: vars$Q
 	});
 
-	const componentName$Y = getComponentName('text');
+	const componentName$Z = getComponentName('text');
 
 	class RawText extends createBaseClass$1({
-	  componentName: componentName$Y,
+	  componentName: componentName$Z,
 	  baseSelector: ':host > slot',
 	}) {
 	  constructor() {
@@ -84094,106 +84094,106 @@ descope-boolean-field-internal {
 	)(RawText);
 
 	const globalRefs$A = getThemeRefs$1(globals);
-	const vars$O = TextClass.cssVarList;
+	const vars$P = TextClass.cssVarList;
 
 	const text$3 = {
-	  [vars$O.hostDirection]: globalRefs$A.direction,
-	  [vars$O.textLineHeight]: '1.35em',
-	  [vars$O.textAlign]: 'left',
-	  [vars$O.textColor]: globalRefs$A.colors.surface.dark,
+	  [vars$P.hostDirection]: globalRefs$A.direction,
+	  [vars$P.textLineHeight]: '1.35em',
+	  [vars$P.textAlign]: 'left',
+	  [vars$P.textColor]: globalRefs$A.colors.surface.dark,
 
 	  variant: {
 	    h1: {
-	      [vars$O.fontSize]: globalRefs$A.typography.h1.size,
-	      [vars$O.fontWeight]: globalRefs$A.typography.h1.weight,
-	      [vars$O.fontFamily]: globalRefs$A.typography.h1.font,
+	      [vars$P.fontSize]: globalRefs$A.typography.h1.size,
+	      [vars$P.fontWeight]: globalRefs$A.typography.h1.weight,
+	      [vars$P.fontFamily]: globalRefs$A.typography.h1.font,
 	    },
 	    h2: {
-	      [vars$O.fontSize]: globalRefs$A.typography.h2.size,
-	      [vars$O.fontWeight]: globalRefs$A.typography.h2.weight,
-	      [vars$O.fontFamily]: globalRefs$A.typography.h2.font,
+	      [vars$P.fontSize]: globalRefs$A.typography.h2.size,
+	      [vars$P.fontWeight]: globalRefs$A.typography.h2.weight,
+	      [vars$P.fontFamily]: globalRefs$A.typography.h2.font,
 	    },
 	    h3: {
-	      [vars$O.fontSize]: globalRefs$A.typography.h3.size,
-	      [vars$O.fontWeight]: globalRefs$A.typography.h3.weight,
-	      [vars$O.fontFamily]: globalRefs$A.typography.h3.font,
+	      [vars$P.fontSize]: globalRefs$A.typography.h3.size,
+	      [vars$P.fontWeight]: globalRefs$A.typography.h3.weight,
+	      [vars$P.fontFamily]: globalRefs$A.typography.h3.font,
 	    },
 	    subtitle1: {
-	      [vars$O.fontSize]: globalRefs$A.typography.subtitle1.size,
-	      [vars$O.fontWeight]: globalRefs$A.typography.subtitle1.weight,
-	      [vars$O.fontFamily]: globalRefs$A.typography.subtitle1.font,
+	      [vars$P.fontSize]: globalRefs$A.typography.subtitle1.size,
+	      [vars$P.fontWeight]: globalRefs$A.typography.subtitle1.weight,
+	      [vars$P.fontFamily]: globalRefs$A.typography.subtitle1.font,
 	    },
 	    subtitle2: {
-	      [vars$O.fontSize]: globalRefs$A.typography.subtitle2.size,
-	      [vars$O.fontWeight]: globalRefs$A.typography.subtitle2.weight,
-	      [vars$O.fontFamily]: globalRefs$A.typography.subtitle2.font,
+	      [vars$P.fontSize]: globalRefs$A.typography.subtitle2.size,
+	      [vars$P.fontWeight]: globalRefs$A.typography.subtitle2.weight,
+	      [vars$P.fontFamily]: globalRefs$A.typography.subtitle2.font,
 	    },
 	    body1: {
-	      [vars$O.fontSize]: globalRefs$A.typography.body1.size,
-	      [vars$O.fontWeight]: globalRefs$A.typography.body1.weight,
-	      [vars$O.fontFamily]: globalRefs$A.typography.body1.font,
+	      [vars$P.fontSize]: globalRefs$A.typography.body1.size,
+	      [vars$P.fontWeight]: globalRefs$A.typography.body1.weight,
+	      [vars$P.fontFamily]: globalRefs$A.typography.body1.font,
 	    },
 	    body2: {
-	      [vars$O.fontSize]: globalRefs$A.typography.body2.size,
-	      [vars$O.fontWeight]: globalRefs$A.typography.body2.weight,
-	      [vars$O.fontFamily]: globalRefs$A.typography.body2.font,
+	      [vars$P.fontSize]: globalRefs$A.typography.body2.size,
+	      [vars$P.fontWeight]: globalRefs$A.typography.body2.weight,
+	      [vars$P.fontFamily]: globalRefs$A.typography.body2.font,
 	    },
 	  },
 
 	  mode: {
 	    primary: {
-	      [vars$O.textColor]: globalRefs$A.colors.surface.contrast,
+	      [vars$P.textColor]: globalRefs$A.colors.surface.contrast,
 	    },
 	    secondary: {
-	      [vars$O.textColor]: globalRefs$A.colors.surface.dark,
+	      [vars$P.textColor]: globalRefs$A.colors.surface.dark,
 	    },
 	    error: {
-	      [vars$O.textColor]: globalRefs$A.colors.error.main,
+	      [vars$P.textColor]: globalRefs$A.colors.error.main,
 	    },
 	    'error-dark': {
-	      [vars$O.textColor]: globalRefs$A.colors.error.dark,
+	      [vars$P.textColor]: globalRefs$A.colors.error.dark,
 	    },
 	    success: {
-	      [vars$O.textColor]: globalRefs$A.colors.success.main,
+	      [vars$P.textColor]: globalRefs$A.colors.success.main,
 	    },
 	    'success-dark': {
-	      [vars$O.textColor]: globalRefs$A.colors.success.dark,
+	      [vars$P.textColor]: globalRefs$A.colors.success.dark,
 	    },
 	    warning: {
-	      [vars$O.textColor]: globalRefs$A.colors.warning.main,
+	      [vars$P.textColor]: globalRefs$A.colors.warning.main,
 	    },
 	    'warning-dark': {
-	      [vars$O.textColor]: globalRefs$A.colors.warning.dark,
+	      [vars$P.textColor]: globalRefs$A.colors.warning.dark,
 	    },
 	  },
 
 	  textAlign: {
-	    right: { [vars$O.textAlign]: 'right' },
-	    left: { [vars$O.textAlign]: 'left' },
-	    center: { [vars$O.textAlign]: 'center' },
+	    right: { [vars$P.textAlign]: 'right' },
+	    left: { [vars$P.textAlign]: 'left' },
+	    center: { [vars$P.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$O.hostWidth]: '100%',
+	    [vars$P.hostWidth]: '100%',
 	  },
 
 	  _italic: {
-	    [vars$O.fontStyle]: 'italic',
+	    [vars$P.fontStyle]: 'italic',
 	  },
 
 	  _uppercase: {
-	    [vars$O.textTransform]: 'uppercase',
+	    [vars$P.textTransform]: 'uppercase',
 	  },
 
 	  _lowercase: {
-	    [vars$O.textTransform]: 'lowercase',
+	    [vars$P.textTransform]: 'lowercase',
 	  },
 	};
 
 	var text$4 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: text$3,
-	  vars: vars$O
+	  vars: vars$P
 	});
 
 	const disableRules = [
@@ -84220,9 +84220,9 @@ descope-boolean-field-internal {
 	/* eslint-disable no-param-reassign */
 
 
-	const componentName$X = getComponentName('enriched-text');
+	const componentName$Y = getComponentName('enriched-text');
 
-	class EnrichedText extends createBaseClass$1({ componentName: componentName$X, baseSelector: ':host > div' }) {
+	class EnrichedText extends createBaseClass$1({ componentName: componentName$Y, baseSelector: ':host > div' }) {
 	  #origLinkRenderer;
 
 	  #origEmRenderer;
@@ -84419,9 +84419,9 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin$1
 	)(EnrichedText);
 
-	const componentName$W = getComponentName('link');
+	const componentName$X = getComponentName('link');
 
-	class RawLink extends createBaseClass$1({ componentName: componentName$W, baseSelector: ':host a' }) {
+	class RawLink extends createBaseClass$1({ componentName: componentName$X, baseSelector: ':host a' }) {
 	  constructor() {
 	    super();
 
@@ -84490,31 +84490,31 @@ descope-boolean-field-internal {
 	)(RawLink);
 
 	const globalRefs$z = getThemeRefs$1(globals);
-	const vars$N = LinkClass.cssVarList;
+	const vars$O = LinkClass.cssVarList;
 
 	const link$1 = {
-	  [vars$N.hostDirection]: globalRefs$z.direction,
-	  [vars$N.cursor]: 'pointer',
+	  [vars$O.hostDirection]: globalRefs$z.direction,
+	  [vars$O.cursor]: 'pointer',
 
-	  [vars$N.textColor]: globalRefs$z.colors.primary.main,
+	  [vars$O.textColor]: globalRefs$z.colors.primary.main,
 
 	  textAlign: {
-	    right: { [vars$N.textAlign]: 'right' },
-	    left: { [vars$N.textAlign]: 'left' },
-	    center: { [vars$N.textAlign]: 'center' },
+	    right: { [vars$O.textAlign]: 'right' },
+	    left: { [vars$O.textAlign]: 'left' },
+	    center: { [vars$O.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$N.hostWidth]: '100%',
+	    [vars$O.hostWidth]: '100%',
 	  },
 
 	  _hover: {
-	    [vars$N.textDecoration]: 'underline',
+	    [vars$O.textDecoration]: 'underline',
 	  },
 
 	  mode: {
 	    secondary: {
-	      [vars$N.textColor]: globalRefs$z.colors.secondary.main,
+	      [vars$O.textColor]: globalRefs$z.colors.secondary.main,
 	    },
 	  },
 	};
@@ -84522,37 +84522,37 @@ descope-boolean-field-internal {
 	var link$2 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: link$1,
-	  vars: vars$N
+	  vars: vars$O
 	});
 
 	const globalRefs$y = getThemeRefs$1(globals);
-	const vars$M = EnrichedTextClass.cssVarList;
+	const vars$N = EnrichedTextClass.cssVarList;
 
 	const enrichedText = {
-	  [vars$M.hostDirection]: globalRefs$y.direction,
-	  [vars$M.hostWidth]: useVar$1(vars$O.hostWidth),
+	  [vars$N.hostDirection]: globalRefs$y.direction,
+	  [vars$N.hostWidth]: useVar$1(vars$P.hostWidth),
 
-	  [vars$M.textLineHeight]: useVar$1(vars$O.textLineHeight),
-	  [vars$M.textColor]: useVar$1(vars$O.textColor),
-	  [vars$M.textAlign]: useVar$1(vars$O.textAlign),
+	  [vars$N.textLineHeight]: useVar$1(vars$P.textLineHeight),
+	  [vars$N.textColor]: useVar$1(vars$P.textColor),
+	  [vars$N.textAlign]: useVar$1(vars$P.textAlign),
 
-	  [vars$M.fontSize]: useVar$1(vars$O.fontSize),
-	  [vars$M.fontWeight]: useVar$1(vars$O.fontWeight),
-	  [vars$M.fontFamily]: useVar$1(vars$O.fontFamily),
+	  [vars$N.fontSize]: useVar$1(vars$P.fontSize),
+	  [vars$N.fontWeight]: useVar$1(vars$P.fontWeight),
+	  [vars$N.fontFamily]: useVar$1(vars$P.fontFamily),
 
-	  [vars$M.linkColor]: useVar$1(vars$N.textColor),
-	  [vars$M.linkTextDecoration]: 'none',
-	  [vars$M.linkHoverTextDecoration]: 'underline',
+	  [vars$N.linkColor]: useVar$1(vars$O.textColor),
+	  [vars$N.linkTextDecoration]: 'none',
+	  [vars$N.linkHoverTextDecoration]: 'underline',
 
-	  [vars$M.fontWeightBold]: '900',
-	  [vars$M.minWidth]: '0.25em',
-	  [vars$M.minHeight]: '1.35em',
+	  [vars$N.fontWeightBold]: '900',
+	  [vars$N.minWidth]: '0.25em',
+	  [vars$N.minHeight]: '1.35em',
 
-	  [vars$M.hostDisplay]: 'inline-block',
+	  [vars$N.hostDisplay]: 'inline-block',
 
 	  _empty: {
 	    _hideWhenEmpty: {
-	      [vars$M.hostDisplay]: 'none',
+	      [vars$N.hostDisplay]: 'none',
 	    },
 	  },
 	};
@@ -84560,11 +84560,11 @@ descope-boolean-field-internal {
 	var enrichedText$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: enrichedText,
-	  vars: vars$M
+	  vars: vars$N
 	});
 
-	const componentName$V = getComponentName$1('divider');
-	class RawDivider extends createBaseClass({ componentName: componentName$V, baseSelector: ':host > div' }) {
+	const componentName$W = getComponentName$1('divider');
+	class RawDivider extends createBaseClass({ componentName: componentName$W, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -84675,7 +84675,7 @@ descope-boolean-field-internal {
 	    thickness: '2px',
 	    spacing: '10px',
 	  },
-	  componentName$V
+	  componentName$W
 	);
 
 	const divider = {
@@ -84706,7 +84706,7 @@ descope-boolean-field-internal {
 	  },
 	};
 
-	const vars$L = {
+	const vars$M = {
 	  ...compVars$6,
 	  ...helperVars$3,
 	};
@@ -84714,18 +84714,18 @@ descope-boolean-field-internal {
 	var divider$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: divider,
-	  vars: vars$L
+	  vars: vars$M
 	});
 
 	/* eslint-disable no-param-reassign */
 
-	const componentName$U = getComponentName$1('passcode-internal');
+	const componentName$V = getComponentName$1('passcode-internal');
 
-	createBaseInputClass({ componentName: componentName$U, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$V, baseSelector: 'div' });
 
-	const componentName$T = getComponentName$1('loader-radial');
+	const componentName$U = getComponentName$1('loader-radial');
 
-	class RawLoaderRadial extends createBaseClass({ componentName: componentName$T, baseSelector: ':host > div' }) {
+	class RawLoaderRadial extends createBaseClass({ componentName: componentName$U, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -84773,14 +84773,14 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin
 	)(RawLoaderRadial);
 
-	const componentName$S = getComponentName$1('passcode');
+	const componentName$T = getComponentName$1('passcode');
 
-	const observedAttributes$3 = ['digits'];
+	const observedAttributes$4 = ['digits'];
 
 	const customMixin$b = (superclass) =>
 	  class PasscodeMixinClass extends superclass {
 	    static get observedAttributes() {
-	      return observedAttributes$3.concat(superclass.observedAttributes || []);
+	      return observedAttributes$4.concat(superclass.observedAttributes || []);
 	    }
 
 	    get digits() {
@@ -84818,18 +84818,18 @@ descope-boolean-field-internal {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$U}
+      <${componentName$V}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$U}>
+      ><slot></slot></${componentName$V}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$U);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$V);
 
 	      forwardAttrs$1(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
 	    }
@@ -84988,64 +84988,64 @@ descope-boolean-field-internal {
 			${resetInputCursor('vaadin-text-field')}
     	`,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$S,
+	    componentName: componentName$T,
 	  })
 	);
 
-	const vars$K = PasscodeClass.cssVarList;
+	const vars$L = PasscodeClass.cssVarList;
 
 	const passcode = {
-	  [vars$K.hostDirection]: refs$1.direction,
-	  [vars$K.fontFamily]: refs$1.fontFamily,
-	  [vars$K.fontSize]: refs$1.fontSize,
-	  [vars$K.labelTextColor]: refs$1.labelTextColor,
-	  [vars$K.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$K.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$K.digitValueTextColor]: refs$1.valueTextColor,
-	  [vars$K.digitPadding]: '0',
-	  [vars$K.digitTextAlign]: 'center',
-	  [vars$K.digitSpacing]: '4px',
-	  [vars$K.hostWidth]: refs$1.width,
-	  [vars$K.digitOutlineColor]: 'transparent',
-	  [vars$K.digitOutlineWidth]: refs$1.outlineWidth,
-	  [vars$K.focusedDigitFieldOutlineColor]: refs$1.outlineColor,
-	  [vars$K.digitSize]: refs$1.inputHeight,
+	  [vars$L.hostDirection]: refs$1.direction,
+	  [vars$L.fontFamily]: refs$1.fontFamily,
+	  [vars$L.fontSize]: refs$1.fontSize,
+	  [vars$L.labelTextColor]: refs$1.labelTextColor,
+	  [vars$L.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$L.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$L.digitValueTextColor]: refs$1.valueTextColor,
+	  [vars$L.digitPadding]: '0',
+	  [vars$L.digitTextAlign]: 'center',
+	  [vars$L.digitSpacing]: '4px',
+	  [vars$L.hostWidth]: refs$1.width,
+	  [vars$L.digitOutlineColor]: 'transparent',
+	  [vars$L.digitOutlineWidth]: refs$1.outlineWidth,
+	  [vars$L.focusedDigitFieldOutlineColor]: refs$1.outlineColor,
+	  [vars$L.digitSize]: refs$1.inputHeight,
 
 	  // error message icon
-	  [vars$K.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$K.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$K.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$K.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$K.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$K.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$L.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$L.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$L.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$L.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$L.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$L.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  size: {
-	    xs: { [vars$K.spinnerSize]: '15px' },
-	    sm: { [vars$K.spinnerSize]: '20px' },
-	    md: { [vars$K.spinnerSize]: '20px' },
-	    lg: { [vars$K.spinnerSize]: '20px' },
+	    xs: { [vars$L.spinnerSize]: '15px' },
+	    sm: { [vars$L.spinnerSize]: '20px' },
+	    md: { [vars$L.spinnerSize]: '20px' },
+	    lg: { [vars$L.spinnerSize]: '20px' },
 	  },
 
 	  _hideCursor: {
-	    [vars$K.digitCaretTextColor]: 'transparent',
+	    [vars$L.digitCaretTextColor]: 'transparent',
 	  },
 
 	  _loading: {
-	    [vars$K.overlayOpacity]: refs$1.overlayOpacity,
+	    [vars$L.overlayOpacity]: refs$1.overlayOpacity,
 	  },
 	};
 
 	var passcode$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: passcode,
-	  vars: vars$K
+	  vars: vars$L
 	});
 
-	const componentName$R = getComponentName$1('loader-linear');
+	const componentName$S = getComponentName$1('loader-linear');
 
-	class RawLoaderLinear extends createBaseClass({ componentName: componentName$R, baseSelector: ':host > div' }) {
+	class RawLoaderLinear extends createBaseClass({ componentName: componentName$S, baseSelector: ':host > div' }) {
 	  static get componentName() {
-	    return componentName$R;
+	    return componentName$S;
 	  }
 
 	  constructor() {
@@ -85111,48 +85111,48 @@ descope-boolean-field-internal {
 	)(RawLoaderLinear);
 
 	const globalRefs$w = getThemeRefs(globals$1);
-	const vars$J = LoaderLinearClass.cssVarList;
+	const vars$K = LoaderLinearClass.cssVarList;
 
 	const loaderLinear = {
-	  [vars$J.hostDisplay]: 'inline-block',
-	  [vars$J.hostWidth]: '100%',
+	  [vars$K.hostDisplay]: 'inline-block',
+	  [vars$K.hostWidth]: '100%',
 
-	  [vars$J.barColor]: globalRefs$w.colors.surface.contrast,
-	  [vars$J.barWidth]: '20%',
+	  [vars$K.barColor]: globalRefs$w.colors.surface.contrast,
+	  [vars$K.barWidth]: '20%',
 
-	  [vars$J.barBackgroundColor]: globalRefs$w.colors.surface.light,
-	  [vars$J.barBorderRadius]: '4px',
+	  [vars$K.barBackgroundColor]: globalRefs$w.colors.surface.light,
+	  [vars$K.barBorderRadius]: '4px',
 
-	  [vars$J.animationDuration]: '2s',
-	  [vars$J.animationTimingFunction]: 'linear',
-	  [vars$J.animationIterationCount]: 'infinite',
-	  [vars$J.verticalPadding]: '0.25em',
+	  [vars$K.animationDuration]: '2s',
+	  [vars$K.animationTimingFunction]: 'linear',
+	  [vars$K.animationIterationCount]: 'infinite',
+	  [vars$K.verticalPadding]: '0.25em',
 
 	  size: {
-	    xs: { [vars$J.barHeight]: '2px' },
-	    sm: { [vars$J.barHeight]: '4px' },
-	    md: { [vars$J.barHeight]: '6px' },
-	    lg: { [vars$J.barHeight]: '8px' },
+	    xs: { [vars$K.barHeight]: '2px' },
+	    sm: { [vars$K.barHeight]: '4px' },
+	    md: { [vars$K.barHeight]: '6px' },
+	    lg: { [vars$K.barHeight]: '8px' },
 	  },
 
 	  mode: {
 	    primary: {
-	      [vars$J.barColor]: globalRefs$w.colors.primary.main,
+	      [vars$K.barColor]: globalRefs$w.colors.primary.main,
 	    },
 	    secondary: {
-	      [vars$J.barColor]: globalRefs$w.colors.secondary.main,
+	      [vars$K.barColor]: globalRefs$w.colors.secondary.main,
 	    },
 	  },
 
 	  _hidden: {
-	    [vars$J.hostDisplay]: 'none',
+	    [vars$K.hostDisplay]: 'none',
 	  },
 	};
 
 	var loaderLinear$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: loaderLinear,
-	  vars: vars$J
+	  vars: vars$K
 	});
 
 	const globalRefs$v = getThemeRefs(globals$1);
@@ -85170,7 +85170,7 @@ descope-boolean-field-internal {
 	      },
 	    },
 	  },
-	  componentName$T
+	  componentName$U
 	);
 
 	const loaderRadial = {
@@ -85199,7 +85199,7 @@ descope-boolean-field-internal {
 	    [compVars$5.hostDisplay]: 'none',
 	  },
 	};
-	const vars$I = {
+	const vars$J = {
 	  ...compVars$5,
 	  ...helperVars$2,
 	};
@@ -85207,10 +85207,10 @@ descope-boolean-field-internal {
 	var loaderRadial$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: loaderRadial,
-	  vars: vars$I
+	  vars: vars$J
 	});
 
-	const componentName$Q = getComponentName('combo-box');
+	const componentName$R = getComponentName('combo-box');
 
 	const ComboBoxMixin = (superclass) =>
 	  class ComboBoxMixinClass extends superclass {
@@ -85859,15 +85859,15 @@ descope-boolean-field-internal {
 	    // and reset items to an empty array, and opening the list box with no items
 	    // to display.
 	    excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
-	    componentName: componentName$Q,
+	    componentName: componentName$R,
 	    includeForwardProps: ['items', 'renderer', 'selectedItem'],
 	  }),
 	);
 
-	const componentName$P = getComponentName('input-wrapper');
+	const componentName$Q = getComponentName('input-wrapper');
 	const globalRefs$u = getThemeRefs$1(globals);
 
-	const [theme$1, refs, vars$H] = createHelperVars$1(
+	const [theme$1, refs, vars$I] = createHelperVars$1(
 	  {
 	    labelTextColor: globalRefs$u.colors.surface.dark,
 	    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
@@ -85987,103 +85987,103 @@ descope-boolean-field-internal {
 	      backgroundColor: globalRefs$u.colors.surface.main,
 	    },
 	  },
-	  componentName$P,
+	  componentName$Q,
 	);
 
 	const globalRefs$t = getThemeRefs$1(globals);
-	const vars$G = ComboBoxClass.cssVarList;
+	const vars$H = ComboBoxClass.cssVarList;
 
 	const comboBox = {
-	  [vars$G.hostWidth]: refs.width,
-	  [vars$G.hostDirection]: refs.direction,
-	  [vars$G.fontSize]: refs.fontSize,
-	  [vars$G.fontFamily]: refs.fontFamily,
-	  [vars$G.labelFontSize]: refs.labelFontSize,
-	  [vars$G.labelFontWeight]: refs.labelFontWeight,
-	  [vars$G.labelTextColor]: refs.labelTextColor,
-	  [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
-	  [vars$G.inputBorderColor]: refs.borderColor,
-	  [vars$G.inputBorderWidth]: refs.borderWidth,
-	  [vars$G.inputBorderStyle]: refs.borderStyle,
-	  [vars$G.inputBorderRadius]: refs.borderRadius,
-	  [vars$G.inputOutlineColor]: refs.outlineColor,
-	  [vars$G.inputOutlineOffset]: refs.outlineOffset,
-	  [vars$G.inputOutlineWidth]: refs.outlineWidth,
-	  [vars$G.inputOutlineStyle]: refs.outlineStyle,
-	  [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
-	  [vars$G.inputValueTextColor]: refs.valueTextColor,
-	  [vars$G.inputPlaceholderTextColor]: refs.placeholderTextColor,
-	  [vars$G.inputBackgroundColor]: refs.backgroundColor,
-	  [vars$G.inputHorizontalPadding]: refs.horizontalPadding,
-	  [vars$G.inputHeight]: refs.inputHeight,
-	  [vars$G.inputDropdownButtonColor]: globalRefs$t.colors.surface.dark,
-	  [vars$G.inputDropdownButtonCursor]: 'pointer',
-	  [vars$G.inputDropdownButtonSize]: refs.toggleButtonSize,
-	  [vars$G.inputDropdownButtonOffset]: globalRefs$t.spacing.xs,
-	  [vars$G.overlayItemPaddingInlineStart]: globalRefs$t.spacing.xs,
-	  [vars$G.overlayItemPaddingInlineEnd]: globalRefs$t.spacing.lg,
-	  [vars$G.labelPosition]: refs.labelPosition,
-	  [vars$G.labelTopPosition]: refs.labelTopPosition,
-	  [vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
-	  [vars$G.inputTransformY]: refs.inputTransformY,
-	  [vars$G.inputTransition]: refs.inputTransition,
-	  [vars$G.marginInlineStart]: refs.marginInlineStart,
-	  [vars$G.placeholderOpacity]: refs.placeholderOpacity,
-	  [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
-	  [vars$G.valueInputHeight]: refs.valueInputHeight,
-	  [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
+	  [vars$H.hostWidth]: refs.width,
+	  [vars$H.hostDirection]: refs.direction,
+	  [vars$H.fontSize]: refs.fontSize,
+	  [vars$H.fontFamily]: refs.fontFamily,
+	  [vars$H.labelFontSize]: refs.labelFontSize,
+	  [vars$H.labelFontWeight]: refs.labelFontWeight,
+	  [vars$H.labelTextColor]: refs.labelTextColor,
+	  [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
+	  [vars$H.inputBorderColor]: refs.borderColor,
+	  [vars$H.inputBorderWidth]: refs.borderWidth,
+	  [vars$H.inputBorderStyle]: refs.borderStyle,
+	  [vars$H.inputBorderRadius]: refs.borderRadius,
+	  [vars$H.inputOutlineColor]: refs.outlineColor,
+	  [vars$H.inputOutlineOffset]: refs.outlineOffset,
+	  [vars$H.inputOutlineWidth]: refs.outlineWidth,
+	  [vars$H.inputOutlineStyle]: refs.outlineStyle,
+	  [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
+	  [vars$H.inputValueTextColor]: refs.valueTextColor,
+	  [vars$H.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	  [vars$H.inputBackgroundColor]: refs.backgroundColor,
+	  [vars$H.inputHorizontalPadding]: refs.horizontalPadding,
+	  [vars$H.inputHeight]: refs.inputHeight,
+	  [vars$H.inputDropdownButtonColor]: globalRefs$t.colors.surface.dark,
+	  [vars$H.inputDropdownButtonCursor]: 'pointer',
+	  [vars$H.inputDropdownButtonSize]: refs.toggleButtonSize,
+	  [vars$H.inputDropdownButtonOffset]: globalRefs$t.spacing.xs,
+	  [vars$H.overlayItemPaddingInlineStart]: globalRefs$t.spacing.xs,
+	  [vars$H.overlayItemPaddingInlineEnd]: globalRefs$t.spacing.lg,
+	  [vars$H.labelPosition]: refs.labelPosition,
+	  [vars$H.labelTopPosition]: refs.labelTopPosition,
+	  [vars$H.labelHorizontalPosition]: refs.labelHorizontalPosition,
+	  [vars$H.inputTransformY]: refs.inputTransformY,
+	  [vars$H.inputTransition]: refs.inputTransition,
+	  [vars$H.marginInlineStart]: refs.marginInlineStart,
+	  [vars$H.placeholderOpacity]: refs.placeholderOpacity,
+	  [vars$H.inputVerticalAlignment]: refs.inputVerticalAlignment,
+	  [vars$H.valueInputHeight]: refs.valueInputHeight,
+	  [vars$H.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
 	  // error message icon
-	  [vars$G.errorMessageIcon]: refs.errorMessageIcon,
-	  [vars$G.errorMessageIconSize]: refs.errorMessageIconSize,
-	  [vars$G.errorMessageIconPadding]: refs.errorMessageIconPadding,
-	  [vars$G.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-	  [vars$G.errorMessageIconPosition]: refs.errorMessageIconPosition,
-	  [vars$G.errorMessageFontSize]: refs.errorMessageFontSize,
+	  [vars$H.errorMessageIcon]: refs.errorMessageIcon,
+	  [vars$H.errorMessageIconSize]: refs.errorMessageIconSize,
+	  [vars$H.errorMessageIconPadding]: refs.errorMessageIconPadding,
+	  [vars$H.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+	  [vars$H.errorMessageIconPosition]: refs.errorMessageIconPosition,
+	  [vars$H.errorMessageFontSize]: refs.errorMessageFontSize,
 
 	  _readonly: {
-	    [vars$G.inputDropdownButtonCursor]: 'default',
+	    [vars$H.inputDropdownButtonCursor]: 'default',
 	  },
 
 	  // Overlay theme exposed via the component:
-	  [vars$G.overlayFontSize]: refs.fontSize,
-	  [vars$G.overlayFontFamily]: refs.fontFamily,
-	  [vars$G.overlayCursor]: 'pointer',
-	  [vars$G.overlayItemBoxShadow]: 'none',
-	  [vars$G.overlayBackground]: refs.backgroundColor,
-	  [vars$G.overlayTextColor]: refs.valueTextColor,
-	  [vars$G.overlayCheckmarkDisplay]: 'initial',
-	  [vars$G.overlaySelectedItemBackground]: 'initial',
-	  [vars$G.overlaySelectedItemHoverBackground]:
+	  [vars$H.overlayFontSize]: refs.fontSize,
+	  [vars$H.overlayFontFamily]: refs.fontFamily,
+	  [vars$H.overlayCursor]: 'pointer',
+	  [vars$H.overlayItemBoxShadow]: 'none',
+	  [vars$H.overlayBackground]: refs.backgroundColor,
+	  [vars$H.overlayTextColor]: refs.valueTextColor,
+	  [vars$H.overlayCheckmarkDisplay]: 'initial',
+	  [vars$H.overlaySelectedItemBackground]: 'initial',
+	  [vars$H.overlaySelectedItemHoverBackground]:
 	    globalRefs$t.colors.primary.highlight,
-	  [vars$G.overlaySelectedItemFocusBackground]:
+	  [vars$H.overlaySelectedItemFocusBackground]:
 	    globalRefs$t.colors.primary.highlight,
-	  [vars$G.overlayItemHoverBackground]: globalRefs$t.colors.primary.highlight,
-	  [vars$G.overlayItemFocusBackground]: globalRefs$t.colors.primary.highlight,
+	  [vars$H.overlayItemHoverBackground]: globalRefs$t.colors.primary.highlight,
+	  [vars$H.overlayItemFocusBackground]: globalRefs$t.colors.primary.highlight,
 
 	  // Overlay direct theme:
-	  [vars$G.overlay.minHeight]: '400px',
-	  [vars$G.overlay.margin]: '0',
+	  [vars$H.overlay.minHeight]: '400px',
+	  [vars$H.overlay.margin]: '0',
 
-	  [vars$G.overlay.contentHeight]: '100%',
-	  [vars$G.overlay.contentOpacity]: '1',
-	  [vars$G.overlay.scrollerMinHeight]: '1px',
+	  [vars$H.overlay.contentHeight]: '100%',
+	  [vars$H.overlay.contentOpacity]: '1',
+	  [vars$H.overlay.scrollerMinHeight]: '1px',
 	  _loading: {
-	    [vars$G.overlay.loaderTop]: '50%',
-	    [vars$G.overlay.loaderLeft]: '50%',
-	    [vars$G.overlay.loaderRight]: 'auto',
+	    [vars$H.overlay.loaderTop]: '50%',
+	    [vars$H.overlay.loaderLeft]: '50%',
+	    [vars$H.overlay.loaderRight]: 'auto',
 	    // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
 	    // Margin has to be half of the width/height of the loader to center it
-	    [vars$G.overlay.loaderMargin]: '-15px 0 0 -15px',
-	    [vars$G.overlay.loaderWidth]: '30px',
-	    [vars$G.overlay.loaderHeight]: '30px',
-	    [vars$G.overlay.loaderBorder]: '2px solid transparent',
-	    [vars$G.overlay.loaderBorderColor]:
+	    [vars$H.overlay.loaderMargin]: '-15px 0 0 -15px',
+	    [vars$H.overlay.loaderWidth]: '30px',
+	    [vars$H.overlay.loaderHeight]: '30px',
+	    [vars$H.overlay.loaderBorder]: '2px solid transparent',
+	    [vars$H.overlay.loaderBorderColor]:
 	      `${globalRefs$t.colors.primary.highlight} ${globalRefs$t.colors.primary.highlight} ${globalRefs$t.colors.primary.main} ${globalRefs$t.colors.primary.main}`,
-	    [vars$G.overlay.loaderBorderRadius]: '50%',
-	    [vars$G.overlay.contentHeight]: '100px',
-	    [vars$G.overlay.scrollerMinHeight]: '100px',
-	    [vars$G.overlay.contentOpacity]: '0',
+	    [vars$H.overlay.loaderBorderRadius]: '50%',
+	    [vars$H.overlay.contentHeight]: '100px',
+	    [vars$H.overlay.scrollerMinHeight]: '100px',
+	    [vars$H.overlay.contentOpacity]: '0',
 	  },
 	};
 
@@ -86091,7 +86091,7 @@ descope-boolean-field-internal {
 	  __proto__: null,
 	  comboBox: comboBox,
 	  default: comboBox,
-	  vars: vars$G
+	  vars: vars$H
 	});
 
 	var CountryCodes = [
@@ -87305,14 +87305,14 @@ descope-boolean-field-internal {
 	  ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 	];
 
-	const componentName$O = getComponentName$1('phone-field-internal');
+	const componentName$P = getComponentName$1('phone-field-internal');
 
-	createBaseInputClass({ componentName: componentName$O, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$P, baseSelector: 'div' });
 
 	const textVars$3 = TextFieldClass.cssVarList;
 	const comboVars = ComboBoxClass.cssVarList;
 
-	const componentName$N = getComponentName$1('phone-field');
+	const componentName$O = getComponentName$1('phone-field');
 
 	const customMixin$a = (superclass) =>
 	  class PhoneFieldMixinClass extends superclass {
@@ -87326,15 +87326,15 @@ descope-boolean-field-internal {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-				<${componentName$O}
+				<${componentName$P}
 					tabindex="-1"
 					slot="input"
-				></${componentName$O}>
+				></${componentName$P}>
       		`;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$O);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$P);
 
 	      forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
 	        includeAttrs: [
@@ -87606,44 +87606,44 @@ descope-boolean-field-internal {
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$N,
+	    componentName: componentName$O,
 	  })
 	);
 
-	const vars$F = PhoneFieldClass.cssVarList;
+	const vars$G = PhoneFieldClass.cssVarList;
 
 	const phoneField = {
-	  [vars$F.hostWidth]: refs$1.width,
-	  [vars$F.hostDirection]: refs$1.direction,
-	  [vars$F.fontSize]: refs$1.fontSize,
-	  [vars$F.fontFamily]: refs$1.fontFamily,
-	  [vars$F.labelTextColor]: refs$1.labelTextColor,
-	  [vars$F.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$F.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$F.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$F.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-	  [vars$F.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$F.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$F.inputBorderColor]: refs$1.borderColor,
-	  [vars$F.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$F.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$F.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$F.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$F.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$F.phoneInputWidth]: refs$1.minWidth,
-	  [vars$F.countryCodeInputWidth]: '5em',
-	  [vars$F.countryCodeDropdownWidth]: '20em',
-	  [vars$F.marginInlineStart]: '-0.25em',
-	  [vars$F.valueInputHeight]: refs$1.valueInputHeight,
-	  [vars$F.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+	  [vars$G.hostWidth]: refs$1.width,
+	  [vars$G.hostDirection]: refs$1.direction,
+	  [vars$G.fontSize]: refs$1.fontSize,
+	  [vars$G.fontFamily]: refs$1.fontFamily,
+	  [vars$G.labelTextColor]: refs$1.labelTextColor,
+	  [vars$G.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$G.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$G.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$G.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+	  [vars$G.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$G.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$G.inputBorderColor]: refs$1.borderColor,
+	  [vars$G.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$G.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$G.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$G.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$G.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$G.phoneInputWidth]: refs$1.minWidth,
+	  [vars$G.countryCodeInputWidth]: '5em',
+	  [vars$G.countryCodeDropdownWidth]: '20em',
+	  [vars$G.marginInlineStart]: '-0.25em',
+	  [vars$G.valueInputHeight]: refs$1.valueInputHeight,
+	  [vars$G.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
 
 	  // error message icon
-	  [vars$F.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$F.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$F.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$F.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$F.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$F.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$G.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$G.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$G.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$G.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$G.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$G.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  // '@overlay': {
 	  // 	overlayItemBackgroundColor: 'red'
@@ -87653,16 +87653,16 @@ descope-boolean-field-internal {
 	var phoneField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: phoneField,
-	  vars: vars$F
+	  vars: vars$G
 	});
 
-	const componentName$M = getComponentName$1('phone-field-internal-input-box');
+	const componentName$N = getComponentName$1('phone-field-internal-input-box');
 
-	createBaseInputClass({ componentName: componentName$M, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$N, baseSelector: 'div' });
 
 	const textVars$2 = TextFieldClass.cssVarList;
 
-	const componentName$L = getComponentName$1('phone-input-box-field');
+	const componentName$M = getComponentName$1('phone-input-box-field');
 
 	const customMixin$9 = (superclass) =>
 	  class PhoneFieldInputBoxMixinClass extends superclass {
@@ -87676,15 +87676,15 @@ descope-boolean-field-internal {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-				<${componentName$M}
+				<${componentName$N}
 					tabindex="-1"
 					slot="input"
-				></${componentName$M}>
+				></${componentName$N}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$M);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$N);
 
 	      forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
 	        includeAttrs: [
@@ -87888,70 +87888,70 @@ descope-boolean-field-internal {
     ${inputFloatingLabelStyle()}
 		`,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$L,
+	    componentName: componentName$M,
 	  })
 	);
 
-	const vars$E = PhoneFieldInputBoxClass.cssVarList;
+	const vars$F = PhoneFieldInputBoxClass.cssVarList;
 
 	const phoneInputBoxField = {
-	  [vars$E.hostWidth]: '16em',
-	  [vars$E.hostMinWidth]: refs$1.minWidth,
-	  [vars$E.hostDirection]: refs$1.direction,
-	  [vars$E.fontSize]: refs$1.fontSize,
-	  [vars$E.fontFamily]: refs$1.fontFamily,
-	  [vars$E.labelFontSize]: refs$1.labelFontSize,
-	  [vars$E.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$E.labelTextColor]: refs$1.labelTextColor,
-	  [vars$E.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$E.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$E.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$E.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-	  [vars$E.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$E.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$E.inputBorderColor]: refs$1.borderColor,
-	  [vars$E.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$E.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$E.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$E.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$E.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$E.labelPosition]: refs$1.labelPosition,
-	  [vars$E.labelTopPosition]: refs$1.labelTopPosition,
-	  [vars$E.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-	  [vars$E.inputTransformY]: refs$1.inputTransformY,
-	  [vars$E.inputTransition]: refs$1.inputTransition,
-	  [vars$E.marginInlineStart]: refs$1.marginInlineStart,
-	  [vars$E.valueInputHeight]: refs$1.valueInputHeight,
-	  [vars$E.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
-	  [vars$E.inputHorizontalPadding]: '0',
+	  [vars$F.hostWidth]: '16em',
+	  [vars$F.hostMinWidth]: refs$1.minWidth,
+	  [vars$F.hostDirection]: refs$1.direction,
+	  [vars$F.fontSize]: refs$1.fontSize,
+	  [vars$F.fontFamily]: refs$1.fontFamily,
+	  [vars$F.labelFontSize]: refs$1.labelFontSize,
+	  [vars$F.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$F.labelTextColor]: refs$1.labelTextColor,
+	  [vars$F.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$F.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$F.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$F.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+	  [vars$F.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$F.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$F.inputBorderColor]: refs$1.borderColor,
+	  [vars$F.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$F.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$F.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$F.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$F.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$F.labelPosition]: refs$1.labelPosition,
+	  [vars$F.labelTopPosition]: refs$1.labelTopPosition,
+	  [vars$F.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+	  [vars$F.inputTransformY]: refs$1.inputTransformY,
+	  [vars$F.inputTransition]: refs$1.inputTransition,
+	  [vars$F.marginInlineStart]: refs$1.marginInlineStart,
+	  [vars$F.valueInputHeight]: refs$1.valueInputHeight,
+	  [vars$F.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+	  [vars$F.inputHorizontalPadding]: '0',
 
 	  // error message icon
-	  [vars$E.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$E.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$E.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$E.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$E.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$E.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$F.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$F.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$F.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$F.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$F.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$F.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  _fullWidth: {
-	    [vars$E.hostWidth]: refs$1.width,
+	    [vars$F.hostWidth]: refs$1.width,
 	  },
 	};
 
 	var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: phoneInputBoxField,
-	  vars: vars$E
+	  vars: vars$F
 	});
 
-	const componentName$K = getComponentName$1('new-password-internal');
+	const componentName$L = getComponentName$1('new-password-internal');
 
 	const interpolateString = (template, values) =>
 	  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
 	// eslint-disable-next-line max-classes-per-file
 
-	const componentName$J = getComponentName$1('policy-validation');
+	const componentName$K = getComponentName$1('policy-validation');
 
 	const overrideAttrs = [
 	  'data-password-policy-value-minlength',
@@ -87961,7 +87961,7 @@ descope-boolean-field-internal {
 	const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 	const policyAttrs = ['label', 'value', ...dataAttrs];
 
-	class RawPolicyValidation extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > div' }) {
+	class RawPolicyValidation extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > div' }) {
 	  #availablePolicies;
 
 	  #activePolicies = [];
@@ -88233,7 +88233,7 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin
 	)(RawPolicyValidation);
 
-	const componentName$I = getComponentName$1('new-password');
+	const componentName$J = getComponentName$1('new-password');
 
 	const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -88247,18 +88247,18 @@ descope-boolean-field-internal {
 	      const externalInputAttr = this.getAttribute('external-input');
 
 	      template.innerHTML = `
-			<${componentName$K}
+			<${componentName$L}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$K}>
+      </${componentName$L}>
 			`;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$K);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$L);
 
 	      if (this.getAttribute('external-input') === 'true') {
 	        this.initExternalInput();
@@ -88442,48 +88442,48 @@ descope-boolean-field-internal {
     }
 		`,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$I,
+	    componentName: componentName$J,
 	  })
 	);
 
 	const globalRefs$s = getThemeRefs(globals$1);
-	const vars$D = NewPasswordClass.cssVarList;
+	const vars$E = NewPasswordClass.cssVarList;
 
 	const newPassword = {
-	  [vars$D.hostWidth]: refs$1.width,
-	  [vars$D.hostMinWidth]: refs$1.minWidth,
-	  [vars$D.hostDirection]: refs$1.direction,
-	  [vars$D.fontSize]: refs$1.fontSize,
-	  [vars$D.fontFamily]: refs$1.fontFamily,
-	  [vars$D.labelFontSize]: refs$1.labelFontSize,
-	  [vars$D.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$D.labelTextColor]: refs$1.labelTextColor,
-	  [vars$D.spaceBetweenInputs]: '1em',
-	  [vars$D.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$D.policyPreviewBackgroundColor]: 'none',
-	  [vars$D.policyPreviewPadding]: globalRefs$s.spacing.lg,
-	  [vars$D.valueInputHeight]: refs$1.valueInputHeight,
+	  [vars$E.hostWidth]: refs$1.width,
+	  [vars$E.hostMinWidth]: refs$1.minWidth,
+	  [vars$E.hostDirection]: refs$1.direction,
+	  [vars$E.fontSize]: refs$1.fontSize,
+	  [vars$E.fontFamily]: refs$1.fontFamily,
+	  [vars$E.labelFontSize]: refs$1.labelFontSize,
+	  [vars$E.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$E.labelTextColor]: refs$1.labelTextColor,
+	  [vars$E.spaceBetweenInputs]: '1em',
+	  [vars$E.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$E.policyPreviewBackgroundColor]: 'none',
+	  [vars$E.policyPreviewPadding]: globalRefs$s.spacing.lg,
+	  [vars$E.valueInputHeight]: refs$1.valueInputHeight,
 
 	  // error message icon
-	  [vars$D.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$D.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$D.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$D.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$D.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$D.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$E.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$E.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$E.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$E.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$E.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$E.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  _required: {
 	    // NewPassword doesn't pass `required` attribute to its Password components.
 	    // That's why we fake the required indicator on each input.
 	    // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-	    [vars$D.inputsRequiredIndicator]: refs$1.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+	    [vars$E.inputsRequiredIndicator]: refs$1.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
 	  },
 	};
 
 	var newPassword$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: newPassword,
-	  vars: vars$D
+	  vars: vars$E
 	});
 
 	const getFileBase64 = (fileObj) => {
@@ -88498,9 +88498,9 @@ descope-boolean-field-internal {
 	  return fileObj.name.replace(/^.*\\/, '');
 	};
 
-	const componentName$H = getComponentName$1('upload-file');
+	const componentName$I = getComponentName$1('upload-file');
 
-	const observedAttributes$2 = [
+	const observedAttributes$3 = [
 	  'title',
 	  'description',
 	  'button-label',
@@ -88513,11 +88513,11 @@ descope-boolean-field-internal {
 	  'icon',
 	];
 
-	const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$H, baseSelector: ':host > div' });
+	const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$I, baseSelector: ':host > div' });
 
-	class RawUploadFile extends BaseInputClass$3 {
+	class RawUploadFile extends BaseInputClass$4 {
 	  static get observedAttributes() {
-	    return observedAttributes$2.concat(BaseInputClass$3.observedAttributes || []);
+	    return observedAttributes$3.concat(BaseInputClass$4.observedAttributes || []);
 	  }
 
 	  constructor() {
@@ -88732,77 +88732,77 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin
 	)(RawUploadFile);
 
-	const vars$C = UploadFileClass.cssVarList;
+	const vars$D = UploadFileClass.cssVarList;
 
 	const uploadFile = {
-	  [vars$C.hostDirection]: refs$1.direction,
-	  [vars$C.labelTextColor]: refs$1.labelTextColor,
-	  [vars$C.fontFamily]: refs$1.fontFamily,
+	  [vars$D.hostDirection]: refs$1.direction,
+	  [vars$D.labelTextColor]: refs$1.labelTextColor,
+	  [vars$D.fontFamily]: refs$1.fontFamily,
 
-	  [vars$C.iconSize]: '2em',
+	  [vars$D.iconSize]: '2em',
 
-	  [vars$C.hostPadding]: '0.75em',
-	  [vars$C.gap]: '0.5em',
+	  [vars$D.hostPadding]: '0.75em',
+	  [vars$D.gap]: '0.5em',
 
-	  [vars$C.fontSize]: '16px',
-	  [vars$C.titleFontWeight]: '500',
-	  [vars$C.lineHeight]: '1em',
+	  [vars$D.fontSize]: '16px',
+	  [vars$D.titleFontWeight]: '500',
+	  [vars$D.lineHeight]: '1em',
 
-	  [vars$C.borderWidth]: refs$1.borderWidth,
-	  [vars$C.borderColor]: refs$1.borderColor,
-	  [vars$C.borderRadius]: refs$1.borderRadius,
-	  [vars$C.borderStyle]: 'dashed',
+	  [vars$D.borderWidth]: refs$1.borderWidth,
+	  [vars$D.borderColor]: refs$1.borderColor,
+	  [vars$D.borderRadius]: refs$1.borderRadius,
+	  [vars$D.borderStyle]: 'dashed',
 
 	  _required: {
-	    [vars$C.requiredIndicator]: refs$1.requiredIndicator,
+	    [vars$D.requiredIndicator]: refs$1.requiredIndicator,
 	  },
 
 	  size: {
 	    xs: {
-	      [vars$C.hostHeight]: '196px',
-	      [vars$C.hostWidth]: '200px',
-	      [vars$C.titleFontSize]: '0.875em',
-	      [vars$C.descriptionFontSize]: '0.875em',
-	      [vars$C.lineHeight]: '1.25em',
+	      [vars$D.hostHeight]: '196px',
+	      [vars$D.hostWidth]: '200px',
+	      [vars$D.titleFontSize]: '0.875em',
+	      [vars$D.descriptionFontSize]: '0.875em',
+	      [vars$D.lineHeight]: '1.25em',
 	    },
 	    sm: {
-	      [vars$C.hostHeight]: '216px',
-	      [vars$C.hostWidth]: '230px',
-	      [vars$C.titleFontSize]: '1em',
-	      [vars$C.descriptionFontSize]: '0.875em',
-	      [vars$C.lineHeight]: '1.25em',
+	      [vars$D.hostHeight]: '216px',
+	      [vars$D.hostWidth]: '230px',
+	      [vars$D.titleFontSize]: '1em',
+	      [vars$D.descriptionFontSize]: '0.875em',
+	      [vars$D.lineHeight]: '1.25em',
 	    },
 	    md: {
-	      [vars$C.hostHeight]: '256px',
-	      [vars$C.hostWidth]: '312px',
-	      [vars$C.titleFontSize]: '1.125em',
-	      [vars$C.descriptionFontSize]: '1em',
-	      [vars$C.lineHeight]: '1.5em',
+	      [vars$D.hostHeight]: '256px',
+	      [vars$D.hostWidth]: '312px',
+	      [vars$D.titleFontSize]: '1.125em',
+	      [vars$D.descriptionFontSize]: '1em',
+	      [vars$D.lineHeight]: '1.5em',
 	    },
 	    lg: {
-	      [vars$C.hostHeight]: '280px',
-	      [vars$C.hostWidth]: '336px',
-	      [vars$C.titleFontSize]: '1.125em',
-	      [vars$C.descriptionFontSize]: '1.125em',
-	      [vars$C.lineHeight]: '1.75em',
+	      [vars$D.hostHeight]: '280px',
+	      [vars$D.hostWidth]: '336px',
+	      [vars$D.titleFontSize]: '1.125em',
+	      [vars$D.descriptionFontSize]: '1.125em',
+	      [vars$D.lineHeight]: '1.75em',
 	    },
 	  },
 
 	  _fullWidth: {
-	    [vars$C.hostWidth]: refs$1.width,
+	    [vars$D.hostWidth]: refs$1.width,
 	  },
 	};
 
 	var uploadFile$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: uploadFile,
-	  vars: vars$C
+	  vars: vars$D
 	});
 
-	const componentName$G = getComponentName$1('button-selection-group-item');
+	const componentName$H = getComponentName$1('button-selection-group-item');
 
 	class RawSelectItem extends createBaseClass({
-	  componentName: componentName$G,
+	  componentName: componentName$H,
 	  baseSelector: ':host > descope-button',
 	}) {
 	  get size() {
@@ -88915,37 +88915,37 @@ descope-boolean-field-internal {
 
 	const globalRefs$r = getThemeRefs(globals$1);
 
-	const vars$B = ButtonSelectionGroupItemClass.cssVarList;
+	const vars$C = ButtonSelectionGroupItemClass.cssVarList;
 
 	const buttonSelectionGroupItem = {
-	  [vars$B.hostDirection]: 'inherit',
-	  [vars$B.backgroundColor]: globalRefs$r.colors.surface.main,
-	  [vars$B.labelTextColor]: globalRefs$r.colors.surface.contrast,
-	  [vars$B.borderColor]: globalRefs$r.colors.surface.light,
-	  [vars$B.borderStyle]: 'solid',
-	  [vars$B.borderRadius]: globalRefs$r.radius.sm,
-	  [vars$B.outlineColor]: 'transparent',
-	  [vars$B.borderWidth]: globalRefs$r.border.xs,
+	  [vars$C.hostDirection]: 'inherit',
+	  [vars$C.backgroundColor]: globalRefs$r.colors.surface.main,
+	  [vars$C.labelTextColor]: globalRefs$r.colors.surface.contrast,
+	  [vars$C.borderColor]: globalRefs$r.colors.surface.light,
+	  [vars$C.borderStyle]: 'solid',
+	  [vars$C.borderRadius]: globalRefs$r.radius.sm,
+	  [vars$C.outlineColor]: 'transparent',
+	  [vars$C.borderWidth]: globalRefs$r.border.xs,
 
 	  _hover: {
-	    [vars$B.backgroundColor]: globalRefs$r.colors.surface.highlight,
+	    [vars$C.backgroundColor]: globalRefs$r.colors.surface.highlight,
 	  },
 
 	  _focused: {
-	    [vars$B.outlineColor]: globalRefs$r.colors.surface.light,
+	    [vars$C.outlineColor]: globalRefs$r.colors.surface.light,
 	  },
 
 	  _selected: {
-	    [vars$B.borderColor]: globalRefs$r.colors.surface.contrast,
-	    [vars$B.backgroundColor]: globalRefs$r.colors.surface.contrast,
-	    [vars$B.labelTextColor]: globalRefs$r.colors.surface.main,
+	    [vars$C.borderColor]: globalRefs$r.colors.surface.contrast,
+	    [vars$C.backgroundColor]: globalRefs$r.colors.surface.contrast,
+	    [vars$C.labelTextColor]: globalRefs$r.colors.surface.main,
 	  },
 	};
 
 	var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: buttonSelectionGroupItem,
-	  vars: vars$B
+	  vars: vars$C
 	});
 
 	const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -89036,10 +89036,10 @@ descope-boolean-field-internal {
 	  return BaseButtonSelectionGroupInternalClass;
 	};
 
-	const componentName$F = getComponentName$1('button-selection-group-internal');
+	const componentName$G = getComponentName$1('button-selection-group-internal');
 
 	class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-	  componentName$F
+	  componentName$G
 	) {
 	  getSelectedNode() {
 	    return this.items.find((item) => item.hasAttribute('selected'));
@@ -89284,7 +89284,7 @@ descope-boolean-field-internal {
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-	const componentName$E = getComponentName$1('button-selection-group');
+	const componentName$F = getComponentName$1('button-selection-group');
 
 	const buttonSelectionGroupMixin = (superclass) =>
 	  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -89293,19 +89293,19 @@ descope-boolean-field-internal {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$F}
+      <${componentName$G}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$F}>
+      </${componentName$G}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$F);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$G);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -89330,7 +89330,7 @@ descope-boolean-field-internal {
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => buttonSelectionGroupStyles,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$E,
+	    componentName: componentName$F,
 	  })
 	);
 
@@ -89355,22 +89355,22 @@ descope-boolean-field-internal {
 	  [vars.errorMessageFontSize]: refs$1.errorMessageFontSize,
 	});
 
-	const vars$A = ButtonSelectionGroupClass.cssVarList;
+	const vars$B = ButtonSelectionGroupClass.cssVarList;
 
 	const buttonSelectionGroup = {
-	  ...createBaseButtonSelectionGroupMappings(vars$A),
+	  ...createBaseButtonSelectionGroupMappings(vars$B),
 	};
 
 	var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: buttonSelectionGroup,
-	  vars: vars$A
+	  vars: vars$B
 	});
 
-	const componentName$D = getComponentName$1('button-multi-selection-group-internal');
+	const componentName$E = getComponentName$1('button-multi-selection-group-internal');
 
 	class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-	  componentName$D
+	  componentName$E
 	) {
 	  #getSelectedNodes() {
 	    return this.items.filter((item) => item.hasAttribute('selected'));
@@ -89473,7 +89473,7 @@ descope-boolean-field-internal {
 	  }
 	}
 
-	const componentName$C = getComponentName$1('button-multi-selection-group');
+	const componentName$D = getComponentName$1('button-multi-selection-group');
 
 	const buttonMultiSelectionGroupMixin = (superclass) =>
 	  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -89482,19 +89482,19 @@ descope-boolean-field-internal {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$D}
+      <${componentName$E}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$D}>
+      </${componentName$E}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$D);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$E);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -89519,23 +89519,23 @@ descope-boolean-field-internal {
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => buttonSelectionGroupStyles,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$C,
+	    componentName: componentName$D,
 	  })
 	);
 
-	const vars$z = ButtonMultiSelectionGroupClass.cssVarList;
+	const vars$A = ButtonMultiSelectionGroupClass.cssVarList;
 
 	const buttonMultiSelectionGroup = {
-	  ...createBaseButtonSelectionGroupMappings(vars$z),
+	  ...createBaseButtonSelectionGroupMappings(vars$A),
 	};
 
 	var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: buttonMultiSelectionGroup,
-	  vars: vars$z
+	  vars: vars$A
 	});
 
-	const componentName$B = getComponentName$1('modal');
+	const componentName$C = getComponentName$1('modal');
 
 	const observedAttrs$3 = ['opened'];
 
@@ -89659,7 +89659,7 @@ descope-boolean-field-internal {
       }
     `,
 	    excludeAttrsSync: ['tabindex', 'opened', 'style'],
-	    componentName: componentName$B,
+	    componentName: componentName$C,
 	  })
 	);
 
@@ -89673,14 +89673,14 @@ descope-boolean-field-internal {
 	  [compVars$4.overlayWidth]: '540px',
 	};
 
-	const vars$y = {
+	const vars$z = {
 	  ...compVars$4,
 	};
 
 	var modal$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: modal,
-	  vars: vars$y
+	  vars: vars$z
 	});
 
 	const isValidDataType = (data) => {
@@ -89756,7 +89756,7 @@ descope-boolean-field-internal {
   `;
 	};
 
-	const componentName$A = getComponentName$1('grid');
+	const componentName$B = getComponentName$1('grid');
 
 	const GridMixin = (superclass) =>
 	  class GridMixinClass extends superclass {
@@ -90110,52 +90110,52 @@ descope-boolean-field-internal {
     /*!css*/
 		`,
 	    excludeAttrsSync: ['columns', 'tabindex', 'style'],
-	    componentName: componentName$A,
+	    componentName: componentName$B,
 	  })
 	);
 
 	const globalRefs$o = getThemeRefs(globals$1);
-	const vars$x = GridClass.cssVarList;
+	const vars$y = GridClass.cssVarList;
 
 	const grid = {
-	  [vars$x.hostWidth]: '100%',
-	  [vars$x.hostHeight]: '100%',
-	  [vars$x.hostMinHeight]: '400px',
-	  [vars$x.fontWeight]: '400',
-	  [vars$x.backgroundColor]: globalRefs$o.colors.surface.main,
-
-	  [vars$x.fontSize]: refs$1.fontSize,
-	  [vars$x.fontFamily]: refs$1.fontFamily,
-
-	  [vars$x.sortIndicatorsColor]: globalRefs$o.colors.surface.light,
-	  [vars$x.activeSortIndicator]: globalRefs$o.colors.surface.dark,
-	  [vars$x.resizeHandleColor]: globalRefs$o.colors.surface.light,
-
-	  [vars$x.borderWidth]: refs$1.borderWidth,
-	  [vars$x.borderStyle]: refs$1.borderStyle,
-	  [vars$x.borderRadius]: refs$1.borderRadius,
-	  [vars$x.borderColor]: 'transparent',
-
-	  [vars$x.headerRowTextColor]: globalRefs$o.colors.surface.dark,
-	  [vars$x.separatorColor]: globalRefs$o.colors.surface.light,
-
-	  [vars$x.valueTextColor]: globalRefs$o.colors.surface.contrast,
-	  [vars$x.selectedBackgroundColor]: globalRefs$o.colors.surface.highlight,
-	  [vars$x.hostDirection]: globalRefs$o.direction,
-
-	  [vars$x.toggleDetailsPanelButtonSize]: '1em',
-	  [vars$x.toggleDetailsPanelButtonOpenedColor]: globalRefs$o.colors.surface.contrast,
-	  [vars$x.toggleDetailsPanelButtonClosedColor]: globalRefs$o.colors.surface.light,
-	  [vars$x.toggleDetailsPanelButtonCursor]: 'pointer',
-	  [vars$x.detailsPanelBackgroundColor]: globalRefs$o.colors.surface.highlight,
-	  [vars$x.detailsPanelBorderTopColor]: globalRefs$o.colors.surface.light,
-	  [vars$x.detailsPanelLabelsColor]: globalRefs$o.colors.surface.dark,
-	  [vars$x.detailsPanelLabelsFontSize]: '0.8em',
-	  [vars$x.detailsPanelItemsGap]: '2em',
-	  [vars$x.detailsPanelPadding]: '12px 0',
+	  [vars$y.hostWidth]: '100%',
+	  [vars$y.hostHeight]: '100%',
+	  [vars$y.hostMinHeight]: '400px',
+	  [vars$y.fontWeight]: '400',
+	  [vars$y.backgroundColor]: globalRefs$o.colors.surface.main,
+
+	  [vars$y.fontSize]: refs$1.fontSize,
+	  [vars$y.fontFamily]: refs$1.fontFamily,
+
+	  [vars$y.sortIndicatorsColor]: globalRefs$o.colors.surface.light,
+	  [vars$y.activeSortIndicator]: globalRefs$o.colors.surface.dark,
+	  [vars$y.resizeHandleColor]: globalRefs$o.colors.surface.light,
+
+	  [vars$y.borderWidth]: refs$1.borderWidth,
+	  [vars$y.borderStyle]: refs$1.borderStyle,
+	  [vars$y.borderRadius]: refs$1.borderRadius,
+	  [vars$y.borderColor]: 'transparent',
+
+	  [vars$y.headerRowTextColor]: globalRefs$o.colors.surface.dark,
+	  [vars$y.separatorColor]: globalRefs$o.colors.surface.light,
+
+	  [vars$y.valueTextColor]: globalRefs$o.colors.surface.contrast,
+	  [vars$y.selectedBackgroundColor]: globalRefs$o.colors.surface.highlight,
+	  [vars$y.hostDirection]: globalRefs$o.direction,
+
+	  [vars$y.toggleDetailsPanelButtonSize]: '1em',
+	  [vars$y.toggleDetailsPanelButtonOpenedColor]: globalRefs$o.colors.surface.contrast,
+	  [vars$y.toggleDetailsPanelButtonClosedColor]: globalRefs$o.colors.surface.light,
+	  [vars$y.toggleDetailsPanelButtonCursor]: 'pointer',
+	  [vars$y.detailsPanelBackgroundColor]: globalRefs$o.colors.surface.highlight,
+	  [vars$y.detailsPanelBorderTopColor]: globalRefs$o.colors.surface.light,
+	  [vars$y.detailsPanelLabelsColor]: globalRefs$o.colors.surface.dark,
+	  [vars$y.detailsPanelLabelsFontSize]: '0.8em',
+	  [vars$y.detailsPanelItemsGap]: '2em',
+	  [vars$y.detailsPanelPadding]: '12px 0',
 
 	  _bordered: {
-	    [vars$x.borderColor]: refs$1.borderColor,
+	    [vars$y.borderColor]: refs$1.borderColor,
 	  },
 	};
 
@@ -90163,10 +90163,10 @@ descope-boolean-field-internal {
 	  __proto__: null,
 	  default: grid,
 	  grid: grid,
-	  vars: vars$x
+	  vars: vars$y
 	});
 
-	const componentName$z = getComponentName$1('notification-card');
+	const componentName$A = getComponentName$1('notification-card');
 
 	const notificationCardMixin = (superclass) =>
 	  class NotificationCardMixinClass extends superclass {
@@ -90274,54 +90274,54 @@ descope-boolean-field-internal {
     }
     `,
 	    excludeAttrsSync: ['tabindex'],
-	    componentName: componentName$z,
+	    componentName: componentName$A,
 	  })
 	);
 
 	const globalRefs$n = getThemeRefs(globals$1);
-	const vars$w = NotificationCardClass.cssVarList;
+	const vars$x = NotificationCardClass.cssVarList;
 
 	const shadowColor$3 = '#00000020';
 
 	const notification = {
-	  [vars$w.hostMinWidth]: '415px',
-	  [vars$w.fontFamily]: globalRefs$n.fonts.font1.family,
-	  [vars$w.fontSize]: globalRefs$n.typography.body1.size,
-	  [vars$w.backgroundColor]: globalRefs$n.colors.surface.main,
-	  [vars$w.textColor]: globalRefs$n.colors.surface.contrast,
-	  [vars$w.boxShadow]: `${globalRefs$n.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$n.shadow.narrow.xl} ${shadowColor$3}`,
-	  [vars$w.verticalPadding]: '0.625em',
-	  [vars$w.horizontalPadding]: '1.5em',
-	  [vars$w.borderRadius]: globalRefs$n.radius.xs,
+	  [vars$x.hostMinWidth]: '415px',
+	  [vars$x.fontFamily]: globalRefs$n.fonts.font1.family,
+	  [vars$x.fontSize]: globalRefs$n.typography.body1.size,
+	  [vars$x.backgroundColor]: globalRefs$n.colors.surface.main,
+	  [vars$x.textColor]: globalRefs$n.colors.surface.contrast,
+	  [vars$x.boxShadow]: `${globalRefs$n.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$n.shadow.narrow.xl} ${shadowColor$3}`,
+	  [vars$x.verticalPadding]: '0.625em',
+	  [vars$x.horizontalPadding]: '1.5em',
+	  [vars$x.borderRadius]: globalRefs$n.radius.xs,
 
 	  _bordered: {
-	    [vars$w.borderWidth]: globalRefs$n.border.sm,
-	    [vars$w.borderStyle]: 'solid',
-	    [vars$w.borderColor]: 'transparent',
+	    [vars$x.borderWidth]: globalRefs$n.border.sm,
+	    [vars$x.borderStyle]: 'solid',
+	    [vars$x.borderColor]: 'transparent',
 	  },
 
 	  size: {
-	    xs: { [vars$w.fontSize]: '12px' },
-	    sm: { [vars$w.fontSize]: '14px' },
-	    md: { [vars$w.fontSize]: '16px' },
-	    lg: { [vars$w.fontSize]: '18px' },
+	    xs: { [vars$x.fontSize]: '12px' },
+	    sm: { [vars$x.fontSize]: '14px' },
+	    md: { [vars$x.fontSize]: '16px' },
+	    lg: { [vars$x.fontSize]: '18px' },
 	  },
 
 	  mode: {
 	    primary: {
-	      [vars$w.backgroundColor]: globalRefs$n.colors.primary.main,
-	      [vars$w.textColor]: globalRefs$n.colors.primary.contrast,
-	      [vars$w.borderColor]: globalRefs$n.colors.primary.light,
+	      [vars$x.backgroundColor]: globalRefs$n.colors.primary.main,
+	      [vars$x.textColor]: globalRefs$n.colors.primary.contrast,
+	      [vars$x.borderColor]: globalRefs$n.colors.primary.light,
 	    },
 	    success: {
-	      [vars$w.backgroundColor]: globalRefs$n.colors.success.main,
-	      [vars$w.textColor]: globalRefs$n.colors.success.contrast,
-	      [vars$w.borderColor]: globalRefs$n.colors.success.light,
+	      [vars$x.backgroundColor]: globalRefs$n.colors.success.main,
+	      [vars$x.textColor]: globalRefs$n.colors.success.contrast,
+	      [vars$x.borderColor]: globalRefs$n.colors.success.light,
 	    },
 	    error: {
-	      [vars$w.backgroundColor]: globalRefs$n.colors.error.main,
-	      [vars$w.textColor]: globalRefs$n.colors.error.contrast,
-	      [vars$w.borderColor]: globalRefs$n.colors.error.light,
+	      [vars$x.backgroundColor]: globalRefs$n.colors.error.main,
+	      [vars$x.textColor]: globalRefs$n.colors.error.contrast,
+	      [vars$x.borderColor]: globalRefs$n.colors.error.light,
 	    },
 	  },
 	};
@@ -90329,10 +90329,10 @@ descope-boolean-field-internal {
 	var notificationCard = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: notification,
-	  vars: vars$w
+	  vars: vars$x
 	});
 
-	const componentName$y = getComponentName$1('multi-select-combo-box');
+	const componentName$z = getComponentName$1('multi-select-combo-box');
 
 	const multiSelectComboBoxMixin = (superclass) =>
 	  class MultiSelectComboBoxMixinClass extends superclass {
@@ -90985,101 +90985,101 @@ descope-boolean-field-internal {
 	    // Note: we exclude `placeholder` because the vaadin component observes it and
 	    // tries to override it, causing us to lose the user set placeholder.
 	    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-	    componentName: componentName$y,
+	    componentName: componentName$z,
 	    includeForwardProps: ['items', 'renderer', 'selectedItems'],
 	  })
 	);
 
 	const globalRefs$m = getThemeRefs(globals$1);
-	const vars$v = MultiSelectComboBoxClass.cssVarList;
+	const vars$w = MultiSelectComboBoxClass.cssVarList;
 
 	const multiSelectComboBox = {
-	  [vars$v.hostWidth]: refs$1.width,
-	  [vars$v.hostDirection]: refs$1.direction,
-	  [vars$v.fontSize]: refs$1.fontSize,
-	  [vars$v.fontFamily]: refs$1.fontFamily,
-	  [vars$v.labelFontSize]: refs$1.labelFontSize,
-	  [vars$v.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$v.labelTextColor]: refs$1.labelTextColor,
-	  [vars$v.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$v.inputBorderColor]: refs$1.borderColor,
-	  [vars$v.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$v.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$v.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$v.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$v.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$v.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$v.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$v.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$v.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$v.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-	  [vars$v.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$v.inputHorizontalPadding]: refs$1.horizontalPadding,
-	  [vars$v.inputVerticalPadding]: refs$1.verticalPadding,
-	  [vars$v.inputHeight]: refs$1.inputHeight,
-	  [vars$v.inputDropdownButtonColor]: globalRefs$m.colors.surface.dark,
-	  [vars$v.inputDropdownButtonCursor]: 'pointer',
-	  [vars$v.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-	  [vars$v.inputDropdownButtonOffset]: globalRefs$m.spacing.xs,
-	  [vars$v.overlayItemPaddingInlineStart]: globalRefs$m.spacing.xs,
-	  [vars$v.overlayItemPaddingInlineEnd]: globalRefs$m.spacing.lg,
-	  [vars$v.chipFontSize]: refs$1.chipFontSize,
-	  [vars$v.chipTextColor]: globalRefs$m.colors.surface.contrast,
-	  [vars$v.chipBackgroundColor]: globalRefs$m.colors.surface.light,
-	  [vars$v.labelPosition]: refs$1.labelPosition,
-	  [vars$v.labelTopPosition]: refs$1.labelTopPosition,
-	  [vars$v.labelLeftPosition]: refs$1.labelLeftPosition,
-	  [vars$v.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-	  [vars$v.inputTransformY]: refs$1.inputTransformY,
-	  [vars$v.inputTransition]: refs$1.inputTransition,
-	  [vars$v.marginInlineStart]: refs$1.marginInlineStart,
-	  [vars$v.placeholderOpacity]: refs$1.placeholderOpacity,
-	  [vars$v.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+	  [vars$w.hostWidth]: refs$1.width,
+	  [vars$w.hostDirection]: refs$1.direction,
+	  [vars$w.fontSize]: refs$1.fontSize,
+	  [vars$w.fontFamily]: refs$1.fontFamily,
+	  [vars$w.labelFontSize]: refs$1.labelFontSize,
+	  [vars$w.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$w.labelTextColor]: refs$1.labelTextColor,
+	  [vars$w.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$w.inputBorderColor]: refs$1.borderColor,
+	  [vars$w.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$w.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$w.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$w.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$w.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$w.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$w.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$w.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$w.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$w.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+	  [vars$w.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$w.inputHorizontalPadding]: refs$1.horizontalPadding,
+	  [vars$w.inputVerticalPadding]: refs$1.verticalPadding,
+	  [vars$w.inputHeight]: refs$1.inputHeight,
+	  [vars$w.inputDropdownButtonColor]: globalRefs$m.colors.surface.dark,
+	  [vars$w.inputDropdownButtonCursor]: 'pointer',
+	  [vars$w.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+	  [vars$w.inputDropdownButtonOffset]: globalRefs$m.spacing.xs,
+	  [vars$w.overlayItemPaddingInlineStart]: globalRefs$m.spacing.xs,
+	  [vars$w.overlayItemPaddingInlineEnd]: globalRefs$m.spacing.lg,
+	  [vars$w.chipFontSize]: refs$1.chipFontSize,
+	  [vars$w.chipTextColor]: globalRefs$m.colors.surface.contrast,
+	  [vars$w.chipBackgroundColor]: globalRefs$m.colors.surface.light,
+	  [vars$w.labelPosition]: refs$1.labelPosition,
+	  [vars$w.labelTopPosition]: refs$1.labelTopPosition,
+	  [vars$w.labelLeftPosition]: refs$1.labelLeftPosition,
+	  [vars$w.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+	  [vars$w.inputTransformY]: refs$1.inputTransformY,
+	  [vars$w.inputTransition]: refs$1.inputTransition,
+	  [vars$w.marginInlineStart]: refs$1.marginInlineStart,
+	  [vars$w.placeholderOpacity]: refs$1.placeholderOpacity,
+	  [vars$w.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
 
 	  // error message icon
-	  [vars$v.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$v.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$v.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$v.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$v.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$v.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$w.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$w.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$w.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$w.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$w.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$w.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  labelType: {
 	    floating: {
-	      [vars$v.inputHorizontalPadding]: '0.25em',
+	      [vars$w.inputHorizontalPadding]: '0.25em',
 	      _hasValue: {
-	        [vars$v.inputHorizontalPadding]: '0.45em',
+	        [vars$w.inputHorizontalPadding]: '0.45em',
 	      },
 	    },
 	  },
 
 	  _readonly: {
-	    [vars$v.inputDropdownButtonCursor]: 'default',
+	    [vars$w.inputDropdownButtonCursor]: 'default',
 	  },
 
 	  // Overlay theme exposed via the component:
-	  [vars$v.overlayFontSize]: refs$1.fontSize,
-	  [vars$v.overlayFontFamily]: refs$1.fontFamily,
-	  [vars$v.overlayCursor]: 'pointer',
-	  [vars$v.overlayItemBoxShadow]: 'none',
-	  [vars$v.overlayBackground]: refs$1.backgroundColor,
-	  [vars$v.overlayTextColor]: refs$1.valueTextColor,
+	  [vars$w.overlayFontSize]: refs$1.fontSize,
+	  [vars$w.overlayFontFamily]: refs$1.fontFamily,
+	  [vars$w.overlayCursor]: 'pointer',
+	  [vars$w.overlayItemBoxShadow]: 'none',
+	  [vars$w.overlayBackground]: refs$1.backgroundColor,
+	  [vars$w.overlayTextColor]: refs$1.valueTextColor,
 
 	  // Overlay direct theme:
-	  [vars$v.overlay.minHeight]: '400px',
-	  [vars$v.overlay.margin]: '0',
+	  [vars$w.overlay.minHeight]: '400px',
+	  [vars$w.overlay.margin]: '0',
 	};
 
 	var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: multiSelectComboBox,
 	  multiSelectComboBox: multiSelectComboBox,
-	  vars: vars$v
+	  vars: vars$w
 	});
 
-	const componentName$x = getComponentName$1('badge');
+	const componentName$y = getComponentName$1('badge');
 
-	class RawBadge extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
+	class RawBadge extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -91135,65 +91135,65 @@ descope-boolean-field-internal {
 	)(RawBadge);
 
 	const globalRefs$l = getThemeRefs(globals$1);
-	const vars$u = BadgeClass.cssVarList;
+	const vars$v = BadgeClass.cssVarList;
 
 	const badge$2 = {
-	  [vars$u.hostWidth]: 'fit-content',
-	  [vars$u.hostDirection]: globalRefs$l.direction,
+	  [vars$v.hostWidth]: 'fit-content',
+	  [vars$v.hostDirection]: globalRefs$l.direction,
 
-	  [vars$u.textAlign]: 'center',
+	  [vars$v.textAlign]: 'center',
 
-	  [vars$u.fontFamily]: globalRefs$l.fonts.font1.family,
-	  [vars$u.fontWeight]: '400',
+	  [vars$v.fontFamily]: globalRefs$l.fonts.font1.family,
+	  [vars$v.fontWeight]: '400',
 
-	  [vars$u.verticalPadding]: '0.25em',
-	  [vars$u.horizontalPadding]: '0.5em',
+	  [vars$v.verticalPadding]: '0.25em',
+	  [vars$v.horizontalPadding]: '0.5em',
 
-	  [vars$u.borderWidth]: globalRefs$l.border.xs,
-	  [vars$u.borderRadius]: globalRefs$l.radius.xs,
-	  [vars$u.borderColor]: 'transparent',
-	  [vars$u.borderStyle]: 'solid',
+	  [vars$v.borderWidth]: globalRefs$l.border.xs,
+	  [vars$v.borderRadius]: globalRefs$l.radius.xs,
+	  [vars$v.borderColor]: 'transparent',
+	  [vars$v.borderStyle]: 'solid',
 
 	  _fullWidth: {
-	    [vars$u.hostWidth]: '100%',
+	    [vars$v.hostWidth]: '100%',
 	  },
 
 	  size: {
-	    xs: { [vars$u.fontSize]: '12px' },
-	    sm: { [vars$u.fontSize]: '14px' },
-	    md: { [vars$u.fontSize]: '16px' },
-	    lg: { [vars$u.fontSize]: '18px' },
+	    xs: { [vars$v.fontSize]: '12px' },
+	    sm: { [vars$v.fontSize]: '14px' },
+	    md: { [vars$v.fontSize]: '16px' },
+	    lg: { [vars$v.fontSize]: '18px' },
 	  },
 
 	  mode: {
 	    default: {
-	      [vars$u.textColor]: globalRefs$l.colors.surface.dark,
+	      [vars$v.textColor]: globalRefs$l.colors.surface.dark,
 	      _bordered: {
-	        [vars$u.borderColor]: globalRefs$l.colors.surface.light,
+	        [vars$v.borderColor]: globalRefs$l.colors.surface.light,
 	      },
 	    },
 	    primary: {
-	      [vars$u.textColor]: globalRefs$l.colors.primary.main,
+	      [vars$v.textColor]: globalRefs$l.colors.primary.main,
 	      _bordered: {
-	        [vars$u.borderColor]: globalRefs$l.colors.primary.light,
+	        [vars$v.borderColor]: globalRefs$l.colors.primary.light,
 	      },
 	    },
 	    secondary: {
-	      [vars$u.textColor]: globalRefs$l.colors.secondary.main,
+	      [vars$v.textColor]: globalRefs$l.colors.secondary.main,
 	      _bordered: {
-	        [vars$u.borderColor]: globalRefs$l.colors.secondary.light,
+	        [vars$v.borderColor]: globalRefs$l.colors.secondary.light,
 	      },
 	    },
 	    error: {
-	      [vars$u.textColor]: globalRefs$l.colors.error.main,
+	      [vars$v.textColor]: globalRefs$l.colors.error.main,
 	      _bordered: {
-	        [vars$u.borderColor]: globalRefs$l.colors.error.light,
+	        [vars$v.borderColor]: globalRefs$l.colors.error.light,
 	      },
 	    },
 	    success: {
-	      [vars$u.textColor]: globalRefs$l.colors.success.main,
+	      [vars$v.textColor]: globalRefs$l.colors.success.main,
 	      _bordered: {
-	        [vars$u.borderColor]: globalRefs$l.colors.success.light,
+	        [vars$v.borderColor]: globalRefs$l.colors.success.light,
 	      },
 	    },
 	  },
@@ -91202,12 +91202,12 @@ descope-boolean-field-internal {
 	var badge$3 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: badge$2,
-	  vars: vars$u
+	  vars: vars$v
 	});
 
-	const componentName$w = getComponentName('avatar');
+	const componentName$x = getComponentName('avatar');
 	class RawAvatar extends createBaseClass$1({
-	  componentName: componentName$w,
+	  componentName: componentName$x,
 	  baseSelector: ':host > .wrapper',
 	}) {
 	  constructor() {
@@ -91350,21 +91350,21 @@ descope-boolean-field-internal {
 	  },
 	};
 
-	const vars$t = {
+	const vars$u = {
 	  ...compVars$3,
 	};
 
 	var avatar$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: avatar,
-	  vars: vars$t
+	  vars: vars$u
 	});
 
-	const componentName$v = getComponentName$1('mappings-field-internal');
+	const componentName$w = getComponentName$1('mappings-field-internal');
 
-	createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
 
-	const componentName$u = getComponentName$1('mappings-field');
+	const componentName$v = getComponentName$1('mappings-field');
 
 	const customMixin$6 = (superclass) =>
 	  class MappingsFieldMixinClass extends superclass {
@@ -91393,14 +91393,14 @@ descope-boolean-field-internal {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$v}
+      <${componentName$w}
         tabindex="-1"
-      ></${componentName$v}>
+      ></${componentName$w}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$v);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$w);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: [
@@ -91535,47 +91535,47 @@ descope-boolean-field-internal {
 	      'options',
 	      'error-message',
 	    ],
-	    componentName: componentName$u,
+	    componentName: componentName$v,
 	  })
 	);
 
 	const globalRefs$j = getThemeRefs(globals$1);
 
-	const vars$s = MappingsFieldClass.cssVarList;
+	const vars$t = MappingsFieldClass.cssVarList;
 
 	const mappingsField = {
-	  [vars$s.hostWidth]: refs$1.width,
-	  [vars$s.hostDirection]: refs$1.direction,
-	  [vars$s.fontSize]: refs$1.fontSize,
-	  [vars$s.fontFamily]: refs$1.fontFamily,
-	  [vars$s.separatorFontSize]: '14px',
-	  [vars$s.labelsFontSize]: '14px',
-	  [vars$s.labelsLineHeight]: '1',
-	  [vars$s.labelsMarginBottom]: '6px',
-	  [vars$s.labelTextColor]: refs$1.labelTextColor,
-	  [vars$s.itemMarginBottom]: '1em',
+	  [vars$t.hostWidth]: refs$1.width,
+	  [vars$t.hostDirection]: refs$1.direction,
+	  [vars$t.fontSize]: refs$1.fontSize,
+	  [vars$t.fontFamily]: refs$1.fontFamily,
+	  [vars$t.separatorFontSize]: '14px',
+	  [vars$t.labelsFontSize]: '14px',
+	  [vars$t.labelsLineHeight]: '1',
+	  [vars$t.labelsMarginBottom]: '6px',
+	  [vars$t.labelTextColor]: refs$1.labelTextColor,
+	  [vars$t.itemMarginBottom]: '1em',
 	  // To be positioned correctly, the min width has to match the text field min width
-	  [vars$s.valueLabelMinWidth]: refs$1.minWidth,
+	  [vars$t.valueLabelMinWidth]: refs$1.minWidth,
 	  // To be positioned correctly, the min width has to match the combo box field min width
-	  [vars$s.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$j.border.xs})`,
-	  [vars$s.separatorWidth]: '70px',
-	  [vars$s.removeButtonWidth]: '60px',
+	  [vars$t.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$j.border.xs})`,
+	  [vars$t.separatorWidth]: '70px',
+	  [vars$t.removeButtonWidth]: '60px',
 	};
 
 	var mappingsField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: mappingsField,
 	  mappingsField: mappingsField,
-	  vars: vars$s
+	  vars: vars$t
 	});
 
 	var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
 	var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-	const componentName$t = getComponentName$1('user-attribute');
+	const componentName$u = getComponentName$1('user-attribute');
 	class RawUserAttribute extends createBaseClass({
-	  componentName: componentName$t,
+	  componentName: componentName$u,
 	  baseSelector: ':host > .root',
 	}) {
 	  constructor() {
@@ -91820,31 +91820,31 @@ descope-boolean-field-internal {
 	)(RawUserAttribute);
 
 	const globalRefs$i = getThemeRefs(globals$1);
-	const vars$r = UserAttributeClass.cssVarList;
+	const vars$s = UserAttributeClass.cssVarList;
 
 	const userAttribute = {
-	  [vars$r.hostDirection]: globalRefs$i.direction,
-	  [vars$r.labelTextWidth]: '150px',
-	  [vars$r.valueTextWidth]: '200px',
-	  [vars$r.badgeMaxWidth]: '85px',
-	  [vars$r.itemsGap]: '16px',
-	  [vars$r.hostMinWidth]: '530px',
+	  [vars$s.hostDirection]: globalRefs$i.direction,
+	  [vars$s.labelTextWidth]: '150px',
+	  [vars$s.valueTextWidth]: '200px',
+	  [vars$s.badgeMaxWidth]: '85px',
+	  [vars$s.itemsGap]: '16px',
+	  [vars$s.hostMinWidth]: '530px',
 	  _fullWidth: {
-	    [vars$r.hostWidth]: '100%',
+	    [vars$s.hostWidth]: '100%',
 	  },
 	};
 
 	var userAttribute$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: userAttribute,
-	  vars: vars$r
+	  vars: vars$s
 	});
 
 	var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-	const componentName$s = getComponentName$1('user-auth-method');
+	const componentName$t = getComponentName$1('user-auth-method');
 	class RawUserAuthMethod extends createBaseClass({
-	  componentName: componentName$s,
+	  componentName: componentName$t,
 	  baseSelector: ':host > .root',
 	}) {
 	  constructor() {
@@ -92040,31 +92040,31 @@ descope-boolean-field-internal {
 	)(RawUserAuthMethod);
 
 	const globalRefs$h = getThemeRefs(globals$1);
-	const vars$q = UserAuthMethodClass.cssVarList;
+	const vars$r = UserAuthMethodClass.cssVarList;
 
 	const userAuthMethod = {
-	  [vars$q.hostDirection]: globalRefs$h.direction,
-	  [vars$q.labelTextWidth]: '200px',
-	  [vars$q.itemsGap]: '16px',
-	  [vars$q.hostMinWidth]: '530px',
-	  [vars$q.iconSize]: '24px',
-	  [vars$q.iconColor]: 'currentcolor',
+	  [vars$r.hostDirection]: globalRefs$h.direction,
+	  [vars$r.labelTextWidth]: '200px',
+	  [vars$r.itemsGap]: '16px',
+	  [vars$r.hostMinWidth]: '530px',
+	  [vars$r.iconSize]: '24px',
+	  [vars$r.iconColor]: 'currentcolor',
 	  _fullWidth: {
-	    [vars$q.hostWidth]: '100%',
+	    [vars$r.hostWidth]: '100%',
 	  },
 	};
 
 	var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: userAuthMethod,
-	  vars: vars$q
+	  vars: vars$r
 	});
 
-	const componentName$r = getComponentName$1('saml-group-mappings-internal');
+	const componentName$s = getComponentName$1('saml-group-mappings-internal');
 
-	createBaseInputClass({ componentName: componentName$r, baseSelector: '' });
+	createBaseInputClass({ componentName: componentName$s, baseSelector: '' });
 
-	const componentName$q = getComponentName$1('saml-group-mappings');
+	const componentName$r = getComponentName$1('saml-group-mappings');
 
 	const customMixin$5 = (superclass) =>
 	  class SamlGroupMappingsMixinClass extends superclass {
@@ -92074,14 +92074,14 @@ descope-boolean-field-internal {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$r}
+      <${componentName$s}
         tabindex="-1"
-      ></${componentName$r}>
+      ></${componentName$s}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$r);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$s);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: [
@@ -92165,69 +92165,69 @@ descope-boolean-field-internal {
 	      'options',
 	      'error-message',
 	    ],
-	    componentName: componentName$q,
+	    componentName: componentName$r,
 	  })
 	);
 
-	const vars$p = SamlGroupMappingsClass.cssVarList;
+	const vars$q = SamlGroupMappingsClass.cssVarList;
 
 	const samlGroupMappings = {
-	  [vars$p.hostWidth]: refs$1.width,
-	  [vars$p.hostDirection]: refs$1.direction,
-	  [vars$p.groupNameInputMarginBottom]: '1em',
+	  [vars$q.hostWidth]: refs$1.width,
+	  [vars$q.hostDirection]: refs$1.direction,
+	  [vars$q.groupNameInputMarginBottom]: '1em',
 
 	  // error message icon
-	  [vars$p.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$p.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$p.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$p.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$p.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$p.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$q.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$q.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$q.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$q.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$q.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$q.errorMessageFontSize]: refs$1.errorMessageFontSize,
 	};
 
 	var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: samlGroupMappings,
 	  samlGroupMappings: samlGroupMappings,
-	  vars: vars$p
+	  vars: vars$q
 	});
 
 	const globalRefs$g = getThemeRefs(globals$1);
-	const vars$o = PolicyValidationClass.cssVarList;
+	const vars$p = PolicyValidationClass.cssVarList;
 
 	const policyValidation = {
-	  [vars$o.fontFamily]: refs$1.fontFamily,
-	  [vars$o.fontSize]: refs$1.labelFontSize,
-	  [vars$o.textColor]: refs$1.labelTextColor,
-	  [vars$o.borderWidth]: refs$1.borderWidth,
-	  [vars$o.borderStyle]: refs$1.borderStyle,
-	  [vars$o.borderColor]: refs$1.borderColor,
-	  [vars$o.borderRadius]: globalRefs$g.radius.sm,
-	  [vars$o.backgroundColor]: 'none',
-	  [vars$o.padding]: '0px',
-	  [vars$o.labelMargin]: globalRefs$g.spacing.sm,
-	  [vars$o.itemsSpacing]: globalRefs$g.spacing.lg,
-	  [vars$o.itemSymbolDefault]: "'\\2022'", // "•"
-	  [vars$o.itemSymbolSuccess]: "'\\2713'", // "✓"
-	  [vars$o.itemSymbolError]: "'\\2A09'", // "⨉"
-	  [vars$o.itemSymbolSuccessColor]: globalRefs$g.colors.success.main,
-	  [vars$o.itemSymbolErrorColor]: globalRefs$g.colors.error.main,
+	  [vars$p.fontFamily]: refs$1.fontFamily,
+	  [vars$p.fontSize]: refs$1.labelFontSize,
+	  [vars$p.textColor]: refs$1.labelTextColor,
+	  [vars$p.borderWidth]: refs$1.borderWidth,
+	  [vars$p.borderStyle]: refs$1.borderStyle,
+	  [vars$p.borderColor]: refs$1.borderColor,
+	  [vars$p.borderRadius]: globalRefs$g.radius.sm,
+	  [vars$p.backgroundColor]: 'none',
+	  [vars$p.padding]: '0px',
+	  [vars$p.labelMargin]: globalRefs$g.spacing.sm,
+	  [vars$p.itemsSpacing]: globalRefs$g.spacing.lg,
+	  [vars$p.itemSymbolDefault]: "'\\2022'", // "•"
+	  [vars$p.itemSymbolSuccess]: "'\\2713'", // "✓"
+	  [vars$p.itemSymbolError]: "'\\2A09'", // "⨉"
+	  [vars$p.itemSymbolSuccessColor]: globalRefs$g.colors.success.main,
+	  [vars$p.itemSymbolErrorColor]: globalRefs$g.colors.error.main,
 	};
 
 	var policyValidation$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: policyValidation,
-	  vars: vars$o
+	  vars: vars$p
 	});
 
-	const vars$n = IconClass.cssVarList;
+	const vars$o = IconClass.cssVarList;
 
 	const icon$2 = {};
 
 	var icon$3 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: icon$2,
-	  vars: vars$n
+	  vars: vars$o
 	});
 
 	const getFileExtension = (path) => {
@@ -92291,12 +92291,12 @@ descope-boolean-field-internal {
 
 	/* eslint-disable no-use-before-define */
 
-	const componentName$p = getComponentName('image');
+	const componentName$q = getComponentName('image');
 
 	const srcAttrs = ['src', 'src-dark'];
 
 	class RawImage extends createBaseClass$1({
-	  componentName: componentName$p,
+	  componentName: componentName$q,
 	  baseSelector: 'slot',
 	}) {
 	  static get observedAttributes() {
@@ -92424,14 +92424,14 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin$1,
 	)(RawImage);
 
-	const vars$m = ImageClass.cssVarList;
+	const vars$n = ImageClass.cssVarList;
 
 	const image = {};
 
 	var image$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: image,
-	  vars: vars$m
+	  vars: vars$n
 	});
 
 	const decode = (input) => {
@@ -92444,9 +92444,9 @@ descope-boolean-field-internal {
 	  return inline ? input : `<pre>${input}</pre>`;
 	};
 
-	const componentName$o = getComponentName$1('code-snippet');
+	const componentName$p = getComponentName$1('code-snippet');
 
-	let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > code' }) {
+	let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > code' }) {
 	  static get observedAttributes() {
 	    return ['lang', 'inline'];
 	  }
@@ -92682,7 +92682,7 @@ descope-boolean-field-internal {
 
 	const globalRefs$f = getThemeRefs(globals$1);
 
-	const vars$l = CodeSnippetClass.cssVarList;
+	const vars$m = CodeSnippetClass.cssVarList;
 
 	const light = {
 	  color2: '#d73a49',
@@ -92711,50 +92711,50 @@ descope-boolean-field-internal {
 	};
 
 	const CodeSnippet = {
-	  [vars$l.rootBgColor]: globalRefs$f.colors.surface.main,
-	  [vars$l.rootTextColor]: globalRefs$f.colors.surface.contrast,
-	  [vars$l.docTagTextColor]: light.color2,
-	  [vars$l.keywordTextColor]: light.color2,
-	  [vars$l.metaKeywordTextColor]: light.color2,
-	  [vars$l.templateTagTextColor]: light.color2,
-	  [vars$l.templateVariableTextColor]: light.color2,
-	  [vars$l.typeTextColor]: light.color2,
-	  [vars$l.variableLanguageTextColor]: light.color2,
-	  [vars$l.titleTextColor]: light.color3,
-	  [vars$l.titleClassTextColor]: light.color3,
-	  [vars$l.titleClassInheritedTextColor]: light.color3,
-	  [vars$l.titleFunctionTextColor]: light.color3,
-	  [vars$l.attrTextColor]: light.color4,
-	  [vars$l.attributeTextColor]: light.color4,
-	  [vars$l.literalTextColor]: light.color4,
-	  [vars$l.metaTextColor]: light.color4,
-	  [vars$l.numberTextColor]: light.color4,
-	  [vars$l.operatorTextColor]: light.color4,
-	  [vars$l.variableTextColor]: light.color4,
-	  [vars$l.selectorAttrTextColor]: light.color4,
-	  [vars$l.selectorClassTextColor]: light.color4,
-	  [vars$l.selectorIdTextColor]: light.color4,
-	  [vars$l.regexpTextColor]: light.color13,
-	  [vars$l.stringTextColor]: light.color13,
-	  [vars$l.metaStringTextColor]: light.color13,
-	  [vars$l.builtInTextColor]: light.color5,
-	  [vars$l.symbolTextColor]: light.color5,
-	  [vars$l.commentTextColor]: light.color6,
-	  [vars$l.codeTextColor]: light.color6,
-	  [vars$l.formulaTextColor]: light.color6,
-	  [vars$l.nameTextColor]: light.color7,
-	  [vars$l.quoteTextColor]: light.color7,
-	  [vars$l.selectorTagTextColor]: light.color7,
-	  [vars$l.selectorPseudoTextColor]: light.color7,
-	  [vars$l.substTextColor]: light.color8,
-	  [vars$l.sectionTextColor]: light.color4,
-	  [vars$l.bulletTextColor]: light.color9,
-	  [vars$l.emphasisTextColor]: light.color8,
-	  [vars$l.strongTextColor]: light.color8,
-	  [vars$l.additionTextColor]: light.color7,
-	  [vars$l.additionBgColor]: light.color10,
-	  [vars$l.deletionTextColor]: light.color2,
-	  [vars$l.deletionBgColor]: light.color10,
+	  [vars$m.rootBgColor]: globalRefs$f.colors.surface.main,
+	  [vars$m.rootTextColor]: globalRefs$f.colors.surface.contrast,
+	  [vars$m.docTagTextColor]: light.color2,
+	  [vars$m.keywordTextColor]: light.color2,
+	  [vars$m.metaKeywordTextColor]: light.color2,
+	  [vars$m.templateTagTextColor]: light.color2,
+	  [vars$m.templateVariableTextColor]: light.color2,
+	  [vars$m.typeTextColor]: light.color2,
+	  [vars$m.variableLanguageTextColor]: light.color2,
+	  [vars$m.titleTextColor]: light.color3,
+	  [vars$m.titleClassTextColor]: light.color3,
+	  [vars$m.titleClassInheritedTextColor]: light.color3,
+	  [vars$m.titleFunctionTextColor]: light.color3,
+	  [vars$m.attrTextColor]: light.color4,
+	  [vars$m.attributeTextColor]: light.color4,
+	  [vars$m.literalTextColor]: light.color4,
+	  [vars$m.metaTextColor]: light.color4,
+	  [vars$m.numberTextColor]: light.color4,
+	  [vars$m.operatorTextColor]: light.color4,
+	  [vars$m.variableTextColor]: light.color4,
+	  [vars$m.selectorAttrTextColor]: light.color4,
+	  [vars$m.selectorClassTextColor]: light.color4,
+	  [vars$m.selectorIdTextColor]: light.color4,
+	  [vars$m.regexpTextColor]: light.color13,
+	  [vars$m.stringTextColor]: light.color13,
+	  [vars$m.metaStringTextColor]: light.color13,
+	  [vars$m.builtInTextColor]: light.color5,
+	  [vars$m.symbolTextColor]: light.color5,
+	  [vars$m.commentTextColor]: light.color6,
+	  [vars$m.codeTextColor]: light.color6,
+	  [vars$m.formulaTextColor]: light.color6,
+	  [vars$m.nameTextColor]: light.color7,
+	  [vars$m.quoteTextColor]: light.color7,
+	  [vars$m.selectorTagTextColor]: light.color7,
+	  [vars$m.selectorPseudoTextColor]: light.color7,
+	  [vars$m.substTextColor]: light.color8,
+	  [vars$m.sectionTextColor]: light.color4,
+	  [vars$m.bulletTextColor]: light.color9,
+	  [vars$m.emphasisTextColor]: light.color8,
+	  [vars$m.strongTextColor]: light.color8,
+	  [vars$m.additionTextColor]: light.color7,
+	  [vars$m.additionBgColor]: light.color10,
+	  [vars$m.deletionTextColor]: light.color2,
+	  [vars$m.deletionBgColor]: light.color10,
 	  /* purposely ignored */
 	  // [vars.charEscapeTextColor]: '',
 	  // [vars.linkTextColor]: '',
@@ -92766,50 +92766,50 @@ descope-boolean-field-internal {
 
 	const codeSnippetDarkThemeOverrides = {
 	  codeSnippet: {
-	    [vars$l.rootBgColor]: globalRefs$f.colors.surface.main,
-	    [vars$l.rootTextColor]: globalRefs$f.colors.surface.contrast,
-	    [vars$l.docTagTextColor]: dark.color2,
-	    [vars$l.keywordTextColor]: dark.color2,
-	    [vars$l.metaKeywordTextColor]: dark.color2,
-	    [vars$l.templateTagTextColor]: dark.color2,
-	    [vars$l.templateVariableTextColor]: dark.color2,
-	    [vars$l.typeTextColor]: dark.color2,
-	    [vars$l.variableLanguageTextColor]: dark.color2,
-	    [vars$l.titleTextColor]: dark.color3,
-	    [vars$l.titleClassTextColor]: dark.color3,
-	    [vars$l.titleClassInheritedTextColor]: dark.color3,
-	    [vars$l.titleFunctionTextColor]: dark.color3,
-	    [vars$l.attrTextColor]: dark.color4,
-	    [vars$l.attributeTextColor]: dark.color4,
-	    [vars$l.literalTextColor]: dark.color4,
-	    [vars$l.metaTextColor]: dark.color4,
-	    [vars$l.numberTextColor]: dark.color4,
-	    [vars$l.operatorTextColor]: dark.color4,
-	    [vars$l.variableTextColor]: dark.color4,
-	    [vars$l.selectorAttrTextColor]: dark.color4,
-	    [vars$l.selectorClassTextColor]: dark.color4,
-	    [vars$l.selectorIdTextColor]: dark.color4,
-	    [vars$l.regexpTextColor]: dark.color13,
-	    [vars$l.stringTextColor]: dark.color13,
-	    [vars$l.metaStringTextColor]: dark.color13,
-	    [vars$l.builtInTextColor]: dark.color5,
-	    [vars$l.symbolTextColor]: dark.color5,
-	    [vars$l.commentTextColor]: dark.color6,
-	    [vars$l.codeTextColor]: dark.color6,
-	    [vars$l.formulaTextColor]: dark.color6,
-	    [vars$l.nameTextColor]: dark.color7,
-	    [vars$l.quoteTextColor]: dark.color7,
-	    [vars$l.selectorTagTextColor]: dark.color7,
-	    [vars$l.selectorPseudoTextColor]: dark.color7,
-	    [vars$l.substTextColor]: dark.color8,
-	    [vars$l.sectionTextColor]: dark.color4,
-	    [vars$l.bulletTextColor]: dark.color9,
-	    [vars$l.emphasisTextColor]: dark.color8,
-	    [vars$l.strongTextColor]: dark.color8,
-	    [vars$l.additionTextColor]: dark.color7,
-	    [vars$l.additionBgColor]: dark.color10,
-	    [vars$l.deletionTextColor]: dark.color2,
-	    [vars$l.deletionBgColor]: dark.color10,
+	    [vars$m.rootBgColor]: globalRefs$f.colors.surface.main,
+	    [vars$m.rootTextColor]: globalRefs$f.colors.surface.contrast,
+	    [vars$m.docTagTextColor]: dark.color2,
+	    [vars$m.keywordTextColor]: dark.color2,
+	    [vars$m.metaKeywordTextColor]: dark.color2,
+	    [vars$m.templateTagTextColor]: dark.color2,
+	    [vars$m.templateVariableTextColor]: dark.color2,
+	    [vars$m.typeTextColor]: dark.color2,
+	    [vars$m.variableLanguageTextColor]: dark.color2,
+	    [vars$m.titleTextColor]: dark.color3,
+	    [vars$m.titleClassTextColor]: dark.color3,
+	    [vars$m.titleClassInheritedTextColor]: dark.color3,
+	    [vars$m.titleFunctionTextColor]: dark.color3,
+	    [vars$m.attrTextColor]: dark.color4,
+	    [vars$m.attributeTextColor]: dark.color4,
+	    [vars$m.literalTextColor]: dark.color4,
+	    [vars$m.metaTextColor]: dark.color4,
+	    [vars$m.numberTextColor]: dark.color4,
+	    [vars$m.operatorTextColor]: dark.color4,
+	    [vars$m.variableTextColor]: dark.color4,
+	    [vars$m.selectorAttrTextColor]: dark.color4,
+	    [vars$m.selectorClassTextColor]: dark.color4,
+	    [vars$m.selectorIdTextColor]: dark.color4,
+	    [vars$m.regexpTextColor]: dark.color13,
+	    [vars$m.stringTextColor]: dark.color13,
+	    [vars$m.metaStringTextColor]: dark.color13,
+	    [vars$m.builtInTextColor]: dark.color5,
+	    [vars$m.symbolTextColor]: dark.color5,
+	    [vars$m.commentTextColor]: dark.color6,
+	    [vars$m.codeTextColor]: dark.color6,
+	    [vars$m.formulaTextColor]: dark.color6,
+	    [vars$m.nameTextColor]: dark.color7,
+	    [vars$m.quoteTextColor]: dark.color7,
+	    [vars$m.selectorTagTextColor]: dark.color7,
+	    [vars$m.selectorPseudoTextColor]: dark.color7,
+	    [vars$m.substTextColor]: dark.color8,
+	    [vars$m.sectionTextColor]: dark.color4,
+	    [vars$m.bulletTextColor]: dark.color9,
+	    [vars$m.emphasisTextColor]: dark.color8,
+	    [vars$m.strongTextColor]: dark.color8,
+	    [vars$m.additionTextColor]: dark.color7,
+	    [vars$m.additionBgColor]: dark.color10,
+	    [vars$m.deletionTextColor]: dark.color2,
+	    [vars$m.deletionBgColor]: dark.color10,
 	  },
 	};
 
@@ -92817,10 +92817,10 @@ descope-boolean-field-internal {
 	  __proto__: null,
 	  codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
 	  default: CodeSnippet,
-	  vars: vars$l
+	  vars: vars$m
 	});
 
-	const componentName$n = getComponentName$1('radio-button');
+	const componentName$o = getComponentName$1('radio-button');
 
 	const customMixin$4 = (superclass) =>
 	  class CustomMixin extends superclass {
@@ -92885,11 +92885,11 @@ descope-boolean-field-internal {
 	    wrappedEleName: 'vaadin-radio-button',
 	    excludeAttrsSync: ['tabindex', 'data'],
 	    includeForwardProps: ['checked', 'name', 'disabled'],
-	    componentName: componentName$n,
+	    componentName: componentName$o,
 	  })
 	);
 
-	const componentName$m = getComponentName$1('radio-group');
+	const componentName$n = getComponentName$1('radio-group');
 
 	const RadioGroupMixin = (superclass) =>
 	  class RadioGroupMixinClass extends superclass {
@@ -92904,12 +92904,12 @@ descope-boolean-field-internal {
 
 	      // we are overriding vaadin children getter so it will run on our custom elements
 	      Object.defineProperty(this.baseElement, 'children', {
-	        get: () => this.querySelectorAll(componentName$n),
+	        get: () => this.querySelectorAll(componentName$o),
 	      });
 
 	      // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
 	      this.baseElement.__filterRadioButtons = (nodes) => {
-	        return nodes.filter((node) => node.localName === componentName$n);
+	        return nodes.filter((node) => node.localName === componentName$o);
 	      };
 
 	      // vaadin radio group missing some input properties
@@ -93059,44 +93059,44 @@ descope-boolean-field-internal {
     `,
 
 	    excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
-	    componentName: componentName$m,
+	    componentName: componentName$n,
 	    includeForwardProps: ['value'],
 	  })
 	);
 
-	const vars$k = RadioGroupClass.cssVarList;
+	const vars$l = RadioGroupClass.cssVarList;
 	const globalRefs$e = getThemeRefs(globals$1);
 
 	const radioGroup = {
-	  [vars$k.buttonsRowGap]: '9px',
-	  [vars$k.hostWidth]: refs$1.width,
-	  [vars$k.hostDirection]: refs$1.direction,
-	  [vars$k.fontSize]: refs$1.fontSize,
-	  [vars$k.fontFamily]: refs$1.fontFamily,
-	  [vars$k.labelTextColor]: refs$1.labelTextColor,
-	  [vars$k.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$k.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$k.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$k.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$k.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$k.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$k.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$k.errorMessageFontSize]: refs$1.errorMessageFontSize,
-	  [vars$k.helperTextColor]: refs$1.helperTextColor,
-	  [vars$k.itemsLabelColor]: globalRefs$e.colors.surface.contrast,
+	  [vars$l.buttonsRowGap]: '9px',
+	  [vars$l.hostWidth]: refs$1.width,
+	  [vars$l.hostDirection]: refs$1.direction,
+	  [vars$l.fontSize]: refs$1.fontSize,
+	  [vars$l.fontFamily]: refs$1.fontFamily,
+	  [vars$l.labelTextColor]: refs$1.labelTextColor,
+	  [vars$l.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$l.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$l.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$l.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$l.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$l.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$l.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$l.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$l.helperTextColor]: refs$1.helperTextColor,
+	  [vars$l.itemsLabelColor]: globalRefs$e.colors.surface.contrast,
 
 	  textAlign: {
-	    right: { [vars$k.inputTextAlign]: 'right' },
-	    left: { [vars$k.inputTextAlign]: 'left' },
-	    center: { [vars$k.inputTextAlign]: 'center' },
+	    right: { [vars$l.inputTextAlign]: 'right' },
+	    left: { [vars$l.inputTextAlign]: 'left' },
+	    center: { [vars$l.inputTextAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$k.buttonsSpacing]: 'space-between',
+	    [vars$l.buttonsSpacing]: 'space-between',
 	  },
 
 	  _disabled: {
-	    [vars$k.itemsLabelColor]: globalRefs$e.colors.surface.light,
+	    [vars$l.itemsLabelColor]: globalRefs$e.colors.surface.light,
 	  },
 	};
 
@@ -93104,24 +93104,24 @@ descope-boolean-field-internal {
 	  __proto__: null,
 	  default: radioGroup,
 	  radioGroup: radioGroup,
-	  vars: vars$k
+	  vars: vars$l
 	});
 
-	const vars$j = RadioButtonClass.cssVarList;
+	const vars$k = RadioButtonClass.cssVarList;
 	const globalRefs$d = getThemeRefs(globals$1);
 
 	const radioButton = {
-	  [vars$j.fontFamily]: refs$1.fontFamily,
-	  [vars$j.radioSize]: 'calc(1em + 6px)',
-	  [vars$j.radioMargin]: 'auto 4px',
-	  [vars$j.radioCheckedSize]: `calc(var(${vars$j.radioSize})/5)`,
-	  [vars$j.radioCheckedColor]: globalRefs$d.colors.surface.light,
-	  [vars$j.radioBackgroundColor]: globalRefs$d.colors.surface.light,
-	  [vars$j.radioBorderColor]: 'none',
-	  [vars$j.radioBorderWidth]: 0,
+	  [vars$k.fontFamily]: refs$1.fontFamily,
+	  [vars$k.radioSize]: 'calc(1em + 6px)',
+	  [vars$k.radioMargin]: 'auto 4px',
+	  [vars$k.radioCheckedSize]: `calc(var(${vars$k.radioSize})/5)`,
+	  [vars$k.radioCheckedColor]: globalRefs$d.colors.surface.light,
+	  [vars$k.radioBackgroundColor]: globalRefs$d.colors.surface.light,
+	  [vars$k.radioBorderColor]: 'none',
+	  [vars$k.radioBorderWidth]: 0,
 
 	  _checked: {
-	    [vars$j.radioBackgroundColor]: globalRefs$d.colors.surface.contrast,
+	    [vars$k.radioBackgroundColor]: globalRefs$d.colors.surface.contrast,
 	  },
 
 	  _hover: {
@@ -93130,16 +93130,16 @@ descope-boolean-field-internal {
 
 	  size: {
 	    xs: {
-	      [vars$j.fontSize]: '12px',
+	      [vars$k.fontSize]: '12px',
 	    },
 	    sm: {
-	      [vars$j.fontSize]: '14px',
+	      [vars$k.fontSize]: '14px',
 	    },
 	    md: {
-	      [vars$j.fontSize]: '16px',
+	      [vars$k.fontSize]: '16px',
 	    },
 	    lg: {
-	      [vars$j.fontSize]: '18px',
+	      [vars$k.fontSize]: '18px',
 	    },
 	  },
 	};
@@ -93148,7 +93148,7 @@ descope-boolean-field-internal {
 	  __proto__: null,
 	  default: radioButton,
 	  radioButton: radioButton,
-	  vars: vars$j
+	  vars: vars$k
 	});
 
 	const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
@@ -93492,7 +93492,7 @@ descope-boolean-field-internal {
 	  return date;
 	};
 
-	const componentName$l = getComponentName$1('calendar');
+	const componentName$m = getComponentName$1('calendar');
 
 	const observedAttrs$2 = [
 	  'initial-value',
@@ -93509,11 +93509,11 @@ descope-boolean-field-internal {
 
 	const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-	const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
+	const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
 
-	class RawCalendar extends BaseInputClass$2 {
+	class RawCalendar extends BaseInputClass$3 {
 	  static get observedAttributes() {
-	    return [].concat(BaseInputClass$2.observedAttributes || [], observedAttrs$2, calendarUiAttrs);
+	    return [].concat(BaseInputClass$3.observedAttributes || [], observedAttrs$2, calendarUiAttrs);
 	  }
 
 	  // preview state timestamp
@@ -94132,92 +94132,92 @@ descope-boolean-field-internal {
 
 	const globalRefs$c = getThemeRefs(globals$1);
 
-	const vars$i = CalendarClass.cssVarList;
+	const vars$j = CalendarClass.cssVarList;
 
 	const calendar = {
-	  [vars$i.fontFamily]: refs$1.fontFamily,
-	  [vars$i.fontSize]: refs$1.fontSize,
-	  [vars$i.hostDirection]: refs$1.direction,
+	  [vars$j.fontFamily]: refs$1.fontFamily,
+	  [vars$j.fontSize]: refs$1.fontSize,
+	  [vars$j.hostDirection]: refs$1.direction,
 
-	  [vars$i.calendarPadding]: '1em',
+	  [vars$j.calendarPadding]: '1em',
 
-	  [vars$i.topNavVerticalPadding]: '1em',
-	  [vars$i.topNavAlignment]: 'space-between',
-	  [vars$i.topNavGap]: '0',
-	  [vars$i.topNavSelectorsGap]: '0.5em',
+	  [vars$j.topNavVerticalPadding]: '1em',
+	  [vars$j.topNavAlignment]: 'space-between',
+	  [vars$j.topNavGap]: '0',
+	  [vars$j.topNavSelectorsGap]: '0.5em',
 
-	  [vars$i.bottomNavVerticalPadding]: '0.75em',
-	  [vars$i.bottomNavHorizontalPadding]: '1.5em',
-	  [vars$i.bottomNavAlignment]: 'space-between',
-	  [vars$i.bottomNavGap]: '0.5em',
+	  [vars$j.bottomNavVerticalPadding]: '0.75em',
+	  [vars$j.bottomNavHorizontalPadding]: '1.5em',
+	  [vars$j.bottomNavAlignment]: 'space-between',
+	  [vars$j.bottomNavGap]: '0.5em',
 
-	  [vars$i.navMarginBottom]: '0.75em',
-	  [vars$i.navBorderBottomWidth]: '1px',
-	  [vars$i.navBorderBottomColor]: globalRefs$c.colors.surface.highlight,
-	  [vars$i.navBorderBottomStyle]: 'solid',
+	  [vars$j.navMarginBottom]: '0.75em',
+	  [vars$j.navBorderBottomWidth]: '1px',
+	  [vars$j.navBorderBottomColor]: globalRefs$c.colors.surface.highlight,
+	  [vars$j.navBorderBottomStyle]: 'solid',
 
-	  [vars$i.yearInputWidth]: '6em',
-	  [vars$i.monthInputWidth]: '8em',
+	  [vars$j.yearInputWidth]: '6em',
+	  [vars$j.monthInputWidth]: '8em',
 
-	  [vars$i.navButtonSize]: '24px',
-	  [vars$i.navButtonCursor]: 'pointer',
+	  [vars$j.navButtonSize]: '24px',
+	  [vars$j.navButtonCursor]: 'pointer',
 
-	  [vars$i.weekdayFontSize]: '0.875em',
-	  [vars$i.weekdayFontWeight]: '500',
+	  [vars$j.weekdayFontSize]: '0.875em',
+	  [vars$j.weekdayFontWeight]: '500',
 
 	  // day table cell
-	  [vars$i.dayHeight]: '3.125em',
+	  [vars$j.dayHeight]: '3.125em',
 
 	  // day value
-	  [vars$i.daySize]: '2.125em',
-	  [vars$i.dayFontSize]: '1em',
-	  [vars$i.dayRadius]: '50%',
-	  [vars$i.dayTextAlign]: 'center',
-	  [vars$i.dayPadding]: '0',
-	  [vars$i.dayTextColor]: globalRefs$c.colors.surface.contrast,
-	  [vars$i.dayFontWeight]: '500',
-	  [vars$i.dayBackgroundColor]: 'transparent',
-	  [vars$i.dayCursor]: 'pointer',
-	  [vars$i.dayBackgroundColorHover]: globalRefs$c.colors.primary.highlight,
+	  [vars$j.daySize]: '2.125em',
+	  [vars$j.dayFontSize]: '1em',
+	  [vars$j.dayRadius]: '50%',
+	  [vars$j.dayTextAlign]: 'center',
+	  [vars$j.dayPadding]: '0',
+	  [vars$j.dayTextColor]: globalRefs$c.colors.surface.contrast,
+	  [vars$j.dayFontWeight]: '500',
+	  [vars$j.dayBackgroundColor]: 'transparent',
+	  [vars$j.dayCursor]: 'pointer',
+	  [vars$j.dayBackgroundColorHover]: globalRefs$c.colors.primary.highlight,
 
 	  // selected day
-	  [vars$i.daySelectedBackgroundColor]: globalRefs$c.colors.primary.main,
-	  [vars$i.daySelectedTextdColor]: globalRefs$c.colors.primary.contrast,
+	  [vars$j.daySelectedBackgroundColor]: globalRefs$c.colors.primary.main,
+	  [vars$j.daySelectedTextdColor]: globalRefs$c.colors.primary.contrast,
 
 	  // disabled day (out of min/max range)
-	  [vars$i.dayDisabledTextdColor]: globalRefs$c.colors.surface.light,
+	  [vars$j.dayDisabledTextdColor]: globalRefs$c.colors.surface.light,
 
 	  // today
-	  [vars$i.currentDayBorderColor]: globalRefs$c.colors.surface.light,
-	  [vars$i.currentDayBorderWidth]: '1px',
-	  [vars$i.currentDayBorderStyle]: 'solid',
+	  [vars$j.currentDayBorderColor]: globalRefs$c.colors.surface.light,
+	  [vars$j.currentDayBorderWidth]: '1px',
+	  [vars$j.currentDayBorderStyle]: 'solid',
 
 	  size: {
-	    xs: { [vars$i.fontSize]: '12px' },
-	    sm: { [vars$i.fontSize]: '14px' },
-	    md: { [vars$i.fontSize]: '16px' },
-	    lg: { [vars$i.fontSize]: '18px' },
+	    xs: { [vars$j.fontSize]: '12px' },
+	    sm: { [vars$j.fontSize]: '14px' },
+	    md: { [vars$j.fontSize]: '16px' },
+	    lg: { [vars$j.fontSize]: '18px' },
 	  },
 
-	  [vars$i.navButtonRotation]: 'rotate(180deg)',
+	  [vars$j.navButtonRotation]: 'rotate(180deg)',
 
 	  _disabled: {
-	    [vars$i.navButtonOpacity]: '0.5',
-	    [vars$i.dayBackgroundColorHover]: 'none',
-	    [vars$i.navButtonCursor]: 'default',
-	    [vars$i.dayCursor]: 'default',
+	    [vars$j.navButtonOpacity]: '0.5',
+	    [vars$j.dayBackgroundColorHover]: 'none',
+	    [vars$j.navButtonCursor]: 'default',
+	    [vars$j.dayCursor]: 'default',
 	  },
 
 	  _fullWidth: {
-	    [vars$i.hostWidth]: '100%',
-	    [vars$i.dayBlockAlign]: '0 auto',
+	    [vars$j.hostWidth]: '100%',
+	    [vars$j.dayBlockAlign]: '0 auto',
 	  },
 	};
 
 	var calendar$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: calendar,
-	  vars: vars$i
+	  vars: vars$j
 	});
 
 	// DateCounterClass allows us to add several counters to the input, and use them seperately.
@@ -94338,18 +94338,18 @@ descope-boolean-field-internal {
 	  }
 	}
 
-	const componentName$k = getComponentName$1('date-field');
+	const componentName$l = getComponentName$1('date-field');
 
 	// we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
 	// be able to process this component's overlay. The whole process needs refactoring as soon as possible.
 	const BASE_SELECTOR = 'vaadin-popover';
-	const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$k, baseSelector: BASE_SELECTOR });
+	const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$l, baseSelector: BASE_SELECTOR });
 
 	const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly', 'disable-calendar'];
 	const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
 	const observedAttrs$1 = [...dateFieldAttrs, ...calendarAttrs];
 
-	class RawDateFieldClass extends BaseInputClass$1 {
+	class RawDateFieldClass extends BaseInputClass$2 {
 	  timestamp = '';
 
 	  format = DEFAULT_FORMAT;
@@ -94391,7 +94391,7 @@ descope-boolean-field-internal {
 	  ];
 
 	  static get observedAttributes() {
-	    return [].concat(BaseInputClass$1.observedAttributes || [], observedAttrs$1);
+	    return [].concat(BaseInputClass$2.observedAttributes || [], observedAttrs$1);
 	  }
 
 	  constructor() {
@@ -95230,38 +95230,38 @@ descope-boolean-field-internal {
 	const shadowColor$2 = '#00000020';
 	const { shadow } = globalRefs$b;
 
-	const vars$h = DateFieldClass.cssVarList;
+	const vars$i = DateFieldClass.cssVarList;
 
 	const dateField = {
-	  [vars$h.hostWidth]: refs$1.width,
-	  [vars$h.hostDirection]: refs$1.direction,
-	  [vars$h.iconMargin]: '0.375em',
-
-	  [vars$h.overlay.marginTop]: `calc(${refs$1.outlineWidth} + 1px)`,
-	  [vars$h.overlay.backgroundColor]: refs$1.backgroundColor,
-	  [vars$h.overlay.backdropBackgroundColor]: 'transparent',
-	  [vars$h.overlay.backdropPointerEvents]: 'all',
-	  [vars$h.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$2}, ${shadow.narrow.xl} ${shadowColor$2}`,
-	  [vars$h.overlay.outlineWidth]: '0',
-	  [vars$h.overlay.outlineColor]: 'transparent',
-	  [vars$h.overlay.outlineStyle]: 'none',
-	  [vars$h.overlay.padding]: '0',
-
-	  [vars$h.rtlInputDirection]: 'ltr',
-	  [vars$h.rtlInputAlignment]: 'right',
-
-	  [vars$h.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$h.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$h.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$h.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$h.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$h.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$i.hostWidth]: refs$1.width,
+	  [vars$i.hostDirection]: refs$1.direction,
+	  [vars$i.iconMargin]: '0.375em',
+
+	  [vars$i.overlay.marginTop]: `calc(${refs$1.outlineWidth} + 1px)`,
+	  [vars$i.overlay.backgroundColor]: refs$1.backgroundColor,
+	  [vars$i.overlay.backdropBackgroundColor]: 'transparent',
+	  [vars$i.overlay.backdropPointerEvents]: 'all',
+	  [vars$i.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$2}, ${shadow.narrow.xl} ${shadowColor$2}`,
+	  [vars$i.overlay.outlineWidth]: '0',
+	  [vars$i.overlay.outlineColor]: 'transparent',
+	  [vars$i.overlay.outlineStyle]: 'none',
+	  [vars$i.overlay.padding]: '0',
+
+	  [vars$i.rtlInputDirection]: 'ltr',
+	  [vars$i.rtlInputAlignment]: 'right',
+
+	  [vars$i.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$i.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$i.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$i.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$i.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$i.errorMessageFontSize]: refs$1.errorMessageFontSize,
 	};
 
 	var dateField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: dateField,
-	  vars: vars$h
+	  vars: vars$i
 	});
 
 	const activeableMixin = (superclass) =>
@@ -95279,7 +95279,7 @@ descope-boolean-field-internal {
 	    }
 	  };
 
-	const componentName$j = getComponentName$1('list-item');
+	const componentName$k = getComponentName$1('list-item');
 
 	const customMixin$3 = (superclass) =>
 	  class ListItemMixinClass extends superclass {
@@ -95329,11 +95329,11 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin,
 	  customMixin$3,
 	  activeableMixin
-	)(createBaseClass({ componentName: componentName$j, baseSelector: 'slot' }));
+	)(createBaseClass({ componentName: componentName$k, baseSelector: 'slot' }));
 
-	const componentName$i = getComponentName$1('list');
+	const componentName$j = getComponentName$1('list');
 
-	class RawList extends createBaseClass({ componentName: componentName$i, baseSelector: '.wrapper' }) {
+	class RawList extends createBaseClass({ componentName: componentName$j, baseSelector: '.wrapper' }) {
 	  static get observedAttributes() {
 	    return ['variant', 'readonly'];
 	  }
@@ -95487,7 +95487,7 @@ descope-boolean-field-internal {
 
 	const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
 	  { shadowColor: '#00000020' },
-	  componentName$i
+	  componentName$j
 	);
 
 	const { shadowColor: shadowColor$1 } = helperRefs$1;
@@ -95527,7 +95527,7 @@ descope-boolean-field-internal {
 	  },
 	};
 
-	const vars$g = {
+	const vars$h = {
 	  ...compVars$2,
 	  ...helperVars$1,
 	};
@@ -95535,49 +95535,49 @@ descope-boolean-field-internal {
 	var list$2 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: list$1,
-	  vars: vars$g
+	  vars: vars$h
 	});
 
 	const globalRefs$9 = getThemeRefs(globals$1);
 
-	const vars$f = ListItemClass.cssVarList;
+	const vars$g = ListItemClass.cssVarList;
 
 	const list = {
-	  [vars$f.backgroundColor]: globalRefs$9.colors.surface.main,
-	  [vars$f.padding]: globalRefs$9.spacing.lg,
-	  [vars$f.gap]: globalRefs$9.spacing.md,
-	  [vars$f.borderStyle]: 'solid',
-	  [vars$f.borderWidth]: globalRefs$9.border.xs,
-	  [vars$f.borderColor]: globalRefs$9.colors.surface.main,
-	  [vars$f.borderRadius]: globalRefs$9.radius.sm,
-	  [vars$f.cursor]: 'pointer',
-	  [vars$f.alignItems]: 'center',
-	  [vars$f.flexDirection]: 'row',
-	  [vars$f.transition]: 'border-color 0.2s, background-color 0.2s',
+	  [vars$g.backgroundColor]: globalRefs$9.colors.surface.main,
+	  [vars$g.padding]: globalRefs$9.spacing.lg,
+	  [vars$g.gap]: globalRefs$9.spacing.md,
+	  [vars$g.borderStyle]: 'solid',
+	  [vars$g.borderWidth]: globalRefs$9.border.xs,
+	  [vars$g.borderColor]: globalRefs$9.colors.surface.main,
+	  [vars$g.borderRadius]: globalRefs$9.radius.sm,
+	  [vars$g.cursor]: 'pointer',
+	  [vars$g.alignItems]: 'center',
+	  [vars$g.flexDirection]: 'row',
+	  [vars$g.transition]: 'border-color 0.2s, background-color 0.2s',
 
 	  variant: {
 	    tile: {
-	      [vars$f.alignItems]: 'flex-start',
-	      [vars$f.flexDirection]: 'column',
-	      [vars$f.borderColor]: globalRefs$9.colors.surface.light,
+	      [vars$g.alignItems]: 'flex-start',
+	      [vars$g.flexDirection]: 'column',
+	      [vars$g.borderColor]: globalRefs$9.colors.surface.light,
 	    },
 	  },
 
 	  _hover: {
-	    [vars$f.backgroundColor]: globalRefs$9.colors.surface.highlight,
+	    [vars$g.backgroundColor]: globalRefs$9.colors.surface.highlight,
 	  },
 
 	  _active: {
-	    [vars$f.backgroundColor]: globalRefs$9.colors.surface.main,
-	    [vars$f.borderColor]: globalRefs$9.colors.primary.light,
-	    [vars$f.outline]: `1px solid ${globalRefs$9.colors.primary.light}`,
+	    [vars$g.backgroundColor]: globalRefs$9.colors.surface.main,
+	    [vars$g.borderColor]: globalRefs$9.colors.primary.light,
+	    [vars$g.outline]: `1px solid ${globalRefs$9.colors.primary.light}`,
 	  },
 	};
 
 	var listItem = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: list,
-	  vars: vars$f
+	  vars: vars$g
 	});
 
 	const defaultValidateSchema = () => true;
@@ -95679,7 +95679,7 @@ descope-boolean-field-internal {
 	      }
 	    };
 
-	const componentName$h = getComponentName$1('apps-list');
+	const componentName$i = getComponentName$1('apps-list');
 
 	const limitAbbreviation = (str, limit = 2) =>
 	  str
@@ -95741,7 +95741,7 @@ descope-boolean-field-internal {
 	    slots: ['empty-state'],
 	    wrappedEleName: 'descope-list',
 	    excludeAttrsSync: ['tabindex', 'class', 'empty'],
-	    componentName: componentName$h,
+	    componentName: componentName$i,
 	    style: () => `
       :host {
         width: 100%;
@@ -95766,33 +95766,33 @@ descope-boolean-field-internal {
 	  })
 	);
 
-	const vars$e = AppsListClass.cssVarList;
+	const vars$f = AppsListClass.cssVarList;
 	const globalRefs$8 = getThemeRefs(globals$1);
 
 	const defaultHeight = '400px';
 
 	const appsList = {
-	  [vars$e.itemsFontWeight]: 'normal',
-	  [vars$e.itemsTextAlign]: 'start',
-	  [vars$e.hostDirection]: globalRefs$8.direction,
-	  [vars$e.maxHeight]: defaultHeight,
+	  [vars$f.itemsFontWeight]: 'normal',
+	  [vars$f.itemsTextAlign]: 'start',
+	  [vars$f.hostDirection]: globalRefs$8.direction,
+	  [vars$f.maxHeight]: defaultHeight,
 
 	  _empty: {
-	    [vars$e.minHeight]: defaultHeight,
+	    [vars$f.minHeight]: defaultHeight,
 	  },
 
 	  size: {
 	    xs: {
-	      [vars$e.itemsFontSize]: '14px',
+	      [vars$f.itemsFontSize]: '14px',
 	    },
 	    sm: {
-	      [vars$e.itemsFontSize]: '14px',
+	      [vars$f.itemsFontSize]: '14px',
 	    },
 	    md: {
-	      [vars$e.itemsFontSize]: '16px',
+	      [vars$f.itemsFontSize]: '16px',
 	    },
 	    lg: {
-	      [vars$e.itemsFontSize]: '20px',
+	      [vars$f.itemsFontSize]: '20px',
 	    },
 	  },
 	};
@@ -95800,10 +95800,10 @@ descope-boolean-field-internal {
 	var appsList$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: appsList,
-	  vars: vars$e
+	  vars: vars$f
 	});
 
-	const componentName$g = getComponentName$1('scopes-list');
+	const componentName$h = getComponentName$1('scopes-list');
 	const variants = ['checkbox', 'switch'];
 
 	const itemRenderer$1 = ({ id, desc, required = false }, _, ref) => {
@@ -95822,7 +95822,7 @@ descope-boolean-field-internal {
 `;
 	};
 
-	class RawScopesList extends createBaseClass({ componentName: componentName$g, baseSelector: 'div' }) {
+	class RawScopesList extends createBaseClass({ componentName: componentName$h, baseSelector: 'div' }) {
 	  constructor() {
 	    super();
 
@@ -95930,28 +95930,28 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin
 	)(RawScopesList);
 
-	const vars$d = ScopesListClass.cssVarList;
+	const vars$e = ScopesListClass.cssVarList;
 
 	const scopesList = {
-	  [vars$d.requiredInputBorderColor]: theme$2._disabled[vars$_.borderColor],
-	  [vars$d.requiredInputValueTextColor]: theme$2._disabled[vars$_.valueTextColor],
-	  [vars$d.hostWidth]: '280px',
+	  [vars$e.requiredInputBorderColor]: theme$2._disabled[vars$$.borderColor],
+	  [vars$e.requiredInputValueTextColor]: theme$2._disabled[vars$$.valueTextColor],
+	  [vars$e.hostWidth]: '280px',
 	  _fullWidth: {
-	    [vars$d.hostWidth]: '100%',
+	    [vars$e.hostWidth]: '100%',
 	  },
 	};
 
 	var scopesList$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: scopesList,
-	  vars: vars$d
+	  vars: vars$e
 	});
 
 	var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-	const componentName$f = getComponentName$1('third-party-app-logo');
+	const componentName$g = getComponentName$1('third-party-app-logo');
 	class RawThirdPartyAppLogoClass extends createBaseClass({
-	  componentName: componentName$f,
+	  componentName: componentName$g,
 	  baseSelector: '.wrapper',
 	}) {
 	  constructor() {
@@ -96049,31 +96049,31 @@ descope-boolean-field-internal {
 	)(RawThirdPartyAppLogoClass);
 
 	const globalRefs$7 = getThemeRefs(globals$1);
-	const vars$c = ThirdPartyAppLogoClass.cssVarList;
+	const vars$d = ThirdPartyAppLogoClass.cssVarList;
 
 	const thirdPartyAppLogo = {
-	  [vars$c.gap]: globalRefs$7.spacing.lg,
-	  [vars$c.arrowsColor]: globalRefs$7.colors.surface.dark,
-	  [vars$c.thirdPartyAppLogoFallback]:
+	  [vars$d.gap]: globalRefs$7.spacing.lg,
+	  [vars$d.arrowsColor]: globalRefs$7.colors.surface.dark,
+	  [vars$d.thirdPartyAppLogoFallback]:
 	    'url(https://imgs.descope.com/components/third-party-app-logo-placeholder.svg)',
-	  [vars$c.companyLogoFallback]:
+	  [vars$d.companyLogoFallback]:
 	    'url(https://imgs.descope.com/components/project-logo-placeholder.svg)',
 	  size: {
 	    xs: {
-	      [vars$c.logoMaxHeight]: '30px',
-	      [vars$c.logoMaxWidth]: '120px',
+	      [vars$d.logoMaxHeight]: '30px',
+	      [vars$d.logoMaxWidth]: '120px',
 	    },
 	    sm: {
-	      [vars$c.logoMaxHeight]: '40px',
-	      [vars$c.logoMaxWidth]: '160px',
+	      [vars$d.logoMaxHeight]: '40px',
+	      [vars$d.logoMaxWidth]: '160px',
 	    },
 	    md: {
-	      [vars$c.logoMaxHeight]: '48px',
-	      [vars$c.logoMaxWidth]: '200px',
+	      [vars$d.logoMaxHeight]: '48px',
+	      [vars$d.logoMaxWidth]: '200px',
 	    },
 	    lg: {
-	      [vars$c.logoMaxHeight]: '60px',
-	      [vars$c.logoMaxWidth]: '240px',
+	      [vars$d.logoMaxHeight]: '60px',
+	      [vars$d.logoMaxWidth]: '240px',
 	    },
 	  },
 	};
@@ -96081,10 +96081,10 @@ descope-boolean-field-internal {
 	var thirdPartyAppLogo$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: thirdPartyAppLogo,
-	  vars: vars$c
+	  vars: vars$d
 	});
 
-	const componentName$e = getComponentName$1('security-questions-setup');
+	const componentName$f = getComponentName$1('security-questions-setup');
 
 	const attrsToSync$1 = [
 	  'full-width',
@@ -96103,7 +96103,7 @@ descope-boolean-field-internal {
 	];
 
 	const attrsToReRender$1 = ['count', 'questions'];
-	class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$e, baseSelector: 'div' }) {
+	class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$f, baseSelector: 'div' }) {
 	  constructor() {
 	    super();
 
@@ -96213,7 +96213,7 @@ descope-boolean-field-internal {
 	      return JSON.parse(this.getAttribute('questions')) || [];
 	    } catch (e) {
 	      // eslint-disable-next-line no-console
-	      console.error(componentName$e, 'Error parsing questions attribute', e);
+	      console.error(componentName$f, 'Error parsing questions attribute', e);
 	      return [];
 	    }
 	  }
@@ -96321,22 +96321,22 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin
 	)(RawSecurityQuestionsSetup);
 
-	const vars$b = SecurityQuestionsSetupClass.cssVarList;
+	const vars$c = SecurityQuestionsSetupClass.cssVarList;
 
 	const securityQuestionsSetup = {
-	  [vars$b.hostWidth]: 'fit-content',
+	  [vars$c.hostWidth]: 'fit-content',
 	  _fullWidth: {
-	    [vars$b.hostWidth]: '100%',
+	    [vars$c.hostWidth]: '100%',
 	  },
 	};
 
 	var securityQuestionsSetup$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: securityQuestionsSetup,
-	  vars: vars$b
+	  vars: vars$c
 	});
 
-	const componentName$d = getComponentName$1('security-questions-verify');
+	const componentName$e = getComponentName$1('security-questions-verify');
 
 	const textFieldsAttrs = [
 	  'full-width',
@@ -96360,7 +96360,7 @@ descope-boolean-field-internal {
 	const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 	const attrsToReRender = ['questions'];
-	class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$d, baseSelector: 'div' }) {
+	class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$e, baseSelector: 'div' }) {
 	  constructor() {
 	    super();
 
@@ -96434,7 +96434,7 @@ descope-boolean-field-internal {
 	      return JSON.parse(this.getAttribute('questions')) || [];
 	    } catch (e) {
 	      // eslint-disable-next-line no-console
-	      console.error(componentName$d, 'Error parsing questions attribute', e);
+	      console.error(componentName$e, 'Error parsing questions attribute', e);
 	      return [];
 	    }
 	  }
@@ -96569,22 +96569,22 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin
 	)(RawSecurityQuestionsVerify);
 
-	const vars$a = SecurityQuestionsVerifyClass.cssVarList;
+	const vars$b = SecurityQuestionsVerifyClass.cssVarList;
 
 	const securityQuestionsVerify = {
-	  [vars$a.hostWidth]: 'min-content',
-	  [vars$a.questionCursor]: 'pointer',
+	  [vars$b.hostWidth]: 'min-content',
+	  [vars$b.questionCursor]: 'pointer',
 	  _fullWidth: {
-	    [vars$a.hostWidth]: '100%',
+	    [vars$b.hostWidth]: '100%',
 	  },
-	  [vars$a.questionFontSize]: refs$1.fontSize,
-	  [vars$a.questionFontFamily]: refs$1.fontFamily,
+	  [vars$b.questionFontSize]: refs$1.fontSize,
+	  [vars$b.questionFontFamily]: refs$1.fontFamily,
 	};
 
 	var securityQuestionsVerify$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: securityQuestionsVerify,
-	  vars: vars$a
+	  vars: vars$b
 	});
 
 	const NUMERIC_RE = /^\d+$/;
@@ -96593,7 +96593,7 @@ descope-boolean-field-internal {
 
 	const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-	const componentName$c = getComponentName$1('hybrid-field');
+	const componentName$d = getComponentName$1('hybrid-field');
 
 	const attrs = {
 	  shared: [
@@ -96659,7 +96659,7 @@ descope-boolean-field-internal {
 	const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
 	const BaseClass$3 = createBaseClass({
-	  componentName: componentName$c,
+	  componentName: componentName$d,
 	  baseSelector: 'div',
 	});
 
@@ -96972,33 +96972,33 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin
 	)(RawHybridField);
 
-	const vars$9 = HybridFieldClass.cssVarList;
+	const vars$a = HybridFieldClass.cssVarList;
 
 	const hybridField = {
-	  [vars$9.hostDirection]: refs$1.direction,
+	  [vars$a.hostDirection]: refs$1.direction,
 
 	  // error message icon
-	  [vars$9.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$9.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$9.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$9.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$9.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$9.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$a.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$a.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$a.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$a.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$a.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$a.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  _fullWidth: {
-	    [vars$9.hostWidth]: '100%',
+	    [vars$a.hostWidth]: '100%',
 	  },
 	};
 
 	var hybridField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: hybridField,
-	  vars: vars$9
+	  vars: vars$a
 	});
 
-	const componentName$b = getComponentName$1('alert');
+	const componentName$c = getComponentName$1('alert');
 
-	class RawAlert extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
+	class RawAlert extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -97114,89 +97114,237 @@ descope-boolean-field-internal {
 	)(RawAlert);
 
 	const globalRefs$6 = getThemeRefs(globals$1);
-	const vars$8 = AlertClass.cssVarList;
+	const vars$9 = AlertClass.cssVarList;
 
 	const alert = {
-	  [vars$8.hostDirection]: globalRefs$6.direction,
-	  [vars$8.backgroundColor]: 'transparent',
-	  [vars$8.iconSize]: '1.35em',
-	  [vars$8.alignItems]: 'center',
-	  [vars$8.borderRadius]: globalRefs$6.radius.md,
-	  [vars$8.horizontalPadding]: '0',
-	  [vars$8.verticalPadding]: '0',
-	  [vars$8.gap]: `0.5em`,
-	  [vars$8.fontSize]: useVar(vars$O.fontSize),
+	  [vars$9.hostDirection]: globalRefs$6.direction,
+	  [vars$9.backgroundColor]: 'transparent',
+	  [vars$9.iconSize]: '1.35em',
+	  [vars$9.alignItems]: 'center',
+	  [vars$9.borderRadius]: globalRefs$6.radius.md,
+	  [vars$9.horizontalPadding]: '0',
+	  [vars$9.verticalPadding]: '0',
+	  [vars$9.gap]: `0.5em`,
+	  [vars$9.fontSize]: useVar(vars$P.fontSize),
 
 	  mode: {
 	    error: {
 	      // Notice: If icon is empty, we need to remove it from the theme, to prevent it from rendering minimal layout
 	      // [vars.icon]: `url(${icon})`,
-	      [vars$8.textColor]: globalRefs$6.colors.error.main,
+	      [vars$9.textColor]: globalRefs$6.colors.error.main,
 	      _bordered: {
-	        [vars$8.borderColor]: globalRefs$6.colors.error.main,
+	        [vars$9.borderColor]: globalRefs$6.colors.error.main,
 	      },
 	    },
 	    success: {
 	      // Notice: If icon is empty, we need to remove it from the theme, to prevent it from rendering minimal layout
 	      // [vars.icon]: '',
-	      [vars$8.textColor]: globalRefs$6.colors.success.main,
+	      [vars$9.textColor]: globalRefs$6.colors.success.main,
 	      _bordered: {
-	        [vars$8.borderColor]: globalRefs$6.colors.success.main,
+	        [vars$9.borderColor]: globalRefs$6.colors.success.main,
 	      },
 	    },
 	  },
 
 	  spacing: {
 	    xs: {
-	      [vars$8.horizontalPadding]: globalRefs$6.spacing.xs,
-	      [vars$8.verticalPadding]: globalRefs$6.spacing.xs,
+	      [vars$9.horizontalPadding]: globalRefs$6.spacing.xs,
+	      [vars$9.verticalPadding]: globalRefs$6.spacing.xs,
 	    },
 	    sm: {
-	      [vars$8.horizontalPadding]: globalRefs$6.spacing.sm,
-	      [vars$8.verticalPadding]: globalRefs$6.spacing.sm,
+	      [vars$9.horizontalPadding]: globalRefs$6.spacing.sm,
+	      [vars$9.verticalPadding]: globalRefs$6.spacing.sm,
 	    },
 	    md: {
-	      [vars$8.horizontalPadding]: globalRefs$6.spacing.md,
-	      [vars$8.verticalPadding]: globalRefs$6.spacing.md,
+	      [vars$9.horizontalPadding]: globalRefs$6.spacing.md,
+	      [vars$9.verticalPadding]: globalRefs$6.spacing.md,
 	    },
 	    lg: {
-	      [vars$8.horizontalPadding]: globalRefs$6.spacing.lg,
-	      [vars$8.verticalPadding]: globalRefs$6.spacing.lg,
+	      [vars$9.horizontalPadding]: globalRefs$6.spacing.lg,
+	      [vars$9.verticalPadding]: globalRefs$6.spacing.lg,
 	    },
 	    xl: {
-	      [vars$8.horizontalPadding]: globalRefs$6.spacing.xl,
-	      [vars$8.verticalPadding]: globalRefs$6.spacing.xl,
+	      [vars$9.horizontalPadding]: globalRefs$6.spacing.xl,
+	      [vars$9.verticalPadding]: globalRefs$6.spacing.xl,
 	    },
 	  },
 
 	  textAlign: {
 	    left: {
-	      [vars$8.justifyContent]: 'left',
+	      [vars$9.justifyContent]: 'left',
 	    },
 	    center: {
-	      [vars$8.justifyContent]: 'center',
+	      [vars$9.justifyContent]: 'center',
 	    },
 	    right: {
-	      [vars$8.justifyContent]: 'right',
+	      [vars$9.justifyContent]: 'right',
 	    },
 	  },
 
 	  _bordered: {
-	    [vars$8.borderWidth]: globalRefs$6.border.xs,
-	    [vars$8.borderColor]: 'transparent',
-	    [vars$8.borderStyle]: 'solid',
-	    [vars$8.borderWidth]: globalRefs$6.border.xs,
-	    [vars$8.borderRadius]: globalRefs$6.radius.sm,
+	    [vars$9.borderWidth]: globalRefs$6.border.xs,
+	    [vars$9.borderColor]: 'transparent',
+	    [vars$9.borderStyle]: 'solid',
+	    [vars$9.borderWidth]: globalRefs$6.border.xs,
+	    [vars$9.borderRadius]: globalRefs$6.radius.sm,
 	  },
 
 	  _fullWidth: {
-	    [vars$8.hostWidth]: '100%',
+	    [vars$9.hostWidth]: '100%',
 	  },
 	};
 
 	var alert$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: alert,
+	  vars: vars$9
+	});
+
+	const componentName$b = getComponentName$1('hcaptcha');
+
+	const observedAttributes$2 = ['enabled', 'site-key'];
+
+	const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$b, baseSelector: ':host > div' });
+	class RawHcaptcha extends BaseInputClass$1 {
+	  static get observedAttributes() {
+	    return observedAttributes$2.concat(BaseInputClass$1.observedAttributes || []);
+	  }
+
+	  attributeChangedCallback(attrName, oldValue, newValue) {
+	    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+	    if (oldValue !== newValue) {
+	      if (attrName === 'enabled') {
+	        this.toggleCaptchaEles(newValue === 'true');
+	      }
+	    }
+	  }
+
+	  constructor() {
+	    super();
+
+	    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div class="badge">
+      <span id="hcaptcha"></span>
+      <input id="hcaptcha-input" type="hidden" name="hcaptcha" required />
+      <img src="https://imgs.descope.com/connectors/templates/hcaptcha/hcaptcha-big.png" alt="hcaptcha"/>
+    </div>
+    <slot></slot>
+	`;
+
+	    injectStyle(
+	      `
+      :host {
+        display: inline-flex;
+      }
+      :host > div:not(.hidden) {
+        display: flex;
+      }
+      :host #hcaptcha-input {
+        display: none;
+      }
+      :host #hcaptcha .hcaptcha-logo {
+        height: 100%;
+      }
+      :host #hcaptcha {
+				width: 100%;
+        height: 100%;
+			}
+      :host img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+      .hidden {
+        display: none;
+      }
+        `,
+	      this
+	    );
+
+	    this.captchaEle = this.shadowRoot.querySelector('#hcaptcha');
+	    this.mockCaptchaEle = this.shadowRoot.querySelector('img');
+	    this.badge = this.shadowRoot.querySelector('.badge');
+	    this.inputElement = this.shadowRoot.querySelector('input');
+	  }
+
+	  init() {
+	    super.init?.();
+
+	    observeChildren(this, this.updatePreview.bind(this));
+	    // avoid any possible conflicts with the inner input elements
+	    this.inputElement.getValidity = null;
+	    this.inputElement.checkValidity = null;
+	  }
+
+	  toggleCaptchaEles(enabled) {
+	    if (enabled) {
+	      this.captchaEle.style.display = '';
+	      this.mockCaptchaEle.style.display = 'none';
+	    } else {
+	      this.captchaEle.style.display = 'none';
+	      this.mockCaptchaEle.style.display = '';
+	    }
+	  }
+
+	  updatePreview() {
+	    this.toggleCaptchaEles(this.enabled);
+	  }
+
+	  getValidity() {
+	    if (!this.inputElement.value) {
+	      return { valueMissing: true };
+	    }
+
+	    return {};
+	  }
+
+	  checkValidity() {
+	    return !!this.inputElement.value;
+	  }
+
+	  get siteKey() {
+	    return this.getAttribute('site-key');
+	  }
+
+	  get enabled() {
+	    return this.getAttribute('enabled') === 'true';
+	  }
+	}
+
+	const HcaptchaClass = compose$1(
+	  createStyleMixin({
+	    mappings: {
+	      hostWidth: [{ selector: () => ':host', property: 'width' }],
+	      hostDirection: { property: 'direction' },
+	      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+	      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+	      maxHeight: [
+	        { selector: '>img', property: 'height' },
+	        { selector: '>#hcaptcha', property: 'height' },
+	      ],
+	      maxWidth: [
+	        { selector: '>img', property: 'max-width' },
+	        { selector: '>hcaptcha', property: 'max-width' },
+	      ],
+	    },
+	  }),
+	  draggableMixin,
+	  componentNameValidationMixin
+	)(RawHcaptcha);
+
+	const vars$8 = HcaptchaClass.cssVarList;
+
+	const hcaptcha = {
+	  enabled: {
+	    false: {
+	      [vars$8.maxHeight]: '70px',
+	    },
+	  },
+	};
+
+	var hcaptcha$1 = /*#__PURE__*/Object.freeze({
+	  __proto__: null,
+	  default: hcaptcha,
 	  vars: vars$8
 	});
 
@@ -99079,6 +99227,7 @@ descope-boolean-field-internal {
 	  passwordStrength: passwordStrength$1,
 	  collapsibleContainer: collapsibleContainer$1,
 	  recoveryCodes: recoveryCodes$1,
+	  hcaptcha: hcaptcha$1,
 	};
 
 	const theme = Object.keys(components).reduce(
@@ -99091,7 +99240,7 @@ descope-boolean-field-internal {
 	);
 
 	const defaultTheme = { globals: globals$1, components: theme };
-	const themeVars = { globals: vars$10, components: vars };
+	const themeVars = { globals: vars$11, components: vars };
 
 	const colors = {
 	  surface: {
@@ -99513,6 +99662,7 @@ descope-boolean-field-internal {
 	index_cjs$4.EmailFieldClass = EmailFieldClass;
 	index_cjs$4.EnrichedTextClass = EnrichedTextClass;
 	index_cjs$4.GridClass = GridClass;
+	index_cjs$4.HcaptchaClass = HcaptchaClass;
 	index_cjs$4.HybridFieldClass = HybridFieldClass;
 	index_cjs$4.IconClass = IconClass;
 	index_cjs$4.ImageClass = ImageClass;
@@ -99631,6 +99781,7 @@ const AddressFieldClass = index_cjsExports.AddressFieldClass;
 const TimerButtonClass = index_cjsExports.TimerButtonClass;
 const CollapsibleContainerClass = index_cjsExports.CollapsibleContainerClass;
 const RecoveryCodesListClass = index_cjsExports.RecoveryCodesList;
+const HcaptchaClass = index_cjsExports.HcaptchaClass;
 
 const Checkbox = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-checkbox", { ...props, ref: ref }));
 
@@ -100114,6 +100265,8 @@ const Turnstile = React__default.default.forwardRef(({ textLabel = defaultText,
 
 const RecoveryCodesList = React__default.default.forwardRef(({ data, ...props }, ref) => (React__default.default.createElement("descope-recovery-codes", { data: data ? JSON.stringify(data) : undefined, ...props, ref: ref })));
 
+const Hcaptcha = React__default.default.forwardRef(({ enabled, ...props }, ref) => (React__default.default.createElement("descope-hcaptcha", { ref: ref, enabled: enabled, ...props })));
+
 const globalsThemeToStyle = index_cjsExports.globalsThemeToStyle;
 const createComponentsTheme = index_cjsExports.createComponentsTheme;
 const themeToStyle = index_cjsExports.themeToStyle;
@@ -100162,6 +100315,8 @@ exports.GridCustomColumn = GridCustomColumn;
 exports.GridItemDetailsColumn = GridItemDetailsColumn;
 exports.GridSelectionColumn = GridSelectionColumn;
 exports.GridTextColumn = GridTextColumn;
+exports.Hcaptcha = Hcaptcha;
+exports.HcaptchaClass = HcaptchaClass;
 exports.HybridField = HybridField;
 exports.HybridFieldClass = HybridFieldClass;
 exports.IconClass = IconClass;