@descope/web-components-ui 1.0.238 → 1.0.240

package/dist/index.esm.js

@@ -1239,7 +1239,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$D = getComponentName('button');
+const componentName$E = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1277,7 +1277,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$g, label: label$9 } = {
+const { host: host$h, label: label$a } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
 };
@@ -1289,7 +1289,7 @@ const ButtonClass = compose(
     mappings: {
       hostWidth: { property: 'width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$g, property: 'direction' },
+      hostDirection: { ...host$h, property: 'direction' },
       fontSize: {},
       fontFamily: {},
 
@@ -1309,8 +1309,8 @@ const ButtonClass = compose(
       verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
 
       labelTextColor: { property: 'color' },
-      labelTextDecoration: { ...label$9, property: 'text-decoration' },
-      labelSpacing: { ...label$9, property: 'gap' },
+      labelTextDecoration: { ...label$a, property: 'text-decoration' },
+      labelSpacing: { ...label$a, property: 'gap' },
     },
   }),
   clickableMixin,
@@ -1340,7 +1340,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
@@ -1377,7 +1377,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$D, ButtonClass);
+customElements.define(componentName$E, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1387,11 +1387,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$C = getComponentName('boolean-field-internal');
+const componentName$D = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -1467,14 +1467,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$C}
+				<${componentName$D}
 					tabindex="-1"
 					slot="input"
-				></${componentName$C}>
+				></${componentName$D}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$C);
+      this.inputElement = this.shadowRoot.querySelector(componentName$D);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1673,17 +1673,17 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$B = getComponentName('checkbox');
+const componentName$C = getComponentName('checkbox');
 
 const {
-  host: host$f,
+  host: host$g,
   component: component$1,
   checkboxElement,
   checkboxSurface,
   checkboxLabel: checkboxLabel$1,
-  requiredIndicator: requiredIndicator$a,
-  helperText: helperText$8,
-  errorMessage: errorMessage$a,
+  requiredIndicator: requiredIndicator$b,
+  helperText: helperText$9,
+  errorMessage: errorMessage$b,
 } = {
   host: { selector: () => ':host' },
   requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -1698,19 +1698,19 @@ const {
 const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$f, property: 'width' },
-      hostDirection: { ...host$f, property: 'direction' },
+      hostWidth: { ...host$g, property: 'width' },
+      hostDirection: { ...host$g, property: 'direction' },
 
-      fontSize: [host$f, checkboxElement, checkboxLabel$1],
-      fontFamily: [checkboxLabel$1, helperText$8, errorMessage$a],
+      fontSize: [host$g, checkboxElement, checkboxLabel$1],
+      fontFamily: [checkboxLabel$1, helperText$9, errorMessage$b],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
       labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
       labelLineHeight: { ...checkboxLabel$1, property: 'line-height' },
       labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
-      labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
+      labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
 
-      errorMessageTextColor: { ...errorMessage$a, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$b, property: 'color' },
 
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
       inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
@@ -1779,25 +1779,25 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$B,
+    componentName: componentName$C,
   })
 );
 
-customElements.define(componentName$C, BooleanInputInternal);
+customElements.define(componentName$D, BooleanInputInternal);
 
-customElements.define(componentName$B, CheckboxClass);
+customElements.define(componentName$C, CheckboxClass);
 
-const componentName$A = getComponentName('switch-toggle');
+const componentName$B = getComponentName('switch-toggle');
 
 const {
-  host: host$e,
+  host: host$f,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
   checkboxLabel,
-  requiredIndicator: requiredIndicator$9,
-  helperText: helperText$7,
-  errorMessage: errorMessage$9,
+  requiredIndicator: requiredIndicator$a,
+  helperText: helperText$8,
+  errorMessage: errorMessage$a,
 } = {
   host: { selector: () => ':host' },
   requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -1812,19 +1812,19 @@ const {
 const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$e, property: 'width' },
-      hostDirection: { ...host$e, property: 'direction' },
+      hostWidth: { ...host$f, property: 'width' },
+      hostDirection: { ...host$f, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
-      fontFamily: [checkboxLabel, helperText$7, errorMessage$9],
+      fontFamily: [checkboxLabel, helperText$8, errorMessage$a],
 
       labelTextColor: { ...checkboxLabel, property: 'color' },
       labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
       labelLineHeight: { ...checkboxLabel, property: 'line-height' },
       labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
-      labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
+      labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
 
-      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$a, property: 'color' },
 
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
@@ -1919,17 +1919,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
 
-customElements.define(componentName$A, SwitchToggleClass);
+customElements.define(componentName$B, SwitchToggleClass);
 
-const componentName$z = getComponentName('loader-linear');
+const componentName$A = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$z;
+    return componentName$A;
   }
 
   constructor() {
@@ -1965,18 +1965,18 @@ const selectors$2 = {
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$d } = selectors$2;
+const { after: after$1, host: host$e } = selectors$2;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$d, property: 'width' },
+      hostWidth: { ...host$e, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$d, property: 'padding-top' },
-        { ...host$d, property: 'padding-bottom' },
+        { ...host$e, property: 'padding-top' },
+        { ...host$e, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after$1, property: 'background-color' },
@@ -1990,11 +1990,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$z, LoaderLinearClass);
+customElements.define(componentName$A, LoaderLinearClass);
 
-const componentName$y = getComponentName('loader-radial');
+const componentName$z = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2038,11 +2038,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$y, LoaderRadialClass);
+customElements.define(componentName$z, LoaderRadialClass);
 
-const componentName$x = getComponentName('container');
+const componentName$y = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$x, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$y, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2094,13 +2094,13 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$x, ContainerClass);
+customElements.define(componentName$y, ContainerClass);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$w = getComponentName('text');
+const componentName$x = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2160,8 +2160,8 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const componentName$v = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
+const componentName$w = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2207,7 +2207,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$v, baseS
 }
 
 const textVars$3 = TextClass.cssVarList;
-const { host: host$c, before, after, text: text$3 } = {
+const { host: host$d, before, after, text: text$3 } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
   after: { selector: '::after' },
@@ -2217,8 +2217,8 @@ const { host: host$c, before, after, text: text$3 } = {
 const DividerClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$c, property: 'width' },
-      hostPadding: { ...host$c, property: 'padding' },
+      hostWidth: { ...host$d, property: 'width' },
+      hostPadding: { ...host$d, property: 'padding' },
       hostDirection: { ...text$3, property: 'direction' },
 
       minHeight: {},
@@ -2260,11 +2260,11 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$w, TextClass);
+customElements.define(componentName$x, TextClass);
 
-customElements.define(componentName$v, DividerClass);
+customElements.define(componentName$w, DividerClass);
 
-const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
+const { host: host$c, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$9, inputField: inputField$6, input, helperText: helperText$7, errorMessage: errorMessage$9 } =
   {
     host: { selector: () => ':host' },
     label: { selector: '::part(label)' },
@@ -2278,48 +2278,48 @@ const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndica
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host$b],
-  fontFamily: [label$8, inputField$5, helperText$6, errorMessage$8],
+  fontSize: [{}, host$c],
+  fontFamily: [label$9, inputField$6, helperText$7, errorMessage$9],
 
-  hostWidth: { ...host$b, property: 'width' },
-  hostMinWidth: { ...host$b, property: 'min-width' },
-  hostDirection: { ...host$b, property: 'direction' },
+  hostWidth: { ...host$c, property: 'width' },
+  hostMinWidth: { ...host$c, property: 'min-width' },
+  hostDirection: { ...host$c, property: 'direction' },
 
-  inputBackgroundColor: { ...inputField$5, property: 'background-color' },
+  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
 
   labelTextColor: [
-    { ...label$8, property: 'color' },
-    { ...requiredIndicator$8, property: 'color' },
+    { ...label$9, property: 'color' },
+    { ...requiredIndicator$9, property: 'color' },
   ],
-  errorMessageTextColor: { ...errorMessage$8, property: 'color' },
+  errorMessageTextColor: { ...errorMessage$9, property: 'color' },
 
-  inputValueTextColor: { ...inputField$5, property: 'color' },
+  inputValueTextColor: { ...inputField$6, property: 'color' },
   inputCaretTextColor: { ...input, property: 'color' },
 
-  labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
+  labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
 
-  inputBorderColor: { ...inputField$5, property: 'border-color' },
-  inputBorderWidth: { ...inputField$5, property: 'border-width' },
-  inputBorderStyle: { ...inputField$5, property: 'border-style' },
-  inputBorderRadius: { ...inputField$5, property: 'border-radius' },
+  inputBorderColor: { ...inputField$6, property: 'border-color' },
+  inputBorderWidth: { ...inputField$6, property: 'border-width' },
+  inputBorderStyle: { ...inputField$6, property: 'border-style' },
+  inputBorderRadius: { ...inputField$6, property: 'border-radius' },
 
-  inputHeight: { ...inputField$5, property: 'height' },
+  inputHeight: { ...inputField$6, property: 'height' },
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
   ],
 
-  inputOutlineColor: { ...inputField$5, property: 'outline-color' },
-  inputOutlineStyle: { ...inputField$5, property: 'outline-style' },
-  inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
-  inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
+  inputOutlineColor: { ...inputField$6, property: 'outline-color' },
+  inputOutlineStyle: { ...inputField$6, property: 'outline-style' },
+  inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
+  inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
 
   inputTextAlign: { ...input, property: 'text-align' },
 
-  inputPlaceholderColor: { ...placeholder$2, property: 'color' },
+  inputPlaceholderColor: { ...placeholder$3, property: 'color' },
 };
 
-const componentName$u = getComponentName('email-field');
+const componentName$v = getComponentName('email-field');
 
 const customMixin$7 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -2354,15 +2354,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$u,
+    componentName: componentName$v,
   })
 );
 
-customElements.define(componentName$u, EmailFieldClass);
+customElements.define(componentName$v, EmailFieldClass);
 
-const componentName$t = getComponentName('link');
+const componentName$u = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$t, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$u, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2408,12 +2408,12 @@ const selectors$1 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$a, wrapper: wrapper$1 } = selectors$1;
+const { anchor, text: text$2, host: host$b, wrapper: wrapper$1 } = selectors$1;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$a, property: 'width' },
+      hostWidth: { ...host$b, property: 'width' },
       hostDirection: { ...text$2, property: 'direction' },
       textAlign: wrapper$1,
       textColor: [
@@ -2427,7 +2427,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$t, LinkClass);
+customElements.define(componentName$u, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2479,27 +2479,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$s = getComponentName('logo');
+const componentName$t = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$s,
+  componentName: componentName$t,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$s, LogoClass);
+customElements.define(componentName$t, LogoClass);
 
-const componentName$r = getComponentName('totp-image');
+const componentName$s = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$r,
+  componentName: componentName$s,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$r, TotpImageClass);
+customElements.define(componentName$s, TotpImageClass);
 
-const componentName$q = getComponentName('number-field');
+const componentName$r = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2525,11 +2525,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$r,
   })
 );
 
-customElements.define(componentName$q, NumberFieldClass);
+customElements.define(componentName$r, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2547,13 +2547,13 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$p = getComponentName('passcode-internal');
+const componentName$q = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -2755,7 +2755,7 @@ class PasscodeInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$o = getComponentName('text-field');
+const componentName$p = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -2805,11 +2805,11 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$o,
+    componentName: componentName$p,
   })
 );
 
-const componentName$n = getComponentName('passcode');
+const componentName$o = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -2828,17 +2828,17 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$p}
+      <${componentName$q}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$p}>
+      ><slot></slot></${componentName$q}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$p);
+      this.inputElement = this.shadowRoot.querySelector(componentName$q);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
     }
@@ -2853,13 +2853,13 @@ const customMixin$5 = (superclass) =>
   };
 
 const {
-  host: host$9,
+  host: host$a,
   digitField,
-  label: label$7,
-  requiredIndicator: requiredIndicator$7,
+  label: label$8,
+  requiredIndicator: requiredIndicator$8,
   internalWrapper: internalWrapper$1,
   focusedDigitField,
-  errorMessage: errorMessage$7,
+  errorMessage: errorMessage$8,
 } = {
   host: { selector: () => ':host' },
   focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -2875,16 +2875,16 @@ const textVars$2 = TextFieldClass.cssVarList;
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$9],
+      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$a],
       hostWidth: { property: 'width' },
-      hostDirection: { ...host$9, property: 'direction' },
-      fontFamily: [host$9, { ...label$7 }],
+      hostDirection: { ...host$a, property: 'direction' },
+      fontFamily: [host$a, { ...label$8 }],
       labelTextColor: [
-        { ...label$7, property: 'color' },
-        { ...requiredIndicator$7, property: 'color' },
+        { ...label$8, property: 'color' },
+        { ...requiredIndicator$8, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
         property: textVars$2.inputValueTextColor,
@@ -2978,15 +2978,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$n,
+    componentName: componentName$o,
   })
 );
 
-customElements.define(componentName$o, TextFieldClass);
+customElements.define(componentName$p, TextFieldClass);
 
-customElements.define(componentName$p, PasscodeInternal);
+customElements.define(componentName$q, PasscodeInternal);
 
