@descope/web-components-ui 1.0.278 → 1.0.280

package/dist/index.esm.js

@@ -13,6 +13,9 @@ import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
 import '@vaadin/multi-select-combo-box';
 import '@vaadin/dialog';
 import '@vaadin/notification';
+import '@vaadin/custom-field';
+import '@vaadin/icon';
+import '@vaadin/icons';
 import merge from 'lodash.merge';
 import Color from 'color';
 
@@ -767,6 +770,14 @@ const inputValidationMixin = (superclass) =>
 
     #internals;
 
+    get internals() {
+      return this.#internals;
+    }
+
+    set internals(value) {
+      this.#internals = value;
+    }
+
     constructor() {
       super();
 
@@ -953,7 +964,10 @@ const proxyInputMixin =
   ({
     proxyProps = [],
     // allows us to set the event that should trigger validation
+    // it can be either a string or an array of strings (for multiple events)
     inputEvent = 'input',
+    // Proxies all validations from the parent component to the input element
+    proxyParentValidation = false,
   }) =>
   (superclass) =>
     class ProxyInputMixinClass extends inputValidationMixin(superclass) {
@@ -1043,12 +1057,16 @@ const proxyInputMixin =
         // on some cases the base element is not ready so the inputElement is empty
         // we are deferring this section to make sure the base element is ready
         setTimeout(() => {
-          this.baseElement?.addEventListener(inputEvent, () => {
-            if (!this.baseElement.checkValidity()) {
-              this.#handleErrorMessage();
-            } else {
-              this.removeAttribute('invalid');
-            }
+          const validationEvents = Array.isArray(inputEvent) ? inputEvent : [inputEvent];
+
+          validationEvents.forEach((e) => {
+            this.baseElement?.addEventListener(e, () => {
+              if (!this.baseElement.checkValidity()) {
+                this.#handleErrorMessage();
+              } else {
+                this.removeAttribute('invalid');
+              }
+            });
           });
 
           this.baseElement.addEventListener('change', () => {
@@ -1071,6 +1089,41 @@ const proxyInputMixin =
 
           forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
         });
+
+        if (proxyParentValidation) {
+          // All functions called on the inputElement internals will be applied to the parent
+          // component internals as well. As a result, there's no need to add outer mechanisms
+          // to update the parent component's validity state based on the input elements validity.
+          const inputElementInternals = this.inputElement.internals;
+          const parentThis = this;
+          this.inputElement.internals = new Proxy(inputElementInternals, {
+            get: (target, prop) => {
+              if (typeof target[prop] === 'function' && prop === 'setValidity') {
+                return (...args) => {
+                  // If we're calling setValidity with 3 args, then the validationTarget
+                  // needs to be swapped to be the inputElement
+                  if (args.length === 3) {
+                    const newArgs = args.slice(0, args.length - 1);
+                    newArgs.push(parentThis.inputElement);
+                    parentThis.internals[prop](...newArgs);
+                  } else {
+                    parentThis.internals[prop](...args);
+                  }
+                  return target[prop](...args);
+                };
+              }
+
+              if (typeof target[prop] === 'function') {
+                return (...args) => {
+                  parentThis.internals[prop](...args);
+                  return target[prop](...args);
+                };
+              }
+
+              return target[prop];
+            },
+          });
+        }
       }
     };
 
@@ -1289,7 +1342,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$I = getComponentName('button');
+const componentName$L = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1327,7 +1380,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$h, label: label$a } = {
+const { host: host$i, label: label$a } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
 };
@@ -1339,7 +1392,7 @@ const ButtonClass = compose(
     mappings: {
       hostWidth: { property: 'width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$h, property: 'direction' },
+      hostDirection: { ...host$i, property: 'direction' },
       fontSize: {},
       fontFamily: {},
 
@@ -1391,7 +1444,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$I,
+    componentName: componentName$L,
   })
 );
 
@@ -1428,7 +1481,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$I, ButtonClass);
+customElements.define(componentName$L, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1438,13 +1491,13 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$H = getComponentName('boolean-field-internal');
+const componentName$K = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$H, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
 
-class BooleanInputInternal extends BaseInputClass$5 {
+class BooleanInputInternal extends BaseInputClass$7 {
   static get observedAttributes() {
     return ['readonly'];
   }
@@ -1518,14 +1571,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$H}
+				<${componentName$K}
 					tabindex="-1"
 					slot="input"
-				></${componentName$H}>
+				></${componentName$K}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$H);
+      this.inputElement = this.shadowRoot.querySelector(componentName$K);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1724,17 +1777,17 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$G = getComponentName('checkbox');
+const componentName$J = getComponentName('checkbox');
 
 const {
-  host: host$g,
+  host: host$h,
   component: component$1,
   checkboxElement,
   checkboxSurface,
   checkboxLabel: checkboxLabel$1,
   requiredIndicator: requiredIndicator$b,
-  helperText: helperText$9,
-  errorMessage: errorMessage$b,
+  helperText: helperText$a,
+  errorMessage: errorMessage$c,
 } = {
   host: { selector: () => ':host' },
   requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -1749,11 +1802,11 @@ const {
 const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$g, property: 'width' },
-      hostDirection: { ...host$g, property: 'direction' },
+      hostWidth: { ...host$h, property: 'width' },
+      hostDirection: { ...host$h, property: 'direction' },
 
-      fontSize: [host$g, checkboxElement, checkboxLabel$1],
-      fontFamily: [checkboxLabel$1, helperText$9, errorMessage$b],
+      fontSize: [host$h, checkboxElement, checkboxLabel$1],
+      fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
       labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
@@ -1761,7 +1814,7 @@ const CheckboxClass = compose(
       labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
       labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
 
-      errorMessageTextColor: { ...errorMessage$b, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$c, property: 'color' },
 
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
       inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
@@ -1830,25 +1883,25 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$G,
+    componentName: componentName$J,
   })
 );
 
-customElements.define(componentName$H, BooleanInputInternal);
+customElements.define(componentName$K, BooleanInputInternal);
 
-customElements.define(componentName$G, CheckboxClass);
+customElements.define(componentName$J, CheckboxClass);
 
-const componentName$F = getComponentName('switch-toggle');
+const componentName$I = getComponentName('switch-toggle');
 
 const {
-  host: host$f,
+  host: host$g,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
   checkboxLabel,
   requiredIndicator: requiredIndicator$a,
-  helperText: helperText$8,
-  errorMessage: errorMessage$a,
+  helperText: helperText$9,
+  errorMessage: errorMessage$b,
 } = {
   host: { selector: () => ':host' },
   requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -1863,11 +1916,11 @@ const {
 const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$f, property: 'width' },
-      hostDirection: { ...host$f, property: 'direction' },
+      hostWidth: { ...host$g, property: 'width' },
+      hostDirection: { ...host$g, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
-      fontFamily: [checkboxLabel, helperText$8, errorMessage$a],
+      fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
 
       labelTextColor: { ...checkboxLabel, property: 'color' },
       labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
@@ -1875,7 +1928,7 @@ const SwitchToggleClass = compose(
       labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
       labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
 
-      errorMessageTextColor: { ...errorMessage$a, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$b, property: 'color' },
 
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
@@ -1970,17 +2023,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$F,
+    componentName: componentName$I,
   })
 );
 
-customElements.define(componentName$F, SwitchToggleClass);
+customElements.define(componentName$I, SwitchToggleClass);
 
-const componentName$E = getComponentName('loader-linear');
+const componentName$H = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$E;
+    return componentName$H;
   }
 
   constructor() {
@@ -2016,18 +2069,18 @@ const selectors$2 = {
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$e } = selectors$2;
+const { after: after$1, host: host$f } = selectors$2;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$e, property: 'width' },
+      hostWidth: { ...host$f, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$e, property: 'padding-top' },
-        { ...host$e, property: 'padding-bottom' },
+        { ...host$f, property: 'padding-top' },
+        { ...host$f, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after$1, property: 'background-color' },
@@ -2041,11 +2094,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$E, LoaderLinearClass);
+customElements.define(componentName$H, LoaderLinearClass);
 
-const componentName$D = getComponentName('loader-radial');
+const componentName$G = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2089,11 +2142,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$D, LoaderRadialClass);
+customElements.define(componentName$G, LoaderRadialClass);
 
-const componentName$C = getComponentName('container');
+const componentName$F = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$C, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$F, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2146,13 +2199,13 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$C, ContainerClass);
+customElements.define(componentName$F, ContainerClass);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$B = getComponentName('text');
+const componentName$E = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2212,8 +2265,8 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const componentName$A = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
+const componentName$D = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2259,7 +2312,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$A, baseS
 }
 
 const textVars$3 = TextClass.cssVarList;
-const { host: host$d, before, after, text: text$3 } = {
+const { host: host$e, before, after, text: text$3 } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
   after: { selector: '::after' },
@@ -2269,8 +2322,8 @@ const { host: host$d, before, after, text: text$3 } = {
 const DividerClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$d, property: 'width' },
-      hostPadding: { ...host$d, property: 'padding' },
+      hostWidth: { ...host$e, property: 'width' },
+      hostPadding: { ...host$e, property: 'padding' },
       hostDirection: { ...text$3, property: 'direction' },
 
       minHeight: {},
@@ -2312,19 +2365,19 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$B, TextClass);
+customElements.define(componentName$E, TextClass);
 
-customElements.define(componentName$A, DividerClass);
+customElements.define(componentName$D, DividerClass);
 
 const {
-  host: host$c,
+  host: host$d,
   label: label$9,
   placeholder: placeholder$3,
   requiredIndicator: requiredIndicator$9,
   inputField: inputField$6,
   input,
-  helperText: helperText$7,
-  errorMessage: errorMessage$9,
+  helperText: helperText$8,
+  errorMessage: errorMessage$a,
   disabledPlaceholder,
 } = {
   host: { selector: () => ':host' },
@@ -2340,12 +2393,12 @@ const {
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host$c],
-  fontFamily: [label$9, inputField$6, helperText$7, errorMessage$9],
+  fontSize: [{}, host$d],
+  fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
 
-  hostWidth: { ...host$c, property: 'width' },
-  hostMinWidth: { ...host$c, property: 'min-width' },
-  hostDirection: { ...host$c, property: 'direction' },
+  hostWidth: { ...host$d, property: 'width' },
+  hostMinWidth: { ...host$d, property: 'min-width' },
+  hostDirection: { ...host$d, property: 'direction' },
 
   inputBackgroundColor: { ...inputField$6, property: 'background-color' },
 
@@ -2355,7 +2408,7 @@ var textFieldMappings = {
     { ...label$9, property: '-webkit-text-fill-color' },
     { ...requiredIndicator$9, property: '-webkit-text-fill-color' },
   ],
-  errorMessageTextColor: { ...errorMessage$9, property: 'color' },
+  errorMessageTextColor: { ...errorMessage$a, property: 'color' },
 
   inputValueTextColor: { ...inputField$6, property: 'color' },
   inputCaretTextColor: { ...input, property: 'color' },
@@ -2386,9 +2439,9 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$z = getComponentName('email-field');
+const componentName$C = getComponentName('email-field');
 
-const customMixin$6 = (superclass) =>
+const customMixin$7 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
@@ -2402,7 +2455,7 @@ const EmailFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$6
+  customMixin$7
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -2421,15 +2474,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$z,
+    componentName: componentName$C,
   })
 );
 
-customElements.define(componentName$z, EmailFieldClass);
+customElements.define(componentName$C, EmailFieldClass);
 
-const componentName$y = getComponentName('link');
+const componentName$B = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$B, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2475,12 +2528,12 @@ const selectors$1 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$b, wrapper: wrapper$1 } = selectors$1;
+const { anchor, text: text$2, host: host$c, wrapper: wrapper$1 } = selectors$1;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$b, property: 'width' },
+      hostWidth: { ...host$c, property: 'width' },
       hostDirection: { ...text$2, property: 'direction' },
       textAlign: wrapper$1,
       textColor: [
@@ -2494,7 +2547,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$y, LinkClass);
+customElements.define(componentName$B, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2546,37 +2599,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$x = getComponentName('logo');
+const componentName$A = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$x,
+  componentName: componentName$A,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$x, LogoClass);
+customElements.define(componentName$A, LogoClass);
 
-const componentName$w = getComponentName('totp-image');
+const componentName$z = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$w,
+  componentName: componentName$z,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$w, TotpImageClass);
+customElements.define(componentName$z, TotpImageClass);
 
-const componentName$v = getComponentName('notp-image');
+const componentName$y = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$v,
+  componentName: componentName$y,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$v, NotpImageClass);
+customElements.define(componentName$y, NotpImageClass);
 
-const componentName$u = getComponentName('number-field');
+const componentName$x = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2602,11 +2655,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$u,
+    componentName: componentName$x,
   })
 );
 
-customElements.define(componentName$u, NumberFieldClass);
+customElements.define(componentName$x, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2624,17 +2677,17 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$t = getComponentName('passcode-internal');
+const componentName$w = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
 
-class PasscodeInternal extends BaseInputClass$4 {
+class PasscodeInternal extends BaseInputClass$6 {
   static get observedAttributes() {
-    return observedAttributes$5.concat(BaseInputClass$4.observedAttributes || []);
+    return observedAttributes$5.concat(BaseInputClass$6.observedAttributes || []);
   }
 
   constructor() {
@@ -2856,11 +2909,11 @@ class PasscodeInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$s = getComponentName('text-field');
+const componentName$v = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
-const customMixin$5 = (superclass) =>
+const customMixin$6 = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2887,7 +2940,7 @@ const TextFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$5
+  customMixin$6
 )(
   createProxy({
     slots: ['prefix', 'suffix'],
@@ -2906,15 +2959,15 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$s,
+    componentName: componentName$v,
   })
 );
 
-const componentName$r = getComponentName('passcode');
+const componentName$u = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
-const customMixin$4 = (superclass) =>
+const customMixin$5 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
       return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -2929,17 +2982,17 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$t}
+      <${componentName$w}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$t}>
+      ><slot></slot></${componentName$w}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$t);
+      this.inputElement = this.shadowRoot.querySelector(componentName$w);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -2954,13 +3007,13 @@ const customMixin$4 = (superclass) =>
   };
 
 const {
-  host: host$a,
+  host: host$b,
   digitField,
   label: label$8,
   requiredIndicator: requiredIndicator$8,
   internalWrapper: internalWrapper$1,
   focusedDigitField,
-  errorMessage: errorMessage$8,
+  errorMessage: errorMessage$9,
 } = {
   host: { selector: () => ':host' },
   focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -2977,16 +3030,16 @@ const loaderVars = LoaderRadialClass.cssVarList;
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$a],
+      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$b],
       hostWidth: { property: 'width' },
