@descope/web-components-ui 1.86.0 → 1.88.0

package/dist/cjs/index.cjs.js

@@ -3,9 +3,9 @@
 var merge = require('lodash.merge');
 require('lodash.debounce');
 var Color = require('color');
-var DOMPurify = require('dompurify');
 var MarkdownIt = require('markdown-it');
 require('libphonenumber-js/min');
+var DOMPurify = require('dompurify');
 var hljs = require('highlight.js');
 var core = require('@zxcvbn-ts/core');
 var zxcvbnCommonPackage = require('@zxcvbn-ts/language-common');
@@ -1396,8 +1396,10 @@ const createStyleMixin$1 =
         this.#baseSelector = baseSelector ?? this.baseSelector;
         this.#getRootElement = getRootElement;
 
-        this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
-          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX$1, componentNameSuffix, key)
+        this.#styleAttributes = Object.keys(
+          CustomStyleMixinClass.cssVarList,
+        ).map((key) =>
+          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX$1, componentNameSuffix, key),
         );
       }
 
@@ -1407,14 +1409,23 @@ const createStyleMixin$1 =
       }
 
       #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();
       }
 
@@ -1422,10 +1433,13 @@ const createStyleMixin$1 =
         if (this.#styleAttributes.length) {
           const classSpecifier = createClassSelectorSpecifier$1(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY
+            CSS_SELECTOR_SPECIFIER_MULTIPLY,
           );
 
-          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
+          this.#overrideStyleEle = injectStyle(
+            `:host(${classSpecifier}) {}`,
+            this.#rootElement,
+          );
         }
       }
 
@@ -1436,7 +1450,7 @@ const createStyleMixin$1 =
 
         const varName = getCssVarName(
           componentName,
-          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX$1}-`), '')
+          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX$1}-`), ''),
         );
 
         if (value) style?.setProperty(varName, value);
@@ -1459,7 +1473,7 @@ const createStyleMixin$1 =
           const style = createStyle$1(
             kebabCaseJoin(componentName, this.#componentNameSuffix),
             this.#baseSelector,
-            mappings
+            mappings,
           );
 
           injectStyle(style, this.#rootElement, { prepend: true });
@@ -1467,13 +1481,16 @@ const createStyleMixin$1 =
       }
 
       #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);
 
@@ -1811,7 +1828,7 @@ const inputEventsDispatchingMixin$1 = (superclass) =>
     }
   };
 
-const observedAttributes$6 = ['required', 'pattern'];
+const observedAttributes$5 = ['required', 'pattern'];
 
 const errorAttributes$1 = {
   valueMissing: 'data-errormessage-value-missing',
@@ -1830,7 +1847,7 @@ const inputValidationMixin$1 = (superclass) =>
     #validationTarget = validationTargetSymbol$1;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$6];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
     }
 
     static get formAssociated() {
@@ -2002,7 +2019,7 @@ const inputValidationMixin$1 = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$6.includes(attrName)) {
+      if (observedAttributes$5.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -2551,149 +2568,29 @@ const connectorMixin =
       }
     };
 
-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$1a = getComponentName('icon');
 
