@descope/web-components-ui 1.109.0 → 1.110.0

package/dist/index.esm.js

@@ -5,6 +5,7 @@ import 'element-internals-polyfill';
 import '@vaadin/checkbox';
 import '@vaadin/text-field';
 import '@vaadin/combo-box';
+import DOMPurify from 'dompurify';
 import '@vaadin/button';
 import '@vaadin/popover/src/vaadin-popover';
 import '@vaadin/icons';
@@ -24,7 +25,6 @@ import '@vaadin/notification';
 import '@vaadin/custom-field';
 import '@vaadin/radio-group';
 import '@vaadin/avatar';
-import DOMPurify from 'dompurify';
 import MarkdownIt from 'markdown-it';
 import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
 import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common';
@@ -5190,12 +5190,206 @@ const ComboBoxClass = compose(
 
 customElements.define(componentName$1b, ComboBoxClass);
 
-const componentName$1a = getComponentName('icon');
+const getFileExtension = (path) => {
+  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
+  return match ? match[1] : null;
+};
 
-const IconClass = compose(
+const base64Prefix = 'data:image/svg+xml;base64,';
+
+const isBase64Svg = (src) => src.startsWith(base64Prefix);
+
+const createImgEle = (src, altText) => {
+  const ele = document.createElement('img');
+  ele.setAttribute('src', src);
+  ele.setAttribute('alt', altText);
+  return ele;
+};
+
+const createSvgEle = (text) => {
+  // we want to purify the SVG to avoid XSS attacks
+  const clean = DOMPurify.sanitize(text, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    // allow image to render
+    ADD_TAGS: ['image'],
+    // forbid interactiviy via `use` tags (which are sanitized by default)
+    FORBID_TAGS: ['defs']
+  });
+
+  const parser = new DOMParser();
+  const ele = parser
+    .parseFromString(clean, 'image/svg+xml')
+    .querySelector('svg');
+  return ele;
+};
+
+const createImage = async (src, altText) => {
+  try {
+    let ele;
+    if (isBase64Svg(src)) {
+      // handle base64 source
+      const svgXml = atob(src.slice(base64Prefix.length));
+      ele = createSvgEle(svgXml);
+    } else if (getFileExtension(src) === 'svg') {
+      // handle urls
+      const fetchedSrc = await fetch(src);
+      const text = await fetchedSrc.text();
+      ele = createSvgEle(text);
+    } else {
+      // handle binary
+      ele = createImgEle(src, altText);
+    }
+
+    ele.style.setProperty('max-width', '100%');
+    ele.style.setProperty('max-height', '100%');
+
+    return ele;
+  } catch {
+    return null;
+  }
+};
+
+/* eslint-disable no-use-before-define */
+
+const componentName$1a = getComponentName('image');
+
+const srcAttrs = ['src', 'src-dark'];
+
+class RawImage extends createBaseClass({
+  componentName: componentName$1a,
+  baseSelector: 'slot',
+}) {
+  static get observedAttributes() {
+    return srcAttrs;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<slot></slot>
+	`;
+
+    injectStyle(
+      `
+			:host {
+				display: inline-flex;
+			}
+      :host > slot {
+        width: 100%;
+        height: 100%;
+				box-sizing: border-box;
+				display: flex;
+				overflow: hidden;
+			}
+
+      ::slotted(*) {
+        width: 100%;
+			}
+
+      .hidden {
+        display: none;
+      }
+      `,
+      this,
+    );
+  }
+
+  init() {
+    super.init?.();
+    this.toggleVisibility(this.src);
+  }
+
+  onThemeChange() {
+    this.renderImage();
+  }
+
+  toggleVisibility(isVisible) {
+    if (isVisible) {
+      this.classList.remove('hidden');
+    } else {
+      this.classList.add('hidden');
+    }
+  }
+
+  get altText() {
+    return this.getAttribute('alt') || '';
+  }
+
+  get legacySrc() {
+    return this.getAttribute('src');
+  }
+
+  get themeSrc() {
+    return this.getAttribute(`src-${this.currentThemeName}`);
+  }
+
+  get src() {
+    return this.themeSrc || this.legacySrc;
+  }
+
+  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
+  // with the value from the `st-fill` attribute
+  // eslint-disable-next-line class-methods-use-this
+  updateFillColor(node) {
+    // set fill to root node and all its relevant selectors
+    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
+
+    elementsToReplace.forEach((ele) => {
+      ele.setAttribute(
+        'fill',
+        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`,
+      );
+    });
+  }
+
+  renderImage() {
+    this.toggleVisibility(this.src);
+
+    createImage(this.src, this.altText).then((res) => {
+      this.innerHTML = '';
+      if (res) {
+        this.updateFillColor(res);
+        this.appendChild(res);
+      }
+    });
+  }
+
+  // render only when src attribute matches current theme
+  shouldRender(src) {
+    const srcVal = this.getAttribute(src);
+    return this.src === srcVal;
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue === newValue) return;
+
+    if (this.shouldRender(attrName)) {
+      this.renderImage();
+    }
+  }
+}
+
+const ImageClass = compose(
   createStyleMixin({
     mappings: {
       fill: {},
+      height: { selector: () => ':host' },
+      width: { selector: () => ':host' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawImage);
+
+const componentName$19 = getComponentName('icon');
+
+const IconClass = compose(
+  createStyleMixin({
+    mappings: {
+      fill: [{}, { property: ImageClass.cssVarList.fill }],
     },
   }),
   draggableMixin,
@@ -5210,7 +5404,7 @@ const IconClass = compose(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class'],
-    componentName: componentName$1a,
+    componentName: componentName$19,
   }),
 );
 
@@ -5225,7 +5419,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$19 = getComponentName('button');
+const componentName$18 = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -5301,9 +5495,9 @@ const ButtonClass = compose(
 
       labelTextColor: { property: 'color' },
       iconColor: {
-        selector: () => `::slotted(*)`,
-        property: IconClass.cssVarList.fill,
-      },
+		selector: () => `::slotted(*)`,
+		property: IconClass.cssVarList.fill
+	  },
       labelTextDecoration: { ...label$9, property: 'text-decoration' },
       labelSpacing: { ...label$9, property: 'gap' },
       textAlign: { ...label$9, property: 'justify-content', fallback: 'center' },
@@ -5341,7 +5535,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$19,
+    componentName: componentName$18,
   })
 );
 
