@descope/web-components-ui 1.0.245 → 1.0.247

package/dist/index.esm.js

@@ -761,11 +761,11 @@ const inputValidationMixin = (superclass) =>
     }
 
     get defaultErrorMsgRangeUnderflow() {
-      return `At least ${this.minItemsSelection} items are required.`;
+      return `At least ${this.getAttribute('min-items-selection')} items are required.`;
     }
 
     get defaultErrorMsgRangeOverflow() {
-      return `At most ${this.maxItemsSelection} items are allowed.`;
+      return `At most ${this.getAttribute('max-items-selection')} items are allowed.`;
     }
 
     getErrorMessage(flags) {
@@ -1061,10 +1061,11 @@ const DISPLAY_NAME_SEPARATOR = '_';
 
 const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
-const withWaitForShadowRoot = (getRootElementFn) => (that) =>
-  new Promise((res) => {
+const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
+  const ele = await getRootElementFn(that);
+
+  return new Promise((res) => {
     const MAX_RETRIES = 20;
-    const ele = getRootElementFn(that);
     let counter = 0;
 
     const check = () => {
@@ -1077,11 +1078,12 @@ const withWaitForShadowRoot = (getRootElementFn) => (that) =>
 
       counter++;
 
-      if (!ele.shadowRoot) setTimeout(check);
+      if (!ele?.shadowRoot) setTimeout(check);
       else res(ele.shadowRoot);
     };
     check();
   });
+};
 
 const portalMixin =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
@@ -1107,35 +1109,44 @@ const portalMixin =
 
       constructor() {
         // we cannot use "this" before calling "super"
-        const getRootElement = (that) => {
+        const getRootElement = async (that) => {
           const baseEle = that.shadowRoot.querySelector(that.baseSelector);
-          const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
+          if (!selector) {
+            return baseEle;
+          }
 
-          return portal;
+          // in case we have a selector, we should first wait for the base element shadow root
+          //  and then look for the internal element
+          const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
+          return baseEleShadowRoot.querySelector(selector);
         };
 
+        const getPortalElement = withWaitForShadowRoot(getRootElement);
+
         super({
-          getRootElement: withWaitForShadowRoot(getRootElement),
+          getRootElement: getPortalElement,
           componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
           themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
           baseSelector: ':host',
         });
 
-        this.#portalEle = getRootElement(this);
+        this.#portalEle = getPortalElement(this).then((ele) => ele.host);
       }
 
-      #handleHoverAttribute() {
-        this.#portalEle.onmouseenter = (e) => {
+      async #handleHoverAttribute() {
+        const portalEle = await this.#portalEle;
+        portalEle.onmouseenter = (e) => {
           e.target.setAttribute('hover', 'true');
         };
-        this.#portalEle.onmouseleave = (e) => {
+        portalEle.onmouseleave = (e) => {
           e.target.removeAttribute('hover');
         };
       }
 
-      init() {
+      async init() {
         super.init?.();
-        forwardAttrs(this, this.#portalEle, {
+        const portalEle = await this.#portalEle;
+        forwardAttrs(this, portalEle, {
           [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
         });
 
@@ -1247,7 +1258,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$E = getComponentName('button');
+const componentName$G = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1348,7 +1359,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$E,
+    componentName: componentName$G,
   })
 );
 
@@ -1385,7 +1396,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$E, ButtonClass);
+customElements.define(componentName$G, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1395,11 +1406,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$D = getComponentName('boolean-field-internal');
+const componentName$F = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -1475,14 +1486,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$D}
+				<${componentName$F}
 					tabindex="-1"
 					slot="input"
-				></${componentName$D}>
+				></${componentName$F}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$D);
+      this.inputElement = this.shadowRoot.querySelector(componentName$F);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1681,7 +1692,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$C = getComponentName('checkbox');
+const componentName$E = getComponentName('checkbox');
 
 const {
   host: host$g,
@@ -1787,15 +1798,15 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$C,
+    componentName: componentName$E,
   })
 );
 
-customElements.define(componentName$D, BooleanInputInternal);
+customElements.define(componentName$F, BooleanInputInternal);
 
-customElements.define(componentName$C, CheckboxClass);
+customElements.define(componentName$E, CheckboxClass);
 
-const componentName$B = getComponentName('switch-toggle');
+const componentName$D = getComponentName('switch-toggle');
 
 const {
   host: host$f,
@@ -1927,17 +1938,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$B,
+    componentName: componentName$D,
   })
 );
 
-customElements.define(componentName$B, SwitchToggleClass);
+customElements.define(componentName$D, SwitchToggleClass);
 
-const componentName$A = getComponentName('loader-linear');
+const componentName$C = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$A;
+    return componentName$C;
   }
 
   constructor() {
@@ -1998,11 +2009,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$A, LoaderLinearClass);
+customElements.define(componentName$C, LoaderLinearClass);
 
-const componentName$z = getComponentName('loader-radial');
+const componentName$B = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2046,11 +2057,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$z, LoaderRadialClass);
+customElements.define(componentName$B, LoaderRadialClass);
 
-const componentName$y = getComponentName('container');
+const componentName$A = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$y, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$A, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2102,13 +2113,13 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$y, ContainerClass);
+customElements.define(componentName$A, ContainerClass);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$x = getComponentName('text');
+const componentName$z = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2168,8 +2179,8 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const componentName$w = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
+const componentName$y = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2268,9 +2279,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$x, TextClass);
+customElements.define(componentName$z, TextClass);
 
-customElements.define(componentName$w, DividerClass);
+customElements.define(componentName$y, DividerClass);
 
 const { host: host$c, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$9, inputField: inputField$6, input, helperText: helperText$7, errorMessage: errorMessage$9 } =
   {
@@ -2327,9 +2338,9 @@ var textFieldMappings = {
   inputPlaceholderColor: { ...placeholder$3, property: 'color' },
 };
 
-const componentName$v = getComponentName('email-field');
+const componentName$x = getComponentName('email-field');
 
-const customMixin$7 = (superclass) =>
+const customMixin$6 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
@@ -2343,7 +2354,7 @@ const EmailFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$7
+  customMixin$6
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -2362,15 +2373,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$v,
+    componentName: componentName$x,
   })
 );
 
-customElements.define(componentName$v, EmailFieldClass);
+customElements.define(componentName$x, EmailFieldClass);
 
-const componentName$u = getComponentName('link');
+const componentName$w = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$u, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$w, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2435,7 +2446,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$u, LinkClass);
+customElements.define(componentName$w, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2487,27 +2498,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$t = getComponentName('logo');
+const componentName$v = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$t,
+  componentName: componentName$v,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$t, LogoClass);
+customElements.define(componentName$v, LogoClass);
 
-const componentName$s = getComponentName('totp-image');
+const componentName$u = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$s,
+  componentName: componentName$u,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$s, TotpImageClass);
+customElements.define(componentName$u, TotpImageClass);
 
-const componentName$r = getComponentName('number-field');
+const componentName$t = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2533,11 +2544,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$r,
+    componentName: componentName$t,
   })
 );
 
-customElements.define(componentName$r, NumberFieldClass);
+customElements.define(componentName$t, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2555,13 +2566,13 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$q = getComponentName('passcode-internal');
+const componentName$s = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -2787,11 +2798,11 @@ class PasscodeInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$p = getComponentName('text-field');
+const componentName$r = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
-const customMixin$6 = (superclass) =>
+const customMixin$5 = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2818,7 +2829,7 @@ const TextFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$6
+  customMixin$5
 )(
   createProxy({
     slots: ['prefix', 'suffix'],
@@ -2837,15 +2848,15 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$p,
+    componentName: componentName$r,
   })
 );
 
-const componentName$o = getComponentName('passcode');
+const componentName$q = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
-const customMixin$5 = (superclass) =>
+const customMixin$4 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
       return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -2860,17 +2871,17 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$q}
+      <${componentName$s}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$q}>
+      ><slot></slot></${componentName$s}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$q);
+      this.inputElement = this.shadowRoot.querySelector(componentName$s);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -2941,7 +2952,7 @@ const PasscodeClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$5
+  customMixin$4
 )(
   createProxy({
     slots: [],
@@ -3017,15 +3028,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$o,
+    componentName: componentName$q,
   })
 );
 
-customElements.define(componentName$p, TextFieldClass);
+customElements.define(componentName$r, TextFieldClass);
 
-customElements.define(componentName$q, PasscodeInternal);
+customElements.define(componentName$s, PasscodeInternal);
 
-customElements.define(componentName$o, PasscodeClass);
+customElements.define(componentName$q, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -3061,7 +3072,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$n = getComponentName('password');
+const componentName$p = getComponentName('password');
 
 const {
   host: host$9,
@@ -3192,13 +3203,13 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$n,
+    componentName: componentName$p,
   })
 );
 
