npm - @descope/web-components-ui - Versions diffs - 1.0.390 → 1.0.391 - Mend

@descope/web-components-ui 1.0.390 → 1.0.391

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/index.esm.js CHANGED Viewed

@@ -35,6 +35,14 @@ const kebabCase = (str) =>
 const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
+const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+const camelCaseJoin = (...args) =>
+  args
+    .filter(Boolean)
+    .map((arg, index) => (index === 0 ? arg : upperFirst(arg)))
+    .join('');
 const compose =
   (...fns) =>
   (val) =>
@@ -277,8 +285,17 @@ const normalizeConfig = (attr, config) => {
   return [{ ...defaultMapping, ...config }];
 };
+const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(origVarName, suffix);
 const createStyle = (componentName, baseSelector, mappings) => {
   const style = new StyleBuilder();
+  const createFallbackVar = (fallback, origVarName) => {
+    if (!fallback) return '';
+    if (typeof fallback === 'string') return fallback;
+    const fallbackVarName = getFallbackVarName(origVarName, fallback?.suffix);
+    return createCssVar(fallbackVarName, createFallbackVar(fallback.fallback, fallbackVarName));
+  };
   Object.keys(mappings).forEach((attr) => {
     const attrConfig = normalizeConfig(attr, mappings[attr]);
@@ -287,10 +304,11 @@ const createStyle = (componentName, baseSelector, mappings) => {
     attrConfig.forEach(
       ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
+        const fallbackValue = createFallbackVar(fallback, cssVarName);
         style.add(
           createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
           isFunction(property) ? property() : property,
-          createCssVar(cssVarName, fallback) + (important ? '!important' : '')
+          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
         );
       }
     );
@@ -299,11 +317,27 @@ const createStyle = (componentName, baseSelector, mappings) => {
   return style.toString();
 };
+const getFallbackVarsNames = (attr, origVarName, { fallback }) => {
+  if (!fallback) return {};
+  const fallbackVarName = getFallbackVarName(origVarName, fallback.suffix);
+  const fallbackAttrName = camelCaseJoin(attr, fallback.suffix || 'fallback');
+  return {
+    [fallbackAttrName]: fallbackVarName,
+    ...getFallbackVarsNames(fallbackAttrName, fallbackVarName, fallback),
+  };
+};
 const createCssVarsList = (componentName, mappings) =>
-  Object.keys(mappings).reduce(
-    (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
-    {}
-  );
+  Object.keys(mappings).reduce((acc, attr) => {
+    const varName = getCssVarName(componentName, attr);
+    return Object.assign(
+      acc,
+      { [attr]: varName },
+      getFallbackVarsNames(attr, varName, mappings[attr])
+    );
+  }, {});
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times
@@ -360,7 +394,7 @@ const createStyleMixin =
         this.#baseSelector = baseSelector ?? this.baseSelector;
         this.#getRootElement = getRootElement;
-        this.#styleAttributes = Object.keys(mappings).map((key) =>
+        this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
           kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
         );
       }
@@ -1704,8 +1738,8 @@ const createIcon = async (src) => {
       ele = createImgEle(src);
     }
-    ele.style.setProperty('width', '100%');
-    ele.style.setProperty('height', '100%');
+    ele.style.setProperty('max-width', '100%');
+    ele.style.setProperty('max-height', '100%');
     return ele;
   } catch {
@@ -1715,9 +1749,9 @@ const createIcon = async (src) => {
 /* eslint-disable no-use-before-define */
-const componentName$11 = getComponentName('icon');
+const componentName$12 = getComponentName('icon');
-class RawIcon extends createBaseClass({ componentName: componentName$11, baseSelector: 'slot' }) {
+class RawIcon extends createBaseClass({ componentName: componentName$12, baseSelector: 'slot' }) {
   static get observedAttributes() {
     return ['src'];
   }
@@ -1802,7 +1836,7 @@ const clickableMixin = (superclass) =>
     }
   };
-const componentName$10 = getComponentName('button');
+const componentName$11 = getComponentName('button');
 const resetStyles = `
 	:host {
@@ -1918,7 +1952,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$10,
+    componentName: componentName$11,
   })
 );
@@ -1955,7 +1989,7 @@ loadingIndicatorStyles = `
 	}
 `;
-customElements.define(componentName$10, ButtonClass);
+customElements.define(componentName$11, ButtonClass);
 const createBaseInputClass = (...args) =>
   compose(
@@ -1965,11 +1999,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
-const componentName$$ = getComponentName('boolean-field-internal');
+const componentName$10 = getComponentName('boolean-field-internal');
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
-const BaseInputClass$a = createBaseInputClass({ componentName: componentName$$, baseSelector: 'div' });
+const BaseInputClass$a = createBaseInputClass({ componentName: componentName$10, baseSelector: 'div' });
 class BooleanInputInternal extends BaseInputClass$a {
   static get observedAttributes() {
@@ -2045,14 +2079,14 @@ const booleanFieldMixin = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$$}
+				<${componentName$10}
 					tabindex="-1"
 					slot="input"
-				></${componentName$$}>
+				></${componentName$10}>
 			`;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$$);
+      this.inputElement = this.shadowRoot.querySelector(componentName$10);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
       forwardAttrs(this, this.inputElement, {
@@ -2266,7 +2300,7 @@ descope-boolean-field-internal {
 }
 `;
-const componentName$_ = getComponentName('checkbox');
+const componentName$$ = getComponentName('checkbox');
 const {
   host: host$n,
@@ -2378,15 +2412,15 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$_,
+    componentName: componentName$$,
   })
 );
-customElements.define(componentName$$, BooleanInputInternal);
+customElements.define(componentName$10, BooleanInputInternal);
-customElements.define(componentName$_, CheckboxClass);
+customElements.define(componentName$$, CheckboxClass);
-const componentName$Z = getComponentName('switch-toggle');
+const componentName$_ = getComponentName('switch-toggle');
 const {
   host: host$m,
@@ -2518,17 +2552,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$Z,
+    componentName: componentName$_,
   })
 );
-customElements.define(componentName$Z, SwitchToggleClass);
+customElements.define(componentName$_, SwitchToggleClass);
-const componentName$Y = getComponentName('loader-linear');
+const componentName$Z = getComponentName('loader-linear');
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$Y, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$Z, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$Y;
+    return componentName$Z;
   }
   constructor() {
@@ -2589,11 +2623,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
-customElements.define(componentName$Y, LoaderLinearClass);
+customElements.define(componentName$Z, LoaderLinearClass);
-const componentName$X = getComponentName('loader-radial');
+const componentName$Y = getComponentName('loader-radial');
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$X, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$Y, baseSelector: ':host > div' }) {
   constructor() {
     super();
@@ -2637,11 +2671,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
-customElements.define(componentName$X, LoaderRadialClass);
+customElements.define(componentName$Y, LoaderRadialClass);
-const componentName$W = getComponentName('container');
+const componentName$X = getComponentName('container');
-class RawContainer extends createBaseClass({ componentName: componentName$W, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$X, baseSelector: 'slot' }) {
   constructor() {
     super();
@@ -2694,9 +2728,9 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
-customElements.define(componentName$W, ContainerClass);
+customElements.define(componentName$X, ContainerClass);
-const componentName$V = getComponentName('combo-box');
+const componentName$W = getComponentName('combo-box');
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3141,14 +3175,14 @@ 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$V,
+    componentName: componentName$W,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
-customElements.define(componentName$V, ComboBoxClass);
+customElements.define(componentName$W, ComboBoxClass);
-customElements.define(componentName$11, IconClass);
+customElements.define(componentName$12, IconClass);
 const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
@@ -3465,7 +3499,7 @@ const nextMonth = (timestamp) => {
   return date;
 };
-const componentName$U = getComponentName('calendar');
+const componentName$V = getComponentName('calendar');
 const observedAttrs$2 = [
   'initial-value',
@@ -3482,7 +3516,7 @@ const observedAttrs$2 = [
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
-const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$U, baseSelector: 'div' });
+const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$V, baseSelector: 'div' });
 class RawCalendar extends BaseInputClass$9 {
   static get observedAttributes() {
@@ -4095,7 +4129,7 @@ const CalendarClass = compose(
   componentNameValidationMixin
 )(RawCalendar);
-customElements.define(componentName$U, CalendarClass);
+customElements.define(componentName$V, CalendarClass);
 const {
   host: host$j,
@@ -4243,7 +4277,7 @@ var textFieldMappings = {
   inputIconColor: { ...inputIcon, property: 'color' },
 };
-const componentName$T = getComponentName('text-field');
+const componentName$U = getComponentName('text-field');
 const observedAttrs$1 = ['type', 'label-type', 'copy-to-clipboard'];
@@ -4365,11 +4399,11 @@ const TextFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$T,
+    componentName: componentName$U,
   })
 );
-customElements.define(componentName$T, TextFieldClass);
+customElements.define(componentName$U, TextFieldClass);
 const patterns = {
   MM: '(0?[1-9]|1[0-2])',
@@ -4502,12 +4536,12 @@ class DateCounter {
   }
 }
-const componentName$S = getComponentName('date-field');
+const componentName$T = getComponentName('date-field');
 // we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
 // be able to process this component's overlay. The whole process needs refactoring as soon as possible.
 const BASE_SELECTOR = 'vaadin-popover';
-const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$S, baseSelector: BASE_SELECTOR });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$T, baseSelector: BASE_SELECTOR });
 const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
@@ -5178,11 +5212,11 @@ const DateFieldClass = compose(
   componentNameValidationMixin
 )(RawDateFieldClass);
-customElements.define(componentName$S, DateFieldClass);
+customElements.define(componentName$T, DateFieldClass);
-const componentName$R = getComponentName('text');
+const componentName$S = getComponentName('text');
-class RawText extends createBaseClass({ componentName: componentName$R, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$S, baseSelector: ':host > slot' }) {
   constructor() {
     super();
@@ -5239,8 +5273,8 @@ const TextClass = compose(
   componentNameValidationMixin
 )(RawText);
-const componentName$Q = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$Q, baseSelector: ':host > div' }) {
+const componentName$R = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$R, baseSelector: ':host > div' }) {
   constructor() {
     super();
@@ -5339,11 +5373,11 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
-customElements.define(componentName$R, TextClass);
+customElements.define(componentName$S, TextClass);
-customElements.define(componentName$Q, DividerClass);
+customElements.define(componentName$R, DividerClass);
-const componentName$P = getComponentName('email-field');
+const componentName$Q = getComponentName('email-field');
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -5411,15 +5445,15 @@ const EmailFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$P,
+    componentName: componentName$Q,
   })
 );
-customElements.define(componentName$P, EmailFieldClass);
+customElements.define(componentName$Q, EmailFieldClass);
-const componentName$O = getComponentName('link');
+const componentName$P = getComponentName('link');
-class RawLink extends createBaseClass({ componentName: componentName$O, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$P, baseSelector: ':host a' }) {
   constructor() {
     super();
@@ -5483,7 +5517,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
-customElements.define(componentName$O, LinkClass);
+customElements.define(componentName$P, LinkClass);
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -5535,37 +5569,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
-const componentName$N = getComponentName('logo');
+const componentName$O = getComponentName('logo');
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$N,
+  componentName: componentName$O,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
-customElements.define(componentName$N, LogoClass);
+customElements.define(componentName$O, LogoClass);
-const componentName$M = getComponentName('totp-image');
+const componentName$N = getComponentName('totp-image');
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$M,
+  componentName: componentName$N,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
-customElements.define(componentName$M, TotpImageClass);
+customElements.define(componentName$N, TotpImageClass);
-const componentName$L = getComponentName('notp-image');
+const componentName$M = getComponentName('notp-image');
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$L,
+  componentName: componentName$M,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
-customElements.define(componentName$L, NotpImageClass);
+customElements.define(componentName$M, NotpImageClass);
-const componentName$K = getComponentName('number-field');
+const componentName$L = getComponentName('number-field');
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -5599,11 +5633,11 @@ const NumberFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$K,
+    componentName: componentName$L,
   })
 );
-customElements.define(componentName$K, NumberFieldClass);
+customElements.define(componentName$L, NumberFieldClass);
 const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
 const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
@@ -5649,13 +5683,13 @@ const toggleMaskVisibility = (input, value) => {
 /* eslint-disable no-param-reassign */
-const componentName$J = getComponentName('passcode-internal');
+const componentName$K = getComponentName('passcode-internal');
 const observedAttributes$5 = ['digits', 'loading'];
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$J, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
 class PasscodeInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -5873,7 +5907,7 @@ class PasscodeInternal extends BaseInputClass$7 {
   }
 }
-const componentName$I = getComponentName('passcode');
+const componentName$J = getComponentName('passcode');
 const observedAttributes$4 = ['digits'];
@@ -5892,17 +5926,17 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-      <${componentName$J}
+      <${componentName$K}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$J}>
+      ><slot></slot></${componentName$K}>
       `;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$J);
+      this.inputElement = this.shadowRoot.querySelector(componentName$K);
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -6054,13 +6088,13 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$I,
+    componentName: componentName$J,
   })
 );
-customElements.define(componentName$J, PasscodeInternal);
+customElements.define(componentName$K, PasscodeInternal);
-customElements.define(componentName$I, PasscodeClass);
+customElements.define(componentName$J, PasscodeClass);
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -6101,7 +6135,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
-const componentName$H = getComponentName('password');
+const componentName$I = getComponentName('password');
 const customMixin$9 = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -6376,11 +6410,11 @@ const PasswordClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$H,
+    componentName: componentName$I,
   })
 );
-customElements.define(componentName$H, PasswordClass);
+customElements.define(componentName$I, PasswordClass);
 const disableRules = [
   'blockquote',
@@ -6406,9 +6440,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
-const componentName$G = getComponentName('enriched-text');
+const componentName$H = getComponentName('enriched-text');
-class EnrichedText extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
   #origLinkRenderer;
   #origEmRenderer;
@@ -6604,9 +6638,9 @@ const EnrichedTextClass = compose(
   componentNameValidationMixin
 )(EnrichedText);
-customElements.define(componentName$G, EnrichedTextClass);
+customElements.define(componentName$H, EnrichedTextClass);
-const componentName$F = getComponentName('text-area');
+const componentName$G = getComponentName('text-area');
 const {
   host: host$d,
@@ -6682,17 +6716,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$F,
+    componentName: componentName$G,
   })
 );
-customElements.define(componentName$F, TextAreaClass);
+customElements.define(componentName$G, TextAreaClass);
 const observedAttributes$3 = ['src', 'alt'];
-const componentName$E = getComponentName('image');
+const componentName$F = getComponentName('image');
-const BaseClass$1 = createBaseClass({ componentName: componentName$E, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$F, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -6732,7 +6766,7 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
-customElements.define(componentName$E, ImageClass);
+customElements.define(componentName$F, ImageClass);
 var CountryCodes = [
   // United States should be the first option
@@ -8001,7 +8035,7 @@ const parsePhoneNumber = (val) => {
   return [countryCode, phoneNumber];
 };
-const componentName$D = getComponentName('phone-field-internal');
+const componentName$E = getComponentName('phone-field-internal');
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -8015,7 +8049,7 @@ const mapAttrs$1 = {
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -8232,12 +8266,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   }
 };
-customElements.define(componentName$D, PhoneFieldInternal$1);
+customElements.define(componentName$E, PhoneFieldInternal$1);
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
-const componentName$C = getComponentName('phone-field');
+const componentName$D = getComponentName('phone-field');
 const customMixin$8 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -8251,15 +8285,15 @@ const customMixin$8 = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$D}
+				<${componentName$E}
 					tabindex="-1"
 					slot="input"
-				></${componentName$D}>
+				></${componentName$E}>
       		`;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$D);
+      this.inputElement = this.shadowRoot.querySelector(componentName$E);
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -8481,17 +8515,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$C,
+    componentName: componentName$D,
   })
 );
-customElements.define(componentName$C, PhoneFieldClass);
+customElements.define(componentName$D, PhoneFieldClass);
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
-const componentName$B = getComponentName('phone-field-internal-input-box');
+const componentName$C = getComponentName('phone-field-internal-input-box');
 const observedAttributes$2 = [
   'disabled',
@@ -8508,7 +8542,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
 class PhoneFieldInternal extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -8647,11 +8681,11 @@ class PhoneFieldInternal extends BaseInputClass$5 {
   }
 }
-customElements.define(componentName$B, PhoneFieldInternal);
+customElements.define(componentName$C, PhoneFieldInternal);
 const textVars = TextFieldClass.cssVarList;
-const componentName$A = getComponentName('phone-input-box-field');
+const componentName$B = getComponentName('phone-input-box-field');
 const customMixin$7 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -8665,15 +8699,15 @@ const customMixin$7 = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$B}
+				<${componentName$C}
 					tabindex="-1"
 					slot="input"
-				></${componentName$B}>
+				></${componentName$C}>
       `;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$B);
+      this.inputElement = this.shadowRoot.querySelector(componentName$C);
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -8850,26 +8884,26 @@ const PhoneFieldInputBoxClass = compose(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
-customElements.define(componentName$A, PhoneFieldInputBoxClass);
+customElements.define(componentName$B, PhoneFieldInputBoxClass);
-const componentName$z = getComponentName('new-password-internal');
+const componentName$A = getComponentName('new-password-internal');
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 // eslint-disable-next-line max-classes-per-file
-const componentName$y = getComponentName('policy-validation');
+const componentName$z = getComponentName('policy-validation');
 const overrideAttrs = ['data-password-policy-value-minlength'];
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
   #availablePolicies;
   #activePolicies = [];
@@ -9077,7 +9111,7 @@ const PolicyValidationClass = compose(
   componentNameValidationMixin
 )(RawPolicyValidation);
-const componentName$x = getComponentName('new-password');
+const componentName$y = getComponentName('new-password');
 const policyPreviewVars = PolicyValidationClass.cssVarList;
@@ -9091,18 +9125,18 @@ const customMixin$6 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
       template.innerHTML = `
-			<${componentName$z}
+			<${componentName$A}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$z}>
+      </${componentName$A}>
 			`;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$z);
+      this.inputElement = this.shadowRoot.querySelector(componentName$A);
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -9278,11 +9312,11 @@ const NewPasswordClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$x,
+    componentName: componentName$y,
   })
 );
-customElements.define(componentName$y, PolicyValidationClass);
+customElements.define(componentName$z, PolicyValidationClass);
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -9314,7 +9348,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
 class NewPasswordInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -9524,16 +9558,16 @@ class NewPasswordInternal extends BaseInputClass$4 {
   }
 }
-customElements.define(componentName$z, NewPasswordInternal);
+customElements.define(componentName$A, NewPasswordInternal);
-customElements.define(componentName$x, NewPasswordClass);
+customElements.define(componentName$y, NewPasswordClass);
-const componentName$w = getComponentName('recaptcha');
+const componentName$x = getComponentName('recaptcha');
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 const BaseClass = createBaseClass({
-  componentName: componentName$w,
+  componentName: componentName$x,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -9720,7 +9754,7 @@ class RawRecaptcha extends BaseClass {
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
-customElements.define(componentName$w, RecaptchaClass);
+customElements.define(componentName$x, RecaptchaClass);
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -9734,7 +9768,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
-const componentName$v = getComponentName('upload-file');
+const componentName$w = getComponentName('upload-file');
 const observedAttributes = [
   'title',
@@ -9749,7 +9783,7 @@ const observedAttributes = [
   'icon',
 ];
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$v, baseSelector: ':host > div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$w, baseSelector: ':host > div' });
 class RawUploadFile extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -9964,7 +9998,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
-customElements.define(componentName$v, UploadFileClass);
+customElements.define(componentName$w, UploadFileClass);
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -10062,10 +10096,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
-const componentName$u = getComponentName('button-selection-group-internal');
+const componentName$v = getComponentName('button-selection-group-internal');
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$u
+  componentName$v
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -10297,7 +10331,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
-const componentName$t = getComponentName('button-selection-group');
+const componentName$u = getComponentName('button-selection-group');
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10306,19 +10340,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-      <${componentName$u}
+      <${componentName$v}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$u}>
+      </${componentName$v}>
       `;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$u);
+      this.inputElement = this.shadowRoot.querySelector(componentName$v);
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -10343,16 +10377,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$t,
+    componentName: componentName$u,
   })
 );
-customElements.define(componentName$u, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$v, ButtonSelectionGroupInternalClass);
-const componentName$s = getComponentName('button-selection-group-item');
+const componentName$t = getComponentName('button-selection-group-item');
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$s,
+  componentName: componentName$t,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -10459,14 +10493,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
-customElements.define(componentName$s, ButtonSelectionGroupItemClass);
+customElements.define(componentName$t, ButtonSelectionGroupItemClass);
-customElements.define(componentName$t, ButtonSelectionGroupClass);
+customElements.define(componentName$u, ButtonSelectionGroupClass);
-const componentName$r = getComponentName('button-multi-selection-group-internal');
+const componentName$s = getComponentName('button-multi-selection-group-internal');
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$r
+  componentName$s
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -10569,7 +10603,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
-const componentName$q = getComponentName('button-multi-selection-group');
+const componentName$r = getComponentName('button-multi-selection-group');
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10578,19 +10612,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-      <${componentName$r}
+      <${componentName$s}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$r}>
+      </${componentName$s}>
       `;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$r);
+      this.inputElement = this.shadowRoot.querySelector(componentName$s);
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -10615,13 +10649,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$r,
   })
 );
