@descope/web-components-ui 2.2.25 → 2.2.27

package/dist/index.esm.js

@@ -2100,9 +2100,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
 
 
-const componentName$1l = getComponentName$1('enriched-text');
+const componentName$1m = getComponentName$1('enriched-text');
 
-class EnrichedText extends createBaseClass$1({ componentName: componentName$1l, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass$1({ componentName: componentName$1m, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -4394,11 +4394,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$1k = getComponentName('boolean-field-internal');
+const componentName$1l = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'invalid', 'readonly'];
 
-const BaseInputClass$d = createBaseInputClass({ componentName: componentName$1k, baseSelector: 'div' });
+const BaseInputClass$d = createBaseInputClass({ componentName: componentName$1l, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$d {
   static get observedAttributes() {
@@ -4497,14 +4497,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$1k}
+				<${componentName$1l}
 					tabindex="-1"
 					slot="input"
-				></${componentName$1k}>
+				></${componentName$1l}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$1k);
+      this.inputElement = this.shadowRoot.querySelector(componentName$1l);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -4582,7 +4582,7 @@ descope-enriched-text {
 
 `;
 
-const componentName$1j = getComponentName('checkbox');
+const componentName$1k = getComponentName('checkbox');
 
 const {
   host: host$w,
@@ -4718,14 +4718,14 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$1j,
+    componentName: componentName$1k,
   })
 );
 
-const componentName$1i = getComponentName$1('text');
+const componentName$1j = getComponentName$1('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$1i,
+  componentName: componentName$1j,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -4791,9 +4791,9 @@ const TextClass = compose$1(
   componentNameValidationMixin$1,
 )(RawText);
 
-const componentName$1h = getComponentName$1('link');
+const componentName$1i = getComponentName$1('link');
 
-class RawLink extends createBaseClass$1({ componentName: componentName$1h, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass$1({ componentName: componentName$1i, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -4870,17 +4870,17 @@ const LinkClass = compose$1(
   componentNameValidationMixin$1
 )(RawLink);
 
-customElements.define(componentName$1i, TextClass);
+customElements.define(componentName$1j, TextClass);
 
-customElements.define(componentName$1h, LinkClass);
+customElements.define(componentName$1i, LinkClass);
 
-customElements.define(componentName$1l, EnrichedTextClass);
+customElements.define(componentName$1m, EnrichedTextClass);
 
-customElements.define(componentName$1k, BooleanInputInternal);
+customElements.define(componentName$1l, BooleanInputInternal);
 
-customElements.define(componentName$1j, CheckboxClass);
+customElements.define(componentName$1k, CheckboxClass);
 
-const componentName$1g = getComponentName('switch-toggle');
+const componentName$1h = getComponentName('switch-toggle');
 
 const {
   host: host$t,
@@ -5024,17 +5024,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$1g,
+    componentName: componentName$1h,
   })
 );
 
-customElements.define(componentName$1g, SwitchToggleClass);
+customElements.define(componentName$1h, SwitchToggleClass);
 
-const componentName$1f = getComponentName('loader-linear');
+const componentName$1g = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$1f, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$1g, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$1f;
+    return componentName$1g;
   }
 
   constructor() {
@@ -5099,11 +5099,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$1f, LoaderLinearClass);
+customElements.define(componentName$1g, LoaderLinearClass);
 
-const componentName$1e = getComponentName('loader-radial');
+const componentName$1f = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$1e, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$1f, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -5151,11 +5151,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$1e, LoaderRadialClass);
+customElements.define(componentName$1f, LoaderRadialClass);
 
-const componentName$1d = getComponentName('container');
+const componentName$1e = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$1d, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$1e, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -5218,9 +5218,9 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$1d, ContainerClass);
+customElements.define(componentName$1e, ContainerClass);
 
-const componentName$1c = getComponentName$1('combo-box');
+const componentName$1d = getComponentName$1('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -5876,12 +5876,12 @@ const ComboBoxClass = compose$1(
     // 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$1c,
+    componentName: componentName$1d,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-customElements.define(componentName$1c, ComboBoxClass);
+customElements.define(componentName$1d, ComboBoxClass);
 
 const getFileExtension = (path) => {
   const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
@@ -5944,12 +5944,12 @@ const createImage = async (src, altText) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$1b = getComponentName$1('image');
+const componentName$1c = getComponentName$1('image');
 
 const srcAttrs = ['src', 'src-dark'];
 
 class RawImage extends createBaseClass$1({
-  componentName: componentName$1b,
+  componentName: componentName$1c,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -6077,7 +6077,7 @@ const ImageClass = compose$1(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1a = getComponentName$1('icon');
+const componentName$1b = getComponentName$1('icon');
 
 const IconClass = compose$1(
   createStyleMixin$1({
@@ -6094,10 +6094,11 @@ const IconClass = compose$1(
     style: () => `
       :host {
         display: inline-flex;
+        max-height: 100%;
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1a,
+    componentName: componentName$1b,
   }),
 );
 
@@ -6112,7 +6113,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$19 = getComponentName$1('button');
+const componentName$1a = getComponentName$1('button');
 
 const resetStyles = `
 	:host {
@@ -6228,7 +6229,7 @@ const ButtonClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$19,
+    componentName: componentName$1a,
   })
 );
 
@@ -6265,7 +6266,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$19, ButtonClass);
+customElements.define(componentName$1a, ButtonClass);
 
 const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
 
@@ -6623,7 +6624,7 @@ const nextMonth = (epoch) => {
   return date;
 };
 
-const componentName$18 = getComponentName('calendar');
+const componentName$19 = getComponentName('calendar');
 
 const observedAttrs$5 = [
   'initial-value',
@@ -6640,7 +6641,7 @@ const observedAttrs$5 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$c = createBaseInputClass({ componentName: componentName$18, baseSelector: 'div' });
+const BaseInputClass$c = createBaseInputClass({ componentName: componentName$19, baseSelector: 'div' });
 
 class RawCalendar extends BaseInputClass$c {
   static get observedAttributes() {
@@ -7261,7 +7262,7 @@ const CalendarClass = compose(
   componentNameValidationMixin
 )(RawCalendar);
 
-customElements.define(componentName$18, CalendarClass);
+customElements.define(componentName$19, CalendarClass);
 
 const {
   host: host$p,
@@ -7416,7 +7417,7 @@ var textFieldMappings = {
   inputIconColor: { ...inputIcon, property: 'color' },
 };
 
-const componentName$17 = getComponentName('text-field');
+const componentName$18 = getComponentName('text-field');
 
 const observedAttrs$4 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -7538,11 +7539,11 @@ const TextFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$17,
+    componentName: componentName$18,
   })
 );
 
-customElements.define(componentName$17, TextFieldClass);
+customElements.define(componentName$18, TextFieldClass);
 
 // DateCounterClass allows us to add several counters to the input, and use them seperately.
 // For examele, we have a DayCounter, MonthCounter and YearCounter, which can each separately navigate
@@ -7662,12 +7663,12 @@ class DateCounter {
   }
 }
 
-const componentName$16 = getComponentName('date-field');
+const componentName$17 = getComponentName('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$b = createBaseInputClass({ componentName: componentName$16, baseSelector: BASE_SELECTOR });
+const BaseInputClass$b = createBaseInputClass({ componentName: componentName$17, baseSelector: BASE_SELECTOR });
 
 const dateFieldAttrs = [
   'format',
@@ -8581,10 +8582,10 @@ const DateFieldClass = compose(
   componentNameValidationMixin
 )(RawDateFieldClass);
 
-customElements.define(componentName$16, DateFieldClass);
+customElements.define(componentName$17, DateFieldClass);
 
-const componentName$15 = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$15, baseSelector: ':host > div' }) {
+const componentName$16 = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$16, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -8687,9 +8688,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$15, DividerClass);
+customElements.define(componentName$16, DividerClass);
 
-const componentName$14 = getComponentName('email-field');
+const componentName$15 = getComponentName('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -8758,11 +8759,11 @@ const EmailFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$14,
+    componentName: componentName$15,
   })
 );
 
-customElements.define(componentName$14, EmailFieldClass);
+customElements.define(componentName$15, EmailFieldClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -8818,37 +8819,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$13 = getComponentName('logo');
+const componentName$14 = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$13,
+  componentName: componentName$14,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$13, LogoClass);
+customElements.define(componentName$14, LogoClass);
 
-const componentName$12 = getComponentName('totp-image');
+const componentName$13 = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$12,
+  componentName: componentName$13,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$12, TotpImageClass);
+customElements.define(componentName$13, TotpImageClass);
 
-const componentName$11 = getComponentName('notp-image');
+const componentName$12 = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$11,
+  componentName: componentName$12,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$11, NotpImageClass);
+customElements.define(componentName$12, NotpImageClass);
 
-const componentName$10 = getComponentName('number-field');
+const componentName$11 = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -8882,11 +8883,11 @@ const NumberFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$10,
+    componentName: componentName$11,
   })
 );
 
-customElements.define(componentName$10, NumberFieldClass);
+customElements.define(componentName$11, NumberFieldClass);
 
 const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
 const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
@@ -8913,7 +8914,7 @@ const toggleMaskVisibility = (input, value) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$$ = getComponentName('passcode-internal');
+const componentName$10 = getComponentName('passcode-internal');
 
 const observedAttributes$6 = ['digits', 'loading'];
 
@@ -8926,7 +8927,7 @@ const forwardAttributes = [
   'aria-labelledby',
 ];
 
-const BaseInputClass$a = createBaseInputClass({ componentName: componentName$$, baseSelector: 'div' });
+const BaseInputClass$a = createBaseInputClass({ componentName: componentName$10, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$a {
   static get observedAttributes() {
@@ -9140,7 +9141,7 @@ class PasscodeInternal extends BaseInputClass$a {
   }
 }
 
-const componentName$_ = getComponentName('passcode');
+const componentName$$ = getComponentName('passcode');
 
 const observedAttributes$5 = ['digits'];
 
@@ -9185,18 +9186,18 @@ const customMixin$c = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$$}
+      <${componentName$10}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$$}>
+      ><slot></slot></${componentName$10}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$$);
+      this.inputElement = this.shadowRoot.querySelector(componentName$10);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['digits', 'size', 'loading', 'disabled'],
@@ -9359,13 +9360,13 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$_,
+    componentName: componentName$$,
   })
 );
 
-customElements.define(componentName$$, PasscodeInternal);
+customElements.define(componentName$10, PasscodeInternal);
 
-customElements.define(componentName$_, PasscodeClass);
+customElements.define(componentName$$, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -9406,7 +9407,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$Z = getComponentName('password');
+const componentName$_ = getComponentName('password');
 
 const customMixin$b = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -9690,13 +9691,13 @@ const PasswordClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$Z,
+    componentName: componentName$_,
   })
 );
 
-customElements.define(componentName$Z, PasswordClass);
+customElements.define(componentName$_, PasswordClass);
 
-const componentName$Y = getComponentName('text-area');
+const componentName$Z = getComponentName('text-area');
 
 const {
   host: host$k,
@@ -9779,11 +9780,11 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$Y,
+    componentName: componentName$Z,
   })
 );
 
-customElements.define(componentName$Y, TextAreaClass);
+customElements.define(componentName$Z, TextAreaClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -11046,7 +11047,7 @@ const parsePhoneNumber = (val) => {
   return [countryCode, phoneNumber];
 };
 
-const componentName$X = getComponentName('phone-field-internal');
+const componentName$Y = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -11060,7 +11061,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
 
-const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$X, baseSelector: 'div' });
+const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$Y, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
   static get observedAttributes() {
@@ -11421,12 +11422,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
   }
 };
 
-customElements.define(componentName$X, PhoneFieldInternal$1);
+customElements.define(componentName$Y, PhoneFieldInternal$1);
 
 const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$W = getComponentName('phone-field');
+const componentName$X = getComponentName('phone-field');
 
 const customMixin$a = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -11440,15 +11441,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$X}
+				<${componentName$Y}
 					tabindex="-1"
 					slot="input"
-				></${componentName$X}>
+				></${componentName$Y}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$X);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Y);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -11721,11 +11722,11 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$W,
+    componentName: componentName$X,
   })
 );
 
-customElements.define(componentName$W, PhoneFieldClass);
+customElements.define(componentName$X, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
@@ -11737,7 +11738,7 @@ const matchingParenthesis = (val) => {
   return openParenMatches?.length === closeParenMatches?.length;
 };
 
-const componentName$V = getComponentName('phone-field-internal-input-box');
+const componentName$W = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$4 = [
   'disabled',
@@ -11753,7 +11754,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$V, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$W, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$8 {
   static get observedAttributes() {
@@ -12001,11 +12002,11 @@ class PhoneFieldInternal extends BaseInputClass$8 {
   }
 }
 
-customElements.define(componentName$V, PhoneFieldInternal);
+customElements.define(componentName$W, PhoneFieldInternal);
 
 const textVars$1 = TextFieldClass.cssVarList;
 
-const componentName$U = getComponentName('phone-input-box-field');
+const componentName$V = getComponentName('phone-input-box-field');
 
 const customMixin$9 = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
@@ -12019,15 +12020,15 @@ const customMixin$9 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$V}
+				<${componentName$W}
 					tabindex="-1"
 					slot="input"
-				></${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);
 
       syncAttrs$1(this, this.inputElement, { includeAttrs: ['has-value'] });
 
@@ -12234,20 +12235,20 @@ const PhoneFieldInputBoxClass = compose(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$U,
+    componentName: componentName$V,
   })
 );
 
-customElements.define(componentName$U, PhoneFieldInputBoxClass);
+customElements.define(componentName$V, PhoneFieldInputBoxClass);
 
-const componentName$T = getComponentName('new-password-internal');
+const componentName$U = getComponentName('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$S = getComponentName('policy-validation');
+const componentName$T = getComponentName('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -12257,7 +12258,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$S, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$T, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -12529,7 +12530,7 @@ const PolicyValidationClass = compose(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$R = getComponentName('new-password');
+const componentName$S = getComponentName('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -12543,18 +12544,18 @@ const customMixin$8 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$T}
+			<${componentName$U}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$T}>
+      </${componentName$U}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$T);
+      this.inputElement = this.shadowRoot.querySelector(componentName$U);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -12739,11 +12740,11 @@ const NewPasswordClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$R,
+    componentName: componentName$S,
   })
 );
 
-customElements.define(componentName$S, PolicyValidationClass);
+customElements.define(componentName$T, PolicyValidationClass);
 
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -12783,7 +12784,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$T, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$U, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -13029,21 +13030,21 @@ class NewPasswordInternal extends BaseInputClass$7 {
   }
 }
 
-customElements.define(componentName$T, NewPasswordInternal);
+customElements.define(componentName$U, NewPasswordInternal);
 
-customElements.define(componentName$R, NewPasswordClass);
+customElements.define(componentName$S, NewPasswordClass);
 
-const componentName$Q = getComponentName('recaptcha');
+const componentName$R = getComponentName('recaptcha');
 
 const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise'];
 
-const BaseClass$6 = createBaseClass({
-  componentName: componentName$Q,
+const BaseClass$7 = createBaseClass({
+  componentName: componentName$R,
   baseSelector: ':host > div',
 });
-class RawRecaptcha extends BaseClass$6 {
+class RawRecaptcha extends BaseClass$7 {
   static get observedAttributes() {
-    return observedAttributes$3.concat(BaseClass$6.observedAttributes || []);
+    return observedAttributes$3.concat(BaseClass$7.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -13263,7 +13264,7 @@ class RawRecaptcha extends BaseClass$6 {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$Q, RecaptchaClass);
+customElements.define(componentName$R, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -13277,7 +13278,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$P = getComponentName('upload-file');
+const componentName$Q = getComponentName('upload-file');
 
 const observedAttributes$2 = [
   'title',
@@ -13292,7 +13293,7 @@ const observedAttributes$2 = [
   'icon',
 ];
 
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$P, baseSelector: ':host > div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$Q, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -13511,7 +13512,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$P, UploadFileClass);
+customElements.define(componentName$Q, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -13601,10 +13602,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$O = getComponentName('button-selection-group-internal');
+const componentName$P = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$O
+  componentName$P
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -13849,7 +13850,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$N = getComponentName('button-selection-group');
+const componentName$O = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -13858,19 +13859,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$O}
+      <${componentName$P}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${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(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -13895,16 +13896,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$N,
+    componentName: componentName$O,
   })
 );
 
-customElements.define(componentName$O, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$P, ButtonSelectionGroupInternalClass);
 
-const componentName$M = getComponentName('button-selection-group-item');
+const componentName$N = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$M,
+  componentName: componentName$N,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -14015,14 +14016,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$M, ButtonSelectionGroupItemClass);
+customElements.define(componentName$N, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$N, ButtonSelectionGroupClass);
+customElements.define(componentName$O, ButtonSelectionGroupClass);
 
-const componentName$L = getComponentName('button-multi-selection-group-internal');
+const componentName$M = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$L
+  componentName$M
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -14125,7 +14126,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$K = getComponentName('button-multi-selection-group');
+const componentName$L = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -14134,19 +14135,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$L}
+      <${componentName$M}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$L}>
+      </${componentName$M}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$L);
+      this.inputElement = this.shadowRoot.querySelector(componentName$M);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -14171,13 +14172,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$K,
+    componentName: componentName$L,
   })
 );
 
-customElements.define(componentName$L, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$M, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$K, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$L, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -14205,9 +14206,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$J = getComponentName('grid-text-column');
+const componentName$K = getComponentName('grid-text-column');
 
-customElements.define(componentName$J, GridTextColumnClass);
+customElements.define(componentName$K, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -14242,9 +14243,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$I = getComponentName('grid-custom-column');
+const componentName$J = getComponentName('grid-custom-column');
 
-customElements.define(componentName$I, GridCustomColumnClass);
+customElements.define(componentName$J, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -14303,9 +14304,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$H = getComponentName('grid-selection-column');
+const componentName$I = getComponentName('grid-selection-column');
 
-customElements.define(componentName$H, GridSelectionColumnClass);
+customElements.define(componentName$I, GridSelectionColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -14344,9 +14345,9 @@ class GridItemDetailsColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$G = getComponentName('grid-item-details-column');
+const componentName$H = getComponentName('grid-item-details-column');
 
-customElements.define(componentName$G, GridItemDetailsColumnClass);
+customElements.define(componentName$H, GridItemDetailsColumnClass);
 
 const decode = (input) => {
   const txt = document.createElement('textarea');
@@ -14358,9 +14359,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
 
-const componentName$F = getComponentName('code-snippet');
+const componentName$G = getComponentName('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -14594,7 +14595,7 @@ const CodeSnippetClass = compose(
   componentNameValidationMixin
 )(CodeSnippet$1);
 
-customElements.define(componentName$F, CodeSnippetClass);
+customElements.define(componentName$G, CodeSnippetClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -14669,7 +14670,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$E = getComponentName('grid');
+const componentName$F = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -15023,13 +15024,13 @@ const GridClass = compose(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
-customElements.define(componentName$E, GridClass);
+customElements.define(componentName$F, GridClass);
 
-const componentName$D = getComponentName('multi-select-combo-box');
+const componentName$E = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -15686,14 +15687,14 @@ const MultiSelectComboBoxClass = compose(
     // 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$D,
+    componentName: componentName$E,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$D, MultiSelectComboBoxClass);
+customElements.define(componentName$E, MultiSelectComboBoxClass);
 
-const componentName$C = getComponentName('modal');
+const componentName$D = getComponentName('modal');
 
 const observedAttrs$2 = ['opened'];
 
@@ -15842,11 +15843,11 @@ const ModalClass = compose(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$C,
+    componentName: componentName$D,
   })
 );
 
-customElements.define(componentName$C, ModalClass);
+customElements.define(componentName$D, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -15857,7 +15858,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$B = getComponentName('notification-card');
+const componentName$C = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -15965,13 +15966,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$B,
+    componentName: componentName$C,
   })
 );
 
-customElements.define(componentName$B, NotificationCardClass);
+customElements.define(componentName$C, NotificationCardClass);
 
-const componentName$A = getComponentName('notification');
+const componentName$B = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -16066,15 +16067,15 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
 
-customElements.define(componentName$A, NotificationClass);
+customElements.define(componentName$B, NotificationClass);
 
-const componentName$z = getComponentName('mappings-field-internal');
+const componentName$A = getComponentName('mappings-field-internal');
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$5 {
   #errorItem;
@@ -16321,7 +16322,7 @@ class MappingsFieldInternal extends BaseInputClass$5 {
   }
 }
 
-const componentName$y = getComponentName('mappings-field');
+const componentName$z = getComponentName('mappings-field');
 
 const customMixin$6 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -16350,14 +16351,14 @@ const customMixin$6 = (superclass) =>
       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(this, this.inputElement, {
         includeAttrs: [
@@ -16493,13 +16494,13 @@ const MappingsFieldClass = compose(
       'error-message',
       'style',
     ],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
-customElements.define(componentName$z, MappingsFieldInternal);
+customElements.define(componentName$A, MappingsFieldInternal);
 
-const componentName$x = getComponentName('mapping-item');
+const componentName$y = getComponentName('mapping-item');
 
 const inputAttrs = [
   'size',
@@ -16512,7 +16513,7 @@ const inputAttrs = [
   'st-error-message-icon-padding',
 ];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -16667,14 +16668,14 @@ class MappingItem extends BaseInputClass$4 {
   }
 }
 
-customElements.define(componentName$x, MappingItem);
+customElements.define(componentName$y, MappingItem);
 
-customElements.define(componentName$y, MappingsFieldClass);
+customElements.define(componentName$z, MappingsFieldClass);
 
-const componentName$w = getComponentName$1('badge');
+const componentName$x = getComponentName$1('badge');
 
 class RawBadge extends createBaseClass$1({
-  componentName: componentName$w,
+  componentName: componentName$x,
   baseSelector: ':host > div',
 }) {
   constructor() {
@@ -16741,9 +16742,9 @@ var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgi
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuMDAwMiAwLjk5MjE0OUMxMC4wMDAyIDEuMDE2MTUgMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNUw4LjIyNDE5IDMuMDA4MTVIMi45OTIxOUMyLjQ2NDE5IDMuMDA4MTUgMi4wMDgxOSAzLjQ0MDE1IDIuMDA4MTkgMy45OTIxNVYxMi4wMDgyQzIuMDA4MTkgMTIuNTM2MiAyLjQ0MDE5IDEyLjk5MjIgMi45OTIxOSAxMi45OTIySDUuNTM2MTlDNS44NDgxOSAxMy4wNDAyIDYuMTYwMTkgMTMuMDQwMiA2LjQ3MjE5IDEyLjk5MjJIMTEuMDA4MkMxMS41MzYyIDEyLjk5MjIgMTEuOTkyMiAxMi41NjAyIDExLjk5MjIgMTIuMDA4MlY3Ljc4NDE2TDEzLjkzNjIgNS42MjQxNUwxNC4wMDgyIDUuNjcyMTVWMTEuOTg0MkMxNC4wMDgyIDEzLjY2NDIgMTIuNjY0MiAxNS4wMDgyIDExLjAwODIgMTUuMDA4MkgzLjAxNjE5QzEuMzM2MTkgMTUuMDA4MiAtMC4wMDc4MTI1IDEzLjY2NDIgLTAuMDA3ODEyNSAxMS45ODQyVjMuOTkyMTVDLTAuMDA3ODEyNSAyLjMzNjE1IDEuMzM2MTkgMC45OTIxNDkgMy4wMTYxOSAwLjk5MjE0OUgxMC4wMDAyWk0xMS4yNzIyIDIuNjI0MTVMMTIuNjE2MiA0LjExMjE1TDcuNzIwMTkgOS42ODAxNkM3LjUwNDE5IDkuOTIwMTYgNi44MzIxOSAxMC4yMzIyIDUuNjgwMTkgMTAuNjE2MkM1LjY1NjE5IDEwLjY0MDIgNS42MDgxOSAxMC42NDAyIDUuNTYwMTkgMTAuNjE2MkM1LjQ2NDE5IDEwLjU5MjIgNS4zOTIxOSAxMC40NzIyIDUuNDQwMTkgMTAuMzc2MkM1Ljc1MjE5IDkuMjQ4MTYgNi4wNDAxOSA4LjU1MjE2IDYuMjU2MTkgOC4zMTIxNkwxMS4yNzIyIDIuNjI0MTVaTTExLjkyMDIgMS44NTYxNUwxMy4yODgyIDAuMzIwMTQ5QzEzLjY0ODIgLTAuMDg3ODUxNiAxNC4yNzIyIC0wLjExMTg1MiAxNC42ODAyIDAuMjcyMTQ5QzE1LjA4ODIgMC42MzIxNDkgMTUuMTEyMiAxLjI4MDE1IDE0Ljc1MjIgMS42ODgxNUwxMy4yNjQyIDMuMzY4MTVMMTEuOTIwMiAxLjg1NjE1WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPgo=";
 
-const componentName$v = getComponentName('user-attribute');
+const componentName$w = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$v,
+  componentName: componentName$w,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -17014,19 +17015,19 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
 
-customElements.define(componentName$w, BadgeClass);
+customElements.define(componentName$x, BadgeClass);
 
-customElements.define(componentName$1b, ImageClass);
+customElements.define(componentName$1c, ImageClass);
 
-customElements.define(componentName$1a, IconClass);
+customElements.define(componentName$1b, IconClass);
 
-customElements.define(componentName$v, UserAttributeClass);
+customElements.define(componentName$w, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$u = getComponentName('user-auth-method');
+const componentName$v = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$u,
+  componentName: componentName$v,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -17277,11 +17278,11 @@ const UserAuthMethodClass = compose(
   componentNameValidationMixin
 )(RawUserAuthMethod);
 
-customElements.define(componentName$u, UserAuthMethodClass);
+customElements.define(componentName$v, UserAuthMethodClass);
 
-const componentName$t = getComponentName('saml-group-mappings-internal');
+const componentName$u = getComponentName('saml-group-mappings-internal');
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$t, baseSelector: '' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$u, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -17407,7 +17408,7 @@ class SamlGroupMappingsInternal extends BaseInputClass$3 {
   }
 }
 
-const componentName$s = getComponentName('saml-group-mappings');
+const componentName$t = getComponentName('saml-group-mappings');
 
 const customMixin$5 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -17417,14 +17418,14 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$t}
+      <${componentName$u}
         tabindex="-1"
-      ></${componentName$t}>
+      ></${componentName$u}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$t);
+      this.inputElement = this.shadowRoot.querySelector(componentName$u);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -17509,15 +17510,15 @@ const SamlGroupMappingsClass = compose(
       'error-message',
       'style',
     ],
-    componentName: componentName$s,
+    componentName: componentName$t,
   })
 );
 
-customElements.define(componentName$t, SamlGroupMappingsInternal);
+customElements.define(componentName$u, SamlGroupMappingsInternal);
 
-customElements.define(componentName$s, SamlGroupMappingsClass);
+customElements.define(componentName$t, SamlGroupMappingsClass);
 
-const componentName$r = getComponentName('radio-button');
+const componentName$s = getComponentName('radio-button');
 
 const customMixin$4 = (superclass) =>
   class CustomMixin extends superclass {
@@ -17582,11 +17583,11 @@ const RadioButtonClass = compose(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data', 'style'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$r,
+    componentName: componentName$s,
   })
 );
 
-const componentName$q = getComponentName('radio-group');
+const componentName$r = getComponentName('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -17601,12 +17602,12 @@ const RadioGroupMixin = (superclass) =>
 
       // we are overriding vaadin children getter so it will run on our custom elements
       Object.defineProperty(this.baseElement, 'children', {
-        get: () => this.querySelectorAll(componentName$r),
+        get: () => this.querySelectorAll(componentName$s),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) => {
-        return nodes.filter((node) => node.localName === componentName$r);
+        return nodes.filter((node) => node.localName === componentName$s);
       };
 
       // vaadin radio group missing some input properties
@@ -17756,13 +17757,13 @@ const RadioGroupClass = compose(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
-    componentName: componentName$q,
+    componentName: componentName$r,
     includeForwardProps: ['value'],
   })
 );
 
-customElements.define(componentName$q, RadioGroupClass);
-customElements.define(componentName$r, RadioButtonClass);
+customElements.define(componentName$r, RadioGroupClass);
+customElements.define(componentName$s, RadioButtonClass);
 
 const defaultValidateSchema = () => true;
 const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
@@ -17863,7 +17864,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$p = getComponentName('scopes-list');
+const componentName$q = getComponentName('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer$4 = ({ id, desc, required = false }, _, ref) => {
@@ -17882,7 +17883,7 @@ const itemRenderer$4 = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass({ componentName: componentName$p, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass({ componentName: componentName$q, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -17990,7 +17991,7 @@ const ScopesListClass = compose(
   componentNameValidationMixin
 )(RawScopesList);
 
-const componentName$o = getComponentName$1('list-item');
+const componentName$p = getComponentName$1('list-item');
 
 const customMixin$3 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -18047,14 +18048,14 @@ const ListItemClass = compose$1(
   componentNameValidationMixin$1,
   customMixin$3,
   activeableMixin,
-)(createBaseClass$1({ componentName: componentName$o, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$p, baseSelector: 'slot' }));
 
-customElements.define(componentName$o, ListItemClass);
+customElements.define(componentName$p, ListItemClass);
 
-const componentName$n = getComponentName$1('list');
+const componentName$o = getComponentName$1('list');
 
 class RawList extends createBaseClass$1({
-  componentName: componentName$n,
+  componentName: componentName$o,
   baseSelector: '.wrapper',
 }) {
   static get observedAttributes() {
@@ -18225,15 +18226,15 @@ const ListClass = compose$1(
   componentNameValidationMixin$1,
 )(RawList);
 
-customElements.define(componentName$n, ListClass);
+customElements.define(componentName$o, ListClass);
 
-customElements.define(componentName$p, ScopesListClass);
+customElements.define(componentName$q, ScopesListClass);
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$m = getComponentName('third-party-app-logo');
+const componentName$n = getComponentName('third-party-app-logo');
 class RawThirdPartyAppLogoClass extends createBaseClass({
-  componentName: componentName$m,
+  componentName: componentName$n,
   baseSelector: '.wrapper',
 }) {
   constructor() {
@@ -18330,9 +18331,9 @@ const ThirdPartyAppLogoClass = compose(
   componentNameValidationMixin
 )(RawThirdPartyAppLogoClass);
 
-customElements.define(componentName$m, ThirdPartyAppLogoClass);
+customElements.define(componentName$n, ThirdPartyAppLogoClass);
 
-const componentName$l = getComponentName('security-questions-setup');
+const componentName$m = getComponentName('security-questions-setup');
 
 const attrsToSync$1 = [
   'full-width',
@@ -18351,7 +18352,7 @@ const attrsToSync$1 = [
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
-class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$l, baseSelector: 'div' }) {
+class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$m, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18461,7 +18462,7 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName: compone
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$l, 'Error parsing questions attribute', e);
+      console.error(componentName$m, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -18569,9 +18570,9 @@ const SecurityQuestionsSetupClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsSetup);
 
-customElements.define(componentName$l, SecurityQuestionsSetupClass);
+customElements.define(componentName$m, SecurityQuestionsSetupClass);
 
-const componentName$k = getComponentName('security-questions-verify');
+const componentName$l = getComponentName('security-questions-verify');
 
 const textFieldsAttrs = [
   'full-width',
@@ -18595,7 +18596,7 @@ const attrMappings = {
 const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 const attrsToReRender = ['questions'];
-class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$k, baseSelector: 'div' }) {
+class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$l, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18669,7 +18670,7 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName: compon
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$k, 'Error parsing questions attribute', e);
+      console.error(componentName$l, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -18804,7 +18805,7 @@ const SecurityQuestionsVerifyClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsVerify);
 
-customElements.define(componentName$k, SecurityQuestionsVerifyClass);
+customElements.define(componentName$l, SecurityQuestionsVerifyClass);
 
 const NUMERIC_RE = /^\d+$/;
 
@@ -18812,7 +18813,7 @@ const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceA
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-const componentName$j = getComponentName('hybrid-field');
+const componentName$k = getComponentName('hybrid-field');
 
 const attrs = {
   shared: [
@@ -18876,12 +18877,12 @@ const EMAIL_FIELD = 'descope-email-field';
 const PHONE_FIELD = 'descope-phone-field';
 const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
-const BaseClass$5 = createBaseClass({
-  componentName: componentName$j,
+const BaseClass$6 = createBaseClass({
+  componentName: componentName$k,
   baseSelector: 'div',
 });
 
-class RawHybridField extends BaseClass$5 {
+class RawHybridField extends BaseClass$6 {
   #isReportedValidity = false;
 
   #selectionStart;
@@ -19190,11 +19191,11 @@ const HybridFieldClass = compose(
   componentNameValidationMixin
 )(RawHybridField);
 
-customElements.define(componentName$j, HybridFieldClass);
+customElements.define(componentName$k, HybridFieldClass);
 
-const componentName$i = getComponentName('alert');
+const componentName$j = getComponentName('alert');
 
-class RawAlert extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
+class RawAlert extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -19315,13 +19316,13 @@ const AlertClass = compose(
   componentNameValidationMixin
 )(RawAlert);
 
-customElements.define(componentName$i, AlertClass);
+customElements.define(componentName$j, AlertClass);
 
-const componentName$h = getComponentName('hcaptcha');
+const componentName$i = getComponentName('hcaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key'];
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$h, baseSelector: ':host > div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$i, baseSelector: ':host > div' });
 class RawHcaptcha extends BaseInputClass$2 {
   static get observedAttributes() {
     return observedAttributes$1.concat(BaseInputClass$2.observedAttributes || []);
@@ -19449,7 +19450,7 @@ const HcaptchaClass = compose(
   componentNameValidationMixin
 )(RawHcaptcha);
 
-customElements.define(componentName$h, HcaptchaClass);
+customElements.define(componentName$i, HcaptchaClass);
 
 const direction$1 = 'ltr';
 
@@ -19830,7 +19831,7 @@ const mode = {
   surface: globalRefs$H.colors.surface,
 };
 
-const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$19);
+const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1a);
 
 const button = {
   ...helperTheme$6,
@@ -19953,7 +19954,7 @@ var button$1 = /*#__PURE__*/Object.freeze({
   vars: vars$13
 });
 
-const componentName$g = getComponentName('input-wrapper');
+const componentName$h = getComponentName('input-wrapper');
 const globalRefs$G = getThemeRefs(globals$1);
 
 const [theme$2, refs$1, vars$12] = createHelperVars(
@@ -20075,7 +20076,7 @@ const [theme$2, refs$1, vars$12] = createHelperVars(
       backgroundColor: globalRefs$G.colors.surface.main,
     },
   },
-  componentName$g
+  componentName$h
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -20498,7 +20499,7 @@ const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$1d
+  componentName$1e
 );
 
 const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -20830,7 +20831,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$15
+  componentName$16
 );
 
 const divider = {
@@ -20981,7 +20982,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
       },
     },
   },
-  componentName$1e
+  componentName$1f
 );
 
 const loaderRadial = {
@@ -21021,7 +21022,7 @@ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   vars: vars$M
 });
 
-const componentName$f = getComponentName$1('input-wrapper');
+const componentName$g = getComponentName$1('input-wrapper');
 const globalRefs$v = getThemeRefs$1(globals);
 
 const [theme$1, refs] = createHelperVars$1(
@@ -21144,7 +21145,7 @@ const [theme$1, refs] = createHelperVars$1(
       backgroundColor: globalRefs$v.colors.surface.main,
     },
   },
-  componentName$f,
+  componentName$g,
 );
 
 const globalRefs$u = getThemeRefs$1(globals);
@@ -21822,9 +21823,9 @@ var badge$1 = /*#__PURE__*/Object.freeze({
   vars: vars$z
 });
 
-const componentName$e = getComponentName$1('avatar');
+const componentName$f = getComponentName$1('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$e,
+  componentName: componentName$f,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -22487,7 +22488,7 @@ var dateField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$m
 });
 
-const componentName$d = getComponentName$1('apps-list');
+const componentName$e = getComponentName$1('apps-list');
 
 const itemRenderer$3 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -22611,7 +22612,7 @@ const AppsListClass = compose$1(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$d,
+    componentName: componentName$e,
     style: () => `
       :host {
         width: 100%;
@@ -22716,7 +22717,7 @@ const compVars$3 = ListClass.cssVarList;
 
 const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$n,
+  componentName$o,
 );
 
 const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -23044,10 +23045,10 @@ var hcaptcha$1 = /*#__PURE__*/Object.freeze({
   vars: vars$c
 });
 
-const componentName$c = getComponentName$1('autocomplete-field-internal');
+const componentName$d = getComponentName$1('autocomplete-field-internal');
 
 const BaseInputClass$1 = createBaseInputClass$1({
-  componentName: componentName$c,
+  componentName: componentName$d,
   baseSelector: '',
 });
 const observedAttrs$1 = [];
@@ -23252,7 +23253,7 @@ class AutocompleteFieldInternal extends BaseInputClass$1 {
   }
 }
 
-const componentName$b = getComponentName$1('autocomplete-field');
+const componentName$c = getComponentName$1('autocomplete-field');
 
 const customMixin$1 = (superclass) =>
   class AutocompleteFieldMixinClass extends superclass {
@@ -23273,15 +23274,15 @@ const customMixin$1 = (superclass) =>
       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$1(this, this.inputElement, {
@@ -23400,7 +23401,7 @@ const AutocompleteFieldClass = compose$1(
     }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$b,
+    componentName: componentName$c,
   }),
 );
 
@@ -23654,7 +23655,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-const componentName$a = getComponentName$1('address-field-internal');
+const componentName$b = getComponentName$1('address-field-internal');
 
 const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -23665,7 +23666,7 @@ const CONNECTOR_CLASSES = {
 };
 
 const BaseInputClass = createBaseInputClass$1({
-  componentName: componentName$a,
+  componentName: componentName$b,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
@@ -23772,7 +23773,7 @@ const AddressFieldInternal = compose$1(
   connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 )(RawAddressFieldInternal);
 
-const componentName$9 = getComponentName$1('address-field');
+const componentName$a = getComponentName$1('address-field');
 
 const customMixin = (superclass) =>
   class AddressFieldMixinClass extends superclass {
@@ -23801,15 +23802,15 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$a}
+      <${componentName$b}
         tabindex="-1"
-      ></${componentName$a}>
+      ></${componentName$b}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$a,
+        componentName$b,
       );
 
       forwardAttrs$1(this, this.inputElement, {
@@ -23887,7 +23888,7 @@ const AddressFieldClass = compose$1(
     width: 100%;
   }
 
-  ${componentName$a} {
+  ${componentName$b} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -23895,12 +23896,12 @@ const AddressFieldClass = compose$1(
     max-width: 100%;
   }
 
-  ${componentName$a} ::slotted {
+  ${componentName$b} ::slotted {
     padding: 0;
   }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$9,
+    componentName: componentName$a,
   }),
 );
 
@@ -23940,24 +23941,24 @@ const formatTime = (ms = 0) => {
   return timeParts.join(':');
 };
 
-const componentName$8 = getComponentName$1('timer');
+const componentName$9 = getComponentName$1('timer');
 
 const observedAttributes = ['seconds', 'hide-icon', 'paused'];
 
-const BaseClass$4 = createBaseClass$1({
-  componentName: componentName$8,
+const BaseClass$5 = createBaseClass$1({
+  componentName: componentName$9,
   baseSelector: ':host > .wrapper',
 });
 
 const DEFAULT_INTERVAL = 1000;
 
-class RawTimer extends BaseClass$4 {
+class RawTimer extends BaseClass$5 {
   #timeRemains = 0;
 
   #intervalId;
 
   static get observedAttributes() {
-    return observedAttributes.concat(BaseClass$4.observedAttributes || []);
+    return observedAttributes.concat(BaseClass$5.observedAttributes || []);
   }
 
   constructor() {
@@ -24166,7 +24167,7 @@ var timer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$9
 });
 
-const componentName$7 = getComponentName$1('timer-button');
+const componentName$8 = getComponentName$1('timer-button');
 
 const buttonAttrs = [
   'button-variant',
@@ -24196,12 +24197,12 @@ const mapTimerAttrs = {
   'timer-paused': 'paused',
 };
 
-const BaseClass$3 = createBaseClass$1({
-  componentName: componentName$7,
+const BaseClass$4 = createBaseClass$1({
+  componentName: componentName$8,
   baseSelector: ':host > div',
 });
 
-class RawTimerButton extends BaseClass$3 {
+class RawTimerButton extends BaseClass$4 {
   constructor() {
     super();
 
@@ -24327,9 +24328,9 @@ var timerButton$1 = /*#__PURE__*/Object.freeze({
   vars: vars$8
 });
 
-const componentName$6 = getComponentName$1('password-strength');
+const componentName$7 = getComponentName$1('password-strength');
 class RawPasswordStrength extends createBaseClass$1({
-  componentName: componentName$6,
+  componentName: componentName$7,
   baseSelector: ':host > .wrapper',
 }) {
   static get observedAttributes() {
@@ -24532,10 +24533,10 @@ var passwordStrength$1 = /*#__PURE__*/Object.freeze({
 
 var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-const componentName$5 = getComponentName$1('collapsible-container');
+const componentName$6 = getComponentName$1('collapsible-container');
 
 class RawCollapsibleContainer extends createBaseClass$1({
-  componentName: componentName$5,
+  componentName: componentName$6,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -24770,7 +24771,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$5
+  componentName$6
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$1;
@@ -24881,7 +24882,7 @@ var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$6
 });
 
-const componentName$4 = getComponentName$1('recovery-codes');
+const componentName$5 = getComponentName$1('recovery-codes');
 
 const itemRenderer$2 = ({ value }, _, ref) => {
   return `
@@ -24892,7 +24893,7 @@ const itemRenderer$2 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$4,
+  componentName: componentName$5,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -25060,7 +25061,7 @@ var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
   vars: vars$5
 });
 
-const componentName$3 = getComponentName$1('outbound-apps');
+const componentName$4 = getComponentName$1('outbound-apps');
 
 const itemRenderer$1 = (
   { name, description, logo, appId, isConnected },
@@ -25105,12 +25106,12 @@ const itemRenderer$1 = (
 `;
 };
 
-const BaseClass$2 = createBaseClass$1({
-  componentName: componentName$3,
+const BaseClass$3 = createBaseClass$1({
+  componentName: componentName$4,
   baseSelector: 'descope-list',
 });
 
-class RawOutboundAppsClass extends BaseClass$2 {
+class RawOutboundAppsClass extends BaseClass$3 {
   constructor() {
     super();
 
@@ -25322,10 +25323,10 @@ var outboundApps$1 = /*#__PURE__*/Object.freeze({
   vars: vars$4
 });
 
-const componentName$2 = getComponentName$1('outbound-app-button');
+const componentName$3 = getComponentName$1('outbound-app-button');
 
 class RawOutboundAppButton extends createBaseClass$1({
-  componentName: componentName$2,
+  componentName: componentName$3,
   baseSelector: ':host > descope-button',
 }) {
   static get observedAttributes() {
@@ -25507,7 +25508,7 @@ const getDeviceIcon = (deviceType) => {
   };
 };
 
-const componentName$1 = getComponentName$1('trusted-devices');
+const componentName$2 = getComponentName$1('trusted-devices');
 
 const itemRenderer = (
   { id, name, lastLoginDate, deviceType, isCurrent },
@@ -25595,12 +25596,12 @@ const itemRenderer = (
   return template;
 };
 
-const BaseClass$1 = createBaseClass$1({
-  componentName: componentName$1,
+const BaseClass$2 = createBaseClass$1({
+  componentName: componentName$2,
   baseSelector: ListClass.componentName,
 });
 
-class RawTrustedDevicesClass extends BaseClass$1 {
+class RawTrustedDevicesClass extends BaseClass$2 {
   constructor() {
     super();
 
@@ -25930,7 +25931,7 @@ var trustedDevices = /*#__PURE__*/Object.freeze({
   vars: vars$2
 });
 
-const componentName = getComponentName$1('tooltip');
+const componentName$1 = getComponentName$1('tooltip');
 
 const tooltipAttrs = [
   'text',
@@ -25940,14 +25941,14 @@ const tooltipAttrs = [
   'opened',
 ];
 
-const BaseClass = createBaseClass$1({
-  componentName,
+const BaseClass$1 = createBaseClass$1({
+  componentName: componentName$1,
   baseSelector: 'vaadin-tooltip',
 });
 
-class RawTooltip extends BaseClass {
+class RawTooltip extends BaseClass$1 {
   static get observedAttributes() {
-    return tooltipAttrs.concat(BaseClass.observedAttributes || []);
+    return tooltipAttrs.concat(BaseClass$1.observedAttributes || []);
   }
 
   get isOpened() {
@@ -26180,7 +26181,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName
+  componentName$1
 );
 
 const { shadowColor } = helperRefs;
@@ -26364,41 +26365,145 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-customElements.define(componentName$c, AutocompleteFieldInternal);
+customElements.define(componentName$d, AutocompleteFieldInternal);
+
+customElements.define(componentName$c, AutocompleteFieldClass);
+
+customElements.define(componentName$b, AddressFieldInternal);
+
+customElements.define(componentName$a, AddressFieldClass);
+
+customElements.define(componentName$f, AvatarClass);
+
+customElements.define(componentName$e, AppsListClass);
+
+customElements.define(componentName$6, CollapsibleContainerClass);
+
+// NOTICE: This component registers with a DIFFERENT name than its file name
+const componentName = getComponentName$1('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);
+      });
+    };
 
-customElements.define(componentName$b, AutocompleteFieldClass);
+    events.forEach((event) => {
+      this.input.addEventListener(event, fillHoneypot);
+    });
+  }
 
-customElements.define(componentName$a, AddressFieldInternal);
+  // Intercept direct value assignments to catch bots that bypass events
+  #setupValueInterceptor() {
+    const originalDescriptor = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    );
 
-customElements.define(componentName$9, AddressFieldClass);
+    Object.defineProperty(this.input, 'value', {
+      get() {
+        return originalDescriptor.get.call(this);
+      },
+      set(newValue) {
+        const currentValue = originalDescriptor.get.call(this);
 
-customElements.define(componentName$e, AvatarClass);
+        // 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;
+    });
+  }
+}
 
-customElements.define(componentName$d, AppsListClass);
+const HoneypotClass = compose$1(componentNameValidationMixin$1)(RawHoneypot);
 
-customElements.define(componentName$5, CollapsibleContainerClass);
+customElements.define(componentName, HoneypotClass);
 
-customElements.define(componentName$2, OutboundAppButtonClass);
+customElements.define(componentName$3, OutboundAppButtonClass);
 
-customElements.define(componentName$3, OutboundAppsClass);
+customElements.define(componentName$4, OutboundAppsClass);
 
-customElements.define(componentName$6, PasswordStrengthClass);
+customElements.define(componentName$7, PasswordStrengthClass);
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   PasswordStrengthClass: PasswordStrengthClass,
-  componentName: componentName$6
+  componentName: componentName$7
 });
 
-customElements.define(componentName$4, RecoveryCodesClass);
+customElements.define(componentName$5, RecoveryCodesClass);
 
-customElements.define(componentName$8, TimerClass);
+customElements.define(componentName$9, TimerClass);
 
-customElements.define(componentName$7, TimerButtonClass);
+customElements.define(componentName$8, TimerButtonClass);
 
-customElements.define(componentName, TooltipClass);
+customElements.define(componentName$1, TooltipClass);
 
-customElements.define(componentName$1, TrustedDevicesClass);
+customElements.define(componentName$2, TrustedDevicesClass);
 
 const options = {
   translations: zxcvbnEnPackage.translations,
@@ -26416,5 +26521,5 @@ var calcScore = /*#__PURE__*/Object.freeze({
   options: options
 });
 
-export { AddressFieldClass, AlertClass, AppsListClass, AutocompleteFieldClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, CollapsibleContainerClass, ComboBoxClass, ContainerClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, HcaptchaClass, HybridFieldClass, IconClass, ImageClass, LinkClass, ListClass, ListItemClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, OutboundAppButtonClass, OutboundAppsClass, PasscodeClass, PasswordClass, PasswordStrengthClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, RecoveryCodesClass, SamlGroupMappingsClass, ScopesListClass, SecurityQuestionsSetupClass, SecurityQuestionsVerifyClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, ThirdPartyAppLogoClass, TimerButtonClass, TimerClass, TooltipClass, TotpImageClass, TrustedDevicesClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AddressFieldClass, AlertClass, AppsListClass, AutocompleteFieldClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, CollapsibleContainerClass, ComboBoxClass, ContainerClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, HcaptchaClass, HoneypotClass, HybridFieldClass, IconClass, ImageClass, LinkClass, ListClass, ListItemClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, OutboundAppButtonClass, OutboundAppsClass, PasscodeClass, PasswordClass, PasswordStrengthClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, RecoveryCodesClass, SamlGroupMappingsClass, ScopesListClass, SecurityQuestionsSetupClass, SecurityQuestionsVerifyClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, ThirdPartyAppLogoClass, TimerButtonClass, TimerClass, TooltipClass, TotpImageClass, TrustedDevicesClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map