-      hostDirection: { ...host$a, property: 'direction' },
-      fontFamily: [host$a, { ...label$8 }],
+      hostDirection: { ...host$b, property: 'direction' },
+      fontFamily: [host$b, { ...label$8 }],
       labelTextColor: [
         { ...label$8, property: 'color' },
         { ...requiredIndicator$8, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
         property: textVars$2.inputValueTextColor,
@@ -3010,7 +3063,7 @@ const PasscodeClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$4
+  customMixin$5
 )(
   createProxy({
     slots: [],
@@ -3086,15 +3139,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$r,
+    componentName: componentName$u,
   })
 );
 
-customElements.define(componentName$s, TextFieldClass);
+customElements.define(componentName$v, TextFieldClass);
 
-customElements.define(componentName$t, PasscodeInternal);
+customElements.define(componentName$w, PasscodeInternal);
 
-customElements.define(componentName$r, PasscodeClass);
+customElements.define(componentName$u, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -3130,10 +3183,10 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$q = getComponentName('password');
+const componentName$t = getComponentName('password');
 
 const {
-  host: host$9,
+  host: host$a,
   inputField: inputField$5,
   inputElement: inputElement$2,
   inputElementPlaceholder,
@@ -3141,8 +3194,8 @@ const {
   revealButtonIcon,
   label: label$7,
   requiredIndicator: requiredIndicator$7,
-  errorMessage: errorMessage$7,
-  helperText: helperText$6,
+  errorMessage: errorMessage$8,
+  helperText: helperText$7,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -3159,11 +3212,11 @@ const {
 const PasswordClass = compose(
   createStyleMixin({
     mappings: {
-      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],
+      hostWidth: { ...host$a, property: 'width' },
+      hostMinWidth: { ...host$a, property: 'min-width' },
+      hostDirection: { ...host$a, property: 'direction' },
+      fontSize: [{}, host$a],
+      fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
       inputHeight: { ...inputField$5, property: 'height' },
       inputHorizontalPadding: [
         { ...inputElement$2, property: 'padding-left' },
@@ -3186,7 +3239,7 @@ const PasswordClass = compose(
         { ...requiredIndicator$7, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
 
       inputValueTextColor: { ...inputElement$2, property: 'color' },
       inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
@@ -3259,23 +3312,23 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$t,
   })
 );
 
-customElements.define(componentName$q, PasswordClass);
+customElements.define(componentName$t, PasswordClass);
 
-const componentName$p = getComponentName('text-area');
+const componentName$s = getComponentName('text-area');
 
 const {
-  host: host$8,
+  host: host$9,
   label: label$6,
   placeholder: placeholder$2,
   inputField: inputField$4,
   textArea: textArea$2,
   requiredIndicator: requiredIndicator$6,
-  helperText: helperText$5,
-  errorMessage: errorMessage$6,
+  helperText: helperText$6,
+  errorMessage: errorMessage$7,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -3290,17 +3343,17 @@ const {
 const TextAreaClass = compose(
   createStyleMixin({
     mappings: {
-      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],
+      hostWidth: { ...host$9, property: 'width' },
+      hostMinWidth: { ...host$9, property: 'min-width' },
+      hostDirection: { ...host$9, property: 'direction' },
+      fontSize: [host$9, textArea$2],
+      fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
       labelTextColor: [
         { ...label$6, property: 'color' },
         { ...requiredIndicator$6, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
       inputBackgroundColor: { ...inputField$4, property: 'background-color' },
       inputValueTextColor: { ...textArea$2, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder$2, property: 'color' },
@@ -3341,17 +3394,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$p,
+    componentName: componentName$s,
   })
 );
 
-customElements.define(componentName$p, TextAreaClass);
+customElements.define(componentName$s, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$o = getComponentName('image');
+const componentName$r = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$o, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$r, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3391,9 +3444,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$o, ImageClass);
+customElements.define(componentName$r, ImageClass);
 
-const componentName$n = getComponentName('combo-box');
+const componentName$q = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3591,6 +3644,10 @@ const ComboBoxMixin = (superclass) =>
       observeChildren(this, this.#onChildrenChange.bind(this));
 
       this.setDefaultValue();
+
+      this.baseElement.addEventListener('selected-item-changed', () => {
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+      });
     }
 
     setDefaultValue() {
@@ -3615,7 +3672,7 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$7,
+  host: host$8,
   inputField: inputField$3,
   inputElement: inputElement$1,
   placeholder: placeholder$1,
@@ -3623,8 +3680,8 @@ const {
   clearButton: clearButton$1,
   label: label$5,
   requiredIndicator: requiredIndicator$5,
-  helperText: helperText$4,
-  errorMessage: errorMessage$5,
+  helperText: helperText$5,
+  errorMessage: errorMessage$6,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -3641,16 +3698,16 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$7, property: 'width' },
-      hostDirection: { ...host$7, property: 'direction' },
+      hostWidth: { ...host$8, property: 'width' },
+      hostDirection: { ...host$8, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$7],
-      fontFamily: [label$5, placeholder$1, inputField$3, helperText$4, errorMessage$5],
+      fontSize: [{}, host$8],
+      fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
       labelTextColor: [
         { ...label$5, property: 'color' },
         { ...requiredIndicator$5, property: 'color' },
       ],
-      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
       inputHeight: { ...inputField$3, property: 'height' },
       inputBackgroundColor: { ...inputField$3, property: 'background-color' },
       inputBorderColor: { ...inputField$3, property: 'border-color' },
@@ -3772,12 +3829,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$n,
+    componentName: componentName$q,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$n, ComboBoxClass);
+customElements.define(componentName$q, ComboBoxClass);
 
 var CountryCodes = [
   {
@@ -5017,7 +5074,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$m = getComponentName('phone-field-internal');
+const componentName$p = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5029,11 +5086,11 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
 
-let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
+let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$3.observedAttributes || [], inputRelatedAttrs$1);
+    return [].concat(BaseInputClass$5.observedAttributes || [], inputRelatedAttrs$1);
   }
 
   constructor() {
@@ -5201,14 +5258,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   }
 };
 
-customElements.define(componentName$m, PhoneFieldInternal$1);
+customElements.define(componentName$p, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$l = getComponentName('phone-field');
+const componentName$o = getComponentName('phone-field');
 
-const customMixin$3 = (superclass) =>
+const customMixin$4 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -5220,15 +5277,15 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$m}
+				<${componentName$p}
 					tabindex="-1"
 					slot="input"
-				></${componentName$m}>
+				></${componentName$p}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$m);
+      this.inputElement = this.shadowRoot.querySelector(componentName$p);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5248,15 +5305,15 @@ const customMixin$3 = (superclass) =>
   };
 
 const {
-  host: host$6,
+  host: host$7,
   label: label$4,
   requiredIndicator: requiredIndicator$4,
   inputField: inputField$2,
   countryCodeInput,
   phoneInput: phoneInput$1,
-  separator,
-  errorMessage: errorMessage$4,
-  helperText: helperText$3,
+  separator: separator$1,
+  errorMessage: errorMessage$5,
+  helperText: helperText$4,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -5273,7 +5330,7 @@ const PhoneFieldClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$6,
+        host$7,
         inputField$2,
         {
           selector: TextFieldClass.componentName,
@@ -5286,31 +5343,31 @@ const PhoneFieldClass = compose(
       ],
       fontFamily: [
         label$4,
-        errorMessage$4,
-        helperText$3,
+        errorMessage$5,
+        helperText$4,
         {
           ...countryCodeInput,
           property: ComboBoxClass.cssVarList.overlay.fontFamily,
         },
       ],
       hostWidth: [
-        { ...host$6, property: 'width' },
+        { ...host$7, property: 'width' },
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
-      hostDirection: { ...host$6, property: 'direction' },
+      hostDirection: { ...host$7, property: 'direction' },
 
       inputBorderStyle: [
         { ...inputField$2, property: 'border-style' },
-        { ...separator, property: 'border-left-style' },
+        { ...separator$1, property: 'border-left-style' },
       ],
       inputBorderWidth: [
         { ...inputField$2, property: 'border-width' },
-        { ...separator, property: 'border-left-width' },
+        { ...separator$1, property: 'border-left-width' },
       ],
       inputBorderColor: [
         { ...inputField$2, property: 'border-color' },
-        { ...separator, property: 'border-left-color' },
+        { ...separator$1, property: 'border-left-color' },
       ],
       inputBorderRadius: { ...inputField$2, property: 'border-radius' },
 
@@ -5326,7 +5383,7 @@ const PhoneFieldClass = compose(
         { ...requiredIndicator$4, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
 
       inputValueTextColor: [
         { ...phoneInput$1, property: textVars$1.inputValueTextColor },
@@ -5348,7 +5405,7 @@ const PhoneFieldClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$3
+  customMixin$4
 )(
   createProxy({
     slots: [],
@@ -5424,17 +5481,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$l,
+    componentName: componentName$o,
   })
 );
 
-customElements.define(componentName$l, PhoneFieldClass);
+customElements.define(componentName$o, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$k = getComponentName('phone-field-internal-input-box');
+const componentName$n = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -5448,11 +5505,11 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
 
-class PhoneFieldInternal extends BaseInputClass$2 {
+class PhoneFieldInternal extends BaseInputClass$4 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$2.observedAttributes || [], observedAttributes$2);
+    return [].concat(BaseInputClass$4.observedAttributes || [], observedAttributes$2);
   }
 
   constructor() {
@@ -5587,13 +5644,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
   }
 }
 
-customElements.define(componentName$k, PhoneFieldInternal);
+customElements.define(componentName$n, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$j = getComponentName('phone-input-box-field');
+const componentName$m = getComponentName('phone-input-box-field');
 
-const customMixin$2 = (superclass) =>
+const customMixin$3 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -5605,15 +5662,15 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$k}
+				<${componentName$n}
 					tabindex="-1"
 					slot="input"
-				></${componentName$k}>
+				></${componentName$n}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$k);
+      this.inputElement = this.shadowRoot.querySelector(componentName$n);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5630,7 +5687,7 @@ const customMixin$2 = (superclass) =>
     }
   };
 
-const { host: host$5, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$3, helperText: helperText$2 } = {
+const { host: host$6, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -5644,17 +5701,17 @@ const PhoneFieldInputBoxClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$5,
+        host$6,
         inputField$1,
         {
           selector: TextFieldClass.componentName,
           property: TextFieldClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label$3, errorMessage$3, helperText$2],
-      hostWidth: { ...host$5, property: 'width' },
-      hostMinWidth: { ...host$5, property: 'min-width' },
-      hostDirection: { ...host$5, property: 'direction' },
+      fontFamily: [label$3, errorMessage$4, helperText$3],
+      hostWidth: { ...host$6, property: 'width' },
+      hostMinWidth: { ...host$6, property: 'min-width' },
+      hostDirection: { ...host$6, property: 'direction' },
 
       inputBorderStyle: { ...inputField$1, property: 'border-style' },
       inputBorderWidth: { ...inputField$1, property: 'border-width' },
@@ -5666,7 +5723,7 @@ const PhoneFieldInputBoxClass = compose(
         { ...requiredIndicator$3, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
 
       inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
 
@@ -5680,7 +5737,7 @@ const PhoneFieldInputBoxClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$2
+  customMixin$3
 )(
   createProxy({
     slots: [],
@@ -5746,17 +5803,17 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$j,
+    componentName: componentName$m,
   })
 );
 
-customElements.define(componentName$j, PhoneFieldInputBoxClass);
+customElements.define(componentName$m, PhoneFieldInputBoxClass);
 
-const componentName$i = getComponentName('new-password-internal');
+const componentName$l = getComponentName('new-password-internal');
 
-const componentName$h = getComponentName('new-password');
+const componentName$k = getComponentName('new-password');
 
-const customMixin$1 = (superclass) =>
+const customMixin$2 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
       super.init?.();
@@ -5764,16 +5821,16 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$i}
+			<${componentName$l}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$i}>
+			></${componentName$l}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$i);
+      this.inputElement = this.shadowRoot.querySelector(componentName$l);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5794,7 +5851,7 @@ const customMixin$1 = (superclass) =>
     }
   };
 
-const { host: host$4, label: label$2, internalInputsWrapper, errorMessage: errorMessage$2, helperText: helperText$1, passwordInput } = {
+const { host: host$5, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -5807,28 +5864,28 @@ const NewPasswordClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$4,
+        host$5,
         {},
         {
           selector: PasswordClass.componentName,
           property: PasswordClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label$2, errorMessage$2, helperText$1],
-      errorMessageTextColor: { ...errorMessage$2, property: 'color' },
-      hostWidth: { ...host$4, property: 'width' },
-      hostMinWidth: { ...host$4, property: 'min-width' },
+      fontFamily: [label$2, errorMessage$3, helperText$2],
+      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
+      hostWidth: { ...host$5, property: 'width' },
+      hostMinWidth: { ...host$5, property: 'min-width' },
       hostDirection: [
-        { ...host$4, property: 'direction' },
+        { ...host$5, property: 'direction' },
         { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
       ],
-      inputsRequiredIndicator: { ...host$4, property: 'content' },
+      inputsRequiredIndicator: { ...host$5, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
     },
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$1
+  customMixin$2
 )(
   createProxy({
     slots: [],
@@ -5880,7 +5937,7 @@ const NewPasswordClass = compose(
 		}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$h,
+    componentName: componentName$k,
   })
 );
 
@@ -5905,11 +5962,11 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
 
-class NewPasswordInternal extends BaseInputClass$1 {
+class NewPasswordInternal extends BaseInputClass$3 {
   static get observedAttributes() {
-    return ['has-confirm'].concat(BaseInputClass$1.observedAttributes || [], inputRelatedAttrs);
+    return ['has-confirm'].concat(BaseInputClass$3.observedAttributes || [], inputRelatedAttrs);
   }
 
   constructor() {
@@ -6070,16 +6127,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$i, NewPasswordInternal);
+customElements.define(componentName$l, NewPasswordInternal);
 
-customElements.define(componentName$h, NewPasswordClass);
+customElements.define(componentName$k, NewPasswordClass);
 
-const componentName$g = getComponentName('recaptcha');
+const componentName$j = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
-  componentName: componentName$g,
+  componentName: componentName$j,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -6231,7 +6288,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$g, RecaptchaClass);
+customElements.define(componentName$j, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -6245,7 +6302,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$f = getComponentName('upload-file');
+const componentName$i = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -6260,11 +6317,11 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$f, baseSelector: ':host > div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$i, baseSelector: ':host > div' });
 
-class RawUploadFile extends BaseInputClass {
+class RawUploadFile extends BaseInputClass$2 {
   static get observedAttributes() {
-    return observedAttributes.concat(BaseInputClass.observedAttributes || []);
+    return observedAttributes.concat(BaseInputClass$2.observedAttributes || []);
   }
 
   constructor() {
@@ -6432,7 +6489,7 @@ class RawUploadFile extends BaseInputClass {
 }
 
 const buttonVars = ButtonClass.cssVarList;
-const { host: host$3, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
+const { host: host$4, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '::slotted(*)' },
@@ -6451,11 +6508,11 @@ const UploadFileClass = compose(
       borderWidth: {},
       borderStyle: {},
       borderRadius: {},
-      hostHeight: { ...host$3, property: 'height' },
-      hostWidth: { ...host$3, property: 'width' },
+      hostHeight: { ...host$4, property: 'height' },
+      hostWidth: { ...host$4, property: 'width' },
       hostPadding: { property: 'padding' },
       hostDirection: [
-        { ...host$3, property: 'direction' },
+        { ...host$4, property: 'direction' },
         { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
       ],
       gap: { ...wrapper },
@@ -6475,7 +6532,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$f, UploadFileClass);
+customElements.define(componentName$i, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -6573,10 +6630,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$e = getComponentName('button-selection-group-internal');
+const componentName$h = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$e
+  componentName$h
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -6732,7 +6789,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
     }
   };
 
-const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$1 } = {
+const { host: host$3, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -6741,15 +6798,15 @@ const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, in
 };
 
 const buttonSelectionGroupMappings = {
-  hostWidth: { ...host$2, property: 'width' },
-  hostDirection: { ...host$2, property: 'direction' },
-  fontFamily: host$2,
+  hostWidth: { ...host$3, property: 'width' },
+  hostDirection: { ...host$3, property: 'direction' },
+  fontFamily: host$3,
   labelTextColor: [
     { ...label$1, property: 'color' },
     { ...requiredIndicator$1, property: 'color' },
   ],
   labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
-  errorMessageTextColor: { ...errorMessage$1, property: 'color' },
+  errorMessageTextColor: { ...errorMessage$2, property: 'color' },
   itemsSpacing: { ...internalWrapper, property: 'gap' },
 };
 
@@ -6808,7 +6865,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$d = getComponentName('button-selection-group');
+const componentName$g = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -6817,19 +6874,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$e}
+      <${componentName$h}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$e}>
+      </${componentName$h}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$e);
+      this.inputElement = this.shadowRoot.querySelector(componentName$h);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6854,16 +6911,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$d,
+    componentName: componentName$g,
   })
 );
 
-customElements.define(componentName$e, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$h, ButtonSelectionGroupInternalClass);
 
-const componentName$c = getComponentName('button-selection-group-item');
+const componentName$f = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$c,
+  componentName: componentName$f,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -6966,14 +7023,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$c, ButtonSelectionGroupItemClass);
+customElements.define(componentName$f, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$d, ButtonSelectionGroupClass);
+customElements.define(componentName$g, ButtonSelectionGroupClass);
 
-const componentName$b = getComponentName('button-multi-selection-group-internal');
+const componentName$e = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$b
+  componentName$e
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -7076,7 +7133,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$a = getComponentName('button-multi-selection-group');
+const componentName$d = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7085,19 +7142,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$b}
+      <${componentName$e}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$b}>
+      </${componentName$e}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$b);
+      this.inputElement = this.shadowRoot.querySelector(componentName$e);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -7122,13 +7179,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$a,
+    componentName: componentName$d,
   })
 );
 
-customElements.define(componentName$b, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$e, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$a, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$d, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7158,9 +7215,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$9 = getComponentName('grid-text-column');
+const componentName$c = getComponentName('grid-text-column');
 
-customElements.define(componentName$9, GridTextColumnClass);
+customElements.define(componentName$c, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7195,9 +7252,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$8 = getComponentName('grid-custom-column');
+const componentName$b = getComponentName('grid-custom-column');
 
-customElements.define(componentName$8, GridCustomColumnClass);
+customElements.define(componentName$b, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -7256,9 +7313,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$7 = getComponentName('grid-selection-column');
+const componentName$a = getComponentName('grid-selection-column');
 
-customElements.define(componentName$7, GridSelectionColumnClass);
+customElements.define(componentName$a, GridSelectionColumnClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -7270,7 +7327,7 @@ const isValidDataType = (data) => {
   return isValid;
 };
 
-const componentName$6 = getComponentName('grid');
+const componentName$9 = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -7430,7 +7487,7 @@ const GridMixin = (superclass) =>
   };
 
 const {
-  host: host$1,
+  host: host$2,
   headerRow,
   headerRowCell,
   contentRow,
@@ -7465,15 +7522,15 @@ const GridClass = compose(
       fontWeight: { ...contentRow },
       valueTextColor: { ...contentRow, property: 'color' },
       backgroundColor: [
-        { ...host$1, property: 'background-color' },
+        { ...host$2, property: 'background-color' },
         { ...contentRow, property: 'background-color' },
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      borderColor: { ...host$1, property: 'border-color' },
-      borderWidth: { ...host$1, property: 'border-width' },
-      borderStyle: { ...host$1, property: 'border-style' },
-      borderRadius: { ...host$1, property: 'border-radius' },
+      borderColor: { ...host$2, property: 'border-color' },
+      borderWidth: { ...host$2, property: 'border-width' },
+      borderStyle: { ...host$2, property: 'border-style' },
+      borderRadius: { ...host$2, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
       headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
@@ -7502,16 +7559,17 @@ const GridClass = compose(
       }
       vaadin-grid::part(selected-row-cell) {
         background-image: none;
+        box-shadow: none;
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$6,
+    componentName: componentName$9,
   })
 );
 
-customElements.define(componentName$6, GridClass);
+customElements.define(componentName$9, GridClass);
 
-const componentName$5 = getComponentName('multi-select-combo-box');
+const componentName$8 = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -7899,7 +7957,7 @@ const multiSelectComboBoxMixin = (superclass) =>
   };
 
 const {
-  host,
+  host: host$1,
   inputField,
   inputElement,
   placeholder,
@@ -7907,8 +7965,8 @@ const {
   clearButton,
   label,
   requiredIndicator,
-  helperText,
-  errorMessage,
+  helperText: helperText$1,
+  errorMessage: errorMessage$1,
   chip,
   chipLabel,
   overflowChipFirstBorder,
@@ -7937,17 +7995,17 @@ const {
 const MultiSelectComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host, property: 'width' },
-      hostDirection: { ...host, property: 'direction' },
+      hostWidth: { ...host$1, property: 'width' },
+      hostDirection: { ...host$1, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host],
+      fontSize: [{}, host$1],
       chipFontSize: { ...chipLabel, property: 'font-size' },
-      fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
+      fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
       labelTextColor: [
         { ...label, property: 'color' },
         { ...requiredIndicator, property: 'color' },
       ],
-      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
       inputHeight: { ...inputField, property: 'min-height' },
       inputBackgroundColor: { ...inputField, property: 'background-color' },
       inputBorderColor: { ...inputField, property: 'border-color' },
@@ -8115,16 +8173,16 @@ const MultiSelectComboBoxClass = compose(
     // 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$5,
+    componentName: componentName$8,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$5, MultiSelectComboBoxClass);
+customElements.define(componentName$8, MultiSelectComboBoxClass);
 
-const componentName$4 = getComponentName('badge');
+const componentName$7 = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -8172,11 +8230,11 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
 
-customElements.define(componentName$4, BadgeClass);
+customElements.define(componentName$7, BadgeClass);
 
-const componentName$3 = getComponentName('modal');
+const componentName$6 = getComponentName('modal');
 
-const customMixin = (superclass) =>
+const customMixin$1 = (superclass) =>
   class ModalMixinClass extends superclass {
     get opened() {
       return this.getAttribute('opened') === 'true';
@@ -8266,18 +8324,18 @@ const ModalClass = compose(
   }),
   draggableMixin,
   componentNameValidationMixin,
-  customMixin
+  customMixin$1
 )(
   createProxy({
     slots: [''],
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$3,
+    componentName: componentName$6,
   })
 );
 
-customElements.define(componentName$3, ModalClass);
+customElements.define(componentName$6, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -8288,7 +8346,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$2 = getComponentName('notification-card');
+const componentName$5 = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -8396,13 +8454,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$2,
+    componentName: componentName$5,
   })
 );
 
-customElements.define(componentName$2, NotificationCardClass);
+customElements.define(componentName$5, NotificationCardClass);
 
-const componentName$1 = getComponentName('notification');
+const componentName$4 = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -8497,101 +8555,635 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$1,
+    componentName: componentName$4,
   })
 );
 
-customElements.define(componentName$1, NotificationClass);
+customElements.define(componentName$4, NotificationClass);
 
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+const componentName$3 = getComponentName('mappings-field-internal');
 
-// lodash.set alternative
-const set = (obj, path, value) => {
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
 
-  pathArray.reduce((acc, key, i) => {
-    if (acc[key] === undefined) acc[key] = {};
-    if (i === pathArray.length - 1) acc[key] = value;
-    return acc[key];
-  }, obj);
+class MappingsFieldInternal extends BaseInputClass$1 {
+  #errorItem;
 
-  return obj;
-};
+  static get observedAttributes() {
+    return [].concat(BaseInputClass$1.observedAttributes || [], [
+      'label-value',
+      'label-attr',
+      'button-label',
+      'invalid',
+      'readonly',
+      'disabled',
+    ]);
+  }
 
-const transformTheme = (theme, path, getTransformation) => {
-  return Object.entries(theme).reduce((acc, [key, val]) => {
-    if (val?.constructor !== Object) {
-      return merge(acc, getTransformation(path.concat(key), val));
+  // eslint-disable-next-line class-methods-use-this
+  isValidDataType(data) {
+    try {
+      return data.every(
+        (obj) =>
+          typeof obj === 'object' &&
+          !Array.isArray(obj) &&
+          Object.getOwnPropertyNames(obj).length === 1 &&
+          typeof obj[Object.keys(obj)[0]] === 'string' &&
+          obj[Object.keys(obj)[0]].trim() !== ''
+      );
+    } catch (e) {
+      return false;
     }
-    return merge(acc, transformTheme(val, [...path, key], getTransformation));
-  }, {});
-};
-
-const stringifyArray = (strArr) =>
-  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+  }
 
-const getCssVarValue = (val) => {
-  switch (true) {
-    case Array.isArray(val):
-      return stringifyArray(val);
-    case isUrl(val):
-      return `url(${val})`;
-    default:
-      return val;
+  get labelValue() {
+    return this.getAttribute('label-value') || 'Value';
   }
-};
 
-const themeToCSSVarsObj = (theme) =>
-  transformTheme(theme, [], (path, val) => ({
-    [getVarName(path)]: getCssVarValue(val),
-  }));
+  get labelAttr() {
+    return this.getAttribute('label-attr') || 'Attribute';
+  }
 
-const getThemeRefs = (theme, prefix) =>
-  transformTheme(theme, [], (path) =>
-    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
-  );
+  get buttonLabel() {
+    return this.getAttribute('button-label') || 'Add mapping';
+  }
 
-const getThemeVars = (theme, prefix) =>
-  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+  get options() {
+    return this.getAttribute('options') || [];
+  }
 
-const globalsThemeToStyle = (theme, themeName = '') => {
-  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
-    (acc, entry) => `${acc}${entry.join(':')};\n`,
-    ''
-  );
+  addNewMappingItem() {
+    const newMappingItem = document.createElement('descope-mapping-item');
+    newMappingItem.setAttribute('bordered', 'true');
+    this.mappingsContainerEle.appendChild(newMappingItem);
+    forwardAttrs(this, newMappingItem, {
+      includeAttrs: ['size', 'full-width', 'separator', 'options', 'disabled'],
+    });
+    // This needs to be done with the timeout, otherwise the validation is performed
+    // before the new item is added and thus returns a wrong result
+    setTimeout(() => {
+      this.setCustomValidity('');
+      newMappingItem.addEventListener('mapping-item-removed', (e) => {
+        // If the removed item was the one that was invalid, we need to reset the invalid indication for the internal
+        if (newMappingItem === this.#errorItem) {
+          this.resetInvalidIndication();
+          this.#errorItem = undefined;
+        }
+        newMappingItem.remove();
+        this.setCustomValidity('');
+        e.stopPropagation();
+      });
+    }, 0);
+    return newMappingItem;
+  }
 
-  if (!themeName) return style;
+  get items() {
+    return Array.from(this.mappingsContainerEle.querySelectorAll('descope-mapping-item'));
+  }
 
-  return `*[data-theme="${themeName}"] {${style}}`;
-};
+  get value() {
+    return this.items.reduce((acc, item) => {
+      if (!item.value) {
+        return acc;
+      }
 
-const componentsThemeToStyleObj = (componentsTheme) =>
-  transformTheme(componentsTheme, [], (path, val) => {
-    const [component, ...restPath] = path;
-    const property = restPath.pop();
-    const componentName = getComponentName(component);
+      return [...acc, item.value];
+    }, []);
+  }
 
-    if (property === 'undefined') {
+  set value(mappings) {
+    if (!this.isValidDataType(mappings)) {
       // eslint-disable-next-line no-console
-      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+      console.error(
+        'received invalid value to set - should be an array of objects with one key-value pair'
+      );
+      return;
     }
 
-    // we need a support for portal components theme (e.g. overlay)
-    // this allows us to generate those themes under different sections
-    // if the theme has root level attribute that starts with #
-    // we are generating a new theme
-    let themeName = BASE_THEME_SECTION;
+    const currentItems = this.items;
 
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-      themeName = restPath.shift();
+    // Remove extra mapping items we don't need
+    if (currentItems.length > mappings.length) {
+      for (let i = mappings.length; i < currentItems.length; i++) {
+        this.mappingsContainerEle.removeChild(currentItems[i]);
+      }
     }
 
-    // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
-    // starts with underscore -> attribute selector
-    const attrsSelector = restPath.reduce((acc, section, idx) => {
-      if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
-
-      const nextSection = restPath[idx + 1];
+    // Add or update items
+    mappings.forEach((mapping, index) => {
+      const mappingItem = currentItems[index];
+      if (mappingItem) {
+        // Set existing item value
+        mappingItem.value = mapping;
+      } else {
+        // Add new item
+        const newMappingItem = this.addNewMappingItem();
+        // Setting the new item value needs to be done with the timeout,
+        // otherwise the value is not set correctly
+        setTimeout(() => {
+          newMappingItem.value = mapping;
+        }, 0);
+      }
+    });
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+      <div class="labels-container" part="labels"></div>
+      <div class="mappings-container"></div>
+      <div class="button-container"></div>
+    `;
+
+    this.labelsEle = this.querySelector('.labels-container');
+    this.mappingsContainerEle = this.querySelector('.mappings-container');
+    this.buttonContainer = this.querySelector('.button-container');
+  }
+
+  initLabels() {
+    this.labelsEle.innerHTML = `
+      <descope-text variant="body2" part="value-label">${this.labelValue}</descope-text>
+      <descope-text variant="body2" part="attr-label">${this.labelAttr}</descope-text>
+    `;
+  }
+
+  initAddButton() {
+    this.buttonContainer.innerHTML = `
+      <descope-button variant="link" mode="primary" disabled="${this.isDisabled}">
+        <vaadin-icon icon="vaadin:plus"></vaadin-icon>
+        ${this.buttonLabel}
+      </descope-button>
+    `;
+    const button = this.querySelector('descope-button');
+    button.onclick = () => {
+      this.addNewMappingItem();
+    };
+    forwardAttrs(this, button, {
+      includeAttrs: ['disabled'],
+    });
+  }
+
+  init() {
+    // This event listener needs to be placed before the super.init() call
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        const focusedElement =
+          this.#errorItem || this.items[0] || this.querySelector('descope-button');
+        focusedElement.focus();
+      }
+    });
+
+    super.init?.();
+    this.initLabels();
+    this.initAddButton();
+
+    // This event listener is responsible for removing the invalid attribute
+    // from the internal once the invalid item turns valid
+    this.addEventListener('input', () => {
+      const isErrorItemMounted = this.mappingsContainerEle.contains(this.#errorItem);
+      if (isErrorItemMounted && this.#errorItem?.checkValidity()) {
+        // Item has changed, it was invalid before and now it's valid
+        this.resetInvalidIndication();
+        this.#errorItem.removeAttribute('invalid');
+        this.#errorItem = undefined;
+      }
+    });
+  }
+
+  resetInvalidIndication() {
+    this.removeAttribute('invalid');
+  }
+
+  getValidity() {
+    const errorItem = this.items.find((item) => !item.checkValidity());
+    if (errorItem) {
+      return errorItem.validity;
+    }
+
+    return {};
+  }
+
+  #handleInvalidMappings(isInvalid) {
+    if (isInvalid) {
+      this.#errorItem = this.items.find((item) => !item.checkValidity());
+      this.#errorItem?.reportValidity();
+      this.#errorItem?.setAttribute('invalid', 'true');
+    }
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (attrName === 'label-value' || attrName === 'label-attr') {
+      this.initLabels();
+    }
+    if (attrName === 'button-label') {
+      this.initAddButton();
+    }
+    if (attrName === 'invalid') {
+      this.#handleInvalidMappings(newValue === 'true');
+    }
+    if (attrName === 'readonly') {
+      this.toggleAttribute('inert', newValue === 'true');
+    }
+  }
+}
+
+const componentName$2 = getComponentName('mappings-field');
+
+const SEPARATOR_WIDTH = '80px';
+const REMOVE_BUTTON_WIDTH = '60px';
+
+const customMixin = (superclass) =>
+  class MappingsFieldMixinClass extends superclass {
+    get defaultValues() {
+      const defaultValuesAttr = this.getAttribute('default-values');
+      if (defaultValuesAttr) {
+        try {
+          return JSON.parse(defaultValuesAttr);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "default-values" -', e.message);
+        }
+      }
+      return [];
+    }
+
+    setDefaultValues() {
+      const initialDefaultValues = this.defaultValues;
+      if (Object.keys(initialDefaultValues).length > 0) {
+        this.inputElement.value = initialDefaultValues;
+      }
+    }
+
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${componentName$3}
+        tabindex="-1"
+      ></${componentName$3}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(componentName$3);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'size',
+          'full-width',
+          'label-value',
+          'label-attr',
+          'button-label',
+          'separator',
+          'options',
+          'default-values',
+          'invalid',
+          'readonly',
+          'disabled',
+        ],
+      });
+
+      this.setDefaultValues();
+    }
+  };
+
+const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLabel, separator } = {
+  host: { selector: () => ':host' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+  mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
+  labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
+  valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
+  attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
+  separator: { selector: 'descope-mapping-item::part(separator)' },
+};
+
+const MappingsFieldClass = 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, { ...separator, property: 'margin-top' }],
+      fontFamily: [helperText, errorMessage, labels],
+      separatorFontSize: { ...separator, property: 'font-size' },
+      labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
+      itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
+      valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
+      attrLabelMinWidth: { ...attrLabel, property: 'min-width' },
+    },
+  }),
+  draggableMixin,
+  composedProxyInputMixin({
+    proxyProps: ['value', 'selectionStart'],
+    inputEvent: 'input',
+    proxyParentValidation: true,
+  }),
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-custom-field',
+    style: () => `
+      :host {
+        display: inline-flex;
+        max-width: 100%;
+        direction: ltr;
+      }
+      vaadin-custom-field {
+        line-height: unset;
+        width: 100%;
+      }
+
+      descope-mappings-field-internal [part="labels"] {
+        margin-bottom: 0.5em;
+        display: grid;
+        grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
+      }
+
+      descope-mappings-field-internal [part="labels"] [part="value-label"],
+      descope-mappings-field-internal [part="labels"] [part="attr-label"] {
+        ${TextClass.cssVarList.fontWeight}: 500;
+      }
+
+      descope-mappings-field-internal [part="labels"] [part="value-label"] {
+        grid-column: 1 / span 1;
+      }
+
+      descope-mappings-field-internal [part="labels"] [part="attr-label"] {
+        grid-column: 3 / span 1;
+      }
+
+      descope-mapping-item::part(wrapper) {
+        display: grid;
+        grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
+      }
+    `,
+    excludeAttrsSync: [
+      'tabindex',
+      'label-value',
+      'label-attr',
+      'button-label',
+      'options',
+      'error-message',
+    ],
+    componentName: componentName$2,
+  })
+);
+
+customElements.define(componentName$3, MappingsFieldInternal);
+
+const componentName$1 = getComponentName('mapping-item');
+
+const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
+
+const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
+
+class MappingItem extends BaseInputClass {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], inputAttrs, [
+      'separator',
+      'options',
+      'invalid',
+      'disabled',
+    ]);
+  }
+
+  get separator() {
+    return this.getAttribute('separator') || 'map to';
+  }
+
+  get value() {
+    const attributeValue = this.attributeInput.value;
+    const inputValue = this.valueInput.value;
+    if (attributeValue && inputValue) {
+      return { [attributeValue]: inputValue };
+    }
+    return null;
+  }
+
+  set value(mapping) {
+    if (Object.entries(mapping).length !== 1) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'descope-mapping item expected expects only one key-value pair in the value but received: ',
+        mapping
+      );
+      return;
+    }
+    const [attribute, value] = Object.entries(mapping)[0];
+    this.valueInput.value = value;
+    this.attributeInput.value = attribute;
+    // The event needs to be dispatched to trigger the validation if setting the value externally
+    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <style>
+        .wrapper {
+          display: flex;
+        }
+        .separator {
+          text-align: center;
+          flex-shrink: 0;
+        }
+      </style>
+      <div class="wrapper" part="wrapper">
+        <descope-text-field required="true"></descope-text-field>
+        <div class="separator" part="separator">${this.separator}</div>
+        <descope-combo-box
+          item-label-path="data-name"
+          item-value-path="data-id"
+          required="true"
+        >
+        </descope-combo-box>
+        <descope-button variant="link" mode="primary">
+          <vaadin-icon icon="vaadin:minus"></vaadin-icon>
+        </descope-button>
+      </div>
+	`;
+    this.valueInput = this.shadowRoot.querySelector('descope-text-field');
+    this.attributeInput = this.shadowRoot.querySelector('descope-combo-box');
+    this.inputs = [this.valueInput, this.attributeInput];
+    this.removeButton = this.shadowRoot.querySelector('descope-button');
+
+    forwardAttrs(this, this.valueInput, {
+      includeAttrs: inputAttrs,
+    });
+    forwardAttrs(this, this.attributeInput, {
+      includeAttrs: [...inputAttrs, 'options'],
+      mapAttrs: { options: 'data' },
+    });
+    forwardAttrs(this, this.removeButton, {
+      includeAttrs: ['disabled'],
+    });
+  }
+
+  initRemoveButton() {
+    this.removeButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('mapping-item-removed'))
+    );
+  }
+
+  init() {
+    super.init?.();
+    this.initRemoveButton();
+  }
+
+  getValidity() {
+    const attributeValue = this.attributeInput.value;
+    const inputValue = this.valueInput.value;
+    if (!attributeValue || !inputValue) {
+      return { badInput: true };
+    }
+    return {};
+  }
+
+  reportValidity() {
+    this.inputs.forEach((input) => input.reportValidity());
+  }
+
+  focus() {
+    const focusedElement =
+      this.checkValidity() || !this.valueInput.checkValidity()
+        ? this.valueInput
+        : this.attributeInput;
+    focusedElement.focus();
+  }
+
+  handleSeparatorChange() {
+    this.shadowRoot.querySelector('.separator').textContent = this.separator;
+  }
+
+  #handleInvalidMapping(invalid) {
+    if (invalid === 'true') {
+      const inputValue = this.valueInput.value;
+      if (!inputValue) {
+        this.valueInput.setAttribute('invalid', 'true');
+        this.valueInput.setAttribute('error-message', this.defaultErrorMsgValueMissing);
+      }
+
+      const attributeValue = this.attributeInput.value;
+      if (!attributeValue) {
+        this.attributeInput.setAttribute('invalid', 'true');
+        this.attributeInput.setAttribute('error-message', this.defaultErrorMsgValueMissing);
+      }
+    }
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (attrName === 'separator') {
+      this.handleSeparatorChange();
+    }
+
+    if (attrName === 'invalid') {
+      this.#handleInvalidMapping(newValue);
+    }
+  }
+}
+
+customElements.define(componentName$1, MappingItem);
+
+customElements.define(componentName$2, MappingsFieldClass);
+
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+
+// lodash.set alternative
+const set = (obj, path, value) => {
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+
+  pathArray.reduce((acc, key, i) => {
+    if (acc[key] === undefined) acc[key] = {};
+    if (i === pathArray.length - 1) acc[key] = value;
+    return acc[key];
+  }, obj);
+
+  return obj;
+};
+
+const transformTheme = (theme, path, getTransformation) => {
+  return Object.entries(theme).reduce((acc, [key, val]) => {
+    if (val?.constructor !== Object) {
+      return merge(acc, getTransformation(path.concat(key), val));
+    }
+    return merge(acc, transformTheme(val, [...path, key], getTransformation));
+  }, {});
+};
+
+const stringifyArray = (strArr) =>
+  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+
+const getCssVarValue = (val) => {
+  switch (true) {
+    case Array.isArray(val):
+      return stringifyArray(val);
+    case isUrl(val):
+      return `url(${val})`;
+    default:
+      return val;
+  }
+};
+
+const themeToCSSVarsObj = (theme) =>
+  transformTheme(theme, [], (path, val) => ({
+    [getVarName(path)]: getCssVarValue(val),
+  }));
+
+const getThemeRefs = (theme, prefix) =>
+  transformTheme(theme, [], (path) =>
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+  );
+
+const getThemeVars = (theme, prefix) =>
+  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+
+const globalsThemeToStyle = (theme, themeName = '') => {
+  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
+    (acc, entry) => `${acc}${entry.join(':')};\n`,
+    ''
+  );
+
+  if (!themeName) return style;
+
+  return `*[data-theme="${themeName}"] {${style}}`;
+};
+
+const componentsThemeToStyleObj = (componentsTheme) =>
+  transformTheme(componentsTheme, [], (path, val) => {
+    const [component, ...restPath] = path;
+    const property = restPath.pop();
+    const componentName = getComponentName(component);
+
+    if (property === 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+    }
+
+    // we need a support for portal components theme (e.g. overlay)
+    // this allows us to generate those themes under different sections
+    // if the theme has root level attribute that starts with #
+    // we are generating a new theme
+    let themeName = BASE_THEME_SECTION;
+
+    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+      themeName = restPath.shift();
+    }
+
+    // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
+    // starts with underscore -> attribute selector
+    const attrsSelector = restPath.reduce((acc, section, idx) => {
+      if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+
+      const nextSection = restPath[idx + 1];
 
       if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
         // eslint-disable-next-line no-console
@@ -8873,33 +9465,33 @@ const globals = {
   fonts,
   direction,
 };
-const vars$y = getThemeVars(globals);
+const vars$z = getThemeVars(globals);
 
-const globalRefs$h = getThemeRefs(globals);
+const globalRefs$i = getThemeRefs(globals);
 const compVars$4 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$h.colors.primary,
-  secondary: globalRefs$h.colors.secondary,
-  success: globalRefs$h.colors.success,
-  error: globalRefs$h.colors.error,
-  surface: globalRefs$h.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$I);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$L);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$4.fontFamily]: globalRefs$h.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$h.direction,
+  [compVars$4.hostDirection]: globalRefs$i.direction,
 
-  [compVars$4.borderRadius]: globalRefs$h.radius.sm,
-  [compVars$4.borderWidth]: globalRefs$h.border.xs,
+  [compVars$4.borderRadius]: globalRefs$i.radius.sm,
+  [compVars$4.borderWidth]: globalRefs$i.border.xs,
   [compVars$4.borderStyle]: 'solid',
   [compVars$4.borderColor]: 'transparent',
 
@@ -8942,10 +9534,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$h.colors.surface.light,
-    [helperVars$3.dark]: globalRefs$h.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$h.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$h.colors.surface.main,
+    [helperVars$3.main]: globalRefs$i.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$i.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$i.colors.surface.main,
   },
 
   variant: {
@@ -8993,7 +9585,7 @@ const button = {
   },
 };
 
-const vars$x = {
+const vars$y = {
   ...compVars$4,
   ...helperVars$3,
 };
@@ -9001,25 +9593,25 @@ const vars$x = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$x
+  vars: vars$y
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$g = getThemeRefs(globals);
+const globalRefs$h = getThemeRefs(globals);
 
-const [theme$1, refs, vars$w] = createHelperVars(
+const [theme$1, refs, vars$x] = createHelperVars(
   {
-    labelTextColor: globalRefs$g.colors.surface.dark,
-    valueTextColor: globalRefs$g.colors.surface.contrast,
-    placeholderTextColor: globalRefs$g.colors.surface.dark,
+    labelTextColor: globalRefs$h.colors.surface.dark,
+    valueTextColor: globalRefs$h.colors.surface.contrast,
+    placeholderTextColor: globalRefs$h.colors.surface.dark,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$g.colors.error.main,
+    errorMessageTextColor: globalRefs$h.colors.error.main,
 
-    borderWidth: globalRefs$g.border.xs,
-    borderRadius: globalRefs$g.radius.xs,
+    borderWidth: globalRefs$h.border.xs,
+    borderRadius: globalRefs$h.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$g.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
@@ -9030,11 +9622,11 @@ const [theme$1, refs, vars$w] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$g.colors.surface.main,
+    backgroundColor: globalRefs$h.colors.surface.main,
 
-    fontFamily: globalRefs$g.fonts.font1.family,
+    fontFamily: globalRefs$h.fonts.font1.family,
 
-    direction: globalRefs$g.direction,
+    direction: globalRefs$h.direction,
 
     overlayOpacity: '0.3',
 
@@ -9050,27 +9642,27 @@ const [theme$1, refs, vars$w] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$g.colors.surface.light,
+      outlineColor: globalRefs$h.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$g.colors.error.main,
+        outlineColor: globalRefs$h.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$g.border.xs,
-      borderColor: globalRefs$g.colors.surface.light,
+      outlineWidth: globalRefs$h.border.xs,
+      borderColor: globalRefs$h.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$g.colors.error.main,
+        borderColor: globalRefs$h.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$g.colors.surface.light,
-      borderColor: globalRefs$g.colors.surface.light,
-      valueTextColor: globalRefs$g.colors.surface.light,
-      placeholderTextColor: globalRefs$g.colors.surface.light,
-      backgroundColor: globalRefs$g.colors.surface.main,
+      labelTextColor: globalRefs$h.colors.surface.light,
+      borderColor: globalRefs$h.colors.surface.light,
+      valueTextColor: globalRefs$h.colors.surface.light,
+      placeholderTextColor: globalRefs$h.colors.surface.light,
+      backgroundColor: globalRefs$h.colors.surface.main,
     },
   },
   componentName
@@ -9080,22 +9672,63 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$w
+  vars: vars$x
 });
 
-const vars$v = TextFieldClass.cssVarList;
+const vars$w = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$w.hostWidth]: refs.width,
+  [vars$w.hostMinWidth]: refs.minWidth,
+  [vars$w.hostDirection]: refs.direction,
+  [vars$w.fontSize]: refs.fontSize,
+  [vars$w.fontFamily]: refs.fontFamily,
+  [vars$w.labelTextColor]: refs.labelTextColor,
+  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$w.inputValueTextColor]: refs.valueTextColor,
+  [vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$w.inputBorderWidth]: refs.borderWidth,
+  [vars$w.inputBorderStyle]: refs.borderStyle,
+  [vars$w.inputBorderColor]: refs.borderColor,
+  [vars$w.inputBorderRadius]: refs.borderRadius,
+  [vars$w.inputOutlineWidth]: refs.outlineWidth,
+  [vars$w.inputOutlineStyle]: refs.outlineStyle,
+  [vars$w.inputOutlineColor]: refs.outlineColor,
+  [vars$w.inputOutlineOffset]: refs.outlineOffset,
+  [vars$w.inputBackgroundColor]: refs.backgroundColor,
+  [vars$w.inputHeight]: refs.inputHeight,
+  [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
+  textAlign: {
+    right: { [vars$w.inputTextAlign]: 'right' },
+    left: { [vars$w.inputTextAlign]: 'left' },
+    center: { [vars$w.inputTextAlign]: 'center' },
+  },
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$w
+});
+
+const globalRefs$g = getThemeRefs(globals);
+const vars$v = PasswordClass.cssVarList;
+
+const password = {
   [vars$v.hostWidth]: refs.width,
-  [vars$v.hostMinWidth]: refs.minWidth,
   [vars$v.hostDirection]: refs.direction,
   [vars$v.fontSize]: refs.fontSize,
   [vars$v.fontFamily]: refs.fontFamily,
   [vars$v.labelTextColor]: refs.labelTextColor,
+  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$v.inputHeight]: refs.inputHeight,
+  [vars$v.inputBackgroundColor]: refs.backgroundColor,
   [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$v.inputValueTextColor]: refs.valueTextColor,
-  [vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$v.inputBorderWidth]: refs.borderWidth,
   [vars$v.inputBorderStyle]: refs.borderStyle,
   [vars$v.inputBorderColor]: refs.borderColor,
@@ -9104,39 +9737,29 @@ const textField = {
   [vars$v.inputOutlineStyle]: refs.outlineStyle,
   [vars$v.inputOutlineColor]: refs.outlineColor,
   [vars$v.inputOutlineOffset]: refs.outlineOffset,
-  [vars$v.inputBackgroundColor]: refs.backgroundColor,
-  [vars$v.inputHeight]: refs.inputHeight,
-  [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
-  textAlign: {
-    right: { [vars$v.inputTextAlign]: 'right' },
-    left: { [vars$v.inputTextAlign]: 'left' },
-    center: { [vars$v.inputTextAlign]: 'center' },
-  },
+  [vars$v.revealButtonOffset]: globalRefs$g.spacing.md,
+  [vars$v.revealButtonSize]: refs.toggleButtonSize,
+  [vars$v.revealButtonColor]: refs.placeholderTextColor,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$v
 });
 
-const globalRefs$f = getThemeRefs(globals);
-const vars$u = PasswordClass.cssVarList;
+const vars$u = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$u.hostWidth]: refs.width,
+  [vars$u.hostMinWidth]: refs.minWidth,
   [vars$u.hostDirection]: refs.direction,
   [vars$u.fontSize]: refs.fontSize,
   [vars$u.fontFamily]: refs.fontFamily,
   [vars$u.labelTextColor]: refs.labelTextColor,
   [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$u.inputHeight]: refs.inputHeight,
-  [vars$u.inputBackgroundColor]: refs.backgroundColor,
-  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$u.inputValueTextColor]: refs.valueTextColor,
-  [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$u.inputBorderWidth]: refs.borderWidth,
   [vars$u.inputBorderStyle]: refs.borderStyle,
   [vars$u.inputBorderColor]: refs.borderColor,