-customElements.define(componentName$n, PasscodeClass);
+customElements.define(componentName$o, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -3022,19 +3022,19 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$m = getComponentName('password');
+const componentName$n = getComponentName('password');
 
 const {
-  host: host$8,
-  inputField: inputField$4,
-  inputElement: inputElement$1,
+  host: host$9,
+  inputField: inputField$5,
+  inputElement: inputElement$2,
   inputElementPlaceholder,
   revealButtonContainer,
   revealButtonIcon,
-  label: label$6,
-  requiredIndicator: requiredIndicator$6,
-  errorMessage: errorMessage$6,
-  helperText: helperText$5,
+  label: label$7,
+  requiredIndicator: requiredIndicator$7,
+  errorMessage: errorMessage$7,
+  helperText: helperText$6,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -3051,37 +3051,37 @@ const {
 const PasswordClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$8, property: 'width' },
-      hostMinWidth: { ...host$8, property: 'min-width' },
-      hostDirection: { ...host$8, property: 'direction' },
-      fontSize: [{}, host$8],
-      fontFamily: [label$6, inputField$4, errorMessage$6, helperText$5],
-      inputHeight: { ...inputField$4, property: 'height' },
+      hostWidth: { ...host$9, property: 'width' },
+      hostMinWidth: { ...host$9, property: 'min-width' },
+      hostDirection: { ...host$9, property: 'direction' },
+      fontSize: [{}, host$9],
+      fontFamily: [label$7, inputField$5, errorMessage$7, helperText$6],
+      inputHeight: { ...inputField$5, property: 'height' },
       inputHorizontalPadding: [
-        { ...inputElement$1, property: 'padding-left' },
-        { ...inputElement$1, property: 'padding-right' },
+        { ...inputElement$2, property: 'padding-left' },
+        { ...inputElement$2, property: 'padding-right' },
       ],
-      inputBackgroundColor: { ...inputField$4, property: 'background-color' },
+      inputBackgroundColor: { ...inputField$5, property: 'background-color' },
 
-      inputBorderStyle: { ...inputField$4, property: 'border-style' },
-      inputBorderWidth: { ...inputField$4, property: 'border-width' },
-      inputBorderColor: { ...inputField$4, property: 'border-color' },
-      inputBorderRadius: { ...inputField$4, property: 'border-radius' },
+      inputBorderStyle: { ...inputField$5, property: 'border-style' },
+      inputBorderWidth: { ...inputField$5, property: 'border-width' },
+      inputBorderColor: { ...inputField$5, property: 'border-color' },
+      inputBorderRadius: { ...inputField$5, property: 'border-radius' },
 
-      inputOutlineColor: { ...inputField$4, property: 'outline-color' },
-      inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
-      inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
-      inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
+      inputOutlineColor: { ...inputField$5, property: 'outline-color' },
+      inputOutlineStyle: { ...inputField$5, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
+      inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
 
       labelTextColor: [
-        { ...label$6, property: 'color' },
-        { ...requiredIndicator$6, property: 'color' },
+        { ...label$7, property: 'color' },
+        { ...requiredIndicator$7, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
 
       inputValueTextColor: [
-        { ...inputElement$1, property: 'color' },
+        { ...inputElement$2, property: 'color' },
         { ...revealButtonIcon, property: 'color' },
       ],
       inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
@@ -3153,23 +3153,23 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$m,
+    componentName: componentName$n,
   })
 );
 
-customElements.define(componentName$m, PasswordClass);
+customElements.define(componentName$n, PasswordClass);
 
-const componentName$l = getComponentName('text-area');
+const componentName$m = getComponentName('text-area');
 
 const {
-  host: host$7,
-  label: label$5,
-  placeholder: placeholder$1,
-  inputField: inputField$3,
+  host: host$8,
+  label: label$6,
+  placeholder: placeholder$2,
+  inputField: inputField$4,
   textArea: textArea$2,
-  requiredIndicator: requiredIndicator$5,
-  helperText: helperText$4,
-  errorMessage: errorMessage$5,
+  requiredIndicator: requiredIndicator$6,
+  helperText: helperText$5,
+  errorMessage: errorMessage$6,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -3184,28 +3184,28 @@ const {
 const TextAreaClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$7, property: 'width' },
-      hostMinWidth: { ...host$7, property: 'min-width' },
-      hostDirection: { ...host$7, property: 'direction' },
-      fontSize: [host$7, textArea$2],
-      fontFamily: [label$5, inputField$3, helperText$4, errorMessage$5],
+      hostWidth: { ...host$8, property: 'width' },
+      hostMinWidth: { ...host$8, property: 'min-width' },
+      hostDirection: { ...host$8, property: 'direction' },
+      fontSize: [host$8, textArea$2],
+      fontFamily: [label$6, inputField$4, helperText$5, errorMessage$6],
       labelTextColor: [
-        { ...label$5, property: 'color' },
-        { ...requiredIndicator$5, property: 'color' },
+        { ...label$6, property: 'color' },
+        { ...requiredIndicator$6, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
-      inputBackgroundColor: { ...inputField$3, property: 'background-color' },
+      labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+      inputBackgroundColor: { ...inputField$4, 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' },
+      inputPlaceholderTextColor: { ...placeholder$2, property: 'color' },
+      inputBorderWidth: { ...inputField$4, property: 'border-width' },
+      inputBorderStyle: { ...inputField$4, property: 'border-style' },
+      inputBorderColor: { ...inputField$4, property: 'border-color' },
+      inputBorderRadius: { ...inputField$4, property: 'border-radius' },
+      inputOutlineStyle: { ...inputField$4, property: 'outline-Style' },
+      inputOutlineColor: { ...inputField$4, property: 'outline-color' },
+      inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
+      inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
       inputResizeType: { ...textArea$2, property: 'resize' },
       inputMinHeight: { ...textArea$2, property: 'min-height' },
     },
@@ -3234,17 +3234,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$l,
+    componentName: componentName$m,
   })
 );
 
-customElements.define(componentName$l, TextAreaClass);
+customElements.define(componentName$m, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$k = getComponentName('image');
+const componentName$l = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$k, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$l, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3284,9 +3284,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$k, ImageClass);
+customElements.define(componentName$l, ImageClass);
 
-const componentName$j = getComponentName('combo-box');
+const componentName$k = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3508,15 +3508,15 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$6,
-  inputField: inputField$2,
-  inputElement,
-  placeholder,
-  toggle,
-  label: label$4,
-  requiredIndicator: requiredIndicator$4,
-  helperText: helperText$3,
-  errorMessage: errorMessage$4,
+  host: host$7,
+  inputField: inputField$3,
+  inputElement: inputElement$1,
+  placeholder: placeholder$1,
+  toggle: toggle$1,
+  label: label$5,
+  requiredIndicator: requiredIndicator$5,
+  helperText: helperText$4,
+  errorMessage: errorMessage$5,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -3532,39 +3532,39 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$6, property: 'width' },
-      hostDirection: { ...host$6, property: 'direction' },
+      hostWidth: { ...host$7, property: 'width' },
+      hostDirection: { ...host$7, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$6],
-      fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
+      fontSize: [{}, host$7],
+      fontFamily: [label$5, placeholder$1, inputField$3, helperText$4, errorMessage$5],
       labelTextColor: [
-        { ...label$4, property: 'color' },
-        { ...requiredIndicator$4, property: 'color' },
+        { ...label$5, property: 'color' },
+        { ...requiredIndicator$5, property: 'color' },
       ],
-      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
-      inputHeight: { ...inputField$2, property: 'height' },
-      inputBackgroundColor: { ...inputField$2, property: 'background-color' },
-      inputBorderColor: { ...inputField$2, property: 'border-color' },
-      inputBorderWidth: { ...inputField$2, property: 'border-width' },
-      inputBorderStyle: { ...inputField$2, property: 'border-style' },
-      inputBorderRadius: { ...inputField$2, property: 'border-radius' },
-      labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
-      inputValueTextColor: { ...inputField$2, property: 'color' },
-      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
-      inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
-      inputDropdownButtonColor: { ...toggle, property: 'color' },
-      inputDropdownButtonSize: { ...toggle, property: 'font-size' },
+      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
+      inputHeight: { ...inputField$3, property: 'height' },
+      inputBackgroundColor: { ...inputField$3, property: 'background-color' },
+      inputBorderColor: { ...inputField$3, property: 'border-color' },
+      inputBorderWidth: { ...inputField$3, property: 'border-width' },
+      inputBorderStyle: { ...inputField$3, property: 'border-style' },
+      inputBorderRadius: { ...inputField$3, property: 'border-radius' },
+      labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
+      inputValueTextColor: { ...inputField$3, property: 'color' },
+      inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
+      inputDropdownButtonCursor: { ...toggle$1, property: 'cursor' },
+      inputDropdownButtonColor: { ...toggle$1, property: 'color' },
+      inputDropdownButtonSize: { ...toggle$1, property: 'font-size' },
       inputDropdownButtonOffset: [
-        { ...toggle, property: 'margin-right' },
-        { ...toggle, property: 'margin-left' },
+        { ...toggle$1, property: 'margin-right' },
+        { ...toggle$1, property: 'margin-left' },
       ],
-      inputOutlineColor: { ...inputField$2, property: 'outline-color' },
-      inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
-      inputOutlineStyle: { ...inputField$2, property: 'outline-style' },
-      inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
+      inputOutlineColor: { ...inputField$3, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
+      inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
       inputHorizontalPadding: [
-        { ...inputElement, property: 'padding-left' },
-        { ...inputElement, property: 'padding-right' },
+        { ...inputElement$1, property: 'padding-left' },
+        { ...inputElement$1, property: 'padding-right' },
       ],
 
       // we need to use the variables from the portal mixin
@@ -3650,12 +3650,12 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data'],
-    componentName: componentName$j,
+    componentName: componentName$k,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$j, ComboBoxClass);
+customElements.define(componentName$k, ComboBoxClass);
 
 var CountryCodes = [
   {
@@ -4895,7 +4895,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$i = getComponentName('phone-field-internal');
+const componentName$j = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -4907,7 +4907,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -5079,12 +5079,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   }
 };
 
-customElements.define(componentName$i, PhoneFieldInternal$1);
+customElements.define(componentName$j, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$h = getComponentName('phone-field');
+const componentName$i = getComponentName('phone-field');
 
 const customMixin$4 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -5098,15 +5098,15 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$i}
+				<${componentName$j}
 					tabindex="-1"
 					slot="input"
-				></${componentName$i}>
+				></${componentName$j}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$i);
+      this.inputElement = this.shadowRoot.querySelector(componentName$j);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5126,15 +5126,15 @@ const customMixin$4 = (superclass) =>
   };
 
 const {
-  host: host$5,
-  label: label$3,
-  requiredIndicator: requiredIndicator$3,
-  inputField: inputField$1,
+  host: host$6,
+  label: label$4,
+  requiredIndicator: requiredIndicator$4,
+  inputField: inputField$2,
   countryCodeInput,
   phoneInput: phoneInput$1,
   separator,
-  errorMessage: errorMessage$3,
-  helperText: helperText$2,
+  errorMessage: errorMessage$4,
+  helperText: helperText$3,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -5151,8 +5151,8 @@ const PhoneFieldClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$5,
-        inputField$1,
+        host$6,
+        inputField$2,
         {
           selector: TextFieldClass.componentName,
           property: TextFieldClass.cssVarList.fontSize,
@@ -5163,34 +5163,34 @@ const PhoneFieldClass = compose(
         },
       ],
       fontFamily: [
-        label$3,
-        errorMessage$3,
-        helperText$2,
+        label$4,
+        errorMessage$4,
+        helperText$3,
         {
           ...countryCodeInput,
           property: ComboBoxClass.cssVarList.overlay.fontFamily,
         },
       ],
       hostWidth: [
-        { ...host$5, property: 'width' },
+        { ...host$6, property: 'width' },
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
-      hostDirection: { ...host$5, property: 'direction' },
+      hostDirection: { ...host$6, property: 'direction' },
 
       inputBorderStyle: [
-        { ...inputField$1, property: 'border-style' },
+        { ...inputField$2, property: 'border-style' },
         { ...separator, property: 'border-left-style' },
       ],
       inputBorderWidth: [
-        { ...inputField$1, property: 'border-width' },
+        { ...inputField$2, property: 'border-width' },
         { ...separator, property: 'border-left-width' },
       ],
       inputBorderColor: [
-        { ...inputField$1, property: 'border-color' },
+        { ...inputField$2, property: 'border-color' },
         { ...separator, property: 'border-left-color' },
       ],
-      inputBorderRadius: { ...inputField$1, property: 'border-radius' },
+      inputBorderRadius: { ...inputField$2, property: 'border-radius' },
 
       countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
       countryCodeDropdownWidth: {
@@ -5200,11 +5200,11 @@ const PhoneFieldClass = compose(
       phoneInputWidth: { ...phoneInput$1, property: 'width' },
 
       labelTextColor: [
-        { ...label$3, property: 'color' },
-        { ...requiredIndicator$3, property: 'color' },
+        { ...label$4, property: 'color' },
+        { ...requiredIndicator$4, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
 
       inputValueTextColor: [
         { ...phoneInput$1, property: textVars$1.inputValueTextColor },
@@ -5218,10 +5218,10 @@ const PhoneFieldClass = compose(
         property: comboVars.overlayItemBackgroundColor,
       },
 
-      inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
-      inputOutlineColor: { ...inputField$1, property: 'outline-color' },
-      inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
-      inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
+      inputOutlineStyle: { ...inputField$2, property: 'outline-style' },
+      inputOutlineColor: { ...inputField$2, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
+      inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
     },
   }),
   draggableMixin,
@@ -5302,17 +5302,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$h,
+    componentName: componentName$i,
   })
 );
 
-customElements.define(componentName$h, PhoneFieldClass);
+customElements.define(componentName$i, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$g = getComponentName('phone-field-internal-input-box');
+const componentName$h = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -5326,7 +5326,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -5465,11 +5465,11 @@ class PhoneFieldInternal extends BaseInputClass$2 {
   }
 }
 
-customElements.define(componentName$g, PhoneFieldInternal);
+customElements.define(componentName$h, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$f = getComponentName('phone-input-box-field');
+const componentName$g = getComponentName('phone-input-box-field');
 
 const customMixin$3 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -5483,15 +5483,15 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$g}
+				<${componentName$h}
 					tabindex="-1"
 					slot="input"
-				></${componentName$g}>
+				></${componentName$h}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$g);
+      this.inputElement = this.shadowRoot.querySelector(componentName$h);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5508,7 +5508,7 @@ const customMixin$3 = (superclass) =>
     }
   };
 
