@descope/web-components-ui 1.0.291 → 1.0.292

package/dist/index.esm.js

@@ -1354,7 +1354,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$P = getComponentName('button');
+const componentName$Q = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1392,7 +1392,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$l, label: label$a } = {
+const { host: host$m, label: label$a } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
 };
@@ -1404,7 +1404,7 @@ const ButtonClass = compose(
     mappings: {
       hostWidth: { property: 'width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$l, property: 'direction' },
+      hostDirection: { ...host$m, property: 'direction' },
       fontSize: {},
       fontFamily: {},
 
@@ -1456,7 +1456,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$P,
+    componentName: componentName$Q,
   })
 );
 
@@ -1493,7 +1493,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$P, ButtonClass);
+customElements.define(componentName$Q, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1503,11 +1503,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$O = getComponentName('boolean-field-internal');
+const componentName$P = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$O, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$P, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$8 {
   static get observedAttributes() {
@@ -1583,14 +1583,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$O}
+				<${componentName$P}
 					tabindex="-1"
 					slot="input"
-				></${componentName$O}>
+				></${componentName$P}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$O);
+      this.inputElement = this.shadowRoot.querySelector(componentName$P);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1789,10 +1789,10 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$N = getComponentName('checkbox');
+const componentName$O = getComponentName('checkbox');
 
 const {
-  host: host$k,
+  host: host$l,
   component: component$1,
   checkboxElement,
   checkboxSurface,
@@ -1814,10 +1814,10 @@ const {
 const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$k, property: 'width' },
-      hostDirection: { ...host$k, property: 'direction' },
+      hostWidth: { ...host$l, property: 'width' },
+      hostDirection: { ...host$l, property: 'direction' },
 
-      fontSize: [host$k, checkboxElement, checkboxLabel$1],
+      fontSize: [host$l, checkboxElement, checkboxLabel$1],
       fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
@@ -1895,18 +1895,18 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$N,
+    componentName: componentName$O,
   })
 );
 
-customElements.define(componentName$O, BooleanInputInternal);
+customElements.define(componentName$P, BooleanInputInternal);
 
-customElements.define(componentName$N, CheckboxClass);
+customElements.define(componentName$O, CheckboxClass);
 
-const componentName$M = getComponentName('switch-toggle');
+const componentName$N = getComponentName('switch-toggle');
 
 const {
-  host: host$j,
+  host: host$k,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
@@ -1928,8 +1928,8 @@ const {
 const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$j, property: 'width' },
-      hostDirection: { ...host$j, property: 'direction' },
+      hostWidth: { ...host$k, property: 'width' },
+      hostDirection: { ...host$k, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
       fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
@@ -2035,17 +2035,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$M,
+    componentName: componentName$N,
   })
 );
 
-customElements.define(componentName$M, SwitchToggleClass);
+customElements.define(componentName$N, SwitchToggleClass);
 
-const componentName$L = getComponentName('loader-linear');
+const componentName$M = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$M, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$L;
+    return componentName$M;
   }
 
   constructor() {
@@ -2081,18 +2081,18 @@ const selectors$2 = {
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$i } = selectors$2;
+const { after: after$1, host: host$j } = selectors$2;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$i, property: 'width' },
+      hostWidth: { ...host$j, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$i, property: 'padding-top' },
-        { ...host$i, property: 'padding-bottom' },
+        { ...host$j, property: 'padding-top' },
+        { ...host$j, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after$1, property: 'background-color' },
@@ -2106,11 +2106,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$L, LoaderLinearClass);
+customElements.define(componentName$M, LoaderLinearClass);
 
-const componentName$K = getComponentName('loader-radial');
+const componentName$L = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2154,11 +2154,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$K, LoaderRadialClass);
+customElements.define(componentName$L, LoaderRadialClass);
 
-const componentName$J = getComponentName('container');
+const componentName$K = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$J, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$K, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2211,13 +2211,13 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$J, ContainerClass);
+customElements.define(componentName$K, ContainerClass);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$I = getComponentName('text');
+const componentName$J = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2277,8 +2277,8 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const componentName$H = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
+const componentName$I = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2324,7 +2324,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$H, baseS
 }
 
 const textVars$3 = TextClass.cssVarList;
-const { host: host$h, before, after, text: text$3 } = {
+const { host: host$i, before, after, text: text$3 } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
   after: { selector: '::after' },
@@ -2334,8 +2334,8 @@ const { host: host$h, before, after, text: text$3 } = {
 const DividerClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$h, property: 'width' },
-      hostPadding: { ...host$h, property: 'padding' },
+      hostWidth: { ...host$i, property: 'width' },
+      hostPadding: { ...host$i, property: 'padding' },
       hostDirection: { ...text$3, property: 'direction' },
 
       minHeight: {},
@@ -2377,12 +2377,12 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$I, TextClass);
+customElements.define(componentName$J, TextClass);
 
-customElements.define(componentName$H, DividerClass);
+customElements.define(componentName$I, DividerClass);
 
 const {
-  host: host$g,
+  host: host$h,
   label: label$9,
   placeholder: placeholder$3,
   requiredIndicator: requiredIndicator$9,
@@ -2407,12 +2407,12 @@ const {
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host$g],
+  fontSize: [{}, host$h],
   fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
 
-  hostWidth: { ...host$g, property: 'width' },
-  hostMinWidth: { ...host$g, property: 'min-width' },
-  hostDirection: { ...host$g, property: 'direction' },
+  hostWidth: { ...host$h, property: 'width' },
+  hostMinWidth: { ...host$h, property: 'min-width' },
+  hostDirection: { ...host$h, property: 'direction' },
 
   inputBackgroundColor: { ...inputField$6, property: 'background-color' },
 
@@ -2457,7 +2457,7 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$G = getComponentName('email-field');
+const componentName$H = getComponentName('email-field');
 
 const customMixin$8 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -2492,15 +2492,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$G,
+    componentName: componentName$H,
   })
 );
 
-customElements.define(componentName$G, EmailFieldClass);
+customElements.define(componentName$H, EmailFieldClass);
 
-const componentName$F = getComponentName('link');
+const componentName$G = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$F, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$G, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2546,12 +2546,12 @@ const selectors$1 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$f, wrapper: wrapper$1 } = selectors$1;
+const { anchor, text: text$2, host: host$g, wrapper: wrapper$1 } = selectors$1;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$f, property: 'width' },
+      hostWidth: { ...host$g, property: 'width' },
       hostDirection: { ...text$2, property: 'direction' },
       textAlign: wrapper$1,
       textColor: [
@@ -2565,7 +2565,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$F, LinkClass);
+customElements.define(componentName$G, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2617,37 +2617,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$E = getComponentName('logo');
+const componentName$F = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$E,
+  componentName: componentName$F,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$E, LogoClass);
+customElements.define(componentName$F, LogoClass);
 
-const componentName$D = getComponentName('totp-image');
+const componentName$E = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$D,
+  componentName: componentName$E,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$D, TotpImageClass);
+customElements.define(componentName$E, TotpImageClass);
 
-const componentName$C = getComponentName('notp-image');
+const componentName$D = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$C,
+  componentName: componentName$D,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$C, NotpImageClass);
+customElements.define(componentName$D, NotpImageClass);
 
-const componentName$B = getComponentName('number-field');
+const componentName$C = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2673,11 +2673,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$B,
+    componentName: componentName$C,
   })
 );
 
-customElements.define(componentName$B, NumberFieldClass);
+customElements.define(componentName$C, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2695,13 +2695,13 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$A = getComponentName('passcode-internal');
+const componentName$B = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -2927,7 +2927,7 @@ class PasscodeInternal extends BaseInputClass$7 {
   }
 }
 
-const componentName$z = getComponentName('text-field');
+const componentName$A = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -2977,11 +2977,11 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$z,
+    componentName: componentName$A,
   })
 );
 
-const componentName$y = getComponentName('passcode');
+const componentName$z = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -3000,17 +3000,17 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$A}
+      <${componentName$B}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$A}>
+      ><slot></slot></${componentName$B}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$A);
+      this.inputElement = this.shadowRoot.querySelector(componentName$B);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -3025,7 +3025,7 @@ const customMixin$6 = (superclass) =>
   };
 
 const {
-  host: host$e,
+  host: host$f,
   digitField,
   label: label$8,
   requiredIndicator: requiredIndicator$8,
@@ -3048,10 +3048,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$e],
+      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$f],
       hostWidth: { property: 'width' },
-      hostDirection: { ...host$e, property: 'direction' },
-      fontFamily: [host$e, { ...label$8 }],
+      hostDirection: { ...host$f, property: 'direction' },
+      fontFamily: [host$f, { ...label$8 }],
       labelTextColor: [
         { ...label$8, property: 'color' },
         { ...requiredIndicator$8, property: 'color' },
@@ -3157,15 +3157,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
-customElements.define(componentName$z, TextFieldClass);
+customElements.define(componentName$A, TextFieldClass);
 
-customElements.define(componentName$A, PasscodeInternal);
+customElements.define(componentName$B, PasscodeInternal);
 
-customElements.define(componentName$y, PasscodeClass);
+customElements.define(componentName$z, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -3201,10 +3201,10 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$x = getComponentName('password');
+const componentName$y = getComponentName('password');
 
 const {
-  host: host$d,
+  host: host$e,
   inputField: inputField$5,
   inputElement: inputElement$2,
   inputElementPlaceholder,
@@ -3230,10 +3230,10 @@ const {
 const PasswordClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$d, property: 'width' },
-      hostMinWidth: { ...host$d, property: 'min-width' },
-      hostDirection: { ...host$d, property: 'direction' },
-      fontSize: [{}, host$d],
+      hostWidth: { ...host$e, property: 'width' },
+      hostMinWidth: { ...host$e, property: 'min-width' },
+      hostDirection: { ...host$e, property: 'direction' },
+      fontSize: [{}, host$e],
       fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
       inputHeight: { ...inputField$5, property: 'height' },
       inputHorizontalPadding: [
@@ -3330,16 +3330,16 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$x,
+    componentName: componentName$y,
   })
 );
 
-customElements.define(componentName$x, PasswordClass);
+customElements.define(componentName$y, PasswordClass);
 
-const componentName$w = getComponentName('text-area');
+const componentName$x = getComponentName('text-area');
 
 const {
-  host: host$c,
+  host: host$d,
   label: label$6,
   placeholder: placeholder$2,
   inputField: inputField$4,
@@ -3361,10 +3361,10 @@ const {
 const TextAreaClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$c, property: 'width' },
-      hostMinWidth: { ...host$c, property: 'min-width' },
-      hostDirection: { ...host$c, property: 'direction' },
-      fontSize: [host$c, textArea$2],
+      hostWidth: { ...host$d, property: 'width' },
+      hostMinWidth: { ...host$d, property: 'min-width' },
+      hostDirection: { ...host$d, property: 'direction' },
+      fontSize: [host$d, textArea$2],
       fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
       labelTextColor: [
         { ...label$6, property: 'color' },
@@ -3412,17 +3412,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$w,
+    componentName: componentName$x,
   })
 );
 
-customElements.define(componentName$w, TextAreaClass);
+customElements.define(componentName$x, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$v = getComponentName('image');
+const componentName$w = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$v, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$w, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3462,9 +3462,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$v, ImageClass);
+customElements.define(componentName$w, ImageClass);
 
-const componentName$u = getComponentName('combo-box');
+const componentName$v = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3690,7 +3690,7 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$b,
+  host: host$c,
   inputField: inputField$3,
   inputElement: inputElement$1,
   placeholder: placeholder$1,
@@ -3716,10 +3716,10 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$b, property: 'width' },
-      hostDirection: { ...host$b, property: 'direction' },
+      hostWidth: { ...host$c, property: 'width' },
+      hostDirection: { ...host$c, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$b],
+      fontSize: [{}, host$c],
       fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
       labelTextColor: [
         { ...label$5, property: 'color' },
@@ -3847,12 +3847,12 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data'],
-    componentName: componentName$u,
+    componentName: componentName$v,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$u, ComboBoxClass);
+customElements.define(componentName$v, ComboBoxClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -5095,7 +5095,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$t = getComponentName('phone-field-internal');
+const componentName$u = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5107,7 +5107,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -5279,12 +5279,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   }
 };
 