@@ -5378,7 +5572,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$19, ButtonClass);
+customElements.define(componentName$18, ButtonClass);
 
 const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
 
@@ -5721,7 +5915,7 @@ const nextMonth = (timestamp) => {
   return date;
 };
 
-const componentName$18 = getComponentName$1('calendar');
+const componentName$17 = getComponentName$1('calendar');
 
 const observedAttrs$5 = [
   'initial-value',
@@ -5738,7 +5932,7 @@ const observedAttrs$5 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$c = createBaseInputClass$1({ componentName: componentName$18, baseSelector: 'div' });
+const BaseInputClass$c = createBaseInputClass$1({ componentName: componentName$17, baseSelector: 'div' });
 
 class RawCalendar extends BaseInputClass$c {
   static get observedAttributes() {
@@ -6359,7 +6553,7 @@ const CalendarClass = compose$1(
   componentNameValidationMixin$1
 )(RawCalendar);
 
-customElements.define(componentName$18, CalendarClass);
+customElements.define(componentName$17, CalendarClass);
 
 const {
   host: host$o,
@@ -6514,7 +6708,7 @@ var textFieldMappings = {
   inputIconColor: { ...inputIcon, property: 'color' },
 };
 
-const componentName$17 = getComponentName$1('text-field');
+const componentName$16 = getComponentName$1('text-field');
 
 const observedAttrs$4 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -6636,11 +6830,11 @@ const TextFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$17,
+    componentName: componentName$16,
   })
 );
 
-customElements.define(componentName$17, TextFieldClass);
+customElements.define(componentName$16, 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
@@ -6760,12 +6954,12 @@ class DateCounter {
   }
 }
 
-const componentName$16 = getComponentName$1('date-field');
+const componentName$15 = 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$b = createBaseInputClass$1({ componentName: componentName$16, baseSelector: BASE_SELECTOR });
+const BaseInputClass$b = createBaseInputClass$1({ componentName: componentName$15, baseSelector: BASE_SELECTOR });
 
 const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly', 'disable-calendar'];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
@@ -7648,12 +7842,12 @@ const DateFieldClass = compose$1(
   componentNameValidationMixin$1
 )(RawDateFieldClass);
 
-customElements.define(componentName$16, DateFieldClass);
+customElements.define(componentName$15, DateFieldClass);
 
-const componentName$15 = getComponentName('text');
+const componentName$14 = getComponentName('text');
 
 class RawText extends createBaseClass({
-  componentName: componentName$15,
+  componentName: componentName$14,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -7715,8 +7909,8 @@ const TextClass = compose(
   componentNameValidationMixin,
 )(RawText);
 
-const componentName$14 = getComponentName$1('divider');
-class RawDivider extends createBaseClass$1({ componentName: componentName$14, baseSelector: ':host > div' }) {
+const componentName$13 = getComponentName$1('divider');
+class RawDivider extends createBaseClass$1({ componentName: componentName$13, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -7819,11 +8013,11 @@ const DividerClass = compose$1(
   componentNameValidationMixin$1
 )(RawDivider);
 
-customElements.define(componentName$15, TextClass);
+customElements.define(componentName$14, TextClass);
 
-customElements.define(componentName$14, DividerClass);
+customElements.define(componentName$13, DividerClass);
 
-const componentName$13 = getComponentName$1('email-field');
+const componentName$12 = getComponentName$1('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -7892,11 +8086,11 @@ const EmailFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$13,
+    componentName: componentName$12,
   })
 );
 
-customElements.define(componentName$13, EmailFieldClass);
+customElements.define(componentName$12, EmailFieldClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -7952,37 +8146,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$12 = getComponentName$1('logo');
+const componentName$11 = getComponentName$1('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$12,
+  componentName: componentName$11,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$12, LogoClass);
+customElements.define(componentName$11, LogoClass);
 
-const componentName$11 = getComponentName$1('totp-image');
+const componentName$10 = getComponentName$1('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$11,
+  componentName: componentName$10,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$11, TotpImageClass);
+customElements.define(componentName$10, TotpImageClass);
 
-const componentName$10 = getComponentName$1('notp-image');
+const componentName$$ = getComponentName$1('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$10,
+  componentName: componentName$$,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$10, NotpImageClass);
+customElements.define(componentName$$, NotpImageClass);
 
-const componentName$$ = getComponentName$1('number-field');
+const componentName$_ = getComponentName$1('number-field');
 
 const NumberFieldClass = compose$1(
   createStyleMixin$1({
@@ -8016,11 +8210,11 @@ const NumberFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$$,
+    componentName: componentName$_,
   })
 );
 
-customElements.define(componentName$$, NumberFieldClass);
+customElements.define(componentName$_, NumberFieldClass);
 
 const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
 const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
@@ -8047,7 +8241,7 @@ const toggleMaskVisibility = (input, value) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$_ = getComponentName$1('passcode-internal');
+const componentName$Z = getComponentName$1('passcode-internal');
 
 const observedAttributes$6 = ['digits', 'loading'];
 
@@ -8060,7 +8254,7 @@ const forwardAttributes = [
   'aria-labelledby',
 ];
 
-const BaseInputClass$a = createBaseInputClass$1({ componentName: componentName$_, baseSelector: 'div' });
+const BaseInputClass$a = createBaseInputClass$1({ componentName: componentName$Z, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$a {
   static get observedAttributes() {
@@ -8274,7 +8468,7 @@ class PasscodeInternal extends BaseInputClass$a {
   }
 }
 
-const componentName$Z = getComponentName$1('passcode');
+const componentName$Y = getComponentName$1('passcode');
 
 const observedAttributes$5 = ['digits'];
 
@@ -8319,18 +8513,18 @@ const customMixin$c = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$_}
+      <${componentName$Z}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$_}>
+      ><slot></slot></${componentName$Z}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$_);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Z);
 
       forwardAttrs$1(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -8489,13 +8683,13 @@ const PasscodeClass = compose$1(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Z,
+    componentName: componentName$Y,
   })
 );
 
-customElements.define(componentName$_, PasscodeInternal);
+customElements.define(componentName$Z, PasscodeInternal);
 
-customElements.define(componentName$Z, PasscodeClass);
+customElements.define(componentName$Y, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -8536,7 +8730,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$Y = getComponentName$1('password');
+const componentName$X = getComponentName$1('password');
 
 const customMixin$b = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -8818,13 +9012,13 @@ const PasswordClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Y,
+    componentName: componentName$X,
   })
 );
 
-customElements.define(componentName$Y, PasswordClass);
+customElements.define(componentName$X, PasswordClass);
 
-const componentName$X = getComponentName$1('text-area');
+const componentName$W = getComponentName$1('text-area');
 
 const {
   host: host$j,
@@ -8906,11 +9100,11 @@ const TextAreaClass = compose$1(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$X,
+    componentName: componentName$W,
   })
 );
 
