@descope/web-components-ui 1.0.290 → 1.0.291

package/dist/index.esm.js

@@ -971,6 +971,7 @@ const proxyInputMixin =
     // 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',
+    triggerValidationEvents = [],
     // Proxies all validations from the parent component to the input element
     proxyParentValidation = false,
   }) =>
@@ -1059,6 +1060,12 @@ const proxyInputMixin =
           }
         };
 
+        triggerValidationEvents.forEach((e) => {
+          this.baseElement?.addEventListener(e, () => {
+            this.inputElement?.setCustomValidity('');
+          });
+        });
+
         // 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(() => {
@@ -1347,7 +1354,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$N = getComponentName('button');
+const componentName$P = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1385,7 +1392,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$k, label: label$a } = {
+const { host: host$l, label: label$a } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
 };
@@ -1397,7 +1404,7 @@ const ButtonClass = compose(
     mappings: {
       hostWidth: { property: 'width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$k, property: 'direction' },
+      hostDirection: { ...host$l, property: 'direction' },
       fontSize: {},
       fontFamily: {},
 
@@ -1449,7 +1456,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$N,
+    componentName: componentName$P,
   })
 );
 
@@ -1486,7 +1493,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$N, ButtonClass);
+customElements.define(componentName$P, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1496,13 +1503,13 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$M = getComponentName('boolean-field-internal');
+const componentName$O = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$M, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$O, baseSelector: 'div' });
 
-class BooleanInputInternal extends BaseInputClass$7 {
+class BooleanInputInternal extends BaseInputClass$8 {
   static get observedAttributes() {
     return ['readonly'];
   }
@@ -1576,14 +1583,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$M}
+				<${componentName$O}
 					tabindex="-1"
 					slot="input"
-				></${componentName$M}>
+				></${componentName$O}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$M);
+      this.inputElement = this.shadowRoot.querySelector(componentName$O);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1782,10 +1789,10 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$L = getComponentName('checkbox');
+const componentName$N = getComponentName('checkbox');
 
 const {
-  host: host$j,
+  host: host$k,
   component: component$1,
   checkboxElement,
   checkboxSurface,
@@ -1807,10 +1814,10 @@ const {
 const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$j, property: 'width' },
-      hostDirection: { ...host$j, property: 'direction' },
+      hostWidth: { ...host$k, property: 'width' },
+      hostDirection: { ...host$k, property: 'direction' },
 
-      fontSize: [host$j, checkboxElement, checkboxLabel$1],
+      fontSize: [host$k, checkboxElement, checkboxLabel$1],
       fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
@@ -1888,18 +1895,18 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$L,
+    componentName: componentName$N,
   })
 );
 
-customElements.define(componentName$M, BooleanInputInternal);
+customElements.define(componentName$O, BooleanInputInternal);
 
-customElements.define(componentName$L, CheckboxClass);
+customElements.define(componentName$N, CheckboxClass);
 
-const componentName$K = getComponentName('switch-toggle');
+const componentName$M = getComponentName('switch-toggle');
 
 const {
-  host: host$i,
+  host: host$j,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
@@ -1921,8 +1928,8 @@ const {
 const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$i, property: 'width' },
-      hostDirection: { ...host$i, property: 'direction' },
+      hostWidth: { ...host$j, property: 'width' },
+      hostDirection: { ...host$j, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
       fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
@@ -2028,17 +2035,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$K,
+    componentName: componentName$M,
   })
 );
 
-customElements.define(componentName$K, SwitchToggleClass);
+customElements.define(componentName$M, SwitchToggleClass);
 
-const componentName$J = getComponentName('loader-linear');
+const componentName$L = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$J;
+    return componentName$L;
   }
 
   constructor() {
@@ -2074,18 +2081,18 @@ const selectors$2 = {
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$h } = selectors$2;
+const { after: after$1, host: host$i } = selectors$2;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$h, property: 'width' },
+      hostWidth: { ...host$i, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$h, property: 'padding-top' },
-        { ...host$h, property: 'padding-bottom' },
+        { ...host$i, property: 'padding-top' },
+        { ...host$i, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after$1, property: 'background-color' },
@@ -2099,11 +2106,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$J, LoaderLinearClass);
+customElements.define(componentName$L, LoaderLinearClass);
 
-const componentName$I = getComponentName('loader-radial');
+const componentName$K = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2147,11 +2154,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$I, LoaderRadialClass);
+customElements.define(componentName$K, LoaderRadialClass);
 
-const componentName$H = getComponentName('container');
+const componentName$J = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$H, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$J, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2204,13 +2211,13 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$H, ContainerClass);
+customElements.define(componentName$J, ContainerClass);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$G = getComponentName('text');
+const componentName$I = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2270,8 +2277,8 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const componentName$F = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > div' }) {
+const componentName$H = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2317,7 +2324,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$F, baseS
 }
 
 const textVars$3 = TextClass.cssVarList;
-const { host: host$g, before, after, text: text$3 } = {
+const { host: host$h, before, after, text: text$3 } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
   after: { selector: '::after' },
@@ -2327,8 +2334,8 @@ const { host: host$g, before, after, text: text$3 } = {
 const DividerClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$g, property: 'width' },
-      hostPadding: { ...host$g, property: 'padding' },
+      hostWidth: { ...host$h, property: 'width' },
+      hostPadding: { ...host$h, property: 'padding' },
       hostDirection: { ...text$3, property: 'direction' },
 
       minHeight: {},
@@ -2370,12 +2377,12 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$G, TextClass);
+customElements.define(componentName$I, TextClass);
 
-customElements.define(componentName$F, DividerClass);
+customElements.define(componentName$H, DividerClass);
 
 const {
-  host: host$f,
+  host: host$g,
   label: label$9,
   placeholder: placeholder$3,
   requiredIndicator: requiredIndicator$9,
@@ -2400,12 +2407,12 @@ const {
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host$f],
+  fontSize: [{}, host$g],
   fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
 
-  hostWidth: { ...host$f, property: 'width' },
-  hostMinWidth: { ...host$f, property: 'min-width' },
-  hostDirection: { ...host$f, property: 'direction' },
+  hostWidth: { ...host$g, property: 'width' },
+  hostMinWidth: { ...host$g, property: 'min-width' },
+  hostDirection: { ...host$g, property: 'direction' },
 
   inputBackgroundColor: { ...inputField$6, property: 'background-color' },
 
@@ -2450,9 +2457,9 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$E = getComponentName('email-field');
+const componentName$G = getComponentName('email-field');
 
-const customMixin$7 = (superclass) =>
+const customMixin$8 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
@@ -2466,7 +2473,7 @@ const EmailFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$7
+  customMixin$8
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -2485,15 +2492,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$E,
+    componentName: componentName$G,
   })
 );
 
-customElements.define(componentName$E, EmailFieldClass);
+customElements.define(componentName$G, EmailFieldClass);
 
-const componentName$D = getComponentName('link');
+const componentName$F = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$D, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$F, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2539,12 +2546,12 @@ const selectors$1 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$e, wrapper: wrapper$1 } = selectors$1;
+const { anchor, text: text$2, host: host$f, wrapper: wrapper$1 } = selectors$1;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$e, property: 'width' },
+      hostWidth: { ...host$f, property: 'width' },
       hostDirection: { ...text$2, property: 'direction' },
       textAlign: wrapper$1,
       textColor: [
@@ -2558,7 +2565,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$D, LinkClass);
+customElements.define(componentName$F, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2610,37 +2617,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$C = getComponentName('logo');
+const componentName$E = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$C,
+  componentName: componentName$E,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$C, LogoClass);
+customElements.define(componentName$E, LogoClass);
 
-const componentName$B = getComponentName('totp-image');
+const componentName$D = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$B,
+  componentName: componentName$D,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$B, TotpImageClass);
+customElements.define(componentName$D, TotpImageClass);
 
-const componentName$A = getComponentName('notp-image');
+const componentName$C = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$A,
+  componentName: componentName$C,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$A, NotpImageClass);
+customElements.define(componentName$C, NotpImageClass);
 
-const componentName$z = getComponentName('number-field');
+const componentName$B = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2666,11 +2673,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$z,
+    componentName: componentName$B,
   })
 );
 
-customElements.define(componentName$z, NumberFieldClass);
+customElements.define(componentName$B, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2688,17 +2695,17 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$y = getComponentName('passcode-internal');
+const componentName$A = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
 
-class PasscodeInternal extends BaseInputClass$6 {
+class PasscodeInternal extends BaseInputClass$7 {
   static get observedAttributes() {
-    return observedAttributes$5.concat(BaseInputClass$6.observedAttributes || []);
+    return observedAttributes$5.concat(BaseInputClass$7.observedAttributes || []);
   }
 
   constructor() {
@@ -2920,11 +2927,11 @@ class PasscodeInternal extends BaseInputClass$6 {
   }
 }
 
-const componentName$x = getComponentName('text-field');
+const componentName$z = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
-const customMixin$6 = (superclass) =>
+const customMixin$7 = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2951,7 +2958,7 @@ const TextFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$6
+  customMixin$7
 )(
   createProxy({
     slots: ['prefix', 'suffix'],
@@ -2970,15 +2977,15 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$x,
+    componentName: componentName$z,
   })
 );
 
-const componentName$w = getComponentName('passcode');
+const componentName$y = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
-const customMixin$5 = (superclass) =>
+const customMixin$6 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
       return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -2993,17 +3000,17 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$y}
+      <${componentName$A}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$y}>
+      ><slot></slot></${componentName$A}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$y);
+      this.inputElement = this.shadowRoot.querySelector(componentName$A);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -3018,7 +3025,7 @@ const customMixin$5 = (superclass) =>
   };
 
 const {
-  host: host$d,
+  host: host$e,
   digitField,
   label: label$8,
   requiredIndicator: requiredIndicator$8,
@@ -3041,10 +3048,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$d],
+      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$e],
       hostWidth: { property: 'width' },
-      hostDirection: { ...host$d, property: 'direction' },
-      fontFamily: [host$d, { ...label$8 }],
+      hostDirection: { ...host$e, property: 'direction' },
+      fontFamily: [host$e, { ...label$8 }],
       labelTextColor: [
         { ...label$8, property: 'color' },
         { ...requiredIndicator$8, property: 'color' },
@@ -3074,7 +3081,7 @@ const PasscodeClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$5
+  customMixin$6
 )(
   createProxy({
     slots: [],
@@ -3150,15 +3157,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$w,
+    componentName: componentName$y,
   })
 );
 
-customElements.define(componentName$x, TextFieldClass);
+customElements.define(componentName$z, TextFieldClass);
 
-customElements.define(componentName$y, PasscodeInternal);
+customElements.define(componentName$A, PasscodeInternal);
 
-customElements.define(componentName$w, PasscodeClass);
+customElements.define(componentName$y, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -3194,10 +3201,10 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$v = getComponentName('password');
+const componentName$x = getComponentName('password');
 
 const {
-  host: host$c,
+  host: host$d,
   inputField: inputField$5,
   inputElement: inputElement$2,
   inputElementPlaceholder,
@@ -3223,10 +3230,10 @@ const {
 const PasswordClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$c, property: 'width' },
-      hostMinWidth: { ...host$c, property: 'min-width' },
-      hostDirection: { ...host$c, property: 'direction' },
-      fontSize: [{}, host$c],
+      hostWidth: { ...host$d, property: 'width' },
+      hostMinWidth: { ...host$d, property: 'min-width' },
+      hostDirection: { ...host$d, property: 'direction' },
+      fontSize: [{}, host$d],
       fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
       inputHeight: { ...inputField$5, property: 'height' },
       inputHorizontalPadding: [
@@ -3323,16 +3330,16 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$v,
+    componentName: componentName$x,
   })
 );
 
-customElements.define(componentName$v, PasswordClass);
+customElements.define(componentName$x, PasswordClass);
 
-const componentName$u = getComponentName('text-area');
+const componentName$w = getComponentName('text-area');
 
 const {
-  host: host$b,
+  host: host$c,
   label: label$6,
   placeholder: placeholder$2,
   inputField: inputField$4,
@@ -3354,10 +3361,10 @@ const {
 const TextAreaClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$b, property: 'width' },
-      hostMinWidth: { ...host$b, property: 'min-width' },
-      hostDirection: { ...host$b, property: 'direction' },
-      fontSize: [host$b, textArea$2],
+      hostWidth: { ...host$c, property: 'width' },
+      hostMinWidth: { ...host$c, property: 'min-width' },
+      hostDirection: { ...host$c, property: 'direction' },
+      fontSize: [host$c, textArea$2],
       fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
       labelTextColor: [
         { ...label$6, property: 'color' },
@@ -3405,17 +3412,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$u,
+    componentName: componentName$w,
   })
 );
 
-customElements.define(componentName$u, TextAreaClass);
+customElements.define(componentName$w, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$t = getComponentName('image');
+const componentName$v = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$t, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$v, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3455,9 +3462,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$t, ImageClass);
+customElements.define(componentName$v, ImageClass);
 
-const componentName$s = getComponentName('combo-box');
+const componentName$u = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3683,7 +3690,7 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$a,
+  host: host$b,
   inputField: inputField$3,
   inputElement: inputElement$1,
   placeholder: placeholder$1,
