@descope/flow-components 2.2.26 → 2.2.28

package/dist/index.cjs.js

@@ -82567,12 +82567,12 @@ function requireIndex_cjs () {
 
 	/* eslint-disable no-use-before-define */
 
-	const componentName$1g = getComponentName('image');
+	const componentName$1h = getComponentName('image');
 
 	const srcAttrs = ['src', 'src-dark'];
 
 	class RawImage extends createBaseClass$1({
-	  componentName: componentName$1g,
+	  componentName: componentName$1h,
 	  baseSelector: 'slot',
 	}) {
 	  static get observedAttributes() {
@@ -82700,7 +82700,7 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawImage);
 
-	const componentName$1f = getComponentName('icon');
+	const componentName$1g = getComponentName('icon');
 
 	const IconClass = compose(
 	  createStyleMixin$1({
@@ -82721,7 +82721,7 @@ function requireIndex_cjs () {
       }
       `,
 	    excludeAttrsSync: ['tabindex', 'class', 'style'],
-	    componentName: componentName$1f,
+	    componentName: componentName$1g,
 	  }),
 	);
 
@@ -82736,7 +82736,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const componentName$1e = getComponentName('button');
+	const componentName$1f = getComponentName('button');
 
 	const resetStyles = `
 	:host {
@@ -82852,7 +82852,7 @@ function requireIndex_cjs () {
 			}
 		`,
 	    excludeAttrsSync: ['tabindex', 'class', 'style'],
-	    componentName: componentName$1e,
+	    componentName: componentName$1f,
 	  })
 	);
 
@@ -82900,7 +82900,7 @@ function requireIndex_cjs () {
 	  surface: globalRefs$H.colors.surface,
 	};
 
-	const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1e);
+	const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1f);
 
 	const button = {
 	  ...helperTheme$6,
@@ -84654,7 +84654,7 @@ function requireIndex_cjs () {
 	  inputIconColor: { ...inputIcon, property: 'color' },
 	};
 
-	const componentName$1d = getComponentName$1('text-field');
+	const componentName$1e = getComponentName$1('text-field');
 
 	const observedAttrs$4 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -84776,11 +84776,11 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$1d,
+	    componentName: componentName$1e,
 	  })
 	);
 
-	const componentName$1c = getComponentName$1('input-wrapper');
+	const componentName$1d = getComponentName$1('input-wrapper');
 	const globalRefs$G = getThemeRefs(globals$1);
 
 	const [theme$2, refs$1, vars$12] = createHelperVars(
@@ -84902,7 +84902,7 @@ function requireIndex_cjs () {
 	      backgroundColor: globalRefs$G.colors.surface.main,
 	    },
 	  },
-	  componentName$1c
+	  componentName$1d
 	);
 
 	var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -85015,7 +85015,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const componentName$1b = getComponentName$1('password');
+	const componentName$1c = getComponentName$1('password');
 
 	const customMixin$d = (superclass) =>
 	  class PasswordFieldMixinClass extends superclass {
@@ -85299,7 +85299,7 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$1b,
+	    componentName: componentName$1c,
 	  })
 	);
 
@@ -85358,7 +85358,7 @@ function requireIndex_cjs () {
 	  vars: vars$10
 	});
 
-	const componentName$1a = getComponentName$1('number-field');
+	const componentName$1b = getComponentName$1('number-field');
 
 	const NumberFieldClass = compose$1(
 	  createStyleMixin({
@@ -85392,7 +85392,7 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$1a,
+	    componentName: componentName$1b,
 	  })
 	);
 
@@ -85448,7 +85448,7 @@ function requireIndex_cjs () {
 	  vars: vars$$
 	});
 
-	const componentName$19 = getComponentName$1('email-field');
+	const componentName$1a = getComponentName$1('email-field');
 
 	const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 	const defaultAutocomplete = 'username';
@@ -85517,7 +85517,7 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$19,
+	    componentName: componentName$1a,
 	  })
 	);
 
@@ -85573,7 +85573,7 @@ function requireIndex_cjs () {
 	  vars: vars$_
 	});
 
-	const componentName$18 = getComponentName$1('text-area');
+	const componentName$19 = getComponentName$1('text-area');
 
 	const {
 	  host: host$t,
@@ -85656,7 +85656,7 @@ function requireIndex_cjs () {
 			${resetInputCursor('vaadin-text-area')}
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$18,
+	    componentName: componentName$19,
 	  })
 	);
 
@@ -85734,9 +85734,9 @@ function requireIndex_cjs () {
 	/* eslint-disable no-param-reassign */
 
 
-	const componentName$17 = getComponentName('enriched-text');
+	const componentName$18 = getComponentName('enriched-text');
 
-	class EnrichedText extends createBaseClass$1({ componentName: componentName$17, baseSelector: ':host > div' }) {
+	class EnrichedText extends createBaseClass$1({ componentName: componentName$18, baseSelector: ':host > div' }) {
 	  #origLinkRenderer;
 
 	  #origEmRenderer;
@@ -85949,9 +85949,9 @@ function requireIndex_cjs () {
 	    inputEventsDispatchingMixin
 	  )(createBaseClass(...args));
 
-	const componentName$16 = getComponentName$1('boolean-field-internal');
+	const componentName$17 = getComponentName$1('boolean-field-internal');
 
-	createBaseInputClass({ componentName: componentName$16, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$17, baseSelector: 'div' });
 
 	const booleanFieldMixin = (superclass) =>
 	  class BooleanFieldMixinClass extends superclass {
@@ -85960,14 +85960,14 @@ function requireIndex_cjs () {
 
 	      const template = document.createElement('template');
 	      template.innerHTML = `
-				<${componentName$16}
+				<${componentName$17}
 					tabindex="-1"
 					slot="input"
-				></${componentName$16}>
+				></${componentName$17}>
 			`;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
-	      this.inputElement = this.shadowRoot.querySelector(componentName$16);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$17);
 	      this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
 	      forwardAttrs$1(this, this.inputElement, {
@@ -86045,7 +86045,7 @@ descope-enriched-text {
 
 `;
 
-	const componentName$15 = getComponentName$1('checkbox');
+	const componentName$16 = getComponentName$1('checkbox');
 
 	const {
 	  host: host$s,
@@ -86181,7 +86181,7 @@ descope-enriched-text {
       }
     `,
 	    excludeAttrsSync: ['label', 'tabindex', 'style'],
-	    componentName: componentName$15,
+	    componentName: componentName$16,
 	  })
 	);
 
@@ -86226,7 +86226,7 @@ descope-enriched-text {
 	  vars: vars$Y
 	});
 
-	const componentName$14 = getComponentName$1('switch-toggle');
+	const componentName$15 = getComponentName$1('switch-toggle');
 
 	const {
 	  host: host$r,
@@ -86370,7 +86370,7 @@ descope-enriched-text {
 			}
 		`,
 	    excludeAttrsSync: ['label', 'tabindex', 'style'],
-	    componentName: componentName$14,
+	    componentName: componentName$15,
 	  })
 	);
 
@@ -86451,9 +86451,9 @@ descope-enriched-text {
 	  vars: vars$X
 	});
 
-	const componentName$13 = getComponentName$1('container');
+	const componentName$14 = getComponentName$1('container');
 
-	class RawContainer extends createBaseClass({ componentName: componentName$13, baseSelector: 'slot' }) {
+	class RawContainer extends createBaseClass({ componentName: componentName$14, baseSelector: 'slot' }) {
 	  constructor() {
 	    super();
 
@@ -86538,7 +86538,7 @@ descope-enriched-text {
 	    horizontalAlignment,
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$13
+	  componentName$14
 	);
 
 	const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -86703,10 +86703,10 @@ descope-enriched-text {
 	  return CssVarImageClass;
 	};
 
-	const componentName$12 = getComponentName$1('logo');
+	const componentName$13 = getComponentName$1('logo');
 
 	const LogoClass = createCssVarImageClass({
-	  componentName: componentName$12,
+	  componentName: componentName$13,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
@@ -86723,10 +86723,10 @@ descope-enriched-text {
 	  vars: vars$V
 	});
 
-	const componentName$11 = getComponentName$1('totp-image');
+	const componentName$12 = getComponentName$1('totp-image');
 
 	const TotpImageClass = createCssVarImageClass({
-	  componentName: componentName$11,
+	  componentName: componentName$12,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
@@ -86743,10 +86743,10 @@ descope-enriched-text {
 	  vars: vars$U
 	});
 
-	const componentName$10 = getComponentName$1('notp-image');
+	const componentName$11 = getComponentName$1('notp-image');
 
 	const NotpImageClass = createCssVarImageClass({
-	  componentName: componentName$10,
+	  componentName: componentName$11,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
@@ -86763,10 +86763,10 @@ descope-enriched-text {
 	  vars: vars$T
 	});
 
-	const componentName$$ = getComponentName('text');
+	const componentName$10 = getComponentName('text');
 
 	class RawText extends createBaseClass$1({
-	  componentName: componentName$$,
+	  componentName: componentName$10,
 	  baseSelector: ':host > slot',
 	}) {
 	  constructor() {
@@ -86935,9 +86935,9 @@ descope-enriched-text {
 	  vars: vars$S
 	});
 
-	const componentName$_ = getComponentName('link');
+	const componentName$$ = getComponentName('link');
 
-	class RawLink extends createBaseClass$1({ componentName: componentName$_, baseSelector: ':host a' }) {
+	class RawLink extends createBaseClass$1({ componentName: componentName$$, baseSelector: ':host a' }) {
 	  constructor() {
 	    super();
 
@@ -87088,8 +87088,8 @@ descope-enriched-text {
 	  vars: vars$Q
 	});
 
-	const componentName$Z = getComponentName$1('divider');
-	class RawDivider extends createBaseClass({ componentName: componentName$Z, baseSelector: ':host > div' }) {
+	const componentName$_ = getComponentName$1('divider');
+	class RawDivider extends createBaseClass({ componentName: componentName$_, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -87200,7 +87200,7 @@ descope-enriched-text {
 	    thickness: '2px',
 	    spacing: '10px',
 	  },
-	  componentName$Z
+	  componentName$_
 	);
 
 	const divider = {
@@ -87244,13 +87244,13 @@ descope-enriched-text {
 
 	/* eslint-disable no-param-reassign */
 
-	const componentName$Y = getComponentName$1('passcode-internal');
+	const componentName$Z = getComponentName$1('passcode-internal');
 
-	createBaseInputClass({ componentName: componentName$Y, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$Z, baseSelector: 'div' });
 
-	const componentName$X = getComponentName$1('loader-radial');
+	const componentName$Y = getComponentName$1('loader-radial');
 
-	class RawLoaderRadial extends createBaseClass({ componentName: componentName$X, baseSelector: ':host > div' }) {
+	class RawLoaderRadial extends createBaseClass({ componentName: componentName$Y, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -87298,7 +87298,7 @@ descope-enriched-text {
 	  componentNameValidationMixin
 	)(RawLoaderRadial);
 
-	const componentName$W = getComponentName$1('passcode');
+	const componentName$X = getComponentName$1('passcode');
 
 	const observedAttributes$4 = ['digits'];
 
@@ -87343,18 +87343,18 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$Y}
+      <${componentName$Z}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$Y}>
+      ><slot></slot></${componentName$Z}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$Y);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$Z);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: ['digits', 'size', 'loading', 'disabled'],
@@ -87517,7 +87517,7 @@ descope-enriched-text {
 			${resetInputCursor('vaadin-text-field')}
     	`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$W,
+	    componentName: componentName$X,
 	  })
 	);
 
@@ -87570,11 +87570,11 @@ descope-enriched-text {
 	  vars: vars$O
 	});
 
-	const componentName$V = getComponentName$1('loader-linear');
+	const componentName$W = getComponentName$1('loader-linear');
 
-	class RawLoaderLinear extends createBaseClass({ componentName: componentName$V, baseSelector: ':host > div' }) {
+	class RawLoaderLinear extends createBaseClass({ componentName: componentName$W, baseSelector: ':host > div' }) {
 	  static get componentName() {
-	    return componentName$V;
+	    return componentName$W;
 	  }
 
 	  constructor() {
@@ -87699,7 +87699,7 @@ descope-enriched-text {
 	      },
 	    },
 	  },
-	  componentName$X
+	  componentName$Y
 	);
 
 	const loaderRadial = {
@@ -87739,7 +87739,7 @@ descope-enriched-text {
 	  vars: vars$M
 	});
 
-	const componentName$U = getComponentName('combo-box');
+	const componentName$V = getComponentName('combo-box');
 
 	const ComboBoxMixin = (superclass) =>
 	  class ComboBoxMixinClass extends superclass {
@@ -88395,12 +88395,12 @@ descope-enriched-text {
 	    // and reset items to an empty array, and opening the list box with no items
 	    // to display.
 	    excludeAttrsSync: ['tabindex', 'size', 'data', 'loading', 'style'],
-	    componentName: componentName$U,
+	    componentName: componentName$V,
 	    includeForwardProps: ['items', 'renderer', 'selectedItem'],
 	  }),
 	);
 
-	const componentName$T = getComponentName('input-wrapper');
+	const componentName$U = getComponentName('input-wrapper');
 	const globalRefs$v = getThemeRefs$1(globals);
 
 	const [theme$1, refs] = createHelperVars$1(
@@ -88523,7 +88523,7 @@ descope-enriched-text {
 	      backgroundColor: globalRefs$v.colors.surface.main,
 	    },
 	  },
-	  componentName$T,
+	  componentName$U,
 	);
 
 	const globalRefs$u = getThemeRefs$1(globals);
@@ -89841,14 +89841,14 @@ descope-enriched-text {
 	  ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 	];
 
-	const componentName$S = getComponentName$1('phone-field-internal');
+	const componentName$T = getComponentName$1('phone-field-internal');
 
-	createBaseInputClass({ componentName: componentName$S, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$T, baseSelector: 'div' });
 
 	const textVars$3 = TextFieldClass.cssVarList;
 	const comboVars = ComboBoxClass.cssVarList;
 
-	const componentName$R = getComponentName$1('phone-field');
+	const componentName$S = getComponentName$1('phone-field');
 
 	const customMixin$a = (superclass) =>
 	  class PhoneFieldMixinClass extends superclass {
@@ -89862,15 +89862,15 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-				<${componentName$S}
+				<${componentName$T}
 					tabindex="-1"
 					slot="input"
-				></${componentName$S}>
+				></${componentName$T}>
       		`;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$S);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$T);
 
 	      forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
 	        includeAttrs: [
@@ -90143,7 +90143,7 @@ descope-enriched-text {
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$R,
+	    componentName: componentName$S,
 	  })
 	);
 
@@ -90193,13 +90193,13 @@ descope-enriched-text {
 	  vars: vars$K
 	});
 
-	const componentName$Q = getComponentName$1('phone-field-internal-input-box');
+	const componentName$R = getComponentName$1('phone-field-internal-input-box');
 
-	createBaseInputClass({ componentName: componentName$Q, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$R, baseSelector: 'div' });
 
 	const textVars$2 = TextFieldClass.cssVarList;
 
-	const componentName$P = getComponentName$1('phone-input-box-field');
+	const componentName$Q = getComponentName$1('phone-input-box-field');
 
 	const customMixin$9 = (superclass) =>
 	  class PhoneFieldInputBoxMixinClass extends superclass {
@@ -90213,15 +90213,15 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-				<${componentName$Q}
+				<${componentName$R}
 					tabindex="-1"
 					slot="input"
-				></${componentName$Q}>
+				></${componentName$R}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$Q);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$R);
 
 	      syncAttrs(this, this.inputElement, { includeAttrs: ['has-value'] });
 
@@ -90428,7 +90428,7 @@ descope-enriched-text {
     ${inputFloatingLabelStyle()}
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$P,
+	    componentName: componentName$Q,
 	  })
 	);
 
@@ -90484,14 +90484,14 @@ descope-enriched-text {
 	  vars: vars$J
 	});
 
-	const componentName$O = getComponentName$1('new-password-internal');
+	const componentName$P = 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$N = getComponentName$1('policy-validation');
+	const componentName$O = getComponentName$1('policy-validation');
 
 	const overrideAttrs = [
 	  'data-password-policy-value-minlength',
@@ -90501,7 +90501,7 @@ descope-enriched-text {
 	const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 	const policyAttrs = ['label', 'value', ...dataAttrs];
 
-	class RawPolicyValidation extends createBaseClass({ componentName: componentName$N, baseSelector: ':host > div' }) {
+	class RawPolicyValidation extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > div' }) {
 	  #availablePolicies;
 
 	  #activePolicies = [];
@@ -90773,7 +90773,7 @@ descope-enriched-text {
 	  componentNameValidationMixin
 	)(RawPolicyValidation);
 
-	const componentName$M = getComponentName$1('new-password');
+	const componentName$N = getComponentName$1('new-password');
 
 	const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -90787,18 +90787,18 @@ descope-enriched-text {
 	      const externalInputAttr = this.getAttribute('external-input');
 
 	      template.innerHTML = `
-			<${componentName$O}
+			<${componentName$P}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${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);
 
 	      if (this.getAttribute('external-input') === 'true') {
 	        this.initExternalInput();
@@ -90983,7 +90983,7 @@ descope-enriched-text {
     }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$M,
+	    componentName: componentName$N,
 	  })
 	);
 
@@ -91039,7 +91039,7 @@ descope-enriched-text {
 	  return fileObj.name.replace(/^.*\\/, '');
 	};
 
-	const componentName$L = getComponentName$1('upload-file');
+	const componentName$M = getComponentName$1('upload-file');
 
 	const observedAttributes$3 = [
 	  'title',
@@ -91054,7 +91054,7 @@ descope-enriched-text {
 	  'icon',
 	];
 
-	const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$L, baseSelector: ':host > div' });
+	const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$M, baseSelector: ':host > div' });
 
 	class RawUploadFile extends BaseInputClass$4 {
 	  static get observedAttributes() {
@@ -91340,10 +91340,10 @@ descope-enriched-text {
 	  vars: vars$H
 	});
 
-	const componentName$K = getComponentName$1('button-selection-group-item');
+	const componentName$L = getComponentName$1('button-selection-group-item');
 
 	class RawSelectItem extends createBaseClass({
-	  componentName: componentName$K,
+	  componentName: componentName$L,
 	  baseSelector: ':host > descope-button',
 	}) {
 	  get size() {
@@ -91577,10 +91577,10 @@ descope-enriched-text {
 	  return BaseButtonSelectionGroupInternalClass;
 	};
 
-	const componentName$J = getComponentName$1('button-selection-group-internal');
+	const componentName$K = getComponentName$1('button-selection-group-internal');
 
 	class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-	  componentName$J
+	  componentName$K
 	) {
 	  getSelectedNode() {
 	    return this.items.find((item) => item.hasAttribute('selected'));
@@ -91825,7 +91825,7 @@ descope-enriched-text {
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-	const componentName$I = getComponentName$1('button-selection-group');
+	const componentName$J = getComponentName$1('button-selection-group');
 
 	const buttonSelectionGroupMixin = (superclass) =>
 	  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -91834,19 +91834,19 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$J}
+      <${componentName$K}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$J}>
+      </${componentName$K}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$J);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$K);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -91871,7 +91871,7 @@ descope-enriched-text {
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => buttonSelectionGroupStyles,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$I,
+	    componentName: componentName$J,
 	  })
 	);
 
@@ -91908,10 +91908,10 @@ descope-enriched-text {
 	  vars: vars$F
 	});
 
-	const componentName$H = getComponentName$1('button-multi-selection-group-internal');
+	const componentName$I = getComponentName$1('button-multi-selection-group-internal');
 
 	class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-	  componentName$H
+	  componentName$I
 	) {
 	  #getSelectedNodes() {
 	    return this.items.filter((item) => item.hasAttribute('selected'));
@@ -92014,7 +92014,7 @@ descope-enriched-text {
 	  }
 	}
 
-	const componentName$G = getComponentName$1('button-multi-selection-group');
+	const componentName$H = getComponentName$1('button-multi-selection-group');
 
 	const buttonMultiSelectionGroupMixin = (superclass) =>
 	  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -92023,19 +92023,19 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$H}
+      <${componentName$I}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$H}>
+      </${componentName$I}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$H);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$I);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -92060,7 +92060,7 @@ descope-enriched-text {
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => buttonSelectionGroupStyles,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$G,
+	    componentName: componentName$H,
 	  })
 	);
 
@@ -92076,7 +92076,7 @@ descope-enriched-text {
 	  vars: vars$E
 	});
 
-	const componentName$F = getComponentName$1('modal');
+	const componentName$G = getComponentName$1('modal');
 
 	const observedAttrs$3 = ['opened'];
 
@@ -92225,7 +92225,7 @@ descope-enriched-text {
       }
     `,
 	    excludeAttrsSync: ['tabindex', 'opened', 'style'],
-	    componentName: componentName$F,
+	    componentName: componentName$G,
 	  })
 	);
 
@@ -92323,7 +92323,7 @@ descope-enriched-text {
   `;
 	};
 
-	const componentName$E = getComponentName$1('grid');
+	const componentName$F = getComponentName$1('grid');
 
 	const GridMixin = (superclass) =>
 	  class GridMixinClass extends superclass {
@@ -92677,7 +92677,7 @@ descope-enriched-text {
     /*!css*/
 		`,
 	    excludeAttrsSync: ['columns', 'tabindex', 'style'],
-	    componentName: componentName$E,
+	    componentName: componentName$F,
 	  })
 	);
 
@@ -92733,7 +92733,7 @@ descope-enriched-text {
 	  vars: vars$C
 	});
 
-	const componentName$D = getComponentName$1('notification-card');
+	const componentName$E = getComponentName$1('notification-card');
 
 	const notificationCardMixin = (superclass) =>
 	  class NotificationCardMixinClass extends superclass {
@@ -92841,7 +92841,7 @@ descope-enriched-text {
     }
     `,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$D,
+	    componentName: componentName$E,
 	  })
 	);
 
@@ -92899,7 +92899,7 @@ descope-enriched-text {
 	  vars: vars$B
 	});
 
-	const componentName$C = getComponentName$1('multi-select-combo-box');
+	const componentName$D = getComponentName$1('multi-select-combo-box');
 
 	const multiSelectComboBoxMixin = (superclass) =>
 	  class MultiSelectComboBoxMixinClass extends superclass {
@@ -93556,7 +93556,7 @@ descope-enriched-text {
 	    // 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', 'style'],
-	    componentName: componentName$C,
+	    componentName: componentName$D,
 	    includeForwardProps: ['items', 'renderer', 'selectedItems'],
 	  })
 	);
@@ -93648,10 +93648,10 @@ descope-enriched-text {
 	  vars: vars$A
 	});
 
-	const componentName$B = getComponentName('badge');
+	const componentName$C = getComponentName('badge');
 
 	class RawBadge extends createBaseClass$1({
-	  componentName: componentName$B,
+	  componentName: componentName$C,
 	  baseSelector: ':host > div',
 	}) {
 	  constructor() {
@@ -93786,9 +93786,9 @@ descope-enriched-text {
 	  vars: vars$z
 	});
 
-	const componentName$A = getComponentName('avatar');
+	const componentName$B = getComponentName('avatar');
 	class RawAvatar extends createBaseClass$1({
-	  componentName: componentName$A,
+	  componentName: componentName$B,
 	  baseSelector: ':host > .wrapper',
 	}) {
 	  constructor() {
@@ -93949,11 +93949,11 @@ descope-enriched-text {
 	  vars: vars$y
 	});
 
-	const componentName$z = getComponentName$1('mappings-field-internal');
+	const componentName$A = getComponentName$1('mappings-field-internal');
 
-	createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
 
-	const componentName$y = getComponentName$1('mappings-field');
+	const componentName$z = getComponentName$1('mappings-field');
 
 	const customMixin$6 = (superclass) =>
 	  class MappingsFieldMixinClass extends superclass {
@@ -93982,14 +93982,14 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$z}
+      <${componentName$A}
         tabindex="-1"
-      ></${componentName$z}>
+      ></${componentName$A}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$z);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$A);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: [
@@ -94125,7 +94125,7 @@ descope-enriched-text {
 	      'error-message',
 	      'style',
 	    ],
-	    componentName: componentName$y,
+	    componentName: componentName$z,
 	  })
 	);
 
@@ -94163,9 +94163,9 @@ descope-enriched-text {
 
 	var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuMDAwMiAwLjk5MjE0OUMxMC4wMDAyIDEuMDE2MTUgMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNUw4LjIyNDE5IDMuMDA4MTVIMi45OTIxOUMyLjQ2NDE5IDMuMDA4MTUgMi4wMDgxOSAzLjQ0MDE1IDIuMDA4MTkgMy45OTIxNVYxMi4wMDgyQzIuMDA4MTkgMTIuNTM2MiAyLjQ0MDE5IDEyLjk5MjIgMi45OTIxOSAxMi45OTIySDUuNTM2MTlDNS44NDgxOSAxMy4wNDAyIDYuMTYwMTkgMTMuMDQwMiA2LjQ3MjE5IDEyLjk5MjJIMTEuMDA4MkMxMS41MzYyIDEyLjk5MjIgMTEuOTkyMiAxMi41NjAyIDExLjk5MjIgMTIuMDA4MlY3Ljc4NDE2TDEzLjkzNjIgNS42MjQxNUwxNC4wMDgyIDUuNjcyMTVWMTEuOTg0MkMxNC4wMDgyIDEzLjY2NDIgMTIuNjY0MiAxNS4wMDgyIDExLjAwODIgMTUuMDA4MkgzLjAxNjE5QzEuMzM2MTkgMTUuMDA4MiAtMC4wMDc4MTI1IDEzLjY2NDIgLTAuMDA3ODEyNSAxMS45ODQyVjMuOTkyMTVDLTAuMDA3ODEyNSAyLjMzNjE1IDEuMzM2MTkgMC45OTIxNDkgMy4wMTYxOSAwLjk5MjE0OUgxMC4wMDAyWk0xMS4yNzIyIDIuNjI0MTVMMTIuNjE2MiA0LjExMjE1TDcuNzIwMTkgOS42ODAxNkM3LjUwNDE5IDkuOTIwMTYgNi44MzIxOSAxMC4yMzIyIDUuNjgwMTkgMTAuNjE2MkM1LjY1NjE5IDEwLjY0MDIgNS42MDgxOSAxMC42NDAyIDUuNTYwMTkgMTAuNjE2MkM1LjQ2NDE5IDEwLjU5MjIgNS4zOTIxOSAxMC40NzIyIDUuNDQwMTkgMTAuMzc2MkM1Ljc1MjE5IDkuMjQ4MTYgNi4wNDAxOSA4LjU1MjE2IDYuMjU2MTkgOC4zMTIxNkwxMS4yNzIyIDIuNjI0MTVaTTExLjkyMDIgMS44NTYxNUwxMy4yODgyIDAuMzIwMTQ5QzEzLjY0ODIgLTAuMDg3ODUxNiAxNC4yNzIyIC0wLjExMTg1MiAxNC42ODAyIDAuMjcyMTQ5QzE1LjA4ODIgMC42MzIxNDkgMTUuMTEyMiAxLjI4MDE1IDE0Ljc1MjIgMS42ODgxNUwxMy4yNjQyIDMuMzY4MTVMMTEuOTIwMiAxLjg1NjE1WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPgo=";
 
-	const componentName$x = getComponentName$1('user-attribute');
+	const componentName$y = getComponentName$1('user-attribute');
 	class RawUserAttribute extends createBaseClass({
-	  componentName: componentName$x,
+	  componentName: componentName$y,
 	  baseSelector: ':host > .root',
 	}) {
 	  constructor() {
@@ -94462,9 +94462,9 @@ descope-enriched-text {
 
 	var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-	const componentName$w = getComponentName$1('user-auth-method');
+	const componentName$x = getComponentName$1('user-auth-method');
 	class RawUserAuthMethod extends createBaseClass({
-	  componentName: componentName$w,
+	  componentName: componentName$x,
 	  baseSelector: ':host > .root',
 	}) {
 	  constructor() {
@@ -94737,11 +94737,11 @@ descope-enriched-text {
 	  vars: vars$v
 	});
 
-	const componentName$v = getComponentName$1('saml-group-mappings-internal');
+	const componentName$w = getComponentName$1('saml-group-mappings-internal');
 
-	createBaseInputClass({ componentName: componentName$v, baseSelector: '' });
+	createBaseInputClass({ componentName: componentName$w, baseSelector: '' });
 
-	const componentName$u = getComponentName$1('saml-group-mappings');
+	const componentName$v = getComponentName$1('saml-group-mappings');
 
 	const customMixin$5 = (superclass) =>
 	  class SamlGroupMappingsMixinClass extends superclass {
@@ -94751,14 +94751,14 @@ descope-enriched-text {
 	      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: [
@@ -94843,7 +94843,7 @@ descope-enriched-text {
 	      'error-message',
 	      'style',
 	    ],
-	    componentName: componentName$u,
+	    componentName: componentName$v,
 	  })
 	);
 
@@ -94928,9 +94928,9 @@ descope-enriched-text {
 	  return inline ? input : `<pre>${input}</pre>`;
 	};
 
-	const componentName$t = getComponentName$1('code-snippet');
+	const componentName$u = getComponentName$1('code-snippet');
 
-	let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > code' }) {
+	let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > code' }) {
 	  static get observedAttributes() {
 	    return ['lang', 'inline'];
 	  }
@@ -95304,7 +95304,7 @@ descope-enriched-text {
 	  vars: vars$q
 	});
 
-	const componentName$s = getComponentName$1('radio-button');
+	const componentName$t = getComponentName$1('radio-button');
 
 	const customMixin$4 = (superclass) =>
 	  class CustomMixin extends superclass {
@@ -95369,11 +95369,11 @@ descope-enriched-text {
 	    wrappedEleName: 'vaadin-radio-button',
 	    excludeAttrsSync: ['tabindex', 'data', 'style'],
 	    includeForwardProps: ['checked', 'name', 'disabled'],
-	    componentName: componentName$s,
+	    componentName: componentName$t,
 	  })
 	);
 
-	const componentName$r = getComponentName$1('radio-group');
+	const componentName$s = getComponentName$1('radio-group');
 
 	const RadioGroupMixin = (superclass) =>
 	  class RadioGroupMixinClass extends superclass {
@@ -95388,12 +95388,12 @@ descope-enriched-text {
 
 	      // we are overriding vaadin children getter so it will run on our custom elements
 	      Object.defineProperty(this.baseElement, 'children', {
-	        get: () => this.querySelectorAll(componentName$s),
+	        get: () => this.querySelectorAll(componentName$t),
 	      });
 
 	      // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
 	      this.baseElement.__filterRadioButtons = (nodes) => {
-	        return nodes.filter((node) => node.localName === componentName$s);
+	        return nodes.filter((node) => node.localName === componentName$t);
 	      };
 
 	      // vaadin radio group missing some input properties
@@ -95543,7 +95543,7 @@ descope-enriched-text {
     `,
 
 	    excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
-	    componentName: componentName$r,
+	    componentName: componentName$s,
 	    includeForwardProps: ['value'],
 	  })
 	);
@@ -95991,7 +95991,7 @@ descope-enriched-text {
 	  return date;
 	};
 
-	const componentName$q = getComponentName$1('calendar');
+	const componentName$r = getComponentName$1('calendar');
 
 	const observedAttrs$2 = [
 	  'initial-value',
@@ -96008,7 +96008,7 @@ descope-enriched-text {
 
 	const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-	const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
+	const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
 
 	class RawCalendar extends BaseInputClass$3 {
 	  static get observedAttributes() {
@@ -96837,12 +96837,12 @@ descope-enriched-text {
 	  }
 	}
 
-	const componentName$p = getComponentName$1('date-field');
+	const componentName$q = 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$2 = createBaseInputClass({ componentName: componentName$p, baseSelector: BASE_SELECTOR });
+	const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$q, baseSelector: BASE_SELECTOR });
 
 	const dateFieldAttrs = [
 	  'format',
@@ -97794,7 +97794,7 @@ descope-enriched-text {
 	  vars: vars$m
 	});
 
-	const componentName$o = getComponentName('list-item');
+	const componentName$p = getComponentName('list-item');
 
 	const customMixin$3 = (superclass) =>
 	  class ListItemMixinClass extends superclass {
@@ -97851,12 +97851,12 @@ descope-enriched-text {
 	  componentNameValidationMixin$1,
 	  customMixin$3,
 	  activeableMixin,
-	)(createBaseClass$1({ componentName: componentName$o, baseSelector: 'slot' }));
+	)(createBaseClass$1({ componentName: componentName$p, baseSelector: 'slot' }));
 
-	const componentName$n = getComponentName('list');
+	const componentName$o = getComponentName('list');
 
 	class RawList extends createBaseClass$1({
-	  componentName: componentName$n,
+	  componentName: componentName$o,
 	  baseSelector: '.wrapper',
 	}) {
 	  static get observedAttributes() {
@@ -98027,7 +98027,7 @@ descope-enriched-text {
 	  componentNameValidationMixin$1,
 	)(RawList);
 
-	const componentName$m = getComponentName('apps-list');
+	const componentName$n = getComponentName('apps-list');
 
 	const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -98151,7 +98151,7 @@ descope-enriched-text {
 	    slots: ['empty-state'],
 	    wrappedEleName: 'descope-list',
 	    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-	    componentName: componentName$m,
+	    componentName: componentName$n,
 	    style: () => `
       :host {
         width: 100%;
@@ -98256,7 +98256,7 @@ descope-enriched-text {
 
 	const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars$1(
 	  { shadowColor: '#00000020' },
-	  componentName$n,
+	  componentName$o,
 	);
 
 	const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -98470,7 +98470,7 @@ descope-enriched-text {
 	      }
 	    };
 
-	const componentName$l = getComponentName$1('scopes-list');
+	const componentName$m = getComponentName$1('scopes-list');
 	const variants = ['checkbox', 'switch'];
 
 	const itemRenderer$3 = ({ id, desc, required = false }, _, ref) => {
@@ -98489,7 +98489,7 @@ descope-enriched-text {
 `;
 	};
 
-	class RawScopesList extends createBaseClass({ componentName: componentName$l, baseSelector: 'div' }) {
+	class RawScopesList extends createBaseClass({ componentName: componentName$m, baseSelector: 'div' }) {
 	  constructor() {
 	    super();
 
@@ -98616,9 +98616,9 @@ descope-enriched-text {
 
 	var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-	const componentName$k = getComponentName$1('third-party-app-logo');
+	const componentName$l = getComponentName$1('third-party-app-logo');
 	class RawThirdPartyAppLogoClass extends createBaseClass({
-	  componentName: componentName$k,
+	  componentName: componentName$l,
 	  baseSelector: '.wrapper',
 	}) {
 	  constructor() {
@@ -98751,7 +98751,7 @@ descope-enriched-text {
 	  vars: vars$h
 	});
 
-	const componentName$j = getComponentName$1('security-questions-setup');
+	const componentName$k = getComponentName$1('security-questions-setup');
 
 	const attrsToSync$1 = [
 	  'full-width',
@@ -98770,7 +98770,7 @@ descope-enriched-text {
 	];
 
 	const attrsToReRender$1 = ['count', 'questions'];
-	class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$j, baseSelector: 'div' }) {
+	class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$k, baseSelector: 'div' }) {
 	  constructor() {
 	    super();
 
@@ -98880,7 +98880,7 @@ descope-enriched-text {
 	      return JSON.parse(this.getAttribute('questions')) || [];
 	    } catch (e) {
 	      // eslint-disable-next-line no-console
-	      console.error(componentName$j, 'Error parsing questions attribute', e);
+	      console.error(componentName$k, 'Error parsing questions attribute', e);
 	      return [];
 	    }
 	  }
@@ -99003,7 +99003,7 @@ descope-enriched-text {
 	  vars: vars$g
 	});
 
-	const componentName$i = getComponentName$1('security-questions-verify');
+	const componentName$j = getComponentName$1('security-questions-verify');
 
 	const textFieldsAttrs = [
 	  'full-width',
@@ -99027,7 +99027,7 @@ descope-enriched-text {
 	const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 	const attrsToReRender = ['questions'];
-	class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$i, baseSelector: 'div' }) {
+	class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$j, baseSelector: 'div' }) {
 	  constructor() {
 	    super();
 
@@ -99101,7 +99101,7 @@ descope-enriched-text {
 	      return JSON.parse(this.getAttribute('questions')) || [];
 	    } catch (e) {
 	      // eslint-disable-next-line no-console
-	      console.error(componentName$i, 'Error parsing questions attribute', e);
+	      console.error(componentName$j, 'Error parsing questions attribute', e);
 	      return [];
 	    }
 	  }
@@ -99260,7 +99260,7 @@ descope-enriched-text {
 
 	const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-	const componentName$h = getComponentName$1('hybrid-field');
+	const componentName$i = getComponentName$1('hybrid-field');
 
 	const attrs = {
 	  shared: [
@@ -99324,12 +99324,12 @@ descope-enriched-text {
 	const PHONE_FIELD = 'descope-phone-field';
 	const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
-	const BaseClass$6 = createBaseClass({
-	  componentName: componentName$h,
+	const BaseClass$7 = createBaseClass({
+	  componentName: componentName$i,
 	  baseSelector: 'div',
 	});
 
-	class RawHybridField extends BaseClass$6 {
+	class RawHybridField extends BaseClass$7 {
 	  #isReportedValidity = false;
 
 	  #selectionStart;
@@ -99662,9 +99662,9 @@ descope-enriched-text {
 	  vars: vars$e
 	});
 
-	const componentName$g = getComponentName$1('alert');
+	const componentName$h = getComponentName$1('alert');
 
-	class RawAlert extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
+	class RawAlert extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -99872,11 +99872,11 @@ descope-enriched-text {
 	  vars: vars$d
 	});
 
-	const componentName$f = getComponentName$1('hcaptcha');
+	const componentName$g = getComponentName$1('hcaptcha');
 
 	const observedAttributes$2 = ['enabled', 'site-key'];
 
-	const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$f, baseSelector: ':host > div' });
+	const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$g, baseSelector: ':host > div' });
 	class RawHcaptcha extends BaseInputClass$1 {
 	  static get observedAttributes() {
 	    return observedAttributes$2.concat(BaseInputClass$1.observedAttributes || []);
@@ -100020,14 +100020,14 @@ descope-enriched-text {
 	  vars: vars$c
 	});
 
-	const componentName$e = getComponentName('autocomplete-field-internal');
+	const componentName$f = getComponentName('autocomplete-field-internal');
 
 	createBaseInputClass$1({
-	  componentName: componentName$e,
+	  componentName: componentName$f,
 	  baseSelector: '',
 	});
 
-	const componentName$d = getComponentName('autocomplete-field');
+	const componentName$e = getComponentName('autocomplete-field');
 
 	const customMixin$1 = (superclass) =>
 	  class AutocompleteFieldMixinClass extends superclass {
@@ -100048,15 +100048,15 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$e}
+      <${componentName$f}
         tabindex="-1"
-      ></${componentName$e}>
+      ></${componentName$f}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$e,
+	        componentName$f,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -100175,7 +100175,7 @@ descope-enriched-text {
     }
   `,
 	    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-	    componentName: componentName$d,
+	    componentName: componentName$e,
 	  }),
 	);
 
@@ -100429,7 +100429,7 @@ descope-enriched-text {
 	  }
 	}
 
-	const componentName$c = getComponentName('address-field-internal');
+	const componentName$d = getComponentName('address-field-internal');
 
 	const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 	const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -100440,7 +100440,7 @@ descope-enriched-text {
 	};
 
 	const BaseInputClass = createBaseInputClass$1({
-	  componentName: componentName$c,
+	  componentName: componentName$d,
 	  baseSelector: '',
 	});
 	const initConnectorAttrs = ['public-api-key'];
@@ -100547,7 +100547,7 @@ descope-enriched-text {
 	  connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 	)(RawAddressFieldInternal);
 
-	const componentName$b = getComponentName('address-field');
+	const componentName$c = getComponentName('address-field');
 
 	const customMixin = (superclass) =>
 	  class AddressFieldMixinClass extends superclass {
@@ -100576,15 +100576,15 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$c}
+      <${componentName$d}
         tabindex="-1"
-      ></${componentName$c}>
+      ></${componentName$d}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$c,
+	        componentName$d,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -100662,7 +100662,7 @@ descope-enriched-text {
     width: 100%;
   }
 
-  ${componentName$c} {
+  ${componentName$d} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -100670,12 +100670,12 @@ descope-enriched-text {
     max-width: 100%;
   }
 
-  ${componentName$c} ::slotted {
+  ${componentName$d} ::slotted {
     padding: 0;
   }
 `,
 	    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-	    componentName: componentName$b,
+	    componentName: componentName$c,
 	  }),
 	);
 
@@ -100715,24 +100715,24 @@ descope-enriched-text {
 	  return timeParts.join(':');
 	};
 
-	const componentName$a = getComponentName('timer');
+	const componentName$b = getComponentName('timer');
 
 	const observedAttributes$1 = ['seconds', 'hide-icon', 'paused'];
 
-	const BaseClass$5 = createBaseClass$1({
-	  componentName: componentName$a,
+	const BaseClass$6 = createBaseClass$1({
+	  componentName: componentName$b,
 	  baseSelector: ':host > .wrapper',
 	});
 
 	const DEFAULT_INTERVAL = 1000;
 
-	class RawTimer extends BaseClass$5 {
+	class RawTimer extends BaseClass$6 {
 	  #timeRemains = 0;
 
 	  #intervalId;
 
 	  static get observedAttributes() {
-	    return observedAttributes$1.concat(BaseClass$5.observedAttributes || []);
+	    return observedAttributes$1.concat(BaseClass$6.observedAttributes || []);
 	  }
 
 	  constructor() {
@@ -100941,7 +100941,7 @@ descope-enriched-text {
 	  vars: vars$9
 	});
 
-	const componentName$9 = getComponentName('timer-button');
+	const componentName$a = getComponentName('timer-button');
 
 	const buttonAttrs = [
 	  'button-variant',
@@ -100971,12 +100971,12 @@ descope-enriched-text {
 	  'timer-paused': 'paused',
 	};
 
-	const BaseClass$4 = createBaseClass$1({
-	  componentName: componentName$9,
+	const BaseClass$5 = createBaseClass$1({
+	  componentName: componentName$a,
 	  baseSelector: ':host > div',
 	});
 
-	class RawTimerButton extends BaseClass$4 {
+	class RawTimerButton extends BaseClass$5 {
 	  constructor() {
 	    super();
 
@@ -101102,9 +101102,9 @@ descope-enriched-text {
 	  vars: vars$8
 	});
 
-	const componentName$8 = getComponentName('password-strength');
+	const componentName$9 = getComponentName('password-strength');
 	class RawPasswordStrength extends createBaseClass$1({
-	  componentName: componentName$8,
+	  componentName: componentName$9,
 	  baseSelector: ':host > .wrapper',
 	}) {
 	  static get observedAttributes() {
@@ -101307,10 +101307,10 @@ descope-enriched-text {
 
 	var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-	const componentName$7 = getComponentName('collapsible-container');
+	const componentName$8 = getComponentName('collapsible-container');
 
 	class RawCollapsibleContainer extends createBaseClass$1({
-	  componentName: componentName$7,
+	  componentName: componentName$8,
 	  baseSelector: 'slot',
 	}) {
 	  static get observedAttributes() {
@@ -101545,7 +101545,7 @@ descope-enriched-text {
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$7
+	  componentName$8
 	);
 
 	const { shadowColor: shadowColor$1 } = helperRefs$1;
@@ -101656,7 +101656,7 @@ descope-enriched-text {
 	  vars: vars$6
 	});
 
-	const componentName$6 = getComponentName('recovery-codes');
+	const componentName$7 = getComponentName('recovery-codes');
 
 	const itemRenderer$2 = ({ value }, _, ref) => {
 	  return `
@@ -101667,7 +101667,7 @@ descope-enriched-text {
 	};
 
 	class RawRecoveryCodes extends createBaseClass$1({
-	  componentName: componentName$6,
+	  componentName: componentName$7,
 	  baseSelector: ':host > div',
 	}) {
 	  static get observedAttributes() {
@@ -101835,7 +101835,7 @@ descope-enriched-text {
 	  vars: vars$5
 	});
 
-	const componentName$5 = getComponentName('outbound-apps');
+	const componentName$6 = getComponentName('outbound-apps');
 
 	const itemRenderer$1 = (
 	  { name, description, logo, appId, isConnected },
@@ -101880,12 +101880,12 @@ descope-enriched-text {
 `;
 	};
 
-	const BaseClass$3 = createBaseClass$1({
-	  componentName: componentName$5,
+	const BaseClass$4 = createBaseClass$1({
+	  componentName: componentName$6,
 	  baseSelector: 'descope-list',
 	});
 
-	class RawOutboundAppsClass extends BaseClass$3 {
+	class RawOutboundAppsClass extends BaseClass$4 {
 	  constructor() {
 	    super();
 
@@ -102097,10 +102097,10 @@ descope-enriched-text {
 	  vars: vars$4
 	});
 
-	const componentName$4 = getComponentName('outbound-app-button');
+	const componentName$5 = getComponentName('outbound-app-button');
 
 	class RawOutboundAppButton extends createBaseClass$1({
-	  componentName: componentName$4,
+	  componentName: componentName$5,
 	  baseSelector: ':host > descope-button',
 	}) {
 	  static get observedAttributes() {
@@ -102282,7 +102282,7 @@ descope-enriched-text {
 	  };
 	};
 
-	const componentName$3 = getComponentName('trusted-devices');
+	const componentName$4 = getComponentName('trusted-devices');
 
 	const itemRenderer = (
 	  { id, name, lastLoginDate, deviceType, isCurrent },
@@ -102370,12 +102370,12 @@ descope-enriched-text {
 	  return template;
 	};
 
-	const BaseClass$2 = createBaseClass$1({
-	  componentName: componentName$3,
+	const BaseClass$3 = createBaseClass$1({
+	  componentName: componentName$4,
 	  baseSelector: ListClass.componentName,
 	});
 
-	class RawTrustedDevicesClass extends BaseClass$2 {
+	class RawTrustedDevicesClass extends BaseClass$3 {
 	  constructor() {
 	    super();
 
@@ -102705,7 +102705,7 @@ descope-enriched-text {
 	  vars: vars$2
 	});
 
-	const componentName$2 = getComponentName('tooltip');
+	const componentName$3 = getComponentName('tooltip');
 
 	const tooltipAttrs = [
 	  'text',
@@ -102715,14 +102715,14 @@ descope-enriched-text {
 	  'opened',
 	];
 
-	const BaseClass$1 = createBaseClass$1({
-	  componentName: componentName$2,
+	const BaseClass$2 = createBaseClass$1({
+	  componentName: componentName$3,
 	  baseSelector: 'vaadin-tooltip',
 	});
 
-	class RawTooltip extends BaseClass$1 {
+	class RawTooltip extends BaseClass$2 {
 	  static get observedAttributes() {
-	    return tooltipAttrs.concat(BaseClass$1.observedAttributes || []);
+	    return tooltipAttrs.concat(BaseClass$2.observedAttributes || []);
 	  }
 
 	  get isOpened() {
@@ -102955,7 +102955,7 @@ descope-enriched-text {
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$2
+	  componentName$3
 	);
 
 	const { shadowColor } = helperRefs;
@@ -103139,17 +103139,17 @@ descope-enriched-text {
 	  },
 	});
 
-	const componentName$1 = getComponentName$1('recaptcha');
+	const componentName$2 = getComponentName$1('recaptcha');
 
 	const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
 
-	const BaseClass = createBaseClass({
-	  componentName: componentName$1,
+	const BaseClass$1 = createBaseClass({
+	  componentName: componentName$2,
 	  baseSelector: ':host > div',
 	});
-	class RawRecaptcha extends BaseClass {
+	class RawRecaptcha extends BaseClass$1 {
 	  static get observedAttributes() {
-	    return observedAttributes.concat(BaseClass.observedAttributes || []);
+	    return observedAttributes.concat(BaseClass$1.observedAttributes || []);
 	  }
 
 	  attributeChangedCallback(attrName, oldValue, newValue) {
@@ -103369,7 +103369,7 @@ descope-enriched-text {
 
 	const RecaptchaClass = compose$1(draggableMixin)(RawRecaptcha);
 
-	const componentName = getComponentName$1('notification');
+	const componentName$1 = getComponentName$1('notification');
 
 	const NotificationMixin = (superclass) =>
 	  class NotificationMixinClass extends superclass {
@@ -103464,10 +103464,112 @@ descope-enriched-text {
 	  createProxy({
 	    wrappedEleName: 'vaadin-notification',
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName,
+	    componentName: componentName$1,
 	  })
 	);
 
+	// NOTICE: This component registers with a DIFFERENT name than its file name
+	const componentName = getComponentName('ponyhot');
+
+	const HP_PREFIX = 'dhp-';
+
+	const BaseClass = createBaseClass$1({
+	  componentName,
+	  baseSelector: '',
+	});
+
+	class RawHoneypot extends BaseClass {
+	  get type() {
+	    return this.getAttribute('type');
+	  }
+
+	  get value() {
+	    return this.input?.value || '';
+	  }
+
+	  init() {
+	    this.input = this.querySelector('input');
+
+	    if (!this.input) return;
+
+	    this.#setupTrapListeners();
+	    this.#setupValueInterceptor();
+	    this.#hideComponent();
+	  }
+
+	  #setupTrapListeners() {
+	    const events = [
+	      'input',
+	      'change',
+	      'click',
+	      'keydown',
+	      'keyup',
+	      'mouseover',
+	      'mousedown',
+	    ];
+
+	    const fillHoneypot = (e) => {
+	      this.input.value = `${HP_PREFIX}${e.type}`;
+
+	      // Stop listening to all events after first trigger
+	      events.forEach((event) => {
+	        this.input.removeEventListener(event, fillHoneypot);
+	      });
+	    };
+
+	    events.forEach((event) => {
+	      this.input.addEventListener(event, fillHoneypot);
+	    });
+	  }
+
+	  // Intercept direct value assignments to catch bots that bypass events
+	  #setupValueInterceptor() {
+	    const originalDescriptor = Object.getOwnPropertyDescriptor(
+	      HTMLInputElement.prototype,
+	      'value',
+	    );
+
+	    Object.defineProperty(this.input, 'value', {
+	      get() {
+	        return originalDescriptor.get.call(this);
+	      },
+	      set(newValue) {
+	        const currentValue = originalDescriptor.get.call(this);
+
+	        // Only trap if the value is being set by external code (not our own trap)
+	        if (
+	          newValue &&
+	          !newValue.startsWith(HP_PREFIX) &&
+	          newValue !== currentValue
+	        ) {
+	          originalDescriptor.set.call(this, `${HP_PREFIX}direct-set`);
+	        } else {
+	          originalDescriptor.set.call(this, newValue);
+	        }
+	      },
+	      configurable: true,
+	    });
+	  }
+
+	  #hideComponent() {
+	    const styles = {
+	      position: 'absolute',
+	      opacity: '0.01',
+	      width: '1px',
+	      height: '1px',
+	      pointerEvents: 'none',
+	      zIndex: '-1',
+	      left: '-999999px',
+	    };
+
+	    Object.entries(styles).forEach(([key, value]) => {
+	      this.style[key] = value;
+	    });
+	  }
+	}
+
+	const HoneypotClass = compose(componentNameValidationMixin$1)(RawHoneypot);
+
 	const options = {
 	  translations: zxcvbnEnPackage__namespace.translations,
 	  graphs: zxcvbnCommonPackage__namespace.adjacencyGraphs,
@@ -103506,6 +103608,7 @@ descope-enriched-text {
 	index_cjs$4.EnrichedTextClass = EnrichedTextClass;
 	index_cjs$4.GridClass = GridClass;
 	index_cjs$4.HcaptchaClass = HcaptchaClass;
+	index_cjs$4.HoneypotClass = HoneypotClass;
 	index_cjs$4.HybridFieldClass = HybridFieldClass;
 	index_cjs$4.IconClass = IconClass;
 	index_cjs$4.ImageClass = ImageClass;
@@ -103648,6 +103751,7 @@ const OutboundAppsClass = index_cjsExports.OutboundAppsClass;
 const OutboundAppButtonClass = index_cjsExports.OutboundAppButtonClass;
 const TrustedDevicesClass = index_cjsExports.TrustedDevicesClass;
 const TooltipClass = index_cjsExports.TooltipClass;
+const HoneypotClass = index_cjsExports.HoneypotClass;
 
 const Checkbox = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-checkbox", { ...props, ref: ref }));
 
@@ -104175,6 +104279,11 @@ const OutboundAppButton = React__default.default.forwardRef(({ children, label,
 const TrustedDevices = React__default.default.forwardRef(({ emptyState, data, ...props }, ref) => (React__default.default.createElement("descope-trusted-devices", { data: data ? JSON.stringify(data) : undefined, ...props, ref: ref },
     React__default.default.createElement("div", { slot: "empty-state" }, emptyState))));
 
+const Honeypot = React__default.default.forwardRef((props, ref) => {
+    return (React__default.default.createElement("descope-ponyhot", { ref: ref },
+        React__default.default.createElement("input", { ...props })));
+});
+
 const globalsThemeToStyle = index_cjsExports.globalsThemeToStyle;
 const createComponentsTheme = index_cjsExports.createComponentsTheme;
 const themeToStyle = index_cjsExports.themeToStyle;
@@ -104225,6 +104334,8 @@ exports.GridSelectionColumn = GridSelectionColumn;
 exports.GridTextColumn = GridTextColumn;
 exports.Hcaptcha = Hcaptcha;
 exports.HcaptchaClass = HcaptchaClass;
+exports.Honeypot = Honeypot;
+exports.HoneypotClass = HoneypotClass;
 exports.HybridField = HybridField;
 exports.HybridFieldClass = HybridFieldClass;
 exports.IconClass = IconClass;