-customElements.define(componentName$n, PasswordClass);
+customElements.define(componentName$p, PasswordClass);
 
-const componentName$m = getComponentName('text-area');
+const componentName$o = getComponentName('text-area');
 
 const {
   host: host$8,
@@ -3273,17 +3284,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$m,
+    componentName: componentName$o,
   })
 );
 
-customElements.define(componentName$m, TextAreaClass);
+customElements.define(componentName$o, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$l = getComponentName('image');
+const componentName$n = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$l, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$n, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3323,9 +3334,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$l, ImageClass);
+customElements.define(componentName$n, ImageClass);
 
-const componentName$k = getComponentName('combo-box');
+const componentName$m = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3689,12 +3700,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$k,
+    componentName: componentName$m,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$k, ComboBoxClass);
+customElements.define(componentName$m, ComboBoxClass);
 
 var CountryCodes = [
   {
@@ -4934,7 +4945,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$j = getComponentName('phone-field-internal');
+const componentName$l = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -4946,7 +4957,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -5118,14 +5129,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   }
 };
 
-customElements.define(componentName$j, PhoneFieldInternal$1);
+customElements.define(componentName$l, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$i = getComponentName('phone-field');
+const componentName$k = getComponentName('phone-field');
 
-const customMixin$4 = (superclass) =>
+const customMixin$3 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -5137,15 +5148,15 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$j}
+				<${componentName$l}
 					tabindex="-1"
 					slot="input"
-				></${componentName$j}>
+				></${componentName$l}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$j);
+      this.inputElement = this.shadowRoot.querySelector(componentName$l);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5265,7 +5276,7 @@ const PhoneFieldClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$4
+  customMixin$3
 )(
   createProxy({
     slots: [],
@@ -5341,17 +5352,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$i,
+    componentName: componentName$k,
   })
 );
 
-customElements.define(componentName$i, PhoneFieldClass);
+customElements.define(componentName$k, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$h = getComponentName('phone-field-internal-input-box');
+const componentName$j = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -5365,7 +5376,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -5504,13 +5515,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
   }
 }
 
-customElements.define(componentName$h, PhoneFieldInternal);
+customElements.define(componentName$j, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$g = getComponentName('phone-input-box-field');
+const componentName$i = getComponentName('phone-input-box-field');
 
-const customMixin$3 = (superclass) =>
+const customMixin$2 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -5522,15 +5533,15 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$h}
+				<${componentName$j}
 					tabindex="-1"
 					slot="input"
-				></${componentName$h}>
+				></${componentName$j}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$h);
+      this.inputElement = this.shadowRoot.querySelector(componentName$j);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5597,7 +5608,7 @@ const PhoneFieldInputBoxClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$3
+  customMixin$2
 )(
   createProxy({
     slots: [],
@@ -5663,17 +5674,17 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$g,
+    componentName: componentName$i,
   })
 );
 
-customElements.define(componentName$g, PhoneFieldInputBoxClass);
+customElements.define(componentName$i, PhoneFieldInputBoxClass);
 
-const componentName$f = getComponentName('new-password-internal');
+const componentName$h = getComponentName('new-password-internal');
 
-const componentName$e = getComponentName('new-password');
+const componentName$g = getComponentName('new-password');
 
-const customMixin$2 = (superclass) =>
+const customMixin$1 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
       super.init?.();
@@ -5681,16 +5692,16 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$f}
+			<${componentName$h}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$f}>
+			></${componentName$h}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$f);
+      this.inputElement = this.shadowRoot.querySelector(componentName$h);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5745,7 +5756,7 @@ const NewPasswordClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$2
+  customMixin$1
 )(
   createProxy({
     slots: [],
@@ -5797,7 +5808,7 @@ const NewPasswordClass = compose(
 		}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$e,
+    componentName: componentName$g,
   })
 );
 
@@ -5822,7 +5833,7 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -5987,16 +5998,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$f, NewPasswordInternal);
+customElements.define(componentName$h, NewPasswordInternal);
 
-customElements.define(componentName$e, NewPasswordClass);
+customElements.define(componentName$g, NewPasswordClass);
 
-const componentName$d = getComponentName('recaptcha');
+const componentName$f = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
-  componentName: componentName$d,
+  componentName: componentName$f,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -6148,7 +6159,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$d, RecaptchaClass);
+customElements.define(componentName$f, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -6162,7 +6173,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$c = getComponentName('upload-file');
+const componentName$e = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -6177,7 +6188,7 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$c, baseSelector: ':host > div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$e, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -6392,48 +6403,113 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$c, UploadFileClass);
+customElements.define(componentName$e, UploadFileClass);
 
-const componentName$b = getComponentName('button-selection-group-internal');
+const createBaseButtonSelectionGroupInternalClass = (componentName) => {
+  class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
+    componentName,
+    baseSelector: 'slot',
+  }) {
+    constructor() {
+      super();
 
-class ButtonSelectionGroupInternalClass extends createBaseInputClass({
-  componentName: componentName$b,
-  baseSelector: 'slot',
-}) {
-  constructor() {
-    super();
+      this.innerHTML = `
+      <style>
+      slot {
+        box-sizing: border-box;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+      }
+    </style>
+    <slot part="wrapper"></slot>
+      `;
+    }
 
-    this.innerHTML = `
-    <style>
-    slot {
-      box-sizing: border-box;
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
+    dispatchChange = createDispatchEvent.bind(this, 'change');
+
+    get items() {
+      return this.querySelector('slot').assignedElements();
     }
-  </style>
-  <slot part="wrapper"></slot>
-		`;
-  }
 
-  #dispatchChange = createDispatchEvent.bind(this, 'change');
+    get isReadonly() {
+      return this.getAttribute('readonly') === 'true';
+    }
 
-  get items() {
-    return this.querySelector('slot').assignedElements();
-  }
+    get size() {
+      return this.getAttribute('size') || 'md';
+    }
+
+    // eslint-disable-next-line getter-return, class-methods-use-this
+    get value() {
+      // eslint-disable-next-line no-console
+      console.warn('get value', 'is not implemented');
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    set value(value) {
+      // eslint-disable-next-line no-console
+      console.warn('set value', 'is not implemented');
+    }
+
+    onSizeChange() {
+      this.items.forEach((item) => {
+        item.setAttribute('size', this.size);
+      });
+    }
+
+    onReadOnlyChange() {
+      this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getValidity() {
+      // eslint-disable-next-line no-console
+      console.warn('getValidity', 'is not implemented');
+    }
 
-  get isReadonly() {
-    return this.getAttribute('readonly') === 'true';
+    onObservedAttributeChange(attrs) {
+      attrs.forEach((attr) => {
+        switch (attr) {
+          case 'size':
+            this.onSizeChange();
+            break;
+          case 'readonly':
+            this.onReadOnlyChange();
+            break;
+        }
+      });
+    }
+
+    init() {
+      // we are adding listeners before calling to super because it's stopping the events
+      this.addEventListener('focus', (e) => {
+        // we want to ignore focus events we are dispatching
+        if (e.isTrusted) {
+          this.items[0]?.focus();
+        }
+      });
+
+      super.init?.();
+
+      observeAttributes(this, this.onObservedAttributeChange.bind(this), {
+        includeAttrs: ['size', 'readonly'],
+      });
+    }
   }
 
+  return BaseButtonSelectionGroupInternalClass;
+};
+
+const componentName$d = getComponentName('button-selection-group-internal');
+
+class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
+  componentName$d
+) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
   }
 
-  get size() {
-    return this.getAttribute('size') || 'md';
-  }
-
   get allowDeselect() {
     return this.getAttribute('allow-deselect') === 'true';
   }
@@ -6449,7 +6525,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
       } else {
         this.setSelected(e.target);
       }
-      this.#dispatchChange();
+      this.dispatchChange();
     }
   }
 
@@ -6460,15 +6536,6 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     }
   }
 
-  get value() {
-    return this.getSelectedNode()?.value || '';
-  }
-
-  set value(value) {
-    const node = this.items.find((child) => child.value === value);
-    this.setSelected(node);
-  }
-
   get defaultValue() {
     return this.getAttribute('default-value');
   }
@@ -6483,14 +6550,13 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     });
   }
 
