@descope/web-components-ui 1.86.0 → 1.87.0

package/dist/index.esm.js

@@ -5,7 +5,6 @@ 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';
@@ -26,6 +25,7 @@ import '@vaadin/notification';
 import '@vaadin/custom-field';
 import '@vaadin/radio-group';
 import '@vaadin/avatar';
+import DOMPurify from 'dompurify';
 import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
 import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common';
 import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en';
@@ -1380,7 +1380,7 @@ const createProxy$1 = ({
   return ProxyClass;
 };
 
-const observedAttributes$8 = ['required', 'pattern'];
+const observedAttributes$7 = ['required', 'pattern'];
 
 const errorAttributes$1 = {
   valueMissing: 'data-errormessage-value-missing',
@@ -1399,7 +1399,7 @@ const inputValidationMixin$1 = (superclass) =>
     #validationTarget = validationTargetSymbol$1;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$8];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$7];
     }
 
     static get formAssociated() {
@@ -1571,7 +1571,7 @@ const inputValidationMixin$1 = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$8.includes(attrName)) {
+      if (observedAttributes$7.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -3220,8 +3220,10 @@ const createStyleMixin =
         this.#baseSelector = baseSelector ?? this.baseSelector;
         this.#getRootElement = getRootElement;
 
-        this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
-          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
+        this.#styleAttributes = Object.keys(
+          CustomStyleMixinClass.cssVarList,
+        ).map((key) =>
+          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key),
         );
       }
 
@@ -3231,14 +3233,23 @@ const createStyleMixin =
       }
 
       #onComponentThemeChange() {
-        this.#themeStyleEle.replaceSync(this.#componentTheme[this.#themeSection]);
+        this.#themeStyleEle.replaceSync(
+          this.#componentTheme[this.#themeSection],
+        );
+        this.currentThemeName = componentsThemeManager.currentThemeName;
+        // `onThemeChange` - This function is a hook for the component, so it can be implemented in the component
+        // and is executed once theme is change.
+        this.onThemeChange?.(componentsThemeManager.currentThemeName);
       }
 
       #createComponentTheme() {
-        this.#themeStyleEle = injectStyle('', this.#rootElement, { prepend: true });
-        this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
-          this.#onComponentThemeChange.bind(this)
-        );
+        this.#themeStyleEle = injectStyle('', this.#rootElement, {
+          prepend: true,
+        });
+        this.#disconnectThemeManager =
+          componentsThemeManager.onCurrentThemeChange(
+            this.#onComponentThemeChange.bind(this),
+          );
         this.#onComponentThemeChange();
       }
 
@@ -3246,10 +3257,13 @@ const createStyleMixin =
         if (this.#styleAttributes.length) {
           const classSpecifier = createClassSelectorSpecifier(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY
+            CSS_SELECTOR_SPECIFIER_MULTIPLY,
           );
 
-          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
+          this.#overrideStyleEle = injectStyle(
+            `:host(${classSpecifier}) {}`,
+            this.#rootElement,
+          );
         }
       }
 
@@ -3260,7 +3274,7 @@ const createStyleMixin =
 
         const varName = getCssVarName(
           componentName,
-          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), ''),
         );
 
         if (value) style?.setProperty(varName, value);
@@ -3283,7 +3297,7 @@ const createStyleMixin =
           const style = createStyle(
             kebabCaseJoin(componentName, this.#componentNameSuffix),
             this.#baseSelector,
-            mappings
+            mappings,
           );
 
           injectStyle(style, this.#rootElement, { prepend: true });
@@ -3291,13 +3305,16 @@ const createStyleMixin =
       }
 
       #addClassName(className) {
-        (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
+        (this.#rootElement.classList || this.#rootElement.host.classList).add(
+          className,
+        );
       }
 
       async init() {
         super.init?.();
         if (this.shadowRoot.isConnected) {
-          this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
+          this.#rootElement =
+            (await this.#getRootElement?.(this)) || this.shadowRoot;
 
           this.#addClassName(componentName);
 
@@ -3635,7 +3652,7 @@ const inputEventsDispatchingMixin = (superclass) =>
     }
   };
 
-const observedAttributes$7 = ['required', 'pattern'];
+const observedAttributes$6 = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
@@ -3654,7 +3671,7 @@ const inputValidationMixin = (superclass) =>
     #validationTarget = validationTargetSymbol;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$7];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$6];
     }
 
     static get formAssociated() {
@@ -3826,7 +3843,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$7.includes(attrName)) {
+      if (observedAttributes$6.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -5031,149 +5048,29 @@ const ComboBoxClass = compose(
 
 customElements.define(componentName$19, ComboBoxClass);
 
-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) => {
-  const ele = document.createElement('img');
-  ele.setAttribute('src', src);
-  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 } });
-
-  const parser = new DOMParser();
-  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');
-  return ele;
-};
-
-const createIcon = async (src) => {
-  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);
-    }
-
-    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$18 = getComponentName('icon');
 