@@ -9145,20 +9768,21 @@ const password = {
   [vars$u.inputOutlineStyle]: refs.outlineStyle,
   [vars$u.inputOutlineColor]: refs.outlineColor,
   [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.revealButtonOffset]: globalRefs$f.spacing.md,
-  [vars$u.revealButtonSize]: refs.toggleButtonSize,
-  [vars$u.revealButtonColor]: refs.placeholderTextColor,
+  [vars$u.inputBackgroundColor]: refs.backgroundColor,
+  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$u.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$u
 });
 
-const vars$t = NumberFieldClass.cssVarList;
+const vars$t = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$t.hostWidth]: refs.width,
   [vars$t.hostMinWidth]: refs.minWidth,
   [vars$t.hostDirection]: refs.direction,
@@ -9167,6 +9791,7 @@ const numberField = {
   [vars$t.labelTextColor]: refs.labelTextColor,
   [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$t.inputValueTextColor]: refs.valueTextColor,
+  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$t.inputBorderWidth]: refs.borderWidth,
   [vars$t.inputBorderStyle]: refs.borderStyle,
@@ -9177,200 +9802,167 @@ const numberField = {
   [vars$t.inputOutlineColor]: refs.outlineColor,
   [vars$t.inputOutlineOffset]: refs.outlineOffset,
   [vars$t.inputBackgroundColor]: refs.backgroundColor,
-  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$t.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$t
 });
 