-const { host: host$4, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
+const { host: host$5, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$3, helperText: helperText$2 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -5522,38 +5522,38 @@ const PhoneFieldInputBoxClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$4,
-        inputField,
+        host$5,
+        inputField$1,
         {
           selector: TextFieldClass.componentName,
           property: TextFieldClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label$2, errorMessage$2, helperText$1],
-      hostWidth: { ...host$4, property: 'width' },
-      hostMinWidth: { ...host$4, property: 'min-width' },
-      hostDirection: { ...host$4, property: 'direction' },
+      fontFamily: [label$3, errorMessage$3, helperText$2],
+      hostWidth: { ...host$5, property: 'width' },
+      hostMinWidth: { ...host$5, property: 'min-width' },
+      hostDirection: { ...host$5, property: 'direction' },
 
-      inputBorderStyle: { ...inputField, property: 'border-style' },
-      inputBorderWidth: { ...inputField, property: 'border-width' },
-      inputBorderColor: { ...inputField, property: 'border-color' },
-      inputBorderRadius: { ...inputField, property: 'border-radius' },
+      inputBorderStyle: { ...inputField$1, property: 'border-style' },
+      inputBorderWidth: { ...inputField$1, property: 'border-width' },
+      inputBorderColor: { ...inputField$1, property: 'border-color' },
+      inputBorderRadius: { ...inputField$1, property: 'border-radius' },
 
       labelTextColor: [
-        { ...label$2, property: 'color' },
-        { ...requiredIndicator$2, property: 'color' },
+        { ...label$3, property: 'color' },
+        { ...requiredIndicator$3, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$2, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
 
       inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
 
       inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
 
-      inputOutlineStyle: { ...inputField, property: 'outline-style' },
-      inputOutlineColor: { ...inputField, property: 'outline-color' },
-      inputOutlineWidth: { ...inputField, property: 'outline-width' },
-      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
+      inputOutlineColor: { ...inputField$1, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
+      inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
     },
   }),
   draggableMixin,
@@ -5624,15 +5624,15 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$f,
+    componentName: componentName$g,
   })
 );
 
-customElements.define(componentName$f, PhoneFieldInputBoxClass);
+customElements.define(componentName$g, PhoneFieldInputBoxClass);
 
-const componentName$e = getComponentName('new-password-internal');
+const componentName$f = getComponentName('new-password-internal');
 
-const componentName$d = getComponentName('new-password');
+const componentName$e = getComponentName('new-password');
 
 const customMixin$2 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
@@ -5642,16 +5642,16 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$e}
+			<${componentName$f}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$e}>
+			></${componentName$f}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$e);
+      this.inputElement = this.shadowRoot.querySelector(componentName$f);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5672,7 +5672,7 @@ const customMixin$2 = (superclass) =>
     }
   };
 
-const { host: host$3, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText, passwordInput } = {
+const { host: host$4, label: label$2, internalInputsWrapper, errorMessage: errorMessage$2, helperText: helperText$1, passwordInput } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -5685,22 +5685,22 @@ const NewPasswordClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$3,
+        host$4,
         {},
         {
           selector: PasswordClass.componentName,
           property: PasswordClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label$1, errorMessage$1, helperText],
-      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
-      hostWidth: { ...host$3, property: 'width' },
-      hostMinWidth: { ...host$3, property: 'min-width' },
+      fontFamily: [label$2, errorMessage$2, helperText$1],
+      errorMessageTextColor: { ...errorMessage$2, property: 'color' },
+      hostWidth: { ...host$4, property: 'width' },
+      hostMinWidth: { ...host$4, property: 'min-width' },
       hostDirection: [
-        { ...host$3, property: 'direction' },
+        { ...host$4, property: 'direction' },
         { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
       ],
-      inputsRequiredIndicator: { ...host$3, property: 'content' },
+      inputsRequiredIndicator: { ...host$4, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
     },
   }),
@@ -5758,7 +5758,7 @@ const NewPasswordClass = compose(
 		}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$d,
+    componentName: componentName$e,
   })
 );
 
@@ -5783,7 +5783,7 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -5948,16 +5948,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$e, NewPasswordInternal);
+customElements.define(componentName$f, NewPasswordInternal);
 
-customElements.define(componentName$d, NewPasswordClass);
+customElements.define(componentName$e, NewPasswordClass);
 
-const componentName$c = getComponentName('recaptcha');
+const componentName$d = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
-  componentName: componentName$c,
+  componentName: componentName$d,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -6109,7 +6109,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$c, RecaptchaClass);
+customElements.define(componentName$d, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -6123,7 +6123,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$b = getComponentName('upload-file');
+const componentName$c = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -6138,7 +6138,7 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$b, baseSelector: ':host > div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$c, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -6310,7 +6310,7 @@ class RawUploadFile extends BaseInputClass {
 }
 
 const buttonVars = ButtonClass.cssVarList;
-const { host: host$2, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
+const { host: host$3, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '::slotted(*)' },
@@ -6329,11 +6329,11 @@ const UploadFileClass = compose(
       borderWidth: {},
       borderStyle: {},
       borderRadius: {},
-      hostHeight: { ...host$2, property: 'height' },
-      hostWidth: { ...host$2, property: 'width' },
+      hostHeight: { ...host$3, property: 'height' },
+      hostWidth: { ...host$3, property: 'width' },
       hostPadding: { property: 'padding' },
       hostDirection: [
-        { ...host$2, property: 'direction' },
+        { ...host$3, property: 'direction' },
         { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
       ],
       gap: { ...wrapper },
@@ -6346,19 +6346,19 @@ const UploadFileClass = compose(
         { ...description, property: 'color' },
       ],
       iconSize: { ...icon, property: 'width' },
-      requiredIndicator: { ...requiredIndicator$1, property: 'content' },
+      requiredIndicator: { ...requiredIndicator$2, property: 'content' },
     },
   }),
   draggableMixin,
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$b, UploadFileClass);
+customElements.define(componentName$c, UploadFileClass);
 
-const componentName$a = getComponentName('button-selection-group-internal');
+const componentName$b = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseInputClass({
-  componentName: componentName$a,
+  componentName: componentName$b,
   baseSelector: 'slot',
 }) {
   constructor() {
@@ -6495,7 +6495,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
   }
 }
 
-const componentName$9 = getComponentName('button-selection-group');
+const componentName$a = getComponentName('button-selection-group');
 
 const customMixin$1 = (superclass) =>
   class ButtonSelectionGroupMixinClass extends superclass {
@@ -6570,18 +6570,18 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$a}
+			<${componentName$b}
 				name="button-selection-group"
 				slot="input"
         tabindex="-1"
 			>
         <slot></slot>
-      </${componentName$a}>
+      </${componentName$b}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$a);
+      this.inputElement = this.shadowRoot.querySelector(componentName$b);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6600,7 +6600,7 @@ const customMixin$1 = (superclass) =>
     }
   };
 
-const { host: host$1, label, requiredIndicator, internalWrapper, errorMessage } = {
+const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$1 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -6611,15 +6611,15 @@ const { host: host$1, label, requiredIndicator, internalWrapper, errorMessage }
 const ButtonSelectionGroupClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$1, property: 'width' },
-      hostDirection: { ...host$1, property: 'direction' },
-      fontFamily: host$1,
+      hostWidth: { ...host$2, property: 'width' },
+      hostDirection: { ...host$2, property: 'direction' },
+      fontFamily: host$2,
       labelTextColor: [
-        { ...label, property: 'color' },
-        { ...requiredIndicator, property: 'color' },
+        { ...label$1, property: 'color' },
+        { ...requiredIndicator$1, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
-      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
       itemsSpacing: { ...internalWrapper, property: 'gap' },
     },
   }),
@@ -6686,18 +6686,18 @@ const ButtonSelectionGroupClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$9,
+    componentName: componentName$a,
   })
 );
 
-customElements.define(componentName$a, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$b, ButtonSelectionGroupInternalClass);
 
-customElements.define(componentName$9, ButtonSelectionGroupClass);
+customElements.define(componentName$a, ButtonSelectionGroupClass);
 