-customElements.define(componentName$X, TextAreaClass);
+customElements.define(componentName$W, TextAreaClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -10173,7 +10367,7 @@ const parsePhoneNumber = (val) => {
   return [countryCode, phoneNumber];
 };
 
-const componentName$W = getComponentName$1('phone-field-internal');
+const componentName$V = getComponentName$1('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -10187,7 +10381,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
 
-const BaseInputClass$9 = createBaseInputClass$1({ componentName: componentName$W, baseSelector: 'div' });
+const BaseInputClass$9 = createBaseInputClass$1({ componentName: componentName$V, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
   static get observedAttributes() {
@@ -10544,12 +10738,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
   }
 };
 
-customElements.define(componentName$W, PhoneFieldInternal$1);
+customElements.define(componentName$V, PhoneFieldInternal$1);
 
 const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$V = getComponentName$1('phone-field');
+const componentName$U = getComponentName$1('phone-field');
 
 const customMixin$a = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -10563,15 +10757,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$W}
+				<${componentName$V}
 					tabindex="-1"
 					slot="input"
-				></${componentName$W}>
+				></${componentName$V}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$W);
+      this.inputElement = this.shadowRoot.querySelector(componentName$V);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -10843,11 +11037,11 @@ const PhoneFieldClass = compose$1(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$V,
+    componentName: componentName$U,
   })
 );
 