-  onSizeChange() {
-    this.items.forEach((item) => {
-      item.setAttribute('size', this.size);
-    });
+  get value() {
+    return this.getSelectedNode()?.value || '';
   }
 
-  onReadOnlyChange() {
-    this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
+  set value(value) {
+    const node = this.items.find((child) => child.value === value);
+    this.setSelected(node);
   }
 
   getValidity() {
@@ -6501,42 +6567,16 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     return {};
   }
 
-  onObservedAttributeChange(attrs) {
-    attrs.forEach((attr) => {
-      switch (attr) {
-        case 'size':
-          this.onSizeChange();
-          break;
-        case 'readonly':
-          this.onReadOnlyChange();
-          break;
-      }
-    });
-  }
-
   init() {
-    // we are adding listeners before calling to super because it's stopping the events
-    this.addEventListener('focus', (e) => {
-      // we want to ignore focus events we are dispatching
-      if (e.isTrusted) {
-        this.items[0]?.focus();
-      }
-    });
+    super.init();
 
-    super.init?.();
     this.setDefaultValue();
 
-    observeAttributes(this, this.onObservedAttributeChange.bind(this), {
-      includeAttrs: ['size', 'readonly'],
-    });
-
     this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
   }
 }
 
-const componentName$a = getComponentName('button-selection-group');
-
-const customMixin$1 = (superclass) =>
+const buttonSelectionGroupBaseMixin = (superclass) =>
   class ButtonSelectionGroupMixinClass extends superclass {
     // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ value, label }) =>
@@ -6606,25 +6646,6 @@ const customMixin$1 = (superclass) =>
 
     init() {
       super.init?.();
-      const template = document.createElement('template');
-
-      template.innerHTML = `
-			<${componentName$b}
-				name="button-selection-group"
-				slot="input"
-        tabindex="-1"
-			>
-        <slot></slot>
-      </${componentName$b}>
-			`;
-
-      this.baseElement.appendChild(template.content.cloneNode(true));
-
-      this.inputElement = this.shadowRoot.querySelector(componentName$b);
-
-      forwardAttrs(this, this.inputElement, {
-        includeAttrs: ['size', 'default-value', 'allow-deselect'],
-      });
 
       this.renderItems();
 
@@ -6643,34 +6664,24 @@ const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, in
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-  internalWrapper: { selector: 'descope-button-selection-group-internal slot' },
+  internalWrapper: { selector: () => ':host [part="internal-component"] slot' },
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const ButtonSelectionGroupClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: { ...host$2, property: 'width' },
-      hostDirection: { ...host$2, property: 'direction' },
-      fontFamily: host$2,
-      labelTextColor: [
-        { ...label$1, property: 'color' },
-        { ...requiredIndicator$1, property: 'color' },
-      ],
-      labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
-      itemsSpacing: { ...internalWrapper, property: 'gap' },
-    },
-  }),
-  draggableMixin,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  componentNameValidationMixin,
-  customMixin$1
-)(
-  createProxy({
-    slots: [],
-    wrappedEleName: 'vaadin-text-field',
-    style: () => `
+const buttonSelectionGroupMappings = {
+  hostWidth: { ...host$2, property: 'width' },
+  hostDirection: { ...host$2, property: 'direction' },
+  fontFamily: host$2,
+  labelTextColor: [
+    { ...label$1, property: 'color' },
+    { ...requiredIndicator$1, property: 'color' },
+  ],
+  labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
+  errorMessageTextColor: { ...errorMessage$1, property: 'color' },
+  itemsSpacing: { ...internalWrapper, property: 'gap' },
+};
+
+const buttonSelectionGroupStyles = `
 			:host {
 				display: inline-flex;
 				max-width: 100%;
@@ -6683,7 +6694,7 @@ const ButtonSelectionGroupClass = compose(
 				background-color: transparent;
 			}
 
-			descope-button-selection-group-internal {
+      [part="internal-component"] {
 				-webkit-mask-image: none;
 				padding: 0;
 				width: 100%;
@@ -6723,18 +6734,64 @@ const ButtonSelectionGroupClass = compose(
 
       ${resetInputLabelPosition('vaadin-text-field')}
 			${resetInputCursor('vaadin-text-field')}
-    `,
+    `;
+
+const componentName$c = getComponentName('button-selection-group');
+
+const buttonSelectionGroupMixin = (superclass) =>
+  class ButtonMultiSelectionGroupMixinClass extends superclass {
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${componentName$d}
+      	name="button-selection-group"
+      	slot="input"
+        tabindex="-1"
+        part="internal-component"
+      >
+        <slot></slot>
+      </${componentName$d}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(componentName$d);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: ['size', 'default-value', 'allow-deselect'],
+      });
+    }
+  };
+
+const ButtonSelectionGroupClass = compose(
+  createStyleMixin({
+    mappings: {
+      ...buttonSelectionGroupMappings,
+    },
+  }),
+  draggableMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin,
+  buttonSelectionGroupBaseMixin,
+  buttonSelectionGroupMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$a,
+    componentName: componentName$c,
   })
 );
 
-customElements.define(componentName$b, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$d, ButtonSelectionGroupInternalClass);
 
-const componentName$9 = getComponentName('button-selection-group-item');
+const componentName$b = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$9,
+  componentName: componentName$b,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -6832,43 +6889,201 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$9, ButtonSelectionGroupItemClass);
+customElements.define(componentName$b, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$a, ButtonSelectionGroupClass);
+customElements.define(componentName$c, ButtonSelectionGroupClass);
 
-class GridTextColumnClass extends GridSortColumn {
-  get sortable() {
-    return this.getAttribute('sortable') === 'true';
-  }
+const componentName$a = getComponentName('button-multi-selection-group-internal');
 
-  _defaultHeaderRenderer(root, _column) {
-    if (this.sortable) {
-      super._defaultHeaderRenderer(root, _column);
+class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
+  componentName$a
+) {
+  #getSelectedNodes() {
+    return this.items.filter((item) => item.hasAttribute('selected'));
+  }
 
-      return;
+  onClick(e) {
+    if (e.target !== e.currentTarget) {
+      if (this.#getSelectedNodes().includes(e.target)) {
+        e.target.removeAttribute('selected');
+      } else {
+        e.target.setAttribute('selected', 'true');
+      }
+      this.dispatchChange();
     }
+  }
 
-    // eslint-disable-next-line no-param-reassign
-    root.innerHTML = this.__getHeader(this.header, this.path);
+  get value() {
+    return this.#getSelectedNodes().map((node) => node.value);
   }
-}
 
-const componentName$8 = getComponentName('grid-text-column');
+  set value(values) {
+    this.items.forEach((item) => {
+      if (values.includes(item.value)) {
+        item.setAttribute('selected', 'true');
+      }
+    });
+  }
 
-customElements.define(componentName$8, GridTextColumnClass);
+  get minItemsSelection() {
+    return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
+  }
 
-/* eslint-disable no-param-reassign */
+  get maxItemsSelection() {
+    return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
+  }
 
-class GridCustomColumnClass extends GridTextColumnClass {
-  _defaultRenderer(cell, _col, model) {
-    const content = model.item[this.path];
+  // eslint-disable-next-line class-methods-use-this
+  #isValidDataType(data) {
+    const isValid = Array.isArray(data);
+    if (!isValid) {
+      // eslint-disable-next-line no-console
+      console.error('default-values must be an array, received:', data);
+    }
 
-    // we get a list of elements that can be used to render the content
-    // each element can have a "pattern" attribute which contains regex expression
-    // we are going over the elements, and when finding an element which is pattern matches the data,
-    // we are cloning this element, and injecting the data as its child
-    const contentEle = Array.from(this.children).find((child) => {
-      const pattern = child.getAttribute('data-pattern');
+    return isValid;
+  }
+
+  get defaultValues() {
+    const defaultValuesAttr = this.getAttribute('default-values');
+    if (defaultValuesAttr) {
+      try {
+        const defaultValues = JSON.parse(defaultValuesAttr);
+        if (this.#isValidDataType(defaultValues)) {
+          return defaultValues;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('could not parse data string from attribute "default-values" -', e.message);
+      }
+    }
+    return [];
+  }
+
+  setDefaultValues() {
+    // we want to defer this action until all attributes are synced
+    setTimeout(() => {
+      if (this.defaultValues) {
+        this.value = this.defaultValues;
+        this.setCustomValidity();
+      }
+    });
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value.length) {
+      return { valueMissing: true };
+    }
+    // If the field is not required, no minimum selection can be set
+    if (this.isRequired && this.minItemsSelection && this.value.length < this.minItemsSelection) {
+      return {
+        rangeUnderflow: true,
+      };
+    }
+    if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
+      return {
+        rangeOverflow: true,
+      };
+    }
+    return {};
+  }
+
+  init() {
+    super.init();
+
+    this.setDefaultValues();
+
+    this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
+  }
+}
+
+const componentName$9 = getComponentName('button-multi-selection-group');
+
+const buttonMultiSelectionGroupMixin = (superclass) =>
+  class ButtonMultiSelectionGroupMixinClass extends superclass {
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${componentName$a}
+      	name="button-selection-group"
+      	slot="input"
+        tabindex="-1"
+        part="internal-component"
+      >
+        <slot></slot>
+      </${componentName$a}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(componentName$a);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
+      });
+    }
+  };
+
+const ButtonMultiSelectionGroupClass = compose(
+  createStyleMixin({
+    mappings: {
+      ...buttonSelectionGroupMappings,
+    },
+  }),
+  draggableMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin,
+  buttonSelectionGroupBaseMixin,
+  buttonMultiSelectionGroupMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => buttonSelectionGroupStyles,
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$9,
+  })
+);
+
+customElements.define(componentName$a, ButtonMultiSelectionGroupInternalClass);
+
+customElements.define(componentName$9, ButtonMultiSelectionGroupClass);
+
+class GridTextColumnClass extends GridSortColumn {
+  get sortable() {
+    return this.getAttribute('sortable') === 'true';
+  }
+
+  _defaultHeaderRenderer(root, _column) {
+    if (this.sortable) {
+      super._defaultHeaderRenderer(root, _column);
+
+      return;
+    }
+
+    // eslint-disable-next-line no-param-reassign
+    root.innerHTML = this.__getHeader(this.header, this.path);
+  }
+}
+
+const componentName$8 = getComponentName('grid-text-column');
+
+customElements.define(componentName$8, GridTextColumnClass);
+
+/* eslint-disable no-param-reassign */
+
+class GridCustomColumnClass extends GridTextColumnClass {
+  _defaultRenderer(cell, _col, model) {
+    const content = model.item[this.path];
+
+    // we get a list of elements that can be used to render the content
+    // each element can have a "pattern" attribute which contains regex expression
+    // we are going over the elements, and when finding an element which is pattern matches the data,
+    // we are cloning this element, and injecting the data as its child
+    const contentEle = Array.from(this.children).find((child) => {
+      const pattern = child.getAttribute('data-pattern');
       if (!pattern) return true;
 
       const regEx = new RegExp(pattern);
@@ -7205,7 +7420,7 @@ customElements.define(componentName$5, GridClass);
 
 const componentName$4 = getComponentName('multi-select-combo-box');
 
-const MultiSelectComboBoxMixin = (superclass) =>
+const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
     // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ displayName, value, label }) => {
@@ -7628,7 +7843,7 @@ const MultiSelectComboBoxClass = compose(
   }),
   composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
   componentNameValidationMixin,
-  MultiSelectComboBoxMixin
+  multiSelectComboBoxMixin
 )(
   createProxy({
     slots: ['', 'prefix'],
@@ -8079,7 +8294,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$w = getThemeVars(globals);
+const vars$x = getThemeVars(globals);
 
 const globalRefs$i = getThemeRefs(globals);
 const compVars$4 = ButtonClass.cssVarList;
@@ -8092,7 +8307,7 @@ const mode = {
   surface: globalRefs$i.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$G);
 
 const button = {
   ...helperTheme$3,
@@ -8190,7 +8405,7 @@ const button = {
   },
 };
 
-const vars$v = {
+const vars$w = {
   ...compVars$4,
   ...helperVars$3,
 };
@@ -8198,13 +8413,13 @@ const vars$v = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$v
+  vars: vars$w
 });
 
 const componentName$2 = getComponentName('input-wrapper');
 const globalRefs$h = getThemeRefs(globals);
 
-const [theme$1, refs, vars$u] = createHelperVars(
+const [theme$1, refs, vars$v] = createHelperVars(
   {
     labelTextColor: globalRefs$h.colors.surface.contrast,
     valueTextColor: globalRefs$h.colors.surface.contrast,
@@ -8277,22 +8492,58 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$u
+  vars: vars$v
 });
 
-const vars$t = TextFieldClass.cssVarList;
+const vars$u = TextFieldClass.cssVarList;
 
 const textField = {
+  [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.inputValueTextColor]: refs.valueTextColor,
+  [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
+  [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.inputHeight]: refs.inputHeight,
+  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$u
+});
+
+const globalRefs$g = getThemeRefs(globals);
+const vars$t = PasswordClass.cssVarList;
+
+const password = {
   [vars$t.hostWidth]: refs.width,
-  [vars$t.hostMinWidth]: refs.minWidth,
   [vars$t.hostDirection]: refs.direction,
   [vars$t.fontSize]: refs.fontSize,
   [vars$t.fontFamily]: refs.fontFamily,
   [vars$t.labelTextColor]: refs.labelTextColor,
-  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$t.inputHeight]: refs.inputHeight,
+  [vars$t.inputBackgroundColor]: refs.backgroundColor,
+  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$t.inputValueTextColor]: refs.valueTextColor,
-  [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$t.inputBorderWidth]: refs.borderWidth,
   [vars$t.inputBorderStyle]: refs.borderStyle,
   [vars$t.inputBorderColor]: refs.borderColor,
@@ -8301,34 +8552,28 @@ const textField = {
   [vars$t.inputOutlineStyle]: refs.outlineStyle,
   [vars$t.inputOutlineColor]: refs.outlineColor,
   [vars$t.inputOutlineOffset]: refs.outlineOffset,
-  [vars$t.inputBackgroundColor]: refs.backgroundColor,
-  [vars$t.inputHeight]: refs.inputHeight,
-  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$t.revealButtonOffset]: globalRefs$g.spacing.md,
+  [vars$t.revealButtonSize]: refs.toggleButtonSize,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$t
 });
 
-const globalRefs$g = getThemeRefs(globals);
-const vars$s = PasswordClass.cssVarList;
+const vars$s = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$s.hostWidth]: refs.width,
+  [vars$s.hostMinWidth]: refs.minWidth,
   [vars$s.hostDirection]: refs.direction,
   [vars$s.fontSize]: refs.fontSize,
   [vars$s.fontFamily]: refs.fontFamily,
   [vars$s.labelTextColor]: refs.labelTextColor,
   [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$s.inputHeight]: refs.inputHeight,
-  [vars$s.inputBackgroundColor]: refs.backgroundColor,
-  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$s.inputValueTextColor]: refs.valueTextColor,
-  [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$s.inputBorderWidth]: refs.borderWidth,
   [vars$s.inputBorderStyle]: refs.borderStyle,
   [vars$s.inputBorderColor]: refs.borderColor,