@@ -3709,10 +3716,10 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$a, property: 'width' },
-      hostDirection: { ...host$a, property: 'direction' },
+      hostWidth: { ...host$b, property: 'width' },
+      hostDirection: { ...host$b, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$a],
+      fontSize: [{}, host$b],
       fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
       labelTextColor: [
         { ...label$5, property: 'color' },
@@ -3840,12 +3847,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$s,
+    componentName: componentName$u,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$s, ComboBoxClass);
+customElements.define(componentName$u, ComboBoxClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -5088,7 +5095,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$r = getComponentName('phone-field-internal');
+const componentName$t = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5100,11 +5107,11 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
 
-let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
+let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$5.observedAttributes || [], inputRelatedAttrs$1);
+    return [].concat(BaseInputClass$6.observedAttributes || [], inputRelatedAttrs$1);
   }
 
   constructor() {
@@ -5272,14 +5279,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
   }
 };
 
-customElements.define(componentName$r, PhoneFieldInternal$1);
+customElements.define(componentName$t, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$q = getComponentName('phone-field');
+const componentName$s = getComponentName('phone-field');
 
-const customMixin$4 = (superclass) =>
+const customMixin$5 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -5291,15 +5298,15 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$r}
+				<${componentName$t}
 					tabindex="-1"
 					slot="input"
-				></${componentName$r}>
+				></${componentName$t}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$r);
+      this.inputElement = this.shadowRoot.querySelector(componentName$t);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5319,7 +5326,7 @@ const customMixin$4 = (superclass) =>
   };
 
 const {
-  host: host$9,
+  host: host$a,
   label: label$4,
   requiredIndicator: requiredIndicator$4,
   inputField: inputField$2,
@@ -5344,7 +5351,7 @@ const PhoneFieldClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$9,
+        host$a,
         inputField$2,
         {
           selector: TextFieldClass.componentName,
@@ -5365,11 +5372,11 @@ const PhoneFieldClass = compose(
         },
       ],
       hostWidth: [
-        { ...host$9, property: 'width' },
+        { ...host$a, property: 'width' },
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
-      hostDirection: { ...host$9, property: 'direction' },
+      hostDirection: { ...host$a, property: 'direction' },
 
       inputBorderStyle: [
         { ...inputField$2, property: 'border-style' },
@@ -5419,7 +5426,7 @@ const PhoneFieldClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$4
+  customMixin$5
 )(
   createProxy({
     slots: [],
@@ -5495,17 +5502,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$s,
   })
 );
 
-customElements.define(componentName$q, PhoneFieldClass);
+customElements.define(componentName$s, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$p = getComponentName('phone-field-internal-input-box');
+const componentName$r = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -5519,11 +5526,11 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
 
-class PhoneFieldInternal extends BaseInputClass$4 {
+class PhoneFieldInternal extends BaseInputClass$5 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$4.observedAttributes || [], observedAttributes$2);
+    return [].concat(BaseInputClass$5.observedAttributes || [], observedAttributes$2);
   }
 
   constructor() {
@@ -5658,13 +5665,13 @@ class PhoneFieldInternal extends BaseInputClass$4 {
   }
 }
 
-customElements.define(componentName$p, PhoneFieldInternal);
+customElements.define(componentName$r, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$o = getComponentName('phone-input-box-field');
+const componentName$q = getComponentName('phone-input-box-field');
 
-const customMixin$3 = (superclass) =>
+const customMixin$4 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -5676,15 +5683,15 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$p}
+				<${componentName$r}
 					tabindex="-1"
 					slot="input"
-				></${componentName$p}>
+				></${componentName$r}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$p);
+      this.inputElement = this.shadowRoot.querySelector(componentName$r);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5701,7 +5708,7 @@ const customMixin$3 = (superclass) =>
     }
   };
 
-const { host: host$8, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
+const { host: host$9, 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' },
@@ -5715,7 +5722,7 @@ const PhoneFieldInputBoxClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$8,
+        host$9,
         inputField$1,
         {
           selector: TextFieldClass.componentName,
@@ -5723,9 +5730,9 @@ const PhoneFieldInputBoxClass = compose(
         },
       ],
       fontFamily: [label$3, errorMessage$4, helperText$3],
-      hostWidth: { ...host$8, property: 'width' },
-      hostMinWidth: { ...host$8, property: 'min-width' },
-      hostDirection: { ...host$8, property: 'direction' },
+      hostWidth: { ...host$9, property: 'width' },
+      hostMinWidth: { ...host$9, property: 'min-width' },
+      hostDirection: { ...host$9, property: 'direction' },
 
       inputBorderStyle: { ...inputField$1, property: 'border-style' },
       inputBorderWidth: { ...inputField$1, property: 'border-width' },
@@ -5751,7 +5758,7 @@ const PhoneFieldInputBoxClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$3
+  customMixin$4
 )(
   createProxy({
     slots: [],
@@ -5817,17 +5824,17 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$o,
+    componentName: componentName$q,
   })
 );
 
-customElements.define(componentName$o, PhoneFieldInputBoxClass);
+customElements.define(componentName$q, PhoneFieldInputBoxClass);
 
-const componentName$n = getComponentName('new-password-internal');
+const componentName$p = getComponentName('new-password-internal');
 
-const componentName$m = getComponentName('new-password');
+const componentName$o = getComponentName('new-password');
 
-const customMixin$2 = (superclass) =>
+const customMixin$3 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
       super.init?.();
@@ -5835,16 +5842,16 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$n}
+			<${componentName$p}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$n}>
+			></${componentName$p}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$n);
+      this.inputElement = this.shadowRoot.querySelector(componentName$p);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5865,7 +5872,7 @@ const customMixin$2 = (superclass) =>
     }
   };
 
-const { host: host$7, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
+const { host: host$8, 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' },
@@ -5878,7 +5885,7 @@ const NewPasswordClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$7,
+        host$8,
         {},
         {
           selector: PasswordClass.componentName,
@@ -5887,19 +5894,19 @@ const NewPasswordClass = compose(
       ],
       fontFamily: [label$2, errorMessage$3, helperText$2],
       errorMessageTextColor: { ...errorMessage$3, property: 'color' },
-      hostWidth: { ...host$7, property: 'width' },
-      hostMinWidth: { ...host$7, property: 'min-width' },
+      hostWidth: { ...host$8, property: 'width' },
+      hostMinWidth: { ...host$8, property: 'min-width' },
       hostDirection: [
-        { ...host$7, property: 'direction' },
+        { ...host$8, property: 'direction' },
         { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
       ],
-      inputsRequiredIndicator: { ...host$7, property: 'content' },
+      inputsRequiredIndicator: { ...host$8, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
     },
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$2
+  customMixin$3
 )(
   createProxy({
     slots: [],
@@ -5951,7 +5958,7 @@ const NewPasswordClass = compose(
 		}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$m,
+    componentName: componentName$o,
   })
 );
 
@@ -5976,11 +5983,11 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
 
-class NewPasswordInternal extends BaseInputClass$3 {
+class NewPasswordInternal extends BaseInputClass$4 {
   static get observedAttributes() {
-    return ['has-confirm'].concat(BaseInputClass$3.observedAttributes || [], inputRelatedAttrs);
+    return ['has-confirm'].concat(BaseInputClass$4.observedAttributes || [], inputRelatedAttrs);
   }
 
   constructor() {
@@ -6141,16 +6148,16 @@ class NewPasswordInternal extends BaseInputClass$3 {
   }
 }
 
-customElements.define(componentName$n, NewPasswordInternal);
+customElements.define(componentName$p, NewPasswordInternal);
 
-customElements.define(componentName$m, NewPasswordClass);
+customElements.define(componentName$o, NewPasswordClass);
 
-const componentName$l = getComponentName('recaptcha');
+const componentName$n = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
-  componentName: componentName$l,
+  componentName: componentName$n,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -6302,7 +6309,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$l, RecaptchaClass);
+customElements.define(componentName$n, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -6316,7 +6323,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$k = getComponentName('upload-file');
+const componentName$m = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -6331,11 +6338,11 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$k, baseSelector: ':host > div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: ':host > div' });
 
-class RawUploadFile extends BaseInputClass$2 {
+class RawUploadFile extends BaseInputClass$3 {
   static get observedAttributes() {
-    return observedAttributes.concat(BaseInputClass$2.observedAttributes || []);
+    return observedAttributes.concat(BaseInputClass$3.observedAttributes || []);
   }
 
   constructor() {
@@ -6503,7 +6510,7 @@ class RawUploadFile extends BaseInputClass$2 {
 }
 
 const buttonVars = ButtonClass.cssVarList;
-const { host: host$6, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
+const { host: host$7, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '::slotted(*)' },
@@ -6522,11 +6529,11 @@ const UploadFileClass = compose(
       borderWidth: {},
       borderStyle: {},
       borderRadius: {},
-      hostHeight: { ...host$6, property: 'height' },
-      hostWidth: { ...host$6, property: 'width' },
+      hostHeight: { ...host$7, property: 'height' },
+      hostWidth: { ...host$7, property: 'width' },
       hostPadding: { property: 'padding' },
       hostDirection: [
-        { ...host$6, property: 'direction' },
+        { ...host$7, property: 'direction' },
         { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
       ],
       gap: { ...wrapper },
@@ -6546,7 +6553,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$k, UploadFileClass);
+customElements.define(componentName$m, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -6644,10 +6651,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$j = getComponentName('button-selection-group-internal');
+const componentName$l = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$j
+  componentName$l
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -6803,7 +6810,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
     }
   };
 
-const { host: host$5, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
+const { host: host$6, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -6812,9 +6819,9 @@ const { host: host$5, label: label$1, requiredIndicator: requiredIndicator$1, in
 };
 
 const buttonSelectionGroupMappings = {
-  hostWidth: { ...host$5, property: 'width' },
-  hostDirection: { ...host$5, property: 'direction' },
-  fontFamily: host$5,
+  hostWidth: { ...host$6, property: 'width' },
+  hostDirection: { ...host$6, property: 'direction' },
+  fontFamily: host$6,
   labelTextColor: [
     { ...label$1, property: 'color' },
     { ...requiredIndicator$1, property: 'color' },
@@ -6879,7 +6886,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$i = getComponentName('button-selection-group');
+const componentName$k = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -6888,19 +6895,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$j}
+      <${componentName$l}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$j}>
+      </${componentName$l}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$j);
+      this.inputElement = this.shadowRoot.querySelector(componentName$l);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6925,16 +6932,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$i,
+    componentName: componentName$k,
   })
 );
 
-customElements.define(componentName$j, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$l, ButtonSelectionGroupInternalClass);
 
-const componentName$h = getComponentName('button-selection-group-item');
+const componentName$j = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$h,
+  componentName: componentName$j,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -7041,14 +7048,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$h, ButtonSelectionGroupItemClass);
+customElements.define(componentName$j, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$i, ButtonSelectionGroupClass);
+customElements.define(componentName$k, ButtonSelectionGroupClass);
 
-const componentName$g = getComponentName('button-multi-selection-group-internal');
+const componentName$i = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$g
+  componentName$i
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -7151,7 +7158,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$f = getComponentName('button-multi-selection-group');
+const componentName$h = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7160,19 +7167,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$g}
+      <${componentName$i}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$g}>
+      </${componentName$i}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$g);
+      this.inputElement = this.shadowRoot.querySelector(componentName$i);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -7197,13 +7204,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$f,
+    componentName: componentName$h,
   })
 );
 