-customElements.define(componentName$V, PhoneFieldClass);
+customElements.define(componentName$U, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
@@ -10859,7 +11053,7 @@ const matchingParenthesis = (val) => {
   return openParenMatches?.length === closeParenMatches?.length;
 };
 
-const componentName$U = getComponentName$1('phone-field-internal-input-box');
+const componentName$T = getComponentName$1('phone-field-internal-input-box');
 
 const observedAttributes$4 = [
   'disabled',
@@ -10875,7 +11069,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$8 = createBaseInputClass$1({ componentName: componentName$U, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass$1({ componentName: componentName$T, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$8 {
   static get observedAttributes() {
@@ -11121,11 +11315,11 @@ class PhoneFieldInternal extends BaseInputClass$8 {
   }
 }
 
-customElements.define(componentName$U, PhoneFieldInternal);
+customElements.define(componentName$T, PhoneFieldInternal);
 
 const textVars$1 = TextFieldClass.cssVarList;
 
-const componentName$T = getComponentName$1('phone-input-box-field');
+const componentName$S = getComponentName$1('phone-input-box-field');
 
 const customMixin$9 = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
@@ -11139,15 +11333,15 @@ const customMixin$9 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$U}
+				<${componentName$T}
 					tabindex="-1"
 					slot="input"
-				></${componentName$U}>
+				></${componentName$T}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$U);
+      this.inputElement = this.shadowRoot.querySelector(componentName$T);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -11351,20 +11545,20 @@ const PhoneFieldInputBoxClass = compose$1(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$T,
+    componentName: componentName$S,
   })
 );
 
-customElements.define(componentName$T, PhoneFieldInputBoxClass);
+customElements.define(componentName$S, PhoneFieldInputBoxClass);
 
-const componentName$S = getComponentName$1('new-password-internal');
+const componentName$R = 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$R = getComponentName$1('policy-validation');
+const componentName$Q = getComponentName$1('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -11374,7 +11568,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass$1({ componentName: componentName$R, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass$1({ componentName: componentName$Q, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -11646,7 +11840,7 @@ const PolicyValidationClass = compose$1(
   componentNameValidationMixin$1
 )(RawPolicyValidation);
 
-const componentName$Q = getComponentName$1('new-password');
+const componentName$P = getComponentName$1('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -11660,18 +11854,18 @@ const customMixin$8 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$S}
+			<${componentName$R}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$S}>
+      </${componentName$R}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$S);
+      this.inputElement = this.shadowRoot.querySelector(componentName$R);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -11855,11 +12049,11 @@ const NewPasswordClass = compose$1(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Q,
+    componentName: componentName$P,
   })
 );
 