-const componentName$8 = getComponentName('button-selection-group-item');
+const componentName$9 = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$8,
+  componentName: componentName$9,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -6795,7 +6795,7 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$8, ButtonSelectionGroupItemClass);
+customElements.define(componentName$9, ButtonSelectionGroupItemClass);
 
 class GridTextColumnClass extends GridSortColumn {
   get sortable() {
@@ -6814,9 +6814,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$7 = getComponentName('grid-text-column');
+const componentName$8 = getComponentName('grid-text-column');
 
-customElements.define(componentName$7, GridTextColumnClass);
+customElements.define(componentName$8, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -6851,9 +6851,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$6 = getComponentName('grid-custom-column');
+const componentName$7 = getComponentName('grid-custom-column');
 
-customElements.define(componentName$6, GridCustomColumnClass);
+customElements.define(componentName$7, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -6911,9 +6911,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$5 = getComponentName('grid-selection-column');
+const componentName$6 = getComponentName('grid-selection-column');
 
-customElements.define(componentName$5, GridSelectionColumnClass);
+customElements.define(componentName$6, GridSelectionColumnClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -6925,7 +6925,7 @@ const isValidDataType = (data) => {
   return isValid;
 };
 
-const componentName$4 = getComponentName('grid');
+const componentName$5 = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -7085,7 +7085,7 @@ const GridMixin = (superclass) =>
   };
 
 const {
-  host,
+  host: host$1,
   headerRow,
   headerRowCell,
   contentRow,
@@ -7120,15 +7120,15 @@ const GridClass = compose(
       fontWeight: { ...contentRow },
       valueTextColor: { ...contentRow, property: 'color' },
       backgroundColor: [
-        { ...host, property: 'background-color' },
+        { ...host$1, property: 'background-color' },
         { ...contentRow, property: 'background-color' },
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      inputBorderColor: { ...host, property: 'border-color' },
-      inputBorderWidth: { ...host, property: 'border-width' },
-      inputBorderStyle: { ...host, property: 'border-style' },
-      inputBorderRadius: { ...host, property: 'border-radius' },
+      inputBorderColor: { ...host$1, property: 'border-color' },
+      inputBorderWidth: { ...host$1, property: 'border-width' },
+      inputBorderStyle: { ...host$1, property: 'border-style' },
+      inputBorderRadius: { ...host$1, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
       selectedTextColor: { ...selectedRow, property: 'color' },
       headerRowTextColor: { ...headerRowCell, property: 'color' },
@@ -7157,11 +7157,11 @@ const GridClass = compose(
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$4,
+    componentName: componentName$5,
   })
 );
 
-customElements.define(componentName$4, GridClass);
+customElements.define(componentName$5, GridClass);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -7492,33 +7492,33 @@ const globals = {
   fonts,
   direction,
 };
-const vars$v = getThemeVars(globals);
+const vars$w = getThemeVars(globals);
 
-const globalRefs$g = getThemeRefs(globals);
+const globalRefs$i = getThemeRefs(globals);
 const compVars$4 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$g.colors.primary,
-  secondary: globalRefs$g.colors.secondary,
-  success: globalRefs$g.colors.success,
-  error: globalRefs$g.colors.error,
-  surface: globalRefs$g.colors.surface,
+  primary: globalRefs$i.colors.primary,
+  secondary: globalRefs$i.colors.secondary,
+  success: globalRefs$i.colors.success,
+  error: globalRefs$i.colors.error,
+  surface: globalRefs$i.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$D);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$4.fontFamily]: globalRefs$g.fonts.font1.family,
+  [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
 
   [compVars$4.cursor]: 'pointer',
   [compVars$4.hostHeight]: '3em',
   [compVars$4.hostWidth]: 'auto',
-  [compVars$4.hostDirection]: globalRefs$g.direction,
+  [compVars$4.hostDirection]: globalRefs$i.direction,
 
-  [compVars$4.borderRadius]: globalRefs$g.radius.sm,
-  [compVars$4.borderWidth]: globalRefs$g.border.xs,
+  [compVars$4.borderRadius]: globalRefs$i.radius.sm,
+  [compVars$4.borderWidth]: globalRefs$i.border.xs,
   [compVars$4.borderStyle]: 'solid',
   [compVars$4.borderColor]: 'transparent',
 
@@ -7554,10 +7554,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$g.colors.surface.main,
-    [helperVars$3.dark]: globalRefs$g.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$g.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$g.colors.surface.contrast,
+    [helperVars$3.main]: globalRefs$i.colors.surface.main,
+    [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$i.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$i.colors.surface.contrast,
   },
 
   variant: {
@@ -7599,11 +7599,11 @@ const button = {
   },
 
   _focused: {
-    [compVars$4.outlineColor]: globalRefs$g.colors.surface.main,
+    [compVars$4.outlineColor]: globalRefs$i.colors.surface.main,
   },
 };
 
-const vars$u = {
+const vars$v = {
   ...compVars$4,
   ...helperVars$3,
 };
@@ -7611,25 +7611,25 @@ const vars$u = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$u
+  vars: vars$v
 });
 
-const componentName$3 = getComponentName('input-wrapper');
-const globalRefs$f = getThemeRefs(globals);
+const componentName$4 = getComponentName('input-wrapper');
+const globalRefs$h = getThemeRefs(globals);
 
-const [theme$1, refs, vars$t] = createHelperVars(
+const [theme$1, refs, vars$u] = createHelperVars(
   {
-    labelTextColor: globalRefs$f.colors.surface.contrast,
-    valueTextColor: globalRefs$f.colors.surface.contrast,
-    placeholderTextColor: globalRefs$f.colors.surface.main,
+    labelTextColor: globalRefs$h.colors.surface.contrast,
+    valueTextColor: globalRefs$h.colors.surface.contrast,
+    placeholderTextColor: globalRefs$h.colors.surface.main,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$f.colors.error.main,
+    errorMessageTextColor: globalRefs$h.colors.error.main,
 
-    borderWidth: globalRefs$f.border.xs,
-    borderRadius: globalRefs$f.radius.xs,
+    borderWidth: globalRefs$h.border.xs,
+    borderRadius: globalRefs$h.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$f.border.sm,
+    outlineWidth: globalRefs$h.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -7640,17 +7640,17 @@ const [theme$1, refs, vars$t] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$f.colors.surface.light,
+    backgroundColor: globalRefs$h.colors.surface.light,
 
-    fontFamily: globalRefs$f.fonts.font1.family,
+    fontFamily: globalRefs$h.fonts.font1.family,
 
-    direction: globalRefs$f.direction,
+    direction: globalRefs$h.direction,
 
     size: {
-      xs: { fontSize: '12px' },
-      sm: { fontSize: '14px' },
-      md: { fontSize: '16px' },
-      lg: { fontSize: '18px' },
+      xs: { fontSize: '12px', chipFontSize: '10px' },
+      sm: { fontSize: '14px', chipFontSize: '12px' },
+      md: { fontSize: '16px', chipFontSize: '14px' },
+      lg: { fontSize: '18px', chipFontSize: '16px' },
     },
 
     _fullWidth: {
@@ -7658,88 +7658,118 @@ const [theme$1, refs, vars$t] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$f.colors.surface.main,
+      outlineColor: globalRefs$h.colors.surface.main,
       _invalid: {
-        outlineColor: globalRefs$f.colors.error.main,
+        outlineColor: globalRefs$h.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$f.border.xs,
-      borderColor: globalRefs$f.colors.surface.main,
+      outlineWidth: globalRefs$h.border.xs,
+      borderColor: globalRefs$h.colors.surface.main,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$f.colors.error.main,
+        borderColor: globalRefs$h.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$f.colors.surface.main,
-      borderColor: globalRefs$f.colors.surface.main,
-      valueTextColor: globalRefs$f.colors.surface.dark,
-      placeholderTextColor: globalRefs$f.colors.surface.dark,
-      backgroundColor: globalRefs$f.colors.surface.main,
+      labelTextColor: globalRefs$h.colors.surface.main,
+      borderColor: globalRefs$h.colors.surface.main,
+      valueTextColor: globalRefs$h.colors.surface.dark,
+      placeholderTextColor: globalRefs$h.colors.surface.dark,
+      backgroundColor: globalRefs$h.colors.surface.main,
     },
   },
-  componentName$3
+  componentName$4
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$t
+  vars: vars$u
 });
 
-const vars$s = TextFieldClass.cssVarList;
+const vars$t = TextFieldClass.cssVarList;
 
 const textField = {
-  [vars$s.hostWidth]: refs.width,
-  [vars$s.hostMinWidth]: refs.minWidth,
-  [vars$s.hostDirection]: refs.direction,
-  [vars$s.fontSize]: refs.fontSize,
-  [vars$s.fontFamily]: refs.fontFamily,
-  [vars$s.labelTextColor]: refs.labelTextColor,
-  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$s.inputValueTextColor]: refs.valueTextColor,
-  [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$s.inputBorderWidth]: refs.borderWidth,
-  [vars$s.inputBorderStyle]: refs.borderStyle,
-  [vars$s.inputBorderColor]: refs.borderColor,
+  [vars$t.hostWidth]: refs.width,
+  [vars$t.hostMinWidth]: refs.minWidth,
+  [vars$t.hostDirection]: refs.direction,
+  [vars$t.fontSize]: refs.fontSize,
+  [vars$t.fontFamily]: refs.fontFamily,
+  [vars$t.labelTextColor]: refs.labelTextColor,
+  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$t.inputValueTextColor]: refs.valueTextColor,
+  [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$t.inputBorderWidth]: refs.borderWidth,
+  [vars$t.inputBorderStyle]: refs.borderStyle,
+  [vars$t.inputBorderColor]: refs.borderColor,
+  [vars$t.inputBorderRadius]: refs.borderRadius,
+  [vars$t.inputOutlineWidth]: refs.outlineWidth,
+  [vars$t.inputOutlineStyle]: refs.outlineStyle,
+  [vars$t.inputOutlineColor]: refs.outlineColor,
+  [vars$t.inputOutlineOffset]: refs.outlineOffset,
+  [vars$t.inputBackgroundColor]: refs.backgroundColor,
+  [vars$t.inputHeight]: refs.inputHeight,
+  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$t
+});
+
+const globalRefs$g = getThemeRefs(globals);
+const vars$s = PasswordClass.cssVarList;
+
+const password = {
+  [vars$s.hostWidth]: refs.width,
+  [vars$s.hostDirection]: refs.direction,
+  [vars$s.fontSize]: refs.fontSize,
+  [vars$s.fontFamily]: refs.fontFamily,
+  [vars$s.labelTextColor]: refs.labelTextColor,
+  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$s.inputHeight]: refs.inputHeight,
+  [vars$s.inputBackgroundColor]: refs.backgroundColor,
+  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$s.inputValueTextColor]: refs.valueTextColor,
+  [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$s.inputBorderWidth]: refs.borderWidth,
+  [vars$s.inputBorderStyle]: refs.borderStyle,
+  [vars$s.inputBorderColor]: refs.borderColor,
   [vars$s.inputBorderRadius]: refs.borderRadius,
   [vars$s.inputOutlineWidth]: refs.outlineWidth,
   [vars$s.inputOutlineStyle]: refs.outlineStyle,
   [vars$s.inputOutlineColor]: refs.outlineColor,
   [vars$s.inputOutlineOffset]: refs.outlineOffset,
-  [vars$s.inputBackgroundColor]: refs.backgroundColor,
-  [vars$s.inputHeight]: refs.inputHeight,
-  [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$s.revealButtonOffset]: globalRefs$g.spacing.md,
+  [vars$s.revealButtonSize]: refs.toggleButtonSize,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$s
 });
 
-const globalRefs$e = getThemeRefs(globals);
-const vars$r = PasswordClass.cssVarList;
+const vars$r = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$r.hostWidth]: refs.width,
+  [vars$r.hostMinWidth]: refs.minWidth,
   [vars$r.hostDirection]: refs.direction,
   [vars$r.fontSize]: refs.fontSize,
   [vars$r.fontFamily]: refs.fontFamily,
   [vars$r.labelTextColor]: refs.labelTextColor,
   [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$r.inputHeight]: refs.inputHeight,
-  [vars$r.inputBackgroundColor]: refs.backgroundColor,
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$r.inputValueTextColor]: refs.valueTextColor,
-  [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$r.inputBorderWidth]: refs.borderWidth,
   [vars$r.inputBorderStyle]: refs.borderStyle,
   [vars$r.inputBorderColor]: refs.borderColor,
@@ -7748,19 +7778,21 @@ const password = {
   [vars$r.inputOutlineStyle]: refs.outlineStyle,
   [vars$r.inputOutlineColor]: refs.outlineColor,
   [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.revealButtonOffset]: globalRefs$e.spacing.md,
-  [vars$r.revealButtonSize]: refs.toggleButtonSize,
+  [vars$r.inputBackgroundColor]: refs.backgroundColor,
+  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$r.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$r
 });
 
-const vars$q = NumberFieldClass.cssVarList;
+const vars$q = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$q.hostWidth]: refs.width,
   [vars$q.hostMinWidth]: refs.minWidth,
   [vars$q.hostDirection]: refs.direction,
@@ -7769,6 +7801,7 @@ const numberField = {
   [vars$q.labelTextColor]: refs.labelTextColor,
   [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$q.inputValueTextColor]: refs.valueTextColor,
+  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$q.inputBorderWidth]: refs.borderWidth,
   [vars$q.inputBorderStyle]: refs.borderStyle,
@@ -7779,201 +7812,168 @@ const numberField = {
   [vars$q.inputOutlineColor]: refs.outlineColor,
   [vars$q.inputOutlineOffset]: refs.outlineOffset,
   [vars$q.inputBackgroundColor]: refs.backgroundColor,
-  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$q.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$q
 });
 
-const vars$p = EmailFieldClass.cssVarList;
+const globalRefs$f = getThemeRefs(globals);
+const vars$p = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [vars$p.hostWidth]: refs.width,
   [vars$p.hostMinWidth]: refs.minWidth,
   [vars$p.hostDirection]: refs.direction,
   [vars$p.fontSize]: refs.fontSize,
   [vars$p.fontFamily]: refs.fontFamily,
   [vars$p.labelTextColor]: refs.labelTextColor,
+  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$p.inputBackgroundColor]: refs.backgroundColor,
   [vars$p.inputValueTextColor]: refs.valueTextColor,
-  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$p.inputBorderRadius]: refs.borderRadius,
   [vars$p.inputBorderWidth]: refs.borderWidth,
   [vars$p.inputBorderStyle]: refs.borderStyle,
   [vars$p.inputBorderColor]: refs.borderColor,
-  [vars$p.inputBorderRadius]: refs.borderRadius,
   [vars$p.inputOutlineWidth]: refs.outlineWidth,
   [vars$p.inputOutlineStyle]: refs.outlineStyle,
   [vars$p.inputOutlineColor]: refs.outlineColor,
   [vars$p.inputOutlineOffset]: refs.outlineOffset,
-  [vars$p.inputBackgroundColor]: refs.backgroundColor,
-  [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$p.inputHeight]: refs.inputHeight,
+  [vars$p.inputResizeType]: 'vertical',
+  [vars$p.inputMinHeight]: '5em',
+
+  _disabled: {
+    [vars$p.inputBackgroundColor]: globalRefs$f.colors.surface.light,
+  },
+
+  _readonly: {
+    [vars$p.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$p
 });
 
-const globalRefs$d = getThemeRefs(globals);
-const vars$o = TextAreaClass.cssVarList;
+const vars$o = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [vars$o.hostWidth]: refs.width,
-  [vars$o.hostMinWidth]: refs.minWidth,
   [vars$o.hostDirection]: refs.direction,
   [vars$o.fontSize]: refs.fontSize,
   [vars$o.fontFamily]: refs.fontFamily,
   [vars$o.labelTextColor]: refs.labelTextColor,
   [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$o.labelFontWeight]: '400',
+  [vars$o.labelLineHeight]: checkboxSize,
+  [vars$o.labelSpacing]: '1em',
   [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$o.inputBackgroundColor]: refs.backgroundColor,
-  [vars$o.inputValueTextColor]: refs.valueTextColor,
-  [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$o.inputOutlineWidth]: refs.outlineWidth,
+  [vars$o.inputOutlineOffset]: refs.outlineOffset,
+  [vars$o.inputOutlineColor]: refs.outlineColor,
+  [vars$o.inputOutlineStyle]: refs.outlineStyle,
   [vars$o.inputBorderRadius]: refs.borderRadius,
+  [vars$o.inputBorderColor]: refs.borderColor,
   [vars$o.inputBorderWidth]: refs.borderWidth,
   [vars$o.inputBorderStyle]: refs.borderStyle,
-  [vars$o.inputBorderColor]: refs.borderColor,
-  [vars$o.inputOutlineWidth]: refs.outlineWidth,
-  [vars$o.inputOutlineStyle]: refs.outlineStyle,
-  [vars$o.inputOutlineColor]: refs.outlineColor,
-  [vars$o.inputOutlineOffset]: refs.outlineOffset,
-  [vars$o.inputResizeType]: 'vertical',
-  [vars$o.inputMinHeight]: '5em',
+  [vars$o.inputBackgroundColor]: refs.backgroundColor,
+  [vars$o.inputSize]: checkboxSize,
 
