@descope/web-components-ui 1.0.288 → 1.0.290

package/dist/index.esm.js

@@ -209,6 +209,10 @@ class ComponentsThemeManager {
     this.#themes = themes;
     this.#notify();
   }
+
+  get hasThemes() {
+    return !!Object.keys(this.#themes).length;
+  }
 }
 
 const componentsThemeManager = new ComponentsThemeManager();
@@ -1343,7 +1347,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$M = getComponentName('button');
+const componentName$N = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1381,7 +1385,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$j, label: label$a } = {
+const { host: host$k, label: label$a } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
 };
@@ -1393,7 +1397,7 @@ const ButtonClass = compose(
     mappings: {
       hostWidth: { property: 'width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$j, property: 'direction' },
+      hostDirection: { ...host$k, property: 'direction' },
       fontSize: {},
       fontFamily: {},
 
@@ -1445,7 +1449,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$M,
+    componentName: componentName$N,
   })
 );
 
@@ -1482,7 +1486,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$M, ButtonClass);
+customElements.define(componentName$N, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1492,11 +1496,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$L = getComponentName('boolean-field-internal');
+const componentName$M = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$L, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$M, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -1572,14 +1576,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$L}
+				<${componentName$M}
 					tabindex="-1"
 					slot="input"
-				></${componentName$L}>
+				></${componentName$M}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$L);
+      this.inputElement = this.shadowRoot.querySelector(componentName$M);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1778,10 +1782,10 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$K = getComponentName('checkbox');
+const componentName$L = getComponentName('checkbox');
 
 const {
-  host: host$i,
+  host: host$j,
   component: component$1,
   checkboxElement,
   checkboxSurface,
@@ -1803,10 +1807,10 @@ const {
 const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$i, property: 'width' },
-      hostDirection: { ...host$i, property: 'direction' },
+      hostWidth: { ...host$j, property: 'width' },
+      hostDirection: { ...host$j, property: 'direction' },
 
-      fontSize: [host$i, checkboxElement, checkboxLabel$1],
+      fontSize: [host$j, checkboxElement, checkboxLabel$1],
       fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
@@ -1884,18 +1888,18 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$K,
+    componentName: componentName$L,
   })
 );
 
-customElements.define(componentName$L, BooleanInputInternal);
+customElements.define(componentName$M, BooleanInputInternal);
 
-customElements.define(componentName$K, CheckboxClass);
+customElements.define(componentName$L, CheckboxClass);
 
-const componentName$J = getComponentName('switch-toggle');
+const componentName$K = getComponentName('switch-toggle');
 
 const {
-  host: host$h,
+  host: host$i,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
@@ -1917,8 +1921,8 @@ const {
 const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$h, property: 'width' },
-      hostDirection: { ...host$h, property: 'direction' },
+      hostWidth: { ...host$i, property: 'width' },
+      hostDirection: { ...host$i, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
       fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
@@ -2024,17 +2028,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$J,
+    componentName: componentName$K,
   })
 );
 
-customElements.define(componentName$J, SwitchToggleClass);
+customElements.define(componentName$K, SwitchToggleClass);
 
-const componentName$I = getComponentName('loader-linear');
+const componentName$J = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$I;
+    return componentName$J;
   }
 
   constructor() {
@@ -2070,18 +2074,18 @@ const selectors$2 = {
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$g } = selectors$2;
+const { after: after$1, host: host$h } = selectors$2;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$g, property: 'width' },
+      hostWidth: { ...host$h, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$g, property: 'padding-top' },
-        { ...host$g, property: 'padding-bottom' },
+        { ...host$h, property: 'padding-top' },
+        { ...host$h, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after$1, property: 'background-color' },
@@ -2095,11 +2099,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$I, LoaderLinearClass);
+customElements.define(componentName$J, LoaderLinearClass);
 
-const componentName$H = getComponentName('loader-radial');
+const componentName$I = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2143,11 +2147,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$H, LoaderRadialClass);
+customElements.define(componentName$I, LoaderRadialClass);
 