-customElements.define(componentName$t, PhoneFieldInternal$1);
+customElements.define(componentName$u, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$s = getComponentName('phone-field');
+const componentName$t = getComponentName('phone-field');
 
 const customMixin$5 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -5298,15 +5298,15 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$t}
+				<${componentName$u}
 					tabindex="-1"
 					slot="input"
-				></${componentName$t}>
+				></${componentName$u}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$t);
+      this.inputElement = this.shadowRoot.querySelector(componentName$u);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5326,7 +5326,7 @@ const customMixin$5 = (superclass) =>
   };
 
 const {
-  host: host$a,
+  host: host$b,
   label: label$4,
   requiredIndicator: requiredIndicator$4,
   inputField: inputField$2,
@@ -5351,7 +5351,7 @@ const PhoneFieldClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$a,
+        host$b,
         inputField$2,
         {
           selector: TextFieldClass.componentName,
@@ -5372,11 +5372,11 @@ const PhoneFieldClass = compose(
         },
       ],
       hostWidth: [
-        { ...host$a, property: 'width' },
+        { ...host$b, property: 'width' },
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
-      hostDirection: { ...host$a, property: 'direction' },
+      hostDirection: { ...host$b, property: 'direction' },
 
       inputBorderStyle: [
         { ...inputField$2, property: 'border-style' },
@@ -5502,17 +5502,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$s,
+    componentName: componentName$t,
   })
 );
 
-customElements.define(componentName$s, PhoneFieldClass);
+customElements.define(componentName$t, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$r = getComponentName('phone-field-internal-input-box');
+const componentName$s = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -5526,7 +5526,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -5665,11 +5665,11 @@ class PhoneFieldInternal extends BaseInputClass$5 {
   }
 }
 
-customElements.define(componentName$r, PhoneFieldInternal);
+customElements.define(componentName$s, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$q = getComponentName('phone-input-box-field');
+const componentName$r = getComponentName('phone-input-box-field');
 
 const customMixin$4 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -5683,15 +5683,15 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$r}
+				<${componentName$s}
 					tabindex="-1"
 					slot="input"
-				></${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.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5708,7 +5708,7 @@ const customMixin$4 = (superclass) =>
     }
   };
 
-const { host: host$9, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
+const { host: host$a, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -5722,7 +5722,7 @@ const PhoneFieldInputBoxClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$9,
+        host$a,
         inputField$1,
         {
           selector: TextFieldClass.componentName,
@@ -5730,9 +5730,9 @@ const PhoneFieldInputBoxClass = compose(
         },
       ],
       fontFamily: [label$3, errorMessage$4, helperText$3],
-      hostWidth: { ...host$9, property: 'width' },
-      hostMinWidth: { ...host$9, property: 'min-width' },
-      hostDirection: { ...host$9, property: 'direction' },
+      hostWidth: { ...host$a, property: 'width' },
+      hostMinWidth: { ...host$a, property: 'min-width' },
+      hostDirection: { ...host$a, property: 'direction' },
 
       inputBorderStyle: { ...inputField$1, property: 'border-style' },
       inputBorderWidth: { ...inputField$1, property: 'border-width' },
@@ -5824,16 +5824,239 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$r,
   })
 );
 