@@ -8337,19 +8582,21 @@ const password = {
   [vars$s.inputOutlineStyle]: refs.outlineStyle,
   [vars$s.inputOutlineColor]: refs.outlineColor,
   [vars$s.inputOutlineOffset]: refs.outlineOffset,
-  [vars$s.revealButtonOffset]: globalRefs$g.spacing.md,
-  [vars$s.revealButtonSize]: refs.toggleButtonSize,
+  [vars$s.inputBackgroundColor]: refs.backgroundColor,
+  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$s.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$s
 });
 
-const vars$r = NumberFieldClass.cssVarList;
+const vars$r = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$r.hostWidth]: refs.width,
   [vars$r.hostMinWidth]: refs.minWidth,
   [vars$r.hostDirection]: refs.direction,
@@ -8358,6 +8605,7 @@ const numberField = {
   [vars$r.labelTextColor]: refs.labelTextColor,
   [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$r.inputValueTextColor]: refs.valueTextColor,
+  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$r.inputBorderWidth]: refs.borderWidth,
   [vars$r.inputBorderStyle]: refs.borderStyle,
@@ -8368,198 +8616,165 @@ const numberField = {
   [vars$r.inputOutlineColor]: refs.outlineColor,
   [vars$r.inputOutlineOffset]: refs.outlineOffset,
   [vars$r.inputBackgroundColor]: refs.backgroundColor,
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$r.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$r
 });
 
-const vars$q = EmailFieldClass.cssVarList;
+const globalRefs$f = getThemeRefs(globals);
+const vars$q = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [vars$q.hostWidth]: refs.width,
   [vars$q.hostMinWidth]: refs.minWidth,
   [vars$q.hostDirection]: refs.direction,
   [vars$q.fontSize]: refs.fontSize,
   [vars$q.fontFamily]: refs.fontFamily,
   [vars$q.labelTextColor]: refs.labelTextColor,
+  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$q.inputBackgroundColor]: refs.backgroundColor,
   [vars$q.inputValueTextColor]: refs.valueTextColor,
-  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$q.inputBorderRadius]: refs.borderRadius,
   [vars$q.inputBorderWidth]: refs.borderWidth,
   [vars$q.inputBorderStyle]: refs.borderStyle,
   [vars$q.inputBorderColor]: refs.borderColor,