-const componentName$G = getComponentName('container');
+const componentName$H = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$G, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$H, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2200,13 +2204,13 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$G, ContainerClass);
+customElements.define(componentName$H, ContainerClass);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$F = getComponentName('text');
+const componentName$G = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2220,7 +2224,7 @@ class RawText extends createBaseClass({ componentName: componentName$F, baseSele
 				display: inline-block;
 			}
 		</style>
-		<slot></slot>
+		<slot part="text-wrapper"></slot>
 		`;
   }
 }
@@ -2266,8 +2270,8 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const componentName$E = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > div' }) {
+const componentName$F = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2313,7 +2317,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$E, baseS
 }
 
 const textVars$3 = TextClass.cssVarList;
-const { host: host$f, before, after, text: text$3 } = {
+const { host: host$g, before, after, text: text$3 } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
   after: { selector: '::after' },
@@ -2323,8 +2327,8 @@ const { host: host$f, before, after, text: text$3 } = {
 const DividerClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$f, property: 'width' },
-      hostPadding: { ...host$f, property: 'padding' },
+      hostWidth: { ...host$g, property: 'width' },
+      hostPadding: { ...host$g, property: 'padding' },
       hostDirection: { ...text$3, property: 'direction' },
 
       minHeight: {},
@@ -2366,12 +2370,12 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$F, TextClass);
+customElements.define(componentName$G, TextClass);
 
-customElements.define(componentName$E, DividerClass);
+customElements.define(componentName$F, DividerClass);
 
 const {
-  host: host$e,
+  host: host$f,
   label: label$9,
   placeholder: placeholder$3,
   requiredIndicator: requiredIndicator$9,
@@ -2396,12 +2400,12 @@ const {
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host$e],
+  fontSize: [{}, host$f],
   fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
 
-  hostWidth: { ...host$e, property: 'width' },
-  hostMinWidth: { ...host$e, property: 'min-width' },
-  hostDirection: { ...host$e, property: 'direction' },
+  hostWidth: { ...host$f, property: 'width' },
+  hostMinWidth: { ...host$f, property: 'min-width' },
+  hostDirection: { ...host$f, property: 'direction' },
 
   inputBackgroundColor: { ...inputField$6, property: 'background-color' },
 
@@ -2446,7 +2450,7 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$D = getComponentName('email-field');
+const componentName$E = getComponentName('email-field');
 
 const customMixin$7 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -2481,15 +2485,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
-customElements.define(componentName$D, EmailFieldClass);
+customElements.define(componentName$E, EmailFieldClass);
 
-const componentName$C = getComponentName('link');
+const componentName$D = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$C, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$D, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2535,12 +2539,12 @@ const selectors$1 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$d, wrapper: wrapper$1 } = selectors$1;
+const { anchor, text: text$2, host: host$e, wrapper: wrapper$1 } = selectors$1;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$d, property: 'width' },
+      hostWidth: { ...host$e, property: 'width' },
       hostDirection: { ...text$2, property: 'direction' },
       textAlign: wrapper$1,
       textColor: [
@@ -2554,7 +2558,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$C, LinkClass);
+customElements.define(componentName$D, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2606,37 +2610,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$B = getComponentName('logo');
+const componentName$C = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$B,
+  componentName: componentName$C,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$B, LogoClass);
+customElements.define(componentName$C, LogoClass);
 
-const componentName$A = getComponentName('totp-image');
+const componentName$B = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$A,
+  componentName: componentName$B,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$A, TotpImageClass);
+customElements.define(componentName$B, TotpImageClass);
 
-const componentName$z = getComponentName('notp-image');
+const componentName$A = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$z,
+  componentName: componentName$A,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$z, NotpImageClass);
+customElements.define(componentName$A, NotpImageClass);
 
-const componentName$y = getComponentName('number-field');
+const componentName$z = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2662,11 +2666,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
-customElements.define(componentName$y, NumberFieldClass);
+customElements.define(componentName$z, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2684,13 +2688,13 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$x = getComponentName('passcode-internal');
+const componentName$y = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -2916,7 +2920,7 @@ class PasscodeInternal extends BaseInputClass$6 {
   }
 }
 
-const componentName$w = getComponentName('text-field');
+const componentName$x = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -2966,11 +2970,11 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$w,
+    componentName: componentName$x,
   })
 );
 
-const componentName$v = getComponentName('passcode');
+const componentName$w = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -2989,17 +2993,17 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$x}
+      <${componentName$y}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$x}>
+      ><slot></slot></${componentName$y}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$x);
+      this.inputElement = this.shadowRoot.querySelector(componentName$y);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -3014,7 +3018,7 @@ const customMixin$5 = (superclass) =>
   };
 
 const {
-  host: host$c,
+  host: host$d,
   digitField,
   label: label$8,
   requiredIndicator: requiredIndicator$8,
@@ -3037,10 +3041,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$c],
+      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$d],
       hostWidth: { property: 'width' },
-      hostDirection: { ...host$c, property: 'direction' },
-      fontFamily: [host$c, { ...label$8 }],
+      hostDirection: { ...host$d, property: 'direction' },
+      fontFamily: [host$d, { ...label$8 }],
       labelTextColor: [
         { ...label$8, property: 'color' },
         { ...requiredIndicator$8, property: 'color' },
@@ -3146,15 +3150,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$v,
+    componentName: componentName$w,
   })
 );
 
-customElements.define(componentName$w, TextFieldClass);
+customElements.define(componentName$x, TextFieldClass);
 
-customElements.define(componentName$x, PasscodeInternal);
+customElements.define(componentName$y, PasscodeInternal);
 
-customElements.define(componentName$v, PasscodeClass);
+customElements.define(componentName$w, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -3190,10 +3194,10 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$u = getComponentName('password');
+const componentName$v = getComponentName('password');
 
 const {
-  host: host$b,
+  host: host$c,
   inputField: inputField$5,
   inputElement: inputElement$2,
   inputElementPlaceholder,
@@ -3219,10 +3223,10 @@ const {
 const PasswordClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$b, property: 'width' },
-      hostMinWidth: { ...host$b, property: 'min-width' },
-      hostDirection: { ...host$b, property: 'direction' },
-      fontSize: [{}, host$b],
+      hostWidth: { ...host$c, property: 'width' },
+      hostMinWidth: { ...host$c, property: 'min-width' },
+      hostDirection: { ...host$c, property: 'direction' },
+      fontSize: [{}, host$c],
       fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
       inputHeight: { ...inputField$5, property: 'height' },
       inputHorizontalPadding: [
@@ -3319,16 +3323,16 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$u,
+    componentName: componentName$v,
   })
 );
 
-customElements.define(componentName$u, PasswordClass);
+customElements.define(componentName$v, PasswordClass);
 
-const componentName$t = getComponentName('text-area');
+const componentName$u = getComponentName('text-area');
 
 const {
-  host: host$a,
+  host: host$b,
   label: label$6,
   placeholder: placeholder$2,
   inputField: inputField$4,
@@ -3350,10 +3354,10 @@ const {
 const TextAreaClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$a, property: 'width' },
-      hostMinWidth: { ...host$a, property: 'min-width' },
-      hostDirection: { ...host$a, property: 'direction' },
-      fontSize: [host$a, textArea$2],
+      hostWidth: { ...host$b, property: 'width' },
+      hostMinWidth: { ...host$b, property: 'min-width' },
+      hostDirection: { ...host$b, property: 'direction' },
+      fontSize: [host$b, textArea$2],
       fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
       labelTextColor: [
         { ...label$6, property: 'color' },
@@ -3401,17 +3405,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$t,
+    componentName: componentName$u,
   })
 );
 
-customElements.define(componentName$t, TextAreaClass);
+customElements.define(componentName$u, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$s = getComponentName('image');
+const componentName$t = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$s, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$t, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3451,9 +3455,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$s, ImageClass);
+customElements.define(componentName$t, ImageClass);
 
-const componentName$r = getComponentName('combo-box');
+const componentName$s = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3679,7 +3683,7 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$9,
+  host: host$a,
   inputField: inputField$3,
   inputElement: inputElement$1,
   placeholder: placeholder$1,
@@ -3705,10 +3709,10 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$9, property: 'width' },
-      hostDirection: { ...host$9, property: 'direction' },
+      hostWidth: { ...host$a, property: 'width' },
+      hostDirection: { ...host$a, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$9],
+      fontSize: [{}, host$a],
       fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
       labelTextColor: [
         { ...label$5, property: 'color' },
@@ -3836,12 +3840,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$r,
+    componentName: componentName$s,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$r, ComboBoxClass);
+customElements.define(componentName$s, ComboBoxClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -5084,7 +5088,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$q = getComponentName('phone-field-internal');
+const componentName$r = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5096,7 +5100,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -5268,12 +5272,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
   }
 };
 
-customElements.define(componentName$q, PhoneFieldInternal$1);
+customElements.define(componentName$r, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$p = getComponentName('phone-field');
+const componentName$q = getComponentName('phone-field');
 
 const customMixin$4 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -5287,15 +5291,15 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$q}
+				<${componentName$r}
 					tabindex="-1"
 					slot="input"
-				></${componentName$q}>
+				></${componentName$r}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$q);
+      this.inputElement = this.shadowRoot.querySelector(componentName$r);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5315,7 +5319,7 @@ const customMixin$4 = (superclass) =>
   };
 
 const {
-  host: host$8,
+  host: host$9,
   label: label$4,
   requiredIndicator: requiredIndicator$4,
   inputField: inputField$2,
@@ -5340,7 +5344,7 @@ const PhoneFieldClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$8,
+        host$9,
         inputField$2,
         {
           selector: TextFieldClass.componentName,
@@ -5361,11 +5365,11 @@ const PhoneFieldClass = compose(
         },
       ],
       hostWidth: [
-        { ...host$8, property: 'width' },
+        { ...host$9, property: 'width' },
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
-      hostDirection: { ...host$8, property: 'direction' },
+      hostDirection: { ...host$9, property: 'direction' },
 
       inputBorderStyle: [
         { ...inputField$2, property: 'border-style' },
@@ -5491,17 +5495,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$p,
+    componentName: componentName$q,
   })
 );
 
-customElements.define(componentName$p, PhoneFieldClass);
+customElements.define(componentName$q, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$o = getComponentName('phone-field-internal-input-box');
+const componentName$p = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -5515,7 +5519,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -5654,11 +5658,11 @@ class PhoneFieldInternal extends BaseInputClass$4 {
   }
 }
 
-customElements.define(componentName$o, PhoneFieldInternal);
+customElements.define(componentName$p, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$n = getComponentName('phone-input-box-field');
+const componentName$o = getComponentName('phone-input-box-field');
 
 const customMixin$3 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -5672,15 +5676,15 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$o}
+				<${componentName$p}
 					tabindex="-1"
 					slot="input"
-				></${componentName$o}>
+				></${componentName$p}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$o);
+      this.inputElement = this.shadowRoot.querySelector(componentName$p);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5697,7 +5701,7 @@ const customMixin$3 = (superclass) =>
     }
   };
 
-const { host: host$7, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
+const { host: host$8, 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' },
@@ -5711,7 +5715,7 @@ const PhoneFieldInputBoxClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$7,
+        host$8,
         inputField$1,
         {
           selector: TextFieldClass.componentName,
@@ -5719,9 +5723,9 @@ const PhoneFieldInputBoxClass = compose(
         },
       ],
       fontFamily: [label$3, errorMessage$4, helperText$3],
-      hostWidth: { ...host$7, property: 'width' },
-      hostMinWidth: { ...host$7, property: 'min-width' },
-      hostDirection: { ...host$7, property: 'direction' },
+      hostWidth: { ...host$8, property: 'width' },
+      hostMinWidth: { ...host$8, property: 'min-width' },
+      hostDirection: { ...host$8, property: 'direction' },
 
       inputBorderStyle: { ...inputField$1, property: 'border-style' },
       inputBorderWidth: { ...inputField$1, property: 'border-width' },
@@ -5813,15 +5817,15 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$n,
+    componentName: componentName$o,
   })
 );
 
-customElements.define(componentName$n, PhoneFieldInputBoxClass);
+customElements.define(componentName$o, PhoneFieldInputBoxClass);
 
-const componentName$m = getComponentName('new-password-internal');
+const componentName$n = getComponentName('new-password-internal');
 
-const componentName$l = getComponentName('new-password');
+const componentName$m = getComponentName('new-password');
 
 const customMixin$2 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
@@ -5831,16 +5835,16 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$m}
+			<${componentName$n}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$m}>
+			></${componentName$n}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$m);
+      this.inputElement = this.shadowRoot.querySelector(componentName$n);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5861,7 +5865,7 @@ const customMixin$2 = (superclass) =>
     }
   };
 
-const { host: host$6, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
+const { host: host$7, 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' },
@@ -5874,7 +5878,7 @@ const NewPasswordClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$6,
+        host$7,
         {},
         {
           selector: PasswordClass.componentName,
@@ -5883,13 +5887,13 @@ const NewPasswordClass = compose(
       ],
       fontFamily: [label$2, errorMessage$3, helperText$2],
       errorMessageTextColor: { ...errorMessage$3, property: 'color' },
-      hostWidth: { ...host$6, property: 'width' },
-      hostMinWidth: { ...host$6, property: 'min-width' },
+      hostWidth: { ...host$7, property: 'width' },
+      hostMinWidth: { ...host$7, property: 'min-width' },
       hostDirection: [
-        { ...host$6, property: 'direction' },
+        { ...host$7, property: 'direction' },
         { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
       ],
-      inputsRequiredIndicator: { ...host$6, property: 'content' },
+      inputsRequiredIndicator: { ...host$7, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
     },
   }),
@@ -5947,7 +5951,7 @@ const NewPasswordClass = compose(
 		}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$l,
+    componentName: componentName$m,
   })
 );
 
@@ -5972,7 +5976,7 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -6137,16 +6141,16 @@ class NewPasswordInternal extends BaseInputClass$3 {
   }
 }
 
-customElements.define(componentName$m, NewPasswordInternal);
+customElements.define(componentName$n, NewPasswordInternal);
 
-customElements.define(componentName$l, NewPasswordClass);
+customElements.define(componentName$m, NewPasswordClass);
 
-const componentName$k = getComponentName('recaptcha');
+const componentName$l = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
-  componentName: componentName$k,
+  componentName: componentName$l,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -6298,7 +6302,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$k, RecaptchaClass);
+customElements.define(componentName$l, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -6312,7 +6316,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$j = getComponentName('upload-file');
+const componentName$k = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -6327,7 +6331,7 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$j, baseSelector: ':host > div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$k, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -6499,7 +6503,7 @@ class RawUploadFile extends BaseInputClass$2 {
 }
 
 const buttonVars = ButtonClass.cssVarList;
-const { host: host$5, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
+const { host: host$6, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '::slotted(*)' },
@@ -6518,11 +6522,11 @@ const UploadFileClass = compose(
       borderWidth: {},
       borderStyle: {},
       borderRadius: {},
-      hostHeight: { ...host$5, property: 'height' },
-      hostWidth: { ...host$5, property: 'width' },
+      hostHeight: { ...host$6, property: 'height' },
+      hostWidth: { ...host$6, property: 'width' },
       hostPadding: { property: 'padding' },
       hostDirection: [
-        { ...host$5, property: 'direction' },
+        { ...host$6, property: 'direction' },
         { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
       ],
       gap: { ...wrapper },
@@ -6542,7 +6546,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$j, UploadFileClass);
+customElements.define(componentName$k, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -6640,10 +6644,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$i = getComponentName('button-selection-group-internal');
+const componentName$j = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$i
+  componentName$j
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -6799,7 +6803,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
     }
   };
 
-const { host: host$4, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
+const { host: host$5, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -6808,9 +6812,9 @@ const { host: host$4, label: label$1, requiredIndicator: requiredIndicator$1, in
 };
 
 const buttonSelectionGroupMappings = {
-  hostWidth: { ...host$4, property: 'width' },
-  hostDirection: { ...host$4, property: 'direction' },
-  fontFamily: host$4,
+  hostWidth: { ...host$5, property: 'width' },
+  hostDirection: { ...host$5, property: 'direction' },
+  fontFamily: host$5,
   labelTextColor: [
     { ...label$1, property: 'color' },
     { ...requiredIndicator$1, property: 'color' },
@@ -6875,7 +6879,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$h = getComponentName('button-selection-group');
+const componentName$i = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -6884,19 +6888,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$i}
+      <${componentName$j}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$i}>
+      </${componentName$j}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$i);
+      this.inputElement = this.shadowRoot.querySelector(componentName$j);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6921,16 +6925,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$h,
+    componentName: componentName$i,
   })
 );
 
-customElements.define(componentName$i, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$j, ButtonSelectionGroupInternalClass);
 
-const componentName$g = getComponentName('button-selection-group-item');
+const componentName$h = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$g,
+  componentName: componentName$h,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -7015,6 +7019,10 @@ const ButtonSelectionGroupItemClass = compose(
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.borderColor,
       },
+      borderWidth: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderWidth,
+      },
       borderStyle: {
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.borderStyle,
@@ -7033,14 +7041,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$g, ButtonSelectionGroupItemClass);
+customElements.define(componentName$h, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$h, ButtonSelectionGroupClass);
+customElements.define(componentName$i, ButtonSelectionGroupClass);
 
-const componentName$f = getComponentName('button-multi-selection-group-internal');
+const componentName$g = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$f
+  componentName$g
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -7143,7 +7151,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$e = getComponentName('button-multi-selection-group');
+const componentName$f = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7152,19 +7160,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$f}
+      <${componentName$g}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$f}>
+      </${componentName$g}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$f);
+      this.inputElement = this.shadowRoot.querySelector(componentName$g);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -7189,13 +7197,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$e,
+    componentName: componentName$f,
   })
 );
 
-customElements.define(componentName$f, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$g, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$e, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$f, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7223,9 +7231,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$d = getComponentName('grid-text-column');
+const componentName$e = getComponentName('grid-text-column');
 
-customElements.define(componentName$d, GridTextColumnClass);
+customElements.define(componentName$e, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7260,9 +7268,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$c = getComponentName('grid-custom-column');
+const componentName$d = getComponentName('grid-custom-column');
 
-customElements.define(componentName$c, GridCustomColumnClass);
+customElements.define(componentName$d, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -7321,9 +7329,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$b = getComponentName('grid-selection-column');
+const componentName$c = getComponentName('grid-selection-column');
 
-customElements.define(componentName$b, GridSelectionColumnClass);
+customElements.define(componentName$c, GridSelectionColumnClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -7335,7 +7343,7 @@ const isValidDataType = (data) => {
   return isValid;
 };
 
-const componentName$a = getComponentName('grid');
+const componentName$b = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -7495,7 +7503,7 @@ const GridMixin = (superclass) =>
   };
 
 const {
-  host: host$3,
+  host: host$4,
   headerRow,
   headerRowCell,
   contentRow,
@@ -7530,15 +7538,15 @@ const GridClass = compose(
       fontWeight: { ...contentRow },
       valueTextColor: { ...contentRow, property: 'color' },
       backgroundColor: [
-        { ...host$3, property: 'background-color' },
+        { ...host$4, property: 'background-color' },
         { ...contentRow, property: 'background-color' },
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      borderColor: { ...host$3, property: 'border-color' },
-      borderWidth: { ...host$3, property: 'border-width' },
-      borderStyle: { ...host$3, property: 'border-style' },
-      borderRadius: { ...host$3, property: 'border-radius' },
+      borderColor: { ...host$4, property: 'border-color' },
+      borderWidth: { ...host$4, property: 'border-width' },
+      borderStyle: { ...host$4, property: 'border-style' },
+      borderRadius: { ...host$4, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
       headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
@@ -7571,13 +7579,13 @@ const GridClass = compose(
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$a,
+    componentName: componentName$b,
   })
 );
 
-customElements.define(componentName$a, GridClass);
+customElements.define(componentName$b, GridClass);
 
-const componentName$9 = getComponentName('multi-select-combo-box');
+const componentName$a = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -7965,7 +7973,7 @@ const multiSelectComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$2,
+  host: host$3,
   inputField,
   inputElement,
   placeholder,
@@ -8003,10 +8011,10 @@ const {
 const MultiSelectComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$2, property: 'width' },
-      hostDirection: { ...host$2, property: 'direction' },
+      hostWidth: { ...host$3, property: 'width' },
+      hostDirection: { ...host$3, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$2],
+      fontSize: [{}, host$3],
       chipFontSize: { ...chipLabel, property: 'font-size' },
       fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
       labelTextColor: [
@@ -8181,16 +8189,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$9,
+    componentName: componentName$a,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$9, MultiSelectComboBoxClass);
+customElements.define(componentName$a, MultiSelectComboBoxClass);
 
-const componentName$8 = getComponentName('badge');
+const componentName$9 = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -8201,6 +8209,9 @@ class RawBadge extends createBaseClass({ componentName: componentName$8, baseSel
       }
       :host > div {
         width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
       }
 		</style>
 		<div>
@@ -8238,9 +8249,9 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
 
-customElements.define(componentName$8, BadgeClass);
+customElements.define(componentName$9, BadgeClass);
 
-const componentName$7 = getComponentName('modal');
+const componentName$8 = getComponentName('modal');
 
 const customMixin$1 = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -8339,11 +8350,11 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$7,
+    componentName: componentName$8,
   })
 );
 
-customElements.define(componentName$7, ModalClass);
+customElements.define(componentName$8, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -8354,7 +8365,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$6 = getComponentName('notification-card');
+const componentName$7 = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -8462,13 +8473,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$6,
+    componentName: componentName$7,
   })
 );
 
-customElements.define(componentName$6, NotificationCardClass);
+customElements.define(componentName$7, NotificationCardClass);
 
-const componentName$5 = getComponentName('notification');
+const componentName$6 = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -8563,14 +8574,14 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$5,
+    componentName: componentName$6,
   })
 );
 
-customElements.define(componentName$5, NotificationClass);
+customElements.define(componentName$6, NotificationClass);
 
-const componentName$4 = getComponentName('avatar');
-class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > .wrapper' }) {
+const componentName$5 = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName: componentName$5, baseSelector: ':host > .wrapper' }) {
   constructor() {
     super();
 
@@ -8580,7 +8591,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
 					display: inline-flex;
 				}
 
-        .editable {
+        .editableBadge {
           border: 1px solid;
           border-radius: 100%;
           height: fit-content;
@@ -8616,7 +8627,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
 
       <div class="wrapper">
         <vaadin-avatar></vaadin-avatar>
-        <div class="editable">
+        <div class="editableBadge">
           <vaadin-icon icon="vaadin:pencil"></vaadin-icon>
         </div>
       </div>
@@ -8625,10 +8636,11 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
     this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
 
     forwardAttrs(this, this.avatarComponent, {
-      includeAttrs: ['name', 'img'],
+      includeAttrs: ['display-name', 'img'],
+      mapAttrs: { 'display-name': 'name' },
     });
 
-    const editableIcon = this.shadowRoot.querySelector('.editable');
+    const editableIcon = this.shadowRoot.querySelector('.editableBadge');
 
     observeAttributes(
       this,
@@ -8644,18 +8656,19 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
   }
 }
 
-const { host: host$1, editableBadge, avatar: avatar$2 } = {
+const { host: host$2, editableBadge, avatar: avatar$2 } = {
   host: { selector: () => ':host' },
-  editableBadge: { selector: '> .editable' },
+  editableBadge: { selector: '> .editableBadge' },
   avatar: { selector: 'vaadin-avatar' },
 };
 
 const AvatarClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$1, property: 'width' },
-      hostHeight: { ...host$1, property: 'height' },
-      hostDirection: { ...host$1, property: 'direction' },
+      hostWidth: { ...host$2, property: 'width' },
+      hostHeight: { ...host$2, property: 'height' },
+      cursor: [avatar$2, host$2],
+      hostDirection: { ...host$2, property: 'direction' },
       avatarTextColor: { ...avatar$2, property: 'color' },
       avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
       editableIconColor: { ...editableBadge, property: 'color' },
@@ -8667,11 +8680,11 @@ const AvatarClass = compose(
   componentNameValidationMixin
 )(RawAvatar);
 
-customElements.define(componentName$4, AvatarClass);
+customElements.define(componentName$5, AvatarClass);
 
-const componentName$3 = getComponentName('mappings-field-internal');
+const componentName$4 = getComponentName('mappings-field-internal');
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$1 {
   #errorItem;
@@ -8906,7 +8919,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
   }
 }
 
-const componentName$2 = getComponentName('mappings-field');
+const componentName$3 = getComponentName('mappings-field');
 
 const customMixin = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -8935,14 +8948,14 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$3}
+      <${componentName$4}
         tabindex="-1"
-      ></${componentName$3}>
+      ></${componentName$4}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$3);
+      this.inputElement = this.shadowRoot.querySelector(componentName$4);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -8965,7 +8978,7 @@ const customMixin = (superclass) =>
   };
 
 const {
-  host,
+  host: host$1,
   helperText,
   errorMessage,
   mappingItem,
@@ -8989,10 +9002,10 @@ const {
 const MappingsFieldClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host, property: 'width' },
-      hostDirection: { ...host, property: 'direction' },
+      hostWidth: { ...host$1, property: 'width' },
+      hostDirection: { ...host$1, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host, { ...separator, property: 'margin-top' }],
+      fontSize: [{}, host$1, { ...separator, property: 'margin-top' }],
       fontFamily: [helperText, errorMessage, labels],
       separatorFontSize: { ...separator, property: 'font-size' },
       labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
@@ -9058,17 +9071,17 @@ const MappingsFieldClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$2,
+    componentName: componentName$3,
   })
 );
 
-customElements.define(componentName$3, MappingsFieldInternal);
+customElements.define(componentName$4, MappingsFieldInternal);
 
-const componentName$1 = getComponentName('mapping-item');
+const componentName$2 = getComponentName('mapping-item');
 
 const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$2, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass {
   static get observedAttributes() {
@@ -9218,9 +9231,238 @@ class MappingItem extends BaseInputClass {
   }
 }
 
-customElements.define(componentName$1, MappingItem);
+customElements.define(componentName$2, MappingItem);
+
+customElements.define(componentName$3, 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;
+}
+
+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');
+class RawUserAttribute extends createBaseClass({
+  componentName: componentName$1,
+  baseSelector: ':host > .root',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+
+        vaadin-icon {
+          color: currentcolor;
+        }
+
+        .root {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          align-items: center;
+        }
+
+        .btn-wrapper {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-grow: 0;
+        }
 
-customElements.define(componentName$2, MappingsFieldClass);
+        .text-wrapper {
+          display: flex;
+          align-items: center;
+          flex-grow: 1;
+        }
+
+        descope-text::part(text-wrapper) {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          width: initial;
+        }
+
+        descope-text {
+          display: inline-flex;
+        }
+
+        descope-badge {
+          margin-inline-end: 10px;
+        }
+
+        descope-text[data-id="label-text"].required:after {
+          content: '*';
+          color: var(${TextClass.cssVarList.textColor});
+        }
+      </style>
+
+
+      <div class="root">
+        <div class="text-wrapper">
+          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary"></descope-text>
+          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary"></descope-text>
+        </div>
+
+        <div class="btn-wrapper">
+          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
+          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${editIcon}></vaadin-icon>
+          </descope-button>
+          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${deleteIcon}></vaadin-icon>
+          </descope-button>
+        </div
+      </div>
+		`;
+
+    this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
+    this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
+    this.badge = this.shadowRoot.querySelector('descope-badge');
+    this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
+    this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
+  }
+
+  onLabelChange() {
+    this.labelText.innerText = this.label;
+    this.labelText.setAttribute('title', this.label);
+  }
+
+  onValueOrPlaceholderChange() {
+    const text = this.value || this.placeholder;
+    const mode = this.value ? 'primary' : 'secondary';
+
+    this.valueText.innerText = text;
+    this.valueText.setAttribute('title', text);
+    this.valueText.setAttribute('mode', mode);
+  }
+
+  onBadgeLabelChange() {
+    if (!this.badgeLabel) {
+      this.badge.style.display = 'none';
+    } else {
+      this.badge.innerText = this.badgeLabel;
+      this.badge.style.display = '';
+    }
+  }
+
+  onBadgeTooltipTextChange() {
+    this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
+  }
+
+  onIsRequiredChange() {
+    this.labelText.classList.toggle('required', this.isRequired);
+  }
+
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  get placeholder() {
+    return this.getAttribute('placeholder') || '';
+  }
+
+  get isRequired() {
+    return this.getAttribute('required') === 'true';
+  }
+
+  get badgeLabel() {
+    return this.getAttribute('badge-label') || '';
+  }
+
+  get badgeTooltipText() {
+    return this.getAttribute('badge-tooltip-text') || '';
+  }
+
+  init() {
+    this.onLabelChange();
+    this.onValueOrPlaceholderChange();
+    this.onIsRequiredChange();
+    this.onBadgeLabelChange();
+    this.onBadgeTooltipTextChange();
+
+    this.deleteButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
+    );
+
+    this.editButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
+    );
+  }
+
+  static get observedAttributes() {
+    return [
+      'label',
+      'value',
+      'placeholder',
+      'required',
+      'badge-label',
+      'badge-tooltip-text',
+    ].concat(super.observedAttributes);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === 'label') {
+      this.onLabelChange();
+    } else if (name === 'value' || name === 'placeholder') {
+      this.onValueOrPlaceholderChange();
+    } else if (name === 'required') {
+      this.onIsRequiredChange();
+    } else if (name === 'badge-label') {
+      this.onBadgeLabelChange();
+    } else if (name === 'badge-tooltip-text') {
+      this.onBadgeTooltipTextChange();
+    }
+  }
+}
+
+const { host, textFields, buttons, badge: badge$2, labelText, valueText, textWrapper } = {
+  host: { selector: () => ':host' },
+  textFields: { selector: 'descope-text' },
+  valueText: { selector: 'descope-text[data-id="value-text"]' },
+  labelText: { selector: 'descope-text[data-id="label-text"]' },
+  buttons: { selector: 'descope-button' },
+  badge: { selector: 'descope-badge' },
+  textWrapper: { selector: ' .text-wrapper' },
+};
+
+const UserAttributeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { ...textFields, property: TextClass.cssVarList.hostDirection },
+        { ...buttons, property: ButtonClass.cssVarList.hostDirection },
+        { ...badge$2, property: BadgeClass.cssVarList.hostDirection },
+      ],
+      labelTextWidth: { ...labelText, property: 'width' },
+      valueTextWidth: { ...valueText, property: 'width' },
+      badgeMaxWidth: { ...badge$2, property: 'max-width' },
+      itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawUserAttribute);
+
+customElements.define(componentName$1, UserAttributeClass);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -9652,33 +9894,33 @@ const globals = {
   fonts,
   direction,
 };