-  _disabled: {
-    [vars$o.inputBackgroundColor]: globalRefs$d.colors.surface.light,
+  _checked: {
+    [vars$o.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$o.inputResizeType]: 'none',
+  _disabled: {
+    [vars$o.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$o
 });
 
-const vars$n = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$e = getThemeRefs(globals);
+const vars$n = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [vars$n.hostWidth]: refs.width,
   [vars$n.hostDirection]: refs.direction,
   [vars$n.fontSize]: refs.fontSize,
   [vars$n.fontFamily]: refs.fontFamily,
-  [vars$n.labelTextColor]: refs.labelTextColor,
-  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$n.labelFontWeight]: '400',
-  [vars$n.labelLineHeight]: checkboxSize,
-  [vars$n.labelSpacing]: '1em',
-  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$n.inputOutlineWidth]: refs.outlineWidth,
   [vars$n.inputOutlineOffset]: refs.outlineOffset,
   [vars$n.inputOutlineColor]: refs.outlineColor,
   [vars$n.inputOutlineStyle]: refs.outlineStyle,
-  [vars$n.inputBorderRadius]: refs.borderRadius,
-  [vars$n.inputBorderColor]: refs.borderColor,
-  [vars$n.inputBorderWidth]: refs.borderWidth,
-  [vars$n.inputBorderStyle]: refs.borderStyle,
-  [vars$n.inputBackgroundColor]: refs.backgroundColor,
-  [vars$n.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars$n.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$n.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$n
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
 
-const globalRefs$c = getThemeRefs(globals);
-const vars$m = SwitchToggleClass.cssVarList;
+  [vars$n.trackBorderStyle]: refs.borderStyle,
+  [vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$n.trackBorderColor]: refs.borderColor,
+  [vars$n.trackBackgroundColor]: 'none',
+  [vars$n.trackBorderRadius]: globalRefs$e.radius.md,
+  [vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$n.trackHeight]: checkboxHeight,
+
+  [vars$n.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$n.knobRadius]: '50%',
+  [vars$n.knobTopOffset]: '1px',
+  [vars$n.knobLeftOffset]: knobMargin,
+  [vars$n.knobColor]: refs.valueTextColor,
+  [vars$n.knobTransitionDuration]: '0.3s',
 
-const switchToggle = {
-  [vars$m.hostWidth]: refs.width,
-  [vars$m.hostDirection]: refs.direction,
-  [vars$m.fontSize]: refs.fontSize,
-  [vars$m.fontFamily]: refs.fontFamily,
-
-  [vars$m.inputOutlineWidth]: refs.outlineWidth,
-  [vars$m.inputOutlineOffset]: refs.outlineOffset,
-  [vars$m.inputOutlineColor]: refs.outlineColor,
-  [vars$m.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$m.trackBorderStyle]: refs.borderStyle,
-  [vars$m.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$m.trackBorderColor]: refs.borderColor,
-  [vars$m.trackBackgroundColor]: 'none',
-  [vars$m.trackBorderRadius]: globalRefs$c.radius.md,
-  [vars$m.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$m.trackHeight]: checkboxHeight,
-
-  [vars$m.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$m.knobRadius]: '50%',
-  [vars$m.knobTopOffset]: '1px',
-  [vars$m.knobLeftOffset]: knobMargin,
-  [vars$m.knobColor]: refs.valueTextColor,
-  [vars$m.knobTransitionDuration]: '0.3s',
-
-  [vars$m.labelTextColor]: refs.labelTextColor,
-  [vars$m.labelFontWeight]: '400',
-  [vars$m.labelLineHeight]: '1.35em',
-  [vars$m.labelSpacing]: '1em',
-  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$n.labelTextColor]: refs.labelTextColor,
+  [vars$n.labelFontWeight]: '400',
+  [vars$n.labelLineHeight]: '1.35em',
+  [vars$n.labelSpacing]: '1em',
+  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$m.trackBorderColor]: refs.borderColor,
-    [vars$m.trackBackgroundColor]: refs.backgroundColor,
-    [vars$m.knobLeftOffset]: `calc(100% - var(${vars$m.knobSize}) - ${knobMargin})`,
-    [vars$m.knobColor]: refs.valueTextColor,
-    [vars$m.knobTextColor]: refs.valueTextColor,
+    [vars$n.trackBorderColor]: refs.borderColor,
+    [vars$n.trackBackgroundColor]: refs.backgroundColor,
+    [vars$n.knobLeftOffset]: `calc(100% - var(${vars$n.knobSize}) - ${knobMargin})`,
+    [vars$n.knobColor]: refs.valueTextColor,
+    [vars$n.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$m.knobColor]: globalRefs$c.colors.surface.light,
-    [vars$m.trackBorderColor]: globalRefs$c.colors.surface.main,
-    [vars$m.trackBackgroundColor]: globalRefs$c.colors.surface.main,
-    [vars$m.labelTextColor]: refs.labelTextColor,
+    [vars$n.knobColor]: globalRefs$e.colors.surface.light,
+    [vars$n.trackBorderColor]: globalRefs$e.colors.surface.main,
+    [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+    [vars$n.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$m.knobColor]: globalRefs$c.colors.surface.light,
-      [vars$m.trackBackgroundColor]: globalRefs$c.colors.surface.main,
+      [vars$n.knobColor]: globalRefs$e.colors.surface.light,
+      [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$m.trackBorderColor]: globalRefs$c.colors.error.main,
-    [vars$m.knobColor]: globalRefs$c.colors.error.main,
+    [vars$n.trackBorderColor]: globalRefs$e.colors.error.main,
+    [vars$n.knobColor]: globalRefs$e.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$m
+  vars: vars$n
 });
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 
 const compVars$3 = ContainerClass.cssVarList;
 
@@ -7995,7 +7995,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$x
+  componentName$y
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -8005,8 +8005,8 @@ const container = {
 
   [compVars$3.hostWidth]: '100%',
   [compVars$3.boxShadow]: 'none',
-  [compVars$3.backgroundColor]: globalRefs$b.colors.surface.light,
-  [compVars$3.color]: globalRefs$b.colors.surface.contrast,
+  [compVars$3.backgroundColor]: globalRefs$d.colors.surface.light,
+  [compVars$3.color]: globalRefs$d.colors.surface.contrast,
   [compVars$3.borderRadius]: '0px',
 
   verticalPadding: {
@@ -8053,34 +8053,34 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.md} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.md} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide['2xl']} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$3.borderRadius]: globalRefs$b.radius.sm },
-    md: { [compVars$3.borderRadius]: globalRefs$b.radius.md },
-    lg: { [compVars$3.borderRadius]: globalRefs$b.radius.lg },
-    xl: { [compVars$3.borderRadius]: globalRefs$b.radius.xl },
-    '2xl': { [compVars$3.borderRadius]: globalRefs$b.radius['2xl'] },
-    '3xl': { [compVars$3.borderRadius]: globalRefs$b.radius['3xl'] },
+    sm: { [compVars$3.borderRadius]: globalRefs$d.radius.sm },
+    md: { [compVars$3.borderRadius]: globalRefs$d.radius.md },
+    lg: { [compVars$3.borderRadius]: globalRefs$d.radius.lg },
+    xl: { [compVars$3.borderRadius]: globalRefs$d.radius.xl },
+    '2xl': { [compVars$3.borderRadius]: globalRefs$d.radius['2xl'] },
+    '3xl': { [compVars$3.borderRadius]: globalRefs$d.radius['3xl'] },
   },
 };
 
-const vars$l = {
+const vars$m = {
   ...compVars$3,
   ...helperVars$2,
 };
@@ -8088,154 +8088,154 @@ const vars$l = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$l
+  vars: vars$m
 });
 
-const vars$k = LogoClass.cssVarList;
+const vars$l = LogoClass.cssVarList;
 
 const logo$1 = {
-  [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$k
+  vars: vars$l
 });
 
-const vars$j = TotpImageClass.cssVarList;
+const vars$k = TotpImageClass.cssVarList;
 
 const logo = {
-  [vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$j
+  vars: vars$k
 });
 
-const globalRefs$a = getThemeRefs(globals);
-const vars$i = TextClass.cssVarList;
+const globalRefs$c = getThemeRefs(globals);
+const vars$j = TextClass.cssVarList;
 
 const text = {
-  [vars$i.hostDirection]: globalRefs$a.direction,
-  [vars$i.textLineHeight]: '1.35em',
-  [vars$i.textAlign]: 'left',
-  [vars$i.textColor]: globalRefs$a.colors.surface.dark,
+  [vars$j.hostDirection]: globalRefs$c.direction,
+  [vars$j.textLineHeight]: '1.35em',
+  [vars$j.textAlign]: 'left',
+  [vars$j.textColor]: globalRefs$c.colors.surface.dark,
   variant: {
     h1: {
-      [vars$i.fontSize]: globalRefs$a.typography.h1.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.h1.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.h1.font,
+      [vars$j.fontSize]: globalRefs$c.typography.h1.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.h1.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.h1.font,
     },
     h2: {
-      [vars$i.fontSize]: globalRefs$a.typography.h2.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.h2.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.h2.font,
+      [vars$j.fontSize]: globalRefs$c.typography.h2.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.h2.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.h2.font,
     },
     h3: {
-      [vars$i.fontSize]: globalRefs$a.typography.h3.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.h3.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.h3.font,
+      [vars$j.fontSize]: globalRefs$c.typography.h3.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.h3.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.h3.font,
     },
     subtitle1: {
-      [vars$i.fontSize]: globalRefs$a.typography.subtitle1.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.subtitle1.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.subtitle1.font,
+      [vars$j.fontSize]: globalRefs$c.typography.subtitle1.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.subtitle1.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$i.fontSize]: globalRefs$a.typography.subtitle2.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.subtitle2.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.subtitle2.font,
+      [vars$j.fontSize]: globalRefs$c.typography.subtitle2.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.subtitle2.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.subtitle2.font,
     },
     body1: {
-      [vars$i.fontSize]: globalRefs$a.typography.body1.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.body1.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.body1.font,
+      [vars$j.fontSize]: globalRefs$c.typography.body1.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.body1.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.body1.font,
     },
     body2: {
-      [vars$i.fontSize]: globalRefs$a.typography.body2.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.body2.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.body2.font,
+      [vars$j.fontSize]: globalRefs$c.typography.body2.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.body2.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$i.textColor]: globalRefs$a.colors.primary.main,
+      [vars$j.textColor]: globalRefs$c.colors.primary.main,
     },
     secondary: {
-      [vars$i.textColor]: globalRefs$a.colors.secondary.main,
+      [vars$j.textColor]: globalRefs$c.colors.secondary.main,
     },
     error: {
-      [vars$i.textColor]: globalRefs$a.colors.error.main,
+      [vars$j.textColor]: globalRefs$c.colors.error.main,
     },
     success: {
-      [vars$i.textColor]: globalRefs$a.colors.success.main,
+      [vars$j.textColor]: globalRefs$c.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$i.textAlign]: 'right' },
-    left: { [vars$i.textAlign]: 'left' },
-    center: { [vars$i.textAlign]: 'center' },
+    right: { [vars$j.textAlign]: 'right' },
+    left: { [vars$j.textAlign]: 'left' },
+    center: { [vars$j.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$i.hostWidth]: '100%',
+    [vars$j.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$i.fontStyle]: 'italic',
+    [vars$j.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$i.textTransform]: 'uppercase',
+    [vars$j.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$i.textTransform]: 'lowercase',
+    [vars$j.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$i
+  vars: vars$j
 });
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$h = LinkClass.cssVarList;
+const globalRefs$b = getThemeRefs(globals);
+const vars$i = LinkClass.cssVarList;
 
 const link = {
-  [vars$h.hostDirection]: globalRefs$9.direction,
-  [vars$h.cursor]: 'pointer',
+  [vars$i.hostDirection]: globalRefs$b.direction,
+  [vars$i.cursor]: 'pointer',
 
-  [vars$h.textColor]: globalRefs$9.colors.primary.main,
+  [vars$i.textColor]: globalRefs$b.colors.primary.main,
 
   textAlign: {
-    right: { [vars$h.textAlign]: 'right' },
-    left: { [vars$h.textAlign]: 'left' },
-    center: { [vars$h.textAlign]: 'center' },
+    right: { [vars$i.textAlign]: 'right' },
+    left: { [vars$i.textAlign]: 'left' },
+    center: { [vars$i.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$h.hostWidth]: '100%',
+    [vars$i.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$h.textColor]: globalRefs$9.colors.primary.main,
+      [vars$i.textColor]: globalRefs$b.colors.primary.main,
     },
     secondary: {
-      [vars$h.textColor]: globalRefs$9.colors.secondary.main,
+      [vars$i.textColor]: globalRefs$b.colors.secondary.main,
     },
     error: {
-      [vars$h.textColor]: globalRefs$9.colors.error.main,
+      [vars$i.textColor]: globalRefs$b.colors.error.main,
     },
     success: {
-      [vars$h.textColor]: globalRefs$9.colors.success.main,
+      [vars$i.textColor]: globalRefs$b.colors.success.main,
     },
   },
 };
