@descope/web-components-ui 1.105.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';
@@ -5386,6 +5386,104 @@ loadingIndicatorStyles = `
 
 customElements.define(componentName$18, ButtonClass);
 
+const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
+
+const DEFAULT_FORMAT = SUPPORTED_FORMATS[0];
+
+const NATIVE_FORMAT = 'YYYY-MM-DD';
+
+const YEARS_RANGE = 100;
+
+const DIVIDER = '/';
+
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+const weekdays = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
+
+const counterConfig = {
+  MONTH: { id: 'month', min: 1, max: 12, placeholder: 'MM' },
+  DAY: { id: 'day', min: 1, max: 31, placeholder: 'DD' },
+  YEAR: { id: 'year', min: 0, max: 9999, placeholder: 'YYYY' },
+};
+
+const valRange = {
+  year: { min: 1900, max: 2099 },
+};
+
+const BUTTON_LABEL_DONE = 'Done';
+const BUTTON_LABEL_CANCEL = 'Cancel';
+const CALENDAR_LABEL_TODAY = 'Today';
+
+const MOBILE_DEVICE_INTERACTION_TIMEOUT_MS = 150;
+
+const patterns = {
+  MM: '(0?[1-9]|1[0-2])',
+  DD: '(0?[1-9]|[12][0-9]|3[01])',
+  YYYY: '([0-9]{4})',
+};
+
+const createPattern = (format) => {
+  const pattern = format
+    .split(DIVIDER)
+    .map((part) => patterns[part])
+    .join('\\D');
+
+  return `^${pattern}$`;
+};
+
+const createToValuesFn = (format) => {
+  const order = format.split(DIVIDER);
+  return (match) => {
+    const values = {};
+    order.forEach((part, index) => {
+      values[part] = match[index + 1];
+    });
+    return [values.YYYY, values.MM, values.DD];
+  };
+};
+
+const createDate = (val, regexp, toValuesFn) => {
+  const match = regexp.exec(val);
+  if (!match) return null;
+  const [year, month, day] = toValuesFn(match);
+  return newDate([year, month, day].join(DIVIDER));
+};
+
+const createFormat = (format) => {
+  const pattern = createPattern(format);
+  const toValuesFn = createToValuesFn(format);
+  const regexp = new RegExp(pattern);
+
+  return {
+    pattern,
+    validate: (val) => regexp.test(val),
+    getDate: (val) => createDate(val, regexp, toValuesFn),
+  };
+};
+
+const formats = Object.fromEntries(SUPPORTED_FORMATS.map((f) => [f, createFormat(f)]));
+
 const isValidTimestamp = (val) => !Number.isNaN(Number(val));
 
 const isNumber = (val) => !!String(val || '').trim() && !Number.isNaN(Number(val));
@@ -5435,6 +5533,12 @@ const overrideConstructedStylesheet = (ele) => {
   ele?.shadowRoot?.adoptedStyleSheets?.push(cs);
 };
 
+const parseDateString = (val, format) => {
+  const trimmed = val.trim?.();
+  if (!trimmed) return null;
+  return formats[format].getDate(trimmed);
+};
+
 const calendarIcon = `
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M9 5H15V4.50468C15 4.21404 15.226 4 15.5047 4H16.4953C16.786 4 17 4.22595 17 4.50468V5H18.7568C19.3028 5 19.75 5.44725 19.75 5.99896V7.00104C19.75 7.55734 19.3053 8 18.7568 8H5.24317C4.69717 8 4.25 7.55275 4.25 7.00104V5.99896C4.25 5.44266 4.69466 5 5.24317 5H7V4.50468C7 4.21404 7.22596 4 7.50468 4H8.49532C8.78596 4 9 4.22595 9 4.50468V5ZM5.50468 9H6.49532C6.78596 9 7 9.22596 7 9.50468V10.4953C7 10.786 6.77404 11 6.49532 11H5.50468C5.21404 11 5 10.774 5 10.4953V9.50468C5 9.21404 5.22595 9 5.50468 9ZM8.50468 9H9.49532C9.78596 9 10 9.22596 10 9.50468V10.4953C10 10.786 9.77404 11 9.49532 11H8.50468C8.21404 11 8 10.774 8 10.4953V9.50468C8 9.21404 8.22596 9 8.50468 9ZM11.5047 9H12.4953C12.786 9 13 9.22596 13 9.50468V10.4953C13 10.786 12.774 11 12.4953 11H11.5047C11.214 11 11 10.774 11 10.4953V9.50468C11 9.21404 11.226 9 11.5047 9ZM5.50468 12H6.49532C6.78596 12 7 12.226 7 12.5047V13.4953C7 13.786 6.77404 14 6.49532 14H5.50468C5.21404 14 5 13.774 5 13.4953V12.5047C5 12.214 5.22595 12 5.50468 12ZM8.50468 12H9.49532C9.78596 12 10 12.226 10 12.5047V13.4953C10 13.786 9.77404 14 9.49532 14H8.50468C8.21404 14 8 13.774 8 13.4953V12.5047C8 12.214 8.22596 12 8.50468 12ZM11.5047 12H12.4953C12.786 12 13 12.226 13 12.5047V13.4953C13 13.786 12.774 14 12.4953 14H11.5047C11.214 14 11 13.774 11 13.4953V12.5047C11 12.214 11.226 12 11.5047 12ZM5.50468 15H6.49532C6.78596 15 7 15.226 7 15.5047V16.4953C7 16.786 6.77404 17 6.49532 17H5.50468C5.21404 17 5 16.774 5 16.4953V15.5047C5 15.214 5.22595 15 5.50468 15ZM8.50468 15H9.49532C9.78596 15 10 15.226 10 15.5047V16.4953C10 16.786 9.77404 17 9.49532 17H8.50468C8.21404 17 8 16.774 8 16.4953V15.5047C8 15.214 8.22596 15 8.50468 15ZM11.5047 15H12.4953C12.786 15 13 15.226 13 15.5047V16.4953C13 16.786 12.774 17 12.4953 17H11.5047C11.214 17 11 16.774 11 16.4953V15.5047C11 15.214 11.226 15 11.5047 15ZM14.5047 9H15.4953C15.786 9 16 9.22596 16 9.50468V10.4953C16 10.786 15.774 11 15.4953 11H14.5047C14.214 11 14 10.774 14 10.4953V9.50468C14 9.21404 14.226 9 14.5047 9ZM14.5047 12H15.4953C15.786 12 16 12.226 16 12.5047V13.4953C16 13.786 15.774 14 15.4953 14H14.5047C14.214 14 14 13.774 14 13.4953V12.5047C14 12.214 14.226 12 14.5047 12ZM14.5047 15H15.4953C15.786 15 16 15.226 16 15.5047V16.4953C16 16.786 15.774 17 15.4953 17H14.5047C14.214 17 14 16.774 14 16.4953V15.5047C14 15.214 14.226 15 14.5047 15ZM17.5047 15H18.4953C18.786 15 19 15.226 19 15.5047V16.4953C19 16.786 18.774 17 18.4953 17H17.5047C17.214 17 17 16.774 17 16.4953V15.5047C17 15.214 17.226 15 17.5047 15ZM5.50468 18H6.49532C6.78596 18 7 18.226 7 18.5047V19.4953C7 19.786 6.77404 20 6.49532 20H5.50468C5.21404 20 5 19.774 5 19.4953V18.5047C5 18.214 5.22595 18 5.50468 18ZM8.50468 18H9.49532C9.78596 18 10 18.226 10 18.5047V19.4953C10 19.786 9.77404 20 9.49532 20H8.50468C8.21404 20 8 19.774 8 19.4953V18.5047C8 18.214 8.22596 18 8.50468 18ZM11.5047 18H12.4953C12.786 18 13 18.226 13 18.5047V19.4953C13 19.786 12.774 20 12.4953 20H11.5047C11.214 20 11 19.774 11 19.4953V18.5047C11 18.214 11.226 18 11.5047 18ZM14.5047 18H15.4953C15.786 18 16 18.226 16 18.5047V19.4953C16 19.786 15.774 20 15.4953 20H14.5047C14.214 20 14 19.774 14 19.4953V18.5047C14 18.214 14.226 18 14.5047 18ZM17.5047 18H18.4953C18.786 18 19 18.226 19 18.5047V19.4953C19 19.786 18.774 20 18.4953 20H17.5047C17.214 20 17 19.774 17 19.4953V18.5047C17 18.214 17.226 18 17.5047 18ZM17.5047 12H18.4953C18.786 12 19 12.226 19 12.5047V13.4953C19 13.786 18.774 14 18.4953 14H17.5047C17.214 14 17 13.774 17 13.4953V12.5047C17 12.214 17.226 12 17.5047 12ZM17.5047 9H18.4953C18.786 9 19 9.22596 19 9.50468V10.4953C19 10.786 18.774 11 18.4953 11H17.5047C17.214 11 17 10.774 17 10.4953V9.50468C17 9.21404 17.226 9 17.5047 9Z" fill="#808080"/>
@@ -5450,57 +5554,6 @@ const arrowLeftIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="non
 <path d="M14.7272 17.2193C15.1209 17.6584 15.0841 18.3334 14.6451 18.7272C14.206 19.1209 13.5309 19.0841 13.1372 18.6451C13.1372 18.6451 7.99776 13.0457 7.63399 12.64C7.27023 12.2343 7.27023 11.7608 7.63399 11.3552L13.1372 5.35492C13.5309 4.91587 14.206 4.87912 14.6451 5.27283C15.0841 5.66655 15.1209 6.34164 14.7272 6.78069L9.86322 12L14.7272 17.2193Z" fill="#808080"/>
 </svg>`;
 
-const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
-
-const DEFAULT_FORMAT = SUPPORTED_FORMATS[0];
-
-const NATIVE_FORMAT = 'YYYY-MM-DD';
-
-const YEARS_RANGE = 100;
-
-const DIVIDER = '/';
-
-const months = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
-const weekdays = [
-  'Sunday',
-  'Monday',
-  'Tuesday',
-  'Wednesday',
-  'Thursday',
-  'Friday',
-  'Saturday',
-];
-
-const counterConfig = {
-  MONTH: { id: 'month', min: 1, max: 12, placeholder: 'MM' },
-  DAY: { id: 'day', min: 1, max: 31, placeholder: 'DD' },
-  YEAR: { id: 'year', min: 0, max: 9999, placeholder: 'YYYY' },
-};
-
-const valRange = {
-  year: { min: 1900, max: 2099 },
-};
-
-const BUTTON_LABEL_DONE = 'Done';
-const BUTTON_LABEL_CANCEL = 'Cancel';
-const CALENDAR_LABEL_TODAY = 'Today';
-
-const MOBILE_DEVICE_INTERACTION_TIMEOUT_MS = 150;
-
 const isValidAttrArr = (arr, count) =>
   Array.isArray(arr) && arr.length === count && arr.filter(Boolean).length === count;
 
@@ -6595,53 +6648,6 @@ const TextFieldClass = compose$1(
 
 customElements.define(componentName$16, TextFieldClass);
 
-const patterns = {
-  MM: '(0?[1-9]|1[0-2])',
-  DD: '(0?[1-9]|[12][0-9]|3[01])',
-  YYYY: '([0-9]{4})',
-};
-
-const createPattern = (format) => {
-  const pattern = format
-    .split(DIVIDER)
-    .map((part) => patterns[part])
-    .join('\\D');
-
-  return `^${pattern}$`;
-};
-
-const createToValuesFn = (format) => {
-  const order = format.split(DIVIDER);
-  return (match) => {
-    const values = {};
-    order.forEach((part, index) => {
-      values[part] = match[index + 1];
-    });
-    return [values.YYYY, values.MM, values.DD];
-  };
-};
-
-const createDate = (val, regexp, toValuesFn) => {
-  const match = regexp.exec(val);
-  if (!match) return null;
-  const [year, month, day] = toValuesFn(match);
-  return newDate([year, month, day].join(DIVIDER));
-};
-
-const createFormat = (format) => {
-  const pattern = createPattern(format);
-  const toValuesFn = createToValuesFn(format);
-  const regexp = new RegExp(pattern);
-
-  return {
-    pattern,
-    validate: (val) => regexp.test(val),
-    getDate: (val) => createDate(val, regexp, toValuesFn),
-  };
-};
-
-const formats = Object.fromEntries(SUPPORTED_FORMATS.map((f) => [f, createFormat(f)]));
-
 // DateCounterClass allows us to add several counters to the input, and use them seperately.
 // For examele, we have a DayCounter, MonthCounter and YearCounter, which can each separately navigate
 // between different ranges.
@@ -6951,6 +6957,11 @@ class RawDateFieldClass extends BaseInputClass$a {
     return this.getAttribute('disable-calendar') === 'true';
   }
 
+  get isSelectAll() {
+    const inputEle = this.inputElement.baseElement.inputElement;
+    return inputEle.value.length === inputEle.selectionStart + inputEle.selectionEnd;
+  }
+
   reportValidity() {
     this.inputElement.reportValidity();
   }
@@ -6985,9 +6996,10 @@ class RawDateFieldClass extends BaseInputClass$a {
     this.inputElement.addEventListener('focus', this.onFocus.bind(this));
     this.inputElement.addEventListener('blur', this.onBlur.bind(this));
     this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));
-    this.inputElement.addEventListener('keydown', this.handleArrowKeys.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleKeyboard.bind(this));
     this.inputElement.addEventListener('beforeinput', this.handleInput.bind(this));
     this.inputElement.addEventListener('pointerdown', this.onPointerDown.bind(this));
+    this.inputElement.addEventListener('paste', this.onPaste.bind(this));
 
     forwardAttrs$1(this, this.inputElement, {
       includeAttrs: [
@@ -7016,6 +7028,8 @@ class RawDateFieldClass extends BaseInputClass$a {
   handleInput(e) {
     e.preventDefault();
 
+    this.handleSelectAll();
+
     if (e.data && isNumber(e.data)) {
       this.parseDigits(e.data);
       this.updateCountersDisplay();
@@ -7036,6 +7050,12 @@ class RawDateFieldClass extends BaseInputClass$a {
     });
   }
 
+  handleSelectAll() {
+    if (this.isSelectAll) {
+      this.selectFirstCounter();
+    }
+  }
+
   #popoverPosStylesheet;
 
   #popoverRenderer(root) {
@@ -7206,7 +7226,8 @@ class RawDateFieldClass extends BaseInputClass$a {
     }
 
     // On focus select the first counter
-    this.selectedCounterIdx = 0;
+    this.selectFirstCounter();
+    // set selection on first counter
     this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
   }
 
@@ -7265,6 +7286,10 @@ class RawDateFieldClass extends BaseInputClass$a {
     );
   }
 
+  selectFirstCounter() {
+    this.selectedCounterIdx = 0;
+  }
+
   selectNextCounter() {
     if (this.selectedCounterIdx < this.dateCounters.length) {
       this.selectedCounterIdx = Math.min(this.selectedCounterIdx + 1, 2);
@@ -7322,7 +7347,17 @@ class RawDateFieldClass extends BaseInputClass$a {
     });
   }
 
-  handleArrowKeys(e) {
+  handleKeyboard(e) {
+    if (e.metaKey || e.ctrlKey) {
+      if (e.key.toLowerCase() === 'x') {
+        this.onCut(e);
+      }
+
+      return;
+    }
+
+    this.handleSelectAll();
+
     if (e.key === 'ArrowUp') {
       this.activeCounter.inc();
     } else if (e.key === 'ArrowDown') {
@@ -7355,6 +7390,11 @@ class RawDateFieldClass extends BaseInputClass$a {
   }
 
   handleBackspace() {
+    if (this.isSelectAll) {
+      this.resetToInitialState();
+      return;
+    }
+
     const counter = this.activeCounter;
 
     if (counter.isEmpty) {
@@ -7472,6 +7512,62 @@ class RawDateFieldClass extends BaseInputClass$a {
 
     return ret;
   }
+
+  resetToInitialState() {
+    this.resetDateCounters();
+    this.selectFirstCounter();
+    this.resetDisplay();
+  }
+
+  onCut(e) {
+    e.preventDefault();
+
+    if (this.isSelectAll) {
+      this.#copyToClipboard(this.countersValue);
+      this.resetToInitialState();
+    } else {
+      this.#copyToClipboard(this.activeCounter.stringValue);
+      this.activeCounter.set('');
+    }
+
+    this.setInputSelectionRange();
+  }
+
+  #copyToClipboard(value) {
+    try {
+      navigator.clipboard.writeText(value);
+    } catch (err) {
+      console.error('Failed to copy date value:', err);
+    }
+  }
+
+  onPaste(e) {
+    e.preventDefault();
+
+    const clipboardData = e.clipboardData || window.clipboardData;
+    const pastedData = clipboardData.getData('Text');
+
+    // try paste entire date if valid
+    const validDate = parseDateString(pastedData, this.format);
+
+    if (validDate) {
+      this.value = validDate.getTime();
+      this.onDateCounterChange();
+
+      // select all
+      setTimeout(() => this.inputElement.setSelectionRange(0, this.inputElement.value.length));
+    } else {
+      const value = Number(pastedData);
+
+      // try paste in counter if possible
+      if (value && this.activeCounter.min <= value && this.activeCounter.max >= value) {
+        // use String to get rid of any zero padding
+        this.activeCounter.set(String(value));
+
+        setTimeout(() => this.setInputSelectionRange());
+      }
+    }
+  }
 }
 
 const textVars$5 = TextFieldClass.cssVarList;
@@ -7808,81 +7904,9 @@ 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;
+const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
+  let style;
+  const getContent = () => style;
 
   class RawCssVarImageClass extends createBaseClass$1({
     componentName,
@@ -7934,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({
@@ -7998,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';
@@ -8029,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'];
 
@@ -8042,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() {
@@ -8256,7 +8280,7 @@ class PasscodeInternal extends BaseInputClass$9 {
   }
 }
 
-const componentName$X = getComponentName$1('passcode');
+const componentName$Y = getComponentName$1('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -8301,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'] });
     }
@@ -8327,7 +8351,7 @@ const customMixin$c = (superclass) =>
   };
 
 const {
-  host: host$k,
+  host: host$l,
   digitField,
   label: label$7,
   requiredIndicator: requiredIndicator$7,
@@ -8350,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' },
@@ -8471,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 {
@@ -8518,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 {
@@ -8627,7 +8651,7 @@ const customMixin$b = (superclass) =>
   };
 
 const {
-  host: host$j,
+  host: host$k,
   inputField: inputField$4,
   inputElement: inputElement$2,
   inputElementPlaceholder,
@@ -8653,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: [
@@ -8800,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');
-      }
-
-      if (attrName === 'link-target-blank') {
-        this.#initProcessor();
-      }
-    }
-  }
+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,
+  })
+);
 
-  // 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
@@ -10380,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'];
@@ -10394,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() {
@@ -10751,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 {
@@ -10770,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: [
@@ -10822,7 +10621,7 @@ const customMixin$a = (superclass) =>
   };
 
 const {
-  host: host$h,
+  host: host$i,
   label: label$4,
   requiredIndicator: requiredIndicator$4,
   inputField: inputField$2,
@@ -10849,7 +10648,7 @@ const PhoneFieldClass = compose$1(
   createStyleMixin$1({
     mappings: {
       fontSize: [
-        host$h,
+        host$i,
         inputField$2,
         {
           selector: TextFieldClass.componentName,
@@ -10870,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' },
@@ -11050,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;
@@ -11066,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',
@@ -11082,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() {
@@ -11328,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 {
@@ -11346,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: [
@@ -11381,7 +11180,7 @@ const customMixin$9 = (superclass) =>
   };
 
 const {
-  host: host$g,
+  host: host$h,
   label: label$3,
   inputElement: inputElement$1,
   requiredIndicator: requiredIndicator$3,
@@ -11412,7 +11211,7 @@ const PhoneFieldInputBoxClass = compose$1(
   createStyleMixin$1({
     mappings: {
       fontSize: [
-        host$g,
+        host$h,
         inputField$1,
         {
           selector: TextFieldClass.componentName,
@@ -11420,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' },
@@ -11558,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',
@@ -11581,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 = [];
@@ -11818,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' },
@@ -11834,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' },
@@ -11853,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;
 
@@ -11867,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();
@@ -11941,7 +11740,7 @@ const customMixin$8 = (superclass) =>
   };
 
 const {
-  host: host$e,
+  host: host$f,
   label: label$2,
   internalInputsWrapper,
   errorMessage: errorMessage$4,
@@ -11962,7 +11761,7 @@ const NewPasswordClass = compose$1(
   createStyleMixin$1({
     mappings: {
       fontSize: [
-        host$e,
+        host$f,
         {},
         {
           selector: PasswordClass.componentName,
@@ -11980,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,
@@ -12062,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-/;
@@ -12106,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() {
@@ -12352,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 {
@@ -12586,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) => {
@@ -12600,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',
@@ -12615,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() {
@@ -12791,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(*)' },
@@ -12810,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' },
@@ -12834,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({
@@ -12924,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'));
@@ -13083,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' },
@@ -13092,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' },
@@ -13172,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 {
@@ -13181,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'],
@@ -13218,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() {
@@ -13338,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'));
@@ -13448,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 {
@@ -13457,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'],
@@ -13494,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 */
 
@@ -13528,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 */
 
@@ -13565,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');
@@ -13626,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 */
 
@@ -13667,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');
@@ -13681,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'];
   }
@@ -13803,7 +13602,7 @@ const {
   addition,
   deletion,
   charEscape,
-  link: link$2,
+  link: link$3,
   params,
   property,
   punctuation,
@@ -13906,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' },
@@ -13917,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);
@@ -13992,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 {
@@ -14205,7 +14004,7 @@ const GridMixin = (superclass) =>
   };
 
 const {
-  host: host$b,
+  host: host$c,
   headerRow,
   headerRowCell,
   contentRow,
@@ -14258,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' },
@@ -14277,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' },
@@ -14346,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 {
@@ -14753,7 +14552,7 @@ const multiSelectComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$a,
+  host: host$b,
   inputField,
   inputElement,
   placeholder,
@@ -14791,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' },
@@ -15005,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();
 
@@ -15069,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'];
 
@@ -15195,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');
 
@@ -15210,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 {
@@ -15254,7 +15053,7 @@ const notificationCardMixin = (superclass) =>
     }
   };
 
-const selectors$1 = {
+const selectors$2 = {
   content: () => 'vaadin-notification-card::part(content)',
   overlay: () => 'vaadin-notification-card::part(overlay)',
 };
@@ -15262,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' },
       ],
     },
   }),
@@ -15318,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 {
@@ -15419,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;
@@ -15674,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 {
@@ -15703,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: [
@@ -15740,7 +15539,7 @@ const customMixin$6 = (superclass) =>
   };
 
 const {
-  host: host$9,
+  host: host$a,
   helperText,
   errorMessage: errorMessage$1,
   mappingItem,
@@ -15768,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' },
@@ -15845,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',
@@ -15864,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() {
@@ -16019,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() {
@@ -16242,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"]' },
@@ -16255,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 },
@@ -16273,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() {
@@ -16441,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' },
@@ -16453,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 },
@@ -16474,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() {
@@ -16604,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 {
@@ -16614,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: [
@@ -16642,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)' },
@@ -16651,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' },
@@ -16705,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 {
@@ -16778,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 {
@@ -16797,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
@@ -16952,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 {
@@ -16975,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 {
@@ -17025,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'];
   }
@@ -17177,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() {
@@ -17260,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' },
@@ -17270,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' },
@@ -17290,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>`;
@@ -17391,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
@@ -17453,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%;
@@ -17478,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) => {
@@ -17499,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();
 
@@ -17607,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() {
@@ -17771,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() {
@@ -17904,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',
@@ -17929,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();
 
@@ -18039,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 [];
     }
   }
@@ -18147,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',
@@ -18173,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();
 
@@ -18247,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 [];
     }
   }
@@ -18382,7 +18181,7 @@ const SecurityQuestionsVerifyClass = compose$1(
   componentNameValidationMixin$1
 )(RawSecurityQuestionsVerify);
 
-customElements.define(componentName$d, SecurityQuestionsVerifyClass);
+customElements.define(componentName$f, SecurityQuestionsVerifyClass);
 
 const NUMERIC_RE = /^\d+$/;
 
@@ -18390,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: [
@@ -18456,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',
 });
 
@@ -18769,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');
 
@@ -20275,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 = {
@@ -20311,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',
 
@@ -21896,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;