-customElements.define(componentName$q, PhoneFieldInputBoxClass);
+customElements.define(componentName$r, PhoneFieldInputBoxClass);
+
+const componentName$q = 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$p = 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$p, baseSelector: ':host > div' }) {
+  #availablePolicies;
+
+  #activePolicies = [];
+
+  #overrides;
+
+  static get observedAttributes() {
+    return policyAttrs;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div>
+      <div class="label"></div>
+      <ul></ul>
+    </div>
+    <style>
+      :host > div {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+      }
+      .label {
+        max-width: 100%;
+        text-wrap: wrap;
+        overflow-wrap: break-word;
+      }
+      .hide-label .label {
+        display: none;
+      }
+      ul {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+      }
+      ul, li {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      li::before {
+        display: inline-block;
+        width: 1em;
+        text-align: center;
+      }
+    </style>
+		`;
+
+    this.panel = this.shadowRoot.querySelector(':host > div');
+    this.label = this.shadowRoot.querySelector('.label');
+    this.list = this.shadowRoot.querySelector('ul');
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (oldValue !== newValue) {
+      if (attrName === 'label') {
+        this.updateLabel(newValue);
+      }
+
+      // we're don't know the order in which the attributes are forwarded, so we're trying to render every time
+      // once `data` and `active-policies` are populated, the render will be executed.
+      // once the `overrides` object is updated, we want to re-render the panel.
+      if (dataAttrs.includes(attrName)) {
+        if (attrName === 'data') {
+          try {
+            this.availablePolicies = JSON.parse(newValue);
+          } catch {
+            // eslint-disable-next-line no-console
+            console.error('Failed to set available policies');
+          }
+        }
+        if (attrName === 'active-policies') {
+          this.#activePolicies = (newValue || '').split(',');
+        }
+
+        if (attrName === 'data-password-policy-value-minlength') {
+          const ln = Number(newValue);
+          if (!Number.isNaN(ln) && ln > 0) {
+            this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };
+          }
+        }
+      }
+
+      this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
+    }
+  }
+
+  get availablePolicies() {
+    return this.#availablePolicies || [];
+  }
+
+  set availablePolicies(val) {
+    this.#availablePolicies = val;
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  validate() {
+    let policies = this.#availablePolicies;
+
+    if (this.#overrides) {
+      policies = this.#availablePolicies.map((policy) =>
+        this.#overrides[policy.id] ? { ...policy, data: this.#overrides[policy.id] } : policy
+      );
+    }
+
+    return this.#activePolicies.reduce((results, id) => {
+      const policy = policies.find((p) => p.id === id);
+
+      if (!policy) {
+        return results;
+      }
+
+      const { pattern, message, data } = policy;
+
+      if (!pattern || !message) {
+        return results;
+      }
+
+      const exp = new RegExp(interpolateString(pattern, data));
+
+      const validationResult = {
+        valid: exp.test(this.value),
+        message: interpolateString(message, data),
+        id,
+      };
+
+      results.push(validationResult);
+
+      return results;
+    }, []);
+  }
+
+  get isValid() {
+    return !this.validate().some(({ valid }) => valid === false);
+  }
+
+  getValidationItemTemplate({ valid, message }) {
+    const status = !this.value ? 'none' : valid;
+    return `
+      <li class="item" data-valid="${status}">
+        <span class="message">${message}</span>
+      </li>
+    `;
+  }
+
+  renderItems(availablePolicies, activePolicies) {
+    if (!availablePolicies || !activePolicies.length) {
+      return;
+    }
+
+    this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
+  }
+
+  updateLabel(val) {
+    if (!val) {
+      this.classList.add('hide-label');
+      this.label.innerHTML = '';
+    } else {
+      this.label.innerHTML = val;
+      this.classList.remove('hide-label');
+    }
+  }
+}
+
+const { host: host$9, item, symbolDefault, symbolSuccess, symbolError } = {
+  host: { selector: () => ':host > div' },
+  item: { selector: () => '.item' },
+  symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
+  symbolSuccess: { selector: () => '.item[data-valid="true"]::before' },
+  symbolError: { selector: () => '.item[data-valid="false"]::before' },
+};
+
+const PolicyValidationClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      padding: {},
+      borderWidth: { ...host$9, property: 'border-width' },
+      borderStyle: { ...host$9, property: 'border-style' },
+      borderColor: { ...host$9, property: 'border-color' },
+      borderRadius: { ...host$9, property: 'border-radius' },
+      backgroundColor: { ...host$9, property: 'background-color' },
+      textColor: { property: 'color' },
+      labelMargin: { ...host$9, property: 'gap' },
+      itemsSpacing: { ...item, property: 'line-height' },
+      itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
+      itemSymbolErrorColor: { ...symbolError, property: 'color' },
+      itemSymbolDefault: { ...symbolDefault, property: 'content' },
+      itemSymbolSuccess: { ...symbolSuccess, property: 'content' },
+      itemSymbolError: { ...symbolError, property: 'content' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawPolicyValidation);
 
-const componentName$p = getComponentName('new-password-internal');
+customElements.define(componentName$p, PolicyValidationClass);
 
 const componentName$o = getComponentName('new-password');
 
+const policyPreviewVars = PolicyValidationClass.cssVarList;
+
 const customMixin$3 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
@@ -5842,16 +6065,16 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$p}
+			<${componentName$q}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$p}>
+			></${componentName$q}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$p);
+      this.inputElement = this.shadowRoot.querySelector(componentName$q);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5867,18 +6090,32 @@ const customMixin$3 = (superclass) =>
           'invalid',
           'readonly',
           'draggable',
+          'has-validation',
+          'policy-label',
+          'active-policies',
+          'available-policies',
+          'data-password-policy-value-minlength',
         ],
       });
     }
   };
 
-const { host: host$8, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
+const {
+  host: host$8,
+  label: label$2,
+  internalInputsWrapper,
+  errorMessage: errorMessage$3,
+  helperText: helperText$2,
+  passwordInput,
+  policyPreview,
+} = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
   passwordInput: { selector: 'descope-password' },
+  policyPreview: { selector: 'descope-policy-validation' },
 };
 
 const NewPasswordClass = compose(
@@ -5902,6 +6139,11 @@ const NewPasswordClass = compose(
       ],
       inputsRequiredIndicator: { ...host$8, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
+      policyPreviewBackgroundColor: {
+        ...policyPreview,
+        property: policyPreviewVars.backgroundColor,
+      },
+      policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
     },
   }),
   draggableMixin,
@@ -5940,7 +6182,6 @@ const NewPasswordClass = compose(
 			-webkit-mask-image: none;
 			min-height: 0;
 			width: 100%;
-			height: 100%;
 			padding: 0;
 		}
 		descope-new-password-internal > .wrapper {
@@ -5956,6 +6197,13 @@ const NewPasswordClass = compose(
 		descope-new-password-internal vaadin-password-field::before {
 			height: initial;
 		}
+    descope-policy-validation {
+      margin-top: 8px;
+      display: flex;
+    }
+    descope-policy-validation.hidden {
+      display: none;
+    }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$o,
@@ -5969,6 +6217,7 @@ const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
 
 const passwordInputAttrs = ['password-label', 'password-placeholder'];
 const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
+const policyPanelAttrs = ['has-validation'];
 const commonAttrs = [
   'disabled',
   'bordered',
@@ -5981,9 +6230,14 @@ const commonAttrs = [
   'autocomplete',
 ];
 
-const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
+const inputRelatedAttrs = [].concat(
+  commonAttrs,
+  passwordInputAttrs,
+  confirmInputAttrs,
+  policyPanelAttrs
+);
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -6013,7 +6267,15 @@ class NewPasswordInternal extends BaseInputClass$4 {
     return this.getAttribute('has-confirm') === 'true';
   }
 
+  get hasValidation() {
+    return this.getAttribute('has-validation') === 'true';
+  }
+
   getValidity() {
+    if (!this.policyPanel.isValid) {
+      return { patternMismatch: true };
+    }
+
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
     }
@@ -6044,7 +6306,12 @@ class NewPasswordInternal extends BaseInputClass$4 {
   }
 
   renderInputs(shouldRenderConfirm) {
-    let template = `<descope-password data-id="password"></descope-password>`;
+    let template = `
+      <div>
+        <descope-password data-id="password"></descope-password>
+        <descope-policy-validation></descope-policy-validation>
+      </div>
+    `;
 
     if (shouldRenderConfirm) {
       template += `<descope-password data-id="confirm"></descope-password>`;
@@ -6054,6 +6321,7 @@ class NewPasswordInternal extends BaseInputClass$4 {
 
     this.passwordInput = this.querySelector('[data-id="password"]');
     this.confirmInput = this.querySelector('[data-id="confirm"]');
+    this.policyPanel = this.querySelector('descope-policy-validation');
 
     this.inputs = [this.passwordInput, this.confirmInput];
 
@@ -6064,6 +6332,23 @@ class NewPasswordInternal extends BaseInputClass$4 {
     [...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach((attr) => {
       this.attributeChangedCallback(attr, null, this.getAttribute(attr));
     });
+
+    this.passwordInput.addEventListener('input', (e) => {
+      this.policyPanel.setAttribute('value', e.target.value);
+    });
+
+    forwardAttrs(this, this.policyPanel, {
+      includeAttrs: [
+        'policy-label',
+        'available-policies',
+        'active-policies',
+        'data-password-policy-value-minlength',
+      ],
+      mapAttrs: {
+        'policy-label': 'label',
+        'available-policies': 'data',
+      },
+    });
   }
 
   // the inputs are not required but we still want it to have a required
@@ -6123,6 +6408,14 @@ class NewPasswordInternal extends BaseInputClass$4 {
     value === null ? ele?.removeAttribute(name) : ele?.setAttribute(name, value);
   }
 
+  hidePolicy() {
+    this.policyPanel.classList.add('hidden');
+  }
+
+  showPolicy() {
+    this.policyPanel.classList.remove('hidden');
+  }
+
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -6144,11 +6437,14 @@ class NewPasswordInternal extends BaseInputClass$4 {
           newValue
         );
       }
+      if (attrName === 'has-validation') {
+        newValue === 'true' ? this.showPolicy() : this.hidePolicy();
+      }
     }
   }
 }
 
-customElements.define(componentName$p, NewPasswordInternal);
+customElements.define(componentName$q, NewPasswordInternal);
 
 customElements.define(componentName$o, NewPasswordClass);
 
@@ -10144,33 +10440,33 @@ const globals = {
   fonts,
   direction,
 };
-const vars$C = getThemeVars(globals);
+const vars$D = getThemeVars(globals);
 
-const globalRefs$k = getThemeRefs(globals);
+const globalRefs$m = getThemeRefs(globals);
 const compVars$5 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$k.colors.primary,
-  secondary: globalRefs$k.colors.secondary,
-  success: globalRefs$k.colors.success,
-  error: globalRefs$k.colors.error,
-  surface: globalRefs$k.colors.surface,
+  primary: globalRefs$m.colors.primary,
+  secondary: globalRefs$m.colors.secondary,
+  success: globalRefs$m.colors.success,
+  error: globalRefs$m.colors.error,
+  surface: globalRefs$m.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$P);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$Q);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$5.fontFamily]: globalRefs$k.fonts.font1.family,
+  [compVars$5.fontFamily]: globalRefs$m.fonts.font1.family,
 
   [compVars$5.cursor]: 'pointer',
   [compVars$5.hostHeight]: '3em',
   [compVars$5.hostWidth]: 'auto',
-  [compVars$5.hostDirection]: globalRefs$k.direction,
+  [compVars$5.hostDirection]: globalRefs$m.direction,
 
-  [compVars$5.borderRadius]: globalRefs$k.radius.sm,
-  [compVars$5.borderWidth]: globalRefs$k.border.xs,
+  [compVars$5.borderRadius]: globalRefs$m.radius.sm,
+  [compVars$5.borderWidth]: globalRefs$m.border.xs,
   [compVars$5.borderStyle]: 'solid',
   [compVars$5.borderColor]: 'transparent',
 
@@ -10213,10 +10509,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$k.colors.surface.light,
-    [helperVars$3.dark]: globalRefs$k.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$k.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$k.colors.surface.main,
+    [helperVars$3.main]: globalRefs$m.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$m.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$m.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$m.colors.surface.main,
   },
 
   variant: {
@@ -10264,7 +10560,7 @@ const button = {
   },
 };
 
-const vars$B = {
+const vars$C = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -10272,26 +10568,28 @@ const vars$B = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$B
+  vars: vars$C
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$j = getThemeRefs(globals);
+const globalRefs$l = getThemeRefs(globals);
 
-const [theme$1, refs, vars$A] = createHelperVars(
+const [theme$1, refs, vars$B] = createHelperVars(
   {
-    labelTextColor: globalRefs$j.colors.surface.dark,
-    valueTextColor: globalRefs$j.colors.surface.contrast,
-    placeholderTextColor: globalRefs$j.colors.surface.dark,
+    labelTextColor: globalRefs$l.colors.surface.dark,
+    labelFontSize: globalRefs$l.typography.body2.size,
+    valueTextColor: globalRefs$l.colors.surface.contrast,
+    placeholderTextColor: globalRefs$l.colors.surface.dark,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$j.colors.error.main,
-    helperTextColor: globalRefs$j.colors.surface.dark,
+    helperTextColor: globalRefs$l.colors.surface.dark,
+    errorMessageTextColor: globalRefs$l.colors.error.main,
+    successMessageTextColor: globalRefs$l.colors.success.main,
 
-    borderWidth: globalRefs$j.border.xs,
-    borderRadius: globalRefs$j.radius.xs,
+    borderWidth: globalRefs$l.border.xs,
+    borderRadius: globalRefs$l.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$j.border.sm,
+    outlineWidth: globalRefs$l.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
@@ -10302,11 +10600,11 @@ const [theme$1, refs, vars$A] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$j.colors.surface.main,
+    backgroundColor: globalRefs$l.colors.surface.main,
 
-    fontFamily: globalRefs$j.fonts.font1.family,
+    fontFamily: globalRefs$l.fonts.font1.family,
 
-    direction: globalRefs$j.direction,
+    direction: globalRefs$l.direction,
 
     overlayOpacity: '0.3',
 
@@ -10322,28 +10620,28 @@ const [theme$1, refs, vars$A] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$j.colors.surface.light,
+      outlineColor: globalRefs$l.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$j.colors.error.main,
+        outlineColor: globalRefs$l.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$j.border.xs,
-      borderColor: globalRefs$j.colors.surface.light,
+      outlineWidth: globalRefs$l.border.xs,
+      borderColor: globalRefs$l.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$j.colors.error.main,
+        borderColor: globalRefs$l.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$j.colors.surface.light,
-      borderColor: globalRefs$j.colors.surface.light,
-      valueTextColor: globalRefs$j.colors.surface.light,
-      placeholderTextColor: globalRefs$j.colors.surface.light,
-      helperTextColor: globalRefs$j.colors.surface.light,
-      backgroundColor: globalRefs$j.colors.surface.main,
+      labelTextColor: globalRefs$l.colors.surface.light,
+      borderColor: globalRefs$l.colors.surface.light,
+      valueTextColor: globalRefs$l.colors.surface.light,
+      placeholderTextColor: globalRefs$l.colors.surface.light,
+      helperTextColor: globalRefs$l.colors.surface.light,
+      backgroundColor: globalRefs$l.colors.surface.main,
     },
   },
   componentName
@@ -10353,22 +10651,64 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$A
+  vars: vars$B
 });
 
-const vars$z = TextFieldClass.cssVarList;
+const vars$A = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$A.hostWidth]: refs.width,
+  [vars$A.hostMinWidth]: refs.minWidth,
+  [vars$A.hostDirection]: refs.direction,
+  [vars$A.fontSize]: refs.fontSize,
+  [vars$A.fontFamily]: refs.fontFamily,
+  [vars$A.labelTextColor]: refs.labelTextColor,
+  [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$A.inputValueTextColor]: refs.valueTextColor,
+  [vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$A.inputBorderWidth]: refs.borderWidth,
+  [vars$A.inputBorderStyle]: refs.borderStyle,
+  [vars$A.inputBorderColor]: refs.borderColor,
+  [vars$A.inputBorderRadius]: refs.borderRadius,
+  [vars$A.inputOutlineWidth]: refs.outlineWidth,
+  [vars$A.inputOutlineStyle]: refs.outlineStyle,
+  [vars$A.inputOutlineColor]: refs.outlineColor,
+  [vars$A.inputOutlineOffset]: refs.outlineOffset,
+  [vars$A.inputBackgroundColor]: refs.backgroundColor,
+  [vars$A.inputHeight]: refs.inputHeight,
+  [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$A.helperTextColor]: refs.helperTextColor,
+  textAlign: {
+    right: { [vars$A.inputTextAlign]: 'right' },
+    left: { [vars$A.inputTextAlign]: 'left' },
+    center: { [vars$A.inputTextAlign]: 'center' },
+  },
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$A
+});
+
+const globalRefs$k = getThemeRefs(globals);
+const vars$z = PasswordClass.cssVarList;
+
+const password = {
   [vars$z.hostWidth]: refs.width,
-  [vars$z.hostMinWidth]: refs.minWidth,
   [vars$z.hostDirection]: refs.direction,
   [vars$z.fontSize]: refs.fontSize,
   [vars$z.fontFamily]: refs.fontFamily,
   [vars$z.labelTextColor]: refs.labelTextColor,
-  [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$z.inputHeight]: refs.inputHeight,
+  [vars$z.inputBackgroundColor]: refs.backgroundColor,
+  [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$z.inputValueTextColor]: refs.valueTextColor,
-  [vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$z.inputBorderWidth]: refs.borderWidth,
   [vars$z.inputBorderStyle]: refs.borderStyle,
   [vars$z.inputBorderColor]: refs.borderColor,
@@ -10377,40 +10717,29 @@ const textField = {
   [vars$z.inputOutlineStyle]: refs.outlineStyle,
   [vars$z.inputOutlineColor]: refs.outlineColor,
   [vars$z.inputOutlineOffset]: refs.outlineOffset,
-  [vars$z.inputBackgroundColor]: refs.backgroundColor,
-  [vars$z.inputHeight]: refs.inputHeight,
-  [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$z.helperTextColor]: refs.helperTextColor,
-  textAlign: {
-    right: { [vars$z.inputTextAlign]: 'right' },
-    left: { [vars$z.inputTextAlign]: 'left' },
-    center: { [vars$z.inputTextAlign]: 'center' },
-  },
+  [vars$z.revealButtonOffset]: globalRefs$k.spacing.md,
+  [vars$z.revealButtonSize]: refs.toggleButtonSize,
+  [vars$z.revealButtonColor]: refs.placeholderTextColor,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$z
 });
 
-const globalRefs$i = getThemeRefs(globals);
-const vars$y = PasswordClass.cssVarList;
+const vars$y = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$y.hostWidth]: refs.width,
+  [vars$y.hostMinWidth]: refs.minWidth,
   [vars$y.hostDirection]: refs.direction,
   [vars$y.fontSize]: refs.fontSize,
   [vars$y.fontFamily]: refs.fontFamily,
   [vars$y.labelTextColor]: refs.labelTextColor,
   [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$y.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$y.inputHeight]: refs.inputHeight,
-  [vars$y.inputBackgroundColor]: refs.backgroundColor,
-  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$y.inputValueTextColor]: refs.valueTextColor,
-  [vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$y.inputBorderWidth]: refs.borderWidth,
   [vars$y.inputBorderStyle]: refs.borderStyle,
   [vars$y.inputBorderColor]: refs.borderColor,
@@ -10419,20 +10748,21 @@ const password = {
   [vars$y.inputOutlineStyle]: refs.outlineStyle,
   [vars$y.inputOutlineColor]: refs.outlineColor,
   [vars$y.inputOutlineOffset]: refs.outlineOffset,
-  [vars$y.revealButtonOffset]: globalRefs$i.spacing.md,
-  [vars$y.revealButtonSize]: refs.toggleButtonSize,
-  [vars$y.revealButtonColor]: refs.placeholderTextColor,
+  [vars$y.inputBackgroundColor]: refs.backgroundColor,
+  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$y.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$y.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$y
 });
 
-const vars$x = NumberFieldClass.cssVarList;
+const vars$x = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$x.hostWidth]: refs.width,
   [vars$x.hostMinWidth]: refs.minWidth,
   [vars$x.hostDirection]: refs.direction,
@@ -10441,6 +10771,7 @@ const numberField = {
   [vars$x.labelTextColor]: refs.labelTextColor,
   [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$x.inputValueTextColor]: refs.valueTextColor,
+  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$x.inputBorderWidth]: refs.borderWidth,
   [vars$x.inputBorderStyle]: refs.borderStyle,
@@ -10451,200 +10782,167 @@ const numberField = {
   [vars$x.inputOutlineColor]: refs.outlineColor,
   [vars$x.inputOutlineOffset]: refs.outlineOffset,
   [vars$x.inputBackgroundColor]: refs.backgroundColor,
-  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$x.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$x.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$x
 });
 
-const vars$w = EmailFieldClass.cssVarList;
+const vars$w = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [vars$w.hostWidth]: refs.width,
   [vars$w.hostMinWidth]: refs.minWidth,
   [vars$w.hostDirection]: refs.direction,
   [vars$w.fontSize]: refs.fontSize,
   [vars$w.fontFamily]: refs.fontFamily,
   [vars$w.labelTextColor]: refs.labelTextColor,
+  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$w.inputBackgroundColor]: refs.backgroundColor,
   [vars$w.inputValueTextColor]: refs.valueTextColor,
-  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$w.inputBorderRadius]: refs.borderRadius,
   [vars$w.inputBorderWidth]: refs.borderWidth,
   [vars$w.inputBorderStyle]: refs.borderStyle,
   [vars$w.inputBorderColor]: refs.borderColor,
-  [vars$w.inputBorderRadius]: refs.borderRadius,
   [vars$w.inputOutlineWidth]: refs.outlineWidth,
   [vars$w.inputOutlineStyle]: refs.outlineStyle,
   [vars$w.inputOutlineColor]: refs.outlineColor,
   [vars$w.inputOutlineOffset]: refs.outlineOffset,
-  [vars$w.inputBackgroundColor]: refs.backgroundColor,
-  [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$w.inputHeight]: refs.inputHeight,
+  [vars$w.inputResizeType]: 'vertical',
+  [vars$w.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$w.inputTextAlign]: 'right' },
+    left: { [vars$w.inputTextAlign]: 'left' },
+    center: { [vars$w.inputTextAlign]: 'center' },
+  },
+
+  _readonly: {
+    [vars$w.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$w
 });
 
-const vars$v = TextAreaClass.cssVarList;
+const vars$v = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [vars$v.hostWidth]: refs.width,
-  [vars$v.hostMinWidth]: refs.minWidth,
   [vars$v.hostDirection]: refs.direction,
   [vars$v.fontSize]: refs.fontSize,
   [vars$v.fontFamily]: refs.fontFamily,
   [vars$v.labelTextColor]: refs.labelTextColor,
   [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$v.labelFontWeight]: '400',
+  [vars$v.labelLineHeight]: checkboxSize,
+  [vars$v.labelSpacing]: '1em',
   [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$v.inputBackgroundColor]: refs.backgroundColor,
-  [vars$v.inputValueTextColor]: refs.valueTextColor,
-  [vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$v.inputOutlineWidth]: refs.outlineWidth,
+  [vars$v.inputOutlineOffset]: refs.outlineOffset,
+  [vars$v.inputOutlineColor]: refs.outlineColor,
+  [vars$v.inputOutlineStyle]: refs.outlineStyle,
   [vars$v.inputBorderRadius]: refs.borderRadius,
+  [vars$v.inputBorderColor]: refs.borderColor,
   [vars$v.inputBorderWidth]: refs.borderWidth,
   [vars$v.inputBorderStyle]: refs.borderStyle,
-  [vars$v.inputBorderColor]: refs.borderColor,
-  [vars$v.inputOutlineWidth]: refs.outlineWidth,
-  [vars$v.inputOutlineStyle]: refs.outlineStyle,
-  [vars$v.inputOutlineColor]: refs.outlineColor,
-  [vars$v.inputOutlineOffset]: refs.outlineOffset,
-  [vars$v.inputResizeType]: 'vertical',
-  [vars$v.inputMinHeight]: '5em',
-  textAlign: {
-    right: { [vars$v.inputTextAlign]: 'right' },
-    left: { [vars$v.inputTextAlign]: 'left' },
-    center: { [vars$v.inputTextAlign]: 'center' },
+  [vars$v.inputBackgroundColor]: refs.backgroundColor,
+  [vars$v.inputSize]: checkboxSize,
+
+  _checked: {
+    [vars$v.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$v.inputResizeType]: 'none',
+  _disabled: {
+    [vars$v.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$v
 });
 
-const vars$u = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$j = getThemeRefs(globals);
+const vars$u = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [vars$u.hostWidth]: refs.width,
   [vars$u.hostDirection]: refs.direction,
   [vars$u.fontSize]: refs.fontSize,
   [vars$u.fontFamily]: refs.fontFamily,
-  [vars$u.labelTextColor]: refs.labelTextColor,
-  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$u.labelFontWeight]: '400',
-  [vars$u.labelLineHeight]: checkboxSize,
-  [vars$u.labelSpacing]: '1em',
-  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$u.inputOutlineWidth]: refs.outlineWidth,
   [vars$u.inputOutlineOffset]: refs.outlineOffset,
   [vars$u.inputOutlineColor]: refs.outlineColor,
   [vars$u.inputOutlineStyle]: refs.outlineStyle,
-  [vars$u.inputBorderRadius]: refs.borderRadius,
-  [vars$u.inputBorderColor]: refs.borderColor,
-  [vars$u.inputBorderWidth]: refs.borderWidth,
-  [vars$u.inputBorderStyle]: refs.borderStyle,
-  [vars$u.inputBackgroundColor]: refs.backgroundColor,
-  [vars$u.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars$u.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$u.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$u
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
 
-const globalRefs$h = getThemeRefs(globals);
-const vars$t = SwitchToggleClass.cssVarList;
+  [vars$u.trackBorderStyle]: refs.borderStyle,
+  [vars$u.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$u.trackBorderColor]: refs.borderColor,
+  [vars$u.trackBackgroundColor]: refs.backgroundColor,
+  [vars$u.trackBorderRadius]: globalRefs$j.radius.md,
+  [vars$u.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$u.trackHeight]: checkboxHeight,
+
+  [vars$u.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$u.knobRadius]: '50%',
+  [vars$u.knobTopOffset]: '1px',
+  [vars$u.knobLeftOffset]: knobMargin,
+  [vars$u.knobColor]: refs.labelTextColor,
+  [vars$u.knobTransitionDuration]: '0.3s',
 
-const switchToggle = {
-  [vars$t.hostWidth]: refs.width,
-  [vars$t.hostDirection]: refs.direction,
-  [vars$t.fontSize]: refs.fontSize,
-  [vars$t.fontFamily]: refs.fontFamily,
-
-  [vars$t.inputOutlineWidth]: refs.outlineWidth,
-  [vars$t.inputOutlineOffset]: refs.outlineOffset,
-  [vars$t.inputOutlineColor]: refs.outlineColor,
-  [vars$t.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$t.trackBorderStyle]: refs.borderStyle,
-  [vars$t.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$t.trackBorderColor]: refs.borderColor,
-  [vars$t.trackBackgroundColor]: refs.backgroundColor,
-  [vars$t.trackBorderRadius]: globalRefs$h.radius.md,
-  [vars$t.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$t.trackHeight]: checkboxHeight,
-
-  [vars$t.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$t.knobRadius]: '50%',
-  [vars$t.knobTopOffset]: '1px',
-  [vars$t.knobLeftOffset]: knobMargin,
-  [vars$t.knobColor]: refs.labelTextColor,
-  [vars$t.knobTransitionDuration]: '0.3s',
-
-  [vars$t.labelTextColor]: refs.labelTextColor,
-  [vars$t.labelFontWeight]: '400',
-  [vars$t.labelLineHeight]: '1.35em',
-  [vars$t.labelSpacing]: '1em',
-  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$u.labelTextColor]: refs.labelTextColor,
+  [vars$u.labelFontWeight]: '400',
+  [vars$u.labelLineHeight]: '1.35em',
+  [vars$u.labelSpacing]: '1em',
+  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$t.trackBorderColor]: refs.borderColor,
-    [vars$t.knobLeftOffset]: `calc(100% - var(${vars$t.knobSize}) - ${knobMargin})`,
-    [vars$t.knobColor]: refs.valueTextColor,
-    [vars$t.knobTextColor]: refs.valueTextColor,
+    [vars$u.trackBorderColor]: refs.borderColor,
+    [vars$u.knobLeftOffset]: `calc(100% - var(${vars$u.knobSize}) - ${knobMargin})`,
+    [vars$u.knobColor]: refs.valueTextColor,
+    [vars$u.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$t.knobColor]: globalRefs$h.colors.surface.light,
-    [vars$t.trackBorderColor]: globalRefs$h.colors.surface.light,
-    [vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
-    [vars$t.labelTextColor]: refs.labelTextColor,
+    [vars$u.knobColor]: globalRefs$j.colors.surface.light,
+    [vars$u.trackBorderColor]: globalRefs$j.colors.surface.light,
+    [vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
+    [vars$u.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$t.knobColor]: globalRefs$h.colors.surface.light,
-      [vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
+      [vars$u.knobColor]: globalRefs$j.colors.surface.light,
+      [vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$t.trackBorderColor]: globalRefs$h.colors.error.main,
-    [vars$t.knobColor]: globalRefs$h.colors.error.main,
+    [vars$u.trackBorderColor]: globalRefs$j.colors.error.main,
+    [vars$u.knobColor]: globalRefs$j.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$t
+  vars: vars$u
 });
 
-const globalRefs$g = getThemeRefs(globals);
+const globalRefs$i = getThemeRefs(globals);
 
 const compVars$4 = ContainerClass.cssVarList;
 
@@ -10666,7 +10964,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$J
+  componentName$K
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -10676,10 +10974,10 @@ const container = {
 
   [compVars$4.hostWidth]: '100%',
   [compVars$4.boxShadow]: 'none',
-  [compVars$4.backgroundColor]: globalRefs$g.colors.surface.main,
-  [compVars$4.color]: globalRefs$g.colors.surface.contrast,
+  [compVars$4.backgroundColor]: globalRefs$i.colors.surface.main,
+  [compVars$4.color]: globalRefs$i.colors.surface.contrast,
   [compVars$4.borderRadius]: '0px',
-  [compVars$4.hostDirection]: globalRefs$g.direction,
+  [compVars$4.hostDirection]: globalRefs$i.direction,
 
   verticalPadding: {
     sm: { [compVars$4.verticalPadding]: '5px' },
@@ -10725,34 +11023,34 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.md} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.md} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$4.boxShadow]: `${globalRefs$g.shadow.wide['2xl']} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$4.borderRadius]: globalRefs$g.radius.sm },
-    md: { [compVars$4.borderRadius]: globalRefs$g.radius.md },
-    lg: { [compVars$4.borderRadius]: globalRefs$g.radius.lg },
-    xl: { [compVars$4.borderRadius]: globalRefs$g.radius.xl },
-    '2xl': { [compVars$4.borderRadius]: globalRefs$g.radius['2xl'] },
-    '3xl': { [compVars$4.borderRadius]: globalRefs$g.radius['3xl'] },
+    sm: { [compVars$4.borderRadius]: globalRefs$i.radius.sm },
+    md: { [compVars$4.borderRadius]: globalRefs$i.radius.md },
+    lg: { [compVars$4.borderRadius]: globalRefs$i.radius.lg },
+    xl: { [compVars$4.borderRadius]: globalRefs$i.radius.xl },
+    '2xl': { [compVars$4.borderRadius]: globalRefs$i.radius['2xl'] },
+    '3xl': { [compVars$4.borderRadius]: globalRefs$i.radius['3xl'] },
   },
 };
 