@@ -8243,10 +8243,10 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$h
+  vars: vars$i
 });
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 const compVars$2 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -8254,18 +8254,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$v
+  componentName$w
 );
 
 const divider = {
   ...helperTheme$1,
 
-  [compVars$2.hostDirection]: globalRefs$8.direction,
+  [compVars$2.hostDirection]: globalRefs$a.direction,
   [compVars$2.alignItems]: 'center',
   [compVars$2.flexDirection]: 'row',
   [compVars$2.alignSelf]: 'stretch',
   [compVars$2.hostWidth]: '100%',
-  [compVars$2.stripeColor]: globalRefs$8.colors.surface.main,
+  [compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
   [compVars$2.stripeColorOpacity]: '0.5',
   [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$2.labelTextWidth]: 'fit-content',
@@ -8285,7 +8285,7 @@ const divider = {
   },
 };
 
-const vars$g = {
+const vars$h = {
   ...compVars$2,
   ...helperVars$1,
 };
@@ -8293,100 +8293,100 @@ const vars$g = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$g
+  vars: vars$h
 });
 
-const vars$f = PasscodeClass.cssVarList;
+const vars$g = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$f.hostDirection]: refs.direction,
-  [vars$f.fontFamily]: refs.fontFamily,
-  [vars$f.fontSize]: refs.fontSize,
-  [vars$f.labelTextColor]: refs.labelTextColor,
-  [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$f.digitValueTextColor]: refs.valueTextColor,
-  [vars$f.digitPadding]: '0',
-  [vars$f.digitTextAlign]: 'center',
-  [vars$f.digitSpacing]: '4px',
-  [vars$f.hostWidth]: refs.width,
-  [vars$f.digitOutlineColor]: 'transparent',
-  [vars$f.digitOutlineWidth]: refs.outlineWidth,
-  [vars$f.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$f.digitSize]: refs.inputHeight,
+  [vars$g.hostDirection]: refs.direction,
+  [vars$g.fontFamily]: refs.fontFamily,
+  [vars$g.fontSize]: refs.fontSize,
+  [vars$g.labelTextColor]: refs.labelTextColor,
+  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$g.digitValueTextColor]: refs.valueTextColor,
+  [vars$g.digitPadding]: '0',
+  [vars$g.digitTextAlign]: 'center',
+  [vars$g.digitSpacing]: '4px',
+  [vars$g.hostWidth]: refs.width,
+  [vars$g.digitOutlineColor]: 'transparent',
+  [vars$g.digitOutlineWidth]: refs.outlineWidth,
+  [vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$g.digitSize]: refs.inputHeight,
 
   _hideCursor: {
-    [vars$f.digitCaretTextColor]: 'transparent',
+    [vars$g.digitCaretTextColor]: 'transparent',
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$f
+  vars: vars$g
 });
 
-const globalRefs$7 = getThemeRefs(globals);
-const vars$e = LoaderLinearClass.cssVarList;
+const globalRefs$9 = getThemeRefs(globals);
+const vars$f = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$e.hostDisplay]: 'inline-block',
-  [vars$e.hostWidth]: '100%',
+  [vars$f.hostDisplay]: 'inline-block',
+  [vars$f.hostWidth]: '100%',
 
-  [vars$e.barColor]: globalRefs$7.colors.surface.contrast,
-  [vars$e.barWidth]: '20%',
+  [vars$f.barColor]: globalRefs$9.colors.surface.contrast,
+  [vars$f.barWidth]: '20%',
 
-  [vars$e.barBackgroundColor]: globalRefs$7.colors.surface.main,
-  [vars$e.barBorderRadius]: '4px',
+  [vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
+  [vars$f.barBorderRadius]: '4px',
 
-  [vars$e.animationDuration]: '2s',
-  [vars$e.animationTimingFunction]: 'linear',
-  [vars$e.animationIterationCount]: 'infinite',
-  [vars$e.verticalPadding]: '0.25em',
+  [vars$f.animationDuration]: '2s',
+  [vars$f.animationTimingFunction]: 'linear',
+  [vars$f.animationIterationCount]: 'infinite',
+  [vars$f.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$e.barHeight]: '2px' },
-    sm: { [vars$e.barHeight]: '4px' },
-    md: { [vars$e.barHeight]: '6px' },
-    lg: { [vars$e.barHeight]: '8px' },
+    xs: { [vars$f.barHeight]: '2px' },
+    sm: { [vars$f.barHeight]: '4px' },
+    md: { [vars$f.barHeight]: '6px' },
+    lg: { [vars$f.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$e.barColor]: globalRefs$7.colors.primary.main,
+      [vars$f.barColor]: globalRefs$9.colors.primary.main,
     },
     secondary: {
-      [vars$e.barColor]: globalRefs$7.colors.secondary.main,
+      [vars$f.barColor]: globalRefs$9.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$e.hostDisplay]: 'none',
+    [vars$f.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$e
+  vars: vars$f
 });
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 const compVars$1 = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
-    spinnerColor: globalRefs$6.colors.surface.contrast,
+    spinnerColor: globalRefs$8.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$6.colors.primary.main,
+        spinnerColor: globalRefs$8.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$6.colors.secondary.main,
+        spinnerColor: globalRefs$8.colors.secondary.main,
       },
     },
   },
-  componentName$y
+  componentName$z
 );
 
 const loaderRadial = {
@@ -8415,7 +8415,7 @@ const loaderRadial = {
     [compVars$1.hostDisplay]: 'none',
   },
 };
-const vars$d = {
+const vars$e = {
   ...compVars$1,
   ...helperVars,
 };
@@ -8423,76 +8423,112 @@ const vars$d = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$d
+  vars: vars$e
 });
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$c = ComboBoxClass.cssVarList;
+const globalRefs$7 = getThemeRefs(globals);
+const vars$d = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$c.hostWidth]: refs.width,
-  [vars$c.hostDirection]: refs.direction,
-  [vars$c.fontSize]: refs.fontSize,
-  [vars$c.fontFamily]: refs.fontFamily,
-  [vars$c.labelTextColor]: refs.labelTextColor,
-  [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$c.inputBorderColor]: refs.borderColor,
-  [vars$c.inputBorderWidth]: refs.borderWidth,
-  [vars$c.inputBorderStyle]: refs.borderStyle,
-  [vars$c.inputBorderRadius]: refs.borderRadius,
-  [vars$c.inputOutlineColor]: refs.outlineColor,
-  [vars$c.inputOutlineOffset]: refs.outlineOffset,
-  [vars$c.inputOutlineWidth]: refs.outlineWidth,
-  [vars$c.inputOutlineStyle]: refs.outlineStyle,
-  [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$c.inputValueTextColor]: refs.valueTextColor,
-  [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$c.inputBackgroundColor]: refs.backgroundColor,
-  [vars$c.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$c.inputHeight]: refs.inputHeight,
-  [vars$c.inputDropdownButtonColor]: globalRefs$5.colors.surface.contrast,
-  [vars$c.inputDropdownButtonCursor]: 'pointer',
-  [vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$c.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
-  [vars$c.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
-  [vars$c.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
+  [vars$d.hostWidth]: refs.width,
+  [vars$d.hostDirection]: refs.direction,
+  [vars$d.fontSize]: refs.fontSize,
+  [vars$d.fontFamily]: refs.fontFamily,
+  [vars$d.labelTextColor]: refs.labelTextColor,
+  [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$d.inputBorderColor]: refs.borderColor,
+  [vars$d.inputBorderWidth]: refs.borderWidth,
+  [vars$d.inputBorderStyle]: refs.borderStyle,
+  [vars$d.inputBorderRadius]: refs.borderRadius,
+  [vars$d.inputOutlineColor]: refs.outlineColor,
+  [vars$d.inputOutlineOffset]: refs.outlineOffset,
+  [vars$d.inputOutlineWidth]: refs.outlineWidth,
+  [vars$d.inputOutlineStyle]: refs.outlineStyle,
+  [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$d.inputValueTextColor]: refs.valueTextColor,
+  [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$d.inputBackgroundColor]: refs.backgroundColor,
+  [vars$d.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$d.inputHeight]: refs.inputHeight,
+  [vars$d.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
+  [vars$d.inputDropdownButtonCursor]: 'pointer',
+  [vars$d.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$d.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
+  [vars$d.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
+  [vars$d.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
 
   _readonly: {
-    [vars$c.inputDropdownButtonCursor]: 'default',
+    [vars$d.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$c.overlayFontSize]: refs.fontSize,
-  [vars$c.overlayFontFamily]: refs.fontFamily,
-  [vars$c.overlayCursor]: 'pointer',
-  [vars$c.overlayItemBoxShadow]: 'none',
+  [vars$d.overlayFontSize]: refs.fontSize,
+  [vars$d.overlayFontFamily]: refs.fontFamily,
+  [vars$d.overlayCursor]: 'pointer',
+  [vars$d.overlayItemBoxShadow]: 'none',
 
   // Overlay direct theme:
-  [vars$c.overlay.minHeight]: '400px',
-  [vars$c.overlay.margin]: '0',
+  [vars$d.overlay.minHeight]: '400px',
+  [vars$d.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$c
+  vars: vars$d
 });
 
-const vars$b = ImageClass.cssVarList;
+const vars$c = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$b
+  vars: vars$c
 });
 
-const vars$a = PhoneFieldClass.cssVarList;
+const vars$b = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$a.hostWidth]: refs.width,
+  [vars$b.hostWidth]: refs.width,
+  [vars$b.hostDirection]: refs.direction,
+  [vars$b.fontSize]: refs.fontSize,
+  [vars$b.fontFamily]: refs.fontFamily,
+  [vars$b.labelTextColor]: refs.labelTextColor,
+  [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$b.inputValueTextColor]: refs.valueTextColor,
+  [vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$b.inputBorderStyle]: refs.borderStyle,
+  [vars$b.inputBorderWidth]: refs.borderWidth,
+  [vars$b.inputBorderColor]: refs.borderColor,
+  [vars$b.inputBorderRadius]: refs.borderRadius,
+  [vars$b.inputOutlineStyle]: refs.outlineStyle,
+  [vars$b.inputOutlineWidth]: refs.outlineWidth,
+  [vars$b.inputOutlineColor]: refs.outlineColor,
+  [vars$b.inputOutlineOffset]: refs.outlineOffset,
+  [vars$b.phoneInputWidth]: refs.minWidth,
+  [vars$b.countryCodeInputWidth]: '5em',
+  [vars$b.countryCodeDropdownWidth]: '20em',
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$b
+});
+
+const vars$a = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$a.hostWidth]: '16em',
+  [vars$a.hostMinWidth]: refs.minWidth,
   [vars$a.hostDirection]: refs.direction,
   [vars$a.fontSize]: refs.fontSize,
   [vars$a.fontFamily]: refs.fontFamily,
@@ -8509,194 +8545,158 @@ const phoneField = {
   [vars$a.inputOutlineWidth]: refs.outlineWidth,
   [vars$a.inputOutlineColor]: refs.outlineColor,
   [vars$a.inputOutlineOffset]: refs.outlineOffset,
-  [vars$a.phoneInputWidth]: refs.minWidth,
-  [vars$a.countryCodeInputWidth]: '5em',
-  [vars$a.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$a.hostWidth]: refs.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$a
 });
 
-const vars$9 = PhoneFieldInputBoxClass.cssVarList;
+const vars$9 = NewPasswordClass.cssVarList;
 
-const phoneInputBoxField = {
-  [vars$9.hostWidth]: '16em',
+const newPassword = {
+  [vars$9.hostWidth]: refs.width,
   [vars$9.hostMinWidth]: refs.minWidth,
   [vars$9.hostDirection]: refs.direction,
   [vars$9.fontSize]: refs.fontSize,
   [vars$9.fontFamily]: refs.fontFamily,
-  [vars$9.labelTextColor]: refs.labelTextColor,
-  [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$9.spaceBetweenInputs]: '1em',
   [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$9.inputValueTextColor]: refs.valueTextColor,
-  [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$9.inputBorderStyle]: refs.borderStyle,
-  [vars$9.inputBorderWidth]: refs.borderWidth,
-  [vars$9.inputBorderColor]: refs.borderColor,
-  [vars$9.inputBorderRadius]: refs.borderRadius,
-  [vars$9.inputOutlineStyle]: refs.outlineStyle,
-  [vars$9.inputOutlineWidth]: refs.outlineWidth,
-  [vars$9.inputOutlineColor]: refs.outlineColor,
-  [vars$9.inputOutlineOffset]: refs.outlineOffset,
-  _fullWidth: {
-    [vars$9.hostWidth]: refs.width,
-  },
-};
-
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$9
-});
-
-const vars$8 = NewPasswordClass.cssVarList;
-
-const newPassword = {
-  [vars$8.hostWidth]: refs.width,
-  [vars$8.hostMinWidth]: refs.minWidth,
-  [vars$8.hostDirection]: refs.direction,
-  [vars$8.fontSize]: refs.fontSize,
-  [vars$8.fontFamily]: refs.fontFamily,
-  [vars$8.spaceBetweenInputs]: '1em',
-  [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
     // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$8.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$9.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
   },
 };
 
 var newPassword$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: newPassword,
-  vars: vars$8
+  vars: vars$9
 });
 
-const vars$7 = UploadFileClass.cssVarList;
+const vars$8 = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$7.hostDirection]: refs.direction,
-  [vars$7.labelTextColor]: refs.labelTextColor,
-  [vars$7.fontFamily]: refs.fontFamily,
+  [vars$8.hostDirection]: refs.direction,
+  [vars$8.labelTextColor]: refs.labelTextColor,
+  [vars$8.fontFamily]: refs.fontFamily,
 
-  [vars$7.iconSize]: '2em',
+  [vars$8.iconSize]: '2em',
 