-customElements.define(componentName$g, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$i, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$f, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$h, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7231,9 +7238,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$e = getComponentName('grid-text-column');
+const componentName$g = getComponentName('grid-text-column');
 
-customElements.define(componentName$e, GridTextColumnClass);
+customElements.define(componentName$g, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7268,9 +7275,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$d = getComponentName('grid-custom-column');
+const componentName$f = getComponentName('grid-custom-column');
 
-customElements.define(componentName$d, GridCustomColumnClass);
+customElements.define(componentName$f, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -7329,9 +7336,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$c = getComponentName('grid-selection-column');
+const componentName$e = getComponentName('grid-selection-column');
 
-customElements.define(componentName$c, GridSelectionColumnClass);
+customElements.define(componentName$e, GridSelectionColumnClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -7343,7 +7350,7 @@ const isValidDataType = (data) => {
   return isValid;
 };
 
-const componentName$b = getComponentName('grid');
+const componentName$d = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -7503,7 +7510,7 @@ const GridMixin = (superclass) =>
   };
 
 const {
-  host: host$4,
+  host: host$5,
   headerRow,
   headerRowCell,
   contentRow,
@@ -7538,15 +7545,15 @@ const GridClass = compose(
       fontWeight: { ...contentRow },
       valueTextColor: { ...contentRow, property: 'color' },
       backgroundColor: [
-        { ...host$4, property: 'background-color' },
+        { ...host$5, property: 'background-color' },
         { ...contentRow, property: 'background-color' },
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      borderColor: { ...host$4, property: 'border-color' },
-      borderWidth: { ...host$4, property: 'border-width' },
-      borderStyle: { ...host$4, property: 'border-style' },
-      borderRadius: { ...host$4, property: 'border-radius' },
+      borderColor: { ...host$5, property: 'border-color' },
+      borderWidth: { ...host$5, property: 'border-width' },
+      borderStyle: { ...host$5, property: 'border-style' },
+      borderRadius: { ...host$5, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
       headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
@@ -7579,13 +7586,13 @@ const GridClass = compose(
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$b,
+    componentName: componentName$d,
   })
 );
 
-customElements.define(componentName$b, GridClass);
+customElements.define(componentName$d, GridClass);
 
-const componentName$a = getComponentName('multi-select-combo-box');
+const componentName$c = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -7973,7 +7980,7 @@ const multiSelectComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$3,
+  host: host$4,
   inputField,
   inputElement,
   placeholder,
@@ -8011,10 +8018,10 @@ const {
 const MultiSelectComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$3, property: 'width' },
-      hostDirection: { ...host$3, property: 'direction' },
+      hostWidth: { ...host$4, property: 'width' },
+      hostDirection: { ...host$4, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$3],
+      fontSize: [{}, host$4],
       chipFontSize: { ...chipLabel, property: 'font-size' },
       fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
       labelTextColor: [
@@ -8189,16 +8196,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$a,
+    componentName: componentName$c,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$a, MultiSelectComboBoxClass);
+customElements.define(componentName$c, MultiSelectComboBoxClass);
 
-const componentName$9 = getComponentName('badge');
+const componentName$b = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -8249,11 +8256,11 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
 
-customElements.define(componentName$9, BadgeClass);
+customElements.define(componentName$b, BadgeClass);
 
-const componentName$8 = getComponentName('modal');
+const componentName$a = getComponentName('modal');
 
-const customMixin$1 = (superclass) =>
+const customMixin$2 = (superclass) =>
   class ModalMixinClass extends superclass {
     get opened() {
       return this.getAttribute('opened') === 'true';
@@ -8343,18 +8350,18 @@ const ModalClass = compose(
   }),
   draggableMixin,
   componentNameValidationMixin,
-  customMixin$1
+  customMixin$2
 )(
   createProxy({
     slots: [''],
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$8,
+    componentName: componentName$a,
   })
 );
 
-customElements.define(componentName$8, ModalClass);
+customElements.define(componentName$a, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -8365,7 +8372,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$7 = getComponentName('notification-card');
+const componentName$9 = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -8473,13 +8480,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$7,
+    componentName: componentName$9,
   })
 );
 
-customElements.define(componentName$7, NotificationCardClass);
+customElements.define(componentName$9, NotificationCardClass);
 
-const componentName$6 = getComponentName('notification');
+const componentName$8 = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -8574,14 +8581,14 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$6,
+    componentName: componentName$8,
   })
 );
 
-customElements.define(componentName$6, NotificationClass);
+customElements.define(componentName$8, NotificationClass);
 
-const componentName$5 = getComponentName('avatar');
-class RawAvatar extends createBaseClass({ componentName: componentName$5, baseSelector: ':host > .wrapper' }) {
+const componentName$7 = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > .wrapper' }) {
   constructor() {
     super();
 
@@ -8656,7 +8663,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$5, baseSe
   }
 }
 