-const vars$s = {
+const vars$t = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -10760,166 +11058,166 @@ const vars$s = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$s
+  vars: vars$t
 });
 
-const vars$r = LogoClass.cssVarList;
+const vars$s = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$r
+  vars: vars$s
 });
 
-const vars$q = TotpImageClass.cssVarList;
+const vars$r = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$q
+  vars: vars$r
 });
 
-const vars$p = NotpImageClass.cssVarList;
+const vars$q = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$p
+  vars: vars$q
 });
 
-const globalRefs$f = getThemeRefs(globals);
-const vars$o = TextClass.cssVarList;
+const globalRefs$h = getThemeRefs(globals);
+const vars$p = TextClass.cssVarList;
 
 const text = {
-  [vars$o.hostDirection]: globalRefs$f.direction,
-  [vars$o.textLineHeight]: '1.35em',
-  [vars$o.textAlign]: 'left',
-  [vars$o.textColor]: globalRefs$f.colors.surface.dark,
+  [vars$p.hostDirection]: globalRefs$h.direction,
+  [vars$p.textLineHeight]: '1.35em',
+  [vars$p.textAlign]: 'left',
+  [vars$p.textColor]: globalRefs$h.colors.surface.dark,
   variant: {
     h1: {
-      [vars$o.fontSize]: globalRefs$f.typography.h1.size,
-      [vars$o.fontWeight]: globalRefs$f.typography.h1.weight,
-      [vars$o.fontFamily]: globalRefs$f.typography.h1.font,
+      [vars$p.fontSize]: globalRefs$h.typography.h1.size,
+      [vars$p.fontWeight]: globalRefs$h.typography.h1.weight,
+      [vars$p.fontFamily]: globalRefs$h.typography.h1.font,
     },
     h2: {
-      [vars$o.fontSize]: globalRefs$f.typography.h2.size,
-      [vars$o.fontWeight]: globalRefs$f.typography.h2.weight,
-      [vars$o.fontFamily]: globalRefs$f.typography.h2.font,
+      [vars$p.fontSize]: globalRefs$h.typography.h2.size,
+      [vars$p.fontWeight]: globalRefs$h.typography.h2.weight,
+      [vars$p.fontFamily]: globalRefs$h.typography.h2.font,
     },
     h3: {
-      [vars$o.fontSize]: globalRefs$f.typography.h3.size,
-      [vars$o.fontWeight]: globalRefs$f.typography.h3.weight,
-      [vars$o.fontFamily]: globalRefs$f.typography.h3.font,
+      [vars$p.fontSize]: globalRefs$h.typography.h3.size,
+      [vars$p.fontWeight]: globalRefs$h.typography.h3.weight,
+      [vars$p.fontFamily]: globalRefs$h.typography.h3.font,
     },
     subtitle1: {
-      [vars$o.fontSize]: globalRefs$f.typography.subtitle1.size,
-      [vars$o.fontWeight]: globalRefs$f.typography.subtitle1.weight,
-      [vars$o.fontFamily]: globalRefs$f.typography.subtitle1.font,
+      [vars$p.fontSize]: globalRefs$h.typography.subtitle1.size,
+      [vars$p.fontWeight]: globalRefs$h.typography.subtitle1.weight,
+      [vars$p.fontFamily]: globalRefs$h.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$o.fontSize]: globalRefs$f.typography.subtitle2.size,
-      [vars$o.fontWeight]: globalRefs$f.typography.subtitle2.weight,
-      [vars$o.fontFamily]: globalRefs$f.typography.subtitle2.font,
+      [vars$p.fontSize]: globalRefs$h.typography.subtitle2.size,
+      [vars$p.fontWeight]: globalRefs$h.typography.subtitle2.weight,
+      [vars$p.fontFamily]: globalRefs$h.typography.subtitle2.font,
     },
     body1: {
-      [vars$o.fontSize]: globalRefs$f.typography.body1.size,
-      [vars$o.fontWeight]: globalRefs$f.typography.body1.weight,
-      [vars$o.fontFamily]: globalRefs$f.typography.body1.font,
+      [vars$p.fontSize]: globalRefs$h.typography.body1.size,
+      [vars$p.fontWeight]: globalRefs$h.typography.body1.weight,
+      [vars$p.fontFamily]: globalRefs$h.typography.body1.font,
     },
     body2: {
-      [vars$o.fontSize]: globalRefs$f.typography.body2.size,
-      [vars$o.fontWeight]: globalRefs$f.typography.body2.weight,
-      [vars$o.fontFamily]: globalRefs$f.typography.body2.font,
+      [vars$p.fontSize]: globalRefs$h.typography.body2.size,
+      [vars$p.fontWeight]: globalRefs$h.typography.body2.weight,
+      [vars$p.fontFamily]: globalRefs$h.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$o.textColor]: globalRefs$f.colors.surface.contrast,
+      [vars$p.textColor]: globalRefs$h.colors.surface.contrast,
     },
     secondary: {
-      [vars$o.textColor]: globalRefs$f.colors.surface.dark,
+      [vars$p.textColor]: globalRefs$h.colors.surface.dark,
     },
     error: {
-      [vars$o.textColor]: globalRefs$f.colors.error.main,
+      [vars$p.textColor]: globalRefs$h.colors.error.main,
     },
     success: {
-      [vars$o.textColor]: globalRefs$f.colors.success.main,
+      [vars$p.textColor]: globalRefs$h.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$o.textAlign]: 'right' },
-    left: { [vars$o.textAlign]: 'left' },
-    center: { [vars$o.textAlign]: 'center' },
+    right: { [vars$p.textAlign]: 'right' },
+    left: { [vars$p.textAlign]: 'left' },
+    center: { [vars$p.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$o.hostWidth]: '100%',
+    [vars$p.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$o.fontStyle]: 'italic',
+    [vars$p.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$o.textTransform]: 'uppercase',
+    [vars$p.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$o.textTransform]: 'lowercase',
+    [vars$p.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$o
+  vars: vars$p
 });
 
