@descope/web-components-ui 1.106.0 → 1.107.0

package/dist/index.esm.js

@@ -12,7 +12,6 @@ import '@vaadin/icon';
 import '@vaadin/email-field';
 import '@vaadin/number-field';
 import '@vaadin/password-field';
-import MarkdownIt from 'markdown-it';
 import '@vaadin/text-area';
 import parsePhoneNumberFromString$1, { parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js/min';
 import '@vaadin/grid';
@@ -26,6 +25,7 @@ import '@vaadin/custom-field';
 import '@vaadin/radio-group';
 import '@vaadin/avatar';
 import DOMPurify from 'dompurify';
+import MarkdownIt from 'markdown-it';
 import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
 import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common';
 import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en';
@@ -7904,78 +7904,6 @@ const EmailFieldClass = compose$1(
 
 customElements.define(componentName$12, EmailFieldClass);
 
-const componentName$11 = getComponentName$1('link');
-
-class RawLink extends createBaseClass$1({ componentName: componentName$11, baseSelector: ':host a' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<div>
-			<descope-text>
-				<a>
-					<slot></slot>
-				</a>
-			</descope-text>
-		</div>
-		`;
-
-    injectStyle(
-      `
-    :host {
-			display: inline-block;
-      line-height: 1em;
-		}
-		:host a {
-			display: inline;
-		}
-      `,
-      this
-    );
-
-    forwardAttrs$1(this, this.shadowRoot.querySelector('a'), {
-      includeAttrs: ['href', 'target', 'tooltip'],
-      mapAttrs: {
-        tooltip: 'title',
-      },
-    });
-
-    forwardAttrs$1(this, this.shadowRoot.querySelector('descope-text'), {
-      includeAttrs: ['mode', 'variant'],
-    });
-  }
-}
-
-const selectors$2 = {
-  host: { selector: () => ':host' },
-  link: { selector: () => ':host a' },
-  anchor: {},
-  wrapper: { selector: () => ':host > div' },
-  text: { selector: () => TextClass.componentName },
-};
-
-const { anchor, text: text$3, host: host$l, wrapper: wrapper$1, link: link$3 } = selectors$2;
-
-const LinkClass = compose$1(
-  createStyleMixin$1({
-    mappings: {
-      hostWidth: { ...host$l, property: 'width' },
-      hostDirection: { ...text$3, property: 'direction' },
-      textAlign: wrapper$1,
-      textDecoration: { ...link$3, property: 'text-decoration', fallback: 'none' },
-      textColor: [
-        { ...anchor, property: 'color' },
-        { ...text$3, property: TextClass.cssVarList.textColor },
-      ],
-      cursor: anchor,
-    },
-  }),
-  draggableMixin$1,
-  componentNameValidationMixin$1
-)(RawLink);
-
-customElements.define(componentName$11, LinkClass);
-
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
   const getContent = () => style;
@@ -8030,37 +7958,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$10 = getComponentName$1('logo');
+const componentName$11 = getComponentName$1('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$10,
+  componentName: componentName$11,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$10, LogoClass);
+customElements.define(componentName$11, LogoClass);
 
-const componentName$$ = getComponentName$1('totp-image');
+const componentName$10 = getComponentName$1('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$$,
+  componentName: componentName$10,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$$, TotpImageClass);
+customElements.define(componentName$10, TotpImageClass);
 
-const componentName$_ = getComponentName$1('notp-image');
+const componentName$$ = getComponentName$1('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$_,
+  componentName: componentName$$,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$_, NotpImageClass);
+customElements.define(componentName$$, NotpImageClass);
 
-const componentName$Z = getComponentName$1('number-field');
+const componentName$_ = getComponentName$1('number-field');
 
 const NumberFieldClass = compose$1(
   createStyleMixin$1({
@@ -8094,11 +8022,11 @@ const NumberFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Z,
+    componentName: componentName$_,
   })
 );
 
-customElements.define(componentName$Z, NumberFieldClass);
+customElements.define(componentName$_, NumberFieldClass);
 
 const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
 const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
@@ -8125,7 +8053,7 @@ const toggleMaskVisibility = (input, value) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$Y = getComponentName$1('passcode-internal');
+const componentName$Z = getComponentName$1('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
@@ -8138,7 +8066,7 @@ const forwardAttributes = [
   'aria-labelledby',
 ];
 
-const BaseInputClass$9 = createBaseInputClass$1({ componentName: componentName$Y, baseSelector: 'div' });
+const BaseInputClass$9 = createBaseInputClass$1({ componentName: componentName$Z, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$9 {
   static get observedAttributes() {
@@ -8352,7 +8280,7 @@ class PasscodeInternal extends BaseInputClass$9 {
   }
 }
 
-const componentName$X = getComponentName$1('passcode');
+const componentName$Y = getComponentName$1('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -8397,18 +8325,18 @@ const customMixin$c = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$Y}
+      <${componentName$Z}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$Y}>
+      ><slot></slot></${componentName$Z}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$Y);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Z);
 
       forwardAttrs$1(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -8423,7 +8351,7 @@ const customMixin$c = (superclass) =>
   };
 
 const {
-  host: host$k,
+  host: host$l,
   digitField,
   label: label$7,
   requiredIndicator: requiredIndicator$7,
@@ -8446,10 +8374,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
 const PasscodeClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$3.fontSize }, host$k],
+      fontSize: [{ ...digitField, property: textVars$3.fontSize }, host$l],
       hostWidth: { property: 'width' },
-      hostDirection: { ...host$k, property: 'direction' },
-      fontFamily: [host$k, { ...label$7 }],
+      hostDirection: { ...host$l, property: 'direction' },
+      fontFamily: [host$l, { ...label$7 }],
       labelTextColor: [
         { ...label$7, property: 'color' },
         { ...requiredIndicator$7, property: 'color' },
@@ -8567,13 +8495,13 @@ const PasscodeClass = compose$1(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$X,
+    componentName: componentName$Y,
   })
 );
 
-customElements.define(componentName$Y, PasscodeInternal);
+customElements.define(componentName$Z, PasscodeInternal);
 
-customElements.define(componentName$X, PasscodeClass);
+customElements.define(componentName$Y, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -8614,7 +8542,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$W = getComponentName$1('password');
+const componentName$X = getComponentName$1('password');
 
 const customMixin$b = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -8723,7 +8651,7 @@ const customMixin$b = (superclass) =>
   };
 
 const {
-  host: host$j,
+  host: host$k,
   inputField: inputField$4,
   inputElement: inputElement$2,
   inputElementPlaceholder,
@@ -8749,10 +8677,10 @@ const {
 const PasswordClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$j, property: 'width' },
-      hostMinWidth: { ...host$j, property: 'min-width' },
-      hostDirection: { ...host$j, property: 'direction' },
-      fontSize: [{}, host$j],
+      hostWidth: { ...host$k, property: 'width' },
+      hostMinWidth: { ...host$k, property: 'min-width' },
+      hostDirection: { ...host$k, property: 'direction' },
+      fontSize: [{}, host$k],
       fontFamily: [label$6, inputField$4, errorMessage$8, helperText$6],
       inputHeight: { ...inputField$4, property: 'height' },
       inputHorizontalPadding: [
@@ -8896,324 +8824,99 @@ const PasswordClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$W,
+    componentName: componentName$X,
   })
 );
 
-customElements.define(componentName$W, PasswordClass);
+customElements.define(componentName$X, PasswordClass);
 
-const disableRules = [
-  'blockquote',
-  'list',
-  'image',
-  'table',
-  'code',
-  'hr',
-  'backticks',
-  'fence',
-  'reference',
-  'heading',
-  'lheading',
-  'html_block',
-];
+const componentName$W = getComponentName$1('text-area');
 
-const decodeHTML = (html) => {
-  const textArea = document.createElement('textarea');
-  textArea.innerHTML = html;
-  return textArea.value;
+const {
+  host: host$j,
+  label: label$5,
+  placeholder: placeholder$1,
+  inputField: inputField$3,
+  textArea: textArea$2,
+  requiredIndicator: requiredIndicator$5,
+  helperText: helperText$5,
+  errorMessage: errorMessage$7,
+} = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  placeholder: { selector: 'textarea:placeholder-shown' },
+  inputField: { selector: '::part(input-field)' },
+  textArea: { selector: '> textarea' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
 };
 
-/* eslint-disable no-param-reassign */
-
-
-const componentName$V = getComponentName$1('enriched-text');
-
-class EnrichedText extends createBaseClass$1({ componentName: componentName$V, baseSelector: ':host > div' }) {
-  #origLinkRenderer;
-
-  #origEmRenderer;
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <div class="content"></div>
-    `;
-
-    injectStyle(
-      `
-      :host {
-        line-height: 1em;
-        word-break: break-word;
-      }
-      :host > slot {
-        width: 100%;
-        display: inline-block;
-      }
-      *, *:last-child {
-        margin: 0;
-      }
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p {
-        margin-bottom: 1em;
-      }
-      a {
-        cursor: pointer;
-      }
-      blockquote {
-        padding: 0 2em;
-      }
-      u {
-        text-decoration: underline
-      }
-      s {
-        color: currentColor;
-      }
-        `,
-      this
-    );
-
-    this.#initProcessor();
-
-    observeChildren$1(this, this.#parseChildren.bind(this));
-  }
-
-  static get observedAttributes() {
-    return ['readonly', 'link-target-blank'];
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-    if (newValue !== oldValue) {
-      if (attrName === 'readonly') {
-        this.onReadOnlyChange(newValue === 'true');
-      }
+const TextAreaClass = compose$1(
+  createStyleMixin$1({
+    mappings: {
+      hostWidth: { ...host$j, property: 'width' },
+      hostMinWidth: { ...host$j, property: 'min-width' },
+      hostDirection: { ...host$j, property: 'direction' },
+      fontSize: [host$j, textArea$2],
+      fontFamily: [label$5, inputField$3, helperText$5, errorMessage$7],
+      labelTextColor: [
+        { ...label$5, property: 'color' },
+        { ...requiredIndicator$5, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
+      errorMessageIcon: { ...errorMessage$7, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$7, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$7, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$7, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$7, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$7, property: 'font-size' },
+      inputBackgroundColor: { ...inputField$3, property: 'background-color' },
+      inputValueTextColor: { ...textArea$2, property: 'color' },
+      inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
+      inputBorderWidth: { ...inputField$3, property: 'border-width' },
+      inputBorderStyle: { ...inputField$3, property: 'border-style' },
+      inputBorderColor: { ...inputField$3, property: 'border-color' },
+      inputBorderRadius: { ...inputField$3, property: 'border-radius' },
+      inputOutlineStyle: { ...inputField$3, property: 'outline-Style' },
+      inputOutlineColor: { ...inputField$3, property: 'outline-color' },
+      inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
+      inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
+      inputResizeType: { ...textArea$2, property: 'resize' },
+      inputMinHeight: { ...textArea$2, property: 'min-height' },
+      inputTextAlign: { ...textArea$2, property: 'text-align' },
+    },
+  }),
+  draggableMixin$1,
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin$1
+)(
+  createProxy$1({
+    slots: [],
+    wrappedEleName: 'vaadin-text-area',
+    style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+        box-sizing: border-box;
+			}
+			textarea {
+				height: 100%;
+			}
+      ${resetInputLabelPosition('vaadin-text-area')}
+			${useHostExternalPadding(TextAreaClass.cssVarList)}
+			${resetInputContainer('vaadin-text-area')}
+			${resetInputField('vaadin-text-area')}
+			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
+			${resetInputCursor('vaadin-text-area')}
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$W,
+  })
+);
 
-      if (attrName === 'link-target-blank') {
-        this.#initProcessor();
-      }
-    }
-  }
-
-  // We're overriding the rule for em with single underscore to perform as underline. (_underline_)
-  customUnderlineRenderer() {
-    this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
-      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
-      return this.#origEmRenderer(tokens, idx, options, env, self);
-    };
-    this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
-      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
-      return this.#origEmRenderer(tokens, idx, options, env, self);
-    };
-  }
-
-  #customizeLinkRenderer() {
-    if (this.linkTargetBlank) {
-      this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
-        // Add a new `target` attribute, or replace the value of the existing one.
-        tokens[idx].attrSet('target', '_blank');
-        // Pass the token to the default renderer.
-        return this.#origLinkRenderer(tokens, idx, options, env, self);
-      };
-    } else {
-      this.processor.renderer.rules.link_open = this.#origLinkRenderer;
-    }
-  }
-
-  #disableCustomRules() {
-    if (!this.processor) {
-      return;
-    }
-    this.processor.disable(disableRules);
-  }
-
-  #updateProcessorRules() {
-    this.#disableCustomRules();
-  }
-
-  #storeOrigRenderers() {
-    const defaultLinkRenderer = (tokens, idx, options, _, self) =>
-      self.renderToken(tokens, idx, options);
-    this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
-
-    const defaultStrongRenderer = (tokens, idx, options, _, self) =>
-      self.renderToken(tokens, idx, options);
-    this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
-  }
-
-  #initProcessor() {
-    this.processor = new MarkdownIt('commonmark', { html: true });
-    this.#storeOrigRenderers();
-    this.#updateProcessorRules();
-    this.#customizeLinkRenderer();
-    this.customUnderlineRenderer();
-  }
-
-  get linkTargetBlank() {
-    return this.getAttribute('link-target-blank') === 'true';
-  }
-
-  get contentNode() {
-    return this.shadowRoot.querySelector('.content');
-  }
-
-  #parseChildren() {
-    if (!this.processor) {
-      return;
-    }
-
-    let html = decodeHTML(this.innerHTML);
-
-    if (!html?.trim() && this.isConnected) {
-      this.setAttribute('empty', 'true');
-    } else {
-      this.removeAttribute('empty');
-    }
-
-    try {
-      const tokens = this.processor.parse(html, { references: undefined });
-      html = this.processor.renderer.render(tokens, { html: true, breaks: true });
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn('Not parsing invalid markdown token');
-    }
-
-    this.contentNode.innerHTML = html;
-  }
-
-  onReadOnlyChange(isReadOnly) {
-    if (isReadOnly) {
-      this.contentNode.setAttribute('inert', isReadOnly);
-    } else {
-      this.contentNode.removeAttribute('inert');
-    }
-  }
-}
-
-const EnrichedTextClass = compose$1(
-  createStyleMixin$1({
-    mappings: {
-      hostWidth: { selector: () => ':host', property: 'width' },
-      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
-      hostDirection: { selector: () => ':host', property: 'direction' },
-      fontSize: {},
-      fontFamily: {},
-      fontWeight: {},
-      fontWeightBold: [
-        { selector: () => ':host strong', property: 'font-weight' },
-        { selector: () => ':host b', property: 'font-weight' },
-      ],
-      textColor: { property: 'color' },
-      textLineHeight: { property: 'line-height' },
-      textAlign: {},
-      linkColor: { selector: 'a', property: 'color' },
-      linkTextDecoration: { selector: 'a', property: 'text-decoration' },
-      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
-      minHeight: {},
-      minWidth: {},
-    },
-  }),
-  createStyleMixin$1({ componentNameOverride: getComponentName$1('link') }),
-  createStyleMixin$1({ componentNameOverride: getComponentName$1('text') }),
-  draggableMixin$1,
-  componentNameValidationMixin$1
-)(EnrichedText);
-
-customElements.define(componentName$V, EnrichedTextClass);
-
-const componentName$U = getComponentName$1('text-area');
-
-const {
-  host: host$i,
-  label: label$5,
-  placeholder: placeholder$1,
-  inputField: inputField$3,
-  textArea: textArea$2,
-  requiredIndicator: requiredIndicator$5,
-  helperText: helperText$5,
-  errorMessage: errorMessage$7,
-} = {
-  host: { selector: () => ':host' },
-  label: { selector: '::part(label)' },
-  placeholder: { selector: 'textarea:placeholder-shown' },
-  inputField: { selector: '::part(input-field)' },
-  textArea: { selector: '> textarea' },
-  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-  helperText: { selector: '::part(helper-text)' },
-  errorMessage: { selector: '::part(error-message)' },
-};
-
-const TextAreaClass = compose$1(
-  createStyleMixin$1({
-    mappings: {
-      hostWidth: { ...host$i, property: 'width' },
-      hostMinWidth: { ...host$i, property: 'min-width' },
-      hostDirection: { ...host$i, property: 'direction' },
-      fontSize: [host$i, textArea$2],
-      fontFamily: [label$5, inputField$3, helperText$5, errorMessage$7],
-      labelTextColor: [
-        { ...label$5, property: 'color' },
-        { ...requiredIndicator$5, property: 'color' },
-      ],
-      labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
-      errorMessageIcon: { ...errorMessage$7, property: 'background-image' },
-      errorMessageIconSize: { ...errorMessage$7, property: 'background-size' },
-      errorMessageIconPadding: { ...errorMessage$7, property: 'padding-inline-start' },
-      errorMessageIconRepeat: { ...errorMessage$7, property: 'background-repeat' },
-      errorMessageIconPosition: { ...errorMessage$7, property: 'background-position' },
-      errorMessageFontSize: { ...errorMessage$7, property: 'font-size' },
-      inputBackgroundColor: { ...inputField$3, property: 'background-color' },
-      inputValueTextColor: { ...textArea$2, property: 'color' },
-      inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
-      inputBorderWidth: { ...inputField$3, property: 'border-width' },
-      inputBorderStyle: { ...inputField$3, property: 'border-style' },
-      inputBorderColor: { ...inputField$3, property: 'border-color' },
-      inputBorderRadius: { ...inputField$3, property: 'border-radius' },
-      inputOutlineStyle: { ...inputField$3, property: 'outline-Style' },
-      inputOutlineColor: { ...inputField$3, property: 'outline-color' },
-      inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
-      inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
-      inputResizeType: { ...textArea$2, property: 'resize' },
-      inputMinHeight: { ...textArea$2, property: 'min-height' },
-      inputTextAlign: { ...textArea$2, property: 'text-align' },
-    },
-  }),
-  draggableMixin$1,
-  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
-  componentNameValidationMixin$1
-)(
-  createProxy$1({
-    slots: [],
-    wrappedEleName: 'vaadin-text-area',
-    style: () => `
-			:host {
-				display: inline-block;
-				max-width: 100%;
-        box-sizing: border-box;
-			}
-			textarea {
-				height: 100%;
-			}
-      ${resetInputLabelPosition('vaadin-text-area')}
-			${useHostExternalPadding(TextAreaClass.cssVarList)}
-			${resetInputContainer('vaadin-text-area')}
-			${resetInputField('vaadin-text-area')}
-			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
-			${resetInputCursor('vaadin-text-area')}
-		`,
-    excludeAttrsSync: ['tabindex'],
-    componentName: componentName$U,
-  })
-);
-
-customElements.define(componentName$U, TextAreaClass);
+customElements.define(componentName$W, TextAreaClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -10476,7 +10179,7 @@ const parsePhoneNumber = (val) => {
   return [countryCode, phoneNumber];
 };
 
-const componentName$T = getComponentName$1('phone-field-internal');
+const componentName$V = getComponentName$1('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -10490,7 +10193,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
 
-const BaseInputClass$8 = createBaseInputClass$1({ componentName: componentName$T, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass$1({ componentName: componentName$V, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$8 {
   static get observedAttributes() {
@@ -10847,12 +10550,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$8 {
   }
 };
 
-customElements.define(componentName$T, PhoneFieldInternal$1);
+customElements.define(componentName$V, PhoneFieldInternal$1);
 
 const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$S = getComponentName$1('phone-field');
+const componentName$U = getComponentName$1('phone-field');
 
 const customMixin$a = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -10866,15 +10569,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$T}
+				<${componentName$V}
 					tabindex="-1"
 					slot="input"
-				></${componentName$T}>
+				></${componentName$V}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$T);
+      this.inputElement = this.shadowRoot.querySelector(componentName$V);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -10918,7 +10621,7 @@ const customMixin$a = (superclass) =>
   };
 
 const {
-  host: host$h,
+  host: host$i,
   label: label$4,
   requiredIndicator: requiredIndicator$4,
   inputField: inputField$2,
@@ -10945,7 +10648,7 @@ const PhoneFieldClass = compose$1(
   createStyleMixin$1({
     mappings: {
       fontSize: [
-        host$h,
+        host$i,
         inputField$2,
         {
           selector: TextFieldClass.componentName,
@@ -10966,11 +10669,11 @@ const PhoneFieldClass = compose$1(
         },
       ],
       hostWidth: [
-        { ...host$h, property: 'width' },
+        { ...host$i, property: 'width' },
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
-      hostDirection: { ...host$h, property: 'direction' },
+      hostDirection: { ...host$i, property: 'direction' },
 
       inputBorderStyle: [
         { ...internalAfter, property: 'border-style' },
@@ -11146,11 +10849,11 @@ const PhoneFieldClass = compose$1(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$S,
+    componentName: componentName$U,
   })
 );
 
-customElements.define(componentName$S, PhoneFieldClass);
+customElements.define(componentName$U, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
@@ -11162,7 +10865,7 @@ const matchingParenthesis = (val) => {
   return openParenMatches?.length === closeParenMatches?.length;
 };
 
-const componentName$R = getComponentName$1('phone-field-internal-input-box');
+const componentName$T = getComponentName$1('phone-field-internal-input-box');
 
 const observedAttributes$3 = [
   'disabled',
@@ -11178,7 +10881,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$7 = createBaseInputClass$1({ componentName: componentName$R, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass$1({ componentName: componentName$T, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -11424,11 +11127,11 @@ class PhoneFieldInternal extends BaseInputClass$7 {
   }
 }
 
-customElements.define(componentName$R, PhoneFieldInternal);
+customElements.define(componentName$T, PhoneFieldInternal);
 
 const textVars$1 = TextFieldClass.cssVarList;
 
-const componentName$Q = getComponentName$1('phone-input-box-field');
+const componentName$S = getComponentName$1('phone-input-box-field');
 
 const customMixin$9 = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
@@ -11442,15 +11145,15 @@ const customMixin$9 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$R}
+				<${componentName$T}
 					tabindex="-1"
 					slot="input"
-				></${componentName$R}>
+				></${componentName$T}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$R);
+      this.inputElement = this.shadowRoot.querySelector(componentName$T);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -11477,7 +11180,7 @@ const customMixin$9 = (superclass) =>
   };
 
 const {
-  host: host$g,
+  host: host$h,
   label: label$3,
   inputElement: inputElement$1,
   requiredIndicator: requiredIndicator$3,
@@ -11508,7 +11211,7 @@ const PhoneFieldInputBoxClass = compose$1(
   createStyleMixin$1({
     mappings: {
       fontSize: [
-        host$g,
+        host$h,
         inputField$1,
         {
           selector: TextFieldClass.componentName,
@@ -11516,9 +11219,9 @@ const PhoneFieldInputBoxClass = compose$1(
         },
       ],
       fontFamily: [label$3, errorMessage$5, helperText$3],
-      hostWidth: { ...host$g, property: 'width' },
-      hostMinWidth: { ...host$g, property: 'min-width' },
-      hostDirection: { ...host$g, property: 'direction' },
+      hostWidth: { ...host$h, property: 'width' },
+      hostMinWidth: { ...host$h, property: 'min-width' },
+      hostDirection: { ...host$h, property: 'direction' },
 
       inputHorizontalPadding: [
         { ...phoneInput, property: 'padding-left' },
@@ -11654,20 +11357,20 @@ const PhoneFieldInputBoxClass = compose$1(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Q,
+    componentName: componentName$S,
   })
 );
 
-customElements.define(componentName$Q, PhoneFieldInputBoxClass);
+customElements.define(componentName$S, PhoneFieldInputBoxClass);
 
-const componentName$P = getComponentName$1('new-password-internal');
+const componentName$R = getComponentName$1('new-password-internal');
 
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$O = getComponentName$1('policy-validation');
+const componentName$Q = getComponentName$1('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -11677,7 +11380,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass$1({ componentName: componentName$O, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass$1({ componentName: componentName$Q, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -11914,7 +11617,7 @@ class RawPolicyValidation extends createBaseClass$1({ componentName: componentNa
   }
 }
 
-const { host: host$f, item, symbolDefault, symbolSuccess, symbolError } = {
+const { host: host$g, item, symbolDefault, symbolSuccess, symbolError } = {
   host: { selector: () => ':host > div' },
   item: { selector: () => '.item' },
   symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
@@ -11930,13 +11633,13 @@ const PolicyValidationClass = compose$1(
       fontSize: {},
       fontFamily: {},
       padding: {},
-      borderWidth: { ...host$f, property: 'border-width' },
-      borderStyle: { ...host$f, property: 'border-style' },
-      borderColor: { ...host$f, property: 'border-color' },
-      borderRadius: { ...host$f, property: 'border-radius' },
-      backgroundColor: { ...host$f, property: 'background-color' },
+      borderWidth: { ...host$g, property: 'border-width' },
+      borderStyle: { ...host$g, property: 'border-style' },
+      borderColor: { ...host$g, property: 'border-color' },
+      borderRadius: { ...host$g, property: 'border-radius' },
+      backgroundColor: { ...host$g, property: 'background-color' },
       textColor: { property: 'color' },
-      labelMargin: { ...host$f, property: 'gap' },
+      labelMargin: { ...host$g, property: 'gap' },
       itemsSpacing: { ...item, property: 'line-height' },
       itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
       itemSymbolErrorColor: { ...symbolError, property: 'color' },
@@ -11949,7 +11652,7 @@ const PolicyValidationClass = compose$1(
   componentNameValidationMixin$1
 )(RawPolicyValidation);
 
-const componentName$N = getComponentName$1('new-password');
+const componentName$P = getComponentName$1('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -11963,18 +11666,18 @@ const customMixin$8 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$P}
+			<${componentName$R}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$P}>
+      </${componentName$R}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$P);
+      this.inputElement = this.shadowRoot.querySelector(componentName$R);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -12037,7 +11740,7 @@ const customMixin$8 = (superclass) =>
   };
 
 const {
-  host: host$e,
+  host: host$f,
   label: label$2,
   internalInputsWrapper,
   errorMessage: errorMessage$4,
@@ -12058,7 +11761,7 @@ const NewPasswordClass = compose$1(
   createStyleMixin$1({
     mappings: {
       fontSize: [
-        host$e,
+        host$f,
         {},
         {
           selector: PasswordClass.componentName,
@@ -12076,13 +11779,13 @@ const NewPasswordClass = compose$1(
       errorMessageIconRepeat: { ...errorMessage$4, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$4, property: 'background-position' },
       errorMessageFontSize: { ...errorMessage$4, property: 'font-size' },
-      hostWidth: { ...host$e, property: 'width' },
-      hostMinWidth: { ...host$e, property: 'min-width' },
+      hostWidth: { ...host$f, property: 'width' },
+      hostMinWidth: { ...host$f, property: 'min-width' },
       hostDirection: [
-        { ...host$e, property: 'direction' },
+        { ...host$f, property: 'direction' },
         { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
       ],
-      inputsRequiredIndicator: { ...host$e, property: 'content' },
+      inputsRequiredIndicator: { ...host$f, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
       policyPreviewBackgroundColor: {
         ...policyPreview,
@@ -12158,11 +11861,11 @@ const NewPasswordClass = compose$1(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$N,
+    componentName: componentName$P,
   })
 );
 
-customElements.define(componentName$O, PolicyValidationClass);
+customElements.define(componentName$Q, PolicyValidationClass);
 
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -12202,7 +11905,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$6 = createBaseInputClass$1({ componentName: componentName$P, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass$1({ componentName: componentName$R, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -12448,16 +12151,16 @@ class NewPasswordInternal extends BaseInputClass$6 {
   }
 }
 
-customElements.define(componentName$P, NewPasswordInternal);
+customElements.define(componentName$R, NewPasswordInternal);
 
-customElements.define(componentName$N, NewPasswordClass);
+customElements.define(componentName$P, NewPasswordClass);
 
-const componentName$M = getComponentName$1('recaptcha');
+const componentName$O = getComponentName$1('recaptcha');
 
 const observedAttributes$2 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass$3 = createBaseClass$1({
-  componentName: componentName$M,
+  componentName: componentName$O,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass$3 {
@@ -12682,7 +12385,7 @@ class RawRecaptcha extends BaseClass$3 {
 
 const RecaptchaClass = compose$1(draggableMixin$1)(RawRecaptcha);
 
-customElements.define(componentName$M, RecaptchaClass);
+customElements.define(componentName$O, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -12696,7 +12399,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$L = getComponentName$1('upload-file');
+const componentName$N = getComponentName$1('upload-file');
 
 const observedAttributes$1 = [
   'title',
@@ -12711,7 +12414,7 @@ const observedAttributes$1 = [
   'icon',
 ];
 
-const BaseInputClass$5 = createBaseInputClass$1({ componentName: componentName$L, baseSelector: ':host > div' });
+const BaseInputClass$5 = createBaseInputClass$1({ componentName: componentName$N, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -12887,7 +12590,7 @@ class RawUploadFile extends BaseInputClass$5 {
 }
 
 const buttonVars = ButtonClass.cssVarList;
-const { host: host$d, wrapper, icon: icon$4, title: title$1, description, requiredIndicator: requiredIndicator$2 } = {
+const { host: host$e, wrapper: wrapper$1, icon: icon$4, title: title$1, description, requiredIndicator: requiredIndicator$2 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '::slotted(*)' },
@@ -12906,15 +12609,15 @@ const UploadFileClass = compose$1(
       borderWidth: {},
       borderStyle: {},
       borderRadius: {},
-      hostHeight: { ...host$d, property: 'height' },
-      hostWidth: { ...host$d, property: 'width' },
+      hostHeight: { ...host$e, property: 'height' },
+      hostWidth: { ...host$e, property: 'width' },
       hostPadding: { property: 'padding' },
       hostDirection: [
-        { ...host$d, property: 'direction' },
+        { ...host$e, property: 'direction' },
         { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
       ],
-      gap: { ...wrapper },
-      lineHeight: { ...wrapper, property: 'line-height' },
+      gap: { ...wrapper$1 },
+      lineHeight: { ...wrapper$1, property: 'line-height' },
       titleFontSize: { ...title$1, property: 'font-size' },
       titleFontWeight: { ...title$1, property: 'font-weight' },
       descriptionFontSize: { ...description, property: 'font-size' },
@@ -12930,7 +12633,7 @@ const UploadFileClass = compose$1(
   componentNameValidationMixin$1
 )(RawUploadFile);
 
-customElements.define(componentName$L, UploadFileClass);
+customElements.define(componentName$N, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass$1({
@@ -13020,10 +12723,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$K = getComponentName$1('button-selection-group-internal');
+const componentName$M = getComponentName$1('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$K
+  componentName$M
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -13179,7 +12882,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
     }
   };
 
-const { host: host$c, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$3 } = {
+const { host: host$d, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$3 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -13188,9 +12891,9 @@ const { host: host$c, label: label$1, requiredIndicator: requiredIndicator$1, in
 };
 
 const buttonSelectionGroupMappings = {
-  hostWidth: { ...host$c, property: 'width' },
-  hostDirection: { ...host$c, property: 'direction' },
-  fontFamily: host$c,
+  hostWidth: { ...host$d, property: 'width' },
+  hostDirection: { ...host$d, property: 'direction' },
+  fontFamily: host$d,
   labelTextColor: [
     { ...label$1, property: 'color' },
     { ...requiredIndicator$1, property: 'color' },
@@ -13268,7 +12971,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$J = getComponentName$1('button-selection-group');
+const componentName$L = getComponentName$1('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -13277,19 +12980,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$K}
+      <${componentName$M}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$K}>
+      </${componentName$M}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$K);
+      this.inputElement = this.shadowRoot.querySelector(componentName$M);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -13314,16 +13017,16 @@ const ButtonSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$J,
+    componentName: componentName$L,
   })
 );
 
-customElements.define(componentName$K, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$M, ButtonSelectionGroupInternalClass);
 
-const componentName$I = getComponentName$1('button-selection-group-item');
+const componentName$K = getComponentName$1('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass$1({
-  componentName: componentName$I,
+  componentName: componentName$K,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -13434,14 +13137,14 @@ const ButtonSelectionGroupItemClass = compose$1(
   componentNameValidationMixin$1
 )(RawSelectItem);
 
-customElements.define(componentName$I, ButtonSelectionGroupItemClass);
+customElements.define(componentName$K, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$J, ButtonSelectionGroupClass);
+customElements.define(componentName$L, ButtonSelectionGroupClass);
 
-const componentName$H = getComponentName$1('button-multi-selection-group-internal');
+const componentName$J = getComponentName$1('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$H
+  componentName$J
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -13544,7 +13247,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$G = getComponentName$1('button-multi-selection-group');
+const componentName$I = getComponentName$1('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -13553,19 +13256,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$H}
+      <${componentName$J}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$H}>
+      </${componentName$J}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$H);
+      this.inputElement = this.shadowRoot.querySelector(componentName$J);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -13590,13 +13293,13 @@ const ButtonMultiSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$G,
+    componentName: componentName$I,
   })
 );
 
-customElements.define(componentName$H, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$J, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$G, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$I, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -13624,9 +13327,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$F = getComponentName$1('grid-text-column');
+const componentName$H = getComponentName$1('grid-text-column');
 
-customElements.define(componentName$F, GridTextColumnClass);
+customElements.define(componentName$H, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -13661,9 +13364,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$E = getComponentName$1('grid-custom-column');
+const componentName$G = getComponentName$1('grid-custom-column');
 
-customElements.define(componentName$E, GridCustomColumnClass);
+customElements.define(componentName$G, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -13722,9 +13425,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$D = getComponentName$1('grid-selection-column');
+const componentName$F = getComponentName$1('grid-selection-column');
 
-customElements.define(componentName$D, GridSelectionColumnClass);
+customElements.define(componentName$F, GridSelectionColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -13763,9 +13466,9 @@ class GridItemDetailsColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$C = getComponentName$1('grid-item-details-column');
+const componentName$E = getComponentName$1('grid-item-details-column');
 
-customElements.define(componentName$C, GridItemDetailsColumnClass);
+customElements.define(componentName$E, GridItemDetailsColumnClass);
 
 const decode = (input) => {
   const txt = document.createElement('textarea');
@@ -13777,9 +13480,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
 
-const componentName$B = getComponentName$1('code-snippet');
+const componentName$D = getComponentName$1('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName: componentName$B, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName: componentName$D, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -13899,7 +13602,7 @@ const {
   addition,
   deletion,
   charEscape,
-  link: link$2,
+  link: link$3,
   params,
   property,
   punctuation,
@@ -14002,7 +13705,7 @@ const CodeSnippetClass = compose$1(
       deletionTextColor: { ...deletion, property: 'color' },
       deletionBgColor: { ...deletion, property: 'background-color' },
       charEscapeTextColor: { ...charEscape, property: 'color' },
-      linkTextColor: { ...link$2, property: 'color' },
+      linkTextColor: { ...link$3, property: 'color' },
       paramsTextColor: { ...params, property: 'color' },
       propertyTextColor: { ...property, property: 'color' },
       punctuationTextColor: { ...punctuation, property: 'color' },
@@ -14013,7 +13716,7 @@ const CodeSnippetClass = compose$1(
   componentNameValidationMixin$1
 )(CodeSnippet$1);
 
-customElements.define(componentName$B, CodeSnippetClass);
+customElements.define(componentName$D, CodeSnippetClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -14088,7 +13791,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$A = getComponentName$1('grid');
+const componentName$C = getComponentName$1('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -14301,7 +14004,7 @@ const GridMixin = (superclass) =>
   };
 
 const {
-  host: host$b,
+  host: host$c,
   headerRow,
   headerRowCell,
   contentRow,
@@ -14354,15 +14057,15 @@ const GridClass = compose$1(
       fontWeight: { ...contentRow },
       valueTextColor: { ...contentRow, property: 'color' },
       backgroundColor: [
-        { ...host$b, property: 'background-color' },
+        { ...host$c, property: 'background-color' },
         { ...contentRow, property: 'background-color' },
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      borderColor: { ...host$b, property: 'border-color' },
-      borderWidth: { ...host$b, property: 'border-width' },
-      borderStyle: { ...host$b, property: 'border-style' },
-      borderRadius: { ...host$b, property: 'border-radius' },
+      borderColor: { ...host$c, property: 'border-color' },
+      borderWidth: { ...host$c, property: 'border-width' },
+      borderStyle: { ...host$c, property: 'border-style' },
+      borderRadius: { ...host$c, property: 'border-radius' },
       selectedBackgroundColor: [
         { ...selectedRow, property: 'background-color' },
         { ...selectedRowCell, property: 'background-color' },
@@ -14373,7 +14076,7 @@ const GridClass = compose$1(
         { ...rowSeparator, property: 'border-top-color' },
       ],
       resizeHandleColor: { ...resizeHandle, property: 'background-color' },
-      hostDirection: { ...host$b, property: 'direction', fallback: 'ltr' },
+      hostDirection: { ...host$c, property: 'direction', fallback: 'ltr' },
       toggleDetailsPanelButtonSize: [
         { ...toggleDetailsPanelButton, property: 'width' },
         { ...toggleDetailsPanelButton, property: 'height' },
@@ -14442,13 +14145,13 @@ const GridClass = compose$1(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$A,
+    componentName: componentName$C,
   })
 );
 
-customElements.define(componentName$A, GridClass);
+customElements.define(componentName$C, GridClass);
 
-const componentName$z = getComponentName$1('multi-select-combo-box');
+const componentName$B = getComponentName$1('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -14849,7 +14552,7 @@ const multiSelectComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$a,
+  host: host$b,
   inputField,
   inputElement,
   placeholder,
@@ -14887,10 +14590,10 @@ const {
 const MultiSelectComboBoxClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$a, property: 'width' },
-      hostDirection: { ...host$a, property: 'direction' },
+      hostWidth: { ...host$b, property: 'width' },
+      hostDirection: { ...host$b, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$a],
+      fontSize: [{}, host$b],
       chipFontSize: { ...chipLabel, property: 'font-size' },
       fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$2, chipLabel],
       labelFontSize: { ...label, property: 'font-size' },
@@ -15101,16 +14804,16 @@ const MultiSelectComboBoxClass = compose$1(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-    componentName: componentName$z,
+    componentName: componentName$B,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$z, MultiSelectComboBoxClass);
+customElements.define(componentName$B, MultiSelectComboBoxClass);
 
-const componentName$y = getComponentName$1('badge');
+const componentName$A = getComponentName$1('badge');
 
-class RawBadge extends createBaseClass$1({ componentName: componentName$y, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass$1({ componentName: componentName$A, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -15165,9 +14868,9 @@ const BadgeClass = compose$1(
   componentNameValidationMixin$1
 )(RawBadge);
 
-customElements.define(componentName$y, BadgeClass);
+customElements.define(componentName$A, BadgeClass);
 
-const componentName$x = getComponentName$1('modal');
+const componentName$z = getComponentName$1('modal');
 
 const observedAttrs$2 = ['opened'];
 
@@ -15291,11 +14994,11 @@ const ModalClass = compose$1(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$x,
+    componentName: componentName$z,
   })
 );
 
-customElements.define(componentName$x, ModalClass);
+customElements.define(componentName$z, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -15306,7 +15009,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName$1('notification-container'), NotificationContainerClass);
 
-const componentName$w = getComponentName$1('notification-card');
+const componentName$y = getComponentName$1('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -15350,7 +15053,7 @@ const notificationCardMixin = (superclass) =>
     }
   };
 
-const selectors$1 = {
+const selectors$2 = {
   content: () => 'vaadin-notification-card::part(content)',
   overlay: () => 'vaadin-notification-card::part(overlay)',
 };
@@ -15358,26 +15061,26 @@ const selectors$1 = {
 const NotificationCardClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostMinWidth: { selector: selectors$1.content, property: 'min-width' },
+      hostMinWidth: { selector: selectors$2.content, property: 'min-width' },
       fontFamily: {},
       fontSize: {},
-      backgroundColor: { selector: selectors$1.content },
+      backgroundColor: { selector: selectors$2.content },
       textColor: { property: 'color' },
       boxShadow: {},
-      borderWidth: { selector: selectors$1.content, property: 'border-width' },
-      borderColor: { selector: selectors$1.content, property: 'border-color' },
-      borderStyle: { selector: selectors$1.content, property: 'border-style' },
+      borderWidth: { selector: selectors$2.content, property: 'border-width' },
+      borderColor: { selector: selectors$2.content, property: 'border-color' },
+      borderStyle: { selector: selectors$2.content, property: 'border-style' },
       borderRadius: [
-        { selector: selectors$1.content, property: 'border-radius' },
-        { selector: selectors$1.overlay, property: 'border-radius' },
+        { selector: selectors$2.content, property: 'border-radius' },
+        { selector: selectors$2.overlay, property: 'border-radius' },
       ],
       verticalPadding: [
-        { selector: selectors$1.content, property: 'padding-top' },
-        { selector: selectors$1.content, property: 'padding-bottom' },
+        { selector: selectors$2.content, property: 'padding-top' },
+        { selector: selectors$2.content, property: 'padding-bottom' },
       ],
       horizontalPadding: [
-        { selector: selectors$1.content, property: 'padding-right' },
-        { selector: selectors$1.content, property: 'padding-left' },
+        { selector: selectors$2.content, property: 'padding-right' },
+        { selector: selectors$2.content, property: 'padding-left' },
       ],
     },
   }),
@@ -15414,13 +15117,13 @@ const NotificationCardClass = compose$1(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$w,
+    componentName: componentName$y,
   })
 );
 
-customElements.define(componentName$w, NotificationCardClass);
+customElements.define(componentName$y, NotificationCardClass);
 
-const componentName$v = getComponentName$1('notification');
+const componentName$x = getComponentName$1('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -15515,15 +15218,15 @@ const NotificationClass = compose$1(
   createProxy$1({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$v,
+    componentName: componentName$x,
   })
 );
 
-customElements.define(componentName$v, NotificationClass);
+customElements.define(componentName$x, NotificationClass);
 
-const componentName$u = getComponentName$1('mappings-field-internal');
+const componentName$w = getComponentName$1('mappings-field-internal');
 
-const BaseInputClass$4 = createBaseInputClass$1({ componentName: componentName$u, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass$1({ componentName: componentName$w, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$4 {
   #errorItem;
@@ -15770,7 +15473,7 @@ class MappingsFieldInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$t = getComponentName$1('mappings-field');
+const componentName$v = getComponentName$1('mappings-field');
 
 const customMixin$6 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -15799,14 +15502,14 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$u}
+      <${componentName$w}
         tabindex="-1"
-      ></${componentName$u}>
+      ></${componentName$w}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$u);
+      this.inputElement = this.shadowRoot.querySelector(componentName$w);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -15836,7 +15539,7 @@ const customMixin$6 = (superclass) =>
   };
 
 const {
-  host: host$9,
+  host: host$a,
   helperText,
   errorMessage: errorMessage$1,
   mappingItem,
@@ -15864,10 +15567,10 @@ const {
 const MappingsFieldClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$9, property: 'width' },
-      hostDirection: { ...host$9, property: 'direction' },
+      hostWidth: { ...host$a, property: 'width' },
+      hostDirection: { ...host$a, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$9, { ...separator, property: 'margin-top' }],
+      fontSize: [{}, host$a, { ...separator, property: 'margin-top' }],
       fontFamily: [helperText, errorMessage$1, labels],
       separatorFontSize: { ...separator, property: 'font-size' },
       labelsFontSize: { ...labelsText, property: 'font-size' },
@@ -15941,13 +15644,13 @@ const MappingsFieldClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$t,
+    componentName: componentName$v,
   })
 );
 
-customElements.define(componentName$u, MappingsFieldInternal);
+customElements.define(componentName$w, MappingsFieldInternal);
 
-const componentName$s = getComponentName$1('mapping-item');
+const componentName$u = getComponentName$1('mapping-item');
 
 const inputAttrs = [
   'size',
@@ -15960,7 +15663,7 @@ const inputAttrs = [
   'st-error-message-icon-padding',
 ];
 
-const BaseInputClass$3 = createBaseInputClass$1({ componentName: componentName$s, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass$1({ componentName: componentName$u, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -16115,17 +15818,17 @@ class MappingItem extends BaseInputClass$3 {
   }
 }
 
-customElements.define(componentName$s, MappingItem);
+customElements.define(componentName$u, MappingItem);
 
-customElements.define(componentName$t, MappingsFieldClass);
+customElements.define(componentName$v, MappingsFieldClass);
 
 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$t = getComponentName$1('user-attribute');
 class RawUserAttribute extends createBaseClass$1({
-  componentName: componentName$r,
+  componentName: componentName$t,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -16338,7 +16041,7 @@ class RawUserAttribute extends createBaseClass$1({
   }
 }
 
-const { host: host$8, textFields, buttons: buttons$1, badge: badge$3, labelText, valueText, textWrapper: textWrapper$1 } = {
+const { host: host$9, textFields, buttons: buttons$1, badge: badge$3, labelText, valueText, textWrapper: textWrapper$1 } = {
   host: { selector: () => ':host' },
   textFields: { selector: 'descope-text' },
   valueText: { selector: 'descope-text[data-id="value-text"]' },
@@ -16351,10 +16054,10 @@ const { host: host$8, textFields, buttons: buttons$1, badge: badge$3, labelText,
 const UserAttributeClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$8, property: 'width' },
-      hostMinWidth: { ...host$8, property: 'min-width' },
+      hostWidth: { ...host$9, property: 'width' },
+      hostMinWidth: { ...host$9, property: 'min-width' },
       hostDirection: [
-        { ...host$8, property: 'direction' },
+        { ...host$9, property: 'direction' },
         { ...textFields, property: TextClass.cssVarList.hostDirection },
         { ...buttons$1, property: ButtonClass.cssVarList.hostDirection },
         { ...badge$3, property: BadgeClass.cssVarList.hostDirection },
@@ -16369,13 +16072,13 @@ const UserAttributeClass = compose$1(
   componentNameValidationMixin$1
 )(RawUserAttribute);
 
-customElements.define(componentName$r, UserAttributeClass);
+customElements.define(componentName$t, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$q = getComponentName$1('user-auth-method');
+const componentName$s = getComponentName$1('user-auth-method');
 class RawUserAuthMethod extends createBaseClass$1({
-  componentName: componentName$q,
+  componentName: componentName$s,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -16537,7 +16240,7 @@ class RawUserAuthMethod extends createBaseClass$1({
   }
 }
 
-const { host: host$7, textField: textField$2, buttons, badge: badge$2, textWrapper, methodIconSlot } = {
+const { host: host$8, textField: textField$2, buttons, badge: badge$2, textWrapper, methodIconSlot } = {
   host: { selector: () => ':host' },
   textField: { selector: 'descope-text' },
   buttons: { selector: 'descope-button' },
@@ -16549,10 +16252,10 @@ const { host: host$7, textField: textField$2, buttons, badge: badge$2, textWrapp
 const UserAuthMethodClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$7, property: 'width' },
-      hostMinWidth: { ...host$7, property: 'min-width' },
+      hostWidth: { ...host$8, property: 'width' },
+      hostMinWidth: { ...host$8, property: 'min-width' },
       hostDirection: [
-        { ...host$7, property: 'direction' },
+        { ...host$8, property: 'direction' },
         { ...textField$2, property: TextClass.cssVarList.hostDirection },
         { ...buttons, property: ButtonClass.cssVarList.hostDirection },
         { ...badge$2, property: BadgeClass.cssVarList.hostDirection },
@@ -16570,11 +16273,11 @@ const UserAuthMethodClass = compose$1(
   componentNameValidationMixin$1
 )(RawUserAuthMethod);
 
-customElements.define(componentName$q, UserAuthMethodClass);
+customElements.define(componentName$s, UserAuthMethodClass);
 
-const componentName$p = getComponentName$1('saml-group-mappings-internal');
+const componentName$r = getComponentName$1('saml-group-mappings-internal');
 
-const BaseInputClass$2 = createBaseInputClass$1({ componentName: componentName$p, baseSelector: '' });
+const BaseInputClass$2 = createBaseInputClass$1({ componentName: componentName$r, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -16700,7 +16403,7 @@ class SamlGroupMappingsInternal extends BaseInputClass$2 {
   }
 }
 
-const componentName$o = getComponentName$1('saml-group-mappings');
+const componentName$q = getComponentName$1('saml-group-mappings');
 
 const customMixin$5 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -16710,14 +16413,14 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$p}
+      <${componentName$r}
         tabindex="-1"
-      ></${componentName$p}>
+      ></${componentName$r}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$p);
+      this.inputElement = this.shadowRoot.querySelector(componentName$r);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -16738,7 +16441,7 @@ const customMixin$5 = (superclass) =>
     }
   };
 
-const { host: host$6, groupInput, errorMessage } = {
+const { host: host$7, groupInput, errorMessage } = {
   host: { selector: () => ':host' },
   groupInput: { selector: 'descope-text-field' },
   errorMessage: { selector: '::part(error-message)' },
@@ -16747,8 +16450,8 @@ const { host: host$6, groupInput, errorMessage } = {
 const SamlGroupMappingsClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$6, property: 'width' },
-      hostDirection: { ...host$6, property: 'direction' },
+      hostWidth: { ...host$7, property: 'width' },
+      hostDirection: { ...host$7, property: 'direction' },
       groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
       errorMessageIcon: { ...errorMessage, property: 'background-image' },
       errorMessageIconSize: { ...errorMessage, property: 'background-size' },
@@ -16801,15 +16504,15 @@ const SamlGroupMappingsClass = compose$1(
       'options',
       'error-message',
     ],
-    componentName: componentName$o,
+    componentName: componentName$q,
   })
 );
 
-customElements.define(componentName$p, SamlGroupMappingsInternal);
+customElements.define(componentName$r, SamlGroupMappingsInternal);
 
-customElements.define(componentName$o, SamlGroupMappingsClass);
+customElements.define(componentName$q, SamlGroupMappingsClass);
 
-const componentName$n = getComponentName$1('radio-button');
+const componentName$p = getComponentName$1('radio-button');
 
 const customMixin$4 = (superclass) =>
   class CustomMixin extends superclass {
@@ -16874,11 +16577,11 @@ const RadioButtonClass = compose$1(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$n,
+    componentName: componentName$p,
   })
 );
 
-const componentName$m = getComponentName$1('radio-group');
+const componentName$o = getComponentName$1('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -16893,12 +16596,12 @@ const RadioGroupMixin = (superclass) =>
 
       // we are overriding vaadin children getter so it will run on our custom elements
       Object.defineProperty(this.baseElement, 'children', {
-        get: () => this.querySelectorAll(componentName$n),
+        get: () => this.querySelectorAll(componentName$p),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) => {
-        return nodes.filter((node) => node.localName === componentName$n);
+        return nodes.filter((node) => node.localName === componentName$p);
       };
 
       // vaadin radio group missing some input properties
@@ -17048,13 +16751,13 @@ const RadioGroupClass = compose$1(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
-    componentName: componentName$m,
+    componentName: componentName$o,
     includeForwardProps: ['value'],
   })
 );
 
-customElements.define(componentName$m, RadioGroupClass);
-customElements.define(componentName$n, RadioButtonClass);
+customElements.define(componentName$o, RadioGroupClass);
+customElements.define(componentName$p, RadioButtonClass);
 
 const activeableMixin = (superclass) =>
   class ActiveableMixinClass extends superclass {
@@ -17071,7 +16774,7 @@ const activeableMixin = (superclass) =>
     }
   };
 
-const componentName$l = getComponentName$1('list-item');
+const componentName$n = getComponentName$1('list-item');
 
 const customMixin$3 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -17121,11 +16824,11 @@ const ListItemClass = compose$1(
   componentNameValidationMixin$1,
   customMixin$3,
   activeableMixin
-)(createBaseClass$1({ componentName: componentName$l, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$n, baseSelector: 'slot' }));
 
-const componentName$k = getComponentName$1('list');
+const componentName$m = getComponentName$1('list');
 
-class RawList extends createBaseClass$1({ componentName: componentName$k, baseSelector: '.wrapper' }) {
+class RawList extends createBaseClass$1({ componentName: componentName$m, baseSelector: '.wrapper' }) {
   static get observedAttributes() {
     return ['variant', 'readonly'];
   }
@@ -17273,12 +16976,12 @@ const ListClass = compose$1(
   componentNameValidationMixin$1
 )(RawList);
 
-customElements.define(componentName$k, ListClass);
-customElements.define(componentName$l, ListItemClass);
+customElements.define(componentName$m, ListClass);
+customElements.define(componentName$n, ListItemClass);
 
-const componentName$j = getComponentName('avatar');
+const componentName$l = getComponentName('avatar');
 class RawAvatar extends createBaseClass({
-  componentName: componentName$j,
+  componentName: componentName$l,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -17356,7 +17059,7 @@ class RawAvatar extends createBaseClass({
   }
 }
 
-const { host: host$5, editableBadge, avatar: avatar$2 } = {
+const { host: host$6, editableBadge, avatar: avatar$2 } = {
   host: { selector: () => ':host' },
   editableBadge: { selector: '> .editableBadge' },
   avatar: { selector: 'vaadin-avatar' },
@@ -17366,12 +17069,12 @@ const AvatarClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: [
-        { ...host$5, property: 'width' },
-        { ...host$5, property: 'min-width' },
+        { ...host$6, property: 'width' },
+        { ...host$6, property: 'min-width' },
       ],
-      hostHeight: { ...host$5, property: 'height' },
-      cursor: [avatar$2, host$5],
-      hostDirection: { ...host$5, property: 'direction' },
+      hostHeight: { ...host$6, property: 'height' },
+      cursor: [avatar$2, host$6],
+      hostDirection: { ...host$6, property: 'direction' },
       avatarTextColor: { ...avatar$2, property: 'color' },
       avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
       editableIconColor: { ...editableBadge, property: 'color' },
@@ -17386,7 +17089,7 @@ const AvatarClass = compose(
   componentNameValidationMixin,
 )(RawAvatar);
 
-customElements.define(componentName$j, AvatarClass);
+customElements.define(componentName$l, AvatarClass);
 
 const defaultValidateSchema = () => true;
 const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
@@ -17487,7 +17190,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$i = getComponentName$1('apps-list');
+const componentName$k = getComponentName$1('apps-list');
 
 const limitAbbreviation = (str, limit = 2) =>
   str
@@ -17549,7 +17252,7 @@ const AppsListClass = compose$1(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty'],
-    componentName: componentName$i,
+    componentName: componentName$k,
     style: () => `
       :host {
         width: 100%;
@@ -17574,9 +17277,9 @@ const AppsListClass = compose$1(
   })
 );
 
-customElements.define(componentName$i, AppsListClass);
+customElements.define(componentName$k, AppsListClass);
 
-const componentName$h = getComponentName$1('scopes-list');
+const componentName$j = getComponentName$1('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer$1 = ({ id, desc, required = false }, _, ref) => {
@@ -17595,7 +17298,7 @@ const itemRenderer$1 = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass$1({ componentName: componentName$h, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass$1({ componentName: componentName$j, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -17703,13 +17406,13 @@ const ScopesListClass = compose$1(
   componentNameValidationMixin$1
 )(RawScopesList);
 
-customElements.define(componentName$h, ScopesListClass);
+customElements.define(componentName$j, ScopesListClass);
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$g = getComponentName$1('third-party-app-logo');
+const componentName$i = getComponentName$1('third-party-app-logo');
 class RawThirdPartyAppLogoClass extends createBaseClass$1({
-  componentName: componentName$g,
+  componentName: componentName$i,
   baseSelector: '.wrapper',
 }) {
   constructor() {
@@ -17867,12 +17570,12 @@ const createImage = async (src, altText) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$f = getComponentName('image');
+const componentName$h = getComponentName('image');
 
 const srcAttrs = ['src', 'src-dark'];
 
 class RawImage extends createBaseClass({
-  componentName: componentName$f,
+  componentName: componentName$h,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -18000,13 +17703,13 @@ const ImageClass = compose(
   componentNameValidationMixin,
 )(RawImage);
 
-customElements.define(componentName$f, ImageClass);
+customElements.define(componentName$h, ImageClass);
 
 customElements.define(componentName$19, IconClass);
 
-customElements.define(componentName$g, ThirdPartyAppLogoClass);
+customElements.define(componentName$i, ThirdPartyAppLogoClass);
 
-const componentName$e = getComponentName$1('security-questions-setup');
+const componentName$g = getComponentName$1('security-questions-setup');
 
 const attrsToSync$1 = [
   'full-width',
@@ -18025,7 +17728,7 @@ const attrsToSync$1 = [
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
-class RawSecurityQuestionsSetup extends createBaseClass$1({ componentName: componentName$e, baseSelector: 'div' }) {
+class RawSecurityQuestionsSetup extends createBaseClass$1({ componentName: componentName$g, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18135,7 +17838,7 @@ class RawSecurityQuestionsSetup extends createBaseClass$1({ componentName: compo
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$e, 'Error parsing questions attribute', e);
+      console.error(componentName$g, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -18243,9 +17946,9 @@ const SecurityQuestionsSetupClass = compose$1(
   componentNameValidationMixin$1
 )(RawSecurityQuestionsSetup);
 
-customElements.define(componentName$e, SecurityQuestionsSetupClass);
+customElements.define(componentName$g, SecurityQuestionsSetupClass);
 
-const componentName$d = getComponentName$1('security-questions-verify');
+const componentName$f = getComponentName$1('security-questions-verify');
 
 const textFieldsAttrs = [
   'full-width',
@@ -18269,7 +17972,7 @@ const attrMappings = {
 const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 const attrsToReRender = ['questions'];
-class RawSecurityQuestionsVerify extends createBaseClass$1({ componentName: componentName$d, baseSelector: 'div' }) {
+class RawSecurityQuestionsVerify extends createBaseClass$1({ componentName: componentName$f, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18343,7 +18046,7 @@ class RawSecurityQuestionsVerify extends createBaseClass$1({ componentName: comp
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$d, 'Error parsing questions attribute', e);
+      console.error(componentName$f, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -18478,7 +18181,7 @@ const SecurityQuestionsVerifyClass = compose$1(
   componentNameValidationMixin$1
 )(RawSecurityQuestionsVerify);
 
-customElements.define(componentName$d, SecurityQuestionsVerifyClass);
+customElements.define(componentName$f, SecurityQuestionsVerifyClass);
 
 const NUMERIC_RE = /^\d+$/;
 
@@ -18486,7 +18189,7 @@ const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceA
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-const componentName$c = getComponentName$1('hybrid-field');
+const componentName$e = getComponentName$1('hybrid-field');
 
 const attrs = {
   shared: [
@@ -18552,7 +18255,7 @@ const PHONE_FIELD = 'descope-phone-field';
 const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
 const BaseClass$2 = createBaseClass$1({
-  componentName: componentName$c,
+  componentName: componentName$e,
   baseSelector: 'div',
 });
 
@@ -18865,7 +18568,304 @@ const HybridFieldClass = compose$1(
   componentNameValidationMixin$1
 )(RawHybridField);
 
-customElements.define(componentName$c, HybridFieldClass);
+customElements.define(componentName$e, HybridFieldClass);
+
+const componentName$d = getComponentName('link');
+
+class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<div>
+			<descope-text>
+				<a>
+					<slot></slot>
+				</a>
+			</descope-text>
+		</div>
+		`;
+
+    injectStyle(
+      `
+    :host {
+			display: inline-block;
+      line-height: 1em;
+		}
+		:host a {
+			display: inline;
+		}
+      `,
+      this
+    );
+
+    forwardAttrs(this, this.shadowRoot.querySelector('a'), {
+      includeAttrs: ['href', 'target', 'tooltip'],
+      mapAttrs: {
+        tooltip: 'title',
+      },
+    });
+
+    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+      includeAttrs: ['mode', 'variant'],
+    });
+  }
+}
+
+const selectors$1 = {
+  host: { selector: () => ':host' },
+  link: { selector: () => ':host a' },
+  anchor: {},
+  wrapper: { selector: () => ':host > div' },
+  text: { selector: () => TextClass.componentName },
+};
+
+const { anchor, text: text$3, host: host$5, wrapper, link: link$2 } = selectors$1;
+
+const LinkClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host$5, property: 'width' },
+      hostDirection: { ...text$3, property: 'direction' },
+      textAlign: wrapper,
+      textDecoration: { ...link$2, property: 'text-decoration', fallback: 'none' },
+      textColor: [
+        { ...anchor, property: 'color' },
+        { ...text$3, property: TextClass.cssVarList.textColor },
+      ],
+      cursor: anchor,
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawLink);
+
+customElements.define(componentName$d, LinkClass);
+
+const disableRules = [
+  'blockquote',
+  'list',
+  'image',
+  'table',
+  'code',
+  'hr',
+  'backticks',
+  'fence',
+  'reference',
+  'heading',
+  'lheading',
+  'html_block',
+];
+
+const decodeHTML = (html) => {
+  const textArea = document.createElement('textarea');
+  textArea.innerHTML = html;
+  return textArea.value;
+};
+
+/* eslint-disable no-param-reassign */
+
+
+const componentName$c = getComponentName('enriched-text');
+
+class EnrichedText extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
+  #origLinkRenderer;
+
+  #origEmRenderer;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div class="content"></div>
+    `;
+
+    injectStyle(
+      `
+      :host {
+        line-height: 1em;
+        word-break: break-word;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+      *, *:last-child {
+        margin: 0;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        margin-bottom: 1em;
+      }
+      a {
+        cursor: pointer;
+      }
+      blockquote {
+        padding: 0 2em;
+      }
+      u {
+        text-decoration: underline
+      }
+      s {
+        color: currentColor;
+      }
+        `,
+      this
+    );
+
+    this.#initProcessor();
+
+    observeChildren(this, this.#parseChildren.bind(this));
+  }
+
+  static get observedAttributes() {
+    return ['readonly', 'link-target-blank'];
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (newValue !== oldValue) {
+      if (attrName === 'readonly') {
+        this.onReadOnlyChange(newValue === 'true');
+      }
+
+      if (attrName === 'link-target-blank') {
+        this.#initProcessor();
+      }
+    }
+  }
+
+  // We're overriding the rule for em with single underscore to perform as underline. (_underline_)
+  customUnderlineRenderer() {
+    this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
+      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+      return this.#origEmRenderer(tokens, idx, options, env, self);
+    };
+    this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
+      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+      return this.#origEmRenderer(tokens, idx, options, env, self);
+    };
+  }
+
+  #customizeLinkRenderer() {
+    if (this.linkTargetBlank) {
+      this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+        // Add a new `target` attribute, or replace the value of the existing one.
+        tokens[idx].attrSet('target', '_blank');
+        // Pass the token to the default renderer.
+        return this.#origLinkRenderer(tokens, idx, options, env, self);
+      };
+    } else {
+      this.processor.renderer.rules.link_open = this.#origLinkRenderer;
+    }
+  }
+
+  #disableCustomRules() {
+    if (!this.processor) {
+      return;
+    }
+    this.processor.disable(disableRules);
+  }
+
+  #updateProcessorRules() {
+    this.#disableCustomRules();
+  }
+
+  #storeOrigRenderers() {
+    const defaultLinkRenderer = (tokens, idx, options, _, self) =>
+      self.renderToken(tokens, idx, options);
+    this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
+
+    const defaultStrongRenderer = (tokens, idx, options, _, self) =>
+      self.renderToken(tokens, idx, options);
+    this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
+  }
+
+  #initProcessor() {
+    this.processor = new MarkdownIt('commonmark', { html: true });
+    this.#storeOrigRenderers();
+    this.#updateProcessorRules();
+    this.#customizeLinkRenderer();
+    this.customUnderlineRenderer();
+  }
+
+  get linkTargetBlank() {
+    return this.getAttribute('link-target-blank') === 'true';
+  }
+
+  get contentNode() {
+    return this.shadowRoot.querySelector('.content');
+  }
+
+  #parseChildren() {
+    if (!this.processor) {
+      return;
+    }
+
+    let html = decodeHTML(this.innerHTML);
+
+    if (!html?.trim() && this.isConnected) {
+      this.setAttribute('empty', 'true');
+    } else {
+      this.removeAttribute('empty');
+    }
+
+    try {
+      const tokens = this.processor.parse(html, { references: undefined });
+      html = this.processor.renderer.render(tokens, { html: true, breaks: true });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('Not parsing invalid markdown token');
+    }
+
+    this.contentNode.innerHTML = html;
+  }
+
+  onReadOnlyChange(isReadOnly) {
+    if (isReadOnly) {
+      this.contentNode.setAttribute('inert', isReadOnly);
+    } else {
+      this.contentNode.removeAttribute('inert');
+    }
+  }
+}
+
+const EnrichedTextClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      fontWeight: {},
+      fontWeightBold: [
+        { selector: () => ':host strong', property: 'font-weight' },
+        { selector: () => ':host b', property: 'font-weight' },
+      ],
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textAlign: {},
+      linkColor: { selector: 'a', property: 'color' },
+      linkTextDecoration: { selector: 'a', property: 'text-decoration' },
+      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
+      minHeight: {},
+      minWidth: {},
+    },
+  }),
+  createStyleMixin({ componentNameOverride: getComponentName('link') }),
+  createStyleMixin({ componentNameOverride: getComponentName('text') }),
+  draggableMixin,
+  componentNameValidationMixin
+)(EnrichedText);
+
+customElements.define(componentName$c, EnrichedTextClass);
 
 const componentName$b = getComponentName$1('alert');
 
@@ -20371,7 +20371,7 @@ var text$2 = /*#__PURE__*/Object.freeze({
   vars: vars$O
 });
 
-const globalRefs$z = getThemeRefs(globals$1);
+const globalRefs$z = getThemeRefs$1(globals);
 const vars$N = LinkClass.cssVarList;
 
 const link = {
@@ -20407,22 +20407,22 @@ var link$1 = /*#__PURE__*/Object.freeze({
   vars: vars$N
 });
 
-const globalRefs$y = getThemeRefs(globals$1);
+const globalRefs$y = getThemeRefs$1(globals);
 const vars$M = EnrichedTextClass.cssVarList;
 
 const enrichedText = {
   [vars$M.hostDirection]: globalRefs$y.direction,
-  [vars$M.hostWidth]: useVar(vars$O.hostWidth),
+  [vars$M.hostWidth]: useVar$1(vars$O.hostWidth),
 
-  [vars$M.textLineHeight]: useVar(vars$O.textLineHeight),
-  [vars$M.textColor]: useVar(vars$O.textColor),
-  [vars$M.textAlign]: useVar(vars$O.textAlign),
+  [vars$M.textLineHeight]: useVar$1(vars$O.textLineHeight),
+  [vars$M.textColor]: useVar$1(vars$O.textColor),
+  [vars$M.textAlign]: useVar$1(vars$O.textAlign),
 
-  [vars$M.fontSize]: useVar(vars$O.fontSize),
-  [vars$M.fontWeight]: useVar(vars$O.fontWeight),
-  [vars$M.fontFamily]: useVar(vars$O.fontFamily),
+  [vars$M.fontSize]: useVar$1(vars$O.fontSize),
+  [vars$M.fontWeight]: useVar$1(vars$O.fontWeight),
+  [vars$M.fontFamily]: useVar$1(vars$O.fontFamily),
 
-  [vars$M.linkColor]: useVar(vars$N.textColor),
+  [vars$M.linkColor]: useVar$1(vars$N.textColor),
   [vars$M.linkTextDecoration]: 'none',
   [vars$M.linkHoverTextDecoration]: 'underline',
 
@@ -21992,7 +21992,7 @@ const compVars$2 = ListClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   { shadowColor: '#00000020' },
-  componentName$k
+  componentName$m
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$1;