-  [vars$q.inputBorderRadius]: refs.borderRadius,
   [vars$q.inputOutlineWidth]: refs.outlineWidth,
   [vars$q.inputOutlineStyle]: refs.outlineStyle,
   [vars$q.inputOutlineColor]: refs.outlineColor,
   [vars$q.inputOutlineOffset]: refs.outlineOffset,
-  [vars$q.inputBackgroundColor]: refs.backgroundColor,
-  [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$q.inputHeight]: refs.inputHeight,
+  [vars$q.inputResizeType]: 'vertical',
+  [vars$q.inputMinHeight]: '5em',
+
+  _disabled: {
+    [vars$q.inputBackgroundColor]: globalRefs$f.colors.surface.light,
+  },
+
+  _readonly: {
+    [vars$q.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$q
 });
 
-const globalRefs$f = getThemeRefs(globals);
-const vars$p = TextAreaClass.cssVarList;
+const vars$p = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [vars$p.hostWidth]: refs.width,
-  [vars$p.hostMinWidth]: refs.minWidth,
   [vars$p.hostDirection]: refs.direction,
   [vars$p.fontSize]: refs.fontSize,
   [vars$p.fontFamily]: refs.fontFamily,
   [vars$p.labelTextColor]: refs.labelTextColor,
   [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$p.labelFontWeight]: '400',
+  [vars$p.labelLineHeight]: checkboxSize,
+  [vars$p.labelSpacing]: '1em',
   [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$p.inputBackgroundColor]: refs.backgroundColor,
-  [vars$p.inputValueTextColor]: refs.valueTextColor,
-  [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$p.inputOutlineWidth]: refs.outlineWidth,
+  [vars$p.inputOutlineOffset]: refs.outlineOffset,
+  [vars$p.inputOutlineColor]: refs.outlineColor,
+  [vars$p.inputOutlineStyle]: refs.outlineStyle,
   [vars$p.inputBorderRadius]: refs.borderRadius,
+  [vars$p.inputBorderColor]: refs.borderColor,
   [vars$p.inputBorderWidth]: refs.borderWidth,
   [vars$p.inputBorderStyle]: refs.borderStyle,
-  [vars$p.inputBorderColor]: refs.borderColor,
-  [vars$p.inputOutlineWidth]: refs.outlineWidth,
-  [vars$p.inputOutlineStyle]: refs.outlineStyle,
-  [vars$p.inputOutlineColor]: refs.outlineColor,
-  [vars$p.inputOutlineOffset]: refs.outlineOffset,
-  [vars$p.inputResizeType]: 'vertical',
-  [vars$p.inputMinHeight]: '5em',
+  [vars$p.inputBackgroundColor]: refs.backgroundColor,
+  [vars$p.inputSize]: checkboxSize,
 
-  _disabled: {
-    [vars$p.inputBackgroundColor]: globalRefs$f.colors.surface.light,
+  _checked: {
+    [vars$p.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$p.inputResizeType]: 'none',
+  _disabled: {
+    [vars$p.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$p
 });
 
-const vars$o = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$e = getThemeRefs(globals);
+const vars$o = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [vars$o.hostWidth]: refs.width,
   [vars$o.hostDirection]: refs.direction,
   [vars$o.fontSize]: refs.fontSize,
   [vars$o.fontFamily]: refs.fontFamily,
-  [vars$o.labelTextColor]: refs.labelTextColor,
-  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$o.labelFontWeight]: '400',
-  [vars$o.labelLineHeight]: checkboxSize,
-  [vars$o.labelSpacing]: '1em',
-  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$o.inputOutlineWidth]: refs.outlineWidth,
   [vars$o.inputOutlineOffset]: refs.outlineOffset,
   [vars$o.inputOutlineColor]: refs.outlineColor,
   [vars$o.inputOutlineStyle]: refs.outlineStyle,
-  [vars$o.inputBorderRadius]: refs.borderRadius,
-  [vars$o.inputBorderColor]: refs.borderColor,
-  [vars$o.inputBorderWidth]: refs.borderWidth,
-  [vars$o.inputBorderStyle]: refs.borderStyle,
-  [vars$o.inputBackgroundColor]: refs.backgroundColor,
-  [vars$o.inputSize]: checkboxSize,
 
-  _checked: {
-    [vars$o.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$o.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$o
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
+  [vars$o.trackBorderStyle]: refs.borderStyle,
+  [vars$o.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$o.trackBorderColor]: refs.borderColor,
+  [vars$o.trackBackgroundColor]: 'none',
+  [vars$o.trackBorderRadius]: globalRefs$e.radius.md,
+  [vars$o.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$o.trackHeight]: checkboxHeight,
+
+  [vars$o.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$o.knobRadius]: '50%',
+  [vars$o.knobTopOffset]: '1px',
+  [vars$o.knobLeftOffset]: knobMargin,
+  [vars$o.knobColor]: refs.valueTextColor,
+  [vars$o.knobTransitionDuration]: '0.3s',
 
-const globalRefs$e = getThemeRefs(globals);
-const vars$n = SwitchToggleClass.cssVarList;
-
-const switchToggle = {
-  [vars$n.hostWidth]: refs.width,
-  [vars$n.hostDirection]: refs.direction,
-  [vars$n.fontSize]: refs.fontSize,
-  [vars$n.fontFamily]: refs.fontFamily,
-
-  [vars$n.inputOutlineWidth]: refs.outlineWidth,
-  [vars$n.inputOutlineOffset]: refs.outlineOffset,
-  [vars$n.inputOutlineColor]: refs.outlineColor,
-  [vars$n.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$n.trackBorderStyle]: refs.borderStyle,
-  [vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$n.trackBorderColor]: refs.borderColor,
-  [vars$n.trackBackgroundColor]: 'none',
-  [vars$n.trackBorderRadius]: globalRefs$e.radius.md,
-  [vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$n.trackHeight]: checkboxHeight,
-
-  [vars$n.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$n.knobRadius]: '50%',
-  [vars$n.knobTopOffset]: '1px',
-  [vars$n.knobLeftOffset]: knobMargin,
-  [vars$n.knobColor]: refs.valueTextColor,
-  [vars$n.knobTransitionDuration]: '0.3s',
-
-  [vars$n.labelTextColor]: refs.labelTextColor,
-  [vars$n.labelFontWeight]: '400',
-  [vars$n.labelLineHeight]: '1.35em',
-  [vars$n.labelSpacing]: '1em',
-  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$o.labelTextColor]: refs.labelTextColor,
+  [vars$o.labelFontWeight]: '400',
+  [vars$o.labelLineHeight]: '1.35em',
+  [vars$o.labelSpacing]: '1em',
+  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$n.trackBorderColor]: refs.borderColor,
-    [vars$n.trackBackgroundColor]: refs.backgroundColor,
-    [vars$n.knobLeftOffset]: `calc(100% - var(${vars$n.knobSize}) - ${knobMargin})`,
-    [vars$n.knobColor]: refs.valueTextColor,
-    [vars$n.knobTextColor]: refs.valueTextColor,
+    [vars$o.trackBorderColor]: refs.borderColor,
+    [vars$o.trackBackgroundColor]: refs.backgroundColor,
+    [vars$o.knobLeftOffset]: `calc(100% - var(${vars$o.knobSize}) - ${knobMargin})`,
+    [vars$o.knobColor]: refs.valueTextColor,
+    [vars$o.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$n.knobColor]: globalRefs$e.colors.surface.light,
-    [vars$n.trackBorderColor]: globalRefs$e.colors.surface.main,
-    [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
-    [vars$n.labelTextColor]: refs.labelTextColor,
+    [vars$o.knobColor]: globalRefs$e.colors.surface.light,
+    [vars$o.trackBorderColor]: globalRefs$e.colors.surface.main,
+    [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+    [vars$o.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$n.knobColor]: globalRefs$e.colors.surface.light,
-      [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+      [vars$o.knobColor]: globalRefs$e.colors.surface.light,
+      [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$n.trackBorderColor]: globalRefs$e.colors.error.main,
-    [vars$n.knobColor]: globalRefs$e.colors.error.main,
+    [vars$o.trackBorderColor]: globalRefs$e.colors.error.main,
+    [vars$o.knobColor]: globalRefs$e.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$n
+  vars: vars$o
 });
 
 const globalRefs$d = getThemeRefs(globals);
@@ -8584,7 +8799,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$y
+  componentName$A
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -8669,7 +8884,7 @@ const container = {
   },
 };
 
-const vars$m = {
+const vars$n = {
   ...compVars$3,
   ...helperVars$2,
 };
@@ -8677,154 +8892,154 @@ const vars$m = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$m
+  vars: vars$n
 });
 