-const vars$s = EmailFieldClass.cssVarList;
+const vars$s = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [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.inputBackgroundColor]: refs.backgroundColor,
   [vars$s.inputValueTextColor]: refs.valueTextColor,
-  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$s.inputBorderRadius]: refs.borderRadius,
   [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.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$s.inputHeight]: refs.inputHeight,
+  [vars$s.inputResizeType]: 'vertical',
+  [vars$s.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$s.inputTextAlign]: 'right' },
+    left: { [vars$s.inputTextAlign]: 'left' },
+    center: { [vars$s.inputTextAlign]: 'center' },
+  },
+
+  _readonly: {
+    [vars$s.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$s
 });
 
-const vars$r = TextAreaClass.cssVarList;
+const vars$r = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [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.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$r.labelFontWeight]: '400',
+  [vars$r.labelLineHeight]: checkboxSize,
+  [vars$r.labelSpacing]: '1em',
   [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$r.inputBackgroundColor]: refs.backgroundColor,
-  [vars$r.inputValueTextColor]: refs.valueTextColor,
-  [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$r.inputOutlineWidth]: refs.outlineWidth,
+  [vars$r.inputOutlineOffset]: refs.outlineOffset,
+  [vars$r.inputOutlineColor]: refs.outlineColor,
+  [vars$r.inputOutlineStyle]: refs.outlineStyle,
   [vars$r.inputBorderRadius]: refs.borderRadius,
