npm - @descope/web-components-ui - Versions diffs - 1.86.0 → 1.88.0 - Mend

@descope/web-components-ui 1.86.0 → 1.88.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/dist/index.esm.js CHANGED Viewed

@@ -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,201 @@ const ThirdPartyAppLogoClass = compose$1(
   componentNameValidationMixin$1
 )(RawThirdPartyAppLogoClass);
+const getFileExtension = (path) => {
+  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
+  return match ? match[1] : null;
+};
+const base64Prefix = 'data:image/svg+xml;base64,';
+const isBase64Svg = (src) => src.startsWith(base64Prefix);
+const createImgEle = (src, altText) => {
+  const ele = document.createElement('img');
+  ele.setAttribute('src', src);
+  ele.setAttribute('alt', altText);
+  return ele;
+};
+const createSvgEle = (text) => {
+  // we want to purify the SVG to avoid XSS attacks
+  const clean = DOMPurify.sanitize(text, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+  });
+  const parser = new DOMParser();
+  const ele = parser
+    .parseFromString(clean, 'image/svg+xml')
+    .querySelector('svg');
+  return ele;
+};
+const createImage = async (src, altText) => {
+  try {
+    let ele;
+    if (isBase64Svg(src)) {
+      // handle base64 source
+      const svgXml = atob(src.slice(base64Prefix.length));
+      ele = createSvgEle(svgXml);
+    } else if (getFileExtension(src) === 'svg') {
+      // handle urls
+      const fetchedSrc = await fetch(src);
+      const text = await fetchedSrc.text();
+      ele = createSvgEle(text);
+    } else {
+      // handle binary
+      ele = createImgEle(src, altText);
+    }
+    ele.style.setProperty('max-width', '100%');
+    ele.style.setProperty('max-height', '100%');
+    return ele;
+  } catch {
+    return null;
+  }
+};
+/* eslint-disable no-use-before-define */
+const componentName$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 altText() {
+    return this.getAttribute('alt') || '';
+  }
+  get legacySrc() {
+    return this.getAttribute('src');
+  }
+  get themeSrc() {
+    return this.getAttribute(`src-${this.currentThemeName}`);
+  }
+  get src() {
+    return this.themeSrc || this.legacySrc;
+  }
+  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
+  // with the value from the `st-fill` attribute
+  // eslint-disable-next-line class-methods-use-this
+  updateFillColor(node) {
+    // set fill to root node and all its relevant selectors
+    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
+    elementsToReplace.forEach((ele) => {
+      ele.setAttribute(
+        'fill',
+        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`,
+      );
+    });
+  }
+  renderImage() {
+    this.toggleVisibility(this.src);
+    createImage(this.src, this.altText).then((res) => {
+      this.innerHTML = '';
+      if (res) {
+        this.updateFillColor(res);
+        this.appendChild(res);
+      }
+    });
+  }
+  // render only when src attribute matches current theme
+  shouldRender(src) {
+    const srcVal = this.getAttribute(src);
+    return this.src === srcVal;
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (oldValue === newValue) return;
+    if (this.shouldRender(attrName)) {
+      this.renderImage();
+    }
+  }
+}
+const ImageClass = compose(
+  createStyleMixin({
+    mappings: {
+      fill: {},
+      height: { selector: () => ':host' },
+      width: { selector: () => ':host' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawImage);
+customElements.define(componentName$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 +20469,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 +20538,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 +20556,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 +20579,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 +20593,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 +20730,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 +20764,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 +20823,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 +20877,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 +21035,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 +21073,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 +21580,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 +22828,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 +22928,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 +22952,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 +23397,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 +23412,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 +23429,6 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
       div.content {
         transition-property: max-height;
         overflow: auto;
-        transition-property: max-height;
         height: auto;
 			}
 			slot {
@@ -23404,11 +23447,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 +23478,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
         flex-direction: column;
       }
   `,
-      this
+      this,
     );
     this.header = this.shadowRoot.querySelector('.header');
@@ -23442,7 +23489,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
   }
   get isCollapsible() {
-    return this.getAttribute('collapsible') === 'true'
+    return this.getAttribute('collapsible') === 'true';
   }
   calcContentHeight() {
@@ -23493,7 +23540,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 +23552,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 +23566,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
 const selectors = {
   host: () => ':host',
   icon: () => 'descope-icon',
+  iconWrapper: () => '.icon',
   header: () => '.header',
   text: () => 'span',
   wrapper: () => '.wrapper',
@@ -23530,8 +23578,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 +23606,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 +23765,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 +23784,7 @@ const components = {
   userAuthMethod: userAuthMethod$1,
   samlGroupMappings: samlGroupMappings$1,
   policyValidation: policyValidation$1,
+  image: image$1,
   icon: icon$2,
   codeSnippet,
   radioGroup: radioGroup$1,