-customElements.define(componentName$R, PolicyValidationClass);
+customElements.define(componentName$Q, PolicyValidationClass);
 
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -11899,7 +12093,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$7 = createBaseInputClass$1({ componentName: componentName$S, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass$1({ componentName: componentName$R, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -12145,16 +12339,16 @@ class NewPasswordInternal extends BaseInputClass$7 {
   }
 }
 
-customElements.define(componentName$S, NewPasswordInternal);
+customElements.define(componentName$R, NewPasswordInternal);
 
-customElements.define(componentName$Q, NewPasswordClass);
+customElements.define(componentName$P, NewPasswordClass);
 
-const componentName$P = getComponentName$1('recaptcha');
+const componentName$O = getComponentName$1('recaptcha');
 
 const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass$3 = createBaseClass$1({
-  componentName: componentName$P,
+  componentName: componentName$O,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass$3 {
@@ -12379,7 +12573,7 @@ class RawRecaptcha extends BaseClass$3 {
 
 const RecaptchaClass = compose$1(draggableMixin$1)(RawRecaptcha);
 
-customElements.define(componentName$P, RecaptchaClass);
+customElements.define(componentName$O, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -12393,7 +12587,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$O = getComponentName$1('upload-file');
+const componentName$N = getComponentName$1('upload-file');
 
 const observedAttributes$2 = [
   'title',
@@ -12408,7 +12602,7 @@ const observedAttributes$2 = [
   'icon',
 ];
 
-const BaseInputClass$6 = createBaseInputClass$1({ componentName: componentName$O, baseSelector: ':host > div' });
+const BaseInputClass$6 = createBaseInputClass$1({ componentName: componentName$N, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -12627,7 +12821,7 @@ const UploadFileClass = compose$1(
   componentNameValidationMixin$1
 )(RawUploadFile);
 
-customElements.define(componentName$O, UploadFileClass);
+customElements.define(componentName$N, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass$1({
@@ -12717,10 +12911,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$N = getComponentName$1('button-selection-group-internal');
+const componentName$M = getComponentName$1('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$N
+  componentName$M
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -12965,7 +13159,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$M = getComponentName$1('button-selection-group');
+const componentName$L = getComponentName$1('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -12974,19 +13168,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$N}
+      <${componentName$M}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$N}>
+      </${componentName$M}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$N);
+      this.inputElement = this.shadowRoot.querySelector(componentName$M);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -13011,16 +13205,16 @@ const ButtonSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$M,
+    componentName: componentName$L,
   })
 );
 
-customElements.define(componentName$N, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$M, ButtonSelectionGroupInternalClass);
 
-const componentName$L = getComponentName$1('button-selection-group-item');
+const componentName$K = getComponentName$1('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass$1({
-  componentName: componentName$L,
+  componentName: componentName$K,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -13131,14 +13325,14 @@ const ButtonSelectionGroupItemClass = compose$1(
   componentNameValidationMixin$1
 )(RawSelectItem);
 
-customElements.define(componentName$L, ButtonSelectionGroupItemClass);
+customElements.define(componentName$K, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$M, ButtonSelectionGroupClass);
+customElements.define(componentName$L, ButtonSelectionGroupClass);
 
-const componentName$K = getComponentName$1('button-multi-selection-group-internal');
+const componentName$J = getComponentName$1('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$K
+  componentName$J
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -13241,7 +13435,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$J = getComponentName$1('button-multi-selection-group');
+const componentName$I = getComponentName$1('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -13250,19 +13444,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$K}
+      <${componentName$J}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$K}>
+      </${componentName$J}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$K);
+      this.inputElement = this.shadowRoot.querySelector(componentName$J);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -13287,13 +13481,13 @@ const ButtonMultiSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$J,
+    componentName: componentName$I,
   })
 );
 
-customElements.define(componentName$K, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$J, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$J, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$I, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -13321,9 +13515,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$I = getComponentName$1('grid-text-column');
+const componentName$H = getComponentName$1('grid-text-column');
 
-customElements.define(componentName$I, GridTextColumnClass);
+customElements.define(componentName$H, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -13358,9 +13552,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$H = getComponentName$1('grid-custom-column');
+const componentName$G = getComponentName$1('grid-custom-column');
 
-customElements.define(componentName$H, GridCustomColumnClass);
+customElements.define(componentName$G, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -13419,9 +13613,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$G = getComponentName$1('grid-selection-column');
+const componentName$F = getComponentName$1('grid-selection-column');
 
-customElements.define(componentName$G, GridSelectionColumnClass);
+customElements.define(componentName$F, GridSelectionColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -13460,9 +13654,9 @@ class GridItemDetailsColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$F = getComponentName$1('grid-item-details-column');
+const componentName$E = getComponentName$1('grid-item-details-column');
 
-customElements.define(componentName$F, GridItemDetailsColumnClass);
+customElements.define(componentName$E, GridItemDetailsColumnClass);
 
 const decode = (input) => {
   const txt = document.createElement('textarea');
@@ -13474,9 +13668,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
 
-const componentName$E = getComponentName$1('code-snippet');
+const componentName$D = getComponentName$1('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName: componentName$E, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName: componentName$D, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -13710,7 +13904,7 @@ const CodeSnippetClass = compose$1(
   componentNameValidationMixin$1
 )(CodeSnippet$1);
 
-customElements.define(componentName$E, CodeSnippetClass);
+customElements.define(componentName$D, CodeSnippetClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -13785,7 +13979,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$D = getComponentName$1('grid');
+const componentName$C = getComponentName$1('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -14139,13 +14333,13 @@ const GridClass = compose$1(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$D,
+    componentName: componentName$C,
   })
 );
 
-customElements.define(componentName$D, GridClass);
+customElements.define(componentName$C, GridClass);
 
-const componentName$C = getComponentName$1('multi-select-combo-box');
+const componentName$B = getComponentName$1('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -14798,16 +14992,16 @@ const MultiSelectComboBoxClass = compose$1(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-    componentName: componentName$C,
+    componentName: componentName$B,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$C, MultiSelectComboBoxClass);
+customElements.define(componentName$B, MultiSelectComboBoxClass);
 
-const componentName$B = getComponentName$1('badge');
+const componentName$A = getComponentName$1('badge');
 
-class RawBadge extends createBaseClass$1({ componentName: componentName$B, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass$1({ componentName: componentName$A, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -14862,9 +15056,9 @@ const BadgeClass = compose$1(
   componentNameValidationMixin$1
 )(RawBadge);
 
-customElements.define(componentName$B, BadgeClass);
+customElements.define(componentName$A, BadgeClass);
 
-const componentName$A = getComponentName$1('modal');
+const componentName$z = getComponentName$1('modal');
 
 const observedAttrs$2 = ['opened'];
 
@@ -14988,11 +15182,11 @@ const ModalClass = compose$1(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$A,
+    componentName: componentName$z,
   })
 );
 
-customElements.define(componentName$A, ModalClass);
+customElements.define(componentName$z, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -15003,7 +15197,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName$1('notification-container'), NotificationContainerClass);
 
-const componentName$z = getComponentName$1('notification-card');
+const componentName$y = getComponentName$1('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -15111,13 +15305,13 @@ const NotificationCardClass = compose$1(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$z,
+    componentName: componentName$y,
   })
 );
 
-customElements.define(componentName$z, NotificationCardClass);
+customElements.define(componentName$y, NotificationCardClass);
 
-const componentName$y = getComponentName$1('notification');
+const componentName$x = getComponentName$1('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -15212,15 +15406,15 @@ const NotificationClass = compose$1(
   createProxy$1({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$y,
+    componentName: componentName$x,
   })
 );
 
-customElements.define(componentName$y, NotificationClass);
+customElements.define(componentName$x, NotificationClass);
 
-const componentName$x = getComponentName$1('mappings-field-internal');
+const componentName$w = getComponentName$1('mappings-field-internal');
 
-const BaseInputClass$5 = createBaseInputClass$1({ componentName: componentName$x, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass$1({ componentName: componentName$w, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$5 {
   #errorItem;
@@ -15467,7 +15661,7 @@ class MappingsFieldInternal extends BaseInputClass$5 {
   }
 }
 
-const componentName$w = getComponentName$1('mappings-field');
+const componentName$v = getComponentName$1('mappings-field');
 
 const customMixin$6 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -15496,14 +15690,14 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$x}
+      <${componentName$w}
         tabindex="-1"
-      ></${componentName$x}>
+      ></${componentName$w}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$x);
+      this.inputElement = this.shadowRoot.querySelector(componentName$w);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -15638,13 +15832,13 @@ const MappingsFieldClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$w,
+    componentName: componentName$v,
   })
 );
 
-customElements.define(componentName$x, MappingsFieldInternal);
+customElements.define(componentName$w, MappingsFieldInternal);
 
-const componentName$v = getComponentName$1('mapping-item');
+const componentName$u = getComponentName$1('mapping-item');
 
 const inputAttrs = [
   'size',
@@ -15657,7 +15851,7 @@ const inputAttrs = [
   'st-error-message-icon-padding',
 ];
 
-const BaseInputClass$4 = createBaseInputClass$1({ componentName: componentName$v, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass$1({ componentName: componentName$u, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -15812,17 +16006,17 @@ class MappingItem extends BaseInputClass$4 {
   }
 }
 
-customElements.define(componentName$v, MappingItem);
+customElements.define(componentName$u, MappingItem);
 
-customElements.define(componentName$w, MappingsFieldClass);
+customElements.define(componentName$v, MappingsFieldClass);
 
 var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$u = getComponentName$1('user-attribute');
+const componentName$t = getComponentName$1('user-attribute');
 class RawUserAttribute extends createBaseClass$1({
-  componentName: componentName$u,
+  componentName: componentName$t,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -16066,13 +16260,13 @@ const UserAttributeClass = compose$1(
   componentNameValidationMixin$1
 )(RawUserAttribute);
 
-customElements.define(componentName$u, UserAttributeClass);
+customElements.define(componentName$t, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$t = getComponentName$1('user-auth-method');
+const componentName$s = getComponentName$1('user-auth-method');
 class RawUserAuthMethod extends createBaseClass$1({
-  componentName: componentName$t,
+  componentName: componentName$s,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -16267,11 +16461,11 @@ const UserAuthMethodClass = compose$1(
   componentNameValidationMixin$1
 )(RawUserAuthMethod);
 
-customElements.define(componentName$t, UserAuthMethodClass);
+customElements.define(componentName$s, UserAuthMethodClass);
 
-const componentName$s = getComponentName$1('saml-group-mappings-internal');
+const componentName$r = getComponentName$1('saml-group-mappings-internal');
 
-const BaseInputClass$3 = createBaseInputClass$1({ componentName: componentName$s, baseSelector: '' });
+const BaseInputClass$3 = createBaseInputClass$1({ componentName: componentName$r, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -16397,7 +16591,7 @@ class SamlGroupMappingsInternal extends BaseInputClass$3 {
   }
 }
 
-const componentName$r = getComponentName$1('saml-group-mappings');
+const componentName$q = getComponentName$1('saml-group-mappings');
 
 const customMixin$5 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -16407,14 +16601,14 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$s}
+      <${componentName$r}
         tabindex="-1"
-      ></${componentName$s}>
+      ></${componentName$r}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$s);
+      this.inputElement = this.shadowRoot.querySelector(componentName$r);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -16498,15 +16692,15 @@ const SamlGroupMappingsClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$r,
+    componentName: componentName$q,
   })
 );
 
-customElements.define(componentName$s, SamlGroupMappingsInternal);
+customElements.define(componentName$r, SamlGroupMappingsInternal);
 
-customElements.define(componentName$r, SamlGroupMappingsClass);
+customElements.define(componentName$q, SamlGroupMappingsClass);
 
-const componentName$q = getComponentName$1('radio-button');
+const componentName$p = getComponentName$1('radio-button');
 
 const customMixin$4 = (superclass) =>
   class CustomMixin extends superclass {
@@ -16571,11 +16765,11 @@ const RadioButtonClass = compose$1(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$q,
+    componentName: componentName$p,
   })
 );
 
-const componentName$p = getComponentName$1('radio-group');
+const componentName$o = getComponentName$1('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -16590,12 +16784,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$q),
+        get: () => this.querySelectorAll(componentName$p),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) => {
-        return nodes.filter((node) => node.localName === componentName$q);
+        return nodes.filter((node) => node.localName === componentName$p);
       };
 
       // vaadin radio group missing some input properties
@@ -16745,13 +16939,13 @@ const RadioGroupClass = compose$1(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
-    componentName: componentName$p,
+    componentName: componentName$o,
     includeForwardProps: ['value'],
   })
 );
 
-customElements.define(componentName$p, RadioGroupClass);
-customElements.define(componentName$q, RadioButtonClass);
+customElements.define(componentName$o, RadioGroupClass);
+customElements.define(componentName$p, RadioButtonClass);
 
 const activeableMixin = (superclass) =>
   class ActiveableMixinClass extends superclass {
@@ -16768,7 +16962,7 @@ const activeableMixin = (superclass) =>
     }
   };
 
-const componentName$o = getComponentName$1('list-item');
+const componentName$n = getComponentName$1('list-item');
 
 const customMixin$3 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -16818,11 +17012,11 @@ const ListItemClass = compose$1(
   componentNameValidationMixin$1,
   customMixin$3,
   activeableMixin
-)(createBaseClass$1({ componentName: componentName$o, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$n, baseSelector: 'slot' }));
 
-const componentName$n = getComponentName$1('list');
+const componentName$m = getComponentName$1('list');
 
-class RawList extends createBaseClass$1({ componentName: componentName$n, baseSelector: '.wrapper' }) {
+class RawList extends createBaseClass$1({ componentName: componentName$m, baseSelector: '.wrapper' }) {
   static get observedAttributes() {
     return ['variant', 'readonly'];
   }
@@ -16970,12 +17164,12 @@ const ListClass = compose$1(
   componentNameValidationMixin$1
 )(RawList);
 
-customElements.define(componentName$n, ListClass);
-customElements.define(componentName$o, ListItemClass);
+customElements.define(componentName$m, ListClass);
+customElements.define(componentName$n, ListItemClass);
 
-const componentName$m = getComponentName('avatar');
+const componentName$l = getComponentName('avatar');
 class RawAvatar extends createBaseClass({
-  componentName: componentName$m,
+  componentName: componentName$l,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -17083,7 +17277,7 @@ const AvatarClass = compose(
   componentNameValidationMixin,
 )(RawAvatar);
 
-customElements.define(componentName$m, AvatarClass);
+customElements.define(componentName$l, AvatarClass);
 
 const defaultValidateSchema = () => true;
 const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
@@ -17184,7 +17378,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$l = getComponentName$1('apps-list');
+const componentName$k = getComponentName$1('apps-list');
 
 const limitAbbreviation = (str, limit = 2) =>
   str
@@ -17246,7 +17440,7 @@ const AppsListClass = compose$1(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty'],
-    componentName: componentName$l,
+    componentName: componentName$k,
     style: () => `
       :host {
         width: 100%;
@@ -17271,9 +17465,9 @@ const AppsListClass = compose$1(
   })
 );
 
-customElements.define(componentName$l, AppsListClass);
+customElements.define(componentName$k, AppsListClass);
 
-const componentName$k = getComponentName$1('scopes-list');
+const componentName$j = getComponentName$1('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer$1 = ({ id, desc, required = false }, _, ref) => {
@@ -17292,7 +17486,7 @@ const itemRenderer$1 = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass$1({ componentName: componentName$k, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass$1({ componentName: componentName$j, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -17400,13 +17594,13 @@ const ScopesListClass = compose$1(
   componentNameValidationMixin$1
 )(RawScopesList);
 
-customElements.define(componentName$k, ScopesListClass);
+customElements.define(componentName$j, ScopesListClass);
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$j = getComponentName$1('third-party-app-logo');
+const componentName$i = getComponentName$1('third-party-app-logo');
 class RawThirdPartyAppLogoClass extends createBaseClass$1({
-  componentName: componentName$j,
+  componentName: componentName$i,
   baseSelector: '.wrapper',
 }) {
   constructor() {
@@ -17503,205 +17697,11 @@ const ThirdPartyAppLogoClass = compose$1(
   componentNameValidationMixin$1
 )(RawThirdPartyAppLogoClass);
 
-const getFileExtension = (path) => {
-  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
-  return match ? match[1] : null;
-};
-
-const base64Prefix = 'data:image/svg+xml;base64,';
-
-const isBase64Svg = (src) => src.startsWith(base64Prefix);
-
-const createImgEle = (src, altText) => {
-  const ele = document.createElement('img');
-  ele.setAttribute('src', src);
-  ele.setAttribute('alt', altText);
-  return ele;
-};
-
-const createSvgEle = (text) => {
-  // we want to purify the SVG to avoid XSS attacks
-  const clean = DOMPurify.sanitize(text, {
-    USE_PROFILES: { svg: true, svgFilters: true },
-    // allow image to render
-    ADD_TAGS: ['image'],
-    // forbid interactiviy via `use` tags (which are sanitized by default)
-    FORBID_TAGS: ['defs']
-  });
-
-  const parser = new DOMParser();
-  const ele = parser
-    .parseFromString(clean, 'image/svg+xml')
-    .querySelector('svg');
-  return ele;
-};
-
-const createImage = async (src, altText) => {
-  try {
-    let ele;
-    if (isBase64Svg(src)) {
-      // handle base64 source
-      const svgXml = atob(src.slice(base64Prefix.length));
-      ele = createSvgEle(svgXml);
-    } else if (getFileExtension(src) === 'svg') {
-      // handle urls
-      const fetchedSrc = await fetch(src);
-      const text = await fetchedSrc.text();
-      ele = createSvgEle(text);
-    } else {
-      // handle binary
-      ele = createImgEle(src, altText);
-    }
-
-    ele.style.setProperty('max-width', '100%');
-    ele.style.setProperty('max-height', '100%');
-
-    return ele;
-  } catch {
-    return null;
-  }
-};
-
-/* eslint-disable no-use-before-define */
-
-const componentName$i = getComponentName('image');
-
-const srcAttrs = ['src', 'src-dark'];
-
-class RawImage extends createBaseClass({
-  componentName: componentName$i,
-  baseSelector: 'slot',
-}) {
-  static get observedAttributes() {
-    return srcAttrs;
-  }
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<slot></slot>
-	`;
-
-    injectStyle(
-      `
-			:host {
-				display: inline-flex;
-			}
-      :host > slot {
-        width: 100%;
-        height: 100%;
-				box-sizing: border-box;
-				display: flex;
-				overflow: hidden;
-			}
-
-      ::slotted(*) {
-        width: 100%;
-			}
-
-      .hidden {
-        display: none;
-      }
-      `,
-      this,
-    );
-  }
-
-  init() {
-    super.init?.();
-    this.toggleVisibility(this.src);
-  }
-
-  onThemeChange() {
-    this.renderImage();
-  }
-
-  toggleVisibility(isVisible) {
-    if (isVisible) {
-      this.classList.remove('hidden');
-    } else {
-      this.classList.add('hidden');
-    }
-  }
-
-  get altText() {
-    return this.getAttribute('alt') || '';
-  }
-
-  get legacySrc() {
-    return this.getAttribute('src');
-  }
-
-  get themeSrc() {
-    return this.getAttribute(`src-${this.currentThemeName}`);
-  }
-
-  get src() {
-    return this.themeSrc || this.legacySrc;
-  }
-
-  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
-  // with the value from the `st-fill` attribute
-  // eslint-disable-next-line class-methods-use-this
-  updateFillColor(node) {
-    // set fill to root node and all its relevant selectors
-    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
-
-    elementsToReplace.forEach((ele) => {
-      ele.setAttribute(
-        'fill',
-        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`,
-      );
-    });
-  }
-
-  renderImage() {
-    this.toggleVisibility(this.src);
-
-    createImage(this.src, this.altText).then((res) => {
-      this.innerHTML = '';
-      if (res) {
-        this.updateFillColor(res);
-        this.appendChild(res);
-      }
-    });
-  }
-
-  // render only when src attribute matches current theme
-  shouldRender(src) {
-    const srcVal = this.getAttribute(src);
-    return this.src === srcVal;
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-    if (oldValue === newValue) return;
-
-    if (this.shouldRender(attrName)) {
-      this.renderImage();
-    }
-  }
-}
-
-const ImageClass = compose(
-  createStyleMixin({
-    mappings: {
-      fill: {},
-      height: { selector: () => ':host' },
-      width: { selector: () => ':host' },
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-)(RawImage);
-
-customElements.define(componentName$i, ImageClass);
+customElements.define(componentName$1a, ImageClass);
 
-customElements.define(componentName$1a, IconClass);
+customElements.define(componentName$19, IconClass);
 
-customElements.define(componentName$j, ThirdPartyAppLogoClass);
+customElements.define(componentName$i, ThirdPartyAppLogoClass);
 
 const componentName$h = getComponentName$1('security-questions-setup');
 
@@ -19586,7 +19586,7 @@ const mode = {
   surface: globalRefs$G.colors.surface,
 };
 
-const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1({ mode }, componentName$19);
+const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1({ mode }, componentName$18);
 
 const button = {
   ...helperTheme$5,
@@ -20581,7 +20581,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$14
+  componentName$13
 );
 
 const divider = {
@@ -22120,7 +22120,7 @@ const compVars$2 = ListClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   { shadowColor: '#00000020' },
-  componentName$n
+  componentName$m
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$1;