+  [vars$r.inputBorderColor]: refs.borderColor,
   [vars$r.inputBorderWidth]: refs.borderWidth,
   [vars$r.inputBorderStyle]: refs.borderStyle,
-  [vars$r.inputBorderColor]: refs.borderColor,
-  [vars$r.inputOutlineWidth]: refs.outlineWidth,
-  [vars$r.inputOutlineStyle]: refs.outlineStyle,
-  [vars$r.inputOutlineColor]: refs.outlineColor,
-  [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.inputResizeType]: 'vertical',
-  [vars$r.inputMinHeight]: '5em',
-  textAlign: {
-    right: { [vars$r.inputTextAlign]: 'right' },
-    left: { [vars$r.inputTextAlign]: 'left' },
-    center: { [vars$r.inputTextAlign]: 'center' },
+  [vars$r.inputBackgroundColor]: refs.backgroundColor,
+  [vars$r.inputSize]: checkboxSize,
+
+  _checked: {
+    [vars$r.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$r.inputResizeType]: 'none',
+  _disabled: {
+    [vars$r.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$r
 });
 
-const vars$q = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$f = getThemeRefs(globals);
+const vars$q = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [vars$q.hostWidth]: refs.width,
   [vars$q.hostDirection]: refs.direction,
   [vars$q.fontSize]: refs.fontSize,
   [vars$q.fontFamily]: refs.fontFamily,
-  [vars$q.labelTextColor]: refs.labelTextColor,
-  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$q.labelFontWeight]: '400',
-  [vars$q.labelLineHeight]: checkboxSize,
-  [vars$q.labelSpacing]: '1em',
-  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$q.inputOutlineWidth]: refs.outlineWidth,
   [vars$q.inputOutlineOffset]: refs.outlineOffset,
   [vars$q.inputOutlineColor]: refs.outlineColor,
   [vars$q.inputOutlineStyle]: refs.outlineStyle,