-const globalRefs$e = getThemeRefs(globals);
-const vars$n = LinkClass.cssVarList;
+const globalRefs$g = getThemeRefs(globals);
+const vars$o = LinkClass.cssVarList;
 
 const link = {
-  [vars$n.hostDirection]: globalRefs$e.direction,
-  [vars$n.cursor]: 'pointer',
+  [vars$o.hostDirection]: globalRefs$g.direction,
+  [vars$o.cursor]: 'pointer',
 
-  [vars$n.textColor]: globalRefs$e.colors.primary.main,
+  [vars$o.textColor]: globalRefs$g.colors.primary.main,
 
   textAlign: {
-    right: { [vars$n.textAlign]: 'right' },
-    left: { [vars$n.textAlign]: 'left' },
-    center: { [vars$n.textAlign]: 'center' },
+    right: { [vars$o.textAlign]: 'right' },
+    left: { [vars$o.textAlign]: 'left' },
+    center: { [vars$o.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$n.hostWidth]: '100%',
+    [vars$o.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$n.textColor]: globalRefs$e.colors.primary.main,
+      [vars$o.textColor]: globalRefs$g.colors.primary.main,
     },
     secondary: {
-      [vars$n.textColor]: globalRefs$e.colors.secondary.main,
+      [vars$o.textColor]: globalRefs$g.colors.secondary.main,
     },
     error: {
-      [vars$n.textColor]: globalRefs$e.colors.error.main,
+      [vars$o.textColor]: globalRefs$g.colors.error.main,
     },
     success: {
-      [vars$n.textColor]: globalRefs$e.colors.success.main,
+      [vars$o.textColor]: globalRefs$g.colors.success.main,
     },
   },
 };
@@ -10927,10 +11225,10 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$n
+  vars: vars$o
 });
 
-const globalRefs$d = getThemeRefs(globals);
+const globalRefs$f = getThemeRefs(globals);
 const compVars$3 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -10938,18 +11236,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$H
+  componentName$I
 );
 
 const divider = {
   ...helperTheme$1,
 
-  [compVars$3.hostDirection]: globalRefs$d.direction,
+  [compVars$3.hostDirection]: globalRefs$f.direction,
   [compVars$3.alignItems]: 'center',
   [compVars$3.flexDirection]: 'row',
   [compVars$3.alignSelf]: 'stretch',
   [compVars$3.hostWidth]: '100%',
-  [compVars$3.stripeColor]: globalRefs$d.colors.surface.light,
+  [compVars$3.stripeColor]: globalRefs$f.colors.surface.light,
   [compVars$3.stripeColorOpacity]: '0.5',
   [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$3.labelTextWidth]: 'fit-content',
@@ -10969,7 +11267,7 @@ const divider = {
   },
 };
 
-const vars$m = {
+const vars$n = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -10977,111 +11275,111 @@ const vars$m = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$m
+  vars: vars$n
 });
 
-const vars$l = PasscodeClass.cssVarList;
+const vars$m = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$l.hostDirection]: refs.direction,
-  [vars$l.fontFamily]: refs.fontFamily,
-  [vars$l.fontSize]: refs.fontSize,
-  [vars$l.labelTextColor]: refs.labelTextColor,
-  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$l.digitValueTextColor]: refs.valueTextColor,
-  [vars$l.digitPadding]: '0',
-  [vars$l.digitTextAlign]: 'center',
-  [vars$l.digitSpacing]: '4px',
-  [vars$l.hostWidth]: refs.width,
-  [vars$l.digitOutlineColor]: 'transparent',
-  [vars$l.digitOutlineWidth]: refs.outlineWidth,
-  [vars$l.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$l.digitSize]: refs.inputHeight,
+  [vars$m.hostDirection]: refs.direction,
+  [vars$m.fontFamily]: refs.fontFamily,
+  [vars$m.fontSize]: refs.fontSize,
+  [vars$m.labelTextColor]: refs.labelTextColor,
+  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$m.digitValueTextColor]: refs.valueTextColor,
+  [vars$m.digitPadding]: '0',
+  [vars$m.digitTextAlign]: 'center',
+  [vars$m.digitSpacing]: '4px',
+  [vars$m.hostWidth]: refs.width,
+  [vars$m.digitOutlineColor]: 'transparent',
+  [vars$m.digitOutlineWidth]: refs.outlineWidth,
+  [vars$m.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$m.digitSize]: refs.inputHeight,
 
   size: {
-    xs: { [vars$l.spinnerSize]: '15px' },
-    sm: { [vars$l.spinnerSize]: '20px' },
-    md: { [vars$l.spinnerSize]: '20px' },
-    lg: { [vars$l.spinnerSize]: '20px' },
+    xs: { [vars$m.spinnerSize]: '15px' },
+    sm: { [vars$m.spinnerSize]: '20px' },
+    md: { [vars$m.spinnerSize]: '20px' },
+    lg: { [vars$m.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$l.digitCaretTextColor]: 'transparent',
+    [vars$m.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$l.overlayOpacity]: refs.overlayOpacity,
+    [vars$m.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$l
+  vars: vars$m
 });
 
-const globalRefs$c = getThemeRefs(globals);
-const vars$k = LoaderLinearClass.cssVarList;
+const globalRefs$e = getThemeRefs(globals);
+const vars$l = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$k.hostDisplay]: 'inline-block',
-  [vars$k.hostWidth]: '100%',
+  [vars$l.hostDisplay]: 'inline-block',
+  [vars$l.hostWidth]: '100%',
 
-  [vars$k.barColor]: globalRefs$c.colors.surface.contrast,
-  [vars$k.barWidth]: '20%',
+  [vars$l.barColor]: globalRefs$e.colors.surface.contrast,
+  [vars$l.barWidth]: '20%',
 
-  [vars$k.barBackgroundColor]: globalRefs$c.colors.surface.light,
-  [vars$k.barBorderRadius]: '4px',
+  [vars$l.barBackgroundColor]: globalRefs$e.colors.surface.light,
+  [vars$l.barBorderRadius]: '4px',
 