-customElements.define(componentName$r, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$s, ButtonMultiSelectionGroupInternalClass);
-customElements.define(componentName$q, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$r, ButtonMultiSelectionGroupClass);
 /* eslint-disable no-param-reassign */
@@ -10649,9 +10683,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
-const componentName$p = getComponentName('grid-text-column');
+const componentName$q = getComponentName('grid-text-column');
-customElements.define(componentName$p, GridTextColumnClass);
+customElements.define(componentName$q, GridTextColumnClass);
 /* eslint-disable no-param-reassign */
@@ -10686,9 +10720,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 /* eslint-disable no-param-reassign */
-const componentName$o = getComponentName('grid-custom-column');
+const componentName$p = getComponentName('grid-custom-column');
-customElements.define(componentName$o, GridCustomColumnClass);
+customElements.define(componentName$p, GridCustomColumnClass);
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -10747,9 +10781,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
-const componentName$n = getComponentName('grid-selection-column');
+const componentName$o = getComponentName('grid-selection-column');
-customElements.define(componentName$n, GridSelectionColumnClass);
+customElements.define(componentName$o, GridSelectionColumnClass);
 /* eslint-disable no-param-reassign */
@@ -10788,9 +10822,9 @@ class GridItemDetailsColumnClass extends GridSortColumn {
   }
 }
-const componentName$m = getComponentName('grid-item-details-column');
+const componentName$n = getComponentName('grid-item-details-column');
-customElements.define(componentName$m, GridItemDetailsColumnClass);
+customElements.define(componentName$n, GridItemDetailsColumnClass);
 const decode = (input) => {
   const txt = document.createElement('textarea');
@@ -10802,9 +10836,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
-const componentName$l = getComponentName('code-snippet');
+const componentName$m = getComponentName('code-snippet');
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -11034,7 +11068,7 @@ const CodeSnippetClass = compose(
   componentNameValidationMixin
 )(CodeSnippet$1);
-customElements.define(componentName$l, CodeSnippetClass);
+customElements.define(componentName$m, CodeSnippetClass);
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -11109,7 +11143,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
-const componentName$k = getComponentName('grid');
+const componentName$l = getComponentName('grid');
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -11463,13 +11497,13 @@ const GridClass = compose(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$k,
+    componentName: componentName$l,
   })
 );
-customElements.define(componentName$k, GridClass);
+customElements.define(componentName$l, GridClass);
-const componentName$j = getComponentName('multi-select-combo-box');
+const componentName$k = getComponentName('multi-select-combo-box');
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -12103,16 +12137,16 @@ const MultiSelectComboBoxClass = compose(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-    componentName: componentName$j,
+    componentName: componentName$k,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
-customElements.define(componentName$j, MultiSelectComboBoxClass);
+customElements.define(componentName$k, MultiSelectComboBoxClass);
-const componentName$i = getComponentName('badge');
+const componentName$j = getComponentName('badge');
-class RawBadge extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
   constructor() {
     super();
@@ -12163,9 +12197,9 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
-customElements.define(componentName$i, BadgeClass);
+customElements.define(componentName$j, BadgeClass);
-const componentName$h = getComponentName('modal');
+const componentName$i = getComponentName('modal');
 const customMixin$5 = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -12264,11 +12298,11 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$h,
+    componentName: componentName$i,
   })
 );
-customElements.define(componentName$h, ModalClass);
+customElements.define(componentName$i, ModalClass);
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
@@ -12279,7 +12313,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
-const componentName$g = getComponentName('notification-card');
+const componentName$h = getComponentName('notification-card');
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -12387,13 +12421,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$g,
+    componentName: componentName$h,
   })
 );
-customElements.define(componentName$g, NotificationCardClass);
+customElements.define(componentName$h, NotificationCardClass);
-const componentName$f = getComponentName('notification');
+const componentName$g = getComponentName('notification');
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -12488,14 +12522,14 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$f,
+    componentName: componentName$g,
   })
 );
-customElements.define(componentName$f, NotificationClass);
+customElements.define(componentName$g, NotificationClass);
-const componentName$e = getComponentName('avatar');
-class RawAvatar extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > .wrapper' }) {
+const componentName$f = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > .wrapper' }) {
   constructor() {
     super();
@@ -12599,11 +12633,11 @@ const AvatarClass = compose(
   componentNameValidationMixin
 )(RawAvatar);
-customElements.define(componentName$e, AvatarClass);
+customElements.define(componentName$f, AvatarClass);
-const componentName$d = getComponentName('mappings-field-internal');
+const componentName$e = getComponentName('mappings-field-internal');
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
 class MappingsFieldInternal extends BaseInputClass$2 {
   #errorItem;
@@ -12838,7 +12872,7 @@ class MappingsFieldInternal extends BaseInputClass$2 {
   }
 }
-const componentName$c = getComponentName('mappings-field');
+const componentName$d = getComponentName('mappings-field');
 const customMixin$4 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -12867,14 +12901,14 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-      <${componentName$d}
+      <${componentName$e}
         tabindex="-1"
-      ></${componentName$d}>
+      ></${componentName$e}>
       `;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$d);
+      this.inputElement = this.shadowRoot.querySelector(componentName$e);
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -13006,17 +13040,17 @@ const MappingsFieldClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$c,
+    componentName: componentName$d,
   })
 );
-customElements.define(componentName$d, MappingsFieldInternal);
+customElements.define(componentName$e, MappingsFieldInternal);
-const componentName$b = getComponentName('mapping-item');
+const componentName$c = getComponentName('mapping-item');
 const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
 class MappingItem extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -13166,17 +13200,17 @@ class MappingItem extends BaseInputClass$1 {
   }
 }
-customElements.define(componentName$b, MappingItem);
+customElements.define(componentName$c, MappingItem);
-customElements.define(componentName$c, MappingsFieldClass);
+customElements.define(componentName$d, MappingsFieldClass);
 var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
-const componentName$a = getComponentName('user-attribute');
+const componentName$b = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$a,
+  componentName: componentName$b,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -13410,13 +13444,13 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
-customElements.define(componentName$a, UserAttributeClass);
+customElements.define(componentName$b, UserAttributeClass);
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
-const componentName$9 = getComponentName('user-auth-method');
+const componentName$a = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$9,
+  componentName: componentName$a,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -13608,11 +13642,11 @@ const UserAuthMethodClass = compose(
   componentNameValidationMixin
 )(RawUserAuthMethod);
-customElements.define(componentName$9, UserAuthMethodClass);
+customElements.define(componentName$a, UserAuthMethodClass);
-const componentName$8 = getComponentName('saml-group-mappings-internal');
+const componentName$9 = getComponentName('saml-group-mappings-internal');
-const BaseInputClass = createBaseInputClass({ componentName: componentName$8, baseSelector: '' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$9, baseSelector: '' });
 class SamlGroupMappingsInternal extends BaseInputClass {
   static get observedAttributes() {
@@ -13738,7 +13772,7 @@ class SamlGroupMappingsInternal extends BaseInputClass {
   }
 }
-const componentName$7 = getComponentName('saml-group-mappings');
+const componentName$8 = getComponentName('saml-group-mappings');
 const customMixin$3 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -13748,14 +13782,14 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-      <${componentName$8}
+      <${componentName$9}
         tabindex="-1"
-      ></${componentName$8}>
+      ></${componentName$9}>
       `;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$8);
+      this.inputElement = this.shadowRoot.querySelector(componentName$9);
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -13832,15 +13866,15 @@ const SamlGroupMappingsClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$7,
+    componentName: componentName$8,
   })
 );
-customElements.define(componentName$8, SamlGroupMappingsInternal);
+customElements.define(componentName$9, SamlGroupMappingsInternal);
-customElements.define(componentName$7, SamlGroupMappingsClass);
+customElements.define(componentName$8, SamlGroupMappingsClass);
-const componentName$6 = getComponentName('radio-button');
+const componentName$7 = getComponentName('radio-button');
 const customMixin$2 = (superclass) =>
   class CustomMixin extends superclass {
@@ -13905,11 +13939,11 @@ const RadioButtonClass = compose(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$6,
+    componentName: componentName$7,
   })
 );
-const componentName$5 = getComponentName('radio-group');
+const componentName$6 = getComponentName('radio-group');
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -13924,12 +13958,12 @@ const RadioGroupMixin = (superclass) =>
       // we are overriding vaadin children getter so it will run on our custom elements
       Object.defineProperty(this.baseElement, 'children', {
-        get: () => this.querySelectorAll(componentName$6),
+        get: () => this.querySelectorAll(componentName$7),
       });
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) => {
-        return nodes.filter((node) => node.localName === componentName$6);
+        return nodes.filter((node) => node.localName === componentName$7);
       };
       // vaadin radio group missing some input properties
@@ -14079,13 +14113,13 @@ const RadioGroupClass = compose(
     `,
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
-    componentName: componentName$5,
+    componentName: componentName$6,
     includeForwardProps: ['value'],
   })
 );
-customElements.define(componentName$5, RadioGroupClass);
-customElements.define(componentName$6, RadioButtonClass);
+customElements.define(componentName$6, RadioGroupClass);
+customElements.define(componentName$7, RadioButtonClass);
 const activeableMixin = (superclass) =>
   class ActiveableMixinClass extends superclass {
@@ -14102,7 +14136,7 @@ const activeableMixin = (superclass) =>
     }
   };
-const componentName$4 = getComponentName('list-item');
+const componentName$5 = getComponentName('list-item');
 const customMixin$1 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -14151,11 +14185,11 @@ const ListItemClass = compose(
   componentNameValidationMixin,
   customMixin$1,
   activeableMixin
-)(createBaseClass({ componentName: componentName$4, baseSelector: 'slot' }));
+)(createBaseClass({ componentName: componentName$5, baseSelector: 'slot' }));
-const componentName$3 = getComponentName('list');
+const componentName$4 = getComponentName('list');
-class RawList extends createBaseClass({ componentName: componentName$3, baseSelector: '.wrapper' }) {
+class RawList extends createBaseClass({ componentName: componentName$4, baseSelector: '.wrapper' }) {
   static get observedAttributes() {
     return ['variant', 'readonly'];
   }
@@ -14302,8 +14336,8 @@ const ListClass = compose(
   componentNameValidationMixin
 )(RawList);
-customElements.define(componentName$3, ListClass);
-customElements.define(componentName$4, ListItemClass);
+customElements.define(componentName$4, ListClass);
+customElements.define(componentName$5, ListItemClass);
 const defaultValidateSchema = () => true;
 const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
@@ -14404,7 +14438,7 @@ const createDynamicDataMixin =
       }
     };
-const componentName$2 = getComponentName('apps-list');
+const componentName$3 = getComponentName('apps-list');
 const limitAbbreviation = (str, limit = 2) =>
   str
@@ -14466,7 +14500,7 @@ const AppsListClass = compose(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty'],
-    componentName: componentName$2,
+    componentName: componentName$3,
     style: () => `
       :host {
         width: 100%;
@@ -14491,9 +14525,9 @@ const AppsListClass = compose(
   })
 );
-customElements.define(componentName$2, AppsListClass);
+customElements.define(componentName$3, AppsListClass);
-const componentName$1 = getComponentName('scopes-list');
+const componentName$2 = getComponentName('scopes-list');
 const variants = ['checkbox', 'switch'];
 const itemRenderer = ({ id, desc, required = false }, _, ref) => {
@@ -14512,7 +14546,7 @@ const itemRenderer = ({ id, desc, required = false }, _, ref) => {
 `;
 };
-class RawScopesList extends createBaseClass({ componentName: componentName$1, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass({ componentName: componentName$2, baseSelector: 'div' }) {
   constructor() {
     super();
@@ -14597,7 +14631,106 @@ const ScopesListClass = compose(
   componentNameValidationMixin
 )(RawScopesList);
-customElements.define(componentName$1, ScopesListClass);
+customElements.define(componentName$2, ScopesListClass);
+var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
+const componentName$1 = getComponentName('third-party-app-logo');
+class RawThirdPartyAppLogoClass extends createBaseClass({
+  componentName: componentName$1,
+  baseSelector: '.wrapper',
+}) {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+				:host([draggable="true"]) > div {
+					pointer-events: none
+				}
+        .wrapper {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+				.third-party-app-logo {
+          flex-shrink: 0;
+					display: inline-block;
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+				}
+        .company-logo-wrapper, .third-party-app-logo-wrapper {
+          flex-shrink: 0;
+          display: inline-flex;
+        }
+        .company-logo-wrapper {
+          justify-content: flex-end;
+        }
+        .third-party-app-logo-wrapper {
+          justify-content: flex-start;
+        }
+        .arrows {
+          flex-shrink: 0;
+          display: flex;
+        }
+			</style>
+			<div class="wrapper">
+        <div class="third-party-app-logo-wrapper">
+          <div class="third-party-app-logo"></div>
+        </div>
+        <div class="arrows">
+          <descope-icon src="${arrowsImg}"></descope-icon>
+        </div>
+        <div class="company-logo-wrapper">
+            <descope-logo></descope-logo>
+        </div>
+      </div>
+			`;
+  }
+}
+const companyLogoWrapper = '>.company-logo-wrapper';
+const thirdPartyAppLogoWrapper = '>.third-party-app-logo-wrapper';
+const ThirdPartyAppLogoClass = compose(
+  createStyleMixin({
+    mappings: {
+      logoMaxHeight: [
+        { selector: companyLogoWrapper, property: 'height' },
+        { selector: thirdPartyAppLogoWrapper, property: 'height' },
+      ],
+      logoMaxWidth: [
+        { selector: companyLogoWrapper, property: 'max-width' },
+        { selector: thirdPartyAppLogoWrapper, property: 'max-width' },
+      ],
+      thirdPartyAppLogo: {
+        selector: () => '.third-party-app-logo',
+        property: 'content',
+        fallback: {},
+      },
+      companyLogoFallback: {
+        selector: LogoClass.componentName,
+        property: LogoClass.cssVarList.fallbackUrl,
+      },
+      gap: {},
+      arrowsColor: { selector: IconClass.componentName, property: IconClass.cssVarList.fill },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawThirdPartyAppLogoClass);
+customElements.define(componentName$1, ThirdPartyAppLogoClass);
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
@@ -15029,33 +15162,33 @@ const globals = {
   fonts,
   direction,
 };
-const vars$P = getThemeVars(globals);
+const vars$Q = getThemeVars(globals);
-const globalRefs$x = getThemeRefs(globals);
+const globalRefs$y = getThemeRefs(globals);
 const compVars$6 = ButtonClass.cssVarList;
 const mode = {
-  primary: globalRefs$x.colors.primary,
-  secondary: globalRefs$x.colors.secondary,
-  success: globalRefs$x.colors.success,
-  error: globalRefs$x.colors.error,
-  surface: globalRefs$x.colors.surface,
+  primary: globalRefs$y.colors.primary,
+  secondary: globalRefs$y.colors.secondary,
+  success: globalRefs$y.colors.success,
+  error: globalRefs$y.colors.error,
+  surface: globalRefs$y.colors.surface,
 };
-const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$10);
+const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$11);
 const button = {
   ...helperTheme$4,
-  [compVars$6.fontFamily]: globalRefs$x.fonts.font1.family,
+  [compVars$6.fontFamily]: globalRefs$y.fonts.font1.family,
   [compVars$6.cursor]: 'pointer',
   [compVars$6.hostHeight]: '3em',
   [compVars$6.hostWidth]: 'auto',
-  [compVars$6.hostDirection]: globalRefs$x.direction,
+  [compVars$6.hostDirection]: globalRefs$y.direction,
-  [compVars$6.borderRadius]: globalRefs$x.radius.sm,
-  [compVars$6.borderWidth]: globalRefs$x.border.xs,
+  [compVars$6.borderRadius]: globalRefs$y.radius.sm,
+  [compVars$6.borderWidth]: globalRefs$y.border.xs,
   [compVars$6.borderStyle]: 'solid',
   [compVars$6.borderColor]: 'transparent',
@@ -15101,11 +15234,11 @@ const button = {
   },
   _disabled: {
-    [helperVars$4.main]: globalRefs$x.colors.surface.light,
-    [helperVars$4.dark]: globalRefs$x.colors.surface.dark,
-    [helperVars$4.light]: globalRefs$x.colors.surface.light,
-    [helperVars$4.contrast]: globalRefs$x.colors.surface.main,
-    [compVars$6.iconColor]: globalRefs$x.colors.surface.main,
+    [helperVars$4.main]: globalRefs$y.colors.surface.light,
+    [helperVars$4.dark]: globalRefs$y.colors.surface.dark,
+    [helperVars$4.light]: globalRefs$y.colors.surface.light,
+    [helperVars$4.contrast]: globalRefs$y.colors.surface.main,
+    [compVars$6.iconColor]: globalRefs$y.colors.surface.main,
   },
   variant: {
@@ -15154,7 +15287,7 @@ const button = {
   },
 };
-const vars$O = {
+const vars$P = {
   ...compVars$6,
   ...helperVars$4,
 };
@@ -15162,29 +15295,29 @@ const vars$O = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$O
+  vars: vars$P
 });
 const componentName = getComponentName('input-wrapper');
-const globalRefs$w = getThemeRefs(globals);
+const globalRefs$x = getThemeRefs(globals);
-const [theme$1, refs, vars$N] = createHelperVars(
+const [theme$1, refs, vars$O] = createHelperVars(
   {
-    labelTextColor: globalRefs$w.colors.surface.dark,
+    labelTextColor: globalRefs$x.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
     labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
-    valueTextColor: globalRefs$w.colors.surface.contrast,
-    placeholderTextColor: globalRefs$w.colors.surface.dark,
+    valueTextColor: globalRefs$x.colors.surface.contrast,
+    placeholderTextColor: globalRefs$x.colors.surface.dark,
     requiredIndicator: "'*'",
-    helperTextColor: globalRefs$w.colors.surface.dark,
-    errorMessageTextColor: globalRefs$w.colors.error.main,
-    successMessageTextColor: globalRefs$w.colors.success.main,
+    helperTextColor: globalRefs$x.colors.surface.dark,
+    errorMessageTextColor: globalRefs$x.colors.error.main,
+    successMessageTextColor: globalRefs$x.colors.success.main,
-    borderWidth: globalRefs$w.border.xs,
-    borderRadius: globalRefs$w.radius.xs,
+    borderWidth: globalRefs$x.border.xs,
+    borderRadius: globalRefs$x.radius.xs,
     borderColor: 'transparent',
-    outlineWidth: globalRefs$w.border.sm,
+    outlineWidth: globalRefs$x.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -15198,11 +15331,11 @@ const [theme$1, refs, vars$N] = createHelperVars(
     textAlign: 'start',
-    backgroundColor: globalRefs$w.colors.surface.main,
+    backgroundColor: globalRefs$x.colors.surface.main,
-    fontFamily: globalRefs$w.fonts.font1.family,
+    fontFamily: globalRefs$x.fonts.font1.family,
-    direction: globalRefs$w.direction,
+    direction: globalRefs$x.direction,
     overlayOpacity: '0.3',
@@ -15256,28 +15389,28 @@ const [theme$1, refs, vars$N] = createHelperVars(
     },
     _focused: {
-      outlineColor: globalRefs$w.colors.surface.light,
+      outlineColor: globalRefs$x.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$w.colors.error.main,
+        outlineColor: globalRefs$x.colors.error.main,
       },
     },
     _bordered: {
-      outlineWidth: globalRefs$w.border.xs,
-      borderColor: globalRefs$w.colors.surface.light,
+      outlineWidth: globalRefs$x.border.xs,
+      borderColor: globalRefs$x.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$w.colors.error.main,
+        borderColor: globalRefs$x.colors.error.main,
       },
     },
     _disabled: {
-      labelTextColor: globalRefs$w.colors.surface.light,
-      borderColor: globalRefs$w.colors.surface.light,
-      valueTextColor: globalRefs$w.colors.surface.light,
-      placeholderTextColor: globalRefs$w.colors.surface.light,
-      helperTextColor: globalRefs$w.colors.surface.light,
-      backgroundColor: globalRefs$w.colors.surface.main,
+      labelTextColor: globalRefs$x.colors.surface.light,
+      borderColor: globalRefs$x.colors.surface.light,
+      valueTextColor: globalRefs$x.colors.surface.light,
+      placeholderTextColor: globalRefs$x.colors.surface.light,
+      helperTextColor: globalRefs$x.colors.surface.light,
+      backgroundColor: globalRefs$x.colors.surface.main,
     },
   },
   componentName
@@ -15287,13 +15420,69 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
+  vars: vars$O
+});
+const globalRefs$w = getThemeRefs(globals);
+const vars$N = TextFieldClass.cssVarList;
+const textField = {
+  [vars$N.hostWidth]: refs.width,
+  [vars$N.hostMinWidth]: refs.minWidth,
+  [vars$N.hostDirection]: refs.direction,
+  [vars$N.fontSize]: refs.fontSize,
+  [vars$N.fontFamily]: refs.fontFamily,
+  [vars$N.labelFontSize]: refs.labelFontSize,
+  [vars$N.labelFontWeight]: refs.labelFontWeight,
+  [vars$N.labelTextColor]: refs.labelTextColor,
+  [vars$N.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$N.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$N.inputValueTextColor]: refs.valueTextColor,
+  [vars$N.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$N.inputBorderWidth]: refs.borderWidth,
+  [vars$N.inputBorderStyle]: refs.borderStyle,
+  [vars$N.inputBorderColor]: refs.borderColor,
+  [vars$N.inputBorderRadius]: refs.borderRadius,
+  [vars$N.inputOutlineWidth]: refs.outlineWidth,
+  [vars$N.inputOutlineStyle]: refs.outlineStyle,
+  [vars$N.inputOutlineColor]: refs.outlineColor,
+  [vars$N.inputOutlineOffset]: refs.outlineOffset,
+  [vars$N.inputBackgroundColor]: refs.backgroundColor,
+  [vars$N.inputHeight]: refs.inputHeight,
+  [vars$N.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$N.helperTextColor]: refs.helperTextColor,
+  [vars$N.textAlign]: refs.textAlign,
+  textAlign: {
+    right: { [vars$N.inputTextAlign]: 'right' },
+    left: { [vars$N.inputTextAlign]: 'left' },
+    center: { [vars$N.inputTextAlign]: 'center' },
+  },
+  [vars$N.labelPosition]: refs.labelPosition,
+  [vars$N.labelTopPosition]: refs.labelTopPosition,
+  [vars$N.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$N.inputTransformY]: refs.inputTransformY,
+  [vars$N.inputTransition]: refs.inputTransition,
+  [vars$N.marginInlineStart]: refs.marginInlineStart,
+  [vars$N.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$N.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$N.valueInputHeight]: refs.valueInputHeight,
+  [vars$N.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$N.inputIconOffset]: globalRefs$w.spacing.md,
+  [vars$N.inputIconSize]: refs.inputIconSize,
+  [vars$N.inputIconColor]: refs.placeholderTextColor,
+};
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
   vars: vars$N
 });
 const globalRefs$v = getThemeRefs(globals);