-const vars$A = getThemeVars(globals);
+const vars$B = getThemeVars(globals);
 
-const globalRefs$j = getThemeRefs(globals);
+const globalRefs$k = getThemeRefs(globals);
 const compVars$5 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$j.colors.primary,
-  secondary: globalRefs$j.colors.secondary,
-  success: globalRefs$j.colors.success,
-  error: globalRefs$j.colors.error,
-  surface: globalRefs$j.colors.surface,
+  primary: globalRefs$k.colors.primary,
+  secondary: globalRefs$k.colors.secondary,
+  success: globalRefs$k.colors.success,
+  error: globalRefs$k.colors.error,
+  surface: globalRefs$k.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$M);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$N);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$5.fontFamily]: globalRefs$j.fonts.font1.family,
+  [compVars$5.fontFamily]: globalRefs$k.fonts.font1.family,
 
   [compVars$5.cursor]: 'pointer',
   [compVars$5.hostHeight]: '3em',
   [compVars$5.hostWidth]: 'auto',
-  [compVars$5.hostDirection]: globalRefs$j.direction,
+  [compVars$5.hostDirection]: globalRefs$k.direction,
 
-  [compVars$5.borderRadius]: globalRefs$j.radius.sm,
-  [compVars$5.borderWidth]: globalRefs$j.border.xs,
+  [compVars$5.borderRadius]: globalRefs$k.radius.sm,
+  [compVars$5.borderWidth]: globalRefs$k.border.xs,
   [compVars$5.borderStyle]: 'solid',
   [compVars$5.borderColor]: 'transparent',
 