-class RawIcon extends createBaseClass({ componentName: componentName$18, baseSelector: 'slot' }) {
-  static get observedAttributes() {
-    return ['src'];
-  }
-
-  #icon;
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<slot></slot>
-	`;
-
-    injectStyle(
-      `
-			:host > slot {
-				box-sizing: border-box;
-				width: 100%;
-				height: 100%;
-				display: flex;
-				overflow: hidden;
-			}
-			:host {
-				display: inline-block;
-			}
-  `,
-      this
-    );
-  }
-
-  init() {
-    super.init?.();
-    this.toggleVisibility(this.src);
-  }
-
-  toggleVisibility(isVisible) {
-    this.style.display = isVisible ? '' : 'none';
-  }
-
-  get src() {
-    return this.getAttribute('src');
-  }
-
-  // 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(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
-      );
-    });
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-    if (oldValue === newValue) return;
-
-    if (attrName === 'src') {
-      this.toggleVisibility(newValue);
-
-      createIcon(this.src).then((res) => {
-        this.innerHTML = '';
-        if (res) {
-          const clonedNode = res.cloneNode(true);
-          this.updateFillColor(clonedNode);
-          this.appendChild(clonedNode);
-        }
-      });
-    }
-  }
-}
-
 const IconClass = compose(
   createStyleMixin({
     mappings: {
       fill: {},
-      alignItems: {}
     },
   }),
   draggableMixin,
-  componentNameValidationMixin
-)(RawIcon);
+  componentNameValidationMixin,
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'descope-image',
+    style: () => `
+      :host {
+        display: inline-flex;
+      }
+      `,
+    excludeAttrsSync: ['tabindex', 'class'],
+    componentName: componentName$18,
+  }),
+);
 
 const clickableMixin = (superclass) =>
   class ClickableMixinClass extends superclass {
@@ -7858,7 +7755,7 @@ const toggleMaskVisibility = (input, value) => {
 
 const componentName$X = getComponentName$1('passcode-internal');
 
-const observedAttributes$6 = ['digits', 'loading'];
+const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = [
   'disabled',
@@ -7873,7 +7770,7 @@ const BaseInputClass$9 = createBaseInputClass$1({ componentName: componentName$X
 
 class PasscodeInternal extends BaseInputClass$9 {
   static get observedAttributes() {
-    return observedAttributes$6.concat(BaseInputClass$9.observedAttributes || []);
+    return observedAttributes$5.concat(BaseInputClass$9.observedAttributes || []);
   }
 
   constructor() {
@@ -8067,7 +7964,7 @@ class PasscodeInternal extends BaseInputClass$9 {
 
     // sync attributes to inputs
     if (oldValue !== newValue) {
-      if (observedAttributes$6.includes(attrName)) {
+      if (observedAttributes$5.includes(attrName)) {
         if (attrName === 'digits') {
           this.renderInputs();
         }
@@ -8085,12 +7982,12 @@ class PasscodeInternal extends BaseInputClass$9 {
 
 const componentName$W = getComponentName$1('passcode');
 
-const observedAttributes$5 = ['digits'];
+const observedAttributes$4 = ['digits'];
 
 const customMixin$c = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
-      return observedAttributes$5.concat(superclass.observedAttributes || []);
+      return observedAttributes$4.concat(superclass.observedAttributes || []);
     }
 
     get digits() {
@@ -8946,56 +8843,6 @@ const TextAreaClass = compose$1(
 
 customElements.define(componentName$T, TextAreaClass);
 
-const observedAttributes$4 = ['src', 'alt'];
-
-const componentName$S = getComponentName$1('image');
-
-const BaseClass$4 = createBaseClass$1({ componentName: componentName$S, baseSelector: ':host > img' });
-class RawImage extends BaseClass$4 {
-  static get observedAttributes() {
-    return observedAttributes$4.concat(BaseClass$4.observedAttributes || []);
-  }
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<img/>
-	`;
-
-    injectStyle(
-      `
-    :host > img {
-				width: 100%;
-				height: 100%
-			}
-			:host {
-				display: inline-flex;
-			}
-        `,
-      this
-    );
-  }
-
-  connectedCallback() {
-    super.connectedCallback?.();
-
-    forwardAttrs$1(this, this.baseElement, { includeAttrs: observedAttributes$4 });
-  }
-}
-
-const ImageClass = compose$1(
-  createStyleMixin$1({
-    mappings: {
-      height: { selector: () => ':host' },
-      width: { selector: () => ':host' },
-    },
-  }),
-  draggableMixin$1
-)(RawImage);
-
-customElements.define(componentName$S, ImageClass);
-
 var CountryCodes = [
   // United States should be the first option
   {
@@ -10257,7 +10104,7 @@ const parsePhoneNumber = (val) => {
   return [countryCode, phoneNumber];
 };
 
-const componentName$R = getComponentName$1('phone-field-internal');
+const componentName$S = getComponentName$1('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -10271,7 +10118,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
 
-const BaseInputClass$8 = createBaseInputClass$1({ componentName: componentName$R, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass$1({ componentName: componentName$S, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$8 {
   static get observedAttributes() {
@@ -10628,12 +10475,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$8 {
   }
 };
 
-customElements.define(componentName$R, PhoneFieldInternal$1);
+customElements.define(componentName$S, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$Q = getComponentName$1('phone-field');
+const componentName$R = getComponentName$1('phone-field');
 
 const customMixin$a = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -10647,15 +10494,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$R}
+				<${componentName$S}
 					tabindex="-1"
 					slot="input"
-				></${componentName$R}>
+				></${componentName$S}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$R);
+      this.inputElement = this.shadowRoot.querySelector(componentName$S);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -10927,11 +10774,11 @@ const PhoneFieldClass = compose$1(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Q,
+    componentName: componentName$R,
   })
 );
 
-customElements.define(componentName$Q, PhoneFieldClass);
+customElements.define(componentName$R, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
@@ -10943,7 +10790,7 @@ const matchingParenthesis = (val) => {
   return openParenMatches?.length === closeParenMatches?.length;
 };
 
-const componentName$P = getComponentName$1('phone-field-internal-input-box');
+const componentName$Q = getComponentName$1('phone-field-internal-input-box');
 
 const observedAttributes$3 = [
   'disabled',
@@ -10959,7 +10806,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$7 = createBaseInputClass$1({ componentName: componentName$P, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass$1({ componentName: componentName$Q, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -11205,11 +11052,11 @@ class PhoneFieldInternal extends BaseInputClass$7 {
   }
 }
 
-customElements.define(componentName$P, PhoneFieldInternal);
+customElements.define(componentName$Q, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$O = getComponentName$1('phone-input-box-field');
+const componentName$P = getComponentName$1('phone-input-box-field');
 
 const customMixin$9 = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
@@ -11223,15 +11070,15 @@ const customMixin$9 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$P}
+				<${componentName$Q}
 					tabindex="-1"
 					slot="input"
-				></${componentName$P}>
+				></${componentName$Q}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$P);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Q);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -11435,20 +11282,20 @@ const PhoneFieldInputBoxClass = compose$1(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$O,
+    componentName: componentName$P,
   })
 );
 
-customElements.define(componentName$O, PhoneFieldInputBoxClass);
+customElements.define(componentName$P, PhoneFieldInputBoxClass);
 
-const componentName$N = getComponentName$1('new-password-internal');
+const componentName$O = 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$M = getComponentName$1('policy-validation');
+const componentName$N = getComponentName$1('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -11458,7 +11305,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass$1({ componentName: componentName$M, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass$1({ componentName: componentName$N, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -11730,7 +11577,7 @@ const PolicyValidationClass = compose$1(
   componentNameValidationMixin$1
 )(RawPolicyValidation);
 
-const componentName$L = getComponentName$1('new-password');
+const componentName$M = getComponentName$1('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -11744,18 +11591,18 @@ const customMixin$8 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$N}
+			<${componentName$O}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$N}>
+      </${componentName$O}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$N);
+      this.inputElement = this.shadowRoot.querySelector(componentName$O);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -11939,11 +11786,11 @@ const NewPasswordClass = compose$1(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$L,
+    componentName: componentName$M,
   })
 );
 
-customElements.define(componentName$M, PolicyValidationClass);
+customElements.define(componentName$N, PolicyValidationClass);
 
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -11983,7 +11830,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$6 = createBaseInputClass$1({ componentName: componentName$N, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass$1({ componentName: componentName$O, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -12229,16 +12076,16 @@ class NewPasswordInternal extends BaseInputClass$6 {
   }
 }
 
-customElements.define(componentName$N, NewPasswordInternal);
+customElements.define(componentName$O, NewPasswordInternal);
 
-customElements.define(componentName$L, NewPasswordClass);
+customElements.define(componentName$M, NewPasswordClass);
 
-const componentName$K = getComponentName$1('recaptcha');
+const componentName$L = getComponentName$1('recaptcha');
 
 const observedAttributes$2 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass$3 = createBaseClass$1({
-  componentName: componentName$K,
+  componentName: componentName$L,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass$3 {
@@ -12463,7 +12310,7 @@ class RawRecaptcha extends BaseClass$3 {
 
 const RecaptchaClass = compose$1(draggableMixin$1)(RawRecaptcha);
 
-customElements.define(componentName$K, RecaptchaClass);
+customElements.define(componentName$L, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -12477,7 +12324,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$J = getComponentName$1('upload-file');
+const componentName$K = getComponentName$1('upload-file');
 
 const observedAttributes$1 = [
   'title',
@@ -12492,7 +12339,7 @@ const observedAttributes$1 = [
   'icon',
 ];
 
-const BaseInputClass$5 = createBaseInputClass$1({ componentName: componentName$J, baseSelector: ':host > div' });
+const BaseInputClass$5 = createBaseInputClass$1({ componentName: componentName$K, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -12711,7 +12558,7 @@ const UploadFileClass = compose$1(
   componentNameValidationMixin$1
 )(RawUploadFile);
 
-customElements.define(componentName$J, UploadFileClass);
+customElements.define(componentName$K, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass$1({
@@ -12801,10 +12648,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$I = getComponentName$1('button-selection-group-internal');
+const componentName$J = getComponentName$1('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$I
+  componentName$J
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -13049,7 +12896,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$H = getComponentName$1('button-selection-group');
+const componentName$I = getComponentName$1('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -13058,19 +12905,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$I}
+      <${componentName$J}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$I}>
+      </${componentName$J}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$I);
+      this.inputElement = this.shadowRoot.querySelector(componentName$J);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -13095,16 +12942,16 @@ const ButtonSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$H,
+    componentName: componentName$I,
   })
 );
 
-customElements.define(componentName$I, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$J, ButtonSelectionGroupInternalClass);
 
-const componentName$G = getComponentName$1('button-selection-group-item');
+const componentName$H = getComponentName$1('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass$1({
-  componentName: componentName$G,
+  componentName: componentName$H,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -13215,14 +13062,14 @@ const ButtonSelectionGroupItemClass = compose$1(
   componentNameValidationMixin$1
 )(RawSelectItem);
 
-customElements.define(componentName$G, ButtonSelectionGroupItemClass);
+customElements.define(componentName$H, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$H, ButtonSelectionGroupClass);
+customElements.define(componentName$I, ButtonSelectionGroupClass);
 
-const componentName$F = getComponentName$1('button-multi-selection-group-internal');
+const componentName$G = getComponentName$1('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$F
+  componentName$G
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -13325,7 +13172,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$E = getComponentName$1('button-multi-selection-group');
+const componentName$F = getComponentName$1('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -13334,19 +13181,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$F}
+      <${componentName$G}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$F}>
+      </${componentName$G}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$F);
+      this.inputElement = this.shadowRoot.querySelector(componentName$G);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -13371,13 +13218,13 @@ const ButtonMultiSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
-customElements.define(componentName$F, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$G, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$E, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$F, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -13405,9 +13252,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$D = getComponentName$1('grid-text-column');
+const componentName$E = getComponentName$1('grid-text-column');
 
-customElements.define(componentName$D, GridTextColumnClass);
+customElements.define(componentName$E, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -13442,9 +13289,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$C = getComponentName$1('grid-custom-column');
+const componentName$D = getComponentName$1('grid-custom-column');
 
-customElements.define(componentName$C, GridCustomColumnClass);
+customElements.define(componentName$D, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -13503,9 +13350,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$B = getComponentName$1('grid-selection-column');
+const componentName$C = getComponentName$1('grid-selection-column');
 
-customElements.define(componentName$B, GridSelectionColumnClass);
+customElements.define(componentName$C, GridSelectionColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -13544,9 +13391,9 @@ class GridItemDetailsColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$A = getComponentName$1('grid-item-details-column');
+const componentName$B = getComponentName$1('grid-item-details-column');
 
-customElements.define(componentName$A, GridItemDetailsColumnClass);
+customElements.define(componentName$B, GridItemDetailsColumnClass);
 
 const decode = (input) => {
   const txt = document.createElement('textarea');
@@ -13558,9 +13405,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
 
-const componentName$z = getComponentName$1('code-snippet');
+const componentName$A = getComponentName$1('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName: componentName$z, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName: componentName$A, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -13794,7 +13641,7 @@ const CodeSnippetClass = compose$1(
   componentNameValidationMixin$1
 )(CodeSnippet$1);
 
-customElements.define(componentName$z, CodeSnippetClass);
+customElements.define(componentName$A, CodeSnippetClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -13869,7 +13716,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$y = getComponentName$1('grid');
+const componentName$z = getComponentName$1('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -14223,13 +14070,13 @@ const GridClass = compose$1(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
-customElements.define(componentName$y, GridClass);
+customElements.define(componentName$z, GridClass);
 
-const componentName$x = getComponentName$1('multi-select-combo-box');
+const componentName$y = getComponentName$1('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -14882,16 +14729,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$x,
+    componentName: componentName$y,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$x, MultiSelectComboBoxClass);
+customElements.define(componentName$y, MultiSelectComboBoxClass);
 
-const componentName$w = getComponentName$1('badge');
+const componentName$x = getComponentName$1('badge');
 
-class RawBadge extends createBaseClass$1({ componentName: componentName$w, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass$1({ componentName: componentName$x, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -14946,9 +14793,9 @@ const BadgeClass = compose$1(
   componentNameValidationMixin$1
 )(RawBadge);
 
-customElements.define(componentName$w, BadgeClass);
+customElements.define(componentName$x, BadgeClass);
 
-const componentName$v = getComponentName$1('modal');
+const componentName$w = getComponentName$1('modal');
 
 const observedAttrs$2 = ['opened'];
 
@@ -15072,11 +14919,11 @@ const ModalClass = compose$1(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$v,
+    componentName: componentName$w,
   })
 );
 
-customElements.define(componentName$v, ModalClass);
+customElements.define(componentName$w, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -15087,7 +14934,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName$1('notification-container'), NotificationContainerClass);
 
-const componentName$u = getComponentName$1('notification-card');
+const componentName$v = getComponentName$1('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -15195,13 +15042,13 @@ const NotificationCardClass = compose$1(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$u,
+    componentName: componentName$v,
   })
 );
 
-customElements.define(componentName$u, NotificationCardClass);
+customElements.define(componentName$v, NotificationCardClass);
 
-const componentName$t = getComponentName$1('notification');
+const componentName$u = getComponentName$1('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -15296,15 +15143,15 @@ const NotificationClass = compose$1(
   createProxy$1({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$t,
+    componentName: componentName$u,
   })
 );
 
-customElements.define(componentName$t, NotificationClass);
+customElements.define(componentName$u, NotificationClass);
 
-const componentName$s = getComponentName$1('mappings-field-internal');
+const componentName$t = getComponentName$1('mappings-field-internal');
 
-const BaseInputClass$4 = createBaseInputClass$1({ componentName: componentName$s, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass$1({ componentName: componentName$t, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$4 {
   #errorItem;
@@ -15551,7 +15398,7 @@ class MappingsFieldInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$r = getComponentName$1('mappings-field');
+const componentName$s = getComponentName$1('mappings-field');
 
 const customMixin$6 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -15580,14 +15427,14 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$s}
+      <${componentName$t}
         tabindex="-1"
-      ></${componentName$s}>
+      ></${componentName$t}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$s);
+      this.inputElement = this.shadowRoot.querySelector(componentName$t);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -15722,13 +15569,13 @@ const MappingsFieldClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$r,
+    componentName: componentName$s,
   })
 );
 
-customElements.define(componentName$s, MappingsFieldInternal);
+customElements.define(componentName$t, MappingsFieldInternal);
 
-const componentName$q = getComponentName$1('mapping-item');
+const componentName$r = getComponentName$1('mapping-item');
 
 const inputAttrs = [
   'size',
@@ -15741,7 +15588,7 @@ const inputAttrs = [
   'st-error-message-icon-padding',
 ];
 
-const BaseInputClass$3 = createBaseInputClass$1({ componentName: componentName$q, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass$1({ componentName: componentName$r, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -15896,17 +15743,17 @@ class MappingItem extends BaseInputClass$3 {
   }
 }
 
-customElements.define(componentName$q, MappingItem);
+customElements.define(componentName$r, MappingItem);
 
-customElements.define(componentName$r, MappingsFieldClass);
+customElements.define(componentName$s, MappingsFieldClass);
 
 var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$p = getComponentName$1('user-attribute');
+const componentName$q = getComponentName$1('user-attribute');
 class RawUserAttribute extends createBaseClass$1({
-  componentName: componentName$p,
+  componentName: componentName$q,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -16150,13 +15997,13 @@ const UserAttributeClass = compose$1(
   componentNameValidationMixin$1
 )(RawUserAttribute);
 
-customElements.define(componentName$p, UserAttributeClass);
+customElements.define(componentName$q, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$o = getComponentName$1('user-auth-method');
+const componentName$p = getComponentName$1('user-auth-method');
 class RawUserAuthMethod extends createBaseClass$1({
-  componentName: componentName$o,
+  componentName: componentName$p,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -16351,11 +16198,11 @@ const UserAuthMethodClass = compose$1(
   componentNameValidationMixin$1
 )(RawUserAuthMethod);
 
-customElements.define(componentName$o, UserAuthMethodClass);
+customElements.define(componentName$p, UserAuthMethodClass);
 
-const componentName$n = getComponentName$1('saml-group-mappings-internal');
+const componentName$o = getComponentName$1('saml-group-mappings-internal');
 
-const BaseInputClass$2 = createBaseInputClass$1({ componentName: componentName$n, baseSelector: '' });
+const BaseInputClass$2 = createBaseInputClass$1({ componentName: componentName$o, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -16481,7 +16328,7 @@ class SamlGroupMappingsInternal extends BaseInputClass$2 {
   }
 }
 
-const componentName$m = getComponentName$1('saml-group-mappings');
+const componentName$n = getComponentName$1('saml-group-mappings');
 
 const customMixin$5 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -16491,14 +16338,14 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$n}
+      <${componentName$o}
         tabindex="-1"
-      ></${componentName$n}>
+      ></${componentName$o}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$n);
+      this.inputElement = this.shadowRoot.querySelector(componentName$o);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -16582,15 +16429,15 @@ const SamlGroupMappingsClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$m,
+    componentName: componentName$n,
   })
 );
 
-customElements.define(componentName$n, SamlGroupMappingsInternal);
+customElements.define(componentName$o, SamlGroupMappingsInternal);
 
-customElements.define(componentName$m, SamlGroupMappingsClass);
+customElements.define(componentName$n, SamlGroupMappingsClass);
 
-const componentName$l = getComponentName$1('radio-button');
+const componentName$m = getComponentName$1('radio-button');
 
 const customMixin$4 = (superclass) =>
   class CustomMixin extends superclass {
@@ -16655,11 +16502,11 @@ const RadioButtonClass = compose$1(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$l,
+    componentName: componentName$m,
   })
 );
 
-const componentName$k = getComponentName$1('radio-group');
+const componentName$l = getComponentName$1('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -16674,12 +16521,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$l),
+        get: () => this.querySelectorAll(componentName$m),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) => {
-        return nodes.filter((node) => node.localName === componentName$l);
+        return nodes.filter((node) => node.localName === componentName$m);
       };
 
       // vaadin radio group missing some input properties
@@ -16829,13 +16676,13 @@ const RadioGroupClass = compose$1(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
-    componentName: componentName$k,
+    componentName: componentName$l,
     includeForwardProps: ['value'],
   })
 );
 
-customElements.define(componentName$k, RadioGroupClass);
-customElements.define(componentName$l, RadioButtonClass);
+customElements.define(componentName$l, RadioGroupClass);
+customElements.define(componentName$m, RadioButtonClass);
 
 const activeableMixin = (superclass) =>
   class ActiveableMixinClass extends superclass {
@@ -16852,7 +16699,7 @@ const activeableMixin = (superclass) =>
     }
   };
 
-const componentName$j = getComponentName$1('list-item');
+const componentName$k = getComponentName$1('list-item');
 
 const customMixin$3 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -16902,11 +16749,11 @@ const ListItemClass = compose$1(
   componentNameValidationMixin$1,
   customMixin$3,
   activeableMixin
-)(createBaseClass$1({ componentName: componentName$j, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$k, baseSelector: 'slot' }));
 
-const componentName$i = getComponentName$1('list');
+const componentName$j = getComponentName$1('list');
 
-class RawList extends createBaseClass$1({ componentName: componentName$i, baseSelector: '.wrapper' }) {
+class RawList extends createBaseClass$1({ componentName: componentName$j, baseSelector: '.wrapper' }) {
   static get observedAttributes() {
     return ['variant', 'readonly'];
   }
@@ -17054,12 +16901,12 @@ const ListClass = compose$1(
   componentNameValidationMixin$1
 )(RawList);
 
-customElements.define(componentName$i, ListClass);
-customElements.define(componentName$j, ListItemClass);
+customElements.define(componentName$j, ListClass);
+customElements.define(componentName$k, ListItemClass);
 
-const componentName$h = getComponentName('avatar');
+const componentName$i = getComponentName('avatar');
 class RawAvatar extends createBaseClass({
-  componentName: componentName$h,
+  componentName: componentName$i,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -17167,7 +17014,7 @@ const AvatarClass = compose(
   componentNameValidationMixin,
 )(RawAvatar);
 
-customElements.define(componentName$h, AvatarClass);
+customElements.define(componentName$i, AvatarClass);
 
 const defaultValidateSchema = () => true;
 const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
@@ -17268,7 +17115,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$g = getComponentName$1('apps-list');
+const componentName$h = getComponentName$1('apps-list');
 
 const limitAbbreviation = (str, limit = 2) =>
   str
@@ -17330,7 +17177,7 @@ const AppsListClass = compose$1(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty'],
-    componentName: componentName$g,
+    componentName: componentName$h,
     style: () => `
       :host {
         width: 100%;
@@ -17355,9 +17202,9 @@ const AppsListClass = compose$1(
   })
 );
 
-customElements.define(componentName$g, AppsListClass);
+customElements.define(componentName$h, AppsListClass);
 
-const componentName$f = getComponentName$1('scopes-list');
+const componentName$g = getComponentName$1('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer = ({ id, desc, required = false }, _, ref) => {
@@ -17376,7 +17223,7 @@ const itemRenderer = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass$1({ componentName: componentName$f, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass$1({ componentName: componentName$g, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -17484,13 +17331,13 @@ const ScopesListClass = compose$1(
   componentNameValidationMixin$1
 )(RawScopesList);
 
-customElements.define(componentName$f, ScopesListClass);
+customElements.define(componentName$g, ScopesListClass);
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$e = getComponentName$1('third-party-app-logo');
+const componentName$f = getComponentName$1('third-party-app-logo');
 class RawThirdPartyAppLogoClass extends createBaseClass$1({
-  componentName: componentName$e,
+  componentName: componentName$f,
   baseSelector: '.wrapper',
 }) {
   constructor() {
@@ -17587,9 +17434,196 @@ 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) => {
+  const ele = document.createElement('img');
+  ele.setAttribute('src', src);
+  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 },
+  });
+
+  const parser = new DOMParser();
+  const ele = parser
+    .parseFromString(clean, 'image/svg+xml')
+    .querySelector('svg');
+  return ele;
+};
+
+const createImage = async (src) => {
+  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);
+    }
+
+    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$e = getComponentName('image');
+
+const srcAttrs = ['src', 'src-dark'];
+
+class RawImage extends createBaseClass({
+  componentName: componentName$e,
+  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 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).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$e, ImageClass);
+
 customElements.define(componentName$18, IconClass);
 
-customElements.define(componentName$e, ThirdPartyAppLogoClass);
+customElements.define(componentName$f, ThirdPartyAppLogoClass);
 
 const componentName$d = getComponentName$1('security-questions-setup');
 
@@ -20430,23 +20464,62 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$F
 });
 
-const vars$E = ImageClass.cssVarList;
+const vars$E = PhoneFieldClass.cssVarList;
 
-const image = {};
+const phoneField = {
+  [vars$E.hostWidth]: refs$1.width,
+  [vars$E.hostDirection]: refs$1.direction,
+  [vars$E.fontSize]: refs$1.fontSize,
+  [vars$E.fontFamily]: refs$1.fontFamily,
+  [vars$E.labelTextColor]: refs$1.labelTextColor,
+  [vars$E.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$E.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$E.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$E.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$E.inputBorderStyle]: refs$1.borderStyle,
+  [vars$E.inputBorderWidth]: refs$1.borderWidth,
+  [vars$E.inputBorderColor]: refs$1.borderColor,
+  [vars$E.inputBorderRadius]: refs$1.borderRadius,
+  [vars$E.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$E.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$E.inputOutlineColor]: refs$1.outlineColor,
+  [vars$E.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$E.phoneInputWidth]: refs$1.minWidth,
+  [vars$E.countryCodeInputWidth]: '5em',
+  [vars$E.countryCodeDropdownWidth]: '20em',
+  [vars$E.marginInlineStart]: '-0.25em',
+  [vars$E.valueInputHeight]: refs$1.valueInputHeight,
+  [vars$E.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
 
-var image$1 = /*#__PURE__*/Object.freeze({
+  // error message icon
+  [vars$E.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$E.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$E.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$E.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$E.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$E.errorMessageFontSize]: refs$1.errorMessageFontSize,
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: image,
+  default: phoneField,
   vars: vars$E
 });
 
-const vars$D = PhoneFieldClass.cssVarList;
+const vars$D = PhoneFieldInputBoxClass.cssVarList;
 
-const phoneField = {
-  [vars$D.hostWidth]: refs$1.width,
+const phoneInputBoxField = {
+  [vars$D.hostWidth]: '16em',
+  [vars$D.hostMinWidth]: refs$1.minWidth,
   [vars$D.hostDirection]: refs$1.direction,
   [vars$D.fontSize]: refs$1.fontSize,
   [vars$D.fontFamily]: refs$1.fontFamily,
+  [vars$D.labelFontSize]: refs$1.labelFontSize,
+  [vars$D.labelFontWeight]: refs$1.labelFontWeight,
   [vars$D.labelTextColor]: refs$1.labelTextColor,
   [vars$D.labelRequiredIndicator]: refs$1.requiredIndicator,
   [vars$D.errorMessageTextColor]: refs$1.errorMessageTextColor,
@@ -20460,12 +20533,15 @@ const phoneField = {
   [vars$D.inputOutlineWidth]: refs$1.outlineWidth,
   [vars$D.inputOutlineColor]: refs$1.outlineColor,
   [vars$D.inputOutlineOffset]: refs$1.outlineOffset,
-  [vars$D.phoneInputWidth]: refs$1.minWidth,
-  [vars$D.countryCodeInputWidth]: '5em',
-  [vars$D.countryCodeDropdownWidth]: '20em',
-  [vars$D.marginInlineStart]: '-0.25em',
+  [vars$D.labelPosition]: refs$1.labelPosition,
+  [vars$D.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$D.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$D.inputTransformY]: refs$1.inputTransformY,
+  [vars$D.inputTransition]: refs$1.inputTransition,
+  [vars$D.marginInlineStart]: refs$1.marginInlineStart,
   [vars$D.valueInputHeight]: refs$1.valueInputHeight,
   [vars$D.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+  [vars$D.inputHorizontalPadding]: '0',
 
   // error message icon
   [vars$D.errorMessageIcon]: refs$1.errorMessageIcon,
@@ -20475,21 +20551,22 @@ const phoneField = {
   [vars$D.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   [vars$D.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$D.hostWidth]: refs$1.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$D
 });
 
-const vars$C = PhoneFieldInputBoxClass.cssVarList;
+const globalRefs$r = getThemeRefs(globals$1);
+const vars$C = NewPasswordClass.cssVarList;
 
-const phoneInputBoxField = {
-  [vars$C.hostWidth]: '16em',
+const newPassword = {
+  [vars$C.hostWidth]: refs$1.width,
   [vars$C.hostMinWidth]: refs$1.minWidth,
   [vars$C.hostDirection]: refs$1.direction,
   [vars$C.fontSize]: refs$1.fontSize,
@@ -20497,27 +20574,11 @@ const phoneInputBoxField = {
   [vars$C.labelFontSize]: refs$1.labelFontSize,
   [vars$C.labelFontWeight]: refs$1.labelFontWeight,
   [vars$C.labelTextColor]: refs$1.labelTextColor,
-  [vars$C.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$C.spaceBetweenInputs]: '1em',
   [vars$C.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$C.inputValueTextColor]: refs$1.valueTextColor,
-  [vars$C.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-  [vars$C.inputBorderStyle]: refs$1.borderStyle,
-  [vars$C.inputBorderWidth]: refs$1.borderWidth,
-  [vars$C.inputBorderColor]: refs$1.borderColor,
-  [vars$C.inputBorderRadius]: refs$1.borderRadius,
-  [vars$C.inputOutlineStyle]: refs$1.outlineStyle,
-  [vars$C.inputOutlineWidth]: refs$1.outlineWidth,
-  [vars$C.inputOutlineColor]: refs$1.outlineColor,
-  [vars$C.inputOutlineOffset]: refs$1.outlineOffset,
-  [vars$C.labelPosition]: refs$1.labelPosition,
-  [vars$C.labelTopPosition]: refs$1.labelTopPosition,
-  [vars$C.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-  [vars$C.inputTransformY]: refs$1.inputTransformY,
-  [vars$C.inputTransition]: refs$1.inputTransition,
-  [vars$C.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$C.policyPreviewBackgroundColor]: 'none',
+  [vars$C.policyPreviewPadding]: globalRefs$r.spacing.lg,
   [vars$C.valueInputHeight]: refs$1.valueInputHeight,
-  [vars$C.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
-  [vars$C.inputHorizontalPadding]: '0',
 
   // error message icon
   [vars$C.errorMessageIcon]: refs$1.errorMessageIcon,
@@ -20527,157 +20588,120 @@ const phoneInputBoxField = {
   [vars$C.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   [vars$C.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
-  _fullWidth: {
-    [vars$C.hostWidth]: refs$1.width,
-  },
-};
-
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$C
-});
-
-const globalRefs$r = getThemeRefs(globals$1);
-const vars$B = NewPasswordClass.cssVarList;
-
-const newPassword = {
-  [vars$B.hostWidth]: refs$1.width,
-  [vars$B.hostMinWidth]: refs$1.minWidth,
-  [vars$B.hostDirection]: refs$1.direction,
-  [vars$B.fontSize]: refs$1.fontSize,
-  [vars$B.fontFamily]: refs$1.fontFamily,
-  [vars$B.labelFontSize]: refs$1.labelFontSize,
-  [vars$B.labelFontWeight]: refs$1.labelFontWeight,
-  [vars$B.labelTextColor]: refs$1.labelTextColor,
-  [vars$B.spaceBetweenInputs]: '1em',
-  [vars$B.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$B.policyPreviewBackgroundColor]: 'none',
-  [vars$B.policyPreviewPadding]: globalRefs$r.spacing.lg,
-  [vars$B.valueInputHeight]: refs$1.valueInputHeight,
-
-  // error message icon
-  [vars$B.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$B.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$B.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$B.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$B.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$B.errorMessageFontSize]: refs$1.errorMessageFontSize,
-
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
     // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$B.inputsRequiredIndicator]: refs$1.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$C.inputsRequiredIndicator]: refs$1.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
   },
 };
 
 var newPassword$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: newPassword,
-  vars: vars$B
+  vars: vars$C
 });
 
-const vars$A = UploadFileClass.cssVarList;
+const vars$B = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$A.hostDirection]: refs$1.direction,
-  [vars$A.labelTextColor]: refs$1.labelTextColor,
-  [vars$A.fontFamily]: refs$1.fontFamily,
+  [vars$B.hostDirection]: refs$1.direction,
+  [vars$B.labelTextColor]: refs$1.labelTextColor,
+  [vars$B.fontFamily]: refs$1.fontFamily,
 
-  [vars$A.iconSize]: '2em',
+  [vars$B.iconSize]: '2em',
 
-  [vars$A.hostPadding]: '0.75em',
-  [vars$A.gap]: '0.5em',
+  [vars$B.hostPadding]: '0.75em',
+  [vars$B.gap]: '0.5em',
 
-  [vars$A.fontSize]: '16px',
-  [vars$A.titleFontWeight]: '500',
-  [vars$A.lineHeight]: '1em',
+  [vars$B.fontSize]: '16px',
+  [vars$B.titleFontWeight]: '500',
+  [vars$B.lineHeight]: '1em',
 
-  [vars$A.borderWidth]: refs$1.borderWidth,
-  [vars$A.borderColor]: refs$1.borderColor,
-  [vars$A.borderRadius]: refs$1.borderRadius,
-  [vars$A.borderStyle]: 'dashed',
+  [vars$B.borderWidth]: refs$1.borderWidth,
+  [vars$B.borderColor]: refs$1.borderColor,
+  [vars$B.borderRadius]: refs$1.borderRadius,
+  [vars$B.borderStyle]: 'dashed',
 
   _required: {
-    [vars$A.requiredIndicator]: refs$1.requiredIndicator,
+    [vars$B.requiredIndicator]: refs$1.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$A.hostHeight]: '196px',
-      [vars$A.hostWidth]: '200px',
-      [vars$A.titleFontSize]: '0.875em',
-      [vars$A.descriptionFontSize]: '0.875em',
-      [vars$A.lineHeight]: '1.25em',
+      [vars$B.hostHeight]: '196px',
+      [vars$B.hostWidth]: '200px',
+      [vars$B.titleFontSize]: '0.875em',
+      [vars$B.descriptionFontSize]: '0.875em',
+      [vars$B.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$A.hostHeight]: '216px',
-      [vars$A.hostWidth]: '230px',
-      [vars$A.titleFontSize]: '1em',
-      [vars$A.descriptionFontSize]: '0.875em',
-      [vars$A.lineHeight]: '1.25em',
+      [vars$B.hostHeight]: '216px',
+      [vars$B.hostWidth]: '230px',
+      [vars$B.titleFontSize]: '1em',
+      [vars$B.descriptionFontSize]: '0.875em',
+      [vars$B.lineHeight]: '1.25em',
     },
     md: {
-      [vars$A.hostHeight]: '256px',
-      [vars$A.hostWidth]: '312px',
-      [vars$A.titleFontSize]: '1.125em',
-      [vars$A.descriptionFontSize]: '1em',
-      [vars$A.lineHeight]: '1.5em',
+      [vars$B.hostHeight]: '256px',
+      [vars$B.hostWidth]: '312px',
+      [vars$B.titleFontSize]: '1.125em',
+      [vars$B.descriptionFontSize]: '1em',
+      [vars$B.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$A.hostHeight]: '280px',
-      [vars$A.hostWidth]: '336px',
-      [vars$A.titleFontSize]: '1.125em',
-      [vars$A.descriptionFontSize]: '1.125em',
-      [vars$A.lineHeight]: '1.75em',
+      [vars$B.hostHeight]: '280px',
+      [vars$B.hostWidth]: '336px',
+      [vars$B.titleFontSize]: '1.125em',
+      [vars$B.descriptionFontSize]: '1.125em',
+      [vars$B.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$A.hostWidth]: refs$1.width,
+    [vars$B.hostWidth]: refs$1.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$A
+  vars: vars$B
 });
 
 const globalRefs$q = getThemeRefs(globals$1);
 
-const vars$z = ButtonSelectionGroupItemClass.cssVarList;
+const vars$A = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$z.hostDirection]: 'inherit',
-  [vars$z.backgroundColor]: globalRefs$q.colors.surface.main,
-  [vars$z.labelTextColor]: globalRefs$q.colors.surface.contrast,
-  [vars$z.borderColor]: globalRefs$q.colors.surface.light,
-  [vars$z.borderStyle]: 'solid',
-  [vars$z.borderRadius]: globalRefs$q.radius.sm,
-  [vars$z.outlineColor]: 'transparent',
-  [vars$z.borderWidth]: globalRefs$q.border.xs,
+  [vars$A.hostDirection]: 'inherit',
+  [vars$A.backgroundColor]: globalRefs$q.colors.surface.main,
+  [vars$A.labelTextColor]: globalRefs$q.colors.surface.contrast,
+  [vars$A.borderColor]: globalRefs$q.colors.surface.light,
+  [vars$A.borderStyle]: 'solid',
+  [vars$A.borderRadius]: globalRefs$q.radius.sm,
+  [vars$A.outlineColor]: 'transparent',
+  [vars$A.borderWidth]: globalRefs$q.border.xs,
 
   _hover: {
-    [vars$z.backgroundColor]: globalRefs$q.colors.surface.highlight,
+    [vars$A.backgroundColor]: globalRefs$q.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$z.outlineColor]: globalRefs$q.colors.surface.light,
+    [vars$A.outlineColor]: globalRefs$q.colors.surface.light,
   },
 
   _selected: {
-    [vars$z.borderColor]: globalRefs$q.colors.surface.contrast,
-    [vars$z.backgroundColor]: globalRefs$q.colors.surface.contrast,
-    [vars$z.labelTextColor]: globalRefs$q.colors.surface.main,
+    [vars$A.borderColor]: globalRefs$q.colors.surface.contrast,
+    [vars$A.backgroundColor]: globalRefs$q.colors.surface.contrast,
+    [vars$A.labelTextColor]: globalRefs$q.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$z
+  vars: vars$A
 });
 
 const globalRefs$p = getThemeRefs(globals$1);
@@ -20701,28 +20725,28 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.errorMessageFontSize]: refs$1.errorMessageFontSize,
 });
 
-const vars$y = ButtonSelectionGroupClass.cssVarList;
+const vars$z = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$y),
+  ...createBaseButtonSelectionGroupMappings(vars$z),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$y
+  vars: vars$z
 });
 
-const vars$x = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$y = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$x),
+  ...createBaseButtonSelectionGroupMappings(vars$y),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$x
+  vars: vars$y
 });
 
 const globalRefs$o = getThemeRefs(globals$1);
@@ -20735,58 +20759,58 @@ const modal = {
   [compVars$4.overlayWidth]: '540px',
 };
 
-const vars$w = {
+const vars$x = {
   ...compVars$4,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$w
+  vars: vars$x
 });
 
 const globalRefs$n = getThemeRefs(globals$1);
-const vars$v = GridClass.cssVarList;
+const vars$w = GridClass.cssVarList;
 
 const grid = {
-  [vars$v.hostWidth]: '100%',
-  [vars$v.hostHeight]: '100%',
-  [vars$v.hostMinHeight]: '400px',
-  [vars$v.fontWeight]: '400',
-  [vars$v.backgroundColor]: globalRefs$n.colors.surface.main,
-
-  [vars$v.fontSize]: refs$1.fontSize,
-  [vars$v.fontFamily]: refs$1.fontFamily,
-
-  [vars$v.sortIndicatorsColor]: globalRefs$n.colors.surface.light,
-  [vars$v.activeSortIndicator]: globalRefs$n.colors.surface.dark,
-  [vars$v.resizeHandleColor]: globalRefs$n.colors.surface.light,
-
-  [vars$v.borderWidth]: refs$1.borderWidth,
-  [vars$v.borderStyle]: refs$1.borderStyle,
-  [vars$v.borderRadius]: refs$1.borderRadius,
-  [vars$v.borderColor]: 'transparent',
-
-  [vars$v.headerRowTextColor]: globalRefs$n.colors.surface.dark,
-  [vars$v.separatorColor]: globalRefs$n.colors.surface.light,
-
-  [vars$v.valueTextColor]: globalRefs$n.colors.surface.contrast,
-  [vars$v.selectedBackgroundColor]: globalRefs$n.colors.surface.highlight,
-  [vars$v.hostDirection]: globalRefs$n.direction,
-
-  [vars$v.toggleDetailsPanelButtonSize]: '1em',
-  [vars$v.toggleDetailsPanelButtonOpenedColor]: globalRefs$n.colors.surface.contrast,
-  [vars$v.toggleDetailsPanelButtonClosedColor]: globalRefs$n.colors.surface.light,
-  [vars$v.toggleDetailsPanelButtonCursor]: 'pointer',
-  [vars$v.detailsPanelBackgroundColor]: globalRefs$n.colors.surface.highlight,
-  [vars$v.detailsPanelBorderTopColor]: globalRefs$n.colors.surface.light,
-  [vars$v.detailsPanelLabelsColor]: globalRefs$n.colors.surface.dark,
-  [vars$v.detailsPanelLabelsFontSize]: '0.8em',
-  [vars$v.detailsPanelItemsGap]: '2em',
-  [vars$v.detailsPanelPadding]: '12px 0',
+  [vars$w.hostWidth]: '100%',
+  [vars$w.hostHeight]: '100%',
+  [vars$w.hostMinHeight]: '400px',
+  [vars$w.fontWeight]: '400',
+  [vars$w.backgroundColor]: globalRefs$n.colors.surface.main,
+
+  [vars$w.fontSize]: refs$1.fontSize,
+  [vars$w.fontFamily]: refs$1.fontFamily,
+
+  [vars$w.sortIndicatorsColor]: globalRefs$n.colors.surface.light,
+  [vars$w.activeSortIndicator]: globalRefs$n.colors.surface.dark,
+  [vars$w.resizeHandleColor]: globalRefs$n.colors.surface.light,
+
+  [vars$w.borderWidth]: refs$1.borderWidth,
+  [vars$w.borderStyle]: refs$1.borderStyle,
+  [vars$w.borderRadius]: refs$1.borderRadius,
+  [vars$w.borderColor]: 'transparent',
+
+  [vars$w.headerRowTextColor]: globalRefs$n.colors.surface.dark,
+  [vars$w.separatorColor]: globalRefs$n.colors.surface.light,
+
+  [vars$w.valueTextColor]: globalRefs$n.colors.surface.contrast,
+  [vars$w.selectedBackgroundColor]: globalRefs$n.colors.surface.highlight,
+  [vars$w.hostDirection]: globalRefs$n.direction,
+
+  [vars$w.toggleDetailsPanelButtonSize]: '1em',
+  [vars$w.toggleDetailsPanelButtonOpenedColor]: globalRefs$n.colors.surface.contrast,
+  [vars$w.toggleDetailsPanelButtonClosedColor]: globalRefs$n.colors.surface.light,
+  [vars$w.toggleDetailsPanelButtonCursor]: 'pointer',
+  [vars$w.detailsPanelBackgroundColor]: globalRefs$n.colors.surface.highlight,
+  [vars$w.detailsPanelBorderTopColor]: globalRefs$n.colors.surface.light,
+  [vars$w.detailsPanelLabelsColor]: globalRefs$n.colors.surface.dark,
+  [vars$w.detailsPanelLabelsFontSize]: '0.8em',
+  [vars$w.detailsPanelItemsGap]: '2em',
+  [vars$w.detailsPanelPadding]: '12px 0',
 
   _bordered: {
-    [vars$v.borderColor]: refs$1.borderColor,
+    [vars$w.borderColor]: refs$1.borderColor,
   },
 };
 
@@ -20794,53 +20818,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$v
+  vars: vars$w
 });
 
 const globalRefs$m = getThemeRefs(globals$1);
-const vars$u = NotificationCardClass.cssVarList;
+const vars$v = NotificationCardClass.cssVarList;
 
 const shadowColor$3 = '#00000020';
 
 const notification = {
-  [vars$u.hostMinWidth]: '415px',
-  [vars$u.fontFamily]: globalRefs$m.fonts.font1.family,
-  [vars$u.fontSize]: globalRefs$m.typography.body1.size,
-  [vars$u.backgroundColor]: globalRefs$m.colors.surface.main,
-  [vars$u.textColor]: globalRefs$m.colors.surface.contrast,
-  [vars$u.boxShadow]: `${globalRefs$m.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$m.shadow.narrow.xl} ${shadowColor$3}`,
-  [vars$u.verticalPadding]: '0.625em',
-  [vars$u.horizontalPadding]: '1.5em',
-  [vars$u.borderRadius]: globalRefs$m.radius.xs,
+  [vars$v.hostMinWidth]: '415px',
+  [vars$v.fontFamily]: globalRefs$m.fonts.font1.family,
+  [vars$v.fontSize]: globalRefs$m.typography.body1.size,
+  [vars$v.backgroundColor]: globalRefs$m.colors.surface.main,
+  [vars$v.textColor]: globalRefs$m.colors.surface.contrast,
+  [vars$v.boxShadow]: `${globalRefs$m.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$m.shadow.narrow.xl} ${shadowColor$3}`,
+  [vars$v.verticalPadding]: '0.625em',
+  [vars$v.horizontalPadding]: '1.5em',
+  [vars$v.borderRadius]: globalRefs$m.radius.xs,
 
   _bordered: {
-    [vars$u.borderWidth]: globalRefs$m.border.sm,
-    [vars$u.borderStyle]: 'solid',
-    [vars$u.borderColor]: 'transparent',
+    [vars$v.borderWidth]: globalRefs$m.border.sm,
+    [vars$v.borderStyle]: 'solid',
+    [vars$v.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$u.fontSize]: '12px' },
-    sm: { [vars$u.fontSize]: '14px' },
-    md: { [vars$u.fontSize]: '16px' },
-    lg: { [vars$u.fontSize]: '18px' },
+    xs: { [vars$v.fontSize]: '12px' },
+    sm: { [vars$v.fontSize]: '14px' },
+    md: { [vars$v.fontSize]: '16px' },
+    lg: { [vars$v.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$u.backgroundColor]: globalRefs$m.colors.primary.main,
-      [vars$u.textColor]: globalRefs$m.colors.primary.contrast,
-      [vars$u.borderColor]: globalRefs$m.colors.primary.light,
+      [vars$v.backgroundColor]: globalRefs$m.colors.primary.main,
+      [vars$v.textColor]: globalRefs$m.colors.primary.contrast,
+      [vars$v.borderColor]: globalRefs$m.colors.primary.light,
     },
     success: {
-      [vars$u.backgroundColor]: globalRefs$m.colors.success.main,
-      [vars$u.textColor]: globalRefs$m.colors.success.contrast,
-      [vars$u.borderColor]: globalRefs$m.colors.success.light,
+      [vars$v.backgroundColor]: globalRefs$m.colors.success.main,
+      [vars$v.textColor]: globalRefs$m.colors.success.contrast,
+      [vars$v.borderColor]: globalRefs$m.colors.success.light,
     },
     error: {
-      [vars$u.backgroundColor]: globalRefs$m.colors.error.main,
-      [vars$u.textColor]: globalRefs$m.colors.error.contrast,
-      [vars$u.borderColor]: globalRefs$m.colors.error.light,
+      [vars$v.backgroundColor]: globalRefs$m.colors.error.main,
+      [vars$v.textColor]: globalRefs$m.colors.error.contrast,
+      [vars$v.borderColor]: globalRefs$m.colors.error.light,
     },
   },
 };
@@ -20848,156 +20872,156 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$u
+  vars: vars$v
 });
 
 const globalRefs$l = getThemeRefs(globals$1);
-const vars$t = MultiSelectComboBoxClass.cssVarList;
+const vars$u = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$t.hostWidth]: refs$1.width,
-  [vars$t.hostDirection]: refs$1.direction,
-  [vars$t.fontSize]: refs$1.fontSize,
-  [vars$t.fontFamily]: refs$1.fontFamily,
-  [vars$t.labelFontSize]: refs$1.labelFontSize,
-  [vars$t.labelFontWeight]: refs$1.labelFontWeight,
-  [vars$t.labelTextColor]: refs$1.labelTextColor,
-  [vars$t.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$t.inputBorderColor]: refs$1.borderColor,
-  [vars$t.inputBorderWidth]: refs$1.borderWidth,
-  [vars$t.inputBorderStyle]: refs$1.borderStyle,
-  [vars$t.inputBorderRadius]: refs$1.borderRadius,
-  [vars$t.inputOutlineColor]: refs$1.outlineColor,
-  [vars$t.inputOutlineOffset]: refs$1.outlineOffset,
-  [vars$t.inputOutlineWidth]: refs$1.outlineWidth,
-  [vars$t.inputOutlineStyle]: refs$1.outlineStyle,
-  [vars$t.labelRequiredIndicator]: refs$1.requiredIndicator,
-  [vars$t.inputValueTextColor]: refs$1.valueTextColor,
-  [vars$t.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-  [vars$t.inputBackgroundColor]: refs$1.backgroundColor,
-  [vars$t.inputHorizontalPadding]: refs$1.horizontalPadding,
-  [vars$t.inputVerticalPadding]: refs$1.verticalPadding,
-  [vars$t.inputHeight]: refs$1.inputHeight,
-  [vars$t.inputDropdownButtonColor]: globalRefs$l.colors.surface.dark,
-  [vars$t.inputDropdownButtonCursor]: 'pointer',
-  [vars$t.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-  [vars$t.inputDropdownButtonOffset]: globalRefs$l.spacing.xs,
-  [vars$t.overlayItemPaddingInlineStart]: globalRefs$l.spacing.xs,
-  [vars$t.overlayItemPaddingInlineEnd]: globalRefs$l.spacing.lg,
-  [vars$t.chipFontSize]: refs$1.chipFontSize,
-  [vars$t.chipTextColor]: globalRefs$l.colors.surface.contrast,
-  [vars$t.chipBackgroundColor]: globalRefs$l.colors.surface.light,
-  [vars$t.labelPosition]: refs$1.labelPosition,
-  [vars$t.labelTopPosition]: refs$1.labelTopPosition,
-  [vars$t.labelLeftPosition]: refs$1.labelLeftPosition,
-  [vars$t.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-  [vars$t.inputTransformY]: refs$1.inputTransformY,
-  [vars$t.inputTransition]: refs$1.inputTransition,
-  [vars$t.marginInlineStart]: refs$1.marginInlineStart,
-  [vars$t.placeholderOpacity]: refs$1.placeholderOpacity,
-  [vars$t.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+  [vars$u.hostWidth]: refs$1.width,
+  [vars$u.hostDirection]: refs$1.direction,
+  [vars$u.fontSize]: refs$1.fontSize,
+  [vars$u.fontFamily]: refs$1.fontFamily,
+  [vars$u.labelFontSize]: refs$1.labelFontSize,
+  [vars$u.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$u.labelTextColor]: refs$1.labelTextColor,
+  [vars$u.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$u.inputBorderColor]: refs$1.borderColor,
+  [vars$u.inputBorderWidth]: refs$1.borderWidth,
+  [vars$u.inputBorderStyle]: refs$1.borderStyle,
+  [vars$u.inputBorderRadius]: refs$1.borderRadius,
+  [vars$u.inputOutlineColor]: refs$1.outlineColor,
+  [vars$u.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$u.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$u.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$u.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$u.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$u.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$u.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$u.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$u.inputVerticalPadding]: refs$1.verticalPadding,
+  [vars$u.inputHeight]: refs$1.inputHeight,
+  [vars$u.inputDropdownButtonColor]: globalRefs$l.colors.surface.dark,
+  [vars$u.inputDropdownButtonCursor]: 'pointer',
+  [vars$u.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+  [vars$u.inputDropdownButtonOffset]: globalRefs$l.spacing.xs,
+  [vars$u.overlayItemPaddingInlineStart]: globalRefs$l.spacing.xs,
+  [vars$u.overlayItemPaddingInlineEnd]: globalRefs$l.spacing.lg,
+  [vars$u.chipFontSize]: refs$1.chipFontSize,
+  [vars$u.chipTextColor]: globalRefs$l.colors.surface.contrast,
+  [vars$u.chipBackgroundColor]: globalRefs$l.colors.surface.light,
+  [vars$u.labelPosition]: refs$1.labelPosition,
+  [vars$u.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$u.labelLeftPosition]: refs$1.labelLeftPosition,
+  [vars$u.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$u.inputTransformY]: refs$1.inputTransformY,
+  [vars$u.inputTransition]: refs$1.inputTransition,
+  [vars$u.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$u.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$u.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
 
   // error message icon
-  [vars$t.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$t.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$t.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$t.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$t.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$t.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [vars$u.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$u.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$u.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$u.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$u.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$u.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   labelType: {
     floating: {
-      [vars$t.inputHorizontalPadding]: '0.25em',
+      [vars$u.inputHorizontalPadding]: '0.25em',
       _hasValue: {
-        [vars$t.inputHorizontalPadding]: '0.45em',
+        [vars$u.inputHorizontalPadding]: '0.45em',
       },
     },
   },
 
   _readonly: {
-    [vars$t.inputDropdownButtonCursor]: 'default',
+    [vars$u.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$t.overlayFontSize]: refs$1.fontSize,
-  [vars$t.overlayFontFamily]: refs$1.fontFamily,
-  [vars$t.overlayCursor]: 'pointer',
-  [vars$t.overlayItemBoxShadow]: 'none',
-  [vars$t.overlayBackground]: refs$1.backgroundColor,
-  [vars$t.overlayTextColor]: refs$1.valueTextColor,
+  [vars$u.overlayFontSize]: refs$1.fontSize,
+  [vars$u.overlayFontFamily]: refs$1.fontFamily,
+  [vars$u.overlayCursor]: 'pointer',
+  [vars$u.overlayItemBoxShadow]: 'none',
+  [vars$u.overlayBackground]: refs$1.backgroundColor,
+  [vars$u.overlayTextColor]: refs$1.valueTextColor,
 
   // Overlay direct theme:
-  [vars$t.overlay.minHeight]: '400px',
-  [vars$t.overlay.margin]: '0',
+  [vars$u.overlay.minHeight]: '400px',
+  [vars$u.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$t
+  vars: vars$u
 });
 
 const globalRefs$k = getThemeRefs(globals$1);
-const vars$s = BadgeClass.cssVarList;
+const vars$t = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$s.hostWidth]: 'fit-content',
-  [vars$s.hostDirection]: globalRefs$k.direction,
+  [vars$t.hostWidth]: 'fit-content',
+  [vars$t.hostDirection]: globalRefs$k.direction,
 
-  [vars$s.textAlign]: 'center',
+  [vars$t.textAlign]: 'center',
 
-  [vars$s.fontFamily]: globalRefs$k.fonts.font1.family,
-  [vars$s.fontWeight]: '400',
+  [vars$t.fontFamily]: globalRefs$k.fonts.font1.family,
+  [vars$t.fontWeight]: '400',
 
-  [vars$s.verticalPadding]: '0.25em',
-  [vars$s.horizontalPadding]: '0.5em',
+  [vars$t.verticalPadding]: '0.25em',
+  [vars$t.horizontalPadding]: '0.5em',
 
-  [vars$s.borderWidth]: globalRefs$k.border.xs,
-  [vars$s.borderRadius]: globalRefs$k.radius.xs,
-  [vars$s.borderColor]: 'transparent',
-  [vars$s.borderStyle]: 'solid',
+  [vars$t.borderWidth]: globalRefs$k.border.xs,
+  [vars$t.borderRadius]: globalRefs$k.radius.xs,
+  [vars$t.borderColor]: 'transparent',
+  [vars$t.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$s.hostWidth]: '100%',
+    [vars$t.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$s.fontSize]: '12px' },
-    sm: { [vars$s.fontSize]: '14px' },
-    md: { [vars$s.fontSize]: '16px' },
-    lg: { [vars$s.fontSize]: '18px' },
+    xs: { [vars$t.fontSize]: '12px' },
+    sm: { [vars$t.fontSize]: '14px' },
+    md: { [vars$t.fontSize]: '16px' },
+    lg: { [vars$t.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$s.textColor]: globalRefs$k.colors.surface.dark,
+      [vars$t.textColor]: globalRefs$k.colors.surface.dark,
       _bordered: {
-        [vars$s.borderColor]: globalRefs$k.colors.surface.light,
+        [vars$t.borderColor]: globalRefs$k.colors.surface.light,
       },
     },
     primary: {
-      [vars$s.textColor]: globalRefs$k.colors.primary.main,
+      [vars$t.textColor]: globalRefs$k.colors.primary.main,
       _bordered: {
-        [vars$s.borderColor]: globalRefs$k.colors.primary.light,
+        [vars$t.borderColor]: globalRefs$k.colors.primary.light,
       },
     },
     secondary: {
-      [vars$s.textColor]: globalRefs$k.colors.secondary.main,
+      [vars$t.textColor]: globalRefs$k.colors.secondary.main,
       _bordered: {
-        [vars$s.borderColor]: globalRefs$k.colors.secondary.light,
+        [vars$t.borderColor]: globalRefs$k.colors.secondary.light,
       },
     },
     error: {
-      [vars$s.textColor]: globalRefs$k.colors.error.main,
+      [vars$t.textColor]: globalRefs$k.colors.error.main,
       _bordered: {
-        [vars$s.borderColor]: globalRefs$k.colors.error.light,
+        [vars$t.borderColor]: globalRefs$k.colors.error.light,
       },
     },
     success: {
-      [vars$s.textColor]: globalRefs$k.colors.success.main,
+      [vars$t.textColor]: globalRefs$k.colors.success.main,
       _bordered: {
-        [vars$s.borderColor]: globalRefs$k.colors.success.light,
+        [vars$t.borderColor]: globalRefs$k.colors.success.light,
       },
     },
   },
@@ -21006,7 +21030,7 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$s
+  vars: vars$t
 });
 
 const globalRefs$j = getThemeRefs$1(globals);
@@ -21044,146 +21068,156 @@ const avatar = {
   },
 };
 
-const vars$r = {
+const vars$s = {
   ...compVars$3,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$r
+  vars: vars$s
 });
 
 const globalRefs$i = getThemeRefs(globals$1);
 
-const vars$q = MappingsFieldClass.cssVarList;
+const vars$r = MappingsFieldClass.cssVarList;
 
 const mappingsField = {
-  [vars$q.hostWidth]: refs$1.width,
-  [vars$q.hostDirection]: refs$1.direction,
-  [vars$q.fontSize]: refs$1.fontSize,
-  [vars$q.fontFamily]: refs$1.fontFamily,
-  [vars$q.separatorFontSize]: '14px',
-  [vars$q.labelsFontSize]: '14px',
-  [vars$q.labelsLineHeight]: '1',
-  [vars$q.labelsMarginBottom]: '6px',
-  [vars$q.labelTextColor]: refs$1.labelTextColor,
-  [vars$q.itemMarginBottom]: '1em',
+  [vars$r.hostWidth]: refs$1.width,
+  [vars$r.hostDirection]: refs$1.direction,
+  [vars$r.fontSize]: refs$1.fontSize,
+  [vars$r.fontFamily]: refs$1.fontFamily,
+  [vars$r.separatorFontSize]: '14px',
+  [vars$r.labelsFontSize]: '14px',
+  [vars$r.labelsLineHeight]: '1',
+  [vars$r.labelsMarginBottom]: '6px',
+  [vars$r.labelTextColor]: refs$1.labelTextColor,
+  [vars$r.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$q.valueLabelMinWidth]: refs$1.minWidth,
+  [vars$r.valueLabelMinWidth]: refs$1.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$q.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$i.border.xs})`,
-  [vars$q.separatorWidth]: '70px',
-  [vars$q.removeButtonWidth]: '60px',
+  [vars$r.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$i.border.xs})`,
+  [vars$r.separatorWidth]: '70px',
+  [vars$r.removeButtonWidth]: '60px',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
-  vars: vars$q
+  vars: vars$r
 });
 
 const globalRefs$h = getThemeRefs(globals$1);
-const vars$p = UserAttributeClass.cssVarList;
+const vars$q = UserAttributeClass.cssVarList;
 
 const userAttribute = {
-  [vars$p.hostDirection]: globalRefs$h.direction,
-  [vars$p.labelTextWidth]: '150px',
-  [vars$p.valueTextWidth]: '200px',
-  [vars$p.badgeMaxWidth]: '85px',
-  [vars$p.itemsGap]: '16px',
-  [vars$p.hostMinWidth]: '530px',
+  [vars$q.hostDirection]: globalRefs$h.direction,
+  [vars$q.labelTextWidth]: '150px',
+  [vars$q.valueTextWidth]: '200px',
+  [vars$q.badgeMaxWidth]: '85px',
+  [vars$q.itemsGap]: '16px',
+  [vars$q.hostMinWidth]: '530px',
   _fullWidth: {
-    [vars$p.hostWidth]: '100%',
+    [vars$q.hostWidth]: '100%',
   },
 };
 
 var userAttribute$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAttribute,
-  vars: vars$p
+  vars: vars$q
 });
 
 const globalRefs$g = getThemeRefs(globals$1);
-const vars$o = UserAuthMethodClass.cssVarList;
+const vars$p = UserAuthMethodClass.cssVarList;
 
 const userAuthMethod = {
-  [vars$o.hostDirection]: globalRefs$g.direction,
-  [vars$o.labelTextWidth]: '200px',
-  [vars$o.itemsGap]: '16px',
-  [vars$o.hostMinWidth]: '530px',
-  [vars$o.iconSize]: '24px',
-  [vars$o.iconColor]: 'currentcolor',
+  [vars$p.hostDirection]: globalRefs$g.direction,
+  [vars$p.labelTextWidth]: '200px',
+  [vars$p.itemsGap]: '16px',
+  [vars$p.hostMinWidth]: '530px',
+  [vars$p.iconSize]: '24px',
+  [vars$p.iconColor]: 'currentcolor',
   _fullWidth: {
-    [vars$o.hostWidth]: '100%',
+    [vars$p.hostWidth]: '100%',
   },
 };
 
 var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAuthMethod,
-  vars: vars$o
+  vars: vars$p
 });
 
-const vars$n = SamlGroupMappingsClass.cssVarList;
+const vars$o = SamlGroupMappingsClass.cssVarList;
 
 const samlGroupMappings = {
-  [vars$n.hostWidth]: refs$1.width,
-  [vars$n.hostDirection]: refs$1.direction,
-  [vars$n.groupNameInputMarginBottom]: '1em',
+  [vars$o.hostWidth]: refs$1.width,
+  [vars$o.hostDirection]: refs$1.direction,
+  [vars$o.groupNameInputMarginBottom]: '1em',
 
   // error message icon
-  [vars$n.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$n.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$n.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$n.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$n.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$n.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [vars$o.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$o.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$o.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$o.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$o.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$o.errorMessageFontSize]: refs$1.errorMessageFontSize,
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: samlGroupMappings,
   samlGroupMappings: samlGroupMappings,
-  vars: vars$n
+  vars: vars$o
 });
 
 const globalRefs$f = getThemeRefs(globals$1);
-const vars$m = PolicyValidationClass.cssVarList;
+const vars$n = PolicyValidationClass.cssVarList;
 
 const policyValidation = {
-  [vars$m.fontFamily]: refs$1.fontFamily,
-  [vars$m.fontSize]: refs$1.labelFontSize,
-  [vars$m.textColor]: refs$1.labelTextColor,
-  [vars$m.borderWidth]: refs$1.borderWidth,
-  [vars$m.borderStyle]: refs$1.borderStyle,
-  [vars$m.borderColor]: refs$1.borderColor,
-  [vars$m.borderRadius]: globalRefs$f.radius.sm,
-  [vars$m.backgroundColor]: 'none',
-  [vars$m.padding]: '0px',
-  [vars$m.labelMargin]: globalRefs$f.spacing.sm,
-  [vars$m.itemsSpacing]: globalRefs$f.spacing.lg,
-  [vars$m.itemSymbolDefault]: "'\\2022'", // "•"
-  [vars$m.itemSymbolSuccess]: "'\\2713'", // "✓"
-  [vars$m.itemSymbolError]: "'\\2A09'", // "⨉"
-  [vars$m.itemSymbolSuccessColor]: globalRefs$f.colors.success.main,
-  [vars$m.itemSymbolErrorColor]: globalRefs$f.colors.error.main,
+  [vars$n.fontFamily]: refs$1.fontFamily,
+  [vars$n.fontSize]: refs$1.labelFontSize,
+  [vars$n.textColor]: refs$1.labelTextColor,
+  [vars$n.borderWidth]: refs$1.borderWidth,
+  [vars$n.borderStyle]: refs$1.borderStyle,
+  [vars$n.borderColor]: refs$1.borderColor,
+  [vars$n.borderRadius]: globalRefs$f.radius.sm,
+  [vars$n.backgroundColor]: 'none',
+  [vars$n.padding]: '0px',
+  [vars$n.labelMargin]: globalRefs$f.spacing.sm,
+  [vars$n.itemsSpacing]: globalRefs$f.spacing.lg,
+  [vars$n.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars$n.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars$n.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars$n.itemSymbolSuccessColor]: globalRefs$f.colors.success.main,
+  [vars$n.itemSymbolErrorColor]: globalRefs$f.colors.error.main,
 };
 
 var policyValidation$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: policyValidation,
-  vars: vars$m
+  vars: vars$n
 });
 
-const vars$l = IconClass.cssVarList;
+const vars$m = IconClass.cssVarList;
 
 const icon$1 = {};
 
 var icon$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon$1,
+  vars: vars$m
+});
+
+const vars$l = ImageClass.cssVarList;
+
+const image = {};
+
+var image$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: image,
   vars: vars$l
 });
 
@@ -21541,7 +21575,7 @@ const compVars$2 = ListClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   { shadowColor: '#00000020' },
-  componentName$i
+  componentName$j
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$1;
@@ -22789,7 +22823,7 @@ class RawTimer extends BaseClass$1 {
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="wrapper">
-        <descope-icon src=${clockIcon} class="icon"></descope-icon>
+        <descope-icon src="${clockIcon}" class="icon"></descope-icon>
         <div class="timer"></div>
       </div>
 		`;
@@ -22889,7 +22923,7 @@ class RawTimer extends BaseClass$1 {
   }
 
   #toggleIcon(val) {
-    this.icon.classList.toggle('hidden', val === 'true');
+    this.icon.classList.toggle('hidden', val);
   }
 
   #handlePause(paused) {
@@ -22913,7 +22947,7 @@ class RawTimer extends BaseClass$1 {
         this.reset();
       }
       if (attrName === 'hide-icon') {
-        this.#toggleIcon(newValue);
+        this.#toggleIcon(newValue === 'true');
       }
       if (attrName === 'paused') {
         this.#handlePause(newValue === 'true');
@@ -23358,7 +23392,10 @@ var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQ
 
 const componentName = getComponentName('collapsible-container');
 
-class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelector: 'slot' }) {
+class RawCollapsibleContainer extends createBaseClass({
+  componentName,
+  baseSelector: 'slot',
+}) {
   static get observedAttributes() {
     return ['collapsed', 'collapsible', 'text'];
   }
@@ -23370,7 +23407,9 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
     <div class="wrapper">
       <descope-text st-host-direction="ltr">
         <div class="header">
-          <descope-icon st-align-items="center" st-fill="currentcolor" src=${chevronIcon}></descope-icon>
+          <div class="icon">
+            <descope-icon st-fill="currentcolor" src=${chevronIcon}></descope-icon>
+          </div>
           <span></span>
         </div>
       </descope-text>
@@ -23385,7 +23424,6 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
       div.content {
         transition-property: max-height;
         overflow: auto;
-        transition-property: max-height;
         height: auto;
 			}
 			slot {
@@ -23404,11 +23442,15 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
           display: flex;
           align-items: baseline;
       }
-      descope-icon {
-          transition-property: transform;
+      .icon {
           flex-shrink: 0;
           height: var(${TextClass.cssVarList.textLineHeight});
           min-height: 24px;
+          display: flex;
+          align-items: center;
+      }
+      descope-icon {
+          transition-property: transform;
       }
       .rotate {
           transform: rotate(-180deg);
@@ -23431,7 +23473,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
         flex-direction: column;
       }
   `,
-      this
+      this,
     );
 
     this.header = this.shadowRoot.querySelector('.header');
@@ -23442,7 +23484,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
   }
 
   get isCollapsible() {
-    return this.getAttribute('collapsible') === 'true'
+    return this.getAttribute('collapsible') === 'true';
   }
 
   calcContentHeight() {
@@ -23493,7 +23535,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
     });
     forwardAttrs(this, this.textComponent, {
       includeAttrs: ['text-align', 'text-variant', 'text-mode'],
-      mapAttrs: { 'text-mode': 'mode', 'text-variant': 'variant' }
+      mapAttrs: { 'text-mode': 'mode', 'text-variant': 'variant' },
     });
   }
 
@@ -23505,7 +23547,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === 'text') {
       this.updateHeaderText();
-      return
+      return;
     }
     const collapsed = this.isCollapsed && this.isCollapsible;
     if (collapsed) {
@@ -23519,6 +23561,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
 const selectors = {
   host: () => ':host',
   icon: () => 'descope-icon',
+  iconWrapper: () => '.icon',
   header: () => '.header',
   text: () => 'span',
   wrapper: () => '.wrapper',
@@ -23530,8 +23573,14 @@ const CollapsibleContainerClass = compose(
     mappings: {
       hostWidth: { selector: selectors.host, property: 'width' },
       hostDirection: { selector: selectors.host, property: 'direction' },
-      verticalPadding: [{ selector: selectors.wrapper, property: 'padding-top' }, { selector: selectors.wrapper, property: 'padding-bottom' }],
-      horizontalPadding: [{ selector: selectors.wrapper, property: 'padding-left' }, { selector: selectors.wrapper, property: 'padding-right' }],
+      verticalPadding: [
+        { selector: selectors.wrapper, property: 'padding-top' },
+        { selector: selectors.wrapper, property: 'padding-bottom' },
+      ],
+      horizontalPadding: [
+        { selector: selectors.wrapper, property: 'padding-left' },
+        { selector: selectors.wrapper, property: 'padding-right' },
+      ],
 
       flexDirection: {},
       justifyContent: {},
@@ -23552,17 +23601,23 @@ const CollapsibleContainerClass = compose(
 
       boxShadow: { selector: selectors.wrapper },
 
-      headerIconOrder: { selector: selectors.icon, property: 'order' },
+      headerIconOrder: { selector: selectors.iconWrapper, property: 'order' },
       headerCursor: { selector: selectors.header, property: 'cursor' },
       headerGap: { selector: selectors.header, property: 'gap' },
       textGrow: { selector: selectors.text, property: 'flex-grow' },
       textDirection: { selector: selectors.text, property: 'direction' },
-      iconAnimationDuration: { selector: selectors.icon, property: 'transition-duration' },
-      contentAnimationDuration: { selector: selectors.content, property: 'transition-duration' },
+      iconAnimationDuration: {
+        selector: selectors.icon,
+        property: 'transition-duration',
+      },
+      contentAnimationDuration: {
+        selector: selectors.content,
+        property: 'transition-duration',
+      },
     },
   }),
   draggableMixin,
-  componentNameValidationMixin
+  componentNameValidationMixin,
 )(RawCollapsibleContainer);
 
 const globalRefs = getThemeRefs$1(globals);
@@ -23705,7 +23760,6 @@ const components = {
   loaderRadial: loaderRadial$1,
   loaderLinear: loaderLinear$1,
   comboBox: comboBox$1,
-  image: image$1,
   phoneField: phoneField$1,
   phoneInputBoxField: phoneInputBoxField$1,
   newPassword: newPassword$1,
@@ -23725,6 +23779,7 @@ const components = {
   userAuthMethod: userAuthMethod$1,
   samlGroupMappings: samlGroupMappings$1,
   policyValidation: policyValidation$1,
+  image: image$1,
   icon: icon$2,
   codeSnippet,
   radioGroup: radioGroup$1,