-class RawIcon extends createBaseClass$1({ componentName: componentName$1a, 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$1({
     mappings: {
       fill: {},
-      alignItems: {}
     },
   }),
   draggableMixin$1,
-  componentNameValidationMixin$1
-)(RawIcon);
+  componentNameValidationMixin$1,
+)(
+  createProxy$1({
+    slots: [],
+    wrappedEleName: 'descope-image',
+    style: () => `
+      :host {
+        display: inline-flex;
+      }
+      `,
+    excludeAttrsSync: ['tabindex', 'class'],
+    componentName: componentName$1a,
+  }),
+);
 
 const clickableMixin = (superclass) =>
   class ClickableMixinClass extends superclass {
@@ -3522,7 +3419,7 @@ const createProxy = ({
   return ProxyClass;
 };
 
-const observedAttributes$5 = ['required', 'pattern'];
+const observedAttributes$4 = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
@@ -3541,7 +3438,7 @@ const inputValidationMixin = (superclass) =>
     #validationTarget = validationTargetSymbol;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$4];
     }
 
     static get formAssociated() {
@@ -3713,7 +3610,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$5.includes(attrName)) {
+      if (observedAttributes$4.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -7307,12 +7204,12 @@ const LoaderRadialClass = compose$1(
 
 const componentName$R = getComponentName$1('passcode');
 
-const observedAttributes$4 = ['digits'];
+const observedAttributes$3 = ['digits'];
 
 const customMixin$b = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
-      return observedAttributes$4.concat(superclass.observedAttributes || []);
+      return observedAttributes$3.concat(superclass.observedAttributes || []);
     }
 
     get digits() {
@@ -8626,64 +8523,6 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$F
 });
 
-const observedAttributes$3 = ['src', 'alt'];
-
-const componentName$N = getComponentName$1('image');
-
-const BaseClass$4 = createBaseClass({ componentName: componentName$N, baseSelector: ':host > img' });
-class RawImage extends BaseClass$4 {
-  static get observedAttributes() {
-    return observedAttributes$3.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$3 });
-  }
-}
-
-const ImageClass = compose$1(
-  createStyleMixin({
-    mappings: {
-      height: { selector: () => ':host' },
-      width: { selector: () => ':host' },
-    },
-  }),
-  draggableMixin
-)(RawImage);
-
-const vars$E = ImageClass.cssVarList;
-
-const image = {};
-
-var image$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: image,
-  vars: vars$E
-});
-
 var CountryCodes = [
   // United States should be the first option
   {
@@ -9895,14 +9734,14 @@ var CountryCodes = [
   ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 ];
 
-const componentName$M = getComponentName$1('phone-field-internal');
+const componentName$N = getComponentName$1('phone-field-internal');
 
-createBaseInputClass({ componentName: componentName$M, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$N, baseSelector: 'div' });
 
 const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$L = getComponentName$1('phone-field');
+const componentName$M = getComponentName$1('phone-field');
 
 const customMixin$a = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -9916,15 +9755,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$M}
+				<${componentName$N}
 					tabindex="-1"
 					slot="input"
-				></${componentName$M}>
+				></${componentName$N}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$M);
+      this.inputElement = this.shadowRoot.querySelector(componentName$N);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -10196,44 +10035,44 @@ const PhoneFieldClass = compose$1(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$L,
+    componentName: componentName$M,
   })
 );
 
-const vars$D = PhoneFieldClass.cssVarList;
+const vars$E = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$D.hostWidth]: refs$1.width,
-  [vars$D.hostDirection]: refs$1.direction,
-  [vars$D.fontSize]: refs$1.fontSize,
-  [vars$D.fontFamily]: refs$1.fontFamily,
-  [vars$D.labelTextColor]: refs$1.labelTextColor,
-  [vars$D.labelRequiredIndicator]: refs$1.requiredIndicator,
-  [vars$D.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$D.inputValueTextColor]: refs$1.valueTextColor,
-  [vars$D.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-  [vars$D.inputBorderStyle]: refs$1.borderStyle,
-  [vars$D.inputBorderWidth]: refs$1.borderWidth,
-  [vars$D.inputBorderColor]: refs$1.borderColor,
-  [vars$D.inputBorderRadius]: refs$1.borderRadius,
-  [vars$D.inputOutlineStyle]: refs$1.outlineStyle,
-  [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.valueInputHeight]: refs$1.valueInputHeight,
-  [vars$D.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+  [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,
 
   // error message icon
-  [vars$D.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$D.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$D.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$D.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$D.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$D.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [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'
@@ -10243,16 +10082,16 @@ const phoneField = {
 var phoneField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneField,
-  vars: vars$D
+  vars: vars$E
 });
 
-const componentName$K = getComponentName$1('phone-field-internal-input-box');
+const componentName$L = getComponentName$1('phone-field-internal-input-box');
 
-createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$L, baseSelector: 'div' });
 
 const textVars$1 = TextFieldClass.cssVarList;
 
-const componentName$J = getComponentName$1('phone-input-box-field');
+const componentName$K = getComponentName$1('phone-input-box-field');
 
 const customMixin$9 = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
@@ -10266,15 +10105,15 @@ const customMixin$9 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$K}
+				<${componentName$L}
 					tabindex="-1"
 					slot="input"
-				></${componentName$K}>
+				></${componentName$L}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$K);
+      this.inputElement = this.shadowRoot.querySelector(componentName$L);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -10478,70 +10317,70 @@ const PhoneFieldInputBoxClass = compose$1(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$J,
+    componentName: componentName$K,
   })
 );
 