@@ -9721,10 +9963,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$j.colors.surface.light,
-    [helperVars$3.dark]: globalRefs$j.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$j.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$j.colors.surface.main,
+    [helperVars$3.main]: globalRefs$k.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$k.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$k.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$k.colors.surface.main,
   },
 
   variant: {
@@ -9772,7 +10014,7 @@ const button = {
   },
 };
 
-const vars$z = {
+const vars$A = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -9780,26 +10022,26 @@ const vars$z = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$z
+  vars: vars$A
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$i = getThemeRefs(globals);
+const globalRefs$j = getThemeRefs(globals);
 
-const [theme$1, refs, vars$y] = createHelperVars(
+const [theme$1, refs, vars$z] = createHelperVars(
   {
-    labelTextColor: globalRefs$i.colors.surface.dark,
-    valueTextColor: globalRefs$i.colors.surface.contrast,
-    placeholderTextColor: globalRefs$i.colors.surface.dark,
+    labelTextColor: globalRefs$j.colors.surface.dark,
+    valueTextColor: globalRefs$j.colors.surface.contrast,
+    placeholderTextColor: globalRefs$j.colors.surface.dark,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$i.colors.error.main,
-    helperTextColor: globalRefs$i.colors.surface.dark,
+    errorMessageTextColor: globalRefs$j.colors.error.main,
+    helperTextColor: globalRefs$j.colors.surface.dark,
 
-    borderWidth: globalRefs$i.border.xs,
-    borderRadius: globalRefs$i.radius.xs,
+    borderWidth: globalRefs$j.border.xs,
+    borderRadius: globalRefs$j.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$i.border.sm,
+    outlineWidth: globalRefs$j.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -9810,11 +10052,11 @@ const [theme$1, refs, vars$y] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$i.colors.surface.main,
+    backgroundColor: globalRefs$j.colors.surface.main,
 
-    fontFamily: globalRefs$i.fonts.font1.family,
+    fontFamily: globalRefs$j.fonts.font1.family,
 
-    direction: globalRefs$i.direction,
+    direction: globalRefs$j.direction,
 
     overlayOpacity: '0.3',
 
@@ -9830,28 +10072,28 @@ const [theme$1, refs, vars$y] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$i.colors.surface.light,
+      outlineColor: globalRefs$j.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$i.colors.error.main,
+        outlineColor: globalRefs$j.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$i.border.xs,
-      borderColor: globalRefs$i.colors.surface.light,
+      outlineWidth: globalRefs$j.border.xs,
+      borderColor: globalRefs$j.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$i.colors.error.main,
+        borderColor: globalRefs$j.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$i.colors.surface.light,
-      borderColor: globalRefs$i.colors.surface.light,
-      valueTextColor: globalRefs$i.colors.surface.light,
-      placeholderTextColor: globalRefs$i.colors.surface.light,
-      helperTextColor: globalRefs$i.colors.surface.light,
-      backgroundColor: globalRefs$i.colors.surface.main,
+      labelTextColor: globalRefs$j.colors.surface.light,
+      borderColor: globalRefs$j.colors.surface.light,
+      valueTextColor: globalRefs$j.colors.surface.light,
+      placeholderTextColor: globalRefs$j.colors.surface.light,
+      helperTextColor: globalRefs$j.colors.surface.light,
+      backgroundColor: globalRefs$j.colors.surface.main,
     },
   },
   componentName
@@ -9861,22 +10103,64 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$y
+  vars: vars$z
 });
 
-const vars$x = TextFieldClass.cssVarList;
+const vars$y = TextFieldClass.cssVarList;
 
 const textField = {
+  [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.inputValueTextColor]: refs.valueTextColor,
+  [vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$y.inputBorderWidth]: refs.borderWidth,
+  [vars$y.inputBorderStyle]: refs.borderStyle,
+  [vars$y.inputBorderColor]: refs.borderColor,
+  [vars$y.inputBorderRadius]: refs.borderRadius,
+  [vars$y.inputOutlineWidth]: refs.outlineWidth,
+  [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' },
+  },
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$y
+});
+
+const globalRefs$i = getThemeRefs(globals);
+const vars$x = PasswordClass.cssVarList;
+
+const password = {
   [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.labelRequiredIndicator]: refs.requiredIndicator,
   [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.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$x.inputBorderWidth]: refs.borderWidth,
   [vars$x.inputBorderStyle]: refs.borderStyle,
   [vars$x.inputBorderColor]: refs.borderColor,
@@ -9885,40 +10169,29 @@ const textField = {
   [vars$x.inputOutlineStyle]: refs.outlineStyle,
   [vars$x.inputOutlineColor]: refs.outlineColor,
   [vars$x.inputOutlineOffset]: refs.outlineOffset,
-  [vars$x.inputBackgroundColor]: refs.backgroundColor,
-  [vars$x.inputHeight]: refs.inputHeight,
-  [vars$x.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$x.helperTextColor]: refs.helperTextColor,
-  textAlign: {
-    right: { [vars$x.inputTextAlign]: 'right' },
-    left: { [vars$x.inputTextAlign]: 'left' },
-    center: { [vars$x.inputTextAlign]: 'center' },
-  },
+  [vars$x.revealButtonOffset]: globalRefs$i.spacing.md,
+  [vars$x.revealButtonSize]: refs.toggleButtonSize,
+  [vars$x.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$x
 });
 
-const globalRefs$h = getThemeRefs(globals);
-const vars$w = PasswordClass.cssVarList;
+const vars$w = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$w.hostWidth]: refs.width,
+  [vars$w.hostMinWidth]: refs.minWidth,
   [vars$w.hostDirection]: refs.direction,
   [vars$w.fontSize]: refs.fontSize,
   [vars$w.fontFamily]: refs.fontFamily,
   [vars$w.labelTextColor]: refs.labelTextColor,
   [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$w.inputHeight]: refs.inputHeight,
-  [vars$w.inputBackgroundColor]: refs.backgroundColor,
-  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$w.inputValueTextColor]: refs.valueTextColor,
-  [vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$w.inputBorderWidth]: refs.borderWidth,
   [vars$w.inputBorderStyle]: refs.borderStyle,
   [vars$w.inputBorderColor]: refs.borderColor,
@@ -9927,20 +10200,21 @@ const password = {
   [vars$w.inputOutlineStyle]: refs.outlineStyle,
   [vars$w.inputOutlineColor]: refs.outlineColor,
   [vars$w.inputOutlineOffset]: refs.outlineOffset,
-  [vars$w.revealButtonOffset]: globalRefs$h.spacing.md,
-  [vars$w.revealButtonSize]: refs.toggleButtonSize,
-  [vars$w.revealButtonColor]: refs.placeholderTextColor,
+  [vars$w.inputBackgroundColor]: refs.backgroundColor,
+  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$w.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$w
 });
 
-const vars$v = NumberFieldClass.cssVarList;
+const vars$v = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$v.hostWidth]: refs.width,
   [vars$v.hostMinWidth]: refs.minWidth,
   [vars$v.hostDirection]: refs.direction,
@@ -9949,6 +10223,7 @@ const numberField = {
   [vars$v.labelTextColor]: refs.labelTextColor,
   [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$v.inputValueTextColor]: refs.valueTextColor,
+  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$v.inputBorderWidth]: refs.borderWidth,
   [vars$v.inputBorderStyle]: refs.borderStyle,
@@ -9959,200 +10234,167 @@ const numberField = {
   [vars$v.inputOutlineColor]: refs.outlineColor,
   [vars$v.inputOutlineOffset]: refs.outlineOffset,
   [vars$v.inputBackgroundColor]: refs.backgroundColor,
-  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$v.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$v
 });
 
-const vars$u = EmailFieldClass.cssVarList;
+const vars$u = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [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.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$u.inputBackgroundColor]: refs.backgroundColor,
   [vars$u.inputValueTextColor]: refs.valueTextColor,
-  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$u.inputBorderRadius]: refs.borderRadius,
   [vars$u.inputBorderWidth]: refs.borderWidth,
   [vars$u.inputBorderStyle]: refs.borderStyle,
   [vars$u.inputBorderColor]: refs.borderColor,
-  [vars$u.inputBorderRadius]: refs.borderRadius,
   [vars$u.inputOutlineWidth]: refs.outlineWidth,
   [vars$u.inputOutlineStyle]: refs.outlineStyle,
   [vars$u.inputOutlineColor]: refs.outlineColor,
   [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.inputBackgroundColor]: refs.backgroundColor,
-  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$u.inputHeight]: refs.inputHeight,
+  [vars$u.inputResizeType]: 'vertical',
+  [vars$u.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$u.inputTextAlign]: 'right' },
+    left: { [vars$u.inputTextAlign]: 'left' },
+    center: { [vars$u.inputTextAlign]: 'center' },
+  },
+
+  _readonly: {
+    [vars$u.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$u
 });
 
-const vars$t = TextAreaClass.cssVarList;
+const vars$t = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [vars$t.hostWidth]: refs.width,
-  [vars$t.hostMinWidth]: refs.minWidth,
   [vars$t.hostDirection]: refs.direction,
   [vars$t.fontSize]: refs.fontSize,
   [vars$t.fontFamily]: refs.fontFamily,
   [vars$t.labelTextColor]: refs.labelTextColor,
   [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$t.labelFontWeight]: '400',
+  [vars$t.labelLineHeight]: checkboxSize,
+  [vars$t.labelSpacing]: '1em',
   [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$t.inputBackgroundColor]: refs.backgroundColor,