-  [vars$7.hostPadding]: '0.75em',
-  [vars$7.gap]: '0.5em',
+  [vars$8.hostPadding]: '0.75em',
+  [vars$8.gap]: '0.5em',
 
-  [vars$7.fontSize]: '16px',
-  [vars$7.titleFontWeight]: '500',
-  [vars$7.lineHeight]: '1em',
+  [vars$8.fontSize]: '16px',
+  [vars$8.titleFontWeight]: '500',
+  [vars$8.lineHeight]: '1em',
 
-  [vars$7.borderWidth]: refs.borderWidth,
-  [vars$7.borderColor]: refs.borderColor,
-  [vars$7.borderRadius]: refs.borderRadius,
-  [vars$7.borderStyle]: 'dashed',
+  [vars$8.borderWidth]: refs.borderWidth,
+  [vars$8.borderColor]: refs.borderColor,
+  [vars$8.borderRadius]: refs.borderRadius,
+  [vars$8.borderStyle]: 'dashed',
 
   _required: {
-    [vars$7.requiredIndicator]: refs.requiredIndicator,
+    [vars$8.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$7.hostHeight]: '196px',
-      [vars$7.hostWidth]: '200px',
-      [vars$7.titleFontSize]: '0.875em',
-      [vars$7.descriptionFontSize]: '0.875em',
-      [vars$7.lineHeight]: '1.25em',
+      [vars$8.hostHeight]: '196px',
+      [vars$8.hostWidth]: '200px',
+      [vars$8.titleFontSize]: '0.875em',
+      [vars$8.descriptionFontSize]: '0.875em',
+      [vars$8.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$7.hostHeight]: '216px',
-      [vars$7.hostWidth]: '230px',
-      [vars$7.titleFontSize]: '1em',
-      [vars$7.descriptionFontSize]: '0.875em',
-      [vars$7.lineHeight]: '1.25em',
+      [vars$8.hostHeight]: '216px',
+      [vars$8.hostWidth]: '230px',
+      [vars$8.titleFontSize]: '1em',
+      [vars$8.descriptionFontSize]: '0.875em',
+      [vars$8.lineHeight]: '1.25em',
     },
     md: {
-      [vars$7.hostHeight]: '256px',
-      [vars$7.hostWidth]: '312px',
-      [vars$7.titleFontSize]: '1.125em',
-      [vars$7.descriptionFontSize]: '1em',
-      [vars$7.lineHeight]: '1.5em',
+      [vars$8.hostHeight]: '256px',
+      [vars$8.hostWidth]: '312px',
+      [vars$8.titleFontSize]: '1.125em',
+      [vars$8.descriptionFontSize]: '1em',
+      [vars$8.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$7.hostHeight]: '280px',
-      [vars$7.hostWidth]: '336px',
-      [vars$7.titleFontSize]: '1.125em',
-      [vars$7.descriptionFontSize]: '1.125em',
-      [vars$7.lineHeight]: '1.75em',
+      [vars$8.hostHeight]: '280px',
+      [vars$8.hostWidth]: '336px',
+      [vars$8.titleFontSize]: '1.125em',
+      [vars$8.descriptionFontSize]: '1.125em',
+      [vars$8.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$7.hostWidth]: refs.width,
+    [vars$8.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$7
+  vars: vars$8
 });
 
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 
-const vars$6 = ButtonSelectionGroupItemClass.cssVarList;
+const vars$7 = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$6.hostDirection]: 'inherit',
-  [vars$6.backgroundColor]: globalRefs$4.colors.surface.light,
-  [vars$6.labelTextColor]: globalRefs$4.colors.surface.contrast,
-  [vars$6.borderColor]: globalRefs$4.colors.surface.main,
-  [vars$6.borderStyle]: 'solid',
-  [vars$6.borderRadius]: globalRefs$4.radius.sm,
+  [vars$7.hostDirection]: 'inherit',
+  [vars$7.backgroundColor]: globalRefs$6.colors.surface.light,
+  [vars$7.labelTextColor]: globalRefs$6.colors.surface.contrast,
+  [vars$7.borderColor]: globalRefs$6.colors.surface.main,
+  [vars$7.borderStyle]: 'solid',
+  [vars$7.borderRadius]: globalRefs$6.radius.sm,
 
   _hover: {
-    [vars$6.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+    [vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
   },
 
   _selected: {
-    [vars$6.borderColor]: globalRefs$4.colors.surface.contrast,
-    [vars$6.backgroundColor]: globalRefs$4.colors.surface.contrast,
-    [vars$6.labelTextColor]: globalRefs$4.colors.surface.light,
+    [vars$7.borderColor]: globalRefs$6.colors.surface.contrast,
+    [vars$7.backgroundColor]: globalRefs$6.colors.surface.contrast,
+    [vars$7.labelTextColor]: globalRefs$6.colors.surface.light,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$6
+  vars: vars$7
 });
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$5 = ButtonSelectionGroupClass.cssVarList;
+const globalRefs$5 = getThemeRefs(globals);
+const vars$6 = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  [vars$5.hostDirection]: refs.direction,
-  [vars$5.fontFamily]: refs.fontFamily,
-  [vars$5.labelTextColor]: refs.labelTextColor,
-  [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$5.itemsSpacing]: globalRefs$3.spacing.sm,
-  [vars$5.hostWidth]: refs.width,
+  [vars$6.hostDirection]: refs.direction,
+  [vars$6.fontFamily]: refs.fontFamily,
+  [vars$6.labelTextColor]: refs.labelTextColor,
+  [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
+  [vars$6.hostWidth]: refs.width,
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$5
+  vars: vars$6
 });
 
-const componentName$2 = getComponentName('modal');
+const componentName$3 = getComponentName('modal');
 
 const customMixin = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -8774,7 +8774,10 @@ const ModalClass = compose(
         property: 'display',
         important: true,
       },
-      backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
+      backgroundColor: [
+        { selector: () => '::part(content)', property: 'background-color' },
+        { selector: () => '::part(overlay)', property: 'background-color' },
+      ],
       width: { selector: () => '::part(overlay)', property: 'width' },
       shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
     },
@@ -8792,56 +8795,59 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$2,
+    componentName: componentName$3,
   })
 );
 
+const globalRefs$4 = getThemeRefs(globals);
+
 const compVars = ModalClass.cssVarList;
 
 const modal = {
+  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
   [compVars.overlayShadow]: 'none',
   [compVars.overlayWidth]: '700px',
 };
 