-const vars$l = LogoClass.cssVarList;
+const vars$m = LogoClass.cssVarList;
 
 const logo$1 = {
-  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$l
+  vars: vars$m
 });
 
-const vars$k = TotpImageClass.cssVarList;
+const vars$l = TotpImageClass.cssVarList;
 
 const logo = {
-  [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$k
+  vars: vars$l
 });
 
 const globalRefs$c = getThemeRefs(globals);
-const vars$j = TextClass.cssVarList;
+const vars$k = TextClass.cssVarList;
 
 const text = {
-  [vars$j.hostDirection]: globalRefs$c.direction,
-  [vars$j.textLineHeight]: '1.35em',
-  [vars$j.textAlign]: 'left',
-  [vars$j.textColor]: globalRefs$c.colors.surface.dark,
+  [vars$k.hostDirection]: globalRefs$c.direction,
+  [vars$k.textLineHeight]: '1.35em',
+  [vars$k.textAlign]: 'left',
+  [vars$k.textColor]: globalRefs$c.colors.surface.dark,
   variant: {
     h1: {
-      [vars$j.fontSize]: globalRefs$c.typography.h1.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.h1.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.h1.font,
+      [vars$k.fontSize]: globalRefs$c.typography.h1.size,
+      [vars$k.fontWeight]: globalRefs$c.typography.h1.weight,
+      [vars$k.fontFamily]: globalRefs$c.typography.h1.font,
     },
     h2: {
-      [vars$j.fontSize]: globalRefs$c.typography.h2.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.h2.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.h2.font,
+      [vars$k.fontSize]: globalRefs$c.typography.h2.size,
+      [vars$k.fontWeight]: globalRefs$c.typography.h2.weight,
+      [vars$k.fontFamily]: globalRefs$c.typography.h2.font,
     },
     h3: {
-      [vars$j.fontSize]: globalRefs$c.typography.h3.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.h3.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.h3.font,
+      [vars$k.fontSize]: globalRefs$c.typography.h3.size,
+      [vars$k.fontWeight]: globalRefs$c.typography.h3.weight,
+      [vars$k.fontFamily]: globalRefs$c.typography.h3.font,
     },
     subtitle1: {
-      [vars$j.fontSize]: globalRefs$c.typography.subtitle1.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.subtitle1.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.subtitle1.font,
+      [vars$k.fontSize]: globalRefs$c.typography.subtitle1.size,
+      [vars$k.fontWeight]: globalRefs$c.typography.subtitle1.weight,
+      [vars$k.fontFamily]: globalRefs$c.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$j.fontSize]: globalRefs$c.typography.subtitle2.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.subtitle2.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.subtitle2.font,
+      [vars$k.fontSize]: globalRefs$c.typography.subtitle2.size,
+      [vars$k.fontWeight]: globalRefs$c.typography.subtitle2.weight,
+      [vars$k.fontFamily]: globalRefs$c.typography.subtitle2.font,
     },
     body1: {
-      [vars$j.fontSize]: globalRefs$c.typography.body1.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.body1.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.body1.font,
+      [vars$k.fontSize]: globalRefs$c.typography.body1.size,
+      [vars$k.fontWeight]: globalRefs$c.typography.body1.weight,
+      [vars$k.fontFamily]: globalRefs$c.typography.body1.font,
     },
     body2: {
-      [vars$j.fontSize]: globalRefs$c.typography.body2.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.body2.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.body2.font,
+      [vars$k.fontSize]: globalRefs$c.typography.body2.size,
+      [vars$k.fontWeight]: globalRefs$c.typography.body2.weight,
+      [vars$k.fontFamily]: globalRefs$c.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$j.textColor]: globalRefs$c.colors.primary.main,
+      [vars$k.textColor]: globalRefs$c.colors.primary.main,
     },
     secondary: {
-      [vars$j.textColor]: globalRefs$c.colors.secondary.main,
+      [vars$k.textColor]: globalRefs$c.colors.secondary.main,
     },
     error: {
-      [vars$j.textColor]: globalRefs$c.colors.error.main,
+      [vars$k.textColor]: globalRefs$c.colors.error.main,
     },
     success: {
-      [vars$j.textColor]: globalRefs$c.colors.success.main,
+      [vars$k.textColor]: globalRefs$c.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$j.textAlign]: 'right' },
-    left: { [vars$j.textAlign]: 'left' },
-    center: { [vars$j.textAlign]: 'center' },
+    right: { [vars$k.textAlign]: 'right' },
+    left: { [vars$k.textAlign]: 'left' },
+    center: { [vars$k.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$j.hostWidth]: '100%',
+    [vars$k.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$j.fontStyle]: 'italic',
+    [vars$k.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$j.textTransform]: 'uppercase',
+    [vars$k.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$j.textTransform]: 'lowercase',
+    [vars$k.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$j
+  vars: vars$k
 });
 
 const globalRefs$b = getThemeRefs(globals);
-const vars$i = LinkClass.cssVarList;
+const vars$j = LinkClass.cssVarList;
 
 const link = {
-  [vars$i.hostDirection]: globalRefs$b.direction,
-  [vars$i.cursor]: 'pointer',
+  [vars$j.hostDirection]: globalRefs$b.direction,
+  [vars$j.cursor]: 'pointer',
 
-  [vars$i.textColor]: globalRefs$b.colors.primary.main,
+  [vars$j.textColor]: globalRefs$b.colors.primary.main,
 
   textAlign: {
-    right: { [vars$i.textAlign]: 'right' },
-    left: { [vars$i.textAlign]: 'left' },
-    center: { [vars$i.textAlign]: 'center' },
+    right: { [vars$j.textAlign]: 'right' },
+    left: { [vars$j.textAlign]: 'left' },
+    center: { [vars$j.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$i.hostWidth]: '100%',
+    [vars$j.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$i.textColor]: globalRefs$b.colors.primary.main,
+      [vars$j.textColor]: globalRefs$b.colors.primary.main,
     },
     secondary: {
-      [vars$i.textColor]: globalRefs$b.colors.secondary.main,
+      [vars$j.textColor]: globalRefs$b.colors.secondary.main,
     },
     error: {
-      [vars$i.textColor]: globalRefs$b.colors.error.main,
+      [vars$j.textColor]: globalRefs$b.colors.error.main,
     },
     success: {
-      [vars$i.textColor]: globalRefs$b.colors.success.main,
+      [vars$j.textColor]: globalRefs$b.colors.success.main,
     },
   },
 };
@@ -8832,7 +9047,7 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$i
+  vars: vars$j
 });
 
 const globalRefs$a = getThemeRefs(globals);
@@ -8843,7 +9058,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$w
+  componentName$y
 );
 
 const divider = {
@@ -8874,7 +9089,7 @@ const divider = {
   },
 };
 
-const vars$h = {
+const vars$i = {
   ...compVars$2,
   ...helperVars$1,
 };
@@ -8882,93 +9097,93 @@ const vars$h = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$h
+  vars: vars$i
 });
 
-const vars$g = PasscodeClass.cssVarList;
+const vars$h = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$g.hostDirection]: refs.direction,
-  [vars$g.fontFamily]: refs.fontFamily,
-  [vars$g.fontSize]: refs.fontSize,
-  [vars$g.labelTextColor]: refs.labelTextColor,
-  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$g.digitValueTextColor]: refs.valueTextColor,
-  [vars$g.digitPadding]: '0',
-  [vars$g.digitTextAlign]: 'center',
-  [vars$g.digitSpacing]: '4px',
-  [vars$g.hostWidth]: refs.width,
-  [vars$g.digitOutlineColor]: 'transparent',
-  [vars$g.digitOutlineWidth]: refs.outlineWidth,
-  [vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$g.digitSize]: refs.inputHeight,
+  [vars$h.hostDirection]: refs.direction,
+  [vars$h.fontFamily]: refs.fontFamily,
+  [vars$h.fontSize]: refs.fontSize,
+  [vars$h.labelTextColor]: refs.labelTextColor,
+  [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$h.digitValueTextColor]: refs.valueTextColor,
+  [vars$h.digitPadding]: '0',
+  [vars$h.digitTextAlign]: 'center',
+  [vars$h.digitSpacing]: '4px',
+  [vars$h.hostWidth]: refs.width,
+  [vars$h.digitOutlineColor]: 'transparent',
+  [vars$h.digitOutlineWidth]: refs.outlineWidth,
+  [vars$h.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$h.digitSize]: refs.inputHeight,
 
   size: {
-    xs: { [vars$g.spinnerSize]: '15px' },
-    sm: { [vars$g.spinnerSize]: '20px' },
-    md: { [vars$g.spinnerSize]: '20px' },
-    lg: { [vars$g.spinnerSize]: '20px' },
+    xs: { [vars$h.spinnerSize]: '15px' },
+    sm: { [vars$h.spinnerSize]: '20px' },
+    md: { [vars$h.spinnerSize]: '20px' },
+    lg: { [vars$h.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$g.digitCaretTextColor]: 'transparent',
+    [vars$h.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$g.overlayOpacity]: refs.overlayOpacity,
+    [vars$h.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$g
+  vars: vars$h
 });
 
 const globalRefs$9 = getThemeRefs(globals);
-const vars$f = LoaderLinearClass.cssVarList;
+const vars$g = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$f.hostDisplay]: 'inline-block',
-  [vars$f.hostWidth]: '100%',
+  [vars$g.hostDisplay]: 'inline-block',
+  [vars$g.hostWidth]: '100%',
 