-  [vars$t.inputValueTextColor]: refs.valueTextColor,
-  [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [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.inputBorderColor]: refs.borderColor,
-  [vars$t.inputOutlineWidth]: refs.outlineWidth,
-  [vars$t.inputOutlineStyle]: refs.outlineStyle,
-  [vars$t.inputOutlineColor]: refs.outlineColor,
-  [vars$t.inputOutlineOffset]: refs.outlineOffset,
-  [vars$t.inputResizeType]: 'vertical',
-  [vars$t.inputMinHeight]: '5em',
-  textAlign: {
-    right: { [vars$t.inputTextAlign]: 'right' },
-    left: { [vars$t.inputTextAlign]: 'left' },
-    center: { [vars$t.inputTextAlign]: 'center' },
+  [vars$t.inputBackgroundColor]: refs.backgroundColor,
+  [vars$t.inputSize]: checkboxSize,
+
+  _checked: {
+    [vars$t.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$t.inputResizeType]: 'none',
+  _disabled: {
+    [vars$t.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$t
 });
 
-const vars$s = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+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.labelTextColor]: refs.labelTextColor,
-  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$s.labelFontWeight]: '400',
-  [vars$s.labelLineHeight]: checkboxSize,
-  [vars$s.labelSpacing]: '1em',
-  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$s.inputOutlineWidth]: refs.outlineWidth,
   [vars$s.inputOutlineOffset]: refs.outlineOffset,
   [vars$s.inputOutlineColor]: refs.outlineColor,
   [vars$s.inputOutlineStyle]: refs.outlineStyle,
-  [vars$s.inputBorderRadius]: refs.borderRadius,
-  [vars$s.inputBorderColor]: refs.borderColor,
-  [vars$s.inputBorderWidth]: refs.borderWidth,
-  [vars$s.inputBorderStyle]: refs.borderStyle,
-  [vars$s.inputBackgroundColor]: refs.backgroundColor,
-  [vars$s.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars$s.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$s.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$s
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
 
-const globalRefs$g = getThemeRefs(globals);
-const vars$r = SwitchToggleClass.cssVarList;
+  [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',
 
-const switchToggle = {
-  [vars$r.hostWidth]: refs.width,
-  [vars$r.hostDirection]: refs.direction,
-  [vars$r.fontSize]: refs.fontSize,
-  [vars$r.fontFamily]: refs.fontFamily,
-
-  [vars$r.inputOutlineWidth]: refs.outlineWidth,
-  [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.inputOutlineColor]: refs.outlineColor,
-  [vars$r.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$r.trackBorderStyle]: refs.borderStyle,
-  [vars$r.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$r.trackBorderColor]: refs.borderColor,
-  [vars$r.trackBackgroundColor]: refs.backgroundColor,
-  [vars$r.trackBorderRadius]: globalRefs$g.radius.md,
-  [vars$r.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$r.trackHeight]: checkboxHeight,
-
-  [vars$r.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$r.knobRadius]: '50%',
-  [vars$r.knobTopOffset]: '1px',
-  [vars$r.knobLeftOffset]: knobMargin,
-  [vars$r.knobColor]: refs.labelTextColor,
-  [vars$r.knobTransitionDuration]: '0.3s',
-
-  [vars$r.labelTextColor]: refs.labelTextColor,
-  [vars$r.labelFontWeight]: '400',
-  [vars$r.labelLineHeight]: '1.35em',
-  [vars$r.labelSpacing]: '1em',
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
+  [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,
 
   _checked: {
-    [vars$r.trackBorderColor]: refs.borderColor,
-    [vars$r.knobLeftOffset]: `calc(100% - var(${vars$r.knobSize}) - ${knobMargin})`,
-    [vars$r.knobColor]: refs.valueTextColor,
-    [vars$r.knobTextColor]: refs.valueTextColor,
+    [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,
   },
 
   _disabled: {
-    [vars$r.knobColor]: globalRefs$g.colors.surface.light,
-    [vars$r.trackBorderColor]: globalRefs$g.colors.surface.light,
-    [vars$r.trackBackgroundColor]: globalRefs$g.colors.surface.main,
-    [vars$r.labelTextColor]: refs.labelTextColor,
+    [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,
     _checked: {
-      [vars$r.knobColor]: globalRefs$g.colors.surface.light,
-      [vars$r.trackBackgroundColor]: globalRefs$g.colors.surface.main,
+      [vars$s.knobColor]: globalRefs$h.colors.surface.light,
+      [vars$s.trackBackgroundColor]: globalRefs$h.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$r.trackBorderColor]: globalRefs$g.colors.error.main,
-    [vars$r.knobColor]: globalRefs$g.colors.error.main,
+    [vars$s.trackBorderColor]: globalRefs$h.colors.error.main,
+    [vars$s.knobColor]: globalRefs$h.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$r
+  vars: vars$s
 });
 
-const globalRefs$f = getThemeRefs(globals);
+const globalRefs$g = getThemeRefs(globals);
 
 const compVars$4 = ContainerClass.cssVarList;
 
@@ -10174,7 +10416,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$G
+  componentName$H
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -10184,10 +10426,10 @@ const container = {
 
   [compVars$4.hostWidth]: '100%',
   [compVars$4.boxShadow]: 'none',
-  [compVars$4.backgroundColor]: globalRefs$f.colors.surface.main,
-  [compVars$4.color]: globalRefs$f.colors.surface.contrast,
+  [compVars$4.backgroundColor]: globalRefs$g.colors.surface.main,
+  [compVars$4.color]: globalRefs$g.colors.surface.contrast,
   [compVars$4.borderRadius]: '0px',
-  [compVars$4.hostDirection]: globalRefs$f.direction,
+  [compVars$4.hostDirection]: globalRefs$g.direction,
 
   verticalPadding: {
     sm: { [compVars$4.verticalPadding]: '5px' },
@@ -10233,34 +10475,34 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.md} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.md} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide['2xl']} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$4.borderRadius]: globalRefs$f.radius.sm },
-    md: { [compVars$4.borderRadius]: globalRefs$f.radius.md },
-    lg: { [compVars$4.borderRadius]: globalRefs$f.radius.lg },
-    xl: { [compVars$4.borderRadius]: globalRefs$f.radius.xl },
-    '2xl': { [compVars$4.borderRadius]: globalRefs$f.radius['2xl'] },
-    '3xl': { [compVars$4.borderRadius]: globalRefs$f.radius['3xl'] },
+    sm: { [compVars$4.borderRadius]: globalRefs$g.radius.sm },
+    md: { [compVars$4.borderRadius]: globalRefs$g.radius.md },
+    lg: { [compVars$4.borderRadius]: globalRefs$g.radius.lg },
+    xl: { [compVars$4.borderRadius]: globalRefs$g.radius.xl },
+    '2xl': { [compVars$4.borderRadius]: globalRefs$g.radius['2xl'] },
+    '3xl': { [compVars$4.borderRadius]: globalRefs$g.radius['3xl'] },
   },
 };
 
-const vars$q = {
+const vars$r = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -10268,166 +10510,166 @@ const vars$q = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$q
+  vars: vars$r
 });
 
-const vars$p = LogoClass.cssVarList;
+const vars$q = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$p
+  vars: vars$q
 });
 
-const vars$o = TotpImageClass.cssVarList;
+const vars$p = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$o
+  vars: vars$p
 });
 
-const vars$n = NotpImageClass.cssVarList;
+const vars$o = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$n
+  vars: vars$o
 });
 
-const globalRefs$e = getThemeRefs(globals);
-const vars$m = TextClass.cssVarList;
+const globalRefs$f = getThemeRefs(globals);
+const vars$n = TextClass.cssVarList;
 
 const text = {
-  [vars$m.hostDirection]: globalRefs$e.direction,
-  [vars$m.textLineHeight]: '1.35em',
-  [vars$m.textAlign]: 'left',
-  [vars$m.textColor]: globalRefs$e.colors.surface.dark,
+  [vars$n.hostDirection]: globalRefs$f.direction,
+  [vars$n.textLineHeight]: '1.35em',
+  [vars$n.textAlign]: 'left',
+  [vars$n.textColor]: globalRefs$f.colors.surface.dark,
   variant: {
     h1: {
-      [vars$m.fontSize]: globalRefs$e.typography.h1.size,
-      [vars$m.fontWeight]: globalRefs$e.typography.h1.weight,
-      [vars$m.fontFamily]: globalRefs$e.typography.h1.font,
+      [vars$n.fontSize]: globalRefs$f.typography.h1.size,
+      [vars$n.fontWeight]: globalRefs$f.typography.h1.weight,
+      [vars$n.fontFamily]: globalRefs$f.typography.h1.font,
     },
     h2: {
-      [vars$m.fontSize]: globalRefs$e.typography.h2.size,
-      [vars$m.fontWeight]: globalRefs$e.typography.h2.weight,
-      [vars$m.fontFamily]: globalRefs$e.typography.h2.font,
+      [vars$n.fontSize]: globalRefs$f.typography.h2.size,
+      [vars$n.fontWeight]: globalRefs$f.typography.h2.weight,
+      [vars$n.fontFamily]: globalRefs$f.typography.h2.font,
     },
     h3: {
-      [vars$m.fontSize]: globalRefs$e.typography.h3.size,
-      [vars$m.fontWeight]: globalRefs$e.typography.h3.weight,
-      [vars$m.fontFamily]: globalRefs$e.typography.h3.font,
+      [vars$n.fontSize]: globalRefs$f.typography.h3.size,
+      [vars$n.fontWeight]: globalRefs$f.typography.h3.weight,
+      [vars$n.fontFamily]: globalRefs$f.typography.h3.font,
     },
     subtitle1: {
-      [vars$m.fontSize]: globalRefs$e.typography.subtitle1.size,
-      [vars$m.fontWeight]: globalRefs$e.typography.subtitle1.weight,
-      [vars$m.fontFamily]: globalRefs$e.typography.subtitle1.font,
+      [vars$n.fontSize]: globalRefs$f.typography.subtitle1.size,
+      [vars$n.fontWeight]: globalRefs$f.typography.subtitle1.weight,
+      [vars$n.fontFamily]: globalRefs$f.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$m.fontSize]: globalRefs$e.typography.subtitle2.size,
-      [vars$m.fontWeight]: globalRefs$e.typography.subtitle2.weight,
-      [vars$m.fontFamily]: globalRefs$e.typography.subtitle2.font,
+      [vars$n.fontSize]: globalRefs$f.typography.subtitle2.size,
+      [vars$n.fontWeight]: globalRefs$f.typography.subtitle2.weight,
+      [vars$n.fontFamily]: globalRefs$f.typography.subtitle2.font,
     },
     body1: {
-      [vars$m.fontSize]: globalRefs$e.typography.body1.size,
-      [vars$m.fontWeight]: globalRefs$e.typography.body1.weight,
-      [vars$m.fontFamily]: globalRefs$e.typography.body1.font,
+      [vars$n.fontSize]: globalRefs$f.typography.body1.size,
+      [vars$n.fontWeight]: globalRefs$f.typography.body1.weight,
+      [vars$n.fontFamily]: globalRefs$f.typography.body1.font,
     },
     body2: {
-      [vars$m.fontSize]: globalRefs$e.typography.body2.size,
-      [vars$m.fontWeight]: globalRefs$e.typography.body2.weight,
-      [vars$m.fontFamily]: globalRefs$e.typography.body2.font,
+      [vars$n.fontSize]: globalRefs$f.typography.body2.size,
+      [vars$n.fontWeight]: globalRefs$f.typography.body2.weight,
+      [vars$n.fontFamily]: globalRefs$f.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$m.textColor]: globalRefs$e.colors.surface.contrast,
+      [vars$n.textColor]: globalRefs$f.colors.surface.contrast,
     },
     secondary: {
-      [vars$m.textColor]: globalRefs$e.colors.surface.dark,
+      [vars$n.textColor]: globalRefs$f.colors.surface.dark,
     },
     error: {
-      [vars$m.textColor]: globalRefs$e.colors.error.main,
+      [vars$n.textColor]: globalRefs$f.colors.error.main,
     },
     success: {
-      [vars$m.textColor]: globalRefs$e.colors.success.main,
+      [vars$n.textColor]: globalRefs$f.colors.success.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%',
   },
 
   _italic: {
-    [vars$m.fontStyle]: 'italic',
+    [vars$n.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$m.textTransform]: 'uppercase',
+    [vars$n.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$m.textTransform]: 'lowercase',
+    [vars$n.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$m
+  vars: vars$n
 });
 