-const vars$4 = {
+const vars$5 = {
   ...compVars,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$4
+  vars: vars$5
 });
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$3 = GridClass.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
+const vars$4 = GridClass.cssVarList;
 
 const grid = {
-  [vars$3.hostWidth]: '100%',
-  [vars$3.hostHeight]: '100%',
-  [vars$3.hostMinHeight]: '400px',
-  [vars$3.backgroundColor]: globalRefs$2.colors.surface.light,
+  [vars$4.hostWidth]: '100%',
+  [vars$4.hostHeight]: '100%',
+  [vars$4.hostMinHeight]: '400px',
+  [vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
 
-  [vars$3.fontSize]: refs.fontSize,
-  [vars$3.fontFamily]: refs.fontFamily,
+  [vars$4.fontSize]: refs.fontSize,
+  [vars$4.fontFamily]: refs.fontFamily,
 
-  [vars$3.sortIndicatorsColor]: globalRefs$2.colors.surface.main,
-  [vars$3.activeSortIndicator]: globalRefs$2.colors.surface.dark,
-  [vars$3.resizeHandleColor]: globalRefs$2.colors.surface.main,
+  [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
+  [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
+  [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
 
-  [vars$3.inputBorderWidth]: refs.borderWidth,
-  [vars$3.inputBorderStyle]: refs.borderStyle,
-  [vars$3.inputBorderRadius]: refs.borderRadius,
-  [vars$3.inputBorderColor]: 'transparent',
+  [vars$4.inputBorderWidth]: refs.borderWidth,
+  [vars$4.inputBorderStyle]: refs.borderStyle,
+  [vars$4.inputBorderRadius]: refs.borderRadius,
+  [vars$4.inputBorderColor]: 'transparent',
 
-  [vars$3.headerRowTextColor]: globalRefs$2.colors.surface.dark,
-  [vars$3.separatorColor]: globalRefs$2.colors.surface.main,
+  [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
+  [vars$4.separatorColor]: globalRefs$3.colors.surface.main,
 
-  [vars$3.valueTextColor]: globalRefs$2.colors.surface.contrast,
-  [vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.contrast,
+  [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
+  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
 
   _bordered: {
-    [vars$3.inputBorderColor]: refs.borderColor,
+    [vars$4.inputBorderColor]: refs.borderColor,
   },
 };
 
@@ -8849,10 +8855,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$3
+  vars: vars$4
 });
 
-const componentName$1 = getComponentName('notification-card');
+const componentName$2 = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -8960,54 +8966,54 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$1,
+    componentName: componentName$2,
   })
 );
 
-const globalRefs$1 = getThemeRefs(globals);
-const vars$2 = NotificationCardClass.cssVarList;
+const globalRefs$2 = getThemeRefs(globals);
+const vars$3 = NotificationCardClass.cssVarList;
 
 const shadowColor = '#00000020';
 
 const notification = {
-  [vars$2.hostMinWidth]: '415px',
-  [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
-  [vars$2.fontSize]: globalRefs$1.typography.body1.size,
-  [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
-  [vars$2.textColor]: globalRefs$1.colors.surface.contrast,
-  [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${shadowColor}`,
-  [vars$2.verticalPadding]: '0.625em',
-  [vars$2.horizontalPadding]: '1.5em',
-  [vars$2.borderRadius]: globalRefs$1.radius.xs,
+  [vars$3.hostMinWidth]: '415px',
+  [vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
+  [vars$3.fontSize]: globalRefs$2.typography.body1.size,
+  [vars$3.backgroundColor]: globalRefs$2.colors.surface.main,
+  [vars$3.textColor]: globalRefs$2.colors.surface.contrast,
+  [vars$3.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor}`,
+  [vars$3.verticalPadding]: '0.625em',
+  [vars$3.horizontalPadding]: '1.5em',
+  [vars$3.borderRadius]: globalRefs$2.radius.xs,
 
   _bordered: {
-    [vars$2.borderWidth]: globalRefs$1.border.sm,
-    [vars$2.borderStyle]: 'solid',
-    [vars$2.borderColor]: 'transparent',
+    [vars$3.borderWidth]: globalRefs$2.border.sm,
+    [vars$3.borderStyle]: 'solid',
+    [vars$3.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$2.fontSize]: '12px' },
-    sm: { [vars$2.fontSize]: '14px' },
-    md: { [vars$2.fontSize]: '16px' },
-    lg: { [vars$2.fontSize]: '18px' },
+    xs: { [vars$3.fontSize]: '12px' },
+    sm: { [vars$3.fontSize]: '14px' },
+    md: { [vars$3.fontSize]: '16px' },
+    lg: { [vars$3.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$2.backgroundColor]: globalRefs$1.colors.primary.main,
-      [vars$2.textColor]: globalRefs$1.colors.primary.contrast,
-      [vars$2.borderColor]: globalRefs$1.colors.primary.light,
+      [vars$3.backgroundColor]: globalRefs$2.colors.primary.main,
+      [vars$3.textColor]: globalRefs$2.colors.primary.contrast,
+      [vars$3.borderColor]: globalRefs$2.colors.primary.light,
     },
     success: {
-      [vars$2.backgroundColor]: globalRefs$1.colors.success.main,
-      [vars$2.textColor]: globalRefs$1.colors.success.contrast,
-      [vars$2.borderColor]: globalRefs$1.colors.success.light,
+      [vars$3.backgroundColor]: globalRefs$2.colors.success.main,
+      [vars$3.textColor]: globalRefs$2.colors.success.contrast,
+      [vars$3.borderColor]: globalRefs$2.colors.success.light,
     },
     error: {
-      [vars$2.backgroundColor]: globalRefs$1.colors.error.main,
-      [vars$2.textColor]: globalRefs$1.colors.error.contrast,
-      [vars$2.borderColor]: globalRefs$1.colors.error.light,
+      [vars$3.backgroundColor]: globalRefs$2.colors.error.main,
+      [vars$3.textColor]: globalRefs$2.colors.error.contrast,
+      [vars$3.borderColor]: globalRefs$2.colors.error.light,
     },
   },
 };
@@ -9015,6 +9021,529 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
+  vars: vars$3
+});
+
+const componentName$1 = getComponentName('multi-select-combo-box');
+
+const MultiSelectComboBoxMixin = (superclass) =>
+  class MultiSelectComboBoxMixinClass extends superclass {
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ displayName, value, label }) => {
+      return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
+    };
+
+    #data;
+
+    get defaultValues() {
+      const defaultValuesAttr = this.getAttribute('default-values');
+      if (defaultValuesAttr) {
+        try {
+          const defaultValues = JSON.parse(defaultValuesAttr);
+          if (this.isValidDataType(defaultValues)) {
+            return defaultValues;
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "default-values" -', e.message);
+        }
+      }
+      return [];
+    }
+
+    get renderItem() {
+      return this.#renderItem;
+    }
+
+    set renderItem(renderFn) {
+      this.#renderItem = renderFn;
+      this.renderItems();
+    }
+
+    get data() {
+      if (this.#data) return this.#data;
+
+      const dataAttr = this.getAttribute('data');
+
+      if (dataAttr) {
+        try {
+          const data = JSON.parse(dataAttr);
+          if (this.isValidDataType(data)) {
+            return data;
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "data" -', e.message);
+        }
+      }
+
+      return [];
+    }
+
+    set data(data) {
+      if (this.isValidDataType(data)) {
+        this.#data = data;
+        this.renderItems();
+      }
+    }
+
+    get allowCustomValue() {
+      return this.getAttribute('allow-custom-value') === 'true';
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    isValidDataType(data) {
+      const isValid = Array.isArray(data);
+      if (!isValid) {
+        // eslint-disable-next-line no-console
+        console.error('data and default-values must be an array, received:', data);
+      }
+
+      return isValid;
+    }
+
+    getItemsTemplate() {
+      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
+    }
+
+    renderItems() {
+      const template = this.getItemsTemplate();
+      if (template) this.innerHTML = template;
+    }
+
+    handleSelectedItems() {
+      const currentSelected =
+        this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
+
+      this.baseElement.selectedItems = [];
+
+      // if previously selected item ID exists in current children, set it as selected
+      if (currentSelected.length > 0) {
+        this.value = currentSelected;
+      }
+
+      // otherwise, if default value is specified, set default value as selected item
+      if (this.value.length === 0) {
+        this.setDefaultValues();
+      }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    customValueTransformFn(val) {
+      return val;
+    }
+
+    // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
+    // field that it searches the value, and the finaly display value of the input.
+    // We provide a custom transform function to override that behavior.
+    setComboBoxDescriptor() {
+      const valueDescriptor = Object.getOwnPropertyDescriptor(
+        this.inputElement.constructor.prototype,
+        'value'
+      );
+
+      const comboBox = this;
+
+      Object.defineProperties(this.inputElement, {
+        value: {
+          ...valueDescriptor,
+          set(val) {
+            const transformedValue = comboBox.customValueTransformFn(val) || '';
+
+            if (transformedValue === this.value) {
+              return;
+            }
+
+            valueDescriptor.set.call(this, transformedValue);
+          },
+        },
+      });
+    }
+
+    // vaadin api is to set props on their combo box node,
+    // in order to avoid it, we are passing the children of this component
+    // to the items & renderer props, so it will be used as the combo box items
+    #onChildrenChange() {
+      const items = Array.from(this.children);
+
+      // we want the data-name attribute to be accessible as an object attribute
+      if (items.length) {
+        this.removeAttribute('has-no-options');
+
+        items.forEach((node) => {
+          Object.defineProperty(node, 'data-name', {
+            value: node.getAttribute('data-name'),
+            configurable: true,
+            writable: true,
+          });
+          Object.defineProperty(node, 'data-id', {
+            value: node.getAttribute('data-id'),
+            configurable: true,
+            writable: true,
+          });
+        });
+
+        this.baseElement.items = items;
+
+        setTimeout(() => {
+          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
+          this.handleSelectedItems();
+        }, 0);
+      } else {
+        this.baseElement.items = [];
+        this.setAttribute('has-no-options', '');
+      }
+
+      // use vaadin combobox custom renderer to render options as HTML
+      // and not via default renderer, which renders only the data-name's value
+      // in its own HTML template
+      this.baseElement.renderer = (root, combo, model) => {
+        // eslint-disable-next-line no-param-reassign
+        root.innerHTML = model.item.outerHTML;
+      };
+    }
+
+    // the default vaadin behavior is to attach the overlay to the body when opened
+    // we do not want that because it's difficult to style the overlay in this way
+    // so we override it to open inside the shadow DOM
+    #overrideOverlaySettings() {
+      const overlay = this.baseElement.shadowRoot
+        .querySelector('vaadin-multi-select-combo-box-internal')
+        .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');
+      overlay._attachOverlay = () => {
+        overlay.bringToFront();
+      };
+      overlay._detachOverlay = () => {};
+      overlay._enterModalState = () => {};
+    }
+
+    #handleCustomValues() {
+      if (this.allowCustomValue) {
+        this.baseElement.addEventListener('custom-value-set', (e) => {
+          const newItemHtml = this.#renderItem({
+            label: e.detail,
+            displayName: e.detail,
+            value: e.detail,
+          });
+          this.innerHTML += newItemHtml;
+          // The value needs to be set with a timeout because it needs to execute after
+          // the custom value is added to items by the children change observer
+          setTimeout(() => {
+            this.value = [...this.value, e.detail];
+          }, 0);
+        });
+      }
+    }
+
+    init() {
+      super.init?.();
+
+      // eslint-disable-next-line func-names
+      this.getValidity = function () {
+        if (!this.value.length && this.isRequired) {
+          return {
+            valueMissing: true,
+          };
+        }
+        return {};
+      };
+
+      this.setComboBoxDescriptor();
+
+      this.#overrideOverlaySettings();
+
+      this.#handleCustomValues();
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+
+      observeChildren(this, this.#onChildrenChange.bind(this));
+
+      // Note: we need to forward the `placeholder` because the vaadin component observes it and
+      // tries to override it, causing us to lose the user set placeholder.
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });
+
+      this.setDefaultValues();
+    }
+
+    setDefaultValues() {
+      this.value = this.defaultValues;
+    }
+
+    set value(vals) {
+      if (vals && vals.length > 0) {
+        const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
+
+        if (children?.length > 0) {
+          this.baseElement.selectedItems = children;
+        }
+      } else {
+        this.baseElement.selectedItems = [];
+      }
+    }
+
+    get value() {
+      return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
+    }
+  };
+
+const {
+  host,
+  inputField,
+  inputElement,
+  placeholder,
+  toggle,
+  label,
+  requiredIndicator,
+  helperText,
+  errorMessage,
+  chip,
+  chipLabel,
+  overflowChipFirstBorder,
+  overflowChipSecondBorder,
+} = {
+  host: { selector: () => ':host' },
+  inputField: { selector: '::part(input-field)' },
+  inputElement: { selector: 'input' },
+  placeholder: { selector: '> input:placeholder-shown' },
+  toggle: { selector: '::part(toggle-button)' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+  chip: { selector: 'vaadin-multi-select-combo-box-chip' },
+  chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },
+  overflowChipFirstBorder: {
+    selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::before",
+  },
+  overflowChipSecondBorder: {
+    selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::after",
+  },
+};
+
+const MultiSelectComboBoxClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      // we apply font-size also on the host so we can set its width with em
+      fontSize: [{}, host],
+      chipFontSize: { ...chipLabel, property: 'font-size' },
+      fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      inputHeight: { ...inputField, property: 'min-height' },
+      inputBackgroundColor: { ...inputField, property: 'background-color' },
+      inputBorderColor: { ...inputField, property: 'border-color' },
+      inputBorderWidth: { ...inputField, property: 'border-width' },
+      inputBorderStyle: { ...inputField, property: 'border-style' },
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      inputValueTextColor: { ...inputField, property: 'color' },
+      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
+      inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
+      inputDropdownButtonColor: { ...toggle, property: 'color' },
+      inputDropdownButtonSize: { ...toggle, property: 'font-size' },
+      inputDropdownButtonOffset: [
+        { ...toggle, property: 'margin-right' },
+        { ...toggle, property: 'margin-left' },
+      ],
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputOutlineStyle: { ...inputField, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputHorizontalPadding: [
+        { ...inputElement, property: 'padding-left' },
+        { ...inputElement, property: 'padding-right' },
+        { ...inputField, property: 'padding-inline-start' },
+      ],
+      inputVerticalPadding: [
+        { ...inputField, property: 'padding-top' },
+        { ...inputField, property: 'padding-bottom' },
+      ],
+      chipTextColor: { ...chipLabel, property: 'color' },
+      chipBackgroundColor: [
+        { ...chip, property: 'background-color' },
+        { ...overflowChipFirstBorder, property: 'border-color' },
+        { ...overflowChipSecondBorder, property: 'border-color' },
+      ],
+
+      // we need to use the variables from the portal mixin
+      // so we need to use an arrow function on the selector
+      // for that to work, because ComboBox is not available
+      // at this time.
+      overlayBackground: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
+      },
+      overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
+      overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
+      overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
+      overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },
+      overlayItemBoxShadow: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,
+      },
+      overlayItemPaddingInlineStart: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
+      },
+      overlayItemPaddingInlineEnd: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
+      },
+    },
+  }),
+  draggableMixin,
+  portalMixin({
+    name: 'overlay',
+    selector: 'vaadin-multi-select-combo-box-internal',
+    mappings: {
+      backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },
+      minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },
+      margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
+      cursor: { selector: 'vaadin-multi-select-combo-box-item' },
+      fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
+      fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
+      itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
+      itemPaddingInlineStart: {
+        selector: 'vaadin-multi-select-combo-box-item',
+        property: 'padding-inline-start',
+      },
+      itemPaddingInlineEnd: {
+        selector: 'vaadin-multi-select-combo-box-item',
+        property: 'padding-inline-end',
+      },
+    },
+    forward: {
+      include: false,
+      attributes: ['size'],
+    },
+  }),
+  composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
+  componentNameValidationMixin,
+  MultiSelectComboBoxMixin
+)(
+  createProxy({
+    slots: ['', 'prefix'],
+    wrappedEleName: 'vaadin-multi-select-combo-box',
+    style: () => `
+		:host {
+			display: inline-flex;
+			box-sizing: border-box;
+			-webkit-mask-image: none;
+		}
+		${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}
+		${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}
+		${resetInputPlaceholder('vaadin-multi-select-combo-box')}
+		${resetInputCursor('vaadin-multi-select-combo-box')}
+
+		vaadin-multi-select-combo-box {
+			padding: 0;
+			width: 100%;
+		}
+		vaadin-multi-select-combo-box::before {
+			height: initial;
+		}
+		vaadin-multi-select-combo-box [slot="input"] {
+			-webkit-mask-image: none;
+			min-height: 0;
+      align-self: center;
+			box-sizing: border-box;
+		}
+
+		::part(input-field) {
+      padding: 0;
+			box-shadow: none;
+		}
+    ${resetInputLabelPosition('vaadin-multi-select-combo-box')}
+    :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {
+      display: block;
+    }
+
+    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,
+    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
+      left: -4px;
+      right: -4px;
+      border-left-width: 0;
+      border-inline-start-style: solid;
+      border-inline-start-width: 2px;
+    }
+    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
+      left: -8px;
+      right: -8px;
+    }
+
+    :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
+      display: none;
+    }
+		`,
+    // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
+    // with the same name. Including it will cause Vaadin to calculate NaN size,
+    // and reset items to an empty array, and opening the list box with no items
+    // to display.
+    // 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$1,
+    includeForwardProps: ['items', 'renderer', 'selectedItems'],
+  })
+);
+
+const globalRefs$1 = getThemeRefs(globals);
+const vars$2 = MultiSelectComboBoxClass.cssVarList;
+
+const multiSelectComboBox = {
+  [vars$2.hostWidth]: refs.width,
+  [vars$2.hostDirection]: refs.direction,
+  [vars$2.fontSize]: refs.fontSize,
+  [vars$2.fontFamily]: refs.fontFamily,
+  [vars$2.labelTextColor]: refs.labelTextColor,
+  [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$2.inputBorderColor]: refs.borderColor,
+  [vars$2.inputBorderWidth]: refs.borderWidth,
+  [vars$2.inputBorderStyle]: refs.borderStyle,
+  [vars$2.inputBorderRadius]: refs.borderRadius,
+  [vars$2.inputOutlineColor]: refs.outlineColor,
+  [vars$2.inputOutlineOffset]: refs.outlineOffset,
+  [vars$2.inputOutlineWidth]: refs.outlineWidth,
+  [vars$2.inputOutlineStyle]: refs.outlineStyle,
+  [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$2.inputValueTextColor]: refs.valueTextColor,
+  [vars$2.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$2.inputBackgroundColor]: refs.backgroundColor,
+  [vars$2.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$2.inputVerticalPadding]: refs.verticalPadding,
+  [vars$2.inputHeight]: refs.inputHeight,
+  [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.contrast,
+  [vars$2.inputDropdownButtonCursor]: 'pointer',
+  [vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
+  [vars$2.overlayItemPaddingInlineStart]: globalRefs$1.spacing.xs,
+  [vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
+  [vars$2.chipFontSize]: refs.chipFontSize,
+  [vars$2.chipTextColor]: refs.valueTextColor,
+  [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
+
+  _readonly: {
+    [vars$2.inputDropdownButtonCursor]: 'default',
+  },
+
+  // Overlay theme exposed via the component:
+  [vars$2.overlayFontSize]: refs.fontSize,
+  [vars$2.overlayFontFamily]: refs.fontFamily,
+  [vars$2.overlayCursor]: 'pointer',
+  [vars$2.overlayItemBoxShadow]: 'none',
+
+  // Overlay direct theme:
+  [vars$2.overlay.minHeight]: '400px',
+  [vars$2.overlay.margin]: '0',
+};
+
+var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: multiSelectComboBox,
+  multiSelectComboBox: multiSelectComboBox,
   vars: vars$2
 });
 
@@ -9169,6 +9698,7 @@ const components = {
   modal: modal$1,
   grid: grid$1,
   notificationCard,
+  multiSelectComboBox: multiSelectComboBox$1,
   badge: badge$1,
 };
 
@@ -9182,7 +9712,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$v, components: vars };
+const themeVars = { globals: vars$w, components: vars };
 
 export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map