-const vars$C = PhoneFieldInputBoxClass.cssVarList;
+const vars$D = PhoneFieldInputBoxClass.cssVarList;
 
 const phoneInputBoxField = {
-  [vars$C.hostWidth]: '16em',
-  [vars$C.hostMinWidth]: refs$1.minWidth,
-  [vars$C.hostDirection]: refs$1.direction,
-  [vars$C.fontSize]: refs$1.fontSize,
-  [vars$C.fontFamily]: refs$1.fontFamily,
-  [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.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.valueInputHeight]: refs$1.valueInputHeight,
-  [vars$C.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
-  [vars$C.inputHorizontalPadding]: '0',
+  [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,
+  [vars$D.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$D.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$D.inputBorderStyle]: refs$1.borderStyle,
+  [vars$D.inputBorderWidth]: refs$1.borderWidth,
+  [vars$D.inputBorderColor]: refs$1.borderColor,
+  [vars$D.inputBorderRadius]: refs$1.borderRadius,
+  [vars$D.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$D.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$D.inputOutlineColor]: refs$1.outlineColor,
+  [vars$D.inputOutlineOffset]: refs$1.outlineOffset,
+  [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$C.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$C.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$C.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$C.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$C.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$C.errorMessageFontSize]: refs$1.errorMessageFontSize,
-
-  _fullWidth: {
-    [vars$C.hostWidth]: refs$1.width,
-  },
-};
-
+  [vars$D.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$D.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$D.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$D.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$D.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$D.errorMessageFontSize]: refs$1.errorMessageFontSize,
+
+  _fullWidth: {
+    [vars$D.hostWidth]: refs$1.width,
+  },
+};
+
 var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneInputBoxField,
-  vars: vars$C
+  vars: vars$D
 });
 
-const componentName$I = getComponentName$1('new-password-internal');
+const componentName$J = 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$H = getComponentName$1('policy-validation');
+const componentName$I = getComponentName$1('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -10551,7 +10390,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -10823,7 +10662,7 @@ const PolicyValidationClass = compose$1(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$G = getComponentName$1('new-password');
+const componentName$H = getComponentName$1('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -10837,18 +10676,18 @@ const customMixin$8 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$I}
+			<${componentName$J}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${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);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -11032,48 +10871,48 @@ const NewPasswordClass = compose$1(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$G,
+    componentName: componentName$H,
   })
 );
 
 const globalRefs$r = getThemeRefs(globals$1);
-const vars$B = NewPasswordClass.cssVarList;
+const vars$C = 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,
+  [vars$C.hostWidth]: refs$1.width,
+  [vars$C.hostMinWidth]: refs$1.minWidth,
+  [vars$C.hostDirection]: refs$1.direction,
+  [vars$C.fontSize]: refs$1.fontSize,
+  [vars$C.fontFamily]: refs$1.fontFamily,
+  [vars$C.labelFontSize]: refs$1.labelFontSize,
+  [vars$C.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$C.labelTextColor]: refs$1.labelTextColor,
+  [vars$C.spaceBetweenInputs]: '1em',
+  [vars$C.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$C.policyPreviewBackgroundColor]: 'none',
+  [vars$C.policyPreviewPadding]: globalRefs$r.spacing.lg,
+  [vars$C.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,
+  [vars$C.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$C.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$C.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$C.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$C.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$C.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 getFileBase64 = (fileObj) => {
@@ -11088,7 +10927,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$F = getComponentName$1('upload-file');
+const componentName$G = getComponentName$1('upload-file');
 
 const observedAttributes$2 = [
   'title',
@@ -11103,7 +10942,7 @@ const observedAttributes$2 = [
   'icon',
 ];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$F, baseSelector: ':host > div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$G, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -11322,77 +11161,77 @@ const UploadFileClass = compose$1(
   componentNameValidationMixin
 )(RawUploadFile);
 
-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 componentName$E = getComponentName$1('button-selection-group-item');
+const componentName$F = getComponentName$1('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$E,
+  componentName: componentName$F,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -11505,37 +11344,37 @@ const ButtonSelectionGroupItemClass = compose$1(
 
 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 createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -11626,10 +11465,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$D = getComponentName$1('button-selection-group-internal');
+const componentName$E = getComponentName$1('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$D
+  componentName$E
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -11874,7 +11713,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$C = getComponentName$1('button-selection-group');
+const componentName$D = getComponentName$1('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -11883,19 +11722,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$D}
+      <${componentName$E}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$D}>
+      </${componentName$E}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$D);
+      this.inputElement = this.shadowRoot.querySelector(componentName$E);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -11920,7 +11759,7 @@ const ButtonSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$C,
+    componentName: componentName$D,
   })
 );
 
@@ -11945,22 +11784,22 @@ 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 componentName$B = getComponentName$1('button-multi-selection-group-internal');
+const componentName$C = getComponentName$1('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$B
+  componentName$C
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -12063,7 +11902,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$A = getComponentName$1('button-multi-selection-group');
+const componentName$B = getComponentName$1('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -12072,19 +11911,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$B}
+      <${componentName$C}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$B}>
+      </${componentName$C}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$B);
+      this.inputElement = this.shadowRoot.querySelector(componentName$C);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -12109,23 +11948,23 @@ const ButtonMultiSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
 
-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 componentName$z = getComponentName$1('modal');
+const componentName$A = getComponentName$1('modal');
 
 const observedAttrs$3 = ['opened'];
 
@@ -12249,7 +12088,7 @@ const ModalClass = compose$1(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$z,
+    componentName: componentName$A,
   })
 );
 