-const globalRefs$d = getThemeRefs(globals);
-const vars$l = LinkClass.cssVarList;
+const globalRefs$e = getThemeRefs(globals);
+const vars$m = LinkClass.cssVarList;
 
 const link = {
-  [vars$l.hostDirection]: globalRefs$d.direction,
-  [vars$l.cursor]: 'pointer',
+  [vars$m.hostDirection]: globalRefs$e.direction,
+  [vars$m.cursor]: 'pointer',
 
-  [vars$l.textColor]: globalRefs$d.colors.primary.main,
+  [vars$m.textColor]: globalRefs$e.colors.primary.main,
 
   textAlign: {
-    right: { [vars$l.textAlign]: 'right' },
-    left: { [vars$l.textAlign]: 'left' },
-    center: { [vars$l.textAlign]: 'center' },
+    right: { [vars$m.textAlign]: 'right' },
+    left: { [vars$m.textAlign]: 'left' },
+    center: { [vars$m.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$l.hostWidth]: '100%',
+    [vars$m.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$l.textColor]: globalRefs$d.colors.primary.main,
+      [vars$m.textColor]: globalRefs$e.colors.primary.main,
     },
     secondary: {
-      [vars$l.textColor]: globalRefs$d.colors.secondary.main,
+      [vars$m.textColor]: globalRefs$e.colors.secondary.main,
     },
     error: {
-      [vars$l.textColor]: globalRefs$d.colors.error.main,
+      [vars$m.textColor]: globalRefs$e.colors.error.main,
     },
     success: {
-      [vars$l.textColor]: globalRefs$d.colors.success.main,
+      [vars$m.textColor]: globalRefs$e.colors.success.main,
     },
   },
 };
@@ -10435,10 +10677,10 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$l
+  vars: vars$m
 });
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 const compVars$3 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -10446,18 +10688,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$E
+  componentName$F
 );
 
 const divider = {
   ...helperTheme$1,
 
-  [compVars$3.hostDirection]: globalRefs$c.direction,
+  [compVars$3.hostDirection]: globalRefs$d.direction,
   [compVars$3.alignItems]: 'center',
   [compVars$3.flexDirection]: 'row',
   [compVars$3.alignSelf]: 'stretch',
   [compVars$3.hostWidth]: '100%',
-  [compVars$3.stripeColor]: globalRefs$c.colors.surface.light,
+  [compVars$3.stripeColor]: globalRefs$d.colors.surface.light,
   [compVars$3.stripeColorOpacity]: '0.5',
   [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$3.labelTextWidth]: 'fit-content',
@@ -10477,7 +10719,7 @@ const divider = {
   },
 };
 
-const vars$k = {
+const vars$l = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -10485,111 +10727,111 @@ const vars$k = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$k
+  vars: vars$l
 });
 
-const vars$j = PasscodeClass.cssVarList;
+const vars$k = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$j.hostDirection]: refs.direction,
-  [vars$j.fontFamily]: refs.fontFamily,
-  [vars$j.fontSize]: refs.fontSize,
-  [vars$j.labelTextColor]: refs.labelTextColor,
-  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$j.digitValueTextColor]: refs.valueTextColor,
-  [vars$j.digitPadding]: '0',
-  [vars$j.digitTextAlign]: 'center',
-  [vars$j.digitSpacing]: '4px',
-  [vars$j.hostWidth]: refs.width,
-  [vars$j.digitOutlineColor]: 'transparent',
-  [vars$j.digitOutlineWidth]: refs.outlineWidth,
-  [vars$j.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$j.digitSize]: refs.inputHeight,
+  [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,
 
   size: {
-    xs: { [vars$j.spinnerSize]: '15px' },
-    sm: { [vars$j.spinnerSize]: '20px' },
-    md: { [vars$j.spinnerSize]: '20px' },
-    lg: { [vars$j.spinnerSize]: '20px' },
+    xs: { [vars$k.spinnerSize]: '15px' },
+    sm: { [vars$k.spinnerSize]: '20px' },
+    md: { [vars$k.spinnerSize]: '20px' },
+    lg: { [vars$k.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$j.digitCaretTextColor]: 'transparent',
+    [vars$k.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$j.overlayOpacity]: refs.overlayOpacity,
+    [vars$k.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$j
+  vars: vars$k
 });
 
-const globalRefs$b = getThemeRefs(globals);
-const vars$i = LoaderLinearClass.cssVarList;
+const globalRefs$c = getThemeRefs(globals);
+const vars$j = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$i.hostDisplay]: 'inline-block',
-  [vars$i.hostWidth]: '100%',
+  [vars$j.hostDisplay]: 'inline-block',
+  [vars$j.hostWidth]: '100%',
 
-  [vars$i.barColor]: globalRefs$b.colors.surface.contrast,
-  [vars$i.barWidth]: '20%',
+  [vars$j.barColor]: globalRefs$c.colors.surface.contrast,
+  [vars$j.barWidth]: '20%',
 
-  [vars$i.barBackgroundColor]: globalRefs$b.colors.surface.light,
-  [vars$i.barBorderRadius]: '4px',
+  [vars$j.barBackgroundColor]: globalRefs$c.colors.surface.light,
+  [vars$j.barBorderRadius]: '4px',
 
-  [vars$i.animationDuration]: '2s',
-  [vars$i.animationTimingFunction]: 'linear',
-  [vars$i.animationIterationCount]: 'infinite',
-  [vars$i.verticalPadding]: '0.25em',
+  [vars$j.animationDuration]: '2s',
+  [vars$j.animationTimingFunction]: 'linear',
+  [vars$j.animationIterationCount]: 'infinite',
+  [vars$j.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$i.barHeight]: '2px' },
-    sm: { [vars$i.barHeight]: '4px' },
-    md: { [vars$i.barHeight]: '6px' },
-    lg: { [vars$i.barHeight]: '8px' },
+    xs: { [vars$j.barHeight]: '2px' },
+    sm: { [vars$j.barHeight]: '4px' },
+    md: { [vars$j.barHeight]: '6px' },
+    lg: { [vars$j.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$i.barColor]: globalRefs$b.colors.primary.main,
+      [vars$j.barColor]: globalRefs$c.colors.primary.main,
     },
     secondary: {
-      [vars$i.barColor]: globalRefs$b.colors.secondary.main,
+      [vars$j.barColor]: globalRefs$c.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$i.hostDisplay]: 'none',
+    [vars$j.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$i
+  vars: vars$j
 });
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 const compVars$2 = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
-    spinnerColor: globalRefs$a.colors.surface.contrast,
+    spinnerColor: globalRefs$b.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$a.colors.primary.main,
+        spinnerColor: globalRefs$b.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$a.colors.secondary.main,
+        spinnerColor: globalRefs$b.colors.secondary.main,
       },
     },
   },
-  componentName$H
+  componentName$I
 );
 
 const loaderRadial = {
@@ -10618,7 +10860,7 @@ const loaderRadial = {
     [compVars$2.hostDisplay]: 'none',
   },
 };
-const vars$h = {
+const vars$i = {
   ...compVars$2,
   ...helperVars,
 };
@@ -10626,78 +10868,114 @@ const vars$h = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$h
+  vars: vars$i
 });
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$g = ComboBoxClass.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const vars$h = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [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.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$g.inputBorderColor]: refs.borderColor,
-  [vars$g.inputBorderWidth]: refs.borderWidth,
-  [vars$g.inputBorderStyle]: refs.borderStyle,
-  [vars$g.inputBorderRadius]: refs.borderRadius,
-  [vars$g.inputOutlineColor]: refs.outlineColor,
-  [vars$g.inputOutlineOffset]: refs.outlineOffset,
-  [vars$g.inputOutlineWidth]: refs.outlineWidth,
-  [vars$g.inputOutlineStyle]: refs.outlineStyle,
-  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$g.inputValueTextColor]: refs.valueTextColor,
-  [vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$g.inputBackgroundColor]: refs.backgroundColor,
-  [vars$g.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$g.inputHeight]: refs.inputHeight,
-  [vars$g.inputDropdownButtonColor]: globalRefs$9.colors.surface.dark,
-  [vars$g.inputDropdownButtonCursor]: 'pointer',
-  [vars$g.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$g.inputDropdownButtonOffset]: globalRefs$9.spacing.xs,
-  [vars$g.overlayItemPaddingInlineStart]: globalRefs$9.spacing.xs,
-  [vars$g.overlayItemPaddingInlineEnd]: globalRefs$9.spacing.lg,
+  [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,
 
   _readonly: {
-    [vars$g.inputDropdownButtonCursor]: 'default',
+    [vars$h.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$g.overlayFontSize]: refs.fontSize,
-  [vars$g.overlayFontFamily]: refs.fontFamily,
-  [vars$g.overlayCursor]: 'pointer',
-  [vars$g.overlayItemBoxShadow]: 'none',
-  [vars$g.overlayBackground]: refs.backgroundColor,
-  [vars$g.overlayTextColor]: refs.valueTextColor,
+  [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,
 
   // Overlay direct theme:
-  [vars$g.overlay.minHeight]: '400px',
-  [vars$g.overlay.margin]: '0',
+  [vars$h.overlay.minHeight]: '400px',
+  [vars$h.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$g
+  vars: vars$h
 });
 
-const vars$f = ImageClass.cssVarList;
+const vars$g = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$f
+  vars: vars$g
 });
 
-const vars$e = PhoneFieldClass.cssVarList;
+const vars$f = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$e.hostWidth]: refs.width,
+  [vars$f.hostWidth]: refs.width,
+  [vars$f.hostDirection]: refs.direction,
+  [vars$f.fontSize]: refs.fontSize,
+  [vars$f.fontFamily]: refs.fontFamily,
+  [vars$f.labelTextColor]: refs.labelTextColor,
+  [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$f.inputValueTextColor]: refs.valueTextColor,
+  [vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$f.inputBorderStyle]: refs.borderStyle,
+  [vars$f.inputBorderWidth]: refs.borderWidth,
+  [vars$f.inputBorderColor]: refs.borderColor,
+  [vars$f.inputBorderRadius]: refs.borderRadius,
+  [vars$f.inputOutlineStyle]: refs.outlineStyle,
+  [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'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$f
+});
+
+const vars$e = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$e.hostWidth]: '16em',
+  [vars$e.hostMinWidth]: refs.minWidth,
   [vars$e.hostDirection]: refs.direction,
   [vars$e.fontSize]: refs.fontSize,
   [vars$e.fontFamily]: refs.fontFamily,
@@ -10714,180 +10992,145 @@ const phoneField = {
   [vars$e.inputOutlineWidth]: refs.outlineWidth,
   [vars$e.inputOutlineColor]: refs.outlineColor,
   [vars$e.inputOutlineOffset]: refs.outlineOffset,
-  [vars$e.phoneInputWidth]: refs.minWidth,
-  [vars$e.countryCodeInputWidth]: '5em',
-  [vars$e.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$e.hostWidth]: refs.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$e
 });
 