-  [vars$k.animationDuration]: '2s',
-  [vars$k.animationTimingFunction]: 'linear',
-  [vars$k.animationIterationCount]: 'infinite',
-  [vars$k.verticalPadding]: '0.25em',
+  [vars$l.animationDuration]: '2s',
+  [vars$l.animationTimingFunction]: 'linear',
+  [vars$l.animationIterationCount]: 'infinite',
+  [vars$l.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$k.barHeight]: '2px' },
-    sm: { [vars$k.barHeight]: '4px' },
-    md: { [vars$k.barHeight]: '6px' },
-    lg: { [vars$k.barHeight]: '8px' },
+    xs: { [vars$l.barHeight]: '2px' },
+    sm: { [vars$l.barHeight]: '4px' },
+    md: { [vars$l.barHeight]: '6px' },
+    lg: { [vars$l.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$k.barColor]: globalRefs$c.colors.primary.main,
+      [vars$l.barColor]: globalRefs$e.colors.primary.main,
     },
     secondary: {
-      [vars$k.barColor]: globalRefs$c.colors.secondary.main,
+      [vars$l.barColor]: globalRefs$e.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$k.hostDisplay]: 'none',
+    [vars$l.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$k
+  vars: vars$l
 });
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 const compVars$2 = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
-    spinnerColor: globalRefs$b.colors.surface.contrast,
+    spinnerColor: globalRefs$d.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$b.colors.primary.main,
+        spinnerColor: globalRefs$d.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$b.colors.secondary.main,
+        spinnerColor: globalRefs$d.colors.secondary.main,
       },
     },
   },
-  componentName$K
+  componentName$L
 );
 
 const loaderRadial = {
@@ -11110,7 +11408,7 @@ const loaderRadial = {
     [compVars$2.hostDisplay]: 'none',
   },
 };
-const vars$j = {
+const vars$k = {
   ...compVars$2,
   ...helperVars,
 };
@@ -11118,78 +11416,114 @@ const vars$j = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$j
+  vars: vars$k
 });
 
-const globalRefs$a = getThemeRefs(globals);
-const vars$i = ComboBoxClass.cssVarList;
+const globalRefs$c = getThemeRefs(globals);
+const vars$j = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$i.hostWidth]: refs.width,
-  [vars$i.hostDirection]: refs.direction,
-  [vars$i.fontSize]: refs.fontSize,
-  [vars$i.fontFamily]: refs.fontFamily,
-  [vars$i.labelTextColor]: refs.labelTextColor,
-  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$i.inputBorderColor]: refs.borderColor,
-  [vars$i.inputBorderWidth]: refs.borderWidth,
-  [vars$i.inputBorderStyle]: refs.borderStyle,
-  [vars$i.inputBorderRadius]: refs.borderRadius,
-  [vars$i.inputOutlineColor]: refs.outlineColor,
-  [vars$i.inputOutlineOffset]: refs.outlineOffset,
-  [vars$i.inputOutlineWidth]: refs.outlineWidth,
-  [vars$i.inputOutlineStyle]: refs.outlineStyle,
-  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$i.inputValueTextColor]: refs.valueTextColor,
-  [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$i.inputBackgroundColor]: refs.backgroundColor,
-  [vars$i.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$i.inputHeight]: refs.inputHeight,
-  [vars$i.inputDropdownButtonColor]: globalRefs$a.colors.surface.dark,
-  [vars$i.inputDropdownButtonCursor]: 'pointer',
-  [vars$i.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$i.inputDropdownButtonOffset]: globalRefs$a.spacing.xs,
-  [vars$i.overlayItemPaddingInlineStart]: globalRefs$a.spacing.xs,
-  [vars$i.overlayItemPaddingInlineEnd]: globalRefs$a.spacing.lg,
+  [vars$j.hostWidth]: refs.width,
+  [vars$j.hostDirection]: refs.direction,
+  [vars$j.fontSize]: refs.fontSize,
+  [vars$j.fontFamily]: refs.fontFamily,
+  [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.inputHeight]: refs.inputHeight,
+  [vars$j.inputDropdownButtonColor]: globalRefs$c.colors.surface.dark,
+  [vars$j.inputDropdownButtonCursor]: 'pointer',
+  [vars$j.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$j.inputDropdownButtonOffset]: globalRefs$c.spacing.xs,
+  [vars$j.overlayItemPaddingInlineStart]: globalRefs$c.spacing.xs,
+  [vars$j.overlayItemPaddingInlineEnd]: globalRefs$c.spacing.lg,
 
   _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 comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$i
+  vars: vars$j
 });
 
-const vars$h = ImageClass.cssVarList;
+const vars$i = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$h
+  vars: vars$i
 });
 
-const vars$g = PhoneFieldClass.cssVarList;
+const vars$h = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$g.hostWidth]: refs.width,
+  [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.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$h.inputValueTextColor]: refs.valueTextColor,
+  [vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$h.inputBorderStyle]: refs.borderStyle,
+  [vars$h.inputBorderWidth]: refs.borderWidth,
+  [vars$h.inputBorderColor]: refs.borderColor,
+  [vars$h.inputBorderRadius]: refs.borderRadius,
+  [vars$h.inputOutlineStyle]: refs.outlineStyle,
+  [vars$h.inputOutlineWidth]: refs.outlineWidth,
+  [vars$h.inputOutlineColor]: refs.outlineColor,
+  [vars$h.inputOutlineOffset]: refs.outlineOffset,
+  [vars$h.phoneInputWidth]: refs.minWidth,
+  [vars$h.countryCodeInputWidth]: '5em',
+  [vars$h.countryCodeDropdownWidth]: '20em',
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$h
+});
+
+const vars$g = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$g.hostWidth]: '16em',
+  [vars$g.hostMinWidth]: refs.minWidth,
   [vars$g.hostDirection]: refs.direction,
   [vars$g.fontSize]: refs.fontSize,
   [vars$g.fontFamily]: refs.fontFamily,
@@ -11206,181 +11540,148 @@ const phoneField = {
   [vars$g.inputOutlineWidth]: refs.outlineWidth,
   [vars$g.inputOutlineColor]: refs.outlineColor,
   [vars$g.inputOutlineOffset]: refs.outlineOffset,
-  [vars$g.phoneInputWidth]: refs.minWidth,
-  [vars$g.countryCodeInputWidth]: '5em',
-  [vars$g.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$g.hostWidth]: refs.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$g
 });
 
-const vars$f = PhoneFieldInputBoxClass.cssVarList;
+const globalRefs$b = getThemeRefs(globals);
+const vars$f = NewPasswordClass.cssVarList;
 
-const phoneInputBoxField = {
-  [vars$f.hostWidth]: '16em',
+const newPassword = {
+  [vars$f.hostWidth]: refs.width,
   [vars$f.hostMinWidth]: refs.minWidth,
   [vars$f.hostDirection]: refs.direction,
   [vars$f.fontSize]: refs.fontSize,
   [vars$f.fontFamily]: refs.fontFamily,
-  [vars$f.labelTextColor]: refs.labelTextColor,
-  [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$f.spaceBetweenInputs]: '1em',
   [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$f.inputValueTextColor]: refs.valueTextColor,
-  [vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$f.inputBorderStyle]: refs.borderStyle,
-  [vars$f.inputBorderWidth]: refs.borderWidth,
-  [vars$f.inputBorderColor]: refs.borderColor,
-  [vars$f.inputBorderRadius]: refs.borderRadius,
-  [vars$f.inputOutlineStyle]: refs.outlineStyle,
-  [vars$f.inputOutlineWidth]: refs.outlineWidth,
-  [vars$f.inputOutlineColor]: refs.outlineColor,
-  [vars$f.inputOutlineOffset]: refs.outlineOffset,
-  _fullWidth: {
-    [vars$f.hostWidth]: refs.width,
-  },
-};
-
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$f
-});
-
-const vars$e = NewPasswordClass.cssVarList;
-
-const newPassword = {
-  [vars$e.hostWidth]: refs.width,
-  [vars$e.hostMinWidth]: refs.minWidth,
-  [vars$e.hostDirection]: refs.direction,
-  [vars$e.fontSize]: refs.fontSize,
-  [vars$e.fontFamily]: refs.fontFamily,
-  [vars$e.spaceBetweenInputs]: '1em',
-  [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$f.policyPreviewBackgroundColor]: 'none',
+  [vars$f.policyPreviewPadding]: globalRefs$b.spacing.lg,
 
   _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$e.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$f.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$e
+  vars: vars$f
 });
 
-const vars$d = UploadFileClass.cssVarList;
+const vars$e = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$d.hostDirection]: refs.direction,
-  [vars$d.labelTextColor]: refs.labelTextColor,
-  [vars$d.fontFamily]: refs.fontFamily,
+  [vars$e.hostDirection]: refs.direction,
+  [vars$e.labelTextColor]: refs.labelTextColor,
+  [vars$e.fontFamily]: refs.fontFamily,
 
-  [vars$d.iconSize]: '2em',
+  [vars$e.iconSize]: '2em',
 
-  [vars$d.hostPadding]: '0.75em',
-  [vars$d.gap]: '0.5em',
+  [vars$e.hostPadding]: '0.75em',
+  [vars$e.gap]: '0.5em',
 
-  [vars$d.fontSize]: '16px',
-  [vars$d.titleFontWeight]: '500',
-  [vars$d.lineHeight]: '1em',
+  [vars$e.fontSize]: '16px',
+  [vars$e.titleFontWeight]: '500',
+  [vars$e.lineHeight]: '1em',
 
-  [vars$d.borderWidth]: refs.borderWidth,
-  [vars$d.borderColor]: refs.borderColor,
-  [vars$d.borderRadius]: refs.borderRadius,
-  [vars$d.borderStyle]: 'dashed',
+  [vars$e.borderWidth]: refs.borderWidth,
+  [vars$e.borderColor]: refs.borderColor,
+  [vars$e.borderRadius]: refs.borderRadius,
+  [vars$e.borderStyle]: 'dashed',
 
   _required: {
-    [vars$d.requiredIndicator]: refs.requiredIndicator,
+    [vars$e.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$d.hostHeight]: '196px',
-      [vars$d.hostWidth]: '200px',
-      [vars$d.titleFontSize]: '0.875em',
-      [vars$d.descriptionFontSize]: '0.875em',
-      [vars$d.lineHeight]: '1.25em',
+      [vars$e.hostHeight]: '196px',
+      [vars$e.hostWidth]: '200px',
+      [vars$e.titleFontSize]: '0.875em',
+      [vars$e.descriptionFontSize]: '0.875em',
+      [vars$e.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$d.hostHeight]: '216px',
-      [vars$d.hostWidth]: '230px',
-      [vars$d.titleFontSize]: '1em',
-      [vars$d.descriptionFontSize]: '0.875em',
-      [vars$d.lineHeight]: '1.25em',
+      [vars$e.hostHeight]: '216px',
+      [vars$e.hostWidth]: '230px',
+      [vars$e.titleFontSize]: '1em',
+      [vars$e.descriptionFontSize]: '0.875em',
+      [vars$e.lineHeight]: '1.25em',
     },
     md: {
-      [vars$d.hostHeight]: '256px',
-      [vars$d.hostWidth]: '312px',
-      [vars$d.titleFontSize]: '1.125em',
-      [vars$d.descriptionFontSize]: '1em',
-      [vars$d.lineHeight]: '1.5em',
+      [vars$e.hostHeight]: '256px',
+      [vars$e.hostWidth]: '312px',
+      [vars$e.titleFontSize]: '1.125em',
+      [vars$e.descriptionFontSize]: '1em',
+      [vars$e.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$d.hostHeight]: '280px',
-      [vars$d.hostWidth]: '336px',
-      [vars$d.titleFontSize]: '1.125em',
-      [vars$d.descriptionFontSize]: '1.125em',
-      [vars$d.lineHeight]: '1.75em',
+      [vars$e.hostHeight]: '280px',
+      [vars$e.hostWidth]: '336px',
+      [vars$e.titleFontSize]: '1.125em',
+      [vars$e.descriptionFontSize]: '1.125em',
+      [vars$e.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$d.hostWidth]: refs.width,
+    [vars$e.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$d
+  vars: vars$e
 });
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 
-const vars$c = ButtonSelectionGroupItemClass.cssVarList;
+const vars$d = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$c.hostDirection]: 'inherit',
-  [vars$c.backgroundColor]: globalRefs$9.colors.surface.main,
-  [vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
-  [vars$c.borderColor]: globalRefs$9.colors.surface.light,
-  [vars$c.borderStyle]: 'solid',
-  [vars$c.borderRadius]: globalRefs$9.radius.sm,
-  [vars$c.outlineColor]: 'transparent',
-  [vars$c.borderWidth]: globalRefs$9.border.xs,
+  [vars$d.hostDirection]: 'inherit',
+  [vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
+  [vars$d.labelTextColor]: globalRefs$a.colors.surface.contrast,
+  [vars$d.borderColor]: globalRefs$a.colors.surface.light,
+  [vars$d.borderStyle]: 'solid',
+  [vars$d.borderRadius]: globalRefs$a.radius.sm,
+  [vars$d.outlineColor]: 'transparent',
+  [vars$d.borderWidth]: globalRefs$a.border.xs,
 
   _hover: {
-    [vars$c.backgroundColor]: globalRefs$9.colors.surface.highlight,
+    [vars$d.backgroundColor]: globalRefs$a.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$c.outlineColor]: globalRefs$9.colors.surface.light,
+    [vars$d.outlineColor]: globalRefs$a.colors.surface.light,
   },
 
   _selected: {
-    [vars$c.borderColor]: globalRefs$9.colors.surface.contrast,
-    [vars$c.backgroundColor]: globalRefs$9.colors.surface.contrast,
-    [vars$c.labelTextColor]: globalRefs$9.colors.surface.main,
+    [vars$d.borderColor]: globalRefs$a.colors.surface.contrast,
+    [vars$d.backgroundColor]: globalRefs$a.colors.surface.contrast,
+    [vars$d.labelTextColor]: globalRefs$a.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$c
+  vars: vars$d
 });
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 
 const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostDirection]: refs.direction,