@@ -12263,14 +12102,14 @@ 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 isValidDataType = (data) => {
@@ -12346,7 +12185,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$y = getComponentName$1('grid');
+const componentName$z = getComponentName$1('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -12700,52 +12539,52 @@ const GridClass = compose$1(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
 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,
   },
 };
 
@@ -12753,10 +12592,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$v
+  vars: vars$w
 });
 
-const componentName$x = getComponentName$1('notification-card');
+const componentName$y = getComponentName$1('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -12864,54 +12703,54 @@ const NotificationCardClass = compose$1(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$x,
+    componentName: componentName$y,
   })
 );
 
 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,
     },
   },
 };
@@ -12919,10 +12758,10 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$u
+  vars: vars$v
 });
 
-const componentName$w = getComponentName$1('multi-select-combo-box');
+const componentName$x = getComponentName$1('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -13575,101 +13414,101 @@ 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$w,
+    componentName: componentName$x,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
 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 componentName$v = getComponentName$1('badge');
+const componentName$w = getComponentName$1('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -13725,65 +13564,65 @@ const BadgeClass = compose$1(
 )(RawBadge);
 
 const globalRefs$k = getThemeRefs(globals$1);
-const vars$s = BadgeClass.cssVarList;
+const vars$t = BadgeClass.cssVarList;
 
 const badge$2 = {
-  [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,
       },
     },
   },
@@ -13792,12 +13631,12 @@ const badge$2 = {
 var badge$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge$2,
-  vars: vars$s
+  vars: vars$t
 });
 
-const componentName$u = getComponentName('avatar');
+const componentName$v = getComponentName('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$u,
+  componentName: componentName$v,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -13940,21 +13779,21 @@ 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 componentName$t = getComponentName$1('mappings-field-internal');
+const componentName$u = getComponentName$1('mappings-field-internal');
 
-createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
 
-const componentName$s = getComponentName$1('mappings-field');
+const componentName$t = getComponentName$1('mappings-field');
 
 const customMixin$6 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -13983,14 +13822,14 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$t}
+      <${componentName$u}
         tabindex="-1"
-      ></${componentName$t}>
+      ></${componentName$u}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$t);
+      this.inputElement = this.shadowRoot.querySelector(componentName$u);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -14125,47 +13964,47 @@ const MappingsFieldClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$s,
+    componentName: componentName$t,
   })
 );
 
 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
 });
 
 var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$r = getComponentName$1('user-attribute');
+const componentName$s = getComponentName$1('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$r,
+  componentName: componentName$s,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -14410,31 +14249,31 @@ const UserAttributeClass = compose$1(
 )(RawUserAttribute);
 
 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
 });
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$q = getComponentName$1('user-auth-method');
+const componentName$r = getComponentName$1('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$q,
+  componentName: componentName$r,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -14630,31 +14469,31 @@ const UserAuthMethodClass = compose$1(
 )(RawUserAuthMethod);
 
 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 componentName$p = getComponentName$1('saml-group-mappings-internal');
+const componentName$q = getComponentName$1('saml-group-mappings-internal');
 
-createBaseInputClass({ componentName: componentName$p, baseSelector: '' });
+createBaseInputClass({ componentName: componentName$q, baseSelector: '' });
 
-const componentName$o = getComponentName$1('saml-group-mappings');
+const componentName$p = getComponentName$1('saml-group-mappings');
 
 const customMixin$5 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -14664,14 +14503,14 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$p}
+      <${componentName$q}
         tabindex="-1"