-const vars$M = TextFieldClass.cssVarList;
+const vars$M = PasswordClass.cssVarList;
-const textField = {
+const password = {
   [vars$M.hostWidth]: refs.width,
   [vars$M.hostMinWidth]: refs.minWidth,
   [vars$M.hostDirection]: refs.direction,
@@ -15302,10 +15491,13 @@ const textField = {
   [vars$M.labelFontSize]: refs.labelFontSize,
   [vars$M.labelFontWeight]: refs.labelFontWeight,
   [vars$M.labelTextColor]: refs.labelTextColor,
-  [vars$M.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$M.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$M.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$M.inputHeight]: refs.inputHeight,
+  [vars$M.inputBackgroundColor]: refs.backgroundColor,
+  [vars$M.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$M.inputValueTextColor]: refs.valueTextColor,
-  [vars$M.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$M.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$M.inputBorderWidth]: refs.borderWidth,
   [vars$M.inputBorderStyle]: refs.borderStyle,
   [vars$M.inputBorderColor]: refs.borderColor,
@@ -15314,16 +15506,9 @@ const textField = {
   [vars$M.inputOutlineStyle]: refs.outlineStyle,
   [vars$M.inputOutlineColor]: refs.outlineColor,
   [vars$M.inputOutlineOffset]: refs.outlineOffset,
-  [vars$M.inputBackgroundColor]: refs.backgroundColor,
-  [vars$M.inputHeight]: refs.inputHeight,
-  [vars$M.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$M.helperTextColor]: refs.helperTextColor,
-  [vars$M.textAlign]: refs.textAlign,
-  textAlign: {
-    right: { [vars$M.inputTextAlign]: 'right' },
-    left: { [vars$M.inputTextAlign]: 'left' },
-    center: { [vars$M.inputTextAlign]: 'center' },
-  },
+  [vars$M.revealButtonOffset]: globalRefs$v.spacing.md,
+  [vars$M.revealButtonSize]: refs.toggleButtonSize,
+  [vars$M.revealButtonColor]: refs.placeholderTextColor,
   [vars$M.labelPosition]: refs.labelPosition,
   [vars$M.labelTopPosition]: refs.labelTopPosition,
   [vars$M.labelHorizontalPosition]: refs.labelHorizontalPosition,
@@ -15333,23 +15518,17 @@ const textField = {
   [vars$M.placeholderOpacity]: refs.placeholderOpacity,
   [vars$M.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$M.valueInputHeight]: refs.valueInputHeight,
-  [vars$M.valueInputMarginBottom]: refs.valueInputMarginBottom,
-  [vars$M.inputIconOffset]: globalRefs$v.spacing.md,
-  [vars$M.inputIconSize]: refs.inputIconSize,
-  [vars$M.inputIconColor]: refs.placeholderTextColor,
 };
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$M
 });
-const globalRefs$u = getThemeRefs(globals);
-const vars$L = PasswordClass.cssVarList;
+const vars$L = NumberFieldClass.cssVarList;
-const password = {
+const numberField = {
   [vars$L.hostWidth]: refs.width,
   [vars$L.hostMinWidth]: refs.minWidth,
   [vars$L.hostDirection]: refs.direction,
@@ -15359,12 +15538,8 @@ const password = {
   [vars$L.labelFontWeight]: refs.labelFontWeight,
   [vars$L.labelTextColor]: refs.labelTextColor,
   [vars$L.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$L.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$L.inputHeight]: refs.inputHeight,
-  [vars$L.inputBackgroundColor]: refs.backgroundColor,
-  [vars$L.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$L.inputValueTextColor]: refs.valueTextColor,
-  [vars$L.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$L.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$L.inputBorderWidth]: refs.borderWidth,
   [vars$L.inputBorderStyle]: refs.borderStyle,
   [vars$L.inputBorderColor]: refs.borderColor,
@@ -15373,9 +15548,10 @@ const password = {
   [vars$L.inputOutlineStyle]: refs.outlineStyle,
   [vars$L.inputOutlineColor]: refs.outlineColor,
   [vars$L.inputOutlineOffset]: refs.outlineOffset,
-  [vars$L.revealButtonOffset]: globalRefs$u.spacing.md,
-  [vars$L.revealButtonSize]: refs.toggleButtonSize,
-  [vars$L.revealButtonColor]: refs.placeholderTextColor,
+  [vars$L.inputBackgroundColor]: refs.backgroundColor,
+  [vars$L.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$L.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$L.inputHeight]: refs.inputHeight,
   [vars$L.labelPosition]: refs.labelPosition,
   [vars$L.labelTopPosition]: refs.labelTopPosition,
   [vars$L.labelHorizontalPosition]: refs.labelHorizontalPosition,
@@ -15385,17 +15561,18 @@ const password = {
   [vars$L.placeholderOpacity]: refs.placeholderOpacity,
   [vars$L.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$L.valueInputHeight]: refs.valueInputHeight,
+  [vars$L.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$L
 });
-const vars$K = NumberFieldClass.cssVarList;
+const vars$K = EmailFieldClass.cssVarList;
-const numberField = {
+const emailField = {
   [vars$K.hostWidth]: refs.width,
   [vars$K.hostMinWidth]: refs.minWidth,
   [vars$K.hostDirection]: refs.direction,
@@ -15406,6 +15583,7 @@ const numberField = {
   [vars$K.labelTextColor]: refs.labelTextColor,
   [vars$K.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$K.inputValueTextColor]: refs.valueTextColor,
+  [vars$K.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$K.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$K.inputBorderWidth]: refs.borderWidth,
   [vars$K.inputBorderStyle]: refs.borderStyle,
@@ -15416,7 +15594,6 @@ const numberField = {
   [vars$K.inputOutlineColor]: refs.outlineColor,
   [vars$K.inputOutlineOffset]: refs.outlineOffset,
   [vars$K.inputBackgroundColor]: refs.backgroundColor,
-  [vars$K.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$K.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$K.inputHeight]: refs.inputHeight,
   [vars$K.labelPosition]: refs.labelPosition,
@@ -15431,200 +15608,156 @@ const numberField = {
   [vars$K.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$K
 });
-const vars$J = EmailFieldClass.cssVarList;
+const vars$J = TextAreaClass.cssVarList;
-const emailField = {
+const textArea = {
   [vars$J.hostWidth]: refs.width,
   [vars$J.hostMinWidth]: refs.minWidth,
   [vars$J.hostDirection]: refs.direction,
   [vars$J.fontSize]: refs.fontSize,
   [vars$J.fontFamily]: refs.fontFamily,
-  [vars$J.labelFontSize]: refs.labelFontSize,
-  [vars$J.labelFontWeight]: refs.labelFontWeight,
   [vars$J.labelTextColor]: refs.labelTextColor,
+  [vars$J.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$J.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$J.inputBackgroundColor]: refs.backgroundColor,
   [vars$J.inputValueTextColor]: refs.valueTextColor,
-  [vars$J.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$J.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$J.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$J.inputBorderRadius]: refs.borderRadius,
   [vars$J.inputBorderWidth]: refs.borderWidth,
   [vars$J.inputBorderStyle]: refs.borderStyle,
   [vars$J.inputBorderColor]: refs.borderColor,
-  [vars$J.inputBorderRadius]: refs.borderRadius,
   [vars$J.inputOutlineWidth]: refs.outlineWidth,
   [vars$J.inputOutlineStyle]: refs.outlineStyle,
   [vars$J.inputOutlineColor]: refs.outlineColor,
   [vars$J.inputOutlineOffset]: refs.outlineOffset,
-  [vars$J.inputBackgroundColor]: refs.backgroundColor,
-  [vars$J.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$J.inputHeight]: refs.inputHeight,
-  [vars$J.labelPosition]: refs.labelPosition,
-  [vars$J.labelTopPosition]: refs.labelTopPosition,
-  [vars$J.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$J.inputTransformY]: refs.inputTransformY,
-  [vars$J.inputTransition]: refs.inputTransition,
-  [vars$J.marginInlineStart]: refs.marginInlineStart,
-  [vars$J.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$J.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$J.valueInputHeight]: refs.valueInputHeight,
-  [vars$J.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$J.inputResizeType]: 'vertical',
+  [vars$J.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$J.inputTextAlign]: 'right' },
+    left: { [vars$J.inputTextAlign]: 'left' },
+    center: { [vars$J.inputTextAlign]: 'center' },
+  },
+  _readonly: {
+    [vars$J.inputResizeType]: 'none',
+  },
 };
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$J
 });
-const vars$I = TextAreaClass.cssVarList;
+const vars$I = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
-const textArea = {
+const checkbox = {
   [vars$I.hostWidth]: refs.width,
-  [vars$I.hostMinWidth]: refs.minWidth,
   [vars$I.hostDirection]: refs.direction,
   [vars$I.fontSize]: refs.fontSize,
   [vars$I.fontFamily]: refs.fontFamily,
   [vars$I.labelTextColor]: refs.labelTextColor,
   [vars$I.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$I.labelFontWeight]: '400',
+  [vars$I.labelLineHeight]: checkboxSize,
+  [vars$I.labelSpacing]: '1em',
   [vars$I.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$I.inputBackgroundColor]: refs.backgroundColor,
-  [vars$I.inputValueTextColor]: refs.valueTextColor,
-  [vars$I.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$I.inputOutlineWidth]: refs.outlineWidth,
+  [vars$I.inputOutlineOffset]: refs.outlineOffset,
+  [vars$I.inputOutlineColor]: refs.outlineColor,
+  [vars$I.inputOutlineStyle]: refs.outlineStyle,
   [vars$I.inputBorderRadius]: refs.borderRadius,
+  [vars$I.inputBorderColor]: refs.borderColor,
   [vars$I.inputBorderWidth]: refs.borderWidth,
   [vars$I.inputBorderStyle]: refs.borderStyle,
-  [vars$I.inputBorderColor]: refs.borderColor,
-  [vars$I.inputOutlineWidth]: refs.outlineWidth,
-  [vars$I.inputOutlineStyle]: refs.outlineStyle,
-  [vars$I.inputOutlineColor]: refs.outlineColor,
-  [vars$I.inputOutlineOffset]: refs.outlineOffset,
-  [vars$I.inputResizeType]: 'vertical',
-  [vars$I.inputMinHeight]: '5em',
-  textAlign: {
-    right: { [vars$I.inputTextAlign]: 'right' },
-    left: { [vars$I.inputTextAlign]: 'left' },
-    center: { [vars$I.inputTextAlign]: 'center' },
-  },
-  _readonly: {
-    [vars$I.inputResizeType]: 'none',
-  },
+  [vars$I.inputBackgroundColor]: refs.backgroundColor,
+  [vars$I.inputSize]: checkboxSize,
+  [vars$I.inputValueTextColor]: refs.valueTextColor,
 };
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$I
 });
-const vars$H = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
-const checkbox = {
+const globalRefs$u = getThemeRefs(globals);
+const vars$H = SwitchToggleClass.cssVarList;
+const switchToggle = {
   [vars$H.hostWidth]: refs.width,
   [vars$H.hostDirection]: refs.direction,
   [vars$H.fontSize]: refs.fontSize,
   [vars$H.fontFamily]: refs.fontFamily,
-  [vars$H.labelTextColor]: refs.labelTextColor,
-  [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$H.labelFontWeight]: '400',
-  [vars$H.labelLineHeight]: checkboxSize,
-  [vars$H.labelSpacing]: '1em',
-  [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$H.inputOutlineWidth]: refs.outlineWidth,
   [vars$H.inputOutlineOffset]: refs.outlineOffset,
   [vars$H.inputOutlineColor]: refs.outlineColor,
   [vars$H.inputOutlineStyle]: refs.outlineStyle,
-  [vars$H.inputBorderRadius]: refs.borderRadius,
-  [vars$H.inputBorderColor]: refs.borderColor,
-  [vars$H.inputBorderWidth]: refs.borderWidth,
-  [vars$H.inputBorderStyle]: refs.borderStyle,
-  [vars$H.inputBackgroundColor]: refs.backgroundColor,
-  [vars$H.inputSize]: checkboxSize,
-  [vars$H.inputValueTextColor]: refs.valueTextColor,
-};
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$H
-});
+  [vars$H.trackBorderStyle]: refs.borderStyle,
+  [vars$H.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$H.trackBorderColor]: refs.borderColor,
+  [vars$H.trackBackgroundColor]: refs.backgroundColor,
+  [vars$H.trackBorderRadius]: globalRefs$u.radius.md,
+  [vars$H.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$H.trackHeight]: checkboxHeight,
+  [vars$H.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$H.knobRadius]: '50%',
+  [vars$H.knobTopOffset]: '1px',
+  [vars$H.knobLeftOffset]: knobMargin,
+  [vars$H.knobColor]: refs.labelTextColor,
+  [vars$H.knobTransitionDuration]: '0.3s',
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
-const globalRefs$t = getThemeRefs(globals);
-const vars$G = SwitchToggleClass.cssVarList;
-const switchToggle = {
-  [vars$G.hostWidth]: refs.width,
-  [vars$G.hostDirection]: refs.direction,
-  [vars$G.fontSize]: refs.fontSize,
-  [vars$G.fontFamily]: refs.fontFamily,
-  [vars$G.inputOutlineWidth]: refs.outlineWidth,
-  [vars$G.inputOutlineOffset]: refs.outlineOffset,
-  [vars$G.inputOutlineColor]: refs.outlineColor,
-  [vars$G.inputOutlineStyle]: refs.outlineStyle,
-  [vars$G.trackBorderStyle]: refs.borderStyle,
-  [vars$G.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$G.trackBorderColor]: refs.borderColor,
-  [vars$G.trackBackgroundColor]: refs.backgroundColor,
-  [vars$G.trackBorderRadius]: globalRefs$t.radius.md,
-  [vars$G.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$G.trackHeight]: checkboxHeight,
-  [vars$G.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$G.knobRadius]: '50%',
-  [vars$G.knobTopOffset]: '1px',
-  [vars$G.knobLeftOffset]: knobMargin,
-  [vars$G.knobColor]: refs.labelTextColor,
-  [vars$G.knobTransitionDuration]: '0.3s',
-  [vars$G.labelTextColor]: refs.labelTextColor,
-  [vars$G.labelFontWeight]: '400',
-  [vars$G.labelLineHeight]: '1.35em',
-  [vars$G.labelSpacing]: '1em',
-  [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$H.labelTextColor]: refs.labelTextColor,
+  [vars$H.labelFontWeight]: '400',
+  [vars$H.labelLineHeight]: '1.35em',
+  [vars$H.labelSpacing]: '1em',
+  [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
   _checked: {
-    [vars$G.trackBorderColor]: refs.borderColor,
-    [vars$G.knobLeftOffset]: `calc(100% - var(${vars$G.knobSize}) - ${knobMargin})`,
-    [vars$G.knobColor]: refs.valueTextColor,
-    [vars$G.knobTextColor]: refs.valueTextColor,
+    [vars$H.trackBorderColor]: refs.borderColor,
+    [vars$H.knobLeftOffset]: `calc(100% - var(${vars$H.knobSize}) - ${knobMargin})`,
+    [vars$H.knobColor]: refs.valueTextColor,
+    [vars$H.knobTextColor]: refs.valueTextColor,
   },
   _disabled: {
-    [vars$G.knobColor]: globalRefs$t.colors.surface.light,
-    [vars$G.trackBorderColor]: globalRefs$t.colors.surface.light,
-    [vars$G.trackBackgroundColor]: globalRefs$t.colors.surface.main,
-    [vars$G.labelTextColor]: refs.labelTextColor,
+    [vars$H.knobColor]: globalRefs$u.colors.surface.light,
+    [vars$H.trackBorderColor]: globalRefs$u.colors.surface.light,
+    [vars$H.trackBackgroundColor]: globalRefs$u.colors.surface.main,
+    [vars$H.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$G.knobColor]: globalRefs$t.colors.surface.light,
-      [vars$G.trackBackgroundColor]: globalRefs$t.colors.surface.main,
+      [vars$H.knobColor]: globalRefs$u.colors.surface.light,
+      [vars$H.trackBackgroundColor]: globalRefs$u.colors.surface.main,
     },
   },
   _invalid: {
-    [vars$G.trackBorderColor]: globalRefs$t.colors.error.main,
-    [vars$G.knobColor]: globalRefs$t.colors.error.main,
+    [vars$H.trackBorderColor]: globalRefs$u.colors.error.main,
+    [vars$H.knobColor]: globalRefs$u.colors.error.main,
   },
 };
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$G
+  vars: vars$H
 });
-const globalRefs$s = getThemeRefs(globals);
+const globalRefs$t = getThemeRefs(globals);
 const compVars$5 = ContainerClass.cssVarList;
@@ -15646,7 +15779,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$W
+  componentName$X
 );
 const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -15657,10 +15790,10 @@ const container = {
   [compVars$5.itemsGrow]: '0',
   [compVars$5.hostWidth]: '100%',
   [compVars$5.boxShadow]: 'none',
-  [compVars$5.backgroundColor]: globalRefs$s.colors.surface.main,
-  [compVars$5.color]: globalRefs$s.colors.surface.contrast,
+  [compVars$5.backgroundColor]: globalRefs$t.colors.surface.main,
+  [compVars$5.color]: globalRefs$t.colors.surface.contrast,
   [compVars$5.borderRadius]: '0px',
-  [compVars$5.hostDirection]: globalRefs$s.direction,
+  [compVars$5.hostDirection]: globalRefs$t.direction,
   verticalPadding: {
     sm: { [compVars$5.verticalPadding]: '5px' },
@@ -15706,34 +15839,34 @@ const container = {
   shadow: {
     sm: {
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.sm} ${shadowColor$3}, ${globalRefs$s.shadow.narrow.sm} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.sm} ${shadowColor$3}, ${globalRefs$t.shadow.narrow.sm} ${shadowColor$3}`,
     },
     md: {
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.md} ${shadowColor$3}, ${globalRefs$s.shadow.narrow.md} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.md} ${shadowColor$3}, ${globalRefs$t.shadow.narrow.md} ${shadowColor$3}`,
     },
     lg: {
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$s.shadow.narrow.lg} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$t.shadow.narrow.lg} ${shadowColor$3}`,
     },
     xl: {
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$s.shadow.narrow.xl} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$t.shadow.narrow.xl} ${shadowColor$3}`,
     },
     '2xl': {
       [helperVars$3.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide['2xl']} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide['2xl']} ${shadowColor$3}`,
     },
   },
   borderRadius: {
-    sm: { [compVars$5.borderRadius]: globalRefs$s.radius.sm },
-    md: { [compVars$5.borderRadius]: globalRefs$s.radius.md },
-    lg: { [compVars$5.borderRadius]: globalRefs$s.radius.lg },
-    xl: { [compVars$5.borderRadius]: globalRefs$s.radius.xl },
-    '2xl': { [compVars$5.borderRadius]: globalRefs$s.radius['2xl'] },
-    '3xl': { [compVars$5.borderRadius]: globalRefs$s.radius['3xl'] },
+    sm: { [compVars$5.borderRadius]: globalRefs$t.radius.sm },
+    md: { [compVars$5.borderRadius]: globalRefs$t.radius.md },
+    lg: { [compVars$5.borderRadius]: globalRefs$t.radius.lg },
+    xl: { [compVars$5.borderRadius]: globalRefs$t.radius.xl },
+    '2xl': { [compVars$5.borderRadius]: globalRefs$t.radius['2xl'] },
+    '3xl': { [compVars$5.borderRadius]: globalRefs$t.radius['3xl'] },
   },
 };
-const vars$F = {
+const vars$G = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -15741,168 +15874,168 @@ const vars$F = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$F
+  vars: vars$G
 });
-const vars$E = LogoClass.cssVarList;
+const vars$F = LogoClass.cssVarList;
 const logo$2 = {
-  [vars$E.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$F.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$E
+  vars: vars$F
 });
-const vars$D = TotpImageClass.cssVarList;
+const vars$E = TotpImageClass.cssVarList;
 const logo$1 = {
-  [vars$D.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$E.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$D
+  vars: vars$E
 });
-const vars$C = NotpImageClass.cssVarList;
+const vars$D = NotpImageClass.cssVarList;
 const logo = {
-  [vars$C.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$D.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$C
+  vars: vars$D
 });
-const globalRefs$r = getThemeRefs(globals);
-const vars$B = TextClass.cssVarList;
+const globalRefs$s = getThemeRefs(globals);
+const vars$C = TextClass.cssVarList;
 const text = {
-  [vars$B.hostDirection]: globalRefs$r.direction,
-  [vars$B.textLineHeight]: '1.35em',
-  [vars$B.textAlign]: 'left',
-  [vars$B.textColor]: globalRefs$r.colors.surface.dark,
+  [vars$C.hostDirection]: globalRefs$s.direction,
+  [vars$C.textLineHeight]: '1.35em',
+  [vars$C.textAlign]: 'left',
+  [vars$C.textColor]: globalRefs$s.colors.surface.dark,
   variant: {
     h1: {
-      [vars$B.fontSize]: globalRefs$r.typography.h1.size,
-      [vars$B.fontWeight]: globalRefs$r.typography.h1.weight,
-      [vars$B.fontFamily]: globalRefs$r.typography.h1.font,
+      [vars$C.fontSize]: globalRefs$s.typography.h1.size,
+      [vars$C.fontWeight]: globalRefs$s.typography.h1.weight,
+      [vars$C.fontFamily]: globalRefs$s.typography.h1.font,
     },
     h2: {
-      [vars$B.fontSize]: globalRefs$r.typography.h2.size,
-      [vars$B.fontWeight]: globalRefs$r.typography.h2.weight,
-      [vars$B.fontFamily]: globalRefs$r.typography.h2.font,
+      [vars$C.fontSize]: globalRefs$s.typography.h2.size,
+      [vars$C.fontWeight]: globalRefs$s.typography.h2.weight,
+      [vars$C.fontFamily]: globalRefs$s.typography.h2.font,
     },
     h3: {
-      [vars$B.fontSize]: globalRefs$r.typography.h3.size,
-      [vars$B.fontWeight]: globalRefs$r.typography.h3.weight,
-      [vars$B.fontFamily]: globalRefs$r.typography.h3.font,
+      [vars$C.fontSize]: globalRefs$s.typography.h3.size,
+      [vars$C.fontWeight]: globalRefs$s.typography.h3.weight,
+      [vars$C.fontFamily]: globalRefs$s.typography.h3.font,
     },
     subtitle1: {
-      [vars$B.fontSize]: globalRefs$r.typography.subtitle1.size,
-      [vars$B.fontWeight]: globalRefs$r.typography.subtitle1.weight,
-      [vars$B.fontFamily]: globalRefs$r.typography.subtitle1.font,
+      [vars$C.fontSize]: globalRefs$s.typography.subtitle1.size,
+      [vars$C.fontWeight]: globalRefs$s.typography.subtitle1.weight,
+      [vars$C.fontFamily]: globalRefs$s.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$B.fontSize]: globalRefs$r.typography.subtitle2.size,
-      [vars$B.fontWeight]: globalRefs$r.typography.subtitle2.weight,
-      [vars$B.fontFamily]: globalRefs$r.typography.subtitle2.font,
+      [vars$C.fontSize]: globalRefs$s.typography.subtitle2.size,
+      [vars$C.fontWeight]: globalRefs$s.typography.subtitle2.weight,
+      [vars$C.fontFamily]: globalRefs$s.typography.subtitle2.font,
     },
     body1: {
-      [vars$B.fontSize]: globalRefs$r.typography.body1.size,
-      [vars$B.fontWeight]: globalRefs$r.typography.body1.weight,
-      [vars$B.fontFamily]: globalRefs$r.typography.body1.font,
+      [vars$C.fontSize]: globalRefs$s.typography.body1.size,
+      [vars$C.fontWeight]: globalRefs$s.typography.body1.weight,
+      [vars$C.fontFamily]: globalRefs$s.typography.body1.font,
     },
     body2: {
-      [vars$B.fontSize]: globalRefs$r.typography.body2.size,
-      [vars$B.fontWeight]: globalRefs$r.typography.body2.weight,
-      [vars$B.fontFamily]: globalRefs$r.typography.body2.font,
+      [vars$C.fontSize]: globalRefs$s.typography.body2.size,
+      [vars$C.fontWeight]: globalRefs$s.typography.body2.weight,
+      [vars$C.fontFamily]: globalRefs$s.typography.body2.font,
     },
   },
   mode: {
     primary: {
-      [vars$B.textColor]: globalRefs$r.colors.surface.contrast,
+      [vars$C.textColor]: globalRefs$s.colors.surface.contrast,
     },
     secondary: {
-      [vars$B.textColor]: globalRefs$r.colors.surface.dark,
+      [vars$C.textColor]: globalRefs$s.colors.surface.dark,
     },
     error: {
-      [vars$B.textColor]: globalRefs$r.colors.error.main,
+      [vars$C.textColor]: globalRefs$s.colors.error.main,
     },
     success: {
-      [vars$B.textColor]: globalRefs$r.colors.success.main,
+      [vars$C.textColor]: globalRefs$s.colors.success.main,
     },
   },
   textAlign: {
-    right: { [vars$B.textAlign]: 'right' },
-    left: { [vars$B.textAlign]: 'left' },
-    center: { [vars$B.textAlign]: 'center' },
+    right: { [vars$C.textAlign]: 'right' },
+    left: { [vars$C.textAlign]: 'left' },
+    center: { [vars$C.textAlign]: 'center' },
   },
   _fullWidth: {
-    [vars$B.hostWidth]: '100%',
+    [vars$C.hostWidth]: '100%',
   },
   _italic: {
-    [vars$B.fontStyle]: 'italic',
+    [vars$C.fontStyle]: 'italic',
   },
   _uppercase: {
-    [vars$B.textTransform]: 'uppercase',
+    [vars$C.textTransform]: 'uppercase',
   },
   _lowercase: {
-    [vars$B.textTransform]: 'lowercase',
+    [vars$C.textTransform]: 'lowercase',
   },
 };
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$B
+  vars: vars$C
 });
-const globalRefs$q = getThemeRefs(globals);
-const vars$A = LinkClass.cssVarList;
+const globalRefs$r = getThemeRefs(globals);
+const vars$B = LinkClass.cssVarList;
 const link = {
-  [vars$A.hostDirection]: globalRefs$q.direction,
-  [vars$A.cursor]: 'pointer',
+  [vars$B.hostDirection]: globalRefs$r.direction,
+  [vars$B.cursor]: 'pointer',
-  [vars$A.textColor]: globalRefs$q.colors.primary.main,
+  [vars$B.textColor]: globalRefs$r.colors.primary.main,
   textAlign: {
-    right: { [vars$A.textAlign]: 'right' },
-    left: { [vars$A.textAlign]: 'left' },
-    center: { [vars$A.textAlign]: 'center' },
+    right: { [vars$B.textAlign]: 'right' },
+    left: { [vars$B.textAlign]: 'left' },
+    center: { [vars$B.textAlign]: 'center' },
   },
   _fullWidth: {
-    [vars$A.hostWidth]: '100%',
+    [vars$B.hostWidth]: '100%',
   },
   _hover: {
-    [vars$A.textDecoration]: 'underline',
+    [vars$B.textDecoration]: 'underline',
   },
   mode: {
     secondary: {
-      [vars$A.textColor]: globalRefs$q.colors.secondary.main,
+      [vars$B.textColor]: globalRefs$r.colors.secondary.main,
     },
     error: {
-      [vars$A.textColor]: globalRefs$q.colors.error.main,
+      [vars$B.textColor]: globalRefs$r.colors.error.main,
     },
     success: {
-      [vars$A.textColor]: globalRefs$q.colors.success.main,
+      [vars$B.textColor]: globalRefs$r.colors.success.main,
     },
   },
 };
@@ -15910,37 +16043,37 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$A
+  vars: vars$B
 });
-const globalRefs$p = getThemeRefs(globals);
-const vars$z = EnrichedTextClass.cssVarList;
+const globalRefs$q = getThemeRefs(globals);
+const vars$A = EnrichedTextClass.cssVarList;
 const enrichedText = {
-  [vars$z.hostDirection]: globalRefs$p.direction,
-  [vars$z.hostWidth]: useVar(vars$B.hostWidth),
+  [vars$A.hostDirection]: globalRefs$q.direction,
+  [vars$A.hostWidth]: useVar(vars$C.hostWidth),
-  [vars$z.textLineHeight]: useVar(vars$B.textLineHeight),
-  [vars$z.textColor]: useVar(vars$B.textColor),
-  [vars$z.textAlign]: useVar(vars$B.textAlign),
+  [vars$A.textLineHeight]: useVar(vars$C.textLineHeight),
+  [vars$A.textColor]: useVar(vars$C.textColor),
+  [vars$A.textAlign]: useVar(vars$C.textAlign),
-  [vars$z.fontSize]: useVar(vars$B.fontSize),
-  [vars$z.fontWeight]: useVar(vars$B.fontWeight),
-  [vars$z.fontFamily]: useVar(vars$B.fontFamily),
+  [vars$A.fontSize]: useVar(vars$C.fontSize),
+  [vars$A.fontWeight]: useVar(vars$C.fontWeight),
+  [vars$A.fontFamily]: useVar(vars$C.fontFamily),
-  [vars$z.linkColor]: useVar(vars$A.textColor),
-  [vars$z.linkTextDecoration]: 'none',
-  [vars$z.linkHoverTextDecoration]: 'underline',
+  [vars$A.linkColor]: useVar(vars$B.textColor),
+  [vars$A.linkTextDecoration]: 'none',
+  [vars$A.linkHoverTextDecoration]: 'underline',
-  [vars$z.fontWeightBold]: '900',
-  [vars$z.minWidth]: '0.25em',
-  [vars$z.minHeight]: '1.35em',
+  [vars$A.fontWeightBold]: '900',
+  [vars$A.minWidth]: '0.25em',
+  [vars$A.minHeight]: '1.35em',
-  [vars$z.hostDisplay]: 'inline-block',
+  [vars$A.hostDisplay]: 'inline-block',
   _empty: {
     _hideWhenEmpty: {
-      [vars$z.hostDisplay]: 'none',
+      [vars$A.hostDisplay]: 'none',
     },
   },
 };
@@ -15948,10 +16081,10 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$z
+  vars: vars$A
 });
-const globalRefs$o = getThemeRefs(globals);
+const globalRefs$p = getThemeRefs(globals);
 const compVars$4 = DividerClass.cssVarList;
 const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
@@ -15959,18 +16092,18 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$Q
+  componentName$R
 );
 const divider = {
   ...helperTheme$2,
-  [compVars$4.hostDirection]: globalRefs$o.direction,
+  [compVars$4.hostDirection]: globalRefs$p.direction,
   [compVars$4.alignItems]: 'center',
   [compVars$4.flexDirection]: 'row',
   [compVars$4.alignSelf]: 'stretch',
   [compVars$4.hostWidth]: '100%',
-  [compVars$4.stripeColor]: globalRefs$o.colors.surface.light,
+  [compVars$4.stripeColor]: globalRefs$p.colors.surface.light,
   [compVars$4.stripeColorOpacity]: '0.5',
   [compVars$4.stripeHorizontalThickness]: helperRefs$2.thickness,
   [compVars$4.labelTextWidth]: 'fit-content',
@@ -15990,7 +16123,7 @@ const divider = {
   },
 };
-const vars$y = {
+const vars$z = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -15998,111 +16131,111 @@ const vars$y = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$y
+  vars: vars$z
 });
-const vars$x = PasscodeClass.cssVarList;
+const vars$y = PasscodeClass.cssVarList;
 const passcode = {
-  [vars$x.hostDirection]: refs.direction,
-  [vars$x.fontFamily]: refs.fontFamily,
-  [vars$x.fontSize]: refs.fontSize,
-  [vars$x.labelTextColor]: refs.labelTextColor,
-  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$x.digitValueTextColor]: refs.valueTextColor,
-  [vars$x.digitPadding]: '0',
-  [vars$x.digitTextAlign]: 'center',
-  [vars$x.digitSpacing]: '4px',
-  [vars$x.hostWidth]: refs.width,
-  [vars$x.digitOutlineColor]: 'transparent',
-  [vars$x.digitOutlineWidth]: refs.outlineWidth,
-  [vars$x.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$x.digitSize]: refs.inputHeight,
+  [vars$y.hostDirection]: refs.direction,
+  [vars$y.fontFamily]: refs.fontFamily,
+  [vars$y.fontSize]: refs.fontSize,
+  [vars$y.labelTextColor]: refs.labelTextColor,
+  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$y.digitValueTextColor]: refs.valueTextColor,
+  [vars$y.digitPadding]: '0',
+  [vars$y.digitTextAlign]: 'center',
+  [vars$y.digitSpacing]: '4px',
+  [vars$y.hostWidth]: refs.width,
+  [vars$y.digitOutlineColor]: 'transparent',
+  [vars$y.digitOutlineWidth]: refs.outlineWidth,
+  [vars$y.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$y.digitSize]: refs.inputHeight,
   size: {
-    xs: { [vars$x.spinnerSize]: '15px' },
-    sm: { [vars$x.spinnerSize]: '20px' },
-    md: { [vars$x.spinnerSize]: '20px' },
-    lg: { [vars$x.spinnerSize]: '20px' },
+    xs: { [vars$y.spinnerSize]: '15px' },
+    sm: { [vars$y.spinnerSize]: '20px' },
+    md: { [vars$y.spinnerSize]: '20px' },
+    lg: { [vars$y.spinnerSize]: '20px' },
   },
   _hideCursor: {
-    [vars$x.digitCaretTextColor]: 'transparent',
+    [vars$y.digitCaretTextColor]: 'transparent',
   },
   _loading: {
-    [vars$x.overlayOpacity]: refs.overlayOpacity,
+    [vars$y.overlayOpacity]: refs.overlayOpacity,
   },
 };
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$x
+  vars: vars$y
 });
-const globalRefs$n = getThemeRefs(globals);
-const vars$w = LoaderLinearClass.cssVarList;
+const globalRefs$o = getThemeRefs(globals);
+const vars$x = LoaderLinearClass.cssVarList;
 const loaderLinear = {
-  [vars$w.hostDisplay]: 'inline-block',
-  [vars$w.hostWidth]: '100%',
+  [vars$x.hostDisplay]: 'inline-block',
+  [vars$x.hostWidth]: '100%',
-  [vars$w.barColor]: globalRefs$n.colors.surface.contrast,
-  [vars$w.barWidth]: '20%',
+  [vars$x.barColor]: globalRefs$o.colors.surface.contrast,
+  [vars$x.barWidth]: '20%',
-  [vars$w.barBackgroundColor]: globalRefs$n.colors.surface.light,
-  [vars$w.barBorderRadius]: '4px',
+  [vars$x.barBackgroundColor]: globalRefs$o.colors.surface.light,
+  [vars$x.barBorderRadius]: '4px',
-  [vars$w.animationDuration]: '2s',
-  [vars$w.animationTimingFunction]: 'linear',
-  [vars$w.animationIterationCount]: 'infinite',
-  [vars$w.verticalPadding]: '0.25em',
+  [vars$x.animationDuration]: '2s',
+  [vars$x.animationTimingFunction]: 'linear',
+  [vars$x.animationIterationCount]: 'infinite',
+  [vars$x.verticalPadding]: '0.25em',
   size: {
-    xs: { [vars$w.barHeight]: '2px' },
-    sm: { [vars$w.barHeight]: '4px' },
-    md: { [vars$w.barHeight]: '6px' },
-    lg: { [vars$w.barHeight]: '8px' },
+    xs: { [vars$x.barHeight]: '2px' },
+    sm: { [vars$x.barHeight]: '4px' },
+    md: { [vars$x.barHeight]: '6px' },
+    lg: { [vars$x.barHeight]: '8px' },
   },
   mode: {
     primary: {
-      [vars$w.barColor]: globalRefs$n.colors.primary.main,
+      [vars$x.barColor]: globalRefs$o.colors.primary.main,
     },
     secondary: {
-      [vars$w.barColor]: globalRefs$n.colors.secondary.main,
+      [vars$x.barColor]: globalRefs$o.colors.secondary.main,
     },
   },
   _hidden: {
-    [vars$w.hostDisplay]: 'none',
+    [vars$x.hostDisplay]: 'none',
   },
 };
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$w
+  vars: vars$x
 });
-const globalRefs$m = getThemeRefs(globals);
+const globalRefs$n = getThemeRefs(globals);
 const compVars$3 = LoaderRadialClass.cssVarList;
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   {
-    spinnerColor: globalRefs$m.colors.surface.contrast,
+    spinnerColor: globalRefs$n.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$m.colors.primary.main,
+        spinnerColor: globalRefs$n.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$m.colors.secondary.main,
+        spinnerColor: globalRefs$n.colors.secondary.main,
       },
     },
   },
-  componentName$X
+  componentName$Y
 );
 const loaderRadial = {
@@ -16131,7 +16264,7 @@ const loaderRadial = {
     [compVars$3.hostDisplay]: 'none',
   },
 };
-const vars$v = {
+const vars$w = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -16139,93 +16272,134 @@ const vars$v = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$v
+  vars: vars$w
 });
-const globalRefs$l = getThemeRefs(globals);
-const vars$u = ComboBoxClass.cssVarList;
+const globalRefs$m = getThemeRefs(globals);
+const vars$v = ComboBoxClass.cssVarList;
 const comboBox = {
-  [vars$u.hostWidth]: refs.width,
-  [vars$u.hostDirection]: refs.direction,
-  [vars$u.fontSize]: refs.fontSize,
-  [vars$u.fontFamily]: refs.fontFamily,
-  [vars$u.labelFontSize]: refs.labelFontSize,
-  [vars$u.labelFontWeight]: refs.labelFontWeight,
-  [vars$u.labelTextColor]: refs.labelTextColor,
-  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$u.inputBorderColor]: refs.borderColor,
-  [vars$u.inputBorderWidth]: refs.borderWidth,
-  [vars$u.inputBorderStyle]: refs.borderStyle,
-  [vars$u.inputBorderRadius]: refs.borderRadius,
-  [vars$u.inputOutlineColor]: refs.outlineColor,
-  [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.inputOutlineWidth]: refs.outlineWidth,
-  [vars$u.inputOutlineStyle]: refs.outlineStyle,
-  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$u.inputValueTextColor]: refs.valueTextColor,
-  [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$u.inputBackgroundColor]: refs.backgroundColor,
-  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$u.inputHeight]: refs.inputHeight,
-  [vars$u.inputDropdownButtonColor]: globalRefs$l.colors.surface.dark,
-  [vars$u.inputDropdownButtonCursor]: 'pointer',
-  [vars$u.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$u.inputDropdownButtonOffset]: globalRefs$l.spacing.xs,
-  [vars$u.overlayItemPaddingInlineStart]: globalRefs$l.spacing.xs,
-  [vars$u.overlayItemPaddingInlineEnd]: globalRefs$l.spacing.lg,
-  [vars$u.labelPosition]: refs.labelPosition,
-  [vars$u.labelTopPosition]: refs.labelTopPosition,
-  [vars$u.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$u.inputTransformY]: refs.inputTransformY,
-  [vars$u.inputTransition]: refs.inputTransition,
-  [vars$u.marginInlineStart]: refs.marginInlineStart,
-  [vars$u.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$u.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$u.valueInputHeight]: refs.valueInputHeight,
-  [vars$u.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$v.hostWidth]: refs.width,
+  [vars$v.hostDirection]: refs.direction,
+  [vars$v.fontSize]: refs.fontSize,
+  [vars$v.fontFamily]: refs.fontFamily,
+  [vars$v.labelFontSize]: refs.labelFontSize,
+  [vars$v.labelFontWeight]: refs.labelFontWeight,
+  [vars$v.labelTextColor]: refs.labelTextColor,
+  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$v.inputBorderColor]: refs.borderColor,
+  [vars$v.inputBorderWidth]: refs.borderWidth,
+  [vars$v.inputBorderStyle]: refs.borderStyle,
+  [vars$v.inputBorderRadius]: refs.borderRadius,
+  [vars$v.inputOutlineColor]: refs.outlineColor,
+  [vars$v.inputOutlineOffset]: refs.outlineOffset,
+  [vars$v.inputOutlineWidth]: refs.outlineWidth,
+  [vars$v.inputOutlineStyle]: refs.outlineStyle,
+  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$v.inputValueTextColor]: refs.valueTextColor,
+  [vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$v.inputBackgroundColor]: refs.backgroundColor,
+  [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$v.inputHeight]: refs.inputHeight,
+  [vars$v.inputDropdownButtonColor]: globalRefs$m.colors.surface.dark,
+  [vars$v.inputDropdownButtonCursor]: 'pointer',
+  [vars$v.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$v.inputDropdownButtonOffset]: globalRefs$m.spacing.xs,
+  [vars$v.overlayItemPaddingInlineStart]: globalRefs$m.spacing.xs,
+  [vars$v.overlayItemPaddingInlineEnd]: globalRefs$m.spacing.lg,
+  [vars$v.labelPosition]: refs.labelPosition,
+  [vars$v.labelTopPosition]: refs.labelTopPosition,
+  [vars$v.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$v.inputTransformY]: refs.inputTransformY,
+  [vars$v.inputTransition]: refs.inputTransition,
+  [vars$v.marginInlineStart]: refs.marginInlineStart,
+  [vars$v.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$v.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$v.valueInputHeight]: refs.valueInputHeight,
+  [vars$v.valueInputMarginBottom]: refs.valueInputMarginBottom,
   _readonly: {
-    [vars$u.inputDropdownButtonCursor]: 'default',
+    [vars$v.inputDropdownButtonCursor]: 'default',
   },
   // Overlay theme exposed via the component:
-  [vars$u.overlayFontSize]: refs.fontSize,
-  [vars$u.overlayFontFamily]: refs.fontFamily,
-  [vars$u.overlayCursor]: 'pointer',
-  [vars$u.overlayItemBoxShadow]: 'none',
-  [vars$u.overlayBackground]: refs.backgroundColor,
-  [vars$u.overlayTextColor]: refs.valueTextColor,
+  [vars$v.overlayFontSize]: refs.fontSize,
+  [vars$v.overlayFontFamily]: refs.fontFamily,
+  [vars$v.overlayCursor]: 'pointer',
+  [vars$v.overlayItemBoxShadow]: 'none',
+  [vars$v.overlayBackground]: refs.backgroundColor,
+  [vars$v.overlayTextColor]: refs.valueTextColor,
   // Overlay direct theme:
-  [vars$u.overlay.minHeight]: '400px',
-  [vars$u.overlay.margin]: '0',
+  [vars$v.overlay.minHeight]: '400px',
+  [vars$v.overlay.margin]: '0',
 };
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$u
+  vars: vars$v
 });
-const vars$t = ImageClass.cssVarList;
+const vars$u = ImageClass.cssVarList;
 const image = {};
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$t
+  vars: vars$u
 });
-const vars$s = PhoneFieldClass.cssVarList;
+const vars$t = PhoneFieldClass.cssVarList;
 const phoneField = {
-  [vars$s.hostWidth]: refs.width,
+  [vars$t.hostWidth]: refs.width,
+  [vars$t.hostDirection]: refs.direction,
+  [vars$t.fontSize]: refs.fontSize,
+  [vars$t.fontFamily]: refs.fontFamily,
+  [vars$t.labelTextColor]: refs.labelTextColor,
+  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$t.inputValueTextColor]: refs.valueTextColor,
+  [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$t.inputBorderStyle]: refs.borderStyle,
+  [vars$t.inputBorderWidth]: refs.borderWidth,
+  [vars$t.inputBorderColor]: refs.borderColor,
+  [vars$t.inputBorderRadius]: refs.borderRadius,
+  [vars$t.inputOutlineStyle]: refs.outlineStyle,
+  [vars$t.inputOutlineWidth]: refs.outlineWidth,
+  [vars$t.inputOutlineColor]: refs.outlineColor,
+  [vars$t.inputOutlineOffset]: refs.outlineOffset,
+  [vars$t.phoneInputWidth]: refs.minWidth,
+  [vars$t.countryCodeInputWidth]: '5em',
+  [vars$t.countryCodeDropdownWidth]: '20em',
+  [vars$t.marginInlineStart]: '-0.25em',
+  [vars$t.valueInputHeight]: refs.valueInputHeight,
+  [vars$t.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$t
+});
+const vars$s = PhoneFieldInputBoxClass.cssVarList;
+const phoneInputBoxField = {
+  [vars$s.hostWidth]: '16em',
+  [vars$s.hostMinWidth]: refs.minWidth,
   [vars$s.hostDirection]: refs.direction,
   [vars$s.fontSize]: refs.fontSize,
   [vars$s.fontFamily]: refs.fontFamily,
+  [vars$s.labelFontSize]: refs.labelFontSize,
+  [vars$s.labelFontWeight]: refs.labelFontWeight,
   [vars$s.labelTextColor]: refs.labelTextColor,
   [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -16239,28 +16413,32 @@ const phoneField = {
   [vars$s.inputOutlineWidth]: refs.outlineWidth,
   [vars$s.inputOutlineColor]: refs.outlineColor,
   [vars$s.inputOutlineOffset]: refs.outlineOffset,
-  [vars$s.phoneInputWidth]: refs.minWidth,
-  [vars$s.countryCodeInputWidth]: '5em',
-  [vars$s.countryCodeDropdownWidth]: '20em',
-  [vars$s.marginInlineStart]: '-0.25em',
+  [vars$s.labelPosition]: refs.labelPosition,
+  [vars$s.labelTopPosition]: refs.labelTopPosition,
+  [vars$s.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$s.inputTransformY]: refs.inputTransformY,
+  [vars$s.inputTransition]: refs.inputTransition,
+  [vars$s.marginInlineStart]: refs.marginInlineStart,
   [vars$s.valueInputHeight]: refs.valueInputHeight,
   [vars$s.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$s.inputHorizontalPadding]: '0',
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$s.hostWidth]: refs.width,
+  },
 };
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$s
 });
-const vars$r = PhoneFieldInputBoxClass.cssVarList;
+const globalRefs$l = getThemeRefs(globals);
+const vars$r = NewPasswordClass.cssVarList;
-const phoneInputBoxField = {
-  [vars$r.hostWidth]: '16em',
+const newPassword = {
+  [vars$r.hostWidth]: refs.width,
   [vars$r.hostMinWidth]: refs.minWidth,
   [vars$r.hostDirection]: refs.direction,
   [vars$r.fontSize]: refs.fontSize,
@@ -16268,174 +16446,129 @@ const phoneInputBoxField = {
   [vars$r.labelFontSize]: refs.labelFontSize,
   [vars$r.labelFontWeight]: refs.labelFontWeight,
   [vars$r.labelTextColor]: refs.labelTextColor,
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$r.spaceBetweenInputs]: '1em',
   [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$r.inputValueTextColor]: refs.valueTextColor,
-  [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$r.inputBorderStyle]: refs.borderStyle,
-  [vars$r.inputBorderWidth]: refs.borderWidth,
-  [vars$r.inputBorderColor]: refs.borderColor,
-  [vars$r.inputBorderRadius]: refs.borderRadius,
-  [vars$r.inputOutlineStyle]: refs.outlineStyle,
-  [vars$r.inputOutlineWidth]: refs.outlineWidth,
-  [vars$r.inputOutlineColor]: refs.outlineColor,
-  [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.labelPosition]: refs.labelPosition,
-  [vars$r.labelTopPosition]: refs.labelTopPosition,
-  [vars$r.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$r.inputTransformY]: refs.inputTransformY,
-  [vars$r.inputTransition]: refs.inputTransition,
-  [vars$r.marginInlineStart]: refs.marginInlineStart,
+  [vars$r.policyPreviewBackgroundColor]: 'none',
+  [vars$r.policyPreviewPadding]: globalRefs$l.spacing.lg,
   [vars$r.valueInputHeight]: refs.valueInputHeight,
-  [vars$r.valueInputMarginBottom]: refs.valueInputMarginBottom,
-  [vars$r.inputHorizontalPadding]: '0',
-  _fullWidth: {
-    [vars$r.hostWidth]: refs.width,
-  },
-};
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$r
-});
-const globalRefs$k = getThemeRefs(globals);
-const vars$q = NewPasswordClass.cssVarList;
-const newPassword = {
-  [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.labelFontSize]: refs.labelFontSize,
-  [vars$q.labelFontWeight]: refs.labelFontWeight,
-  [vars$q.labelTextColor]: refs.labelTextColor,
-  [vars$q.spaceBetweenInputs]: '1em',
-  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$q.policyPreviewBackgroundColor]: 'none',
-  [vars$q.policyPreviewPadding]: globalRefs$k.spacing.lg,
-  [vars$q.valueInputHeight]: refs.valueInputHeight,
   _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$q.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$r.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$q
+  vars: vars$r
 });
-const vars$p = UploadFileClass.cssVarList;
+const vars$q = UploadFileClass.cssVarList;
 const uploadFile = {
-  [vars$p.hostDirection]: refs.direction,
-  [vars$p.labelTextColor]: refs.labelTextColor,
-  [vars$p.fontFamily]: refs.fontFamily,
+  [vars$q.hostDirection]: refs.direction,
+  [vars$q.labelTextColor]: refs.labelTextColor,
+  [vars$q.fontFamily]: refs.fontFamily,
-  [vars$p.iconSize]: '2em',
+  [vars$q.iconSize]: '2em',
-  [vars$p.hostPadding]: '0.75em',
-  [vars$p.gap]: '0.5em',
+  [vars$q.hostPadding]: '0.75em',
+  [vars$q.gap]: '0.5em',
-  [vars$p.fontSize]: '16px',
-  [vars$p.titleFontWeight]: '500',
-  [vars$p.lineHeight]: '1em',
+  [vars$q.fontSize]: '16px',
+  [vars$q.titleFontWeight]: '500',
+  [vars$q.lineHeight]: '1em',
-  [vars$p.borderWidth]: refs.borderWidth,
-  [vars$p.borderColor]: refs.borderColor,
-  [vars$p.borderRadius]: refs.borderRadius,
-  [vars$p.borderStyle]: 'dashed',
+  [vars$q.borderWidth]: refs.borderWidth,
+  [vars$q.borderColor]: refs.borderColor,
+  [vars$q.borderRadius]: refs.borderRadius,
+  [vars$q.borderStyle]: 'dashed',
   _required: {
-    [vars$p.requiredIndicator]: refs.requiredIndicator,
+    [vars$q.requiredIndicator]: refs.requiredIndicator,
   },
   size: {
     xs: {
-      [vars$p.hostHeight]: '196px',
-      [vars$p.hostWidth]: '200px',
-      [vars$p.titleFontSize]: '0.875em',
-      [vars$p.descriptionFontSize]: '0.875em',
-      [vars$p.lineHeight]: '1.25em',
+      [vars$q.hostHeight]: '196px',
+      [vars$q.hostWidth]: '200px',
+      [vars$q.titleFontSize]: '0.875em',
+      [vars$q.descriptionFontSize]: '0.875em',
+      [vars$q.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$p.hostHeight]: '216px',
-      [vars$p.hostWidth]: '230px',
-      [vars$p.titleFontSize]: '1em',
-      [vars$p.descriptionFontSize]: '0.875em',
-      [vars$p.lineHeight]: '1.25em',
+      [vars$q.hostHeight]: '216px',
+      [vars$q.hostWidth]: '230px',
+      [vars$q.titleFontSize]: '1em',
+      [vars$q.descriptionFontSize]: '0.875em',
+      [vars$q.lineHeight]: '1.25em',
     },
     md: {
-      [vars$p.hostHeight]: '256px',
-      [vars$p.hostWidth]: '312px',
-      [vars$p.titleFontSize]: '1.125em',
-      [vars$p.descriptionFontSize]: '1em',
-      [vars$p.lineHeight]: '1.5em',
+      [vars$q.hostHeight]: '256px',
+      [vars$q.hostWidth]: '312px',
+      [vars$q.titleFontSize]: '1.125em',
+      [vars$q.descriptionFontSize]: '1em',
+      [vars$q.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$p.hostHeight]: '280px',
-      [vars$p.hostWidth]: '336px',
-      [vars$p.titleFontSize]: '1.125em',
-      [vars$p.descriptionFontSize]: '1.125em',
-      [vars$p.lineHeight]: '1.75em',
+      [vars$q.hostHeight]: '280px',
+      [vars$q.hostWidth]: '336px',
+      [vars$q.titleFontSize]: '1.125em',
+      [vars$q.descriptionFontSize]: '1.125em',
+      [vars$q.lineHeight]: '1.75em',
     },
   },
   _fullWidth: {
-    [vars$p.hostWidth]: refs.width,
+    [vars$q.hostWidth]: refs.width,
   },
 };
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$p
+  vars: vars$q
 });
-const globalRefs$j = getThemeRefs(globals);
+const globalRefs$k = getThemeRefs(globals);
-const vars$o = ButtonSelectionGroupItemClass.cssVarList;
+const vars$p = ButtonSelectionGroupItemClass.cssVarList;
 const buttonSelectionGroupItem = {
-  [vars$o.hostDirection]: 'inherit',
-  [vars$o.backgroundColor]: globalRefs$j.colors.surface.main,
-  [vars$o.labelTextColor]: globalRefs$j.colors.surface.contrast,
-  [vars$o.borderColor]: globalRefs$j.colors.surface.light,
-  [vars$o.borderStyle]: 'solid',
-  [vars$o.borderRadius]: globalRefs$j.radius.sm,
-  [vars$o.outlineColor]: 'transparent',
-  [vars$o.borderWidth]: globalRefs$j.border.xs,
+  [vars$p.hostDirection]: 'inherit',
+  [vars$p.backgroundColor]: globalRefs$k.colors.surface.main,
+  [vars$p.labelTextColor]: globalRefs$k.colors.surface.contrast,
+  [vars$p.borderColor]: globalRefs$k.colors.surface.light,
+  [vars$p.borderStyle]: 'solid',
+  [vars$p.borderRadius]: globalRefs$k.radius.sm,
+  [vars$p.outlineColor]: 'transparent',
+  [vars$p.borderWidth]: globalRefs$k.border.xs,
   _hover: {
-    [vars$o.backgroundColor]: globalRefs$j.colors.surface.highlight,
+    [vars$p.backgroundColor]: globalRefs$k.colors.surface.highlight,
   },
   _focused: {
-    [vars$o.outlineColor]: globalRefs$j.colors.surface.light,
+    [vars$p.outlineColor]: globalRefs$k.colors.surface.light,
   },
   _selected: {
-    [vars$o.borderColor]: globalRefs$j.colors.surface.contrast,
-    [vars$o.backgroundColor]: globalRefs$j.colors.surface.contrast,
-    [vars$o.labelTextColor]: globalRefs$j.colors.surface.main,
+    [vars$p.borderColor]: globalRefs$k.colors.surface.contrast,
+    [vars$p.backgroundColor]: globalRefs$k.colors.surface.contrast,
+    [vars$p.labelTextColor]: globalRefs$k.colors.surface.main,
   },
 };
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$o
+  vars: vars$p
 });
-const globalRefs$i = getThemeRefs(globals);
+const globalRefs$j = getThemeRefs(globals);
 const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostDirection]: refs.direction,
@@ -16443,96 +16576,96 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.itemsSpacing]: globalRefs$i.spacing.sm,
+  [vars.itemsSpacing]: globalRefs$j.spacing.sm,
   [vars.hostWidth]: refs.width,
 });
-const vars$n = ButtonSelectionGroupClass.cssVarList;
+const vars$o = ButtonSelectionGroupClass.cssVarList;
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$n),
+  ...createBaseButtonSelectionGroupMappings(vars$o),
 };
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$n
+  vars: vars$o
 });
-const vars$m = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$n = ButtonMultiSelectionGroupClass.cssVarList;
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$m),
+  ...createBaseButtonSelectionGroupMappings(vars$n),
 };
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$m
+  vars: vars$n
 });
-const globalRefs$h = getThemeRefs(globals);
+const globalRefs$i = getThemeRefs(globals);
 const compVars$2 = ModalClass.cssVarList;
 const modal = {
-  [compVars$2.overlayBackgroundColor]: globalRefs$h.colors.surface.main,
-  [compVars$2.overlayShadow]: globalRefs$h.shadow.wide['2xl'],
+  [compVars$2.overlayBackgroundColor]: globalRefs$i.colors.surface.main,
+  [compVars$2.overlayShadow]: globalRefs$i.shadow.wide['2xl'],
   [compVars$2.overlayWidth]: '540px',
 };
-const vars$l = {
+const vars$m = {
   ...compVars$2,
 };
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$l
+  vars: vars$m
 });
-const globalRefs$g = getThemeRefs(globals);
-const vars$k = GridClass.cssVarList;
+const globalRefs$h = getThemeRefs(globals);
+const vars$l = GridClass.cssVarList;
 const grid = {
-  [vars$k.hostWidth]: '100%',
-  [vars$k.hostHeight]: '100%',
-  [vars$k.hostMinHeight]: '400px',
-  [vars$k.fontWeight]: '400',
-  [vars$k.backgroundColor]: globalRefs$g.colors.surface.main,
-  [vars$k.fontSize]: refs.fontSize,
-  [vars$k.fontFamily]: refs.fontFamily,
-  [vars$k.sortIndicatorsColor]: globalRefs$g.colors.surface.light,
-  [vars$k.activeSortIndicator]: globalRefs$g.colors.surface.dark,
-  [vars$k.resizeHandleColor]: globalRefs$g.colors.surface.light,
-  [vars$k.borderWidth]: refs.borderWidth,
-  [vars$k.borderStyle]: refs.borderStyle,
-  [vars$k.borderRadius]: refs.borderRadius,
-  [vars$k.borderColor]: 'transparent',
-  [vars$k.headerRowTextColor]: globalRefs$g.colors.surface.dark,
-  [vars$k.separatorColor]: globalRefs$g.colors.surface.light,
-  [vars$k.valueTextColor]: globalRefs$g.colors.surface.contrast,
-  [vars$k.selectedBackgroundColor]: globalRefs$g.colors.surface.highlight,
-  [vars$k.hostDirection]: globalRefs$g.direction,
-  [vars$k.toggleDetailsPanelButtonSize]: '1em',
-  [vars$k.toggleDetailsPanelButtonOpenedColor]: globalRefs$g.colors.surface.contrast,
-  [vars$k.toggleDetailsPanelButtonClosedColor]: globalRefs$g.colors.surface.light,
-  [vars$k.toggleDetailsPanelButtonCursor]: 'pointer',
-  [vars$k.detailsPanelBackgroundColor]: globalRefs$g.colors.surface.highlight,
-  [vars$k.detailsPanelBorderTopColor]: globalRefs$g.colors.surface.light,
-  [vars$k.detailsPanelLabelsColor]: globalRefs$g.colors.surface.dark,
-  [vars$k.detailsPanelLabelsFontSize]: '0.8em',
-  [vars$k.detailsPanelItemsGap]: '2em',
-  [vars$k.detailsPanelPadding]: '12px 0',
+  [vars$l.hostWidth]: '100%',
+  [vars$l.hostHeight]: '100%',
+  [vars$l.hostMinHeight]: '400px',
+  [vars$l.fontWeight]: '400',
+  [vars$l.backgroundColor]: globalRefs$h.colors.surface.main,
+  [vars$l.fontSize]: refs.fontSize,
+  [vars$l.fontFamily]: refs.fontFamily,
+  [vars$l.sortIndicatorsColor]: globalRefs$h.colors.surface.light,
+  [vars$l.activeSortIndicator]: globalRefs$h.colors.surface.dark,
+  [vars$l.resizeHandleColor]: globalRefs$h.colors.surface.light,
+  [vars$l.borderWidth]: refs.borderWidth,
+  [vars$l.borderStyle]: refs.borderStyle,
+  [vars$l.borderRadius]: refs.borderRadius,
+  [vars$l.borderColor]: 'transparent',
+  [vars$l.headerRowTextColor]: globalRefs$h.colors.surface.dark,
+  [vars$l.separatorColor]: globalRefs$h.colors.surface.light,
+  [vars$l.valueTextColor]: globalRefs$h.colors.surface.contrast,
+  [vars$l.selectedBackgroundColor]: globalRefs$h.colors.surface.highlight,
+  [vars$l.hostDirection]: globalRefs$h.direction,
+  [vars$l.toggleDetailsPanelButtonSize]: '1em',
+  [vars$l.toggleDetailsPanelButtonOpenedColor]: globalRefs$h.colors.surface.contrast,
+  [vars$l.toggleDetailsPanelButtonClosedColor]: globalRefs$h.colors.surface.light,
+  [vars$l.toggleDetailsPanelButtonCursor]: 'pointer',
+  [vars$l.detailsPanelBackgroundColor]: globalRefs$h.colors.surface.highlight,
+  [vars$l.detailsPanelBorderTopColor]: globalRefs$h.colors.surface.light,
+  [vars$l.detailsPanelLabelsColor]: globalRefs$h.colors.surface.dark,
+  [vars$l.detailsPanelLabelsFontSize]: '0.8em',
+  [vars$l.detailsPanelItemsGap]: '2em',
+  [vars$l.detailsPanelPadding]: '12px 0',
   _bordered: {
-    [vars$k.borderColor]: refs.borderColor,
+    [vars$l.borderColor]: refs.borderColor,
   },
 };
@@ -16540,53 +16673,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$k
+  vars: vars$l
 });
-const globalRefs$f = getThemeRefs(globals);
-const vars$j = NotificationCardClass.cssVarList;
+const globalRefs$g = getThemeRefs(globals);
+const vars$k = NotificationCardClass.cssVarList;
 const shadowColor$2 = '#00000020';
 const notification = {
-  [vars$j.hostMinWidth]: '415px',
-  [vars$j.fontFamily]: globalRefs$f.fonts.font1.family,
-  [vars$j.fontSize]: globalRefs$f.typography.body1.size,
-  [vars$j.backgroundColor]: globalRefs$f.colors.surface.main,
-  [vars$j.textColor]: globalRefs$f.colors.surface.contrast,
-  [vars$j.boxShadow]: `${globalRefs$f.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$f.shadow.narrow.xl} ${shadowColor$2}`,
-  [vars$j.verticalPadding]: '0.625em',
-  [vars$j.horizontalPadding]: '1.5em',
-  [vars$j.borderRadius]: globalRefs$f.radius.xs,
+  [vars$k.hostMinWidth]: '415px',
+  [vars$k.fontFamily]: globalRefs$g.fonts.font1.family,
+  [vars$k.fontSize]: globalRefs$g.typography.body1.size,
+  [vars$k.backgroundColor]: globalRefs$g.colors.surface.main,
+  [vars$k.textColor]: globalRefs$g.colors.surface.contrast,
+  [vars$k.boxShadow]: `${globalRefs$g.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$g.shadow.narrow.xl} ${shadowColor$2}`,
+  [vars$k.verticalPadding]: '0.625em',
+  [vars$k.horizontalPadding]: '1.5em',
+  [vars$k.borderRadius]: globalRefs$g.radius.xs,
   _bordered: {
-    [vars$j.borderWidth]: globalRefs$f.border.sm,
-    [vars$j.borderStyle]: 'solid',
-    [vars$j.borderColor]: 'transparent',
+    [vars$k.borderWidth]: globalRefs$g.border.sm,
+    [vars$k.borderStyle]: 'solid',
+    [vars$k.borderColor]: 'transparent',
   },
   size: {
-    xs: { [vars$j.fontSize]: '12px' },
-    sm: { [vars$j.fontSize]: '14px' },
-    md: { [vars$j.fontSize]: '16px' },
-    lg: { [vars$j.fontSize]: '18px' },
+    xs: { [vars$k.fontSize]: '12px' },
+    sm: { [vars$k.fontSize]: '14px' },
+    md: { [vars$k.fontSize]: '16px' },
+    lg: { [vars$k.fontSize]: '18px' },
   },
   mode: {
     primary: {
-      [vars$j.backgroundColor]: globalRefs$f.colors.primary.main,
-      [vars$j.textColor]: globalRefs$f.colors.primary.contrast,
-      [vars$j.borderColor]: globalRefs$f.colors.primary.light,
+      [vars$k.backgroundColor]: globalRefs$g.colors.primary.main,
+      [vars$k.textColor]: globalRefs$g.colors.primary.contrast,
+      [vars$k.borderColor]: globalRefs$g.colors.primary.light,
     },
     success: {
-      [vars$j.backgroundColor]: globalRefs$f.colors.success.main,
-      [vars$j.textColor]: globalRefs$f.colors.success.contrast,
-      [vars$j.borderColor]: globalRefs$f.colors.success.light,
+      [vars$k.backgroundColor]: globalRefs$g.colors.success.main,
+      [vars$k.textColor]: globalRefs$g.colors.success.contrast,
+      [vars$k.borderColor]: globalRefs$g.colors.success.light,
     },
     error: {
-      [vars$j.backgroundColor]: globalRefs$f.colors.error.main,
-      [vars$j.textColor]: globalRefs$f.colors.error.contrast,
-      [vars$j.borderColor]: globalRefs$f.colors.error.light,
+      [vars$k.backgroundColor]: globalRefs$g.colors.error.main,
+      [vars$k.textColor]: globalRefs$g.colors.error.contrast,
+      [vars$k.borderColor]: globalRefs$g.colors.error.light,
     },
   },
 };
@@ -16594,148 +16727,148 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$j
+  vars: vars$k
 });
-const globalRefs$e = getThemeRefs(globals);
-const vars$i = MultiSelectComboBoxClass.cssVarList;
+const globalRefs$f = getThemeRefs(globals);
+const vars$j = MultiSelectComboBoxClass.cssVarList;
 const multiSelectComboBox = {
-  [vars$i.hostWidth]: refs.width,
-  [vars$i.hostDirection]: refs.direction,
-  [vars$i.fontSize]: refs.fontSize,
-  [vars$i.fontFamily]: refs.fontFamily,
-  [vars$i.labelFontSize]: refs.labelFontSize,
-  [vars$i.labelFontWeight]: refs.labelFontWeight,
-  [vars$i.labelTextColor]: refs.labelTextColor,
-  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$i.inputBorderColor]: refs.borderColor,
-  [vars$i.inputBorderWidth]: refs.borderWidth,
-  [vars$i.inputBorderStyle]: refs.borderStyle,
-  [vars$i.inputBorderRadius]: refs.borderRadius,
-  [vars$i.inputOutlineColor]: refs.outlineColor,
-  [vars$i.inputOutlineOffset]: refs.outlineOffset,
-  [vars$i.inputOutlineWidth]: refs.outlineWidth,
-  [vars$i.inputOutlineStyle]: refs.outlineStyle,
-  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$i.inputValueTextColor]: refs.valueTextColor,
-  [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$i.inputBackgroundColor]: refs.backgroundColor,
-  [vars$i.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$i.inputVerticalPadding]: refs.verticalPadding,
-  [vars$i.inputHeight]: refs.inputHeight,
-  [vars$i.inputDropdownButtonColor]: globalRefs$e.colors.surface.dark,
-  [vars$i.inputDropdownButtonCursor]: 'pointer',
-  [vars$i.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$i.inputDropdownButtonOffset]: globalRefs$e.spacing.xs,
-  [vars$i.overlayItemPaddingInlineStart]: globalRefs$e.spacing.xs,
-  [vars$i.overlayItemPaddingInlineEnd]: globalRefs$e.spacing.lg,
-  [vars$i.chipFontSize]: refs.chipFontSize,
-  [vars$i.chipTextColor]: globalRefs$e.colors.surface.contrast,
-  [vars$i.chipBackgroundColor]: globalRefs$e.colors.surface.light,
-  [vars$i.labelPosition]: refs.labelPosition,
-  [vars$i.labelTopPosition]: refs.labelTopPosition,
-  [vars$i.labelLeftPosition]: refs.labelLeftPosition,
-  [vars$i.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$i.inputTransformY]: refs.inputTransformY,
-  [vars$i.inputTransition]: refs.inputTransition,
-  [vars$i.marginInlineStart]: refs.marginInlineStart,
-  [vars$i.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$i.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$j.hostWidth]: refs.width,
+  [vars$j.hostDirection]: refs.direction,
+  [vars$j.fontSize]: refs.fontSize,
+  [vars$j.fontFamily]: refs.fontFamily,
+  [vars$j.labelFontSize]: refs.labelFontSize,
+  [vars$j.labelFontWeight]: refs.labelFontWeight,
+  [vars$j.labelTextColor]: refs.labelTextColor,
+  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$j.inputBorderColor]: refs.borderColor,
+  [vars$j.inputBorderWidth]: refs.borderWidth,
+  [vars$j.inputBorderStyle]: refs.borderStyle,
+  [vars$j.inputBorderRadius]: refs.borderRadius,
+  [vars$j.inputOutlineColor]: refs.outlineColor,
+  [vars$j.inputOutlineOffset]: refs.outlineOffset,
+  [vars$j.inputOutlineWidth]: refs.outlineWidth,
+  [vars$j.inputOutlineStyle]: refs.outlineStyle,
+  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$j.inputValueTextColor]: refs.valueTextColor,
+  [vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$j.inputBackgroundColor]: refs.backgroundColor,
+  [vars$j.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$j.inputVerticalPadding]: refs.verticalPadding,
+  [vars$j.inputHeight]: refs.inputHeight,
+  [vars$j.inputDropdownButtonColor]: globalRefs$f.colors.surface.dark,
+  [vars$j.inputDropdownButtonCursor]: 'pointer',
+  [vars$j.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$j.inputDropdownButtonOffset]: globalRefs$f.spacing.xs,
+  [vars$j.overlayItemPaddingInlineStart]: globalRefs$f.spacing.xs,
+  [vars$j.overlayItemPaddingInlineEnd]: globalRefs$f.spacing.lg,
+  [vars$j.chipFontSize]: refs.chipFontSize,
+  [vars$j.chipTextColor]: globalRefs$f.colors.surface.contrast,
+  [vars$j.chipBackgroundColor]: globalRefs$f.colors.surface.light,
+  [vars$j.labelPosition]: refs.labelPosition,
+  [vars$j.labelTopPosition]: refs.labelTopPosition,
+  [vars$j.labelLeftPosition]: refs.labelLeftPosition,
+  [vars$j.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$j.inputTransformY]: refs.inputTransformY,
+  [vars$j.inputTransition]: refs.inputTransition,
+  [vars$j.marginInlineStart]: refs.marginInlineStart,
+  [vars$j.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$j.inputVerticalAlignment]: refs.inputVerticalAlignment,
   labelType: {
     floating: {
-      [vars$i.inputHorizontalPadding]: '0.25em',
+      [vars$j.inputHorizontalPadding]: '0.25em',
       _hasValue: {
-        [vars$i.inputHorizontalPadding]: '0.45em',
+        [vars$j.inputHorizontalPadding]: '0.45em',
       },
     },
   },
   _readonly: {
-    [vars$i.inputDropdownButtonCursor]: 'default',
+    [vars$j.inputDropdownButtonCursor]: 'default',
   },
   // Overlay theme exposed via the component:
-  [vars$i.overlayFontSize]: refs.fontSize,
-  [vars$i.overlayFontFamily]: refs.fontFamily,
-  [vars$i.overlayCursor]: 'pointer',
-  [vars$i.overlayItemBoxShadow]: 'none',
-  [vars$i.overlayBackground]: refs.backgroundColor,
-  [vars$i.overlayTextColor]: refs.valueTextColor,
+  [vars$j.overlayFontSize]: refs.fontSize,
+  [vars$j.overlayFontFamily]: refs.fontFamily,
+  [vars$j.overlayCursor]: 'pointer',
+  [vars$j.overlayItemBoxShadow]: 'none',
+  [vars$j.overlayBackground]: refs.backgroundColor,
+  [vars$j.overlayTextColor]: refs.valueTextColor,
   // Overlay direct theme:
-  [vars$i.overlay.minHeight]: '400px',
-  [vars$i.overlay.margin]: '0',
+  [vars$j.overlay.minHeight]: '400px',
+  [vars$j.overlay.margin]: '0',
 };
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$i
+  vars: vars$j
 });
-const globalRefs$d = getThemeRefs(globals);
-const vars$h = BadgeClass.cssVarList;
+const globalRefs$e = getThemeRefs(globals);
+const vars$i = BadgeClass.cssVarList;
 const badge = {
-  [vars$h.hostWidth]: 'fit-content',
-  [vars$h.hostDirection]: globalRefs$d.direction,
+  [vars$i.hostWidth]: 'fit-content',
+  [vars$i.hostDirection]: globalRefs$e.direction,
-  [vars$h.textAlign]: 'center',
+  [vars$i.textAlign]: 'center',
-  [vars$h.fontFamily]: globalRefs$d.fonts.font1.family,
-  [vars$h.fontWeight]: '400',
+  [vars$i.fontFamily]: globalRefs$e.fonts.font1.family,
+  [vars$i.fontWeight]: '400',
-  [vars$h.verticalPadding]: '0.25em',
-  [vars$h.horizontalPadding]: '0.5em',
+  [vars$i.verticalPadding]: '0.25em',
+  [vars$i.horizontalPadding]: '0.5em',
-  [vars$h.borderWidth]: globalRefs$d.border.xs,
-  [vars$h.borderRadius]: globalRefs$d.radius.xs,
-  [vars$h.borderColor]: 'transparent',
-  [vars$h.borderStyle]: 'solid',
+  [vars$i.borderWidth]: globalRefs$e.border.xs,
+  [vars$i.borderRadius]: globalRefs$e.radius.xs,
+  [vars$i.borderColor]: 'transparent',
+  [vars$i.borderStyle]: 'solid',
   _fullWidth: {
-    [vars$h.hostWidth]: '100%',
+    [vars$i.hostWidth]: '100%',
   },
   size: {
-    xs: { [vars$h.fontSize]: '12px' },
-    sm: { [vars$h.fontSize]: '14px' },
-    md: { [vars$h.fontSize]: '16px' },
-    lg: { [vars$h.fontSize]: '18px' },
+    xs: { [vars$i.fontSize]: '12px' },
+    sm: { [vars$i.fontSize]: '14px' },
+    md: { [vars$i.fontSize]: '16px' },
+    lg: { [vars$i.fontSize]: '18px' },
   },
   mode: {
     default: {
-      [vars$h.textColor]: globalRefs$d.colors.surface.dark,
+      [vars$i.textColor]: globalRefs$e.colors.surface.dark,
       _bordered: {
-        [vars$h.borderColor]: globalRefs$d.colors.surface.light,
+        [vars$i.borderColor]: globalRefs$e.colors.surface.light,
       },
     },
     primary: {
-      [vars$h.textColor]: globalRefs$d.colors.primary.main,
+      [vars$i.textColor]: globalRefs$e.colors.primary.main,
       _bordered: {
-        [vars$h.borderColor]: globalRefs$d.colors.primary.light,
+        [vars$i.borderColor]: globalRefs$e.colors.primary.light,
       },
     },
     secondary: {
-      [vars$h.textColor]: globalRefs$d.colors.secondary.main,
+      [vars$i.textColor]: globalRefs$e.colors.secondary.main,
       _bordered: {
-        [vars$h.borderColor]: globalRefs$d.colors.secondary.light,
+        [vars$i.borderColor]: globalRefs$e.colors.secondary.light,
       },
     },
     error: {
-      [vars$h.textColor]: globalRefs$d.colors.error.main,
+      [vars$i.textColor]: globalRefs$e.colors.error.main,
       _bordered: {
-        [vars$h.borderColor]: globalRefs$d.colors.error.light,
+        [vars$i.borderColor]: globalRefs$e.colors.error.light,
       },
     },
     success: {
-      [vars$h.textColor]: globalRefs$d.colors.success.main,
+      [vars$i.textColor]: globalRefs$e.colors.success.main,
       _bordered: {
-        [vars$h.borderColor]: globalRefs$d.colors.success.light,
+        [vars$i.borderColor]: globalRefs$e.colors.success.light,
       },
     },
   },
@@ -16744,19 +16877,19 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$h
+  vars: vars$i
 });
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 const compVars$1 = AvatarClass.cssVarList;
 const avatar = {
-  [compVars$1.hostDirection]: globalRefs$c.direction,
-  [compVars$1.editableIconColor]: globalRefs$c.colors.surface.dark,
-  [compVars$1.editableBorderColor]: globalRefs$c.colors.surface.dark,
-  [compVars$1.editableBackgroundColor]: globalRefs$c.colors.surface.main,
-  [compVars$1.avatarTextColor]: globalRefs$c.colors.surface.main,
-  [compVars$1.avatarBackgroundColor]: globalRefs$c.colors.surface.dark,
+  [compVars$1.hostDirection]: globalRefs$d.direction,
+  [compVars$1.editableIconColor]: globalRefs$d.colors.surface.dark,
+  [compVars$1.editableBorderColor]: globalRefs$d.colors.surface.dark,
+  [compVars$1.editableBackgroundColor]: globalRefs$d.colors.surface.main,
+  [compVars$1.avatarTextColor]: globalRefs$d.colors.surface.main,
+  [compVars$1.avatarBackgroundColor]: globalRefs$d.colors.surface.dark,
   _editable: {
     [compVars$1.cursor]: 'pointer',
@@ -16782,143 +16915,143 @@ const avatar = {
   },
 };
-const vars$g = {
+const vars$h = {
   ...compVars$1,
 };
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$g
+  vars: vars$h
 });
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
-const vars$f = MappingsFieldClass.cssVarList;
+const vars$g = MappingsFieldClass.cssVarList;
 const mappingsField = {
-  [vars$f.hostWidth]: refs.width,
-  [vars$f.hostDirection]: refs.direction,
-  [vars$f.fontSize]: refs.fontSize,
-  [vars$f.fontFamily]: refs.fontFamily,
-  [vars$f.separatorFontSize]: '14px',
-  [vars$f.labelsFontSize]: '14px',
-  [vars$f.labelsLineHeight]: '1',
-  [vars$f.labelsMarginBottom]: '6px',
-  [vars$f.labelTextColor]: refs.labelTextColor,
-  [vars$f.itemMarginBottom]: '1em',
+  [vars$g.hostWidth]: refs.width,
+  [vars$g.hostDirection]: refs.direction,
+  [vars$g.fontSize]: refs.fontSize,
+  [vars$g.fontFamily]: refs.fontFamily,
+  [vars$g.separatorFontSize]: '14px',
+  [vars$g.labelsFontSize]: '14px',
+  [vars$g.labelsLineHeight]: '1',
+  [vars$g.labelsMarginBottom]: '6px',
+  [vars$g.labelTextColor]: refs.labelTextColor,
+  [vars$g.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$f.valueLabelMinWidth]: refs.minWidth,
+  [vars$g.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$f.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$b.border.xs})`,
-  [vars$f.separatorWidth]: '70px',
-  [vars$f.removeButtonWidth]: '60px',
+  [vars$g.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$c.border.xs})`,
+  [vars$g.separatorWidth]: '70px',
+  [vars$g.removeButtonWidth]: '60px',
 };
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
-  vars: vars$f
+  vars: vars$g
 });
-const globalRefs$a = getThemeRefs(globals);
-const vars$e = UserAttributeClass.cssVarList;
+const globalRefs$b = getThemeRefs(globals);
+const vars$f = UserAttributeClass.cssVarList;
 const userAttribute = {
-  [vars$e.hostDirection]: globalRefs$a.direction,
-  [vars$e.labelTextWidth]: '150px',
-  [vars$e.valueTextWidth]: '200px',
-  [vars$e.badgeMaxWidth]: '85px',
-  [vars$e.itemsGap]: '16px',
-  [vars$e.hostMinWidth]: '530px',
+  [vars$f.hostDirection]: globalRefs$b.direction,
+  [vars$f.labelTextWidth]: '150px',
+  [vars$f.valueTextWidth]: '200px',
+  [vars$f.badgeMaxWidth]: '85px',
+  [vars$f.itemsGap]: '16px',
+  [vars$f.hostMinWidth]: '530px',
   _fullWidth: {
-    [vars$e.hostWidth]: '100%',
+    [vars$f.hostWidth]: '100%',
   },
 };
 var userAttribute$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAttribute,
-  vars: vars$e
+  vars: vars$f
 });
-const globalRefs$9 = getThemeRefs(globals);
-const vars$d = UserAuthMethodClass.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const vars$e = UserAuthMethodClass.cssVarList;
 const userAuthMethod = {
-  [vars$d.hostDirection]: globalRefs$9.direction,
-  [vars$d.labelTextWidth]: '200px',
-  [vars$d.itemsGap]: '16px',
-  [vars$d.hostMinWidth]: '530px',
-  [vars$d.iconSize]: '24px',
+  [vars$e.hostDirection]: globalRefs$a.direction,
+  [vars$e.labelTextWidth]: '200px',
+  [vars$e.itemsGap]: '16px',
+  [vars$e.hostMinWidth]: '530px',
+  [vars$e.iconSize]: '24px',
   _fullWidth: {
-    [vars$d.hostWidth]: '100%',
+    [vars$e.hostWidth]: '100%',
   },
 };
 var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAuthMethod,
-  vars: vars$d
+  vars: vars$e
 });
-const vars$c = SamlGroupMappingsClass.cssVarList;
+const vars$d = SamlGroupMappingsClass.cssVarList;
 const samlGroupMappings = {
-  [vars$c.hostWidth]: refs.width,
-  [vars$c.hostDirection]: refs.direction,
-  [vars$c.groupNameInputMarginBottom]: '1em',
+  [vars$d.hostWidth]: refs.width,
+  [vars$d.hostDirection]: refs.direction,
+  [vars$d.groupNameInputMarginBottom]: '1em',
 };
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: samlGroupMappings,
   samlGroupMappings: samlGroupMappings,
-  vars: vars$c
+  vars: vars$d
 });
-const globalRefs$8 = getThemeRefs(globals);
-const vars$b = PolicyValidationClass.cssVarList;
+const globalRefs$9 = getThemeRefs(globals);
+const vars$c = PolicyValidationClass.cssVarList;
 const policyValidation = {
-  [vars$b.fontFamily]: refs.fontFamily,
-  [vars$b.fontSize]: refs.labelFontSize,
-  [vars$b.textColor]: refs.labelTextColor,
-  [vars$b.borderWidth]: refs.borderWidth,
-  [vars$b.borderStyle]: refs.borderStyle,
-  [vars$b.borderColor]: refs.borderColor,
-  [vars$b.borderRadius]: globalRefs$8.radius.sm,
-  [vars$b.backgroundColor]: 'none',
-  [vars$b.padding]: '0px',
-  [vars$b.labelMargin]: globalRefs$8.spacing.sm,
-  [vars$b.itemsSpacing]: globalRefs$8.spacing.lg,
-  [vars$b.itemSymbolDefault]: "'\\2022'", // "•"
-  [vars$b.itemSymbolSuccess]: "'\\2713'", // "✓"
-  [vars$b.itemSymbolError]: "'\\2A09'", // "⨉"
-  [vars$b.itemSymbolSuccessColor]: globalRefs$8.colors.success.main,
-  [vars$b.itemSymbolErrorColor]: globalRefs$8.colors.error.main,
+  [vars$c.fontFamily]: refs.fontFamily,
+  [vars$c.fontSize]: refs.labelFontSize,
+  [vars$c.textColor]: refs.labelTextColor,
+  [vars$c.borderWidth]: refs.borderWidth,
+  [vars$c.borderStyle]: refs.borderStyle,
+  [vars$c.borderColor]: refs.borderColor,
+  [vars$c.borderRadius]: globalRefs$9.radius.sm,
+  [vars$c.backgroundColor]: 'none',
+  [vars$c.padding]: '0px',
+  [vars$c.labelMargin]: globalRefs$9.spacing.sm,
+  [vars$c.itemsSpacing]: globalRefs$9.spacing.lg,
+  [vars$c.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars$c.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars$c.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars$c.itemSymbolSuccessColor]: globalRefs$9.colors.success.main,
+  [vars$c.itemSymbolErrorColor]: globalRefs$9.colors.error.main,
 };
 var policyValidation$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: policyValidation,
-  vars: vars$b
+  vars: vars$c
 });
-const vars$a = IconClass.cssVarList;
+const vars$b = IconClass.cssVarList;
 const icon = {};
 var icon$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon,
-  vars: vars$a
+  vars: vars$b
 });
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
-const vars$9 = CodeSnippetClass.cssVarList;
+const vars$a = CodeSnippetClass.cssVarList;
 const light = {
   color1: '#fa0',
@@ -16953,50 +17086,50 @@ const dark = {
 };
 const CodeSnippet = {
-  [vars$9.rootBgColor]: globalRefs$7.colors.surface.main,
-  [vars$9.rootTextColor]: globalRefs$7.colors.surface.contrast,
-  [vars$9.docTagTextColor]: light.color2,
-  [vars$9.keywordTextColor]: light.color2,
-  [vars$9.metaKeywordTextColor]: light.color2,
-  [vars$9.templateTagTextColor]: light.color2,
-  [vars$9.templateVariableTextColor]: light.color2,
-  [vars$9.typeTextColor]: light.color2,
-  [vars$9.variableLanguageTextColor]: light.color2,
-  [vars$9.titleTextColor]: light.color3,
-  [vars$9.titleClassTextColor]: light.color3,
-  [vars$9.titleClassInheritedTextColor]: light.color3,
-  [vars$9.titleFunctionTextColor]: light.color3,
-  [vars$9.attrTextColor]: light.color4,
-  [vars$9.attributeTextColor]: light.color4,
-  [vars$9.literalTextColor]: light.color4,
-  [vars$9.metaTextColor]: light.color4,
-  [vars$9.numberTextColor]: light.color4,
-  [vars$9.operatorTextColor]: light.color4,
-  [vars$9.variableTextColor]: light.color4,
-  [vars$9.selectorAttrTextColor]: light.color4,
-  [vars$9.selectorClassTextColor]: light.color4,
-  [vars$9.selectorIdTextColor]: light.color4,
-  [vars$9.regexpTextColor]: light.color13,
-  [vars$9.stringTextColor]: light.color13,
-  [vars$9.metaStringTextColor]: light.color13,
-  [vars$9.builtInTextColor]: light.color5,
-  [vars$9.symbolTextColor]: light.color5,
-  [vars$9.commentTextColor]: light.color6,
-  [vars$9.codeTextColor]: light.color6,
-  [vars$9.formulaTextColor]: light.color6,
-  [vars$9.nameTextColor]: light.color7,
-  [vars$9.quoteTextColor]: light.color7,
-  [vars$9.selectorTagTextColor]: light.color7,
-  [vars$9.selectorPseudoTextColor]: light.color7,
-  [vars$9.substTextColor]: light.color8,
-  [vars$9.sectionTextColor]: light.color4,
-  [vars$9.bulletTextColor]: light.color9,
-  [vars$9.emphasisTextColor]: light.color8,
-  [vars$9.strongTextColor]: light.color8,
-  [vars$9.additionTextColor]: light.color7,
-  [vars$9.additionBgColor]: light.color10,
-  [vars$9.deletionTextColor]: light.color2,
-  [vars$9.deletionBgColor]: light.color10,
+  [vars$a.rootBgColor]: globalRefs$8.colors.surface.main,
+  [vars$a.rootTextColor]: globalRefs$8.colors.surface.contrast,
+  [vars$a.docTagTextColor]: light.color2,
+  [vars$a.keywordTextColor]: light.color2,
+  [vars$a.metaKeywordTextColor]: light.color2,
+  [vars$a.templateTagTextColor]: light.color2,
+  [vars$a.templateVariableTextColor]: light.color2,
+  [vars$a.typeTextColor]: light.color2,
+  [vars$a.variableLanguageTextColor]: light.color2,
+  [vars$a.titleTextColor]: light.color3,
+  [vars$a.titleClassTextColor]: light.color3,
+  [vars$a.titleClassInheritedTextColor]: light.color3,
+  [vars$a.titleFunctionTextColor]: light.color3,
+  [vars$a.attrTextColor]: light.color4,
+  [vars$a.attributeTextColor]: light.color4,
+  [vars$a.literalTextColor]: light.color4,
+  [vars$a.metaTextColor]: light.color4,
+  [vars$a.numberTextColor]: light.color4,
+  [vars$a.operatorTextColor]: light.color4,
+  [vars$a.variableTextColor]: light.color4,
+  [vars$a.selectorAttrTextColor]: light.color4,
+  [vars$a.selectorClassTextColor]: light.color4,
+  [vars$a.selectorIdTextColor]: light.color4,
+  [vars$a.regexpTextColor]: light.color13,
+  [vars$a.stringTextColor]: light.color13,
+  [vars$a.metaStringTextColor]: light.color13,
+  [vars$a.builtInTextColor]: light.color5,
+  [vars$a.symbolTextColor]: light.color5,
+  [vars$a.commentTextColor]: light.color6,
+  [vars$a.codeTextColor]: light.color6,
+  [vars$a.formulaTextColor]: light.color6,
+  [vars$a.nameTextColor]: light.color7,
+  [vars$a.quoteTextColor]: light.color7,
+  [vars$a.selectorTagTextColor]: light.color7,
+  [vars$a.selectorPseudoTextColor]: light.color7,
+  [vars$a.substTextColor]: light.color8,
+  [vars$a.sectionTextColor]: light.color4,
+  [vars$a.bulletTextColor]: light.color9,
+  [vars$a.emphasisTextColor]: light.color8,
+  [vars$a.strongTextColor]: light.color8,
+  [vars$a.additionTextColor]: light.color7,
+  [vars$a.additionBgColor]: light.color10,
+  [vars$a.deletionTextColor]: light.color2,
+  [vars$a.deletionBgColor]: light.color10,
   /* purposely ignored */
   // [vars.charEscapeTextColor]: '',
   // [vars.linkTextColor]: '',
@@ -17008,50 +17141,50 @@ const CodeSnippet = {
 const codeSnippetDarkThemeOverrides = {
   codeSnippet: {
-    [vars$9.rootBgColor]: globalRefs$7.colors.surface.main,
-    [vars$9.rootTextColor]: globalRefs$7.colors.surface.contrast,
-    [vars$9.docTagTextColor]: dark.color2,
-    [vars$9.keywordTextColor]: dark.color2,
-    [vars$9.metaKeywordTextColor]: dark.color2,
-    [vars$9.templateTagTextColor]: dark.color2,
-    [vars$9.templateVariableTextColor]: dark.color2,
-    [vars$9.typeTextColor]: dark.color2,
-    [vars$9.variableLanguageTextColor]: dark.color2,
-    [vars$9.titleTextColor]: dark.color3,
-    [vars$9.titleClassTextColor]: dark.color3,
-    [vars$9.titleClassInheritedTextColor]: dark.color3,
-    [vars$9.titleFunctionTextColor]: dark.color3,
-    [vars$9.attrTextColor]: dark.color4,
-    [vars$9.attributeTextColor]: dark.color4,
-    [vars$9.literalTextColor]: dark.color4,
-    [vars$9.metaTextColor]: dark.color4,
-    [vars$9.numberTextColor]: dark.color4,
-    [vars$9.operatorTextColor]: dark.color4,
-    [vars$9.variableTextColor]: dark.color4,
-    [vars$9.selectorAttrTextColor]: dark.color4,
-    [vars$9.selectorClassTextColor]: dark.color4,
-    [vars$9.selectorIdTextColor]: dark.color4,
-    [vars$9.regexpTextColor]: dark.color13,
-    [vars$9.stringTextColor]: dark.color13,
-    [vars$9.metaStringTextColor]: dark.color13,
-    [vars$9.builtInTextColor]: dark.color5,
-    [vars$9.symbolTextColor]: dark.color5,
-    [vars$9.commentTextColor]: dark.color6,
-    [vars$9.codeTextColor]: dark.color6,
-    [vars$9.formulaTextColor]: dark.color6,
-    [vars$9.nameTextColor]: dark.color7,
-    [vars$9.quoteTextColor]: dark.color7,
-    [vars$9.selectorTagTextColor]: dark.color7,
-    [vars$9.selectorPseudoTextColor]: dark.color7,
-    [vars$9.substTextColor]: dark.color8,
-    [vars$9.sectionTextColor]: dark.color4,
-    [vars$9.bulletTextColor]: dark.color9,
-    [vars$9.emphasisTextColor]: dark.color8,
-    [vars$9.strongTextColor]: dark.color8,
-    [vars$9.additionTextColor]: dark.color7,
-    [vars$9.additionBgColor]: dark.color10,
-    [vars$9.deletionTextColor]: dark.color2,
-    [vars$9.deletionBgColor]: dark.color10,
+    [vars$a.rootBgColor]: globalRefs$8.colors.surface.main,
+    [vars$a.rootTextColor]: globalRefs$8.colors.surface.contrast,
+    [vars$a.docTagTextColor]: dark.color2,
+    [vars$a.keywordTextColor]: dark.color2,
+    [vars$a.metaKeywordTextColor]: dark.color2,
+    [vars$a.templateTagTextColor]: dark.color2,
+    [vars$a.templateVariableTextColor]: dark.color2,
+    [vars$a.typeTextColor]: dark.color2,
+    [vars$a.variableLanguageTextColor]: dark.color2,
+    [vars$a.titleTextColor]: dark.color3,
+    [vars$a.titleClassTextColor]: dark.color3,
+    [vars$a.titleClassInheritedTextColor]: dark.color3,
+    [vars$a.titleFunctionTextColor]: dark.color3,
+    [vars$a.attrTextColor]: dark.color4,
+    [vars$a.attributeTextColor]: dark.color4,
+    [vars$a.literalTextColor]: dark.color4,
+    [vars$a.metaTextColor]: dark.color4,
+    [vars$a.numberTextColor]: dark.color4,
+    [vars$a.operatorTextColor]: dark.color4,
+    [vars$a.variableTextColor]: dark.color4,
+    [vars$a.selectorAttrTextColor]: dark.color4,
+    [vars$a.selectorClassTextColor]: dark.color4,
+    [vars$a.selectorIdTextColor]: dark.color4,
+    [vars$a.regexpTextColor]: dark.color13,
+    [vars$a.stringTextColor]: dark.color13,
+    [vars$a.metaStringTextColor]: dark.color13,
+    [vars$a.builtInTextColor]: dark.color5,
+    [vars$a.symbolTextColor]: dark.color5,
+    [vars$a.commentTextColor]: dark.color6,
+    [vars$a.codeTextColor]: dark.color6,
+    [vars$a.formulaTextColor]: dark.color6,
+    [vars$a.nameTextColor]: dark.color7,
+    [vars$a.quoteTextColor]: dark.color7,
+    [vars$a.selectorTagTextColor]: dark.color7,
+    [vars$a.selectorPseudoTextColor]: dark.color7,
+    [vars$a.substTextColor]: dark.color8,
+    [vars$a.sectionTextColor]: dark.color4,
+    [vars$a.bulletTextColor]: dark.color9,
+    [vars$a.emphasisTextColor]: dark.color8,
+    [vars$a.strongTextColor]: dark.color8,
+    [vars$a.additionTextColor]: dark.color7,
+    [vars$a.additionBgColor]: dark.color10,
+    [vars$a.deletionTextColor]: dark.color2,
+    [vars$a.deletionBgColor]: dark.color10,
   },
 };
@@ -17059,36 +17192,36 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
   __proto__: null,
   codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
   default: CodeSnippet,
-  vars: vars$9
+  vars: vars$a
 });
-const vars$8 = RadioGroupClass.cssVarList;
-const globalRefs$6 = getThemeRefs(globals);
+const vars$9 = RadioGroupClass.cssVarList;
+const globalRefs$7 = getThemeRefs(globals);
 const radioGroup = {
-  [vars$8.buttonsRowGap]: '9px',
-  [vars$8.hostWidth]: refs.width,
-  [vars$8.hostDirection]: refs.direction,
-  [vars$8.fontSize]: refs.fontSize,
-  [vars$8.fontFamily]: refs.fontFamily,
-  [vars$8.labelTextColor]: refs.labelTextColor,
-  [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$8.helperTextColor]: refs.helperTextColor,
-  [vars$8.itemsLabelColor]: globalRefs$6.colors.surface.contrast,
+  [vars$9.buttonsRowGap]: '9px',
+  [vars$9.hostWidth]: refs.width,
+  [vars$9.hostDirection]: refs.direction,
+  [vars$9.fontSize]: refs.fontSize,
+  [vars$9.fontFamily]: refs.fontFamily,
+  [vars$9.labelTextColor]: refs.labelTextColor,
+  [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$9.helperTextColor]: refs.helperTextColor,
+  [vars$9.itemsLabelColor]: globalRefs$7.colors.surface.contrast,
   textAlign: {
-    right: { [vars$8.inputTextAlign]: 'right' },
-    left: { [vars$8.inputTextAlign]: 'left' },
-    center: { [vars$8.inputTextAlign]: 'center' },
+    right: { [vars$9.inputTextAlign]: 'right' },
+    left: { [vars$9.inputTextAlign]: 'left' },
+    center: { [vars$9.inputTextAlign]: 'center' },
   },
   _fullWidth: {
-    [vars$8.buttonsSpacing]: 'space-between',
+    [vars$9.buttonsSpacing]: 'space-between',
   },
   _disabled: {
-    [vars$8.itemsLabelColor]: globalRefs$6.colors.surface.light,
+    [vars$9.itemsLabelColor]: globalRefs$7.colors.surface.light,
   },
 };
@@ -17096,24 +17229,24 @@ var radioGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: radioGroup,
   radioGroup: radioGroup,
-  vars: vars$8
+  vars: vars$9
 });
-const vars$7 = RadioButtonClass.cssVarList;
-const globalRefs$5 = getThemeRefs(globals);
+const vars$8 = RadioButtonClass.cssVarList;
+const globalRefs$6 = getThemeRefs(globals);
 const radioButton = {
-  [vars$7.fontFamily]: refs.fontFamily,
-  [vars$7.radioSize]: 'calc(1em + 6px)',
-  [vars$7.radioMargin]: 'auto 4px',
-  [vars$7.radioCheckedSize]: `calc(var(${vars$7.radioSize})/5)`,
-  [vars$7.radioCheckedColor]: globalRefs$5.colors.surface.light,
-  [vars$7.radioBackgroundColor]: globalRefs$5.colors.surface.light,
-  [vars$7.radioBorderColor]: 'none',
-  [vars$7.radioBorderWidth]: 0,
+  [vars$8.fontFamily]: refs.fontFamily,
+  [vars$8.radioSize]: 'calc(1em + 6px)',
+  [vars$8.radioMargin]: 'auto 4px',
+  [vars$8.radioCheckedSize]: `calc(var(${vars$8.radioSize})/5)`,
+  [vars$8.radioCheckedColor]: globalRefs$6.colors.surface.light,
+  [vars$8.radioBackgroundColor]: globalRefs$6.colors.surface.light,
+  [vars$8.radioBorderColor]: 'none',
+  [vars$8.radioBorderWidth]: 0,
   _checked: {
-    [vars$7.radioBackgroundColor]: globalRefs$5.colors.surface.contrast,
+    [vars$8.radioBackgroundColor]: globalRefs$6.colors.surface.contrast,
   },
   _hover: {
@@ -17122,16 +17255,16 @@ const radioButton = {
   size: {
     xs: {
-      [vars$7.fontSize]: '12px',
+      [vars$8.fontSize]: '12px',
     },
     sm: {
-      [vars$7.fontSize]: '14px',
+      [vars$8.fontSize]: '14px',
     },
     md: {
-      [vars$7.fontSize]: '16px',
+      [vars$8.fontSize]: '16px',
     },
     lg: {
-      [vars$7.fontSize]: '18px',
+      [vars$8.fontSize]: '18px',
     },
   },
 };
@@ -17140,137 +17273,137 @@ var radioButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: radioButton,
   radioButton: radioButton,
-  vars: vars$7
+  vars: vars$8
 });
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
-const vars$6 = CalendarClass.cssVarList;
+const vars$7 = CalendarClass.cssVarList;
 const calendar = {
-  [vars$6.fontFamily]: refs.fontFamily,
-  [vars$6.fontSize]: refs.fontSize,
-  [vars$6.hostDirection]: refs.direction,
+  [vars$7.fontFamily]: refs.fontFamily,
+  [vars$7.fontSize]: refs.fontSize,
+  [vars$7.hostDirection]: refs.direction,
-  [vars$6.calendarPadding]: '1em',
+  [vars$7.calendarPadding]: '1em',
-  [vars$6.topNavVerticalPadding]: '1em',
-  [vars$6.topNavAlignment]: 'space-between',
-  [vars$6.topNavGap]: '0',
-  [vars$6.topNavSelectorsGap]: '0.5em',
+  [vars$7.topNavVerticalPadding]: '1em',
+  [vars$7.topNavAlignment]: 'space-between',
+  [vars$7.topNavGap]: '0',
+  [vars$7.topNavSelectorsGap]: '0.5em',
-  [vars$6.bottomNavVerticalPadding]: '0.75em',
-  [vars$6.bottomNavHorizontalPadding]: '1.5em',
-  [vars$6.bottomNavAlignment]: 'space-between',
-  [vars$6.bottomNavGap]: '0.5em',
+  [vars$7.bottomNavVerticalPadding]: '0.75em',
+  [vars$7.bottomNavHorizontalPadding]: '1.5em',
+  [vars$7.bottomNavAlignment]: 'space-between',
+  [vars$7.bottomNavGap]: '0.5em',
-  [vars$6.navMarginBottom]: '0.75em',
-  [vars$6.navBorderBottomWidth]: '1px',
-  [vars$6.navBorderBottomColor]: globalRefs$4.colors.surface.highlight,
-  [vars$6.navBorderBottomStyle]: 'solid',
+  [vars$7.navMarginBottom]: '0.75em',
+  [vars$7.navBorderBottomWidth]: '1px',
+  [vars$7.navBorderBottomColor]: globalRefs$5.colors.surface.highlight,
+  [vars$7.navBorderBottomStyle]: 'solid',
-  [vars$6.yearInputWidth]: '6em',
-  [vars$6.monthInputWidth]: '8em',
+  [vars$7.yearInputWidth]: '6em',
+  [vars$7.monthInputWidth]: '8em',
-  [vars$6.navButtonSize]: '24px',
-  [vars$6.navButtonCursor]: 'pointer',
+  [vars$7.navButtonSize]: '24px',
+  [vars$7.navButtonCursor]: 'pointer',
-  [vars$6.weekdayFontSize]: '0.875em',
-  [vars$6.weekdayFontWeight]: '500',
+  [vars$7.weekdayFontSize]: '0.875em',
+  [vars$7.weekdayFontWeight]: '500',
   // day table cell
-  [vars$6.dayHeight]: '3.125em',
+  [vars$7.dayHeight]: '3.125em',
   // day value
-  [vars$6.daySize]: '2.125em',
-  [vars$6.dayFontSize]: '1em',
-  [vars$6.dayRadius]: '50%',
-  [vars$6.dayTextAlign]: 'center',
-  [vars$6.dayPadding]: '0',
-  [vars$6.dayTextColor]: globalRefs$4.colors.surface.contrast,
-  [vars$6.dayFontWeight]: '500',
-  [vars$6.dayBackgroundColor]: 'transparent',
-  [vars$6.dayCursor]: 'pointer',
-  [vars$6.dayBackgroundColorHover]: globalRefs$4.colors.primary.highlight,
+  [vars$7.daySize]: '2.125em',
+  [vars$7.dayFontSize]: '1em',
+  [vars$7.dayRadius]: '50%',
+  [vars$7.dayTextAlign]: 'center',
+  [vars$7.dayPadding]: '0',
+  [vars$7.dayTextColor]: globalRefs$5.colors.surface.contrast,
+  [vars$7.dayFontWeight]: '500',
+  [vars$7.dayBackgroundColor]: 'transparent',
+  [vars$7.dayCursor]: 'pointer',
+  [vars$7.dayBackgroundColorHover]: globalRefs$5.colors.primary.highlight,
   // selected day
-  [vars$6.daySelectedBackgroundColor]: globalRefs$4.colors.primary.main,
-  [vars$6.daySelectedTextdColor]: globalRefs$4.colors.primary.contrast,
+  [vars$7.daySelectedBackgroundColor]: globalRefs$5.colors.primary.main,
+  [vars$7.daySelectedTextdColor]: globalRefs$5.colors.primary.contrast,
   // disabled day (out of min/max range)
-  [vars$6.dayDisabledTextdColor]: globalRefs$4.colors.surface.light,
+  [vars$7.dayDisabledTextdColor]: globalRefs$5.colors.surface.light,
   // today
-  [vars$6.currentDayBorderColor]: globalRefs$4.colors.surface.light,
-  [vars$6.currentDayBorderWidth]: '1px',
-  [vars$6.currentDayBorderStyle]: 'solid',
+  [vars$7.currentDayBorderColor]: globalRefs$5.colors.surface.light,
+  [vars$7.currentDayBorderWidth]: '1px',
+  [vars$7.currentDayBorderStyle]: 'solid',
   size: {
-    xs: { [vars$6.fontSize]: '12px' },
-    sm: { [vars$6.fontSize]: '14px' },
-    md: { [vars$6.fontSize]: '16px' },
-    lg: { [vars$6.fontSize]: '18px' },
+    xs: { [vars$7.fontSize]: '12px' },
+    sm: { [vars$7.fontSize]: '14px' },
+    md: { [vars$7.fontSize]: '16px' },
+    lg: { [vars$7.fontSize]: '18px' },
   },
-  [vars$6.navButtonRotation]: 'rotate(180deg)',
+  [vars$7.navButtonRotation]: 'rotate(180deg)',
   _disabled: {
-    [vars$6.navButtonOpacity]: '0.5',
-    [vars$6.dayBackgroundColorHover]: 'none',
-    [vars$6.navButtonCursor]: 'default',
-    [vars$6.dayCursor]: 'default',
+    [vars$7.navButtonOpacity]: '0.5',
+    [vars$7.dayBackgroundColorHover]: 'none',
+    [vars$7.navButtonCursor]: 'default',
+    [vars$7.dayCursor]: 'default',
   },
   _fullWidth: {
-    [vars$6.hostWidth]: '100%',
-    [vars$6.dayBlockAlign]: '0 auto',
+    [vars$7.hostWidth]: '100%',
+    [vars$7.dayBlockAlign]: '0 auto',
   },
 };
 var calendar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: calendar,
-  vars: vars$6
+  vars: vars$7
 });
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 const shadowColor$1 = '#00000020';
-const { shadow } = globalRefs$3;
+const { shadow } = globalRefs$4;
-const vars$5 = DateFieldClass.cssVarList;
+const vars$6 = DateFieldClass.cssVarList;
 const dateField = {
-  [vars$5.hostWidth]: refs.width,
-  [vars$5.hostDirection]: refs.direction,
-  [vars$5.iconMargin]: '0.375em',
-  [vars$5.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
-  [vars$5.overlay.backgroundColor]: refs.backgroundColor,
-  [vars$5.overlay.backdropBackgroundColor]: 'transparent',
-  [vars$5.overlay.backdropPointerEvents]: 'all',
-  [vars$5.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$1}, ${shadow.narrow.xl} ${shadowColor$1}`,
-  [vars$5.overlay.outlineWidth]: '0',
-  [vars$5.overlay.outlineColor]: 'transparent',
-  [vars$5.overlay.outlineStyle]: 'none',
-  [vars$5.overlay.padding]: '0',
-  [vars$5.rtlInputDirection]: 'ltr',
-  [vars$5.rtlInputAlignment]: 'right',
+  [vars$6.hostWidth]: refs.width,
+  [vars$6.hostDirection]: refs.direction,
+  [vars$6.iconMargin]: '0.375em',
+  [vars$6.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
+  [vars$6.overlay.backgroundColor]: refs.backgroundColor,
+  [vars$6.overlay.backdropBackgroundColor]: 'transparent',
+  [vars$6.overlay.backdropPointerEvents]: 'all',
+  [vars$6.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$1}, ${shadow.narrow.xl} ${shadowColor$1}`,
+  [vars$6.overlay.outlineWidth]: '0',
+  [vars$6.overlay.outlineColor]: 'transparent',
+  [vars$6.overlay.outlineStyle]: 'none',
+  [vars$6.overlay.padding]: '0',
+  [vars$6.rtlInputDirection]: 'ltr',
+  [vars$6.rtlInputAlignment]: 'right',
 };
 var dateField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: dateField,
-  vars: vars$5
+  vars: vars$6
 });
-const globalRefs$2 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 const compVars = ListClass.cssVarList;
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   { shadowColor: '#00000020' },
-  componentName$3
+  componentName$4
 );
 const { shadowColor } = helperRefs;
@@ -17279,24 +17412,24 @@ const list$1 = {
   ...helperTheme,
   [compVars.hostWidth]: '100%',
-  [compVars.backgroundColor]: globalRefs$2.colors.surface.main,
-  [compVars.fontFamily]: globalRefs$2.fonts.font1.family,
-  [compVars.borderColor]: globalRefs$2.colors.surface.light,
+  [compVars.backgroundColor]: globalRefs$3.colors.surface.main,
+  [compVars.fontFamily]: globalRefs$3.fonts.font1.family,
+  [compVars.borderColor]: globalRefs$3.colors.surface.light,
   [compVars.borderStyle]: 'solid',
-  [compVars.borderWidth]: globalRefs$2.border.xs,
-  [compVars.borderRadius]: globalRefs$2.radius.sm,
-  [compVars.gap]: globalRefs$2.spacing.md,
-  [compVars.verticalPadding]: globalRefs$2.spacing.lg,
-  [compVars.horizontalPadding]: globalRefs$2.spacing.lg,
-  [compVars.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${shadowColor}, ${globalRefs$2.shadow.narrow.sm} ${shadowColor}`,
+  [compVars.borderWidth]: globalRefs$3.border.xs,
+  [compVars.borderRadius]: globalRefs$3.radius.sm,
+  [compVars.gap]: globalRefs$3.spacing.md,
+  [compVars.verticalPadding]: globalRefs$3.spacing.lg,
+  [compVars.horizontalPadding]: globalRefs$3.spacing.lg,
+  [compVars.boxShadow]: `${globalRefs$3.shadow.wide.sm} ${shadowColor}, ${globalRefs$3.shadow.narrow.sm} ${shadowColor}`,
   [compVars.maxHeight]: '100%',
-  [compVars.hostDirection]: globalRefs$2.direction,
+  [compVars.hostDirection]: globalRefs$3.direction,
   [compVars.minItemsWidth]: '150px',
   _empty: {
     [compVars.minHeight]: '150px',
-    [compVars.emptyStateTextColor]: globalRefs$2.colors.surface.dark,
-    [compVars.emptyStateTextFontFamily]: globalRefs$2.fonts.font1.family,
+    [compVars.emptyStateTextColor]: globalRefs$3.colors.surface.dark,
+    [compVars.emptyStateTextFontFamily]: globalRefs$3.fonts.font1.family,
   },
   variant: {
@@ -17310,7 +17443,7 @@ const list$1 = {
   },
 };
-const vars$4 = {
+const vars$5 = {
   ...compVars,
   ...helperVars,
 };
@@ -17318,78 +17451,78 @@ const vars$4 = {
 var list$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list$1,
-  vars: vars$4
+  vars: vars$5
 });
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$2 = getThemeRefs(globals);
-const vars$3 = ListItemClass.cssVarList;
+const vars$4 = ListItemClass.cssVarList;
 const list = {
-  [vars$3.backgroundColor]: globalRefs$1.colors.surface.main,
-  [vars$3.padding]: globalRefs$1.spacing.lg,
-  [vars$3.gap]: globalRefs$1.spacing.md,
-  [vars$3.borderStyle]: 'solid',
-  [vars$3.borderWidth]: globalRefs$1.border.xs,
-  [vars$3.borderColor]: globalRefs$1.colors.surface.main,
-  [vars$3.borderRadius]: globalRefs$1.radius.sm,
-  [vars$3.cursor]: 'pointer',
-  [vars$3.alignItems]: 'center',
-  [vars$3.flexDirection]: 'row',
-  [vars$3.transition]: 'border-color 0.2s, background-color 0.2s',
+  [vars$4.backgroundColor]: globalRefs$2.colors.surface.main,
+  [vars$4.padding]: globalRefs$2.spacing.lg,
+  [vars$4.gap]: globalRefs$2.spacing.md,
+  [vars$4.borderStyle]: 'solid',
+  [vars$4.borderWidth]: globalRefs$2.border.xs,
+  [vars$4.borderColor]: globalRefs$2.colors.surface.main,
+  [vars$4.borderRadius]: globalRefs$2.radius.sm,
+  [vars$4.cursor]: 'pointer',
+  [vars$4.alignItems]: 'center',
+  [vars$4.flexDirection]: 'row',
+  [vars$4.transition]: 'border-color 0.2s, background-color 0.2s',
   variant: {
     tile: {
-      [vars$3.alignItems]: 'flex-start',
-      [vars$3.flexDirection]: 'column',
-      [vars$3.borderColor]: globalRefs$1.colors.surface.light,
+      [vars$4.alignItems]: 'flex-start',
+      [vars$4.flexDirection]: 'column',
+      [vars$4.borderColor]: globalRefs$2.colors.surface.light,
     },
   },
   _hover: {
-    [vars$3.backgroundColor]: globalRefs$1.colors.surface.highlight,
+    [vars$4.backgroundColor]: globalRefs$2.colors.surface.highlight,
   },
   _active: {
-    [vars$3.backgroundColor]: globalRefs$1.colors.surface.main,
-    [vars$3.borderColor]: globalRefs$1.colors.primary.light,
-    [vars$3.outline]: `1px solid ${globalRefs$1.colors.primary.light}`,
+    [vars$4.backgroundColor]: globalRefs$2.colors.surface.main,
+    [vars$4.borderColor]: globalRefs$2.colors.primary.light,
+    [vars$4.outline]: `1px solid ${globalRefs$2.colors.primary.light}`,
   },
 };
 var listItem = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list,
-  vars: vars$3
+  vars: vars$4
 });