-  [vars$f.barColor]: globalRefs$9.colors.surface.contrast,
-  [vars$f.barWidth]: '20%',
+  [vars$g.barColor]: globalRefs$9.colors.surface.contrast,
+  [vars$g.barWidth]: '20%',
 
-  [vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
-  [vars$f.barBorderRadius]: '4px',
+  [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.main,
+  [vars$g.barBorderRadius]: '4px',
 
-  [vars$f.animationDuration]: '2s',
-  [vars$f.animationTimingFunction]: 'linear',
-  [vars$f.animationIterationCount]: 'infinite',
-  [vars$f.verticalPadding]: '0.25em',
+  [vars$g.animationDuration]: '2s',
+  [vars$g.animationTimingFunction]: 'linear',
+  [vars$g.animationIterationCount]: 'infinite',
+  [vars$g.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$f.barHeight]: '2px' },
-    sm: { [vars$f.barHeight]: '4px' },
-    md: { [vars$f.barHeight]: '6px' },
-    lg: { [vars$f.barHeight]: '8px' },
+    xs: { [vars$g.barHeight]: '2px' },
+    sm: { [vars$g.barHeight]: '4px' },
+    md: { [vars$g.barHeight]: '6px' },
+    lg: { [vars$g.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$f.barColor]: globalRefs$9.colors.primary.main,
+      [vars$g.barColor]: globalRefs$9.colors.primary.main,
     },
     secondary: {
-      [vars$f.barColor]: globalRefs$9.colors.secondary.main,
+      [vars$g.barColor]: globalRefs$9.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$f.hostDisplay]: 'none',
+    [vars$g.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$f
+  vars: vars$g
 });
 
 const globalRefs$8 = getThemeRefs(globals);
@@ -8986,7 +9201,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$z
+  componentName$B
 );
 
 const loaderRadial = {
@@ -9015,7 +9230,7 @@ const loaderRadial = {
     [compVars$1.hostDisplay]: 'none',
   },
 };
-const vars$e = {
+const vars$f = {
   ...compVars$1,
   ...helperVars,
 };
@@ -9023,76 +9238,112 @@ const vars$e = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$e
+  vars: vars$f
 });
 
 const globalRefs$7 = getThemeRefs(globals);
-const vars$d = ComboBoxClass.cssVarList;
+const vars$e = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$d.hostWidth]: refs.width,
-  [vars$d.hostDirection]: refs.direction,
-  [vars$d.fontSize]: refs.fontSize,
-  [vars$d.fontFamily]: refs.fontFamily,
-  [vars$d.labelTextColor]: refs.labelTextColor,
-  [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$d.inputBorderColor]: refs.borderColor,
-  [vars$d.inputBorderWidth]: refs.borderWidth,
-  [vars$d.inputBorderStyle]: refs.borderStyle,
-  [vars$d.inputBorderRadius]: refs.borderRadius,
-  [vars$d.inputOutlineColor]: refs.outlineColor,
-  [vars$d.inputOutlineOffset]: refs.outlineOffset,
-  [vars$d.inputOutlineWidth]: refs.outlineWidth,
-  [vars$d.inputOutlineStyle]: refs.outlineStyle,
-  [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$d.inputValueTextColor]: refs.valueTextColor,
-  [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$d.inputBackgroundColor]: refs.backgroundColor,
-  [vars$d.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$d.inputHeight]: refs.inputHeight,
-  [vars$d.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
-  [vars$d.inputDropdownButtonCursor]: 'pointer',
-  [vars$d.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$d.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
-  [vars$d.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
-  [vars$d.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
+  [vars$e.hostWidth]: refs.width,
+  [vars$e.hostDirection]: refs.direction,
+  [vars$e.fontSize]: refs.fontSize,
+  [vars$e.fontFamily]: refs.fontFamily,
+  [vars$e.labelTextColor]: refs.labelTextColor,
+  [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$e.inputBorderColor]: refs.borderColor,
+  [vars$e.inputBorderWidth]: refs.borderWidth,
+  [vars$e.inputBorderStyle]: refs.borderStyle,
+  [vars$e.inputBorderRadius]: refs.borderRadius,
+  [vars$e.inputOutlineColor]: refs.outlineColor,
+  [vars$e.inputOutlineOffset]: refs.outlineOffset,
+  [vars$e.inputOutlineWidth]: refs.outlineWidth,
+  [vars$e.inputOutlineStyle]: refs.outlineStyle,
+  [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$e.inputValueTextColor]: refs.valueTextColor,
+  [vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$e.inputBackgroundColor]: refs.backgroundColor,
+  [vars$e.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$e.inputHeight]: refs.inputHeight,
+  [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
+  [vars$e.inputDropdownButtonCursor]: 'pointer',
+  [vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
+  [vars$e.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
+  [vars$e.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
 
   _readonly: {
-    [vars$d.inputDropdownButtonCursor]: 'default',
+    [vars$e.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$d.overlayFontSize]: refs.fontSize,
-  [vars$d.overlayFontFamily]: refs.fontFamily,
-  [vars$d.overlayCursor]: 'pointer',
-  [vars$d.overlayItemBoxShadow]: 'none',
+  [vars$e.overlayFontSize]: refs.fontSize,
+  [vars$e.overlayFontFamily]: refs.fontFamily,
+  [vars$e.overlayCursor]: 'pointer',
+  [vars$e.overlayItemBoxShadow]: 'none',
 
   // Overlay direct theme:
-  [vars$d.overlay.minHeight]: '400px',
-  [vars$d.overlay.margin]: '0',
+  [vars$e.overlay.minHeight]: '400px',
+  [vars$e.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$d
+  vars: vars$e
 });
 
-const vars$c = ImageClass.cssVarList;
+const vars$d = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$c
+  vars: vars$d
 });
 
-const vars$b = PhoneFieldClass.cssVarList;
+const vars$c = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$b.hostWidth]: refs.width,
+  [vars$c.hostWidth]: refs.width,
+  [vars$c.hostDirection]: refs.direction,
+  [vars$c.fontSize]: refs.fontSize,
+  [vars$c.fontFamily]: refs.fontFamily,
+  [vars$c.labelTextColor]: refs.labelTextColor,
+  [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$c.inputValueTextColor]: refs.valueTextColor,
+  [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$c.inputBorderStyle]: refs.borderStyle,
+  [vars$c.inputBorderWidth]: refs.borderWidth,
+  [vars$c.inputBorderColor]: refs.borderColor,
+  [vars$c.inputBorderRadius]: refs.borderRadius,
+  [vars$c.inputOutlineStyle]: refs.outlineStyle,
+  [vars$c.inputOutlineWidth]: refs.outlineWidth,
+  [vars$c.inputOutlineColor]: refs.outlineColor,
+  [vars$c.inputOutlineOffset]: refs.outlineOffset,
+  [vars$c.phoneInputWidth]: refs.minWidth,
+  [vars$c.countryCodeInputWidth]: '5em',
+  [vars$c.countryCodeDropdownWidth]: '20em',
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$c
+});
+
+const vars$b = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$b.hostWidth]: '16em',
+  [vars$b.hostMinWidth]: refs.minWidth,
   [vars$b.hostDirection]: refs.direction,
   [vars$b.fontSize]: refs.fontSize,
   [vars$b.fontFamily]: refs.fontFamily,
@@ -9109,190 +9360,171 @@ const phoneField = {
   [vars$b.inputOutlineWidth]: refs.outlineWidth,
   [vars$b.inputOutlineColor]: refs.outlineColor,
   [vars$b.inputOutlineOffset]: refs.outlineOffset,
-  [vars$b.phoneInputWidth]: refs.minWidth,
-  [vars$b.countryCodeInputWidth]: '5em',
-  [vars$b.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$b.hostWidth]: refs.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$b
 });
 
-const vars$a = PhoneFieldInputBoxClass.cssVarList;
+const vars$a = NewPasswordClass.cssVarList;
 
-const phoneInputBoxField = {
-  [vars$a.hostWidth]: '16em',
+const newPassword = {
+  [vars$a.hostWidth]: refs.width,
   [vars$a.hostMinWidth]: refs.minWidth,
   [vars$a.hostDirection]: refs.direction,
   [vars$a.fontSize]: refs.fontSize,
   [vars$a.fontFamily]: refs.fontFamily,
-  [vars$a.labelTextColor]: refs.labelTextColor,
-  [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$a.spaceBetweenInputs]: '1em',
   [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$a.inputValueTextColor]: refs.valueTextColor,
-  [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$a.inputBorderStyle]: refs.borderStyle,
-  [vars$a.inputBorderWidth]: refs.borderWidth,
-  [vars$a.inputBorderColor]: refs.borderColor,
-  [vars$a.inputBorderRadius]: refs.borderRadius,
-  [vars$a.inputOutlineStyle]: refs.outlineStyle,
-  [vars$a.inputOutlineWidth]: refs.outlineWidth,
-  [vars$a.inputOutlineColor]: refs.outlineColor,
-  [vars$a.inputOutlineOffset]: refs.outlineOffset,
-  _fullWidth: {
-    [vars$a.hostWidth]: refs.width,
-  },
-};
-
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$a
-});
-
-const vars$9 = NewPasswordClass.cssVarList;
-
-const newPassword = {
-  [vars$9.hostWidth]: refs.width,
-  [vars$9.hostMinWidth]: refs.minWidth,
-  [vars$9.hostDirection]: refs.direction,
-  [vars$9.fontSize]: refs.fontSize,
-  [vars$9.fontFamily]: refs.fontFamily,
-  [vars$9.spaceBetweenInputs]: '1em',
-  [vars$9.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$9.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$a.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$9
+  vars: vars$a
 });
 