-  [vars$q.inputBorderRadius]: refs.borderRadius,
-  [vars$q.inputBorderColor]: refs.borderColor,
-  [vars$q.inputBorderWidth]: refs.borderWidth,
-  [vars$q.inputBorderStyle]: refs.borderStyle,
-  [vars$q.inputBackgroundColor]: refs.backgroundColor,
-  [vars$q.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars$q.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$q.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$q
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
 
-const globalRefs$e = getThemeRefs(globals);
-const vars$p = SwitchToggleClass.cssVarList;
+  [vars$q.trackBorderStyle]: refs.borderStyle,
+  [vars$q.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$q.trackBorderColor]: refs.borderColor,
+  [vars$q.trackBackgroundColor]: refs.backgroundColor,
+  [vars$q.trackBorderRadius]: globalRefs$f.radius.md,
+  [vars$q.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$q.trackHeight]: checkboxHeight,
+
+  [vars$q.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$q.knobRadius]: '50%',
+  [vars$q.knobTopOffset]: '1px',
+  [vars$q.knobLeftOffset]: knobMargin,
+  [vars$q.knobColor]: refs.labelTextColor,
+  [vars$q.knobTransitionDuration]: '0.3s',
 
-const switchToggle = {
-  [vars$p.hostWidth]: refs.width,
-  [vars$p.hostDirection]: refs.direction,
-  [vars$p.fontSize]: refs.fontSize,
-  [vars$p.fontFamily]: refs.fontFamily,
-
-  [vars$p.inputOutlineWidth]: refs.outlineWidth,
-  [vars$p.inputOutlineOffset]: refs.outlineOffset,
-  [vars$p.inputOutlineColor]: refs.outlineColor,
-  [vars$p.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$p.trackBorderStyle]: refs.borderStyle,
-  [vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$p.trackBorderColor]: refs.borderColor,
-  [vars$p.trackBackgroundColor]: refs.backgroundColor,
-  [vars$p.trackBorderRadius]: globalRefs$e.radius.md,
-  [vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$p.trackHeight]: checkboxHeight,
-
-  [vars$p.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$p.knobRadius]: '50%',
-  [vars$p.knobTopOffset]: '1px',
-  [vars$p.knobLeftOffset]: knobMargin,
-  [vars$p.knobColor]: refs.labelTextColor,
-  [vars$p.knobTransitionDuration]: '0.3s',
-
-  [vars$p.labelTextColor]: refs.labelTextColor,
-  [vars$p.labelFontWeight]: '400',
-  [vars$p.labelLineHeight]: '1.35em',
-  [vars$p.labelSpacing]: '1em',
-  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$q.labelTextColor]: refs.labelTextColor,
+  [vars$q.labelFontWeight]: '400',
+  [vars$q.labelLineHeight]: '1.35em',
+  [vars$q.labelSpacing]: '1em',
+  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$p.trackBorderColor]: refs.borderColor,
-    [vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
-    [vars$p.knobColor]: refs.valueTextColor,
-    [vars$p.knobTextColor]: refs.valueTextColor,
+    [vars$q.trackBorderColor]: refs.borderColor,
+    [vars$q.knobLeftOffset]: `calc(100% - var(${vars$q.knobSize}) - ${knobMargin})`,
+    [vars$q.knobColor]: refs.valueTextColor,
+    [vars$q.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$p.knobColor]: globalRefs$e.colors.surface.light,
-    [vars$p.trackBorderColor]: globalRefs$e.colors.surface.light,
-    [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
-    [vars$p.labelTextColor]: refs.labelTextColor,
+    [vars$q.knobColor]: globalRefs$f.colors.surface.light,
+    [vars$q.trackBorderColor]: globalRefs$f.colors.surface.light,
+    [vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
+    [vars$q.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$p.knobColor]: globalRefs$e.colors.surface.light,
-      [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+      [vars$q.knobColor]: globalRefs$f.colors.surface.light,
+      [vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$p.trackBorderColor]: globalRefs$e.colors.error.main,
-    [vars$p.knobColor]: globalRefs$e.colors.error.main,
+    [vars$q.trackBorderColor]: globalRefs$f.colors.error.main,
+    [vars$q.knobColor]: globalRefs$f.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$p
+  vars: vars$q
 });
 
-const globalRefs$d = getThemeRefs(globals);
+const globalRefs$e = getThemeRefs(globals);
 
 const compVars$3 = ContainerClass.cssVarList;
 
@@ -9392,7 +9984,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$C
+  componentName$F
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -9402,10 +9994,10 @@ const container = {
 
   [compVars$3.hostWidth]: '100%',
   [compVars$3.boxShadow]: 'none',
-  [compVars$3.backgroundColor]: globalRefs$d.colors.surface.main,
-  [compVars$3.color]: globalRefs$d.colors.surface.contrast,
+  [compVars$3.backgroundColor]: globalRefs$e.colors.surface.main,
+  [compVars$3.color]: globalRefs$e.colors.surface.contrast,
   [compVars$3.borderRadius]: '0px',
-  [compVars$3.hostDirection]: globalRefs$d.direction,
+  [compVars$3.hostDirection]: globalRefs$e.direction,
 
   verticalPadding: {
     sm: { [compVars$3.verticalPadding]: '5px' },
@@ -9451,34 +10043,34 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.md} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.md} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide['2xl']} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
   borderRadius: {
-    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'] },
+    sm: { [compVars$3.borderRadius]: globalRefs$e.radius.sm },
+    md: { [compVars$3.borderRadius]: globalRefs$e.radius.md },
+    lg: { [compVars$3.borderRadius]: globalRefs$e.radius.lg },
+    xl: { [compVars$3.borderRadius]: globalRefs$e.radius.xl },
+    '2xl': { [compVars$3.borderRadius]: globalRefs$e.radius['2xl'] },
+    '3xl': { [compVars$3.borderRadius]: globalRefs$e.radius['3xl'] },
   },
 };
 
-const vars$o = {
+const vars$p = {
   ...compVars$3,
   ...helperVars$2,
 };
@@ -9486,166 +10078,166 @@ const vars$o = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$o
+  vars: vars$p
 });
 
-const vars$n = LogoClass.cssVarList;
+const vars$o = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$n
+  vars: vars$o
 });
 
-const vars$m = TotpImageClass.cssVarList;
+const vars$n = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$m
+  vars: vars$n
 });
 
-const vars$l = NotpImageClass.cssVarList;
+const vars$m = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$l
+  vars: vars$m
 });
 
-const globalRefs$c = getThemeRefs(globals);
-const vars$k = TextClass.cssVarList;
+const globalRefs$d = getThemeRefs(globals);
+const vars$l = TextClass.cssVarList;
 
 const text = {
-  [vars$k.hostDirection]: globalRefs$c.direction,
-  [vars$k.textLineHeight]: '1.35em',
-  [vars$k.textAlign]: 'left',
-  [vars$k.textColor]: globalRefs$c.colors.surface.dark,
+  [vars$l.hostDirection]: globalRefs$d.direction,
+  [vars$l.textLineHeight]: '1.35em',
+  [vars$l.textAlign]: 'left',
+  [vars$l.textColor]: globalRefs$d.colors.surface.dark,
   variant: {
     h1: {
-      [vars$k.fontSize]: globalRefs$c.typography.h1.size,
-      [vars$k.fontWeight]: globalRefs$c.typography.h1.weight,
-      [vars$k.fontFamily]: globalRefs$c.typography.h1.font,
+      [vars$l.fontSize]: globalRefs$d.typography.h1.size,
+      [vars$l.fontWeight]: globalRefs$d.typography.h1.weight,
+      [vars$l.fontFamily]: globalRefs$d.typography.h1.font,
     },
     h2: {
-      [vars$k.fontSize]: globalRefs$c.typography.h2.size,
-      [vars$k.fontWeight]: globalRefs$c.typography.h2.weight,
-      [vars$k.fontFamily]: globalRefs$c.typography.h2.font,
+      [vars$l.fontSize]: globalRefs$d.typography.h2.size,
+      [vars$l.fontWeight]: globalRefs$d.typography.h2.weight,
+      [vars$l.fontFamily]: globalRefs$d.typography.h2.font,
     },
     h3: {
-      [vars$k.fontSize]: globalRefs$c.typography.h3.size,
-      [vars$k.fontWeight]: globalRefs$c.typography.h3.weight,
-      [vars$k.fontFamily]: globalRefs$c.typography.h3.font,
+      [vars$l.fontSize]: globalRefs$d.typography.h3.size,
+      [vars$l.fontWeight]: globalRefs$d.typography.h3.weight,
+      [vars$l.fontFamily]: globalRefs$d.typography.h3.font,
     },
     subtitle1: {
-      [vars$k.fontSize]: globalRefs$c.typography.subtitle1.size,
-      [vars$k.fontWeight]: globalRefs$c.typography.subtitle1.weight,
-      [vars$k.fontFamily]: globalRefs$c.typography.subtitle1.font,
+      [vars$l.fontSize]: globalRefs$d.typography.subtitle1.size,
+      [vars$l.fontWeight]: globalRefs$d.typography.subtitle1.weight,
+      [vars$l.fontFamily]: globalRefs$d.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$k.fontSize]: globalRefs$c.typography.subtitle2.size,
-      [vars$k.fontWeight]: globalRefs$c.typography.subtitle2.weight,
-      [vars$k.fontFamily]: globalRefs$c.typography.subtitle2.font,
+      [vars$l.fontSize]: globalRefs$d.typography.subtitle2.size,
+      [vars$l.fontWeight]: globalRefs$d.typography.subtitle2.weight,
+      [vars$l.fontFamily]: globalRefs$d.typography.subtitle2.font,
     },
     body1: {
-      [vars$k.fontSize]: globalRefs$c.typography.body1.size,
-      [vars$k.fontWeight]: globalRefs$c.typography.body1.weight,
-      [vars$k.fontFamily]: globalRefs$c.typography.body1.font,
+      [vars$l.fontSize]: globalRefs$d.typography.body1.size,
+      [vars$l.fontWeight]: globalRefs$d.typography.body1.weight,
+      [vars$l.fontFamily]: globalRefs$d.typography.body1.font,
     },
     body2: {
-      [vars$k.fontSize]: globalRefs$c.typography.body2.size,
-      [vars$k.fontWeight]: globalRefs$c.typography.body2.weight,
-      [vars$k.fontFamily]: globalRefs$c.typography.body2.font,
+      [vars$l.fontSize]: globalRefs$d.typography.body2.size,
+      [vars$l.fontWeight]: globalRefs$d.typography.body2.weight,
+      [vars$l.fontFamily]: globalRefs$d.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$k.textColor]: globalRefs$c.colors.surface.contrast,
+      [vars$l.textColor]: globalRefs$d.colors.surface.contrast,
     },
     secondary: {
-      [vars$k.textColor]: globalRefs$c.colors.surface.dark,
+      [vars$l.textColor]: globalRefs$d.colors.surface.dark,
     },
     error: {
-      [vars$k.textColor]: globalRefs$c.colors.error.main,
+      [vars$l.textColor]: globalRefs$d.colors.error.main,
     },
     success: {
-      [vars$k.textColor]: globalRefs$c.colors.success.main,
+      [vars$l.textColor]: globalRefs$d.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$k.textAlign]: 'right' },
-    left: { [vars$k.textAlign]: 'left' },
-    center: { [vars$k.textAlign]: 'center' },
+    right: { [vars$l.textAlign]: 'right' },
+    left: { [vars$l.textAlign]: 'left' },
+    center: { [vars$l.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$k.hostWidth]: '100%',
+    [vars$l.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$k.fontStyle]: 'italic',
+    [vars$l.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$k.textTransform]: 'uppercase',
+    [vars$l.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$k.textTransform]: 'lowercase',
+    [vars$l.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$k
+  vars: vars$l
 });
 
-const globalRefs$b = getThemeRefs(globals);
-const vars$j = LinkClass.cssVarList;
+const globalRefs$c = getThemeRefs(globals);
+const vars$k = LinkClass.cssVarList;
 
 const link = {
-  [vars$j.hostDirection]: globalRefs$b.direction,
-  [vars$j.cursor]: 'pointer',
+  [vars$k.hostDirection]: globalRefs$c.direction,
+  [vars$k.cursor]: 'pointer',
 
-  [vars$j.textColor]: globalRefs$b.colors.primary.main,
+  [vars$k.textColor]: globalRefs$c.colors.primary.main,
 
   textAlign: {
-    right: { [vars$j.textAlign]: 'right' },
-    left: { [vars$j.textAlign]: 'left' },
-    center: { [vars$j.textAlign]: 'center' },
+    right: { [vars$k.textAlign]: 'right' },
+    left: { [vars$k.textAlign]: 'left' },
+    center: { [vars$k.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$j.hostWidth]: '100%',
+    [vars$k.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$j.textColor]: globalRefs$b.colors.primary.main,
+      [vars$k.textColor]: globalRefs$c.colors.primary.main,
     },
     secondary: {
-      [vars$j.textColor]: globalRefs$b.colors.secondary.main,
+      [vars$k.textColor]: globalRefs$c.colors.secondary.main,
     },
     error: {
-      [vars$j.textColor]: globalRefs$b.colors.error.main,
+      [vars$k.textColor]: globalRefs$c.colors.error.main,
     },
     success: {
-      [vars$j.textColor]: globalRefs$b.colors.success.main,
+      [vars$k.textColor]: globalRefs$c.colors.success.main,
     },
   },
 };
@@ -9653,10 +10245,10 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$j
+  vars: vars$k
 });
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 const compVars$2 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -9664,18 +10256,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$A
+  componentName$D
 );
 
 const divider = {
   ...helperTheme$1,
 
-  [compVars$2.hostDirection]: globalRefs$a.direction,
+  [compVars$2.hostDirection]: globalRefs$b.direction,
   [compVars$2.alignItems]: 'center',
   [compVars$2.flexDirection]: 'row',
   [compVars$2.alignSelf]: 'stretch',
   [compVars$2.hostWidth]: '100%',
-  [compVars$2.stripeColor]: globalRefs$a.colors.surface.light,
+  [compVars$2.stripeColor]: globalRefs$b.colors.surface.light,
   [compVars$2.stripeColorOpacity]: '0.5',
   [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$2.labelTextWidth]: 'fit-content',
@@ -9695,7 +10287,7 @@ const divider = {
   },
 };
 
-const vars$i = {
+const vars$j = {
   ...compVars$2,
   ...helperVars$1,
 };
@@ -9703,111 +10295,111 @@ const vars$i = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$i
+  vars: vars$j
 });
 
-const vars$h = PasscodeClass.cssVarList;
+const vars$i = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$h.hostDirection]: refs.direction,
-  [vars$h.fontFamily]: refs.fontFamily,
-  [vars$h.fontSize]: refs.fontSize,
-  [vars$h.labelTextColor]: refs.labelTextColor,
-  [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$h.digitValueTextColor]: refs.valueTextColor,
-  [vars$h.digitPadding]: '0',
-  [vars$h.digitTextAlign]: 'center',
-  [vars$h.digitSpacing]: '4px',
-  [vars$h.hostWidth]: refs.width,
-  [vars$h.digitOutlineColor]: 'transparent',
-  [vars$h.digitOutlineWidth]: refs.outlineWidth,
-  [vars$h.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$h.digitSize]: refs.inputHeight,
+  [vars$i.hostDirection]: refs.direction,
+  [vars$i.fontFamily]: refs.fontFamily,
+  [vars$i.fontSize]: refs.fontSize,
+  [vars$i.labelTextColor]: refs.labelTextColor,
+  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$i.digitValueTextColor]: refs.valueTextColor,
+  [vars$i.digitPadding]: '0',
+  [vars$i.digitTextAlign]: 'center',
+  [vars$i.digitSpacing]: '4px',
+  [vars$i.hostWidth]: refs.width,
+  [vars$i.digitOutlineColor]: 'transparent',
+  [vars$i.digitOutlineWidth]: refs.outlineWidth,
+  [vars$i.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$i.digitSize]: refs.inputHeight,
 
   size: {
-    xs: { [vars$h.spinnerSize]: '15px' },
-    sm: { [vars$h.spinnerSize]: '20px' },
-    md: { [vars$h.spinnerSize]: '20px' },
-    lg: { [vars$h.spinnerSize]: '20px' },
+    xs: { [vars$i.spinnerSize]: '15px' },
+    sm: { [vars$i.spinnerSize]: '20px' },
+    md: { [vars$i.spinnerSize]: '20px' },
+    lg: { [vars$i.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$h.digitCaretTextColor]: 'transparent',
+    [vars$i.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$h.overlayOpacity]: refs.overlayOpacity,
+    [vars$i.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$h
+  vars: vars$i
 });
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$g = LoaderLinearClass.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const vars$h = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$g.hostDisplay]: 'inline-block',
-  [vars$g.hostWidth]: '100%',
+  [vars$h.hostDisplay]: 'inline-block',
+  [vars$h.hostWidth]: '100%',
 
-  [vars$g.barColor]: globalRefs$9.colors.surface.contrast,
-  [vars$g.barWidth]: '20%',
+  [vars$h.barColor]: globalRefs$a.colors.surface.contrast,
+  [vars$h.barWidth]: '20%',
 