-      ></${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, this.inputElement, {
         includeAttrs: [
@@ -14755,68 +14594,268 @@ const SamlGroupMappingsClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$o,
+    componentName: componentName$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$2 = {};
 
 var icon$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon$2,
+  vars: vars$m
+});
+
+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$o = getComponentName('image');
+
+const srcAttrs = ['src', 'src-dark'];
+
+class RawImage extends createBaseClass$1({
+  componentName: componentName$o,
+  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$1({
+    mappings: {
+      fill: {},
+      height: { selector: () => ':host' },
+      width: { selector: () => ':host' },
+    },
+  }),
+  draggableMixin$1,
+  componentNameValidationMixin$1,
+)(RawImage);
+
+const vars$l = ImageClass.cssVarList;
+
+const image = {};
+
+var image$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: image,
   vars: vars$l
 });
 
@@ -20074,7 +20113,7 @@ class RawTimer extends BaseClass$2 {
 
     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>
 		`;
@@ -20174,7 +20213,7 @@ class RawTimer extends BaseClass$2 {
   }
 
   #toggleIcon(val) {
-    this.icon.classList.toggle('hidden', val === 'true');
+    this.icon.classList.toggle('hidden', val);
   }
 
   #handlePause(paused) {
@@ -20198,7 +20237,7 @@ class RawTimer extends BaseClass$2 {
         this.reset();
       }
       if (attrName === 'hide-icon') {
-        this.#toggleIcon(newValue);
+        this.#toggleIcon(newValue === 'true');
       }
       if (attrName === 'paused') {
         this.#handlePause(newValue === 'true');
@@ -20643,7 +20682,10 @@ var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQ
 
 const componentName$2 = getComponentName('collapsible-container');
 
-class RawCollapsibleContainer extends createBaseClass$1({ componentName: componentName$2, baseSelector: 'slot' }) {
+class RawCollapsibleContainer extends createBaseClass$1({
+  componentName: componentName$2,
+  baseSelector: 'slot',
+}) {
   static get observedAttributes() {
     return ['collapsed', 'collapsible', 'text'];
   }
@@ -20655,7 +20697,9 @@ class RawCollapsibleContainer extends createBaseClass$1({ componentName: compone
     <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>
@@ -20670,7 +20714,6 @@ class RawCollapsibleContainer extends createBaseClass$1({ componentName: compone
       div.content {
         transition-property: max-height;
         overflow: auto;
-        transition-property: max-height;
         height: auto;
 			}
 			slot {
@@ -20689,11 +20732,15 @@ class RawCollapsibleContainer extends createBaseClass$1({ componentName: compone
           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);
@@ -20716,7 +20763,7 @@ class RawCollapsibleContainer extends createBaseClass$1({ componentName: compone
         flex-direction: column;
       }
   `,
-      this
+      this,
     );
 
     this.header = this.shadowRoot.querySelector('.header');
@@ -20727,7 +20774,7 @@ class RawCollapsibleContainer extends createBaseClass$1({ componentName: compone
   }
 
   get isCollapsible() {
-    return this.getAttribute('collapsible') === 'true'
+    return this.getAttribute('collapsible') === 'true';
   }
 
   calcContentHeight() {
@@ -20778,7 +20825,7 @@ class RawCollapsibleContainer extends createBaseClass$1({ componentName: compone
     });
     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' },
     });
   }
 
@@ -20790,7 +20837,7 @@ class RawCollapsibleContainer extends createBaseClass$1({ componentName: compone
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === 'text') {
       this.updateHeaderText();
-      return
+      return;
     }
     const collapsed = this.isCollapsed && this.isCollapsible;
     if (collapsed) {
@@ -20804,6 +20851,7 @@ class RawCollapsibleContainer extends createBaseClass$1({ componentName: compone
 const selectors = {
   host: () => ':host',
   icon: () => 'descope-icon',
+  iconWrapper: () => '.icon',
   header: () => '.header',
   text: () => 'span',
   wrapper: () => '.wrapper',
@@ -20815,8 +20863,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: {},
@@ -20837,17 +20891,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$1,
-  componentNameValidationMixin$1
+  componentNameValidationMixin$1,
 )(RawCollapsibleContainer);
 
 const globalRefs = getThemeRefs$1(globals);
@@ -20990,7 +21050,6 @@ const components = {
   loaderRadial: loaderRadial$1,
   loaderLinear: loaderLinear$1,
   comboBox: comboBox$1,
-  image: image$1,
   phoneField: phoneField$1,
   phoneInputBoxField: phoneInputBoxField$1,
   newPassword: newPassword$1,
@@ -21010,6 +21069,7 @@ const components = {
   userAuthMethod: userAuthMethod$1,
   samlGroupMappings: samlGroupMappings$1,
   policyValidation: policyValidation$1,
+  image: image$1,
   icon: icon$3,
   codeSnippet,
   radioGroup: radioGroup$1,