-const vars$2 = AppsListClass.cssVarList;
-const globalRefs = getThemeRefs(globals);
+const vars$3 = AppsListClass.cssVarList;
+const globalRefs$1 = getThemeRefs(globals);
 const defaultHeight = '400px';
 const appsList = {
-  [vars$2.itemsFontWeight]: 'normal',
-  [vars$2.itemsTextAlign]: 'start',
-  [vars$2.hostDirection]: globalRefs.direction,
-  [vars$2.maxHeight]: defaultHeight,
+  [vars$3.itemsFontWeight]: 'normal',
+  [vars$3.itemsTextAlign]: 'start',
+  [vars$3.hostDirection]: globalRefs$1.direction,
+  [vars$3.maxHeight]: defaultHeight,
   _empty: {
-    [vars$2.minHeight]: defaultHeight,
+    [vars$3.minHeight]: defaultHeight,
   },
   size: {
     xs: {
-      [vars$2.itemsFontSize]: '14px',
+      [vars$3.itemsFontSize]: '14px',
     },
     sm: {
-      [vars$2.itemsFontSize]: '14px',
+      [vars$3.itemsFontSize]: '14px',
     },
     md: {
-      [vars$2.itemsFontSize]: '16px',
+      [vars$3.itemsFontSize]: '16px',
     },
     lg: {
-      [vars$2.itemsFontSize]: '20px',
+      [vars$3.itemsFontSize]: '20px',
     },
   },
 };