-  [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.light,
-  [vars$g.barBorderRadius]: '4px',
+  [vars$h.barBackgroundColor]: globalRefs$a.colors.surface.light,
+  [vars$h.barBorderRadius]: '4px',
 
-  [vars$g.animationDuration]: '2s',
-  [vars$g.animationTimingFunction]: 'linear',
-  [vars$g.animationIterationCount]: 'infinite',
-  [vars$g.verticalPadding]: '0.25em',
+  [vars$h.animationDuration]: '2s',
+  [vars$h.animationTimingFunction]: 'linear',
+  [vars$h.animationIterationCount]: 'infinite',
+  [vars$h.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$g.barHeight]: '2px' },
-    sm: { [vars$g.barHeight]: '4px' },
-    md: { [vars$g.barHeight]: '6px' },
-    lg: { [vars$g.barHeight]: '8px' },
+    xs: { [vars$h.barHeight]: '2px' },
+    sm: { [vars$h.barHeight]: '4px' },
+    md: { [vars$h.barHeight]: '6px' },
+    lg: { [vars$h.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$g.barColor]: globalRefs$9.colors.primary.main,
+      [vars$h.barColor]: globalRefs$a.colors.primary.main,
     },
     secondary: {
-      [vars$g.barColor]: globalRefs$9.colors.secondary.main,
+      [vars$h.barColor]: globalRefs$a.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$g.hostDisplay]: 'none',
+    [vars$h.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$g
+  vars: vars$h
 });
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 const compVars$1 = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
-    spinnerColor: globalRefs$8.colors.surface.contrast,
+    spinnerColor: globalRefs$9.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$8.colors.primary.main,
+        spinnerColor: globalRefs$9.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$8.colors.secondary.main,
+        spinnerColor: globalRefs$9.colors.secondary.main,
       },
     },
   },
-  componentName$D
+  componentName$G
 );
 
 const loaderRadial = {
@@ -9836,7 +10428,7 @@ const loaderRadial = {
     [compVars$1.hostDisplay]: 'none',
   },
 };
-const vars$f = {
+const vars$g = {
   ...compVars$1,
   ...helperVars,
 };
@@ -9844,78 +10436,114 @@ const vars$f = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$f
+  vars: vars$g
 });
 
-const globalRefs$7 = getThemeRefs(globals);
-const vars$e = ComboBoxClass.cssVarList;
+const globalRefs$8 = getThemeRefs(globals);
+const vars$f = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$e.hostWidth]: refs.width,
-  [vars$e.hostDirection]: refs.direction,
-  [vars$e.fontSize]: refs.fontSize,
-  [vars$e.fontFamily]: refs.fontFamily,
-  [vars$e.labelTextColor]: refs.labelTextColor,
-  [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$e.inputBorderColor]: refs.borderColor,
-  [vars$e.inputBorderWidth]: refs.borderWidth,
-  [vars$e.inputBorderStyle]: refs.borderStyle,
-  [vars$e.inputBorderRadius]: refs.borderRadius,
-  [vars$e.inputOutlineColor]: refs.outlineColor,
-  [vars$e.inputOutlineOffset]: refs.outlineOffset,
-  [vars$e.inputOutlineWidth]: refs.outlineWidth,
-  [vars$e.inputOutlineStyle]: refs.outlineStyle,
-  [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$e.inputValueTextColor]: refs.valueTextColor,
-  [vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$e.inputBackgroundColor]: refs.backgroundColor,
-  [vars$e.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$e.inputHeight]: refs.inputHeight,
-  [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
-  [vars$e.inputDropdownButtonCursor]: 'pointer',
-  [vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
-  [vars$e.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
-  [vars$e.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
+  [vars$f.hostWidth]: refs.width,
+  [vars$f.hostDirection]: refs.direction,
+  [vars$f.fontSize]: refs.fontSize,
+  [vars$f.fontFamily]: refs.fontFamily,
+  [vars$f.labelTextColor]: refs.labelTextColor,
+  [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$f.inputBorderColor]: refs.borderColor,
+  [vars$f.inputBorderWidth]: refs.borderWidth,
+  [vars$f.inputBorderStyle]: refs.borderStyle,
+  [vars$f.inputBorderRadius]: refs.borderRadius,
+  [vars$f.inputOutlineColor]: refs.outlineColor,
+  [vars$f.inputOutlineOffset]: refs.outlineOffset,
+  [vars$f.inputOutlineWidth]: refs.outlineWidth,
+  [vars$f.inputOutlineStyle]: refs.outlineStyle,
+  [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$f.inputValueTextColor]: refs.valueTextColor,
+  [vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$f.inputBackgroundColor]: refs.backgroundColor,
+  [vars$f.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$f.inputHeight]: refs.inputHeight,
+  [vars$f.inputDropdownButtonColor]: globalRefs$8.colors.surface.dark,
+  [vars$f.inputDropdownButtonCursor]: 'pointer',
+  [vars$f.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$f.inputDropdownButtonOffset]: globalRefs$8.spacing.xs,
+  [vars$f.overlayItemPaddingInlineStart]: globalRefs$8.spacing.xs,
+  [vars$f.overlayItemPaddingInlineEnd]: globalRefs$8.spacing.lg,
 
   _readonly: {
-    [vars$e.inputDropdownButtonCursor]: 'default',
+    [vars$f.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$e.overlayFontSize]: refs.fontSize,
-  [vars$e.overlayFontFamily]: refs.fontFamily,
-  [vars$e.overlayCursor]: 'pointer',
-  [vars$e.overlayItemBoxShadow]: 'none',
-  [vars$e.overlayBackground]: refs.backgroundColor,
-  [vars$e.overlayTextColor]: refs.valueTextColor,
+  [vars$f.overlayFontSize]: refs.fontSize,
+  [vars$f.overlayFontFamily]: refs.fontFamily,
+  [vars$f.overlayCursor]: 'pointer',
+  [vars$f.overlayItemBoxShadow]: 'none',
+  [vars$f.overlayBackground]: refs.backgroundColor,
+  [vars$f.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$e.overlay.minHeight]: '400px',
-  [vars$e.overlay.margin]: '0',
+  [vars$f.overlay.minHeight]: '400px',
+  [vars$f.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$e
+  vars: vars$f
 });
 
-const vars$d = ImageClass.cssVarList;
+const vars$e = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$d
+  vars: vars$e
 });
 
-const vars$c = PhoneFieldClass.cssVarList;
+const vars$d = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$c.hostWidth]: refs.width,
+  [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.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$d.inputValueTextColor]: refs.valueTextColor,
+  [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$d.inputBorderStyle]: refs.borderStyle,
+  [vars$d.inputBorderWidth]: refs.borderWidth,
+  [vars$d.inputBorderColor]: refs.borderColor,
+  [vars$d.inputBorderRadius]: refs.borderRadius,
+  [vars$d.inputOutlineStyle]: refs.outlineStyle,
+  [vars$d.inputOutlineWidth]: refs.outlineWidth,
+  [vars$d.inputOutlineColor]: refs.outlineColor,
+  [vars$d.inputOutlineOffset]: refs.outlineOffset,
+  [vars$d.phoneInputWidth]: refs.minWidth,
+  [vars$d.countryCodeInputWidth]: '5em',
+  [vars$d.countryCodeDropdownWidth]: '20em',
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$d
+});
+
+const vars$c = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$c.hostWidth]: '16em',
+  [vars$c.hostMinWidth]: refs.minWidth,
   [vars$c.hostDirection]: refs.direction,
   [vars$c.fontSize]: refs.fontSize,
   [vars$c.fontFamily]: refs.fontFamily,
@@ -9932,180 +10560,144 @@ const phoneField = {
   [vars$c.inputOutlineWidth]: refs.outlineWidth,
   [vars$c.inputOutlineColor]: refs.outlineColor,
   [vars$c.inputOutlineOffset]: refs.outlineOffset,
-  [vars$c.phoneInputWidth]: refs.minWidth,
-  [vars$c.countryCodeInputWidth]: '5em',
-  [vars$c.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$c.hostWidth]: refs.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$c
 });
 
-const vars$b = PhoneFieldInputBoxClass.cssVarList;
+const vars$b = NewPasswordClass.cssVarList;
 
-const phoneInputBoxField = {
-  [vars$b.hostWidth]: '16em',
+const newPassword = {
+  [vars$b.hostWidth]: refs.width,
   [vars$b.hostMinWidth]: refs.minWidth,
   [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.spaceBetweenInputs]: '1em',
   [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,
-  _fullWidth: {
-    [vars$b.hostWidth]: refs.width,
-  },
-};
-
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$b
-});
-
-const vars$a = NewPasswordClass.cssVarList;
-
-const newPassword = {
-  [vars$a.hostWidth]: refs.width,
-  [vars$a.hostMinWidth]: refs.minWidth,
-  [vars$a.hostDirection]: refs.direction,
-  [vars$a.fontSize]: refs.fontSize,
-  [vars$a.fontFamily]: refs.fontFamily,
-  [vars$a.spaceBetweenInputs]: '1em',
-  [vars$a.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$a.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$b.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$a
+  vars: vars$b
 });
 
-const vars$9 = UploadFileClass.cssVarList;
+const vars$a = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$9.hostDirection]: refs.direction,
-  [vars$9.labelTextColor]: refs.labelTextColor,
-  [vars$9.fontFamily]: refs.fontFamily,
+  [vars$a.hostDirection]: refs.direction,
+  [vars$a.labelTextColor]: refs.labelTextColor,
+  [vars$a.fontFamily]: refs.fontFamily,
 
-  [vars$9.iconSize]: '2em',
+  [vars$a.iconSize]: '2em',
 
-  [vars$9.hostPadding]: '0.75em',
-  [vars$9.gap]: '0.5em',
+  [vars$a.hostPadding]: '0.75em',
+  [vars$a.gap]: '0.5em',
 
-  [vars$9.fontSize]: '16px',
-  [vars$9.titleFontWeight]: '500',
-  [vars$9.lineHeight]: '1em',
+  [vars$a.fontSize]: '16px',
+  [vars$a.titleFontWeight]: '500',
+  [vars$a.lineHeight]: '1em',
 
-  [vars$9.borderWidth]: refs.borderWidth,
-  [vars$9.borderColor]: refs.borderColor,
-  [vars$9.borderRadius]: refs.borderRadius,
-  [vars$9.borderStyle]: 'dashed',
+  [vars$a.borderWidth]: refs.borderWidth,
+  [vars$a.borderColor]: refs.borderColor,
+  [vars$a.borderRadius]: refs.borderRadius,
+  [vars$a.borderStyle]: 'dashed',
 
   _required: {
-    [vars$9.requiredIndicator]: refs.requiredIndicator,
+    [vars$a.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$9.hostHeight]: '196px',
-      [vars$9.hostWidth]: '200px',
-      [vars$9.titleFontSize]: '0.875em',
-      [vars$9.descriptionFontSize]: '0.875em',
-      [vars$9.lineHeight]: '1.25em',
+      [vars$a.hostHeight]: '196px',
+      [vars$a.hostWidth]: '200px',
+      [vars$a.titleFontSize]: '0.875em',
+      [vars$a.descriptionFontSize]: '0.875em',
+      [vars$a.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$9.hostHeight]: '216px',
-      [vars$9.hostWidth]: '230px',
-      [vars$9.titleFontSize]: '1em',
-      [vars$9.descriptionFontSize]: '0.875em',
-      [vars$9.lineHeight]: '1.25em',
+      [vars$a.hostHeight]: '216px',
+      [vars$a.hostWidth]: '230px',
+      [vars$a.titleFontSize]: '1em',
+      [vars$a.descriptionFontSize]: '0.875em',
+      [vars$a.lineHeight]: '1.25em',
     },
     md: {
-      [vars$9.hostHeight]: '256px',
-      [vars$9.hostWidth]: '312px',
-      [vars$9.titleFontSize]: '1.125em',
-      [vars$9.descriptionFontSize]: '1em',
-      [vars$9.lineHeight]: '1.5em',
+      [vars$a.hostHeight]: '256px',
+      [vars$a.hostWidth]: '312px',
+      [vars$a.titleFontSize]: '1.125em',
+      [vars$a.descriptionFontSize]: '1em',
+      [vars$a.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$9.hostHeight]: '280px',
-      [vars$9.hostWidth]: '336px',
-      [vars$9.titleFontSize]: '1.125em',
-      [vars$9.descriptionFontSize]: '1.125em',
-      [vars$9.lineHeight]: '1.75em',
+      [vars$a.hostHeight]: '280px',
+      [vars$a.hostWidth]: '336px',
+      [vars$a.titleFontSize]: '1.125em',
+      [vars$a.descriptionFontSize]: '1.125em',
+      [vars$a.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$9.hostWidth]: refs.width,
+    [vars$a.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$9
+  vars: vars$a
 });
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 
-const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
+const vars$9 = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$8.hostDirection]: 'inherit',
-  [vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
-  [vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
-  [vars$8.borderColor]: globalRefs$6.colors.surface.light,
-  [vars$8.borderStyle]: 'solid',
-  [vars$8.borderRadius]: globalRefs$6.radius.sm,
-  [vars$8.outlineColor]: 'transparent',
+  [vars$9.hostDirection]: 'inherit',
+  [vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
+  [vars$9.labelTextColor]: globalRefs$7.colors.surface.contrast,
+  [vars$9.borderColor]: globalRefs$7.colors.surface.light,
+  [vars$9.borderStyle]: 'solid',
+  [vars$9.borderRadius]: globalRefs$7.radius.sm,
+  [vars$9.outlineColor]: 'transparent',
 
   _hover: {
-    [vars$8.backgroundColor]: globalRefs$6.colors.surface.highlight,
+    [vars$9.backgroundColor]: globalRefs$7.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$8.outlineColor]: globalRefs$6.colors.surface.light,
+    [vars$9.outlineColor]: globalRefs$7.colors.surface.light,
   },
 
   _selected: {
-    [vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
-    [vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
-    [vars$8.labelTextColor]: globalRefs$6.colors.surface.main,
+    [vars$9.borderColor]: globalRefs$7.colors.surface.contrast,
+    [vars$9.backgroundColor]: globalRefs$7.colors.surface.contrast,
+    [vars$9.labelTextColor]: globalRefs$7.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$8
+  vars: vars$9
 });
 
-const globalRefs$5 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 
 const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostDirection]: refs.direction,
@@ -10113,84 +10705,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.itemsSpacing]: globalRefs$5.spacing.sm,
+  [vars.itemsSpacing]: globalRefs$6.spacing.sm,
   [vars.hostWidth]: refs.width,
 });
 