-const vars$d = PhoneFieldInputBoxClass.cssVarList;
+const vars$d = NewPasswordClass.cssVarList;
 
-const phoneInputBoxField = {
-  [vars$d.hostWidth]: '16em',
+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.labelTextColor]: refs.labelTextColor,
-  [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$d.spaceBetweenInputs]: '1em',
   [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$d.inputValueTextColor]: refs.valueTextColor,
-  [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$d.inputBorderStyle]: refs.borderStyle,
-  [vars$d.inputBorderWidth]: refs.borderWidth,
-  [vars$d.inputBorderColor]: refs.borderColor,
-  [vars$d.inputBorderRadius]: refs.borderRadius,
-  [vars$d.inputOutlineStyle]: refs.outlineStyle,
-  [vars$d.inputOutlineWidth]: refs.outlineWidth,
-  [vars$d.inputOutlineColor]: refs.outlineColor,
-  [vars$d.inputOutlineOffset]: refs.outlineOffset,
-  _fullWidth: {
-    [vars$d.hostWidth]: refs.width,
-  },
-};
-
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$d
-});
-
-const vars$c = NewPasswordClass.cssVarList;
-
-const newPassword = {
-  [vars$c.hostWidth]: refs.width,
-  [vars$c.hostMinWidth]: refs.minWidth,
-  [vars$c.hostDirection]: refs.direction,
-  [vars$c.fontSize]: refs.fontSize,
-  [vars$c.fontFamily]: refs.fontFamily,
-  [vars$c.spaceBetweenInputs]: '1em',
-  [vars$c.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$c.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$d.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$c
+  vars: vars$d
 });
 
-const vars$b = UploadFileClass.cssVarList;
+const vars$c = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$b.hostDirection]: refs.direction,
-  [vars$b.labelTextColor]: refs.labelTextColor,
-  [vars$b.fontFamily]: refs.fontFamily,
+  [vars$c.hostDirection]: refs.direction,
+  [vars$c.labelTextColor]: refs.labelTextColor,
+  [vars$c.fontFamily]: refs.fontFamily,
 
-  [vars$b.iconSize]: '2em',
+  [vars$c.iconSize]: '2em',
 
-  [vars$b.hostPadding]: '0.75em',
-  [vars$b.gap]: '0.5em',
+  [vars$c.hostPadding]: '0.75em',
+  [vars$c.gap]: '0.5em',
 
-  [vars$b.fontSize]: '16px',
-  [vars$b.titleFontWeight]: '500',
-  [vars$b.lineHeight]: '1em',
+  [vars$c.fontSize]: '16px',
+  [vars$c.titleFontWeight]: '500',
+  [vars$c.lineHeight]: '1em',
 
-  [vars$b.borderWidth]: refs.borderWidth,
-  [vars$b.borderColor]: refs.borderColor,
-  [vars$b.borderRadius]: refs.borderRadius,
-  [vars$b.borderStyle]: 'dashed',
+  [vars$c.borderWidth]: refs.borderWidth,
+  [vars$c.borderColor]: refs.borderColor,
+  [vars$c.borderRadius]: refs.borderRadius,
+  [vars$c.borderStyle]: 'dashed',
 
   _required: {
-    [vars$b.requiredIndicator]: refs.requiredIndicator,
+    [vars$c.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$b.hostHeight]: '196px',
-      [vars$b.hostWidth]: '200px',
-      [vars$b.titleFontSize]: '0.875em',
-      [vars$b.descriptionFontSize]: '0.875em',
-      [vars$b.lineHeight]: '1.25em',
+      [vars$c.hostHeight]: '196px',
+      [vars$c.hostWidth]: '200px',
+      [vars$c.titleFontSize]: '0.875em',
+      [vars$c.descriptionFontSize]: '0.875em',
+      [vars$c.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$b.hostHeight]: '216px',
-      [vars$b.hostWidth]: '230px',
-      [vars$b.titleFontSize]: '1em',
-      [vars$b.descriptionFontSize]: '0.875em',
-      [vars$b.lineHeight]: '1.25em',
+      [vars$c.hostHeight]: '216px',
+      [vars$c.hostWidth]: '230px',
+      [vars$c.titleFontSize]: '1em',
+      [vars$c.descriptionFontSize]: '0.875em',
+      [vars$c.lineHeight]: '1.25em',
     },
     md: {
-      [vars$b.hostHeight]: '256px',
-      [vars$b.hostWidth]: '312px',
-      [vars$b.titleFontSize]: '1.125em',
-      [vars$b.descriptionFontSize]: '1em',
-      [vars$b.lineHeight]: '1.5em',
+      [vars$c.hostHeight]: '256px',
+      [vars$c.hostWidth]: '312px',
+      [vars$c.titleFontSize]: '1.125em',
+      [vars$c.descriptionFontSize]: '1em',
+      [vars$c.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$b.hostHeight]: '280px',
-      [vars$b.hostWidth]: '336px',
-      [vars$b.titleFontSize]: '1.125em',
-      [vars$b.descriptionFontSize]: '1.125em',
-      [vars$b.lineHeight]: '1.75em',
+      [vars$c.hostHeight]: '280px',
+      [vars$c.hostWidth]: '336px',
+      [vars$c.titleFontSize]: '1.125em',
+      [vars$c.descriptionFontSize]: '1.125em',
+      [vars$c.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$b.hostWidth]: refs.width,
+    [vars$c.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$b
+  vars: vars$c
 });
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 
-const vars$a = ButtonSelectionGroupItemClass.cssVarList;
+const vars$b = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$a.hostDirection]: 'inherit',
-  [vars$a.backgroundColor]: globalRefs$8.colors.surface.main,
-  [vars$a.labelTextColor]: globalRefs$8.colors.surface.contrast,
-  [vars$a.borderColor]: globalRefs$8.colors.surface.light,
-  [vars$a.borderStyle]: 'solid',
-  [vars$a.borderRadius]: globalRefs$8.radius.sm,
-  [vars$a.outlineColor]: 'transparent',
+  [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,
 
   _hover: {
-    [vars$a.backgroundColor]: globalRefs$8.colors.surface.highlight,
+    [vars$b.backgroundColor]: globalRefs$9.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$a.outlineColor]: globalRefs$8.colors.surface.light,
+    [vars$b.outlineColor]: globalRefs$9.colors.surface.light,
   },
 
   _selected: {
-    [vars$a.borderColor]: globalRefs$8.colors.surface.contrast,
-    [vars$a.backgroundColor]: globalRefs$8.colors.surface.contrast,
-    [vars$a.labelTextColor]: globalRefs$8.colors.surface.main,
+    [vars$b.borderColor]: globalRefs$9.colors.surface.contrast,
+    [vars$b.backgroundColor]: globalRefs$9.colors.surface.contrast,
+    [vars$b.labelTextColor]: globalRefs$9.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$a
+  vars: vars$b
 });
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 
 const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostDirection]: refs.direction,
@@ -10895,84 +11138,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.itemsSpacing]: globalRefs$7.spacing.sm,
+  [vars.itemsSpacing]: globalRefs$8.spacing.sm,
   [vars.hostWidth]: refs.width,
 });
 
-const vars$9 = ButtonSelectionGroupClass.cssVarList;
+const vars$a = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$9),
+  ...createBaseButtonSelectionGroupMappings(vars$a),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$9
+  vars: vars$a
 });
 
-const vars$8 = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$9 = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$8),
+  ...createBaseButtonSelectionGroupMappings(vars$9),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$8
+  vars: vars$9
 });
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 
 const compVars$1 = ModalClass.cssVarList;
 
 const modal = {
-  [compVars$1.overlayBackgroundColor]: globalRefs$6.colors.surface.main,
-  [compVars$1.overlayShadow]: globalRefs$6.shadow.wide['2xl'],
+  [compVars$1.overlayBackgroundColor]: globalRefs$7.colors.surface.main,
+  [compVars$1.overlayShadow]: globalRefs$7.shadow.wide['2xl'],
   [compVars$1.overlayWidth]: '540px',
 };
 
-const vars$7 = {
+const vars$8 = {
   ...compVars$1,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$7
+  vars: vars$8
 });
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$6 = GridClass.cssVarList;
+const globalRefs$6 = getThemeRefs(globals);
+const vars$7 = GridClass.cssVarList;
 
 const grid = {
-  [vars$6.hostWidth]: '100%',
-  [vars$6.hostHeight]: '100%',
-  [vars$6.hostMinHeight]: '400px',
-  [vars$6.fontWeight]: '400',
-  [vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
+  [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$6.fontSize]: refs.fontSize,
-  [vars$6.fontFamily]: refs.fontFamily,
+  [vars$7.fontSize]: refs.fontSize,
+  [vars$7.fontFamily]: refs.fontFamily,
 
-  [vars$6.sortIndicatorsColor]: globalRefs$5.colors.surface.light,
-  [vars$6.activeSortIndicator]: globalRefs$5.colors.surface.dark,
-  [vars$6.resizeHandleColor]: globalRefs$5.colors.surface.light,
+  [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$6.borderWidth]: refs.borderWidth,
-  [vars$6.borderStyle]: refs.borderStyle,
-  [vars$6.borderRadius]: refs.borderRadius,
-  [vars$6.borderColor]: 'transparent',
+  [vars$7.borderWidth]: refs.borderWidth,
+  [vars$7.borderStyle]: refs.borderStyle,
+  [vars$7.borderRadius]: refs.borderRadius,
+  [vars$7.borderColor]: 'transparent',
 
-  [vars$6.headerRowTextColor]: globalRefs$5.colors.surface.dark,
-  [vars$6.separatorColor]: globalRefs$5.colors.surface.light,
+  [vars$7.headerRowTextColor]: globalRefs$6.colors.surface.dark,
+  [vars$7.separatorColor]: globalRefs$6.colors.surface.light,
 
-  [vars$6.valueTextColor]: globalRefs$5.colors.surface.contrast,
-  [vars$6.selectedBackgroundColor]: globalRefs$5.colors.surface.highlight,
+  [vars$7.valueTextColor]: globalRefs$6.colors.surface.contrast,
+  [vars$7.selectedBackgroundColor]: globalRefs$6.colors.surface.highlight,
 
   _bordered: {
-    [vars$6.borderColor]: refs.borderColor,
+    [vars$7.borderColor]: refs.borderColor,
   },
 };
 
@@ -10980,53 +11223,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$6
+  vars: vars$7
 });
 