@@ -11388,84 +11689,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.itemsSpacing]: globalRefs$8.spacing.sm,
+  [vars.itemsSpacing]: globalRefs$9.spacing.sm,
   [vars.hostWidth]: refs.width,
 });
 
-const vars$b = ButtonSelectionGroupClass.cssVarList;
+const vars$c = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$b),
+  ...createBaseButtonSelectionGroupMappings(vars$c),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$b
+  vars: vars$c
 });
 
-const vars$a = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$b = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$a),
+  ...createBaseButtonSelectionGroupMappings(vars$b),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$a
+  vars: vars$b
 });
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 
 const compVars$1 = ModalClass.cssVarList;
 
 const modal = {
-  [compVars$1.overlayBackgroundColor]: globalRefs$7.colors.surface.main,
-  [compVars$1.overlayShadow]: globalRefs$7.shadow.wide['2xl'],
+  [compVars$1.overlayBackgroundColor]: globalRefs$8.colors.surface.main,
+  [compVars$1.overlayShadow]: globalRefs$8.shadow.wide['2xl'],
   [compVars$1.overlayWidth]: '540px',
 };
 
-const vars$9 = {
+const vars$a = {
   ...compVars$1,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$9
+  vars: vars$a
 });
 
-const globalRefs$6 = getThemeRefs(globals);
-const vars$8 = GridClass.cssVarList;
+const globalRefs$7 = getThemeRefs(globals);
+const vars$9 = GridClass.cssVarList;
 
 const grid = {
-  [vars$8.hostWidth]: '100%',
-  [vars$8.hostHeight]: '100%',
-  [vars$8.hostMinHeight]: '400px',
-  [vars$8.fontWeight]: '400',
-  [vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
+  [vars$9.hostWidth]: '100%',
+  [vars$9.hostHeight]: '100%',
+  [vars$9.hostMinHeight]: '400px',
+  [vars$9.fontWeight]: '400',
+  [vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
 
-  [vars$8.fontSize]: refs.fontSize,
-  [vars$8.fontFamily]: refs.fontFamily,
+  [vars$9.fontSize]: refs.fontSize,
+  [vars$9.fontFamily]: refs.fontFamily,
 
-  [vars$8.sortIndicatorsColor]: globalRefs$6.colors.surface.light,
-  [vars$8.activeSortIndicator]: globalRefs$6.colors.surface.dark,
-  [vars$8.resizeHandleColor]: globalRefs$6.colors.surface.light,
+  [vars$9.sortIndicatorsColor]: globalRefs$7.colors.surface.light,
+  [vars$9.activeSortIndicator]: globalRefs$7.colors.surface.dark,
+  [vars$9.resizeHandleColor]: globalRefs$7.colors.surface.light,
 
-  [vars$8.borderWidth]: refs.borderWidth,
-  [vars$8.borderStyle]: refs.borderStyle,
-  [vars$8.borderRadius]: refs.borderRadius,
-  [vars$8.borderColor]: 'transparent',
+  [vars$9.borderWidth]: refs.borderWidth,
+  [vars$9.borderStyle]: refs.borderStyle,
+  [vars$9.borderRadius]: refs.borderRadius,
+  [vars$9.borderColor]: 'transparent',
 
-  [vars$8.headerRowTextColor]: globalRefs$6.colors.surface.dark,
-  [vars$8.separatorColor]: globalRefs$6.colors.surface.light,
+  [vars$9.headerRowTextColor]: globalRefs$7.colors.surface.dark,
+  [vars$9.separatorColor]: globalRefs$7.colors.surface.light,
 
-  [vars$8.valueTextColor]: globalRefs$6.colors.surface.contrast,
-  [vars$8.selectedBackgroundColor]: globalRefs$6.colors.surface.highlight,
+  [vars$9.valueTextColor]: globalRefs$7.colors.surface.contrast,
+  [vars$9.selectedBackgroundColor]: globalRefs$7.colors.surface.highlight,
 
   _bordered: {
-    [vars$8.borderColor]: refs.borderColor,
+    [vars$9.borderColor]: refs.borderColor,
   },
 };
 
@@ -11473,53 +11774,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$8
+  vars: vars$9
 });
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$7 = NotificationCardClass.cssVarList;
+const globalRefs$6 = getThemeRefs(globals);
+const vars$8 = NotificationCardClass.cssVarList;
 
 const shadowColor = '#00000020';
 
 const notification = {
-  [vars$7.hostMinWidth]: '415px',
-  [vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
-  [vars$7.fontSize]: globalRefs$5.typography.body1.size,
-  [vars$7.backgroundColor]: globalRefs$5.colors.surface.main,
-  [vars$7.textColor]: globalRefs$5.colors.surface.contrast,
-  [vars$7.boxShadow]: `${globalRefs$5.shadow.wide.xl} ${shadowColor}, ${globalRefs$5.shadow.narrow.xl} ${shadowColor}`,
-  [vars$7.verticalPadding]: '0.625em',
-  [vars$7.horizontalPadding]: '1.5em',
-  [vars$7.borderRadius]: globalRefs$5.radius.xs,
+  [vars$8.hostMinWidth]: '415px',
+  [vars$8.fontFamily]: globalRefs$6.fonts.font1.family,
+  [vars$8.fontSize]: globalRefs$6.typography.body1.size,
+  [vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
+  [vars$8.textColor]: globalRefs$6.colors.surface.contrast,
+  [vars$8.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
+  [vars$8.verticalPadding]: '0.625em',
+  [vars$8.horizontalPadding]: '1.5em',
+  [vars$8.borderRadius]: globalRefs$6.radius.xs,
 
   _bordered: {
-    [vars$7.borderWidth]: globalRefs$5.border.sm,
-    [vars$7.borderStyle]: 'solid',
-    [vars$7.borderColor]: 'transparent',
+    [vars$8.borderWidth]: globalRefs$6.border.sm,
+    [vars$8.borderStyle]: 'solid',
+    [vars$8.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$7.fontSize]: '12px' },
-    sm: { [vars$7.fontSize]: '14px' },
-    md: { [vars$7.fontSize]: '16px' },
-    lg: { [vars$7.fontSize]: '18px' },
+    xs: { [vars$8.fontSize]: '12px' },
+    sm: { [vars$8.fontSize]: '14px' },
+    md: { [vars$8.fontSize]: '16px' },
+    lg: { [vars$8.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$7.backgroundColor]: globalRefs$5.colors.primary.main,
-      [vars$7.textColor]: globalRefs$5.colors.primary.contrast,
-      [vars$7.borderColor]: globalRefs$5.colors.primary.light,
+      [vars$8.backgroundColor]: globalRefs$6.colors.primary.main,
+      [vars$8.textColor]: globalRefs$6.colors.primary.contrast,
+      [vars$8.borderColor]: globalRefs$6.colors.primary.light,
     },
     success: {
-      [vars$7.backgroundColor]: globalRefs$5.colors.success.main,
-      [vars$7.textColor]: globalRefs$5.colors.success.contrast,
-      [vars$7.borderColor]: globalRefs$5.colors.success.light,
+      [vars$8.backgroundColor]: globalRefs$6.colors.success.main,
+      [vars$8.textColor]: globalRefs$6.colors.success.contrast,
+      [vars$8.borderColor]: globalRefs$6.colors.success.light,
     },
     error: {
-      [vars$7.backgroundColor]: globalRefs$5.colors.error.main,
-      [vars$7.textColor]: globalRefs$5.colors.error.contrast,
-      [vars$7.borderColor]: globalRefs$5.colors.error.light,
+      [vars$8.backgroundColor]: globalRefs$6.colors.error.main,
+      [vars$8.textColor]: globalRefs$6.colors.error.contrast,
+      [vars$8.borderColor]: globalRefs$6.colors.error.light,
     },
   },
 };
@@ -11527,128 +11828,128 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$7
+  vars: vars$8
 });
 