-const vars$8 = UploadFileClass.cssVarList;
+const vars$9 = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$8.hostDirection]: refs.direction,
-  [vars$8.labelTextColor]: refs.labelTextColor,
-  [vars$8.fontFamily]: refs.fontFamily,
+  [vars$9.hostDirection]: refs.direction,
+  [vars$9.labelTextColor]: refs.labelTextColor,
+  [vars$9.fontFamily]: refs.fontFamily,
 
-  [vars$8.iconSize]: '2em',
+  [vars$9.iconSize]: '2em',
 
-  [vars$8.hostPadding]: '0.75em',
-  [vars$8.gap]: '0.5em',
+  [vars$9.hostPadding]: '0.75em',
+  [vars$9.gap]: '0.5em',
 
-  [vars$8.fontSize]: '16px',
-  [vars$8.titleFontWeight]: '500',
-  [vars$8.lineHeight]: '1em',
+  [vars$9.fontSize]: '16px',
+  [vars$9.titleFontWeight]: '500',
+  [vars$9.lineHeight]: '1em',
 
-  [vars$8.borderWidth]: refs.borderWidth,
-  [vars$8.borderColor]: refs.borderColor,
-  [vars$8.borderRadius]: refs.borderRadius,
-  [vars$8.borderStyle]: 'dashed',
+  [vars$9.borderWidth]: refs.borderWidth,
+  [vars$9.borderColor]: refs.borderColor,
+  [vars$9.borderRadius]: refs.borderRadius,
+  [vars$9.borderStyle]: 'dashed',
 
   _required: {
-    [vars$8.requiredIndicator]: refs.requiredIndicator,
+    [vars$9.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$8.hostHeight]: '196px',
-      [vars$8.hostWidth]: '200px',
-      [vars$8.titleFontSize]: '0.875em',
-      [vars$8.descriptionFontSize]: '0.875em',
-      [vars$8.lineHeight]: '1.25em',
+      [vars$9.hostHeight]: '196px',
+      [vars$9.hostWidth]: '200px',
+      [vars$9.titleFontSize]: '0.875em',
+      [vars$9.descriptionFontSize]: '0.875em',
+      [vars$9.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$8.hostHeight]: '216px',
-      [vars$8.hostWidth]: '230px',
-      [vars$8.titleFontSize]: '1em',
-      [vars$8.descriptionFontSize]: '0.875em',
-      [vars$8.lineHeight]: '1.25em',
+      [vars$9.hostHeight]: '216px',
+      [vars$9.hostWidth]: '230px',
+      [vars$9.titleFontSize]: '1em',
+      [vars$9.descriptionFontSize]: '0.875em',
+      [vars$9.lineHeight]: '1.25em',
     },
     md: {
-      [vars$8.hostHeight]: '256px',
-      [vars$8.hostWidth]: '312px',
-      [vars$8.titleFontSize]: '1.125em',
-      [vars$8.descriptionFontSize]: '1em',
-      [vars$8.lineHeight]: '1.5em',
+      [vars$9.hostHeight]: '256px',
+      [vars$9.hostWidth]: '312px',
+      [vars$9.titleFontSize]: '1.125em',
+      [vars$9.descriptionFontSize]: '1em',
+      [vars$9.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$8.hostHeight]: '280px',
-      [vars$8.hostWidth]: '336px',
-      [vars$8.titleFontSize]: '1.125em',
-      [vars$8.descriptionFontSize]: '1.125em',
-      [vars$8.lineHeight]: '1.75em',
+      [vars$9.hostHeight]: '280px',
+      [vars$9.hostWidth]: '336px',
+      [vars$9.titleFontSize]: '1.125em',
+      [vars$9.descriptionFontSize]: '1.125em',
+      [vars$9.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$8.hostWidth]: refs.width,
+    [vars$9.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$8
+  vars: vars$9
 });
 
 const globalRefs$6 = getThemeRefs(globals);
 
-const vars$7 = ButtonSelectionGroupItemClass.cssVarList;
+const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$7.hostDirection]: 'inherit',
-  [vars$7.backgroundColor]: globalRefs$6.colors.surface.light,
-  [vars$7.labelTextColor]: globalRefs$6.colors.surface.contrast,
-  [vars$7.borderColor]: globalRefs$6.colors.surface.main,
-  [vars$7.borderStyle]: 'solid',
-  [vars$7.borderRadius]: globalRefs$6.radius.sm,
+  [vars$8.hostDirection]: 'inherit',
+  [vars$8.backgroundColor]: globalRefs$6.colors.surface.light,
+  [vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
+  [vars$8.borderColor]: globalRefs$6.colors.surface.main,
+  [vars$8.borderStyle]: 'solid',
+  [vars$8.borderRadius]: globalRefs$6.radius.sm,
 
   _hover: {
-    [vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+    [vars$8.backgroundColor]: '#f4f5f5', // can we take it from the palette?
   },
 
   _selected: {
-    [vars$7.borderColor]: globalRefs$6.colors.surface.contrast,
-    [vars$7.backgroundColor]: globalRefs$6.colors.surface.contrast,
-    [vars$7.labelTextColor]: globalRefs$6.colors.surface.light,
+    [vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
+    [vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
+    [vars$8.labelTextColor]: globalRefs$6.colors.surface.light,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$7
+  vars: vars$8
 });
 
 const globalRefs$5 = getThemeRefs(globals);
-const vars$6 = ButtonSelectionGroupClass.cssVarList;
+
+const createBaseButtonSelectionGroupMappings = (vars) => ({
+  [vars.hostDirection]: refs.direction,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.itemsSpacing]: globalRefs$5.spacing.sm,
+  [vars.hostWidth]: refs.width,
+});
+
+const vars$7 = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  [vars$6.hostDirection]: refs.direction,
-  [vars$6.fontFamily]: refs.fontFamily,
-  [vars$6.labelTextColor]: refs.labelTextColor,
-  [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
-  [vars$6.hostWidth]: refs.width,
+  ...createBaseButtonSelectionGroupMappings(vars$7),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
+  vars: vars$7
+});
+
+const vars$6 = ButtonMultiSelectionGroupClass.cssVarList;
+
+const buttonMultiSelectionGroup = {
+  ...createBaseButtonSelectionGroupMappings(vars$6),
+};
+
+var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: buttonMultiSelectionGroup,
   vars: vars$6
 });
 
@@ -9779,6 +10011,7 @@ const components = {
   uploadFile: uploadFile$1,
   buttonSelectionGroupItem: buttonSelectionGroupItem$1,
   buttonSelectionGroup: buttonSelectionGroup$1,
+  buttonMultiSelectionGroup: buttonMultiSelectionGroup$1,
   modal: modal$1,
   grid: grid$1,
   notificationCard,
@@ -9796,7 +10029,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$w, components: vars };
+const themeVars = { globals: vars$x, components: vars };
 
-export { BadgeClass, ButtonClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MultiSelectComboBoxClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MultiSelectComboBoxClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map