-const vars$7 = ButtonSelectionGroupClass.cssVarList;
+const vars$8 = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$7),
+  ...createBaseButtonSelectionGroupMappings(vars$8),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$7
+  vars: vars$8
 });
 
-const vars$6 = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$7 = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$6),
+  ...createBaseButtonSelectionGroupMappings(vars$7),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$6
+  vars: vars$7
 });
 
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 
 const compVars = ModalClass.cssVarList;
 
 const modal = {
-  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.main,
-  [compVars.overlayShadow]: globalRefs$4.shadow.wide['2xl'],
+  [compVars.overlayBackgroundColor]: globalRefs$5.colors.surface.main,
+  [compVars.overlayShadow]: globalRefs$5.shadow.wide['2xl'],
   [compVars.overlayWidth]: '540px',
 };
 
-const vars$5 = {
+const vars$6 = {
   ...compVars,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$5
+  vars: vars$6
 });
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$4 = GridClass.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
+const vars$5 = GridClass.cssVarList;
 
 const grid = {
-  [vars$4.hostWidth]: '100%',
-  [vars$4.hostHeight]: '100%',
-  [vars$4.hostMinHeight]: '400px',
-  [vars$4.fontWeight]: '400',
-  [vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
+  [vars$5.hostWidth]: '100%',
+  [vars$5.hostHeight]: '100%',
+  [vars$5.hostMinHeight]: '400px',
+  [vars$5.fontWeight]: '400',
+  [vars$5.backgroundColor]: globalRefs$4.colors.surface.main,
 
-  [vars$4.fontSize]: refs.fontSize,
-  [vars$4.fontFamily]: refs.fontFamily,
+  [vars$5.fontSize]: refs.fontSize,
+  [vars$5.fontFamily]: refs.fontFamily,
 
-  [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.light,
-  [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
-  [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.light,
+  [vars$5.sortIndicatorsColor]: globalRefs$4.colors.surface.light,
+  [vars$5.activeSortIndicator]: globalRefs$4.colors.surface.dark,
+  [vars$5.resizeHandleColor]: globalRefs$4.colors.surface.light,
 
-  [vars$4.borderWidth]: refs.borderWidth,
-  [vars$4.borderStyle]: refs.borderStyle,
-  [vars$4.borderRadius]: refs.borderRadius,
-  [vars$4.borderColor]: 'transparent',
+  [vars$5.borderWidth]: refs.borderWidth,
+  [vars$5.borderStyle]: refs.borderStyle,
+  [vars$5.borderRadius]: refs.borderRadius,
+  [vars$5.borderColor]: 'transparent',
 
-  [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
-  [vars$4.separatorColor]: globalRefs$3.colors.surface.light,
+  [vars$5.headerRowTextColor]: globalRefs$4.colors.surface.dark,
+  [vars$5.separatorColor]: globalRefs$4.colors.surface.light,
 
-  [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
-  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.surface.highlight,
+  [vars$5.valueTextColor]: globalRefs$4.colors.surface.contrast,
+  [vars$5.selectedBackgroundColor]: globalRefs$4.colors.surface.highlight,
 
   _bordered: {
-    [vars$4.borderColor]: refs.borderColor,
+    [vars$5.borderColor]: refs.borderColor,
   },
 };
 
@@ -10198,53 +10790,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$4
+  vars: vars$5
 });
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$3 = NotificationCardClass.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
+const vars$4 = NotificationCardClass.cssVarList;
 
 const shadowColor = '#00000020';
 
 const notification = {
-  [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,
+  [vars$4.hostMinWidth]: '415px',
+  [vars$4.fontFamily]: globalRefs$3.fonts.font1.family,
+  [vars$4.fontSize]: globalRefs$3.typography.body1.size,
+  [vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
+  [vars$4.textColor]: globalRefs$3.colors.surface.contrast,
+  [vars$4.boxShadow]: `${globalRefs$3.shadow.wide.xl} ${shadowColor}, ${globalRefs$3.shadow.narrow.xl} ${shadowColor}`,
+  [vars$4.verticalPadding]: '0.625em',
+  [vars$4.horizontalPadding]: '1.5em',
+  [vars$4.borderRadius]: globalRefs$3.radius.xs,
 
   _bordered: {
-    [vars$3.borderWidth]: globalRefs$2.border.sm,
-    [vars$3.borderStyle]: 'solid',
-    [vars$3.borderColor]: 'transparent',
+    [vars$4.borderWidth]: globalRefs$3.border.sm,
+    [vars$4.borderStyle]: 'solid',
+    [vars$4.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$3.fontSize]: '12px' },
-    sm: { [vars$3.fontSize]: '14px' },
-    md: { [vars$3.fontSize]: '16px' },
-    lg: { [vars$3.fontSize]: '18px' },
+    xs: { [vars$4.fontSize]: '12px' },
+    sm: { [vars$4.fontSize]: '14px' },
+    md: { [vars$4.fontSize]: '16px' },
+    lg: { [vars$4.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$3.backgroundColor]: globalRefs$2.colors.primary.main,
-      [vars$3.textColor]: globalRefs$2.colors.primary.contrast,
-      [vars$3.borderColor]: globalRefs$2.colors.primary.light,
+      [vars$4.backgroundColor]: globalRefs$3.colors.primary.main,
+      [vars$4.textColor]: globalRefs$3.colors.primary.contrast,
+      [vars$4.borderColor]: globalRefs$3.colors.primary.light,
     },
     success: {
-      [vars$3.backgroundColor]: globalRefs$2.colors.success.main,
-      [vars$3.textColor]: globalRefs$2.colors.success.contrast,
-      [vars$3.borderColor]: globalRefs$2.colors.success.light,
+      [vars$4.backgroundColor]: globalRefs$3.colors.success.main,
+      [vars$4.textColor]: globalRefs$3.colors.success.contrast,
+      [vars$4.borderColor]: globalRefs$3.colors.success.light,
     },
     error: {
-      [vars$3.backgroundColor]: globalRefs$2.colors.error.main,
-      [vars$3.textColor]: globalRefs$2.colors.error.contrast,
-      [vars$3.borderColor]: globalRefs$2.colors.error.light,
+      [vars$4.backgroundColor]: globalRefs$3.colors.error.main,
+      [vars$4.textColor]: globalRefs$3.colors.error.contrast,
+      [vars$4.borderColor]: globalRefs$3.colors.error.light,
     },
   },
 };
@@ -10252,128 +10844,128 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$3
+  vars: vars$4
 });
 
-const globalRefs$1 = getThemeRefs(globals);
-const vars$2 = MultiSelectComboBoxClass.cssVarList;
+const globalRefs$2 = getThemeRefs(globals);
+const vars$3 = 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.dark,
-  [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]: globalRefs$1.colors.surface.contrast,
-  [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.light,
+  [vars$3.hostWidth]: refs.width,
+  [vars$3.hostDirection]: refs.direction,
+  [vars$3.fontSize]: refs.fontSize,
+  [vars$3.fontFamily]: refs.fontFamily,
+  [vars$3.labelTextColor]: refs.labelTextColor,
+  [vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$3.inputBorderColor]: refs.borderColor,
+  [vars$3.inputBorderWidth]: refs.borderWidth,
+  [vars$3.inputBorderStyle]: refs.borderStyle,
+  [vars$3.inputBorderRadius]: refs.borderRadius,
+  [vars$3.inputOutlineColor]: refs.outlineColor,
+  [vars$3.inputOutlineOffset]: refs.outlineOffset,
+  [vars$3.inputOutlineWidth]: refs.outlineWidth,
+  [vars$3.inputOutlineStyle]: refs.outlineStyle,
+  [vars$3.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$3.inputValueTextColor]: refs.valueTextColor,
+  [vars$3.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$3.inputBackgroundColor]: refs.backgroundColor,
+  [vars$3.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$3.inputVerticalPadding]: refs.verticalPadding,
+  [vars$3.inputHeight]: refs.inputHeight,
+  [vars$3.inputDropdownButtonColor]: globalRefs$2.colors.surface.dark,
+  [vars$3.inputDropdownButtonCursor]: 'pointer',
+  [vars$3.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$3.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
+  [vars$3.overlayItemPaddingInlineStart]: globalRefs$2.spacing.xs,
+  [vars$3.overlayItemPaddingInlineEnd]: globalRefs$2.spacing.lg,
+  [vars$3.chipFontSize]: refs.chipFontSize,
+  [vars$3.chipTextColor]: globalRefs$2.colors.surface.contrast,
+  [vars$3.chipBackgroundColor]: globalRefs$2.colors.surface.light,
 
   _readonly: {
-    [vars$2.inputDropdownButtonCursor]: 'default',
+    [vars$3.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',
-  [vars$2.overlayBackground]: refs.backgroundColor,
-  [vars$2.overlayTextColor]: refs.valueTextColor,
+  [vars$3.overlayFontSize]: refs.fontSize,
+  [vars$3.overlayFontFamily]: refs.fontFamily,
+  [vars$3.overlayCursor]: 'pointer',
+  [vars$3.overlayItemBoxShadow]: 'none',
+  [vars$3.overlayBackground]: refs.backgroundColor,
+  [vars$3.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$2.overlay.minHeight]: '400px',
-  [vars$2.overlay.margin]: '0',
+  [vars$3.overlay.minHeight]: '400px',
+  [vars$3.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$2
+  vars: vars$3
 });
 
-const globalRefs = getThemeRefs(globals);
-const vars$1 = BadgeClass.cssVarList;
+const globalRefs$1 = getThemeRefs(globals);
+const vars$2 = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$1.hostWidth]: 'fit-content',
-  [vars$1.hostDirection]: globalRefs.direction,
+  [vars$2.hostWidth]: 'fit-content',
+  [vars$2.hostDirection]: globalRefs$1.direction,
 
-  [vars$1.textAlign]: 'center',
+  [vars$2.textAlign]: 'center',
 
-  [vars$1.fontFamily]: globalRefs.fonts.font1.family,
-  [vars$1.fontWeight]: '400',
+  [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
+  [vars$2.fontWeight]: '400',
 
-  [vars$1.verticalPadding]: '0.25em',
-  [vars$1.horizontalPadding]: '0.5em',
+  [vars$2.verticalPadding]: '0.25em',
+  [vars$2.horizontalPadding]: '0.5em',
 
-  [vars$1.borderWidth]: globalRefs.border.xs,
-  [vars$1.borderRadius]: globalRefs.radius.xs,
-  [vars$1.borderColor]: 'transparent',
-  [vars$1.borderStyle]: 'solid',
+  [vars$2.borderWidth]: globalRefs$1.border.xs,
+  [vars$2.borderRadius]: globalRefs$1.radius.xs,
+  [vars$2.borderColor]: 'transparent',
+  [vars$2.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$1.hostWidth]: '100%',
+    [vars$2.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$1.fontSize]: '12px' },
-    sm: { [vars$1.fontSize]: '14px' },
-    md: { [vars$1.fontSize]: '16px' },
-    lg: { [vars$1.fontSize]: '18px' },
+    xs: { [vars$2.fontSize]: '12px' },
+    sm: { [vars$2.fontSize]: '14px' },
+    md: { [vars$2.fontSize]: '16px' },
+    lg: { [vars$2.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$1.textColor]: globalRefs.colors.surface.dark,
+      [vars$2.textColor]: globalRefs$1.colors.surface.dark,
       _bordered: {
-        [vars$1.borderColor]: globalRefs.colors.surface.light,
+        [vars$2.borderColor]: globalRefs$1.colors.surface.light,
       },
     },
     primary: {
-      [vars$1.textColor]: globalRefs.colors.primary.main,
+      [vars$2.textColor]: globalRefs$1.colors.primary.main,
       _bordered: {
-        [vars$1.borderColor]: globalRefs.colors.primary.light,
+        [vars$2.borderColor]: globalRefs$1.colors.primary.light,
       },
     },
     secondary: {
-      [vars$1.textColor]: globalRefs.colors.secondary.main,
+      [vars$2.textColor]: globalRefs$1.colors.secondary.main,
       _bordered: {
-        [vars$1.borderColor]: globalRefs.colors.secondary.light,
+        [vars$2.borderColor]: globalRefs$1.colors.secondary.light,
       },
     },
     error: {
-      [vars$1.textColor]: globalRefs.colors.error.main,
+      [vars$2.textColor]: globalRefs$1.colors.error.main,
       _bordered: {
-        [vars$1.borderColor]: globalRefs.colors.error.light,
+        [vars$2.borderColor]: globalRefs$1.colors.error.light,
       },
     },
     success: {
-      [vars$1.textColor]: globalRefs.colors.success.main,
+      [vars$2.textColor]: globalRefs$1.colors.success.main,
       _bordered: {
-        [vars$1.borderColor]: globalRefs.colors.success.light,
+        [vars$2.borderColor]: globalRefs$1.colors.success.light,
       },
     },
   },
@@ -10382,6 +10974,31 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
+  vars: vars$2
+});
+
+const globalRefs = getThemeRefs(globals);
+
+const vars$1 = MappingsFieldClass.cssVarList;
+
+const mappingsField = {
+  [vars$1.hostWidth]: refs.width,
+  [vars$1.hostDirection]: refs.direction,
+  [vars$1.fontSize]: refs.fontSize,
+  [vars$1.fontFamily]: refs.fontFamily,
+  [vars$1.separatorFontSize]: '14px',
+  [vars$1.labelTextColor]: refs.labelTextColor,
+  [vars$1.itemMarginBottom]: '1em',
+  // To be positioned correctly, the min width has to match the text field min width
+  [vars$1.valueLabelMinWidth]: refs.minWidth,
+  // To be positioned correctly, the min width has to match the combo box field min width
+  [vars$1.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
+};
+
+var mappingsField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: mappingsField,
+  mappingsField: mappingsField,
   vars: vars$1
 });
 
@@ -10419,6 +11036,7 @@ const components = {
   notificationCard,
   multiSelectComboBox: multiSelectComboBox$1,
   badge: badge$1,
+  mappingsField: mappingsField$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -10431,7 +11049,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$y, components: vars };
+const themeVars = { globals: vars$z, components: vars };
 
 const colors = {
   surface: {
@@ -10477,5 +11095,5 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map