@@ -17397,23 +17530,59 @@ const appsList = {
 var appsList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: appsList,
-  vars: vars$2
+  vars: vars$3
 });
-const vars$1 = ScopesListClass.cssVarList;
+const vars$2 = ScopesListClass.cssVarList;
 const scopesList = {
-  [vars$1.requiredInputBorderColor]: theme$1._disabled[vars$N.borderColor],
-  [vars$1.requiredInputValueTextColor]: theme$1._disabled[vars$N.valueTextColor],
-  [vars$1.hostWidth]: '280px',
+  [vars$2.requiredInputBorderColor]: theme$1._disabled[vars$O.borderColor],
+  [vars$2.requiredInputValueTextColor]: theme$1._disabled[vars$O.valueTextColor],
+  [vars$2.hostWidth]: '280px',
   _fullWidth: {
-    [vars$1.hostWidth]: '100%',
+    [vars$2.hostWidth]: '100%',
   },
 };
 var scopesList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: scopesList,
+  vars: vars$2
+});
+const globalRefs = getThemeRefs(globals);
+const vars$1 = ThirdPartyAppLogoClass.cssVarList;
+const thirdPartyAppLogo = {
+  [vars$1.gap]: globalRefs.spacing.lg,
+  [vars$1.arrowsColor]: globalRefs.colors.surface.dark,
+  [vars$1.thirdPartyAppLogoFallback]:
+    'url(https://imgs.descope.com/components/third-party-app-logo-placeholder.svg)',
+  [vars$1.companyLogoFallback]:
+    'url(https://imgs.descope.com/components/project-logo-placeholder.svg)',
+  size: {
+    xs: {
+      [vars$1.logoMaxHeight]: '30px',
+      [vars$1.logoMaxWidth]: '120px',
+    },
+    sm: {
+      [vars$1.logoMaxHeight]: '40px',
+      [vars$1.logoMaxWidth]: '160px',
+    },
+    md: {
+      [vars$1.logoMaxHeight]: '48px',
+      [vars$1.logoMaxWidth]: '200px',
+    },
+    lg: {
+      [vars$1.logoMaxHeight]: '60px',
+      [vars$1.logoMaxWidth]: '240px',
+    },
+  },
+};
+var thirdPartyAppLogo$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: thirdPartyAppLogo,
   vars: vars$1
 });
@@ -17468,6 +17637,7 @@ const components = {
   listItem,
   appsList: appsList$1,
   scopesList: scopesList$1,
+  thirdPartyAppLogo: thirdPartyAppLogo$1,
 };
 const theme = Object.keys(components).reduce(
@@ -17480,7 +17650,7 @@ const vars = Object.keys(components).reduce(
 );
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$P, components: vars };
+const themeVars = { globals: vars$Q, components: vars };
 const colors = {
   surface: {
@@ -17529,5 +17699,5 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
-export { AppsListClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, ComboBoxClass, ContainerClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, IconClass, ImageClass, LinkClass, ListClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, SamlGroupMappingsClass, ScopesListClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AppsListClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, ComboBoxClass, ContainerClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, IconClass, ImageClass, LinkClass, ListClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, SamlGroupMappingsClass, ScopesListClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, ThirdPartyAppLogoClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map