-const globalRefs$4 = getThemeRefs(globals);
-const vars$5 = NotificationCardClass.cssVarList;
+const globalRefs$5 = getThemeRefs(globals);
+const vars$6 = NotificationCardClass.cssVarList;
 
 const shadowColor = '#00000020';
 
 const notification = {
-  [vars$5.hostMinWidth]: '415px',
-  [vars$5.fontFamily]: globalRefs$4.fonts.font1.family,
-  [vars$5.fontSize]: globalRefs$4.typography.body1.size,
-  [vars$5.backgroundColor]: globalRefs$4.colors.surface.main,
-  [vars$5.textColor]: globalRefs$4.colors.surface.contrast,
-  [vars$5.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${shadowColor}`,
-  [vars$5.verticalPadding]: '0.625em',
-  [vars$5.horizontalPadding]: '1.5em',
-  [vars$5.borderRadius]: globalRefs$4.radius.xs,
+  [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,
 
   _bordered: {
-    [vars$5.borderWidth]: globalRefs$4.border.sm,
-    [vars$5.borderStyle]: 'solid',
-    [vars$5.borderColor]: 'transparent',
+    [vars$6.borderWidth]: globalRefs$5.border.sm,
+    [vars$6.borderStyle]: 'solid',
+    [vars$6.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$5.fontSize]: '12px' },
-    sm: { [vars$5.fontSize]: '14px' },
-    md: { [vars$5.fontSize]: '16px' },
-    lg: { [vars$5.fontSize]: '18px' },
+    xs: { [vars$6.fontSize]: '12px' },
+    sm: { [vars$6.fontSize]: '14px' },
+    md: { [vars$6.fontSize]: '16px' },
+    lg: { [vars$6.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$5.backgroundColor]: globalRefs$4.colors.primary.main,
-      [vars$5.textColor]: globalRefs$4.colors.primary.contrast,
-      [vars$5.borderColor]: globalRefs$4.colors.primary.light,
+      [vars$6.backgroundColor]: globalRefs$5.colors.primary.main,
+      [vars$6.textColor]: globalRefs$5.colors.primary.contrast,
+      [vars$6.borderColor]: globalRefs$5.colors.primary.light,
     },
     success: {
-      [vars$5.backgroundColor]: globalRefs$4.colors.success.main,
-      [vars$5.textColor]: globalRefs$4.colors.success.contrast,
-      [vars$5.borderColor]: globalRefs$4.colors.success.light,
+      [vars$6.backgroundColor]: globalRefs$5.colors.success.main,
+      [vars$6.textColor]: globalRefs$5.colors.success.contrast,
+      [vars$6.borderColor]: globalRefs$5.colors.success.light,
     },
     error: {
-      [vars$5.backgroundColor]: globalRefs$4.colors.error.main,
-      [vars$5.textColor]: globalRefs$4.colors.error.contrast,
-      [vars$5.borderColor]: globalRefs$4.colors.error.light,
+      [vars$6.backgroundColor]: globalRefs$5.colors.error.main,
+      [vars$6.textColor]: globalRefs$5.colors.error.contrast,
+      [vars$6.borderColor]: globalRefs$5.colors.error.light,
     },
   },
 };
@@ -11034,128 +11277,128 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$5
+  vars: vars$6
 });
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$4 = MultiSelectComboBoxClass.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
+const vars$5 = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$4.hostWidth]: refs.width,
-  [vars$4.hostDirection]: refs.direction,
-  [vars$4.fontSize]: refs.fontSize,
-  [vars$4.fontFamily]: refs.fontFamily,
-  [vars$4.labelTextColor]: refs.labelTextColor,
-  [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$4.inputBorderColor]: refs.borderColor,
-  [vars$4.inputBorderWidth]: refs.borderWidth,
-  [vars$4.inputBorderStyle]: refs.borderStyle,
-  [vars$4.inputBorderRadius]: refs.borderRadius,
-  [vars$4.inputOutlineColor]: refs.outlineColor,
-  [vars$4.inputOutlineOffset]: refs.outlineOffset,
-  [vars$4.inputOutlineWidth]: refs.outlineWidth,
-  [vars$4.inputOutlineStyle]: refs.outlineStyle,
-  [vars$4.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$4.inputValueTextColor]: refs.valueTextColor,
-  [vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$4.inputBackgroundColor]: refs.backgroundColor,
-  [vars$4.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$4.inputVerticalPadding]: refs.verticalPadding,
-  [vars$4.inputHeight]: refs.inputHeight,
-  [vars$4.inputDropdownButtonColor]: globalRefs$3.colors.surface.dark,
-  [vars$4.inputDropdownButtonCursor]: 'pointer',
-  [vars$4.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$4.inputDropdownButtonOffset]: globalRefs$3.spacing.xs,
-  [vars$4.overlayItemPaddingInlineStart]: globalRefs$3.spacing.xs,
-  [vars$4.overlayItemPaddingInlineEnd]: globalRefs$3.spacing.lg,
-  [vars$4.chipFontSize]: refs.chipFontSize,
-  [vars$4.chipTextColor]: globalRefs$3.colors.surface.contrast,
-  [vars$4.chipBackgroundColor]: globalRefs$3.colors.surface.light,
+  [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,
 
   _readonly: {
-    [vars$4.inputDropdownButtonCursor]: 'default',
+    [vars$5.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$4.overlayFontSize]: refs.fontSize,
-  [vars$4.overlayFontFamily]: refs.fontFamily,
-  [vars$4.overlayCursor]: 'pointer',
-  [vars$4.overlayItemBoxShadow]: 'none',
-  [vars$4.overlayBackground]: refs.backgroundColor,
-  [vars$4.overlayTextColor]: refs.valueTextColor,
+  [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,
 
   // Overlay direct theme:
-  [vars$4.overlay.minHeight]: '400px',
-  [vars$4.overlay.margin]: '0',
+  [vars$5.overlay.minHeight]: '400px',
+  [vars$5.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$4
+  vars: vars$5
 });
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$3 = BadgeClass.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
+const vars$4 = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$3.hostWidth]: 'fit-content',
-  [vars$3.hostDirection]: globalRefs$2.direction,
+  [vars$4.hostWidth]: 'fit-content',
+  [vars$4.hostDirection]: globalRefs$3.direction,
 
-  [vars$3.textAlign]: 'center',
+  [vars$4.textAlign]: 'center',
 
-  [vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
-  [vars$3.fontWeight]: '400',
+  [vars$4.fontFamily]: globalRefs$3.fonts.font1.family,
+  [vars$4.fontWeight]: '400',
 
-  [vars$3.verticalPadding]: '0.25em',
-  [vars$3.horizontalPadding]: '0.5em',
+  [vars$4.verticalPadding]: '0.25em',
+  [vars$4.horizontalPadding]: '0.5em',
 
-  [vars$3.borderWidth]: globalRefs$2.border.xs,
-  [vars$3.borderRadius]: globalRefs$2.radius.xs,
-  [vars$3.borderColor]: 'transparent',
-  [vars$3.borderStyle]: 'solid',
+  [vars$4.borderWidth]: globalRefs$3.border.xs,
+  [vars$4.borderRadius]: globalRefs$3.radius.xs,
+  [vars$4.borderColor]: 'transparent',
+  [vars$4.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$3.hostWidth]: '100%',
+    [vars$4.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$3.fontSize]: '12px' },
-    sm: { [vars$3.fontSize]: '14px' },
-    md: { [vars$3.fontSize]: '16px' },
-    lg: { [vars$3.fontSize]: '18px' },
+    xs: { [vars$4.fontSize]: '12px' },
+    sm: { [vars$4.fontSize]: '14px' },
+    md: { [vars$4.fontSize]: '16px' },
+    lg: { [vars$4.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$3.textColor]: globalRefs$2.colors.surface.dark,
+      [vars$4.textColor]: globalRefs$3.colors.surface.dark,
       _bordered: {
-        [vars$3.borderColor]: globalRefs$2.colors.surface.light,
+        [vars$4.borderColor]: globalRefs$3.colors.surface.light,
       },
     },
     primary: {
-      [vars$3.textColor]: globalRefs$2.colors.primary.main,
+      [vars$4.textColor]: globalRefs$3.colors.primary.main,
       _bordered: {
-        [vars$3.borderColor]: globalRefs$2.colors.primary.light,
+        [vars$4.borderColor]: globalRefs$3.colors.primary.light,
       },
     },
     secondary: {
-      [vars$3.textColor]: globalRefs$2.colors.secondary.main,
+      [vars$4.textColor]: globalRefs$3.colors.secondary.main,
       _bordered: {
-        [vars$3.borderColor]: globalRefs$2.colors.secondary.light,
+        [vars$4.borderColor]: globalRefs$3.colors.secondary.light,
       },
     },
     error: {
-      [vars$3.textColor]: globalRefs$2.colors.error.main,
+      [vars$4.textColor]: globalRefs$3.colors.error.main,
       _bordered: {
-        [vars$3.borderColor]: globalRefs$2.colors.error.light,
+        [vars$4.borderColor]: globalRefs$3.colors.error.light,
       },
     },
     success: {
-      [vars$3.textColor]: globalRefs$2.colors.success.main,
+      [vars$4.textColor]: globalRefs$3.colors.success.main,
       _bordered: {
-        [vars$3.borderColor]: globalRefs$2.colors.success.light,
+        [vars$4.borderColor]: globalRefs$3.colors.success.light,
       },
     },
   },
@@ -11164,19 +11407,23 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$3
+  vars: vars$4
 });
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$2 = getThemeRefs(globals);
 const compVars = AvatarClass.cssVarList;
 
 const avatar = {
-  [compVars.hostDirection]: globalRefs$1.direction,
-  [compVars.editableIconColor]: globalRefs$1.colors.surface.dark,
-  [compVars.editableBorderColor]: globalRefs$1.colors.surface.dark,
-  [compVars.editableBackgroundColor]: globalRefs$1.colors.surface.main,
-  [compVars.avatarTextColor]: globalRefs$1.colors.surface.main,
-  [compVars.avatarBackgroundColor]: globalRefs$1.colors.surface.dark,
+  [compVars.hostDirection]: globalRefs$2.direction,
+  [compVars.editableIconColor]: globalRefs$2.colors.surface.dark,
+  [compVars.editableBorderColor]: globalRefs$2.colors.surface.dark,
+  [compVars.editableBackgroundColor]: globalRefs$2.colors.surface.main,
+  [compVars.avatarTextColor]: globalRefs$2.colors.surface.main,
+  [compVars.avatarBackgroundColor]: globalRefs$2.colors.surface.dark,
+
+  _editable: {
+    [compVars.cursor]: 'pointer',
+  },
 
   size: {
     xs: {
@@ -11198,41 +11445,62 @@ const avatar = {
   },
 };
 
-const vars$2 = {
+const vars$3 = {
   ...compVars,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$2
+  vars: vars$3
 });
 
-const globalRefs = getThemeRefs(globals);
+const globalRefs$1 = getThemeRefs(globals);
 
-const vars$1 = MappingsFieldClass.cssVarList;
+const vars$2 = MappingsFieldClass.cssVarList;
 
 const mappingsField = {
-  [vars$1.hostWidth]: refs.width,
-  [vars$1.hostDirection]: refs.direction,
-  [vars$1.fontSize]: refs.fontSize,
-  [vars$1.fontFamily]: refs.fontFamily,
-  [vars$1.separatorFontSize]: '14px',
-  [vars$1.labelTextColor]: refs.labelTextColor,
-  [vars$1.itemMarginBottom]: '1em',
+  [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',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$1.valueLabelMinWidth]: refs.minWidth,
+  [vars$2.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$1.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
-  [vars$1.labelsMarginBottom]: `calc(${globalRefs.typography.body2.size} / 2)`,
-  [vars$1.separatorWidth]: '70px',
-  [vars$1.removeButtonWidth]: '60px',
+  [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',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
+  vars: vars$2
+});
+
+const globalRefs = getThemeRefs(globals);
+const vars$1 = 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',
+  _fullWidth: {
+    [vars$1.hostWidth]: '100%',
+  },
+};
+
+var userAttribute$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: userAttribute,
   vars: vars$1
 });
 
@@ -11272,6 +11540,7 @@ const components = {
   badge: badge$1,
   avatar: avatar$1,
   mappingsField: mappingsField$1,
+  userAttribute: userAttribute$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -11284,7 +11553,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$A, components: vars };
+const themeVars = { globals: vars$B, components: vars };
 
 const colors = {
   surface: {
@@ -11330,5 +11599,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, 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, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map