-const { host: host$2, editableBadge, avatar: avatar$2 } = {
+const { host: host$3, editableBadge, avatar: avatar$2 } = {
   host: { selector: () => ':host' },
   editableBadge: { selector: '> .editableBadge' },
   avatar: { selector: 'vaadin-avatar' },
@@ -8665,10 +8672,10 @@ const { host: host$2, editableBadge, avatar: avatar$2 } = {
 const AvatarClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$2, property: 'width' },
-      hostHeight: { ...host$2, property: 'height' },
-      cursor: [avatar$2, host$2],
-      hostDirection: { ...host$2, property: 'direction' },
+      hostWidth: { ...host$3, property: 'width' },
+      hostHeight: { ...host$3, property: 'height' },
+      cursor: [avatar$2, host$3],
+      hostDirection: { ...host$3, property: 'direction' },
       avatarTextColor: { ...avatar$2, property: 'color' },
       avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
       editableIconColor: { ...editableBadge, property: 'color' },
@@ -8680,17 +8687,17 @@ const AvatarClass = compose(
   componentNameValidationMixin
 )(RawAvatar);
 
-customElements.define(componentName$5, AvatarClass);
+customElements.define(componentName$7, AvatarClass);
 
-const componentName$4 = getComponentName('mappings-field-internal');
+const componentName$6 = getComponentName('mappings-field-internal');
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
 
-class MappingsFieldInternal extends BaseInputClass$1 {
+class MappingsFieldInternal extends BaseInputClass$2 {
   #errorItem;
 
   static get observedAttributes() {
-    return [].concat(BaseInputClass$1.observedAttributes || [], [
+    return [].concat(BaseInputClass$2.observedAttributes || [], [
       'label-value',
       'label-attr',
       'button-label',
@@ -8743,7 +8750,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
     // before the new item is added and thus returns a wrong result
     setTimeout(() => {
       this.setCustomValidity('');
-      newMappingItem.addEventListener('mapping-item-removed', (e) => {
+      newMappingItem.addEventListener('mapping-item-removed', () => {
         // 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();
@@ -8751,8 +8758,8 @@ class MappingsFieldInternal extends BaseInputClass$1 {
         }
         newMappingItem.remove();
         this.setCustomValidity('');
-        e.stopPropagation();
       });
+      this.dispatchEvent(new CustomEvent('mapping-item-added', { bubbles: true, composed: true }));
       if (focusNewItem) {
         newMappingItem.focus();
       }
@@ -8919,9 +8926,9 @@ class MappingsFieldInternal extends BaseInputClass$1 {
   }
 }
 
-const componentName$3 = getComponentName('mappings-field');
+const componentName$5 = getComponentName('mappings-field');
 
-const customMixin = (superclass) =>
+const customMixin$1 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
     get defaultValues() {
       const defaultValuesAttr = this.getAttribute('default-values');
@@ -8948,14 +8955,14 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$4}
+      <${componentName$6}
         tabindex="-1"
-      ></${componentName$4}>
+      ></${componentName$6}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$4);
+      this.inputElement = this.shadowRoot.querySelector(componentName$6);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -8973,16 +8980,21 @@ const customMixin = (superclass) =>
         ],
       });
 
+      // This is required since when we remove the invalid attribute from the internal mappings field,
+      // we want to reflect the change in the parent component
+      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+
       this.setDefaultValues();
     }
   };
 
 const {
-  host: host$1,
+  host: host$2,
   helperText,
   errorMessage,
   mappingItem,
   labels,
+  labelsText,
   valueLabel,
   attrLabel,
   separator,
@@ -8993,6 +9005,9 @@ const {
   errorMessage: { selector: '::part(error-message)' },
   mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
   labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
+  labelsText: {
+    selector: 'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)',
+  },
   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)' },
@@ -9002,12 +9017,17 @@ const {
 const MappingsFieldClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$1, property: 'width' },
-      hostDirection: { ...host$1, property: 'direction' },
+      hostWidth: { ...host$2, property: 'width' },
+      hostDirection: { ...host$2, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$1, { ...separator, property: 'margin-top' }],
+      fontSize: [{}, host$2, { ...separator, property: 'margin-top' }],
       fontFamily: [helperText, errorMessage, labels],
       separatorFontSize: { ...separator, property: 'font-size' },
+      labelsFontSize: { ...labelsText, property: 'font-size' },
+      labelsLineHeight: [
+        { ...labelsText, property: 'line-height' },
+        { ...labels, property: 'line-height' },
+      ],
       labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
       itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
       valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
@@ -9024,7 +9044,7 @@ const MappingsFieldClass = compose(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin,
-  customMixin
+  customMixin$1
 )(
   createProxy({
     slots: [],
@@ -9071,21 +9091,21 @@ const MappingsFieldClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$3,
+    componentName: componentName$5,
   })
 );
 
-customElements.define(componentName$4, MappingsFieldInternal);
+customElements.define(componentName$6, MappingsFieldInternal);
 
-const componentName$2 = getComponentName('mapping-item');
+const componentName$4 = getComponentName('mapping-item');
 
 const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$2, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
 
-class MappingItem extends BaseInputClass {
+class MappingItem extends BaseInputClass$1 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass.observedAttributes || [], inputAttrs, [
+    return [].concat(BaseInputClass$1.observedAttributes || [], inputAttrs, [
       'separator',
       'options',
       'invalid',
@@ -9168,7 +9188,7 @@ class MappingItem extends BaseInputClass {
 
   initRemoveButton() {
     this.removeButton.addEventListener('click', () =>
-      this.dispatchEvent(new CustomEvent('mapping-item-removed'))
+      this.dispatchEvent(new CustomEvent('mapping-item-removed', { bubbles: true, composed: true }))
     );
   }
 
@@ -9231,9 +9251,9 @@ class MappingItem extends BaseInputClass {
   }
 }
 
-customElements.define(componentName$2, MappingItem);
+customElements.define(componentName$4, MappingItem);
 
-customElements.define(componentName$3, MappingsFieldClass);
+customElements.define(componentName$5, MappingsFieldClass);
 
 function deleteIcon() {
 	return (new DOMParser().parseFromString("<svg width=\"14\" height=\"18\" viewBox=\"0 0 14 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
@@ -9243,9 +9263,9 @@ function editIcon() {
 	return (new DOMParser().parseFromString("<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
 }
 
-const componentName$1 = getComponentName('user-attribute');
+const componentName$3 = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$1,
+  componentName: componentName$3,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -9431,7 +9451,7 @@ class RawUserAttribute extends createBaseClass({
   }
 }
 
-const { host, textFields, buttons, badge: badge$2, labelText, valueText, textWrapper } = {
+const { host: host$1, textFields, buttons, badge: badge$2, labelText, valueText, textWrapper } = {
   host: { selector: () => ':host' },
   textFields: { selector: 'descope-text' },
   valueText: { selector: 'descope-text[data-id="value-text"]' },
@@ -9444,10 +9464,10 @@ const { host, textFields, buttons, badge: badge$2, labelText, valueText, textWra
 const UserAttributeClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host, property: 'width' },
-      hostMinWidth: { ...host, property: 'min-width' },
+      hostWidth: { ...host$1, property: 'width' },
+      hostMinWidth: { ...host$1, property: 'min-width' },
       hostDirection: [
-        { ...host, property: 'direction' },
+        { ...host$1, property: 'direction' },
         { ...textFields, property: TextClass.cssVarList.hostDirection },
         { ...buttons, property: ButtonClass.cssVarList.hostDirection },
         { ...badge$2, property: BadgeClass.cssVarList.hostDirection },
@@ -9462,108 +9482,338 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
 
-customElements.define(componentName$1, UserAttributeClass);
+customElements.define(componentName$3, UserAttributeClass);
 
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+const componentName$2 = getComponentName('saml-group-mappings-internal');
 
-// lodash.set alternative
-const set = (obj, path, value) => {
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+const BaseInputClass = createBaseInputClass({ componentName: componentName$2, baseSelector: '' });
 
-  pathArray.reduce((acc, key, i) => {
-    if (acc[key] === undefined) acc[key] = {};
-    if (i === pathArray.length - 1) acc[key] = value;
-    return acc[key];
-  }, obj);
+class SamlGroupMappingsInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return ['invalid'].concat(BaseInputClass.observedAttributes || []);
+  }
 
-  return obj;
-};
+  constructor() {
+    super();
 
-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));
-  }, {});
-};
+    this.innerHTML = `
+      <descope-text-field variant="body2" bordered="true"></descope-text-field>
+      <descope-mappings-field></descope-mappings-field>
+    `;
 
-const stringifyArray = (strArr) =>
-  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+    this.groupInputElement = this.querySelector('descope-text-field');
+    this.mappingsElement = this.querySelector('descope-mappings-field');
+  }
 
-const getCssVarValue = (val) => {
-  switch (true) {
-    case Array.isArray(val):
-      return stringifyArray(val);
-    case isUrl(val):
-      return `url(${val})`;
-    default:
-      return val;
+  resetInvalidIndication() {
+    this.removeAttribute('invalid');
   }
-};
 
-const themeToCSSVarsObj = (theme) =>
-  transformTheme(theme, [], (path, val) => ({
-    [getVarName(path)]: getCssVarValue(val),
-  }));
+  handleMappingsInvalidChange(changedAttributes) {
+    if (changedAttributes.includes('invalid')) {
+      if (!this.mappingsElement.hasAttribute('invalid')) {
+        this.resetInvalidIndication();
+      }
+    }
+  }
 
-const getThemeRefs = (theme, prefix) =>
-  transformTheme(theme, [], (path) =>
-    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
-  );
+  initFocusHandler() {
+    // 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.mappingsElement.checkValidity()
+          ? this.groupInputElement
+          : this.mappingsElement;
+        focusedElement.focus();
+      }
+    });
+  }
 
-const getThemeVars = (theme, prefix) =>
-  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+  init() {
+    // This needs to be placed before the super.init() call to work
+    this.initFocusHandler();
 
-const globalsThemeToStyle = (theme, themeName = '') => {
-  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
-    (acc, entry) => `${acc}${entry.join(':')};\n`,
-    ''
-  );
+    super.init?.();
 
-  if (!themeName) return style;
+    forwardAttrs(this, this.groupInputElement, {
+      mapAttrs: { 'label-group': 'label' },
+      includeAttrs: ['size', 'label-group', 'readonly', 'disabled'],
+    });
 
-  return `*[data-theme="${themeName}"] {${style}}`;
-};
+    forwardAttrs(this, this.mappingsElement, {
+      includeAttrs: [
+        'size',
+        'full-width',
+        'label-value',
+        'label-attr',
+        'button-label',
+        'separator',
+        'options',
+        'readonly',
+        'disabled',
+        'data-errormessage-pattern-mismatch',
+      ],
+    });
 
-const componentsThemeToStyleObj = (componentsTheme) =>
-  transformTheme(componentsTheme, [], (path, val) => {
-    const [component, ...restPath] = path;
-    const property = restPath.pop();
-    const componentName = getComponentName(component);
+    // Observing the invalid attribute of the mappings field to reset the invalid state for this component.
+    // When an invalid item turns valid, the mappings field will remove the invalid attribute, and at this component
+    // level, we need to remove the invalid attribute as well to be able to mark the component as invalid the next time
+    observeAttributes(this.mappingsElement, this.handleMappingsInvalidChange.bind(this), {
+      includeAttrs: ['invalid'],
+    });
+  }
 
-    if (property === 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
-    }
+  get value() {
+    return {
+      group: this.groupInputElement.value,
+      mappings: this.mappingsElement.value,
+    };
+  }
 
-    // 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;
+  set value(value) {
+    if (value?.group && typeof value.group === 'string') {
+      this.groupInputElement.value = value.group;
+    }
+    if (Array.isArray(value?.mappings)) {
+      this.mappingsElement.value = value.mappings;
+    }
+  }
 
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-      themeName = restPath.shift();
+  getValidity() {
+    if (!this.groupInputElement.checkValidity()) {
+      return this.groupInputElement.validity;
+    }
+    if (!this.mappingsElement.checkValidity()) {
+      return this.mappingsElement.validity;
     }
 
-    // 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"]`;
+    return {};
+  }
 
-      const nextSection = restPath[idx + 1];
+  #handleInvalidState(isInvalid) {
+    if (isInvalid) {
+      if (!this.groupInputElement.checkValidity()) {
+        this.groupInputElement.setAttribute('invalid', 'true');
+        return;
+      }
 
-      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
-        // eslint-disable-next-line no-console
-        console.error(
-          'theme generator',
-          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
-        );
-        return acc;
+      if (!this.mappingsElement.checkValidity()) {
+        this.mappingsElement.setAttribute('invalid', 'true');
       }
+    }
+  }
 
-      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (attrName === 'invalid') {
+      this.#handleInvalidState(newValue === 'true');
+    }
+  }
+}
+
+const componentName$1 = getComponentName('saml-group-mappings');
+
+const customMixin = (superclass) =>
+  class SamlGroupMappingsMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${componentName$2}
+        tabindex="-1"
+      ></${componentName$2}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(componentName$2);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'size',
+          'full-width',
+          'label-group',
+          'label-value',
+          'label-attr',
+          'button-label',
+          'separator',
+          'options',
+          'readonly',
+          'disabled',
+        ],
+      });
+
+      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+    }
+  };
+
+const { host, groupInput } = {
+  host: { selector: () => ':host' },
+  groupInput: { selector: 'descope-text-field' },
+};
+
+const SamlGroupMappingsClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
+    },
+  }),
+  draggableMixin,
+  composedProxyInputMixin({
+    proxyProps: ['value', 'selectionStart'],
+    inputEvent: 'input',
+    triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
+    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-text-field {
+        width: auto;
+      }
+
+      descope-mappings-field {
+        display: block;
+      }
+    `,
+    excludeAttrsSync: [
+      'tabindex',
+      'label-group',
+      'label-value',
+      'label-attr',
+      'button-label',
+      'separator',
+      'options',
+      'error-message',
+    ],
+    componentName: componentName$1,
+  })
+);
+
+customElements.define(componentName$2, SamlGroupMappingsInternal);
+
+customElements.define(componentName$1, SamlGroupMappingsClass);
+
+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
+        console.error(
+          'theme generator',
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+        );
+        return acc;
+      }
+
+      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
     }, '');
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
@@ -9894,7 +10144,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$B = getThemeVars(globals);
+const vars$C = getThemeVars(globals);
 
 const globalRefs$k = getThemeRefs(globals);
 const compVars$5 = ButtonClass.cssVarList;
@@ -9907,7 +10157,7 @@ const mode = {
   surface: globalRefs$k.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$N);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$P);
 
 const button = {
   ...helperTheme$3,
@@ -10014,7 +10264,7 @@ const button = {
   },
 };
 
-const vars$A = {
+const vars$B = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -10022,13 +10272,13 @@ const vars$A = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$A
+  vars: vars$B
 });
 
 const componentName = getComponentName('input-wrapper');
 const globalRefs$j = getThemeRefs(globals);
 
-const [theme$1, refs, vars$z] = createHelperVars(
+const [theme$1, refs, vars$A] = createHelperVars(
   {
     labelTextColor: globalRefs$j.colors.surface.dark,
     valueTextColor: globalRefs$j.colors.surface.contrast,
@@ -10103,22 +10353,64 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$z
+  vars: vars$A
 });
 
-const vars$y = TextFieldClass.cssVarList;
+const vars$z = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$z.hostWidth]: refs.width,
+  [vars$z.hostMinWidth]: refs.minWidth,
+  [vars$z.hostDirection]: refs.direction,
+  [vars$z.fontSize]: refs.fontSize,
+  [vars$z.fontFamily]: refs.fontFamily,
+  [vars$z.labelTextColor]: refs.labelTextColor,
+  [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$z.inputValueTextColor]: refs.valueTextColor,
+  [vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$z.inputBorderWidth]: refs.borderWidth,
+  [vars$z.inputBorderStyle]: refs.borderStyle,
+  [vars$z.inputBorderColor]: refs.borderColor,
+  [vars$z.inputBorderRadius]: refs.borderRadius,
+  [vars$z.inputOutlineWidth]: refs.outlineWidth,
+  [vars$z.inputOutlineStyle]: refs.outlineStyle,
+  [vars$z.inputOutlineColor]: refs.outlineColor,
+  [vars$z.inputOutlineOffset]: refs.outlineOffset,
+  [vars$z.inputBackgroundColor]: refs.backgroundColor,
+  [vars$z.inputHeight]: refs.inputHeight,
+  [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$z.helperTextColor]: refs.helperTextColor,
+  textAlign: {
+    right: { [vars$z.inputTextAlign]: 'right' },
+    left: { [vars$z.inputTextAlign]: 'left' },
+    center: { [vars$z.inputTextAlign]: 'center' },
+  },
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$z
+});
+
+const globalRefs$i = getThemeRefs(globals);
+const vars$y = PasswordClass.cssVarList;
+
+const password = {
   [vars$y.hostWidth]: refs.width,
-  [vars$y.hostMinWidth]: refs.minWidth,
   [vars$y.hostDirection]: refs.direction,
   [vars$y.fontSize]: refs.fontSize,
   [vars$y.fontFamily]: refs.fontFamily,
   [vars$y.labelTextColor]: refs.labelTextColor,
-  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$y.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$y.inputHeight]: refs.inputHeight,
+  [vars$y.inputBackgroundColor]: refs.backgroundColor,
+  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$y.inputValueTextColor]: refs.valueTextColor,
-  [vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$y.inputBorderWidth]: refs.borderWidth,
   [vars$y.inputBorderStyle]: refs.borderStyle,
   [vars$y.inputBorderColor]: refs.borderColor,
@@ -10127,40 +10419,29 @@ const textField = {
   [vars$y.inputOutlineStyle]: refs.outlineStyle,
   [vars$y.inputOutlineColor]: refs.outlineColor,
   [vars$y.inputOutlineOffset]: refs.outlineOffset,
-  [vars$y.inputBackgroundColor]: refs.backgroundColor,
-  [vars$y.inputHeight]: refs.inputHeight,
-  [vars$y.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$y.helperTextColor]: refs.helperTextColor,
-  textAlign: {
-    right: { [vars$y.inputTextAlign]: 'right' },
-    left: { [vars$y.inputTextAlign]: 'left' },
-    center: { [vars$y.inputTextAlign]: 'center' },
-  },
+  [vars$y.revealButtonOffset]: globalRefs$i.spacing.md,
+  [vars$y.revealButtonSize]: refs.toggleButtonSize,
+  [vars$y.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$y
 });
 
-const globalRefs$i = getThemeRefs(globals);
-const vars$x = PasswordClass.cssVarList;
+const vars$x = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$x.hostWidth]: refs.width,
+  [vars$x.hostMinWidth]: refs.minWidth,
   [vars$x.hostDirection]: refs.direction,
   [vars$x.fontSize]: refs.fontSize,
   [vars$x.fontFamily]: refs.fontFamily,
   [vars$x.labelTextColor]: refs.labelTextColor,
   [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$x.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$x.inputHeight]: refs.inputHeight,
-  [vars$x.inputBackgroundColor]: refs.backgroundColor,
-  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$x.inputValueTextColor]: refs.valueTextColor,
-  [vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$x.inputBorderWidth]: refs.borderWidth,
   [vars$x.inputBorderStyle]: refs.borderStyle,
   [vars$x.inputBorderColor]: refs.borderColor,
@@ -10169,20 +10450,21 @@ const password = {
   [vars$x.inputOutlineStyle]: refs.outlineStyle,
   [vars$x.inputOutlineColor]: refs.outlineColor,
   [vars$x.inputOutlineOffset]: refs.outlineOffset,
-  [vars$x.revealButtonOffset]: globalRefs$i.spacing.md,
-  [vars$x.revealButtonSize]: refs.toggleButtonSize,
-  [vars$x.revealButtonColor]: refs.placeholderTextColor,
+  [vars$x.inputBackgroundColor]: refs.backgroundColor,
+  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$x.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$x.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$x
 });
 
-const vars$w = NumberFieldClass.cssVarList;
+const vars$w = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$w.hostWidth]: refs.width,
   [vars$w.hostMinWidth]: refs.minWidth,
   [vars$w.hostDirection]: refs.direction,
@@ -10191,6 +10473,7 @@ const numberField = {
   [vars$w.labelTextColor]: refs.labelTextColor,
   [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$w.inputValueTextColor]: refs.valueTextColor,
+  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$w.inputBorderWidth]: refs.borderWidth,
   [vars$w.inputBorderStyle]: refs.borderStyle,
@@ -10201,197 +10484,164 @@ const numberField = {
   [vars$w.inputOutlineColor]: refs.outlineColor,
   [vars$w.inputOutlineOffset]: refs.outlineOffset,
   [vars$w.inputBackgroundColor]: refs.backgroundColor,
-  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$w.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$w
 });
 
-const vars$v = EmailFieldClass.cssVarList;
+const vars$v = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [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.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$v.inputBackgroundColor]: refs.backgroundColor,
   [vars$v.inputValueTextColor]: refs.valueTextColor,
-  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$v.inputBorderRadius]: refs.borderRadius,
   [vars$v.inputBorderWidth]: refs.borderWidth,
   [vars$v.inputBorderStyle]: refs.borderStyle,
   [vars$v.inputBorderColor]: refs.borderColor,
-  [vars$v.inputBorderRadius]: refs.borderRadius,
   [vars$v.inputOutlineWidth]: refs.outlineWidth,
   [vars$v.inputOutlineStyle]: refs.outlineStyle,
   [vars$v.inputOutlineColor]: refs.outlineColor,
   [vars$v.inputOutlineOffset]: refs.outlineOffset,
-  [vars$v.inputBackgroundColor]: refs.backgroundColor,
-  [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$v.inputHeight]: refs.inputHeight,
+  [vars$v.inputResizeType]: 'vertical',
+  [vars$v.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$v.inputTextAlign]: 'right' },
+    left: { [vars$v.inputTextAlign]: 'left' },
+    center: { [vars$v.inputTextAlign]: 'center' },
+  },
+
+  _readonly: {
+    [vars$v.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$v
 });
 
-const vars$u = TextAreaClass.cssVarList;
+const vars$u = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [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.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$u.labelFontWeight]: '400',
+  [vars$u.labelLineHeight]: checkboxSize,
+  [vars$u.labelSpacing]: '1em',
   [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$u.inputBackgroundColor]: refs.backgroundColor,
-  [vars$u.inputValueTextColor]: refs.valueTextColor,
-  [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$u.inputOutlineWidth]: refs.outlineWidth,
+  [vars$u.inputOutlineOffset]: refs.outlineOffset,
+  [vars$u.inputOutlineColor]: refs.outlineColor,
+  [vars$u.inputOutlineStyle]: refs.outlineStyle,
   [vars$u.inputBorderRadius]: refs.borderRadius,
+  [vars$u.inputBorderColor]: refs.borderColor,
   [vars$u.inputBorderWidth]: refs.borderWidth,
   [vars$u.inputBorderStyle]: refs.borderStyle,
-  [vars$u.inputBorderColor]: refs.borderColor,
-  [vars$u.inputOutlineWidth]: refs.outlineWidth,
-  [vars$u.inputOutlineStyle]: refs.outlineStyle,
-  [vars$u.inputOutlineColor]: refs.outlineColor,
-  [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.inputResizeType]: 'vertical',
-  [vars$u.inputMinHeight]: '5em',
-  textAlign: {
-    right: { [vars$u.inputTextAlign]: 'right' },
-    left: { [vars$u.inputTextAlign]: 'left' },
-    center: { [vars$u.inputTextAlign]: 'center' },
+  [vars$u.inputBackgroundColor]: refs.backgroundColor,
+  [vars$u.inputSize]: checkboxSize,
+
+  _checked: {
+    [vars$u.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$u.inputResizeType]: 'none',
+  _disabled: {
+    [vars$u.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$u
 });
 
-const vars$t = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$h = getThemeRefs(globals);
+const vars$t = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [vars$t.hostWidth]: refs.width,
   [vars$t.hostDirection]: refs.direction,
   [vars$t.fontSize]: refs.fontSize,
   [vars$t.fontFamily]: refs.fontFamily,
-  [vars$t.labelTextColor]: refs.labelTextColor,
-  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$t.labelFontWeight]: '400',
-  [vars$t.labelLineHeight]: checkboxSize,
-  [vars$t.labelSpacing]: '1em',
-  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$t.inputOutlineWidth]: refs.outlineWidth,
   [vars$t.inputOutlineOffset]: refs.outlineOffset,
   [vars$t.inputOutlineColor]: refs.outlineColor,
   [vars$t.inputOutlineStyle]: refs.outlineStyle,
-  [vars$t.inputBorderRadius]: refs.borderRadius,
-  [vars$t.inputBorderColor]: refs.borderColor,
-  [vars$t.inputBorderWidth]: refs.borderWidth,
-  [vars$t.inputBorderStyle]: refs.borderStyle,
-  [vars$t.inputBackgroundColor]: refs.backgroundColor,
-  [vars$t.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars$t.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$t.labelTextColor]: refs.labelTextColor,
-  },
-};
 
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$t
-});
+  [vars$t.trackBorderStyle]: refs.borderStyle,
+  [vars$t.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$t.trackBorderColor]: refs.borderColor,
+  [vars$t.trackBackgroundColor]: refs.backgroundColor,
+  [vars$t.trackBorderRadius]: globalRefs$h.radius.md,
+  [vars$t.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$t.trackHeight]: checkboxHeight,
+
+  [vars$t.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$t.knobRadius]: '50%',
+  [vars$t.knobTopOffset]: '1px',
+  [vars$t.knobLeftOffset]: knobMargin,
+  [vars$t.knobColor]: refs.labelTextColor,
+  [vars$t.knobTransitionDuration]: '0.3s',
 
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
-
-const globalRefs$h = getThemeRefs(globals);
-const vars$s = SwitchToggleClass.cssVarList;
-
-const switchToggle = {
-  [vars$s.hostWidth]: refs.width,
-  [vars$s.hostDirection]: refs.direction,
-  [vars$s.fontSize]: refs.fontSize,
-  [vars$s.fontFamily]: refs.fontFamily,
-
-  [vars$s.inputOutlineWidth]: refs.outlineWidth,
-  [vars$s.inputOutlineOffset]: refs.outlineOffset,
-  [vars$s.inputOutlineColor]: refs.outlineColor,
-  [vars$s.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$s.trackBorderStyle]: refs.borderStyle,
-  [vars$s.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$s.trackBorderColor]: refs.borderColor,
-  [vars$s.trackBackgroundColor]: refs.backgroundColor,
-  [vars$s.trackBorderRadius]: globalRefs$h.radius.md,
-  [vars$s.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$s.trackHeight]: checkboxHeight,
-
-  [vars$s.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$s.knobRadius]: '50%',
-  [vars$s.knobTopOffset]: '1px',
-  [vars$s.knobLeftOffset]: knobMargin,
-  [vars$s.knobColor]: refs.labelTextColor,
-  [vars$s.knobTransitionDuration]: '0.3s',
-
-  [vars$s.labelTextColor]: refs.labelTextColor,
-  [vars$s.labelFontWeight]: '400',
-  [vars$s.labelLineHeight]: '1.35em',
-  [vars$s.labelSpacing]: '1em',
-  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$t.labelTextColor]: refs.labelTextColor,
+  [vars$t.labelFontWeight]: '400',
+  [vars$t.labelLineHeight]: '1.35em',
+  [vars$t.labelSpacing]: '1em',
+  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$s.trackBorderColor]: refs.borderColor,
-    [vars$s.knobLeftOffset]: `calc(100% - var(${vars$s.knobSize}) - ${knobMargin})`,
-    [vars$s.knobColor]: refs.valueTextColor,
-    [vars$s.knobTextColor]: refs.valueTextColor,
+    [vars$t.trackBorderColor]: refs.borderColor,
+    [vars$t.knobLeftOffset]: `calc(100% - var(${vars$t.knobSize}) - ${knobMargin})`,
+    [vars$t.knobColor]: refs.valueTextColor,
+    [vars$t.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$s.knobColor]: globalRefs$h.colors.surface.light,
-    [vars$s.trackBorderColor]: globalRefs$h.colors.surface.light,
-    [vars$s.trackBackgroundColor]: globalRefs$h.colors.surface.main,
-    [vars$s.labelTextColor]: refs.labelTextColor,
+    [vars$t.knobColor]: globalRefs$h.colors.surface.light,
+    [vars$t.trackBorderColor]: globalRefs$h.colors.surface.light,
+    [vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
+    [vars$t.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$s.knobColor]: globalRefs$h.colors.surface.light,
-      [vars$s.trackBackgroundColor]: globalRefs$h.colors.surface.main,
+      [vars$t.knobColor]: globalRefs$h.colors.surface.light,
+      [vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$s.trackBorderColor]: globalRefs$h.colors.error.main,
-    [vars$s.knobColor]: globalRefs$h.colors.error.main,
+    [vars$t.trackBorderColor]: globalRefs$h.colors.error.main,
+    [vars$t.knobColor]: globalRefs$h.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$s
+  vars: vars$t
 });
 
 const globalRefs$g = getThemeRefs(globals);
@@ -10416,7 +10666,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$H
+  componentName$J
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -10502,7 +10752,7 @@ const container = {
   },
 };
 
-const vars$r = {
+const vars$s = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -10510,166 +10760,166 @@ const vars$r = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$r
+  vars: vars$s
 });
 
-const vars$q = LogoClass.cssVarList;
+const vars$r = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$q
+  vars: vars$r
 });
 
-const vars$p = TotpImageClass.cssVarList;
+const vars$q = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$p
+  vars: vars$q
 });
 
-const vars$o = NotpImageClass.cssVarList;
+const vars$p = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$o
+  vars: vars$p
 });
 
 const globalRefs$f = getThemeRefs(globals);
-const vars$n = TextClass.cssVarList;
+const vars$o = TextClass.cssVarList;
 
 const text = {
-  [vars$n.hostDirection]: globalRefs$f.direction,
-  [vars$n.textLineHeight]: '1.35em',
-  [vars$n.textAlign]: 'left',
-  [vars$n.textColor]: globalRefs$f.colors.surface.dark,
+  [vars$o.hostDirection]: globalRefs$f.direction,
+  [vars$o.textLineHeight]: '1.35em',
+  [vars$o.textAlign]: 'left',
+  [vars$o.textColor]: globalRefs$f.colors.surface.dark,
   variant: {
     h1: {
-      [vars$n.fontSize]: globalRefs$f.typography.h1.size,
-      [vars$n.fontWeight]: globalRefs$f.typography.h1.weight,
-      [vars$n.fontFamily]: globalRefs$f.typography.h1.font,
+      [vars$o.fontSize]: globalRefs$f.typography.h1.size,
+      [vars$o.fontWeight]: globalRefs$f.typography.h1.weight,
+      [vars$o.fontFamily]: globalRefs$f.typography.h1.font,
     },
     h2: {
-      [vars$n.fontSize]: globalRefs$f.typography.h2.size,
-      [vars$n.fontWeight]: globalRefs$f.typography.h2.weight,
-      [vars$n.fontFamily]: globalRefs$f.typography.h2.font,
+      [vars$o.fontSize]: globalRefs$f.typography.h2.size,
+      [vars$o.fontWeight]: globalRefs$f.typography.h2.weight,
+      [vars$o.fontFamily]: globalRefs$f.typography.h2.font,
     },
     h3: {
-      [vars$n.fontSize]: globalRefs$f.typography.h3.size,
-      [vars$n.fontWeight]: globalRefs$f.typography.h3.weight,
-      [vars$n.fontFamily]: globalRefs$f.typography.h3.font,
+      [vars$o.fontSize]: globalRefs$f.typography.h3.size,
+      [vars$o.fontWeight]: globalRefs$f.typography.h3.weight,
+      [vars$o.fontFamily]: globalRefs$f.typography.h3.font,
     },
     subtitle1: {
-      [vars$n.fontSize]: globalRefs$f.typography.subtitle1.size,
-      [vars$n.fontWeight]: globalRefs$f.typography.subtitle1.weight,
-      [vars$n.fontFamily]: globalRefs$f.typography.subtitle1.font,
+      [vars$o.fontSize]: globalRefs$f.typography.subtitle1.size,
+      [vars$o.fontWeight]: globalRefs$f.typography.subtitle1.weight,
+      [vars$o.fontFamily]: globalRefs$f.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$n.fontSize]: globalRefs$f.typography.subtitle2.size,
-      [vars$n.fontWeight]: globalRefs$f.typography.subtitle2.weight,
-      [vars$n.fontFamily]: globalRefs$f.typography.subtitle2.font,
+      [vars$o.fontSize]: globalRefs$f.typography.subtitle2.size,
+      [vars$o.fontWeight]: globalRefs$f.typography.subtitle2.weight,
+      [vars$o.fontFamily]: globalRefs$f.typography.subtitle2.font,
     },
     body1: {
-      [vars$n.fontSize]: globalRefs$f.typography.body1.size,
-      [vars$n.fontWeight]: globalRefs$f.typography.body1.weight,
-      [vars$n.fontFamily]: globalRefs$f.typography.body1.font,
+      [vars$o.fontSize]: globalRefs$f.typography.body1.size,
+      [vars$o.fontWeight]: globalRefs$f.typography.body1.weight,
+      [vars$o.fontFamily]: globalRefs$f.typography.body1.font,
     },
     body2: {
-      [vars$n.fontSize]: globalRefs$f.typography.body2.size,
-      [vars$n.fontWeight]: globalRefs$f.typography.body2.weight,
-      [vars$n.fontFamily]: globalRefs$f.typography.body2.font,
+      [vars$o.fontSize]: globalRefs$f.typography.body2.size,
+      [vars$o.fontWeight]: globalRefs$f.typography.body2.weight,
+      [vars$o.fontFamily]: globalRefs$f.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$n.textColor]: globalRefs$f.colors.surface.contrast,
+      [vars$o.textColor]: globalRefs$f.colors.surface.contrast,
     },
     secondary: {
-      [vars$n.textColor]: globalRefs$f.colors.surface.dark,
+      [vars$o.textColor]: globalRefs$f.colors.surface.dark,
     },
     error: {
-      [vars$n.textColor]: globalRefs$f.colors.error.main,
+      [vars$o.textColor]: globalRefs$f.colors.error.main,
     },
     success: {
-      [vars$n.textColor]: globalRefs$f.colors.success.main,
+      [vars$o.textColor]: globalRefs$f.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$n.textAlign]: 'right' },
-    left: { [vars$n.textAlign]: 'left' },
-    center: { [vars$n.textAlign]: 'center' },
+    right: { [vars$o.textAlign]: 'right' },
+    left: { [vars$o.textAlign]: 'left' },
+    center: { [vars$o.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$n.hostWidth]: '100%',
+    [vars$o.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$n.fontStyle]: 'italic',
+    [vars$o.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$n.textTransform]: 'uppercase',
+    [vars$o.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$n.textTransform]: 'lowercase',
+    [vars$o.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$n
+  vars: vars$o
 });
 
 const globalRefs$e = getThemeRefs(globals);
-const vars$m = LinkClass.cssVarList;
+const vars$n = LinkClass.cssVarList;
 
 const link = {
-  [vars$m.hostDirection]: globalRefs$e.direction,
-  [vars$m.cursor]: 'pointer',
+  [vars$n.hostDirection]: globalRefs$e.direction,
+  [vars$n.cursor]: 'pointer',
 
-  [vars$m.textColor]: globalRefs$e.colors.primary.main,
+  [vars$n.textColor]: globalRefs$e.colors.primary.main,
 
   textAlign: {
-    right: { [vars$m.textAlign]: 'right' },
-    left: { [vars$m.textAlign]: 'left' },
-    center: { [vars$m.textAlign]: 'center' },
+    right: { [vars$n.textAlign]: 'right' },
+    left: { [vars$n.textAlign]: 'left' },
+    center: { [vars$n.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$m.hostWidth]: '100%',
+    [vars$n.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$m.textColor]: globalRefs$e.colors.primary.main,
+      [vars$n.textColor]: globalRefs$e.colors.primary.main,
     },
     secondary: {
-      [vars$m.textColor]: globalRefs$e.colors.secondary.main,
+      [vars$n.textColor]: globalRefs$e.colors.secondary.main,
     },
     error: {
-      [vars$m.textColor]: globalRefs$e.colors.error.main,
+      [vars$n.textColor]: globalRefs$e.colors.error.main,
     },
     success: {
-      [vars$m.textColor]: globalRefs$e.colors.success.main,
+      [vars$n.textColor]: globalRefs$e.colors.success.main,
     },
   },
 };
@@ -10677,7 +10927,7 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$m
+  vars: vars$n
 });
 
 const globalRefs$d = getThemeRefs(globals);
@@ -10688,7 +10938,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$F
+  componentName$H
 );
 
 const divider = {
@@ -10719,7 +10969,7 @@ const divider = {
   },
 };
 
-const vars$l = {
+const vars$m = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -10727,93 +10977,93 @@ const vars$l = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$l
+  vars: vars$m
 });
 
-const vars$k = PasscodeClass.cssVarList;
+const vars$l = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$k.hostDirection]: refs.direction,
-  [vars$k.fontFamily]: refs.fontFamily,
-  [vars$k.fontSize]: refs.fontSize,
-  [vars$k.labelTextColor]: refs.labelTextColor,
-  [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$k.digitValueTextColor]: refs.valueTextColor,
-  [vars$k.digitPadding]: '0',
-  [vars$k.digitTextAlign]: 'center',
-  [vars$k.digitSpacing]: '4px',
-  [vars$k.hostWidth]: refs.width,
-  [vars$k.digitOutlineColor]: 'transparent',
-  [vars$k.digitOutlineWidth]: refs.outlineWidth,
-  [vars$k.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$k.digitSize]: refs.inputHeight,
+  [vars$l.hostDirection]: refs.direction,
+  [vars$l.fontFamily]: refs.fontFamily,
+  [vars$l.fontSize]: refs.fontSize,
+  [vars$l.labelTextColor]: refs.labelTextColor,
+  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$l.digitValueTextColor]: refs.valueTextColor,
+  [vars$l.digitPadding]: '0',
+  [vars$l.digitTextAlign]: 'center',
+  [vars$l.digitSpacing]: '4px',
+  [vars$l.hostWidth]: refs.width,
+  [vars$l.digitOutlineColor]: 'transparent',
+  [vars$l.digitOutlineWidth]: refs.outlineWidth,
+  [vars$l.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$l.digitSize]: refs.inputHeight,
 
   size: {
-    xs: { [vars$k.spinnerSize]: '15px' },
-    sm: { [vars$k.spinnerSize]: '20px' },
-    md: { [vars$k.spinnerSize]: '20px' },
-    lg: { [vars$k.spinnerSize]: '20px' },
+    xs: { [vars$l.spinnerSize]: '15px' },
+    sm: { [vars$l.spinnerSize]: '20px' },
+    md: { [vars$l.spinnerSize]: '20px' },
+    lg: { [vars$l.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$k.digitCaretTextColor]: 'transparent',
+    [vars$l.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$k.overlayOpacity]: refs.overlayOpacity,
+    [vars$l.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$k
+  vars: vars$l
 });
 
 const globalRefs$c = getThemeRefs(globals);
-const vars$j = LoaderLinearClass.cssVarList;
+const vars$k = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$j.hostDisplay]: 'inline-block',
-  [vars$j.hostWidth]: '100%',
+  [vars$k.hostDisplay]: 'inline-block',
+  [vars$k.hostWidth]: '100%',
 
-  [vars$j.barColor]: globalRefs$c.colors.surface.contrast,
-  [vars$j.barWidth]: '20%',
+  [vars$k.barColor]: globalRefs$c.colors.surface.contrast,
+  [vars$k.barWidth]: '20%',
 
-  [vars$j.barBackgroundColor]: globalRefs$c.colors.surface.light,
-  [vars$j.barBorderRadius]: '4px',
+  [vars$k.barBackgroundColor]: globalRefs$c.colors.surface.light,
+  [vars$k.barBorderRadius]: '4px',
 
-  [vars$j.animationDuration]: '2s',
-  [vars$j.animationTimingFunction]: 'linear',
-  [vars$j.animationIterationCount]: 'infinite',
-  [vars$j.verticalPadding]: '0.25em',
+  [vars$k.animationDuration]: '2s',
+  [vars$k.animationTimingFunction]: 'linear',
+  [vars$k.animationIterationCount]: 'infinite',
+  [vars$k.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$j.barHeight]: '2px' },
-    sm: { [vars$j.barHeight]: '4px' },
-    md: { [vars$j.barHeight]: '6px' },
-    lg: { [vars$j.barHeight]: '8px' },
+    xs: { [vars$k.barHeight]: '2px' },
+    sm: { [vars$k.barHeight]: '4px' },
+    md: { [vars$k.barHeight]: '6px' },
+    lg: { [vars$k.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$j.barColor]: globalRefs$c.colors.primary.main,
+      [vars$k.barColor]: globalRefs$c.colors.primary.main,
     },
     secondary: {
-      [vars$j.barColor]: globalRefs$c.colors.secondary.main,
+      [vars$k.barColor]: globalRefs$c.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$j.hostDisplay]: 'none',
+    [vars$k.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$j
+  vars: vars$k
 });
 
 const globalRefs$b = getThemeRefs(globals);
@@ -10831,7 +11081,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$I
+  componentName$K
 );
 
 const loaderRadial = {
@@ -10860,7 +11110,7 @@ const loaderRadial = {
     [compVars$2.hostDisplay]: 'none',
   },
 };
-const vars$i = {
+const vars$j = {
   ...compVars$2,
   ...helperVars,
 };
@@ -10868,78 +11118,114 @@ const vars$i = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$i
+  vars: vars$j
 });
 
 const globalRefs$a = getThemeRefs(globals);
-const vars$h = ComboBoxClass.cssVarList;
+const vars$i = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$h.hostWidth]: refs.width,
-  [vars$h.hostDirection]: refs.direction,
-  [vars$h.fontSize]: refs.fontSize,
-  [vars$h.fontFamily]: refs.fontFamily,
-  [vars$h.labelTextColor]: refs.labelTextColor,
-  [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$h.inputBorderColor]: refs.borderColor,
-  [vars$h.inputBorderWidth]: refs.borderWidth,
-  [vars$h.inputBorderStyle]: refs.borderStyle,
-  [vars$h.inputBorderRadius]: refs.borderRadius,
-  [vars$h.inputOutlineColor]: refs.outlineColor,
-  [vars$h.inputOutlineOffset]: refs.outlineOffset,
-  [vars$h.inputOutlineWidth]: refs.outlineWidth,
-  [vars$h.inputOutlineStyle]: refs.outlineStyle,
-  [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$h.inputValueTextColor]: refs.valueTextColor,
-  [vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$h.inputBackgroundColor]: refs.backgroundColor,
-  [vars$h.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$h.inputHeight]: refs.inputHeight,
-  [vars$h.inputDropdownButtonColor]: globalRefs$a.colors.surface.dark,
-  [vars$h.inputDropdownButtonCursor]: 'pointer',
-  [vars$h.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$h.inputDropdownButtonOffset]: globalRefs$a.spacing.xs,
-  [vars$h.overlayItemPaddingInlineStart]: globalRefs$a.spacing.xs,
-  [vars$h.overlayItemPaddingInlineEnd]: globalRefs$a.spacing.lg,
+  [vars$i.hostWidth]: refs.width,
+  [vars$i.hostDirection]: refs.direction,
+  [vars$i.fontSize]: refs.fontSize,
+  [vars$i.fontFamily]: refs.fontFamily,
+  [vars$i.labelTextColor]: refs.labelTextColor,
+  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$i.inputBorderColor]: refs.borderColor,
+  [vars$i.inputBorderWidth]: refs.borderWidth,
+  [vars$i.inputBorderStyle]: refs.borderStyle,
+  [vars$i.inputBorderRadius]: refs.borderRadius,
+  [vars$i.inputOutlineColor]: refs.outlineColor,
+  [vars$i.inputOutlineOffset]: refs.outlineOffset,
+  [vars$i.inputOutlineWidth]: refs.outlineWidth,
+  [vars$i.inputOutlineStyle]: refs.outlineStyle,
+  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$i.inputValueTextColor]: refs.valueTextColor,
+  [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$i.inputBackgroundColor]: refs.backgroundColor,
+  [vars$i.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$i.inputHeight]: refs.inputHeight,
+  [vars$i.inputDropdownButtonColor]: globalRefs$a.colors.surface.dark,
+  [vars$i.inputDropdownButtonCursor]: 'pointer',
+  [vars$i.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$i.inputDropdownButtonOffset]: globalRefs$a.spacing.xs,
+  [vars$i.overlayItemPaddingInlineStart]: globalRefs$a.spacing.xs,
+  [vars$i.overlayItemPaddingInlineEnd]: globalRefs$a.spacing.lg,
 
   _readonly: {
-    [vars$h.inputDropdownButtonCursor]: 'default',
+    [vars$i.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$h.overlayFontSize]: refs.fontSize,
-  [vars$h.overlayFontFamily]: refs.fontFamily,
-  [vars$h.overlayCursor]: 'pointer',
-  [vars$h.overlayItemBoxShadow]: 'none',
-  [vars$h.overlayBackground]: refs.backgroundColor,
-  [vars$h.overlayTextColor]: refs.valueTextColor,
+  [vars$i.overlayFontSize]: refs.fontSize,
+  [vars$i.overlayFontFamily]: refs.fontFamily,
+  [vars$i.overlayCursor]: 'pointer',
+  [vars$i.overlayItemBoxShadow]: 'none',
+  [vars$i.overlayBackground]: refs.backgroundColor,
+  [vars$i.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$h.overlay.minHeight]: '400px',
-  [vars$h.overlay.margin]: '0',
+  [vars$i.overlay.minHeight]: '400px',
+  [vars$i.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$h
+  vars: vars$i
 });
 
-const vars$g = ImageClass.cssVarList;
+const vars$h = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$g
+  vars: vars$h
 });
 
-const vars$f = PhoneFieldClass.cssVarList;
+const vars$g = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$f.hostWidth]: refs.width,
+  [vars$g.hostWidth]: refs.width,
+  [vars$g.hostDirection]: refs.direction,
+  [vars$g.fontSize]: refs.fontSize,
+  [vars$g.fontFamily]: refs.fontFamily,
+  [vars$g.labelTextColor]: refs.labelTextColor,
+  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$g.inputValueTextColor]: refs.valueTextColor,
+  [vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$g.inputBorderStyle]: refs.borderStyle,
+  [vars$g.inputBorderWidth]: refs.borderWidth,
+  [vars$g.inputBorderColor]: refs.borderColor,
+  [vars$g.inputBorderRadius]: refs.borderRadius,
+  [vars$g.inputOutlineStyle]: refs.outlineStyle,
+  [vars$g.inputOutlineWidth]: refs.outlineWidth,
+  [vars$g.inputOutlineColor]: refs.outlineColor,
+  [vars$g.inputOutlineOffset]: refs.outlineOffset,
+  [vars$g.phoneInputWidth]: refs.minWidth,
+  [vars$g.countryCodeInputWidth]: '5em',
+  [vars$g.countryCodeDropdownWidth]: '20em',
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$g
+});
+
+const vars$f = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$f.hostWidth]: '16em',
+  [vars$f.hostMinWidth]: refs.minWidth,
   [vars$f.hostDirection]: refs.direction,
   [vars$f.fontSize]: refs.fontSize,
   [vars$f.fontFamily]: refs.fontFamily,
@@ -10956,178 +11242,142 @@ const phoneField = {
   [vars$f.inputOutlineWidth]: refs.outlineWidth,
   [vars$f.inputOutlineColor]: refs.outlineColor,
   [vars$f.inputOutlineOffset]: refs.outlineOffset,
-  [vars$f.phoneInputWidth]: refs.minWidth,
-  [vars$f.countryCodeInputWidth]: '5em',
-  [vars$f.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$f.hostWidth]: refs.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$f
 });
 
-const vars$e = PhoneFieldInputBoxClass.cssVarList;
+const vars$e = NewPasswordClass.cssVarList;
 
-const phoneInputBoxField = {
-  [vars$e.hostWidth]: '16em',
+const newPassword = {
+  [vars$e.hostWidth]: refs.width,
   [vars$e.hostMinWidth]: refs.minWidth,
   [vars$e.hostDirection]: refs.direction,
   [vars$e.fontSize]: refs.fontSize,
   [vars$e.fontFamily]: refs.fontFamily,
-  [vars$e.labelTextColor]: refs.labelTextColor,
-  [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$e.spaceBetweenInputs]: '1em',
   [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$e.inputValueTextColor]: refs.valueTextColor,
-  [vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$e.inputBorderStyle]: refs.borderStyle,
-  [vars$e.inputBorderWidth]: refs.borderWidth,
-  [vars$e.inputBorderColor]: refs.borderColor,
-  [vars$e.inputBorderRadius]: refs.borderRadius,
-  [vars$e.inputOutlineStyle]: refs.outlineStyle,
-  [vars$e.inputOutlineWidth]: refs.outlineWidth,
-  [vars$e.inputOutlineColor]: refs.outlineColor,
-  [vars$e.inputOutlineOffset]: refs.outlineOffset,
-  _fullWidth: {
-    [vars$e.hostWidth]: refs.width,
-  },
-};
-
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$e
-});
-
-const vars$d = NewPasswordClass.cssVarList;
-
-const newPassword = {
-  [vars$d.hostWidth]: refs.width,
-  [vars$d.hostMinWidth]: refs.minWidth,
-  [vars$d.hostDirection]: refs.direction,
-  [vars$d.fontSize]: refs.fontSize,
-  [vars$d.fontFamily]: refs.fontFamily,
-  [vars$d.spaceBetweenInputs]: '1em',
-  [vars$d.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$d.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$e.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$d
+  vars: vars$e
 });
 
-const vars$c = UploadFileClass.cssVarList;
+const vars$d = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$c.hostDirection]: refs.direction,
-  [vars$c.labelTextColor]: refs.labelTextColor,
-  [vars$c.fontFamily]: refs.fontFamily,
+  [vars$d.hostDirection]: refs.direction,
+  [vars$d.labelTextColor]: refs.labelTextColor,
+  [vars$d.fontFamily]: refs.fontFamily,
 
-  [vars$c.iconSize]: '2em',
+  [vars$d.iconSize]: '2em',
 
-  [vars$c.hostPadding]: '0.75em',
-  [vars$c.gap]: '0.5em',
+  [vars$d.hostPadding]: '0.75em',
+  [vars$d.gap]: '0.5em',
 
-  [vars$c.fontSize]: '16px',
-  [vars$c.titleFontWeight]: '500',
-  [vars$c.lineHeight]: '1em',
+  [vars$d.fontSize]: '16px',
+  [vars$d.titleFontWeight]: '500',
+  [vars$d.lineHeight]: '1em',
 
-  [vars$c.borderWidth]: refs.borderWidth,
-  [vars$c.borderColor]: refs.borderColor,
-  [vars$c.borderRadius]: refs.borderRadius,
-  [vars$c.borderStyle]: 'dashed',
+  [vars$d.borderWidth]: refs.borderWidth,
+  [vars$d.borderColor]: refs.borderColor,
+  [vars$d.borderRadius]: refs.borderRadius,
+  [vars$d.borderStyle]: 'dashed',
 
   _required: {
-    [vars$c.requiredIndicator]: refs.requiredIndicator,
+    [vars$d.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$c.hostHeight]: '196px',
-      [vars$c.hostWidth]: '200px',
-      [vars$c.titleFontSize]: '0.875em',
-      [vars$c.descriptionFontSize]: '0.875em',
-      [vars$c.lineHeight]: '1.25em',
+      [vars$d.hostHeight]: '196px',
+      [vars$d.hostWidth]: '200px',
+      [vars$d.titleFontSize]: '0.875em',
+      [vars$d.descriptionFontSize]: '0.875em',
+      [vars$d.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$c.hostHeight]: '216px',
-      [vars$c.hostWidth]: '230px',
-      [vars$c.titleFontSize]: '1em',
-      [vars$c.descriptionFontSize]: '0.875em',
-      [vars$c.lineHeight]: '1.25em',
+      [vars$d.hostHeight]: '216px',
+      [vars$d.hostWidth]: '230px',
+      [vars$d.titleFontSize]: '1em',
+      [vars$d.descriptionFontSize]: '0.875em',
+      [vars$d.lineHeight]: '1.25em',
     },
     md: {
-      [vars$c.hostHeight]: '256px',
-      [vars$c.hostWidth]: '312px',
-      [vars$c.titleFontSize]: '1.125em',
-      [vars$c.descriptionFontSize]: '1em',
-      [vars$c.lineHeight]: '1.5em',
+      [vars$d.hostHeight]: '256px',
+      [vars$d.hostWidth]: '312px',
+      [vars$d.titleFontSize]: '1.125em',
+      [vars$d.descriptionFontSize]: '1em',
+      [vars$d.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$c.hostHeight]: '280px',
-      [vars$c.hostWidth]: '336px',
-      [vars$c.titleFontSize]: '1.125em',
-      [vars$c.descriptionFontSize]: '1.125em',
-      [vars$c.lineHeight]: '1.75em',
+      [vars$d.hostHeight]: '280px',
+      [vars$d.hostWidth]: '336px',
+      [vars$d.titleFontSize]: '1.125em',
+      [vars$d.descriptionFontSize]: '1.125em',
+      [vars$d.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$c.hostWidth]: refs.width,
+    [vars$d.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$c
+  vars: vars$d
 });
 
 const globalRefs$9 = getThemeRefs(globals);
 
-const vars$b = ButtonSelectionGroupItemClass.cssVarList;
+const vars$c = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$b.hostDirection]: 'inherit',
-  [vars$b.backgroundColor]: globalRefs$9.colors.surface.main,
-  [vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
-  [vars$b.borderColor]: globalRefs$9.colors.surface.light,
-  [vars$b.borderStyle]: 'solid',
-  [vars$b.borderRadius]: globalRefs$9.radius.sm,
-  [vars$b.outlineColor]: 'transparent',
-  [vars$b.borderWidth]: globalRefs$9.border.xs,
+  [vars$c.hostDirection]: 'inherit',
+  [vars$c.backgroundColor]: globalRefs$9.colors.surface.main,
+  [vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
+  [vars$c.borderColor]: globalRefs$9.colors.surface.light,
+  [vars$c.borderStyle]: 'solid',
+  [vars$c.borderRadius]: globalRefs$9.radius.sm,
+  [vars$c.outlineColor]: 'transparent',
+  [vars$c.borderWidth]: globalRefs$9.border.xs,
 
   _hover: {
-    [vars$b.backgroundColor]: globalRefs$9.colors.surface.highlight,
+    [vars$c.backgroundColor]: globalRefs$9.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$b.outlineColor]: globalRefs$9.colors.surface.light,
+    [vars$c.outlineColor]: globalRefs$9.colors.surface.light,
   },
 
   _selected: {
-    [vars$b.borderColor]: globalRefs$9.colors.surface.contrast,
-    [vars$b.backgroundColor]: globalRefs$9.colors.surface.contrast,
-    [vars$b.labelTextColor]: globalRefs$9.colors.surface.main,
+    [vars$c.borderColor]: globalRefs$9.colors.surface.contrast,
+    [vars$c.backgroundColor]: globalRefs$9.colors.surface.contrast,
+    [vars$c.labelTextColor]: globalRefs$9.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$b
+  vars: vars$c
 });
 
 const globalRefs$8 = getThemeRefs(globals);
@@ -11142,28 +11392,28 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostWidth]: refs.width,
 });
 
-const vars$a = ButtonSelectionGroupClass.cssVarList;
+const vars$b = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$a),
+  ...createBaseButtonSelectionGroupMappings(vars$b),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$a
+  vars: vars$b
 });
 
-const vars$9 = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$a = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$9),
+  ...createBaseButtonSelectionGroupMappings(vars$a),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$9
+  vars: vars$a
 });
 
 const globalRefs$7 = getThemeRefs(globals);
@@ -11176,46 +11426,46 @@ const modal = {
   [compVars$1.overlayWidth]: '540px',
 };
 
-const vars$8 = {
+const vars$9 = {
   ...compVars$1,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$8
+  vars: vars$9
 });
 
 const globalRefs$6 = getThemeRefs(globals);
-const vars$7 = GridClass.cssVarList;
+const vars$8 = GridClass.cssVarList;
 
 const grid = {
-  [vars$7.hostWidth]: '100%',
-  [vars$7.hostHeight]: '100%',
-  [vars$7.hostMinHeight]: '400px',
-  [vars$7.fontWeight]: '400',
-  [vars$7.backgroundColor]: globalRefs$6.colors.surface.main,
+  [vars$8.hostWidth]: '100%',
+  [vars$8.hostHeight]: '100%',
+  [vars$8.hostMinHeight]: '400px',
+  [vars$8.fontWeight]: '400',
+  [vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
 
-  [vars$7.fontSize]: refs.fontSize,
-  [vars$7.fontFamily]: refs.fontFamily,
+  [vars$8.fontSize]: refs.fontSize,
+  [vars$8.fontFamily]: refs.fontFamily,
 
-  [vars$7.sortIndicatorsColor]: globalRefs$6.colors.surface.light,
-  [vars$7.activeSortIndicator]: globalRefs$6.colors.surface.dark,
-  [vars$7.resizeHandleColor]: globalRefs$6.colors.surface.light,
+  [vars$8.sortIndicatorsColor]: globalRefs$6.colors.surface.light,
+  [vars$8.activeSortIndicator]: globalRefs$6.colors.surface.dark,
+  [vars$8.resizeHandleColor]: globalRefs$6.colors.surface.light,
 
-  [vars$7.borderWidth]: refs.borderWidth,
-  [vars$7.borderStyle]: refs.borderStyle,
-  [vars$7.borderRadius]: refs.borderRadius,
-  [vars$7.borderColor]: 'transparent',
+  [vars$8.borderWidth]: refs.borderWidth,
+  [vars$8.borderStyle]: refs.borderStyle,
+  [vars$8.borderRadius]: refs.borderRadius,
+  [vars$8.borderColor]: 'transparent',
 
-  [vars$7.headerRowTextColor]: globalRefs$6.colors.surface.dark,
-  [vars$7.separatorColor]: globalRefs$6.colors.surface.light,
+  [vars$8.headerRowTextColor]: globalRefs$6.colors.surface.dark,
+  [vars$8.separatorColor]: globalRefs$6.colors.surface.light,
 
-  [vars$7.valueTextColor]: globalRefs$6.colors.surface.contrast,
-  [vars$7.selectedBackgroundColor]: globalRefs$6.colors.surface.highlight,
+  [vars$8.valueTextColor]: globalRefs$6.colors.surface.contrast,
+  [vars$8.selectedBackgroundColor]: globalRefs$6.colors.surface.highlight,
 
   _bordered: {
-    [vars$7.borderColor]: refs.borderColor,
+    [vars$8.borderColor]: refs.borderColor,
   },
 };
 
@@ -11223,53 +11473,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$7
+  vars: vars$8
 });
 
 const globalRefs$5 = getThemeRefs(globals);
-const vars$6 = NotificationCardClass.cssVarList;
+const vars$7 = NotificationCardClass.cssVarList;
 
 const shadowColor = '#00000020';
 
 const notification = {
-  [vars$6.hostMinWidth]: '415px',
-  [vars$6.fontFamily]: globalRefs$5.fonts.font1.family,
-  [vars$6.fontSize]: globalRefs$5.typography.body1.size,
-  [vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
-  [vars$6.textColor]: globalRefs$5.colors.surface.contrast,
-  [vars$6.boxShadow]: `${globalRefs$5.shadow.wide.xl} ${shadowColor}, ${globalRefs$5.shadow.narrow.xl} ${shadowColor}`,
-  [vars$6.verticalPadding]: '0.625em',
-  [vars$6.horizontalPadding]: '1.5em',
-  [vars$6.borderRadius]: globalRefs$5.radius.xs,
+  [vars$7.hostMinWidth]: '415px',
+  [vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
+  [vars$7.fontSize]: globalRefs$5.typography.body1.size,
+  [vars$7.backgroundColor]: globalRefs$5.colors.surface.main,
+  [vars$7.textColor]: globalRefs$5.colors.surface.contrast,
+  [vars$7.boxShadow]: `${globalRefs$5.shadow.wide.xl} ${shadowColor}, ${globalRefs$5.shadow.narrow.xl} ${shadowColor}`,
+  [vars$7.verticalPadding]: '0.625em',
+  [vars$7.horizontalPadding]: '1.5em',
+  [vars$7.borderRadius]: globalRefs$5.radius.xs,
 
   _bordered: {
-    [vars$6.borderWidth]: globalRefs$5.border.sm,
-    [vars$6.borderStyle]: 'solid',
-    [vars$6.borderColor]: 'transparent',
+    [vars$7.borderWidth]: globalRefs$5.border.sm,
+    [vars$7.borderStyle]: 'solid',
+    [vars$7.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$6.fontSize]: '12px' },
-    sm: { [vars$6.fontSize]: '14px' },
-    md: { [vars$6.fontSize]: '16px' },
-    lg: { [vars$6.fontSize]: '18px' },
+    xs: { [vars$7.fontSize]: '12px' },
+    sm: { [vars$7.fontSize]: '14px' },
+    md: { [vars$7.fontSize]: '16px' },
+    lg: { [vars$7.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$6.backgroundColor]: globalRefs$5.colors.primary.main,
-      [vars$6.textColor]: globalRefs$5.colors.primary.contrast,
-      [vars$6.borderColor]: globalRefs$5.colors.primary.light,
+      [vars$7.backgroundColor]: globalRefs$5.colors.primary.main,
+      [vars$7.textColor]: globalRefs$5.colors.primary.contrast,
+      [vars$7.borderColor]: globalRefs$5.colors.primary.light,
     },
     success: {
-      [vars$6.backgroundColor]: globalRefs$5.colors.success.main,
-      [vars$6.textColor]: globalRefs$5.colors.success.contrast,
-      [vars$6.borderColor]: globalRefs$5.colors.success.light,
+      [vars$7.backgroundColor]: globalRefs$5.colors.success.main,
+      [vars$7.textColor]: globalRefs$5.colors.success.contrast,
+      [vars$7.borderColor]: globalRefs$5.colors.success.light,
     },
     error: {
-      [vars$6.backgroundColor]: globalRefs$5.colors.error.main,
-      [vars$6.textColor]: globalRefs$5.colors.error.contrast,
-      [vars$6.borderColor]: globalRefs$5.colors.error.light,
+      [vars$7.backgroundColor]: globalRefs$5.colors.error.main,
+      [vars$7.textColor]: globalRefs$5.colors.error.contrast,
+      [vars$7.borderColor]: globalRefs$5.colors.error.light,
     },
   },
 };
@@ -11277,128 +11527,128 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$6
+  vars: vars$7
 });
 
 const globalRefs$4 = getThemeRefs(globals);
-const vars$5 = MultiSelectComboBoxClass.cssVarList;
+const vars$6 = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$5.hostWidth]: refs.width,
-  [vars$5.hostDirection]: refs.direction,
-  [vars$5.fontSize]: refs.fontSize,
-  [vars$5.fontFamily]: refs.fontFamily,
-  [vars$5.labelTextColor]: refs.labelTextColor,
-  [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$5.inputBorderColor]: refs.borderColor,
-  [vars$5.inputBorderWidth]: refs.borderWidth,
-  [vars$5.inputBorderStyle]: refs.borderStyle,
-  [vars$5.inputBorderRadius]: refs.borderRadius,
-  [vars$5.inputOutlineColor]: refs.outlineColor,
-  [vars$5.inputOutlineOffset]: refs.outlineOffset,
-  [vars$5.inputOutlineWidth]: refs.outlineWidth,
-  [vars$5.inputOutlineStyle]: refs.outlineStyle,
-  [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$5.inputValueTextColor]: refs.valueTextColor,
-  [vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$5.inputBackgroundColor]: refs.backgroundColor,
-  [vars$5.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$5.inputVerticalPadding]: refs.verticalPadding,
-  [vars$5.inputHeight]: refs.inputHeight,
-  [vars$5.inputDropdownButtonColor]: globalRefs$4.colors.surface.dark,
-  [vars$5.inputDropdownButtonCursor]: 'pointer',
-  [vars$5.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$5.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
-  [vars$5.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
-  [vars$5.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
-  [vars$5.chipFontSize]: refs.chipFontSize,
-  [vars$5.chipTextColor]: globalRefs$4.colors.surface.contrast,
-  [vars$5.chipBackgroundColor]: globalRefs$4.colors.surface.light,
+  [vars$6.hostWidth]: refs.width,
+  [vars$6.hostDirection]: refs.direction,
+  [vars$6.fontSize]: refs.fontSize,
+  [vars$6.fontFamily]: refs.fontFamily,
+  [vars$6.labelTextColor]: refs.labelTextColor,
+  [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$6.inputBorderColor]: refs.borderColor,
+  [vars$6.inputBorderWidth]: refs.borderWidth,
+  [vars$6.inputBorderStyle]: refs.borderStyle,
+  [vars$6.inputBorderRadius]: refs.borderRadius,
+  [vars$6.inputOutlineColor]: refs.outlineColor,
+  [vars$6.inputOutlineOffset]: refs.outlineOffset,
+  [vars$6.inputOutlineWidth]: refs.outlineWidth,
+  [vars$6.inputOutlineStyle]: refs.outlineStyle,
+  [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$6.inputValueTextColor]: refs.valueTextColor,
+  [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$6.inputBackgroundColor]: refs.backgroundColor,
+  [vars$6.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$6.inputVerticalPadding]: refs.verticalPadding,
+  [vars$6.inputHeight]: refs.inputHeight,
+  [vars$6.inputDropdownButtonColor]: globalRefs$4.colors.surface.dark,
+  [vars$6.inputDropdownButtonCursor]: 'pointer',
+  [vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$6.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
+  [vars$6.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
+  [vars$6.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
+  [vars$6.chipFontSize]: refs.chipFontSize,
+  [vars$6.chipTextColor]: globalRefs$4.colors.surface.contrast,
+  [vars$6.chipBackgroundColor]: globalRefs$4.colors.surface.light,
 
   _readonly: {
-    [vars$5.inputDropdownButtonCursor]: 'default',
+    [vars$6.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$5.overlayFontSize]: refs.fontSize,
-  [vars$5.overlayFontFamily]: refs.fontFamily,
-  [vars$5.overlayCursor]: 'pointer',
-  [vars$5.overlayItemBoxShadow]: 'none',
-  [vars$5.overlayBackground]: refs.backgroundColor,
-  [vars$5.overlayTextColor]: refs.valueTextColor,
+  [vars$6.overlayFontSize]: refs.fontSize,
+  [vars$6.overlayFontFamily]: refs.fontFamily,
+  [vars$6.overlayCursor]: 'pointer',
+  [vars$6.overlayItemBoxShadow]: 'none',
+  [vars$6.overlayBackground]: refs.backgroundColor,
+  [vars$6.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$5.overlay.minHeight]: '400px',
-  [vars$5.overlay.margin]: '0',
+  [vars$6.overlay.minHeight]: '400px',
+  [vars$6.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$5
+  vars: vars$6
 });
 
 const globalRefs$3 = getThemeRefs(globals);
-const vars$4 = BadgeClass.cssVarList;
+const vars$5 = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$4.hostWidth]: 'fit-content',
-  [vars$4.hostDirection]: globalRefs$3.direction,
+  [vars$5.hostWidth]: 'fit-content',
+  [vars$5.hostDirection]: globalRefs$3.direction,
 
-  [vars$4.textAlign]: 'center',
+  [vars$5.textAlign]: 'center',
 
-  [vars$4.fontFamily]: globalRefs$3.fonts.font1.family,
-  [vars$4.fontWeight]: '400',
+  [vars$5.fontFamily]: globalRefs$3.fonts.font1.family,
+  [vars$5.fontWeight]: '400',
 
-  [vars$4.verticalPadding]: '0.25em',
-  [vars$4.horizontalPadding]: '0.5em',
+  [vars$5.verticalPadding]: '0.25em',
+  [vars$5.horizontalPadding]: '0.5em',
 
-  [vars$4.borderWidth]: globalRefs$3.border.xs,
-  [vars$4.borderRadius]: globalRefs$3.radius.xs,
-  [vars$4.borderColor]: 'transparent',
-  [vars$4.borderStyle]: 'solid',
+  [vars$5.borderWidth]: globalRefs$3.border.xs,
+  [vars$5.borderRadius]: globalRefs$3.radius.xs,
+  [vars$5.borderColor]: 'transparent',
+  [vars$5.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$4.hostWidth]: '100%',
+    [vars$5.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$4.fontSize]: '12px' },
-    sm: { [vars$4.fontSize]: '14px' },
-    md: { [vars$4.fontSize]: '16px' },
-    lg: { [vars$4.fontSize]: '18px' },
+    xs: { [vars$5.fontSize]: '12px' },
+    sm: { [vars$5.fontSize]: '14px' },
+    md: { [vars$5.fontSize]: '16px' },
+    lg: { [vars$5.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$4.textColor]: globalRefs$3.colors.surface.dark,
+      [vars$5.textColor]: globalRefs$3.colors.surface.dark,
       _bordered: {
-        [vars$4.borderColor]: globalRefs$3.colors.surface.light,
+        [vars$5.borderColor]: globalRefs$3.colors.surface.light,
       },
     },
     primary: {
-      [vars$4.textColor]: globalRefs$3.colors.primary.main,
+      [vars$5.textColor]: globalRefs$3.colors.primary.main,
       _bordered: {
-        [vars$4.borderColor]: globalRefs$3.colors.primary.light,
+        [vars$5.borderColor]: globalRefs$3.colors.primary.light,
       },
     },
     secondary: {
-      [vars$4.textColor]: globalRefs$3.colors.secondary.main,
+      [vars$5.textColor]: globalRefs$3.colors.secondary.main,
       _bordered: {
-        [vars$4.borderColor]: globalRefs$3.colors.secondary.light,
+        [vars$5.borderColor]: globalRefs$3.colors.secondary.light,
       },
     },
     error: {
-      [vars$4.textColor]: globalRefs$3.colors.error.main,
+      [vars$5.textColor]: globalRefs$3.colors.error.main,
       _bordered: {
-        [vars$4.borderColor]: globalRefs$3.colors.error.light,
+        [vars$5.borderColor]: globalRefs$3.colors.error.light,
       },
     },
     success: {
-      [vars$4.textColor]: globalRefs$3.colors.success.main,
+      [vars$5.textColor]: globalRefs$3.colors.success.main,
       _bordered: {
-        [vars$4.borderColor]: globalRefs$3.colors.success.light,
+        [vars$5.borderColor]: globalRefs$3.colors.success.light,
       },
     },
   },
@@ -11407,7 +11657,7 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$4
+  vars: vars$5
 });
 
 const globalRefs$2 = getThemeRefs(globals);
@@ -11445,62 +11695,79 @@ const avatar = {
   },
 };
 
-const vars$3 = {
+const vars$4 = {
   ...compVars,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$3
+  vars: vars$4
 });
 
 const globalRefs$1 = getThemeRefs(globals);
 
-const vars$2 = MappingsFieldClass.cssVarList;
+const vars$3 = MappingsFieldClass.cssVarList;
 
 const mappingsField = {
-  [vars$2.hostWidth]: refs.width,
-  [vars$2.hostDirection]: refs.direction,
-  [vars$2.fontSize]: refs.fontSize,
-  [vars$2.fontFamily]: refs.fontFamily,
-  [vars$2.separatorFontSize]: '14px',
-  [vars$2.labelTextColor]: refs.labelTextColor,
-  [vars$2.itemMarginBottom]: '1em',
+  [vars$3.hostWidth]: refs.width,
+  [vars$3.hostDirection]: refs.direction,
+  [vars$3.fontSize]: refs.fontSize,
+  [vars$3.fontFamily]: refs.fontFamily,
+  [vars$3.separatorFontSize]: '14px',
+  [vars$3.labelsFontSize]: '14px',
+  [vars$3.labelsLineHeight]: '1',
+  [vars$3.labelsMarginBottom]: '6px',
+  [vars$3.labelTextColor]: refs.labelTextColor,
+  [vars$3.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$2.valueLabelMinWidth]: refs.minWidth,
+  [vars$3.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$2.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$1.border.xs})`,
-  [vars$2.labelsMarginBottom]: `calc(${globalRefs$1.typography.body2.size} / 2)`,
-  [vars$2.separatorWidth]: '70px',
-  [vars$2.removeButtonWidth]: '60px',
+  [vars$3.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$1.border.xs})`,
+  [vars$3.separatorWidth]: '70px',
+  [vars$3.removeButtonWidth]: '60px',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
-  vars: vars$2
+  vars: vars$3
 });
 
 const globalRefs = getThemeRefs(globals);
-const vars$1 = UserAttributeClass.cssVarList;
+const vars$2 = UserAttributeClass.cssVarList;
 
 const userAttribute = {
-  [vars$1.hostDirection]: globalRefs.direction,
-  [vars$1.labelTextWidth]: '150px',
-  [vars$1.valueTextWidth]: '200px',
-  [vars$1.badgeMaxWidth]: '85px',
-  [vars$1.itemsGap]: '16px',
-  [vars$1.hostMinWidth]: '530px',
+  [vars$2.hostDirection]: globalRefs.direction,
+  [vars$2.labelTextWidth]: '150px',
+  [vars$2.valueTextWidth]: '200px',
+  [vars$2.badgeMaxWidth]: '85px',
+  [vars$2.itemsGap]: '16px',
+  [vars$2.hostMinWidth]: '530px',
   _fullWidth: {
-    [vars$1.hostWidth]: '100%',
+    [vars$2.hostWidth]: '100%',
   },
 };
 
 var userAttribute$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAttribute,
+  vars: vars$2
+});
+
+const vars$1 = SamlGroupMappingsClass.cssVarList;
+
+const samlGroupMappings = {
+  [vars$1.hostWidth]: refs.width,
+  [vars$1.hostDirection]: refs.direction,
+  [vars$1.groupNameInputMarginBottom]: '1em',
+};
+
+var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: samlGroupMappings,
+  samlGroupMappings: samlGroupMappings,
   vars: vars$1
 });
 
@@ -11541,6 +11808,7 @@ const components = {
   avatar: avatar$1,
   mappingsField: mappingsField$1,
   userAttribute: userAttribute$1,
+  samlGroupMappings: samlGroupMappings$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -11553,7 +11821,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$B, components: vars };
+const themeVars = { globals: vars$C, components: vars };
 
 const colors = {
   surface: {
@@ -11599,5 +11867,5 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-export { AvatarClass, 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, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AvatarClass, 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, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map