-const globalRefs$4 = getThemeRefs(globals);
-const vars$6 = MultiSelectComboBoxClass.cssVarList;
+const globalRefs$5 = getThemeRefs(globals);
+const vars$7 = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$6.hostWidth]: refs.width,
-  [vars$6.hostDirection]: refs.direction,
-  [vars$6.fontSize]: refs.fontSize,
-  [vars$6.fontFamily]: refs.fontFamily,
-  [vars$6.labelTextColor]: refs.labelTextColor,
-  [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$6.inputBorderColor]: refs.borderColor,
-  [vars$6.inputBorderWidth]: refs.borderWidth,
-  [vars$6.inputBorderStyle]: refs.borderStyle,
-  [vars$6.inputBorderRadius]: refs.borderRadius,
-  [vars$6.inputOutlineColor]: refs.outlineColor,
-  [vars$6.inputOutlineOffset]: refs.outlineOffset,
-  [vars$6.inputOutlineWidth]: refs.outlineWidth,
-  [vars$6.inputOutlineStyle]: refs.outlineStyle,
-  [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$6.inputValueTextColor]: refs.valueTextColor,
-  [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$6.inputBackgroundColor]: refs.backgroundColor,
-  [vars$6.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$6.inputVerticalPadding]: refs.verticalPadding,
-  [vars$6.inputHeight]: refs.inputHeight,
-  [vars$6.inputDropdownButtonColor]: globalRefs$4.colors.surface.dark,
-  [vars$6.inputDropdownButtonCursor]: 'pointer',
-  [vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$6.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
-  [vars$6.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
-  [vars$6.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
-  [vars$6.chipFontSize]: refs.chipFontSize,
-  [vars$6.chipTextColor]: globalRefs$4.colors.surface.contrast,
-  [vars$6.chipBackgroundColor]: globalRefs$4.colors.surface.light,
+  [vars$7.hostWidth]: refs.width,
+  [vars$7.hostDirection]: refs.direction,
+  [vars$7.fontSize]: refs.fontSize,
+  [vars$7.fontFamily]: refs.fontFamily,
+  [vars$7.labelTextColor]: refs.labelTextColor,
+  [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$7.inputBorderColor]: refs.borderColor,
+  [vars$7.inputBorderWidth]: refs.borderWidth,
+  [vars$7.inputBorderStyle]: refs.borderStyle,
+  [vars$7.inputBorderRadius]: refs.borderRadius,
+  [vars$7.inputOutlineColor]: refs.outlineColor,
+  [vars$7.inputOutlineOffset]: refs.outlineOffset,
+  [vars$7.inputOutlineWidth]: refs.outlineWidth,
+  [vars$7.inputOutlineStyle]: refs.outlineStyle,
+  [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$7.inputValueTextColor]: refs.valueTextColor,
+  [vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$7.inputBackgroundColor]: refs.backgroundColor,
+  [vars$7.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$7.inputVerticalPadding]: refs.verticalPadding,
+  [vars$7.inputHeight]: refs.inputHeight,
+  [vars$7.inputDropdownButtonColor]: globalRefs$5.colors.surface.dark,
+  [vars$7.inputDropdownButtonCursor]: 'pointer',
+  [vars$7.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$7.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
+  [vars$7.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
+  [vars$7.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
+  [vars$7.chipFontSize]: refs.chipFontSize,
+  [vars$7.chipTextColor]: globalRefs$5.colors.surface.contrast,
+  [vars$7.chipBackgroundColor]: globalRefs$5.colors.surface.light,
 
   _readonly: {
-    [vars$6.inputDropdownButtonCursor]: 'default',
+    [vars$7.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$6.overlayFontSize]: refs.fontSize,
-  [vars$6.overlayFontFamily]: refs.fontFamily,
-  [vars$6.overlayCursor]: 'pointer',
-  [vars$6.overlayItemBoxShadow]: 'none',
-  [vars$6.overlayBackground]: refs.backgroundColor,
-  [vars$6.overlayTextColor]: refs.valueTextColor,
+  [vars$7.overlayFontSize]: refs.fontSize,
+  [vars$7.overlayFontFamily]: refs.fontFamily,
+  [vars$7.overlayCursor]: 'pointer',
+  [vars$7.overlayItemBoxShadow]: 'none',
+  [vars$7.overlayBackground]: refs.backgroundColor,
+  [vars$7.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$6.overlay.minHeight]: '400px',
-  [vars$6.overlay.margin]: '0',
+  [vars$7.overlay.minHeight]: '400px',
+  [vars$7.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$6
+  vars: vars$7
 });
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$5 = BadgeClass.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
+const vars$6 = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$5.hostWidth]: 'fit-content',
-  [vars$5.hostDirection]: globalRefs$3.direction,
+  [vars$6.hostWidth]: 'fit-content',
+  [vars$6.hostDirection]: globalRefs$4.direction,
 
-  [vars$5.textAlign]: 'center',
+  [vars$6.textAlign]: 'center',
 
-  [vars$5.fontFamily]: globalRefs$3.fonts.font1.family,
-  [vars$5.fontWeight]: '400',
+  [vars$6.fontFamily]: globalRefs$4.fonts.font1.family,
+  [vars$6.fontWeight]: '400',
 
-  [vars$5.verticalPadding]: '0.25em',
-  [vars$5.horizontalPadding]: '0.5em',
+  [vars$6.verticalPadding]: '0.25em',
+  [vars$6.horizontalPadding]: '0.5em',
 
-  [vars$5.borderWidth]: globalRefs$3.border.xs,
-  [vars$5.borderRadius]: globalRefs$3.radius.xs,
-  [vars$5.borderColor]: 'transparent',
-  [vars$5.borderStyle]: 'solid',
+  [vars$6.borderWidth]: globalRefs$4.border.xs,
+  [vars$6.borderRadius]: globalRefs$4.radius.xs,
+  [vars$6.borderColor]: 'transparent',
+  [vars$6.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$5.hostWidth]: '100%',
+    [vars$6.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$5.fontSize]: '12px' },
-    sm: { [vars$5.fontSize]: '14px' },
-    md: { [vars$5.fontSize]: '16px' },
-    lg: { [vars$5.fontSize]: '18px' },
+    xs: { [vars$6.fontSize]: '12px' },
+    sm: { [vars$6.fontSize]: '14px' },
+    md: { [vars$6.fontSize]: '16px' },
+    lg: { [vars$6.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$5.textColor]: globalRefs$3.colors.surface.dark,
+      [vars$6.textColor]: globalRefs$4.colors.surface.dark,
       _bordered: {
-        [vars$5.borderColor]: globalRefs$3.colors.surface.light,
+        [vars$6.borderColor]: globalRefs$4.colors.surface.light,
       },
     },
     primary: {
-      [vars$5.textColor]: globalRefs$3.colors.primary.main,
+      [vars$6.textColor]: globalRefs$4.colors.primary.main,
       _bordered: {
-        [vars$5.borderColor]: globalRefs$3.colors.primary.light,
+        [vars$6.borderColor]: globalRefs$4.colors.primary.light,
       },
     },
     secondary: {
-      [vars$5.textColor]: globalRefs$3.colors.secondary.main,
+      [vars$6.textColor]: globalRefs$4.colors.secondary.main,
       _bordered: {
-        [vars$5.borderColor]: globalRefs$3.colors.secondary.light,
+        [vars$6.borderColor]: globalRefs$4.colors.secondary.light,
       },
     },
     error: {
-      [vars$5.textColor]: globalRefs$3.colors.error.main,
+      [vars$6.textColor]: globalRefs$4.colors.error.main,
       _bordered: {
-        [vars$5.borderColor]: globalRefs$3.colors.error.light,
+        [vars$6.borderColor]: globalRefs$4.colors.error.light,
       },
     },
     success: {
-      [vars$5.textColor]: globalRefs$3.colors.success.main,
+      [vars$6.textColor]: globalRefs$4.colors.success.main,
       _bordered: {
-        [vars$5.borderColor]: globalRefs$3.colors.success.light,
+        [vars$6.borderColor]: globalRefs$4.colors.success.light,
       },
     },
   },
@@ -11657,19 +11958,19 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$5
+  vars: vars$6
 });
 
-const globalRefs$2 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 const compVars = AvatarClass.cssVarList;
 
 const avatar = {
-  [compVars.hostDirection]: globalRefs$2.direction,
-  [compVars.editableIconColor]: globalRefs$2.colors.surface.dark,
-  [compVars.editableBorderColor]: globalRefs$2.colors.surface.dark,
-  [compVars.editableBackgroundColor]: globalRefs$2.colors.surface.main,
-  [compVars.avatarTextColor]: globalRefs$2.colors.surface.main,
-  [compVars.avatarBackgroundColor]: globalRefs$2.colors.surface.dark,
+  [compVars.hostDirection]: globalRefs$3.direction,
+  [compVars.editableIconColor]: globalRefs$3.colors.surface.dark,
+  [compVars.editableBorderColor]: globalRefs$3.colors.surface.dark,
+  [compVars.editableBackgroundColor]: globalRefs$3.colors.surface.main,
+  [compVars.avatarTextColor]: globalRefs$3.colors.surface.main,
+  [compVars.avatarBackgroundColor]: globalRefs$3.colors.surface.dark,
 
   _editable: {
     [compVars.cursor]: 'pointer',
@@ -11695,79 +11996,107 @@ const avatar = {
   },
 };
 
-const vars$4 = {
+const vars$5 = {
   ...compVars,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$4
+  vars: vars$5
 });
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$2 = getThemeRefs(globals);
 
-const vars$3 = MappingsFieldClass.cssVarList;
+const vars$4 = MappingsFieldClass.cssVarList;
 
 const mappingsField = {
-  [vars$3.hostWidth]: refs.width,
-  [vars$3.hostDirection]: refs.direction,
-  [vars$3.fontSize]: refs.fontSize,
-  [vars$3.fontFamily]: refs.fontFamily,
-  [vars$3.separatorFontSize]: '14px',
-  [vars$3.labelsFontSize]: '14px',
-  [vars$3.labelsLineHeight]: '1',
-  [vars$3.labelsMarginBottom]: '6px',
-  [vars$3.labelTextColor]: refs.labelTextColor,
-  [vars$3.itemMarginBottom]: '1em',
+  [vars$4.hostWidth]: refs.width,
+  [vars$4.hostDirection]: refs.direction,
+  [vars$4.fontSize]: refs.fontSize,
+  [vars$4.fontFamily]: refs.fontFamily,
+  [vars$4.separatorFontSize]: '14px',
+  [vars$4.labelsFontSize]: '14px',
+  [vars$4.labelsLineHeight]: '1',
+  [vars$4.labelsMarginBottom]: '6px',
+  [vars$4.labelTextColor]: refs.labelTextColor,
+  [vars$4.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$3.valueLabelMinWidth]: refs.minWidth,
+  [vars$4.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$3.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$1.border.xs})`,
-  [vars$3.separatorWidth]: '70px',
-  [vars$3.removeButtonWidth]: '60px',
+  [vars$4.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$2.border.xs})`,
+  [vars$4.separatorWidth]: '70px',
+  [vars$4.removeButtonWidth]: '60px',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
-  vars: vars$3
+  vars: vars$4
 });
 
-const globalRefs = getThemeRefs(globals);
-const vars$2 = UserAttributeClass.cssVarList;
+const globalRefs$1 = getThemeRefs(globals);
+const vars$3 = UserAttributeClass.cssVarList;
 
 const userAttribute = {
-  [vars$2.hostDirection]: globalRefs.direction,
-  [vars$2.labelTextWidth]: '150px',
-  [vars$2.valueTextWidth]: '200px',
-  [vars$2.badgeMaxWidth]: '85px',
-  [vars$2.itemsGap]: '16px',
-  [vars$2.hostMinWidth]: '530px',
+  [vars$3.hostDirection]: globalRefs$1.direction,
+  [vars$3.labelTextWidth]: '150px',
+  [vars$3.valueTextWidth]: '200px',
+  [vars$3.badgeMaxWidth]: '85px',
+  [vars$3.itemsGap]: '16px',
+  [vars$3.hostMinWidth]: '530px',
   _fullWidth: {
-    [vars$2.hostWidth]: '100%',
+    [vars$3.hostWidth]: '100%',
   },
 };
 
 var userAttribute$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAttribute,
-  vars: vars$2
+  vars: vars$3
 });
 
-const vars$1 = SamlGroupMappingsClass.cssVarList;
+const vars$2 = SamlGroupMappingsClass.cssVarList;
 
 const samlGroupMappings = {
-  [vars$1.hostWidth]: refs.width,
-  [vars$1.hostDirection]: refs.direction,
-  [vars$1.groupNameInputMarginBottom]: '1em',
+  [vars$2.hostWidth]: refs.width,
+  [vars$2.hostDirection]: refs.direction,
+  [vars$2.groupNameInputMarginBottom]: '1em',
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: samlGroupMappings,
   samlGroupMappings: samlGroupMappings,
+  vars: vars$2
+});
+
+const globalRefs = getThemeRefs(globals);
+const vars$1 = PolicyValidationClass.cssVarList;
+
+const policyValidation = {
+  [vars$1.fontFamily]: refs.fontFamily,
+  [vars$1.fontSize]: refs.labelFontSize,
+  [vars$1.textColor]: refs.labelTextColor,
+  [vars$1.borderWidth]: refs.borderWidth,
+  [vars$1.borderStyle]: refs.borderStyle,
+  [vars$1.borderColor]: refs.borderColor,
+  [vars$1.borderRadius]: globalRefs.radius.sm,
+  [vars$1.backgroundColor]: 'none',
+  [vars$1.padding]: '0px',
+  [vars$1.labelMargin]: globalRefs.spacing.sm,
+  [vars$1.itemsSpacing]: globalRefs.spacing.lg,
+  [vars$1.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars$1.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars$1.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars$1.itemSymbolSuccessColor]: globalRefs.colors.success.main,
+  [vars$1.itemSymbolErrorColor]: globalRefs.colors.error.main,
+};
+
+var policyValidation$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: policyValidation,
   vars: vars$1
 });
 
@@ -11809,6 +12138,7 @@ const components = {
   mappingsField: mappingsField$1,
   userAttribute: userAttribute$1,
   samlGroupMappings: samlGroupMappings$1,
+  policyValidation: policyValidation$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -11821,7 +12151,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$C, components: vars };
+const themeVars = { globals: vars$D, components: vars };
 
 const colors = {
   surface: {
@@ -11867,5 +12197,5 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map