@descope/web-components-ui 1.108.0 → 1.110.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');
@@ -557,9 +557,6 @@ const inputFloatingLabelStyle$1 = () => {
   :host([label-type="floating"]) {
     position: relative;
   }
-  :host([label-type="floating"][has-label]) [slot="label"] {
-    padding: 0;
-  }
   :host([label-type="floating"][has-label]) > ::part(label) {
     z-index: 1;
     padding: 0;
@@ -2724,12 +2721,206 @@ const createDynamicDataMixin$1 =
       }
     };
 
-const componentName$1c = getComponentName('icon');
+const getFileExtension = (path) => {
+  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
+  return match ? match[1] : null;
+};
+
+const base64Prefix = 'data:image/svg+xml;base64,';
 
-const IconClass = compose(
+const isBase64Svg = (src) => src.startsWith(base64Prefix);
+
+const createImgEle = (src, altText) => {
+  const ele = document.createElement('img');
+  ele.setAttribute('src', src);
+  ele.setAttribute('alt', altText);
+  return ele;
+};
+
+const createSvgEle = (text) => {
+  // we want to purify the SVG to avoid XSS attacks
+  const clean = DOMPurify.sanitize(text, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    // allow image to render
+    ADD_TAGS: ['image'],
+    // forbid interactiviy via `use` tags (which are sanitized by default)
+    FORBID_TAGS: ['defs']
+  });
+
+  const parser = new DOMParser();
+  const ele = parser
+    .parseFromString(clean, 'image/svg+xml')
+    .querySelector('svg');
+  return ele;
+};
+
+const createImage = async (src, altText) => {
+  try {
+    let ele;
+    if (isBase64Svg(src)) {
+      // handle base64 source
+      const svgXml = atob(src.slice(base64Prefix.length));
+      ele = createSvgEle(svgXml);
+    } else if (getFileExtension(src) === 'svg') {
+      // handle urls
+      const fetchedSrc = await fetch(src);
+      const text = await fetchedSrc.text();
+      ele = createSvgEle(text);
+    } else {
+      // handle binary
+      ele = createImgEle(src, altText);
+    }
+
+    ele.style.setProperty('max-width', '100%');
+    ele.style.setProperty('max-height', '100%');
+
+    return ele;
+  } catch {
+    return null;
+  }
+};
+
+/* eslint-disable no-use-before-define */
+
+const componentName$1c = getComponentName('image');
+
+const srcAttrs = ['src', 'src-dark'];
+
+class RawImage extends createBaseClass$1({
+  componentName: componentName$1c,
+  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 componentName$1b = getComponentName('icon');
+
+const IconClass = compose(
+  createStyleMixin$1({
+    mappings: {
+      fill: [{}, { property: ImageClass.cssVarList.fill }],
     },
   }),
   draggableMixin$1,
@@ -2744,7 +2935,7 @@ const IconClass = compose(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class'],
-    componentName: componentName$1c,
+    componentName: componentName$1b,
   }),
 );
 
@@ -2759,7 +2950,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1b = getComponentName('button');
+const componentName$1a = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -2835,9 +3026,9 @@ const ButtonClass = compose(
 
       labelTextColor: { property: 'color' },
       iconColor: {
-        selector: () => `::slotted(*)`,
-        property: IconClass.cssVarList.fill,
-      },
+		selector: () => `::slotted(*)`,
+		property: IconClass.cssVarList.fill
+	  },
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
       labelSpacing: { ...label$a, property: 'gap' },
       textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
@@ -2875,7 +3066,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$1b,
+    componentName: componentName$1a,
   })
 );
 
@@ -2923,7 +3114,7 @@ const mode = {
   surface: globalRefs$G.colors.surface,
 };
 
-const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1({ mode }, componentName$1b);
+const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1({ mode }, componentName$1a);
 
 const button = {
   ...helperTheme$5,
@@ -4784,9 +4975,6 @@ const inputFloatingLabelStyle = () => {
   :host([label-type="floating"]) {
     position: relative;
   }
-  :host([label-type="floating"][has-label]) [slot="label"] {
-    padding: 0;
-  }
   :host([label-type="floating"][has-label]) > ::part(label) {
     z-index: 1;
     padding: 0;
@@ -4795,7 +4983,7 @@ const inputFloatingLabelStyle = () => {
   `;
 };
 
-const componentName$1a = getComponentName$1('text-field');
+const componentName$19 = getComponentName$1('text-field');
 
 const observedAttrs$4 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -4917,11 +5105,11 @@ const TextFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1a,
+    componentName: componentName$19,
   })
 );
 
-const componentName$19 = getComponentName$1('input-wrapper');
+const componentName$18 = getComponentName$1('input-wrapper');
 const globalRefs$F = getThemeRefs(globals$1);
 
 const [theme$2, refs$1, vars$$] = createHelperVars(
@@ -5043,7 +5231,7 @@ const [theme$2, refs$1, vars$$] = createHelperVars(
       backgroundColor: globalRefs$F.colors.surface.main,
     },
   },
-  componentName$19
+  componentName$18
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -5156,7 +5344,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$18 = getComponentName$1('password');
+const componentName$17 = getComponentName$1('password');
 
 const customMixin$d = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -5438,7 +5626,7 @@ const PasswordClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$18,
+    componentName: componentName$17,
   })
 );
 
@@ -5497,7 +5685,7 @@ var password$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Z
 });
 
-const componentName$17 = getComponentName$1('number-field');
+const componentName$16 = getComponentName$1('number-field');
 
 const NumberFieldClass = compose$1(
   createStyleMixin({
@@ -5531,7 +5719,7 @@ const NumberFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$17,
+    componentName: componentName$16,
   })
 );
 
@@ -5587,7 +5775,7 @@ var numberField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Y
 });
 
-const componentName$16 = getComponentName$1('email-field');
+const componentName$15 = getComponentName$1('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -5656,7 +5844,7 @@ const EmailFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$16,
+    componentName: componentName$15,
   })
 );
 
@@ -5712,7 +5900,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$X
 });
 
-const componentName$15 = getComponentName$1('text-area');
+const componentName$14 = getComponentName$1('text-area');
 
 const {
   host: host$q,
@@ -5794,7 +5982,7 @@ const TextAreaClass = compose$1(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$15,
+    componentName: componentName$14,
   })
 );
 
@@ -5856,9 +6044,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$14 = getComponentName$1('boolean-field-internal');
+const componentName$13 = getComponentName$1('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$14, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$13, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -5867,14 +6055,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$14}
+				<${componentName$13}
 					tabindex="-1"
 					slot="input"
-				></${componentName$14}>
+				></${componentName$13}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$14);
+      this.inputElement = this.shadowRoot.querySelector(componentName$13);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs$1(this, this.inputElement, {
@@ -5943,7 +6131,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$13 = getComponentName$1('checkbox');
+const componentName$12 = getComponentName$1('checkbox');
 
 const {
   host: host$p,
@@ -6061,7 +6249,7 @@ const CheckboxClass = compose$1(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$13,
+    componentName: componentName$12,
   })
 );
 
@@ -6106,7 +6294,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$V
 });
 
-const componentName$12 = getComponentName$1('switch-toggle');
+const componentName$11 = getComponentName$1('switch-toggle');
 
 const {
   host: host$o,
@@ -6245,7 +6433,7 @@ const SwitchToggleClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$12,
+    componentName: componentName$11,
   })
 );
 
@@ -6326,9 +6514,9 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
   vars: vars$U
 });
 
-const componentName$11 = getComponentName$1('container');
+const componentName$10 = getComponentName$1('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$11, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$10, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -6413,7 +6601,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$11
+  componentName$10
 );
 
 const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -6573,10 +6761,10 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$10 = getComponentName$1('logo');
+const componentName$$ = getComponentName$1('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$10,
+  componentName: componentName$$,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -6593,10 +6781,10 @@ var logo$3 = /*#__PURE__*/Object.freeze({
   vars: vars$S
 });
 
-const componentName$$ = getComponentName$1('totp-image');
+const componentName$_ = getComponentName$1('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$$,
+  componentName: componentName$_,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -6613,10 +6801,10 @@ var totpImage = /*#__PURE__*/Object.freeze({
   vars: vars$R
 });
 
-const componentName$_ = getComponentName$1('notp-image');
+const componentName$Z = getComponentName$1('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$_,
+  componentName: componentName$Z,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -6633,10 +6821,10 @@ var notpImage = /*#__PURE__*/Object.freeze({
   vars: vars$Q
 });
 
-const componentName$Z = getComponentName('text');
+const componentName$Y = getComponentName('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$Z,
+  componentName: componentName$Y,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -6825,9 +7013,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
 
 
-const componentName$Y = getComponentName('enriched-text');
+const componentName$X = getComponentName('enriched-text');
 
-class EnrichedText extends createBaseClass$1({ componentName: componentName$Y, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass$1({ componentName: componentName$X, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -7024,9 +7212,9 @@ const EnrichedTextClass = compose(
   componentNameValidationMixin$1
 )(EnrichedText);
 
-const componentName$X = getComponentName('link');
+const componentName$W = getComponentName('link');
 
-class RawLink extends createBaseClass$1({ componentName: componentName$X, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass$1({ componentName: componentName$W, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -7168,8 +7356,8 @@ var enrichedText$1 = /*#__PURE__*/Object.freeze({
   vars: vars$N
 });
 
-const componentName$W = getComponentName$1('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$W, baseSelector: ':host > div' }) {
+const componentName$V = getComponentName$1('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$V, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -7280,7 +7468,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$W
+  componentName$V
 );
 
 const divider = {
@@ -7324,13 +7512,13 @@ var divider$1 = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable no-param-reassign */
 
-const componentName$V = getComponentName$1('passcode-internal');
+const componentName$U = getComponentName$1('passcode-internal');
 
-createBaseInputClass({ componentName: componentName$V, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$U, baseSelector: 'div' });
 
-const componentName$U = getComponentName$1('loader-radial');
+const componentName$T = getComponentName$1('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$U, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$T, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -7378,7 +7566,7 @@ const LoaderRadialClass = compose$1(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-const componentName$T = getComponentName$1('passcode');
+const componentName$S = getComponentName$1('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -7423,18 +7611,18 @@ const customMixin$b = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$V}
+      <${componentName$U}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$V}>
+      ><slot></slot></${componentName$U}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$V);
+      this.inputElement = this.shadowRoot.querySelector(componentName$U);
 
       forwardAttrs$1(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -7593,7 +7781,7 @@ const PasscodeClass = compose$1(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$T,
+    componentName: componentName$S,
   })
 );
 
@@ -7646,11 +7834,11 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
   vars: vars$L
 });
 
-const componentName$S = getComponentName$1('loader-linear');
+const componentName$R = getComponentName$1('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$S, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$R, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$S;
+    return componentName$R;
   }
 
   constructor() {
@@ -7775,7 +7963,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
       },
     },
   },
-  componentName$U
+  componentName$T
 );
 
 const loaderRadial = {
@@ -7815,7 +8003,7 @@ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   vars: vars$J
 });
 
-const componentName$R = getComponentName('combo-box');
+const componentName$Q = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -8464,12 +8652,12 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
-    componentName: componentName$R,
+    componentName: componentName$Q,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-const componentName$Q = getComponentName('input-wrapper');
+const componentName$P = getComponentName('input-wrapper');
 const globalRefs$u = getThemeRefs$1(globals);
 
 const [theme$1, refs, vars$I] = createHelperVars$1(
@@ -8592,7 +8780,7 @@ const [theme$1, refs, vars$I] = createHelperVars$1(
       backgroundColor: globalRefs$u.colors.surface.main,
     },
   },
-  componentName$Q,
+  componentName$P,
 );
 
 const globalRefs$t = getThemeRefs$1(globals);
@@ -9910,14 +10098,14 @@ var CountryCodes = [
   ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 ];
 
-const componentName$P = getComponentName$1('phone-field-internal');
+const componentName$O = getComponentName$1('phone-field-internal');
 
-createBaseInputClass({ componentName: componentName$P, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$O, baseSelector: 'div' });
 
 const textVars$3 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$O = getComponentName$1('phone-field');
+const componentName$N = getComponentName$1('phone-field');
 
 const customMixin$a = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -9931,15 +10119,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$P}
+				<${componentName$O}
 					tabindex="-1"
 					slot="input"
-				></${componentName$P}>
+				></${componentName$O}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$P);
+      this.inputElement = this.shadowRoot.querySelector(componentName$O);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -10211,7 +10399,7 @@ const PhoneFieldClass = compose$1(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$O,
+    componentName: componentName$N,
   })
 );
 
@@ -10261,13 +10449,13 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$G
 });
 
-const componentName$N = getComponentName$1('phone-field-internal-input-box');
+const componentName$M = getComponentName$1('phone-field-internal-input-box');
 
-createBaseInputClass({ componentName: componentName$N, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$M, baseSelector: 'div' });
 
 const textVars$2 = TextFieldClass.cssVarList;
 
-const componentName$M = getComponentName$1('phone-input-box-field');
+const componentName$L = getComponentName$1('phone-input-box-field');
 
 const customMixin$9 = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
@@ -10281,15 +10469,15 @@ const customMixin$9 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$N}
+				<${componentName$M}
 					tabindex="-1"
 					slot="input"
-				></${componentName$N}>
+				></${componentName$M}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$N);
+      this.inputElement = this.shadowRoot.querySelector(componentName$M);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -10493,7 +10681,7 @@ const PhoneFieldInputBoxClass = compose$1(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$M,
+    componentName: componentName$L,
   })
 );
 
@@ -10549,14 +10737,14 @@ var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$F
 });
 
-const componentName$L = getComponentName$1('new-password-internal');
+const componentName$K = 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$K = getComponentName$1('policy-validation');
+const componentName$J = getComponentName$1('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -10566,7 +10754,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -10838,7 +11026,7 @@ const PolicyValidationClass = compose$1(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$J = getComponentName$1('new-password');
+const componentName$I = getComponentName$1('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -10852,18 +11040,18 @@ const customMixin$8 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$L}
+			<${componentName$K}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$L}>
+      </${componentName$K}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$L);
+      this.inputElement = this.shadowRoot.querySelector(componentName$K);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -11047,7 +11235,7 @@ const NewPasswordClass = compose$1(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$J,
+    componentName: componentName$I,
   })
 );
 
@@ -11103,7 +11291,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$I = getComponentName$1('upload-file');
+const componentName$H = getComponentName$1('upload-file');
 
 const observedAttributes$3 = [
   'title',
@@ -11118,7 +11306,7 @@ const observedAttributes$3 = [
   'icon',
 ];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$I, baseSelector: ':host > div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$H, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -11404,10 +11592,10 @@ var uploadFile$1 = /*#__PURE__*/Object.freeze({
   vars: vars$D
 });
 
-const componentName$H = getComponentName$1('button-selection-group-item');
+const componentName$G = getComponentName$1('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$H,
+  componentName: componentName$G,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -11641,10 +11829,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$G = getComponentName$1('button-selection-group-internal');
+const componentName$F = getComponentName$1('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$G
+  componentName$F
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -11889,7 +12077,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$F = getComponentName$1('button-selection-group');
+const componentName$E = getComponentName$1('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -11898,19 +12086,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$G}
+      <${componentName$F}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$G}>
+      </${componentName$F}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$G);
+      this.inputElement = this.shadowRoot.querySelector(componentName$F);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -11935,7 +12123,7 @@ const ButtonSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$F,
+    componentName: componentName$E,
   })
 );
 
@@ -11972,10 +12160,10 @@ var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$B
 });
 
-const componentName$E = getComponentName$1('button-multi-selection-group-internal');
+const componentName$D = getComponentName$1('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$E
+  componentName$D
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -12078,7 +12266,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$D = getComponentName$1('button-multi-selection-group');
+const componentName$C = getComponentName$1('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -12087,19 +12275,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$E}
+      <${componentName$D}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$E}>
+      </${componentName$D}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$E);
+      this.inputElement = this.shadowRoot.querySelector(componentName$D);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -12124,7 +12312,7 @@ const ButtonMultiSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$D,
+    componentName: componentName$C,
   })
 );
 
@@ -12140,7 +12328,7 @@ var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$A
 });
 
-const componentName$C = getComponentName$1('modal');
+const componentName$B = getComponentName$1('modal');
 
 const observedAttrs$3 = ['opened'];
 
@@ -12264,7 +12452,7 @@ const ModalClass = compose$1(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$C,
+    componentName: componentName$B,
   })
 );
 
@@ -12361,7 +12549,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$B = getComponentName$1('grid');
+const componentName$A = getComponentName$1('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -12715,7 +12903,7 @@ const GridClass = compose$1(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$B,
+    componentName: componentName$A,
   })
 );
 
@@ -12771,7 +12959,7 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   vars: vars$y
 });
 
-const componentName$A = getComponentName$1('notification-card');
+const componentName$z = getComponentName$1('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -12879,7 +13067,7 @@ const NotificationCardClass = compose$1(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$A,
+    componentName: componentName$z,
   })
 );
 
@@ -12937,7 +13125,7 @@ var notificationCard = /*#__PURE__*/Object.freeze({
   vars: vars$x
 });
 
-const componentName$z = getComponentName$1('multi-select-combo-box');
+const componentName$y = getComponentName$1('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -13590,7 +13778,7 @@ 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$z,
+    componentName: componentName$y,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
@@ -13682,9 +13870,9 @@ var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$w
 });
 
-const componentName$y = getComponentName$1('badge');
+const componentName$x = getComponentName$1('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -13810,9 +13998,9 @@ var badge$3 = /*#__PURE__*/Object.freeze({
   vars: vars$v
 });
 
-const componentName$x = getComponentName('avatar');
+const componentName$w = getComponentName('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$x,
+  componentName: componentName$w,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -13965,11 +14153,11 @@ var avatar$1 = /*#__PURE__*/Object.freeze({
   vars: vars$u
 });
 
-const componentName$w = getComponentName$1('mappings-field-internal');
+const componentName$v = getComponentName$1('mappings-field-internal');
 
-createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
 
-const componentName$v = getComponentName$1('mappings-field');
+const componentName$u = getComponentName$1('mappings-field');
 
 const customMixin$6 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -13998,14 +14186,14 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$w}
+      <${componentName$v}
         tabindex="-1"
-      ></${componentName$w}>
+      ></${componentName$v}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$w);
+      this.inputElement = this.shadowRoot.querySelector(componentName$v);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -14140,7 +14328,7 @@ const MappingsFieldClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$v,
+    componentName: componentName$u,
   })
 );
 
@@ -14178,9 +14366,9 @@ var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgi
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$u = getComponentName$1('user-attribute');
+const componentName$t = getComponentName$1('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$u,
+  componentName: componentName$t,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -14447,9 +14635,9 @@ var userAttribute$1 = /*#__PURE__*/Object.freeze({
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$t = getComponentName$1('user-auth-method');
+const componentName$s = getComponentName$1('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$t,
+  componentName: componentName$s,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -14665,11 +14853,11 @@ var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   vars: vars$r
 });
 
-const componentName$s = getComponentName$1('saml-group-mappings-internal');
+const componentName$r = getComponentName$1('saml-group-mappings-internal');
 
-createBaseInputClass({ componentName: componentName$s, baseSelector: '' });
+createBaseInputClass({ componentName: componentName$r, baseSelector: '' });
 
-const componentName$r = getComponentName$1('saml-group-mappings');
+const componentName$q = getComponentName$1('saml-group-mappings');
 
 const customMixin$5 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -14679,14 +14867,14 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$s}
+      <${componentName$r}
         tabindex="-1"
-      ></${componentName$s}>
+      ></${componentName$r}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$s);
+      this.inputElement = this.shadowRoot.querySelector(componentName$r);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -14770,7 +14958,7 @@ const SamlGroupMappingsClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$r,
+    componentName: componentName$q,
   })
 );
 
@@ -14835,200 +15023,6 @@ var icon$3 = /*#__PURE__*/Object.freeze({
   vars: vars$o
 });
 
-const getFileExtension = (path) => {
-  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
-  return match ? match[1] : null;
-};
-
-const base64Prefix = 'data:image/svg+xml;base64,';
-
-const isBase64Svg = (src) => src.startsWith(base64Prefix);
-
-const createImgEle = (src, altText) => {
-  const ele = document.createElement('img');
-  ele.setAttribute('src', src);
-  ele.setAttribute('alt', altText);
-  return ele;
-};
-
-const createSvgEle = (text) => {
-  // we want to purify the SVG to avoid XSS attacks
-  const clean = DOMPurify.sanitize(text, {
-    USE_PROFILES: { svg: true, svgFilters: true },
-    // allow image to render
-    ADD_TAGS: ['image'],
-    // forbid interactiviy via `use` tags (which are sanitized by default)
-    FORBID_TAGS: ['defs']
-  });
-
-  const parser = new DOMParser();
-  const ele = parser
-    .parseFromString(clean, 'image/svg+xml')
-    .querySelector('svg');
-  return ele;
-};
-
-const createImage = async (src, altText) => {
-  try {
-    let ele;
-    if (isBase64Svg(src)) {
-      // handle base64 source
-      const svgXml = atob(src.slice(base64Prefix.length));
-      ele = createSvgEle(svgXml);
-    } else if (getFileExtension(src) === 'svg') {
-      // handle urls
-      const fetchedSrc = await fetch(src);
-      const text = await fetchedSrc.text();
-      ele = createSvgEle(text);
-    } else {
-      // handle binary
-      ele = createImgEle(src, altText);
-    }
-
-    ele.style.setProperty('max-width', '100%');
-    ele.style.setProperty('max-height', '100%');
-
-    return ele;
-  } catch {
-    return null;
-  }
-};
-
-/* eslint-disable no-use-before-define */
-
-const componentName$q = getComponentName('image');
-
-const srcAttrs = ['src', 'src-dark'];
-
-class RawImage extends createBaseClass$1({
-  componentName: componentName$q,
-  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$n = ImageClass.cssVarList;
 
 const image = {};