@descope/web-components-ui 1.0.311 → 1.0.313

package/dist/index.esm.js

@@ -18,6 +18,7 @@ import '@vaadin/avatar';
 import '@vaadin/icon';
 import '@vaadin/icons';
 import '@vaadin/custom-field';
+import hljs from 'highlight.js';
 import merge from 'lodash.merge';
 import Color from 'color';
 
@@ -1344,9 +1345,9 @@ const inputEventsDispatchingMixin = (superclass) =>
 
 /* eslint-disable no-use-before-define */
 
-const componentName$T = getComponentName('icon');
+const componentName$U = getComponentName('icon');
 
-class RawIcon extends createBaseClass({ componentName: componentName$T, baseSelector: 'slot' }) {
+class RawIcon extends createBaseClass({ componentName: componentName$U, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -1415,7 +1416,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$S = getComponentName('button');
+const componentName$T = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1521,7 +1522,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$S,
+    componentName: componentName$T,
   })
 );
 
@@ -1558,7 +1559,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$S, ButtonClass);
+customElements.define(componentName$T, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1568,11 +1569,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$R = getComponentName('boolean-field-internal');
+const componentName$S = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$R, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$S, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$8 {
   static get observedAttributes() {
@@ -1648,14 +1649,14 @@ const booleanFieldMixin = (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);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1854,7 +1855,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$Q = getComponentName('checkbox');
+const componentName$R = getComponentName('checkbox');
 
 const {
   host: host$m,
@@ -1960,15 +1961,15 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$Q,
+    componentName: componentName$R,
   })
 );
 
-customElements.define(componentName$R, BooleanInputInternal);
+customElements.define(componentName$S, BooleanInputInternal);
 
-customElements.define(componentName$Q, CheckboxClass);
+customElements.define(componentName$R, CheckboxClass);
 
-const componentName$P = getComponentName('switch-toggle');
+const componentName$Q = getComponentName('switch-toggle');
 
 const {
   host: host$l,
@@ -2100,17 +2101,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$P,
+    componentName: componentName$Q,
   })
 );
 
-customElements.define(componentName$P, SwitchToggleClass);
+customElements.define(componentName$Q, SwitchToggleClass);
 
-const componentName$O = getComponentName('loader-linear');
+const componentName$P = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$P, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$O;
+    return componentName$P;
   }
 
   constructor() {
@@ -2171,11 +2172,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$O, LoaderLinearClass);
+customElements.define(componentName$P, LoaderLinearClass);
 
-const componentName$N = getComponentName('loader-radial');
+const componentName$O = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$N, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2219,11 +2220,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$N, LoaderRadialClass);
+customElements.define(componentName$O, LoaderRadialClass);
 
-const componentName$M = getComponentName('container');
+const componentName$N = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$M, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$N, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2276,11 +2277,11 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$M, ContainerClass);
+customElements.define(componentName$N, ContainerClass);
 
-const componentName$L = getComponentName('text');
+const componentName$M = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$M, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2288,6 +2289,7 @@ class RawText extends createBaseClass({ componentName: componentName$L, baseSele
     <style>
       :host {
         display: inline-block;
+        line-height: 1em;
       }
       :host > slot {
         width: 100%;
@@ -2336,8 +2338,8 @@ const TextClass = compose(
   componentNameValidationMixin
 )(RawText);
 
-const componentName$K = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > div' }) {
+const componentName$L = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2436,9 +2438,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$L, TextClass);
+customElements.define(componentName$M, TextClass);
 
-customElements.define(componentName$K, DividerClass);
+customElements.define(componentName$L, DividerClass);
 
 const {
   host: host$i,
@@ -2535,7 +2537,7 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$J = getComponentName('email-field');
+const componentName$K = getComponentName('email-field');
 
 const customMixin$8 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -2570,15 +2572,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$J,
+    componentName: componentName$K,
   })
 );
 
-customElements.define(componentName$J, EmailFieldClass);
+customElements.define(componentName$K, EmailFieldClass);
 
-const componentName$I = getComponentName('link');
+const componentName$J = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$I, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$J, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2586,6 +2588,7 @@ class RawLink extends createBaseClass({ componentName: componentName$I, baseSele
 		<style>
 		:host {
 			display: inline-block;
+      line-height: 1em;
 		}
 		:host a {
 			display: inline;
@@ -2643,7 +2646,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$I, LinkClass);
+customElements.define(componentName$J, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2695,37 +2698,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$H = getComponentName('logo');
+const componentName$I = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$H,
+  componentName: componentName$I,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$H, LogoClass);
+customElements.define(componentName$I, LogoClass);
 
-const componentName$G = getComponentName('totp-image');
+const componentName$H = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$G,
+  componentName: componentName$H,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$G, TotpImageClass);
+customElements.define(componentName$H, TotpImageClass);
 
-const componentName$F = getComponentName('notp-image');
+const componentName$G = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$F,
+  componentName: componentName$G,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$F, NotpImageClass);
+customElements.define(componentName$G, NotpImageClass);
 
-const componentName$E = getComponentName('number-field');
+const componentName$F = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2751,11 +2754,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
-customElements.define(componentName$E, NumberFieldClass);
+customElements.define(componentName$F, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2773,13 +2776,13 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$D = getComponentName('passcode-internal');
+const componentName$E = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -3005,7 +3008,7 @@ class PasscodeInternal extends BaseInputClass$7 {
   }
 }
 
-const componentName$C = getComponentName('text-field');
+const componentName$D = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -3080,11 +3083,11 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$C,
+    componentName: componentName$D,
   })
 );
 
-const componentName$B = getComponentName('passcode');
+const componentName$C = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -3103,17 +3106,17 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$D}
+      <${componentName$E}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$D}>
+      ><slot></slot></${componentName$E}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$D);
+      this.inputElement = this.shadowRoot.querySelector(componentName$E);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -3260,15 +3263,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$B,
+    componentName: componentName$C,
   })
 );
 
-customElements.define(componentName$C, TextFieldClass);
+customElements.define(componentName$D, TextFieldClass);
 
-customElements.define(componentName$D, PasscodeInternal);
+customElements.define(componentName$E, PasscodeInternal);
 
-customElements.define(componentName$B, PasscodeClass);
+customElements.define(componentName$C, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -3304,7 +3307,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$A = getComponentName('password');
+const componentName$B = getComponentName('password');
 
 const {
   host: host$f,
@@ -3433,11 +3436,11 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
 
-customElements.define(componentName$A, PasswordClass);
+customElements.define(componentName$B, PasswordClass);
 
 const textRuleSet = {
   components: {
@@ -3453,9 +3456,9 @@ const textRuleSet = {
   },
 };
 
-const componentName$z = getComponentName('enriched-text');
+const componentName$A = getComponentName('enriched-text');
 
-let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
+let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   constructor() {
@@ -3465,6 +3468,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
     <style>
       :host {
         display: inline-block;
+        line-height: 1em;
       }
       :host > slot {
         width: 100%;
@@ -3615,9 +3619,9 @@ const EnrichedTextClass = compose(
   componentNameValidationMixin
 )(EnrichedText$2);
 
-customElements.define(componentName$z, EnrichedTextClass);
+customElements.define(componentName$A, EnrichedTextClass);
 
-const componentName$y = getComponentName('text-area');
+const componentName$z = getComponentName('text-area');
 
 const {
   host: host$e,
@@ -3693,17 +3697,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
-customElements.define(componentName$y, TextAreaClass);
+customElements.define(componentName$z, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$x = getComponentName('image');
+const componentName$y = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$x, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$y, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3743,9 +3747,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$x, ImageClass);
+customElements.define(componentName$y, ImageClass);
 
-const componentName$w = getComponentName('combo-box');
+const componentName$x = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -4128,12 +4132,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$w,
+    componentName: componentName$x,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$w, ComboBoxClass);
+customElements.define(componentName$x, ComboBoxClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -5376,7 +5380,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$v = getComponentName('phone-field-internal');
+const componentName$w = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5388,7 +5392,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -5560,12 +5564,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   }
 };
 
-customElements.define(componentName$v, PhoneFieldInternal$1);
+customElements.define(componentName$w, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$u = getComponentName('phone-field');
+const componentName$v = getComponentName('phone-field');
 
 const customMixin$5 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -5579,15 +5583,15 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$v}
+				<${componentName$w}
 					tabindex="-1"
 					slot="input"
-				></${componentName$v}>
+				></${componentName$w}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$v);
+      this.inputElement = this.shadowRoot.querySelector(componentName$w);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5783,17 +5787,17 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$u,
+    componentName: componentName$v,
   })
 );
 
-customElements.define(componentName$u, PhoneFieldClass);
+customElements.define(componentName$v, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$t = getComponentName('phone-field-internal-input-box');
+const componentName$u = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -5809,7 +5813,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -5948,11 +5952,11 @@ class PhoneFieldInternal extends BaseInputClass$5 {
   }
 }
 
-customElements.define(componentName$t, PhoneFieldInternal);
+customElements.define(componentName$u, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$s = getComponentName('phone-input-box-field');
+const componentName$t = getComponentName('phone-input-box-field');
 
 const customMixin$4 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -5966,15 +5970,15 @@ const customMixin$4 = (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: [
@@ -6107,26 +6111,26 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$s,
+    componentName: componentName$t,
   })
 );
 
-customElements.define(componentName$s, PhoneFieldInputBoxClass);
+customElements.define(componentName$t, PhoneFieldInputBoxClass);
 
-const componentName$r = getComponentName('new-password-internal');
+const componentName$s = 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$q = getComponentName('policy-validation');
+const componentName$r = 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$q, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -6334,7 +6338,7 @@ const PolicyValidationClass = compose(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$p = getComponentName('new-password');
+const componentName$q = getComponentName('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -6346,16 +6350,16 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$r}
+			<${componentName$s}
 				name="new-password"
 				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, this.inputElement, {
         includeAttrs: [
@@ -6487,11 +6491,11 @@ const NewPasswordClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$p,
+    componentName: componentName$q,
   })
 );
 
-customElements.define(componentName$q, PolicyValidationClass);
+customElements.define(componentName$r, PolicyValidationClass);
 
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -6520,7 +6524,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -6731,16 +6735,16 @@ class NewPasswordInternal extends BaseInputClass$4 {
   }
 }
 
-customElements.define(componentName$r, NewPasswordInternal);
+customElements.define(componentName$s, NewPasswordInternal);
 
-customElements.define(componentName$p, NewPasswordClass);
+customElements.define(componentName$q, NewPasswordClass);
 
-const componentName$o = getComponentName('recaptcha');
+const componentName$p = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
-  componentName: componentName$o,
+  componentName: componentName$p,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -6910,7 +6914,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$o, RecaptchaClass);
+customElements.define(componentName$p, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -6924,7 +6928,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$n = getComponentName('upload-file');
+const componentName$o = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -6939,7 +6943,7 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: ':host > div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$o, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -7111,7 +7115,7 @@ class RawUploadFile extends BaseInputClass$3 {
 }
 
 const buttonVars = ButtonClass.cssVarList;
-const { host: host$8, wrapper, icon: icon$2, title, description, requiredIndicator: requiredIndicator$2 } = {
+const { host: host$8, wrapper, icon: icon$2, title: title$1, description, requiredIndicator: requiredIndicator$2 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '::slotted(*)' },
@@ -7139,11 +7143,11 @@ const UploadFileClass = compose(
       ],
       gap: { ...wrapper },
       lineHeight: { ...wrapper, property: 'line-height' },
-      titleFontSize: { ...title, property: 'font-size' },
-      titleFontWeight: { ...title, property: 'font-weight' },
+      titleFontSize: { ...title$1, property: 'font-size' },
+      titleFontWeight: { ...title$1, property: 'font-weight' },
       descriptionFontSize: { ...description, property: 'font-size' },
       labelTextColor: [
-        { ...title, property: 'color' },
+        { ...title$1, property: 'color' },
         { ...description, property: 'color' },
       ],
       iconSize: { ...icon$2, property: 'width' },
@@ -7154,7 +7158,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$n, UploadFileClass);
+customElements.define(componentName$o, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -7252,10 +7256,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$m = getComponentName('button-selection-group-internal');
+const componentName$n = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$m
+  componentName$n
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -7487,7 +7491,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$l = getComponentName('button-selection-group');
+const componentName$m = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7496,19 +7500,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$m}
+      <${componentName$n}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$m}>
+      </${componentName$n}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$m);
+      this.inputElement = this.shadowRoot.querySelector(componentName$n);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -7533,16 +7537,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$l,
+    componentName: componentName$m,
   })
 );
 
-customElements.define(componentName$m, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$n, ButtonSelectionGroupInternalClass);
 
-const componentName$k = getComponentName('button-selection-group-item');
+const componentName$l = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$k,
+  componentName: componentName$l,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -7649,14 +7653,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$k, ButtonSelectionGroupItemClass);
+customElements.define(componentName$l, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$l, ButtonSelectionGroupClass);
+customElements.define(componentName$m, ButtonSelectionGroupClass);
 
-const componentName$j = getComponentName('button-multi-selection-group-internal');
+const componentName$k = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$j
+  componentName$k
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -7759,7 +7763,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$i = getComponentName('button-multi-selection-group');
+const componentName$j = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7768,19 +7772,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$j}
+      <${componentName$k}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$j}>
+      </${componentName$k}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$j);
+      this.inputElement = this.shadowRoot.querySelector(componentName$k);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -7805,13 +7809,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$i,
+    componentName: componentName$j,
   })
 );
 
-customElements.define(componentName$j, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$k, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$i, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$j, ButtonMultiSelectionGroupClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7839,9 +7843,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$h = getComponentName('grid-text-column');
+const componentName$i = getComponentName('grid-text-column');
 
-customElements.define(componentName$h, GridTextColumnClass);
+customElements.define(componentName$i, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
@@ -7876,9 +7880,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$g = getComponentName('grid-custom-column');
+const componentName$h = getComponentName('grid-custom-column');
 
-customElements.define(componentName$g, GridCustomColumnClass);
+customElements.define(componentName$h, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -7937,9 +7941,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$f = getComponentName('grid-selection-column');
+const componentName$g = getComponentName('grid-selection-column');
 
-customElements.define(componentName$f, GridSelectionColumnClass);
+customElements.define(componentName$g, GridSelectionColumnClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -7951,7 +7955,7 @@ const isValidDataType = (data) => {
   return isValid;
 };
 
-const componentName$e = getComponentName('grid');
+const componentName$f = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -8187,13 +8191,13 @@ const GridClass = compose(
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$e,
+    componentName: componentName$f,
   })
 );
 
-customElements.define(componentName$e, GridClass);
+customElements.define(componentName$f, GridClass);
 
-const componentName$d = getComponentName('multi-select-combo-box');
+const componentName$e = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -8797,16 +8801,16 @@ const MultiSelectComboBoxClass = compose(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-    componentName: componentName$d,
+    componentName: componentName$e,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$d, MultiSelectComboBoxClass);
+customElements.define(componentName$e, MultiSelectComboBoxClass);
 
-const componentName$c = getComponentName('badge');
+const componentName$d = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -8857,9 +8861,9 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
 
-customElements.define(componentName$c, BadgeClass);
+customElements.define(componentName$d, BadgeClass);
 
-const componentName$b = getComponentName('modal');
+const componentName$c = getComponentName('modal');
 
 const customMixin$2 = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -8958,11 +8962,11 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$b,
+    componentName: componentName$c,
   })
 );
 
-customElements.define(componentName$b, ModalClass);
+customElements.define(componentName$c, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -8973,7 +8977,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$a = getComponentName('notification-card');
+const componentName$b = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -9081,13 +9085,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$a,
+    componentName: componentName$b,
   })
 );
 
-customElements.define(componentName$a, NotificationCardClass);
+customElements.define(componentName$b, NotificationCardClass);
 
-const componentName$9 = getComponentName('notification');
+const componentName$a = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -9182,14 +9186,14 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$9,
+    componentName: componentName$a,
   })
 );
 
-customElements.define(componentName$9, NotificationClass);
+customElements.define(componentName$a, NotificationClass);
 
-const componentName$8 = getComponentName('avatar');
-class RawAvatar extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > .wrapper' }) {
+const componentName$9 = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > .wrapper' }) {
   constructor() {
     super();
 
@@ -9290,13 +9294,13 @@ const AvatarClass = compose(
   componentNameValidationMixin
 )(RawAvatar);
 
-customElements.define(componentName$8, AvatarClass);
+customElements.define(componentName$9, AvatarClass);
 
-customElements.define(componentName$T, IconClass);
+customElements.define(componentName$U, IconClass);
 
-const componentName$7 = getComponentName('mappings-field-internal');
+const componentName$8 = getComponentName('mappings-field-internal');
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$2 {
   #errorItem;
@@ -9531,7 +9535,7 @@ class MappingsFieldInternal extends BaseInputClass$2 {
   }
 }
 
-const componentName$6 = getComponentName('mappings-field');
+const componentName$7 = getComponentName('mappings-field');
 
 const customMixin$1 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -9560,14 +9564,14 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$7}
+      <${componentName$8}
         tabindex="-1"
-      ></${componentName$7}>
+      ></${componentName$8}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$7);
+      this.inputElement = this.shadowRoot.querySelector(componentName$8);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -9696,17 +9700,17 @@ const MappingsFieldClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$6,
+    componentName: componentName$7,
   })
 );
 
-customElements.define(componentName$7, MappingsFieldInternal);
+customElements.define(componentName$8, MappingsFieldInternal);
 
-const componentName$5 = getComponentName('mapping-item');
+const componentName$6 = getComponentName('mapping-item');
 
 const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$5, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -9856,17 +9860,17 @@ class MappingItem extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$5, MappingItem);
+customElements.define(componentName$6, MappingItem);
 
-customElements.define(componentName$6, MappingsFieldClass);
+customElements.define(componentName$7, MappingsFieldClass);
 
 var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$4 = getComponentName('user-attribute');
+const componentName$5 = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$4,
+  componentName: componentName$5,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -10096,13 +10100,13 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
 
-customElements.define(componentName$4, UserAttributeClass);
+customElements.define(componentName$5, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$3 = getComponentName('user-auth-method');
+const componentName$4 = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$3,
+  componentName: componentName$4,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -10294,11 +10298,11 @@ const UserAuthMethodClass = compose(
   componentNameValidationMixin
 )(RawUserAuthMethod);
 
-customElements.define(componentName$3, UserAuthMethodClass);
+customElements.define(componentName$4, UserAuthMethodClass);
 
-const componentName$2 = getComponentName('saml-group-mappings-internal');
+const componentName$3 = getComponentName('saml-group-mappings-internal');
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$2, baseSelector: '' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$3, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass {
   static get observedAttributes() {
@@ -10424,7 +10428,7 @@ class SamlGroupMappingsInternal extends BaseInputClass {
   }
 }
 
-const componentName$1 = getComponentName('saml-group-mappings');
+const componentName$2 = getComponentName('saml-group-mappings');
 
 const customMixin = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -10434,14 +10438,14 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$2}
+      <${componentName$3}
         tabindex="-1"
-      ></${componentName$2}>
+      ></${componentName$3}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$2);
+      this.inputElement = this.shadowRoot.querySelector(componentName$3);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -10518,13 +10522,257 @@ const SamlGroupMappingsClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$1,
+    componentName: componentName$2,
   })
 );
 
-customElements.define(componentName$2, SamlGroupMappingsInternal);
+customElements.define(componentName$3, SamlGroupMappingsInternal);
+
+customElements.define(componentName$2, SamlGroupMappingsClass);
+
+const decode = (input) => {
+  const txt = document.createElement('textarea');
+  txt.innerHTML = input;
+  return txt.value;
+};
+
+const tpl = (input, inline) => {
+  return inline ? input : `<pre>${input}</pre>`;
+};
+
+const componentName$1 = getComponentName('code-snippet');
+
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$1, baseSelector: ':host > code' }) {
+  static get observedAttributes() {
+    return ['lang', 'inline'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+        width: 100%;
+      }
+      code {
+        display: block;
+        width: 100%;
+        min-height: 1em;
+        overflow-x: scroll;
+        overflow-y: scroll;
+      }
+      pre {
+        margin: 0;
+      }
+    </style>
+    <code class="hljs"></code>
+    `;
+  }
+
+  init() {
+    super.init?.();
+
+    this.lang = this.getAttribute('lang');
+    this.isInline = this.getAttribute('inline') === 'true';
 
-customElements.define(componentName$1, SamlGroupMappingsClass);
+    observeChildren(this, this.#renderSnippet.bind(this));
+  }
+
+  get contentNode() {
+    return this.shadowRoot.querySelector(this.baseSelector);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'inline') {
+        this.isInline = newValue;
+      }
+
+      if (attrName === 'lang') {
+        this.lang = newValue;
+      }
+
+      this.#renderSnippet();
+    }
+  }
+
+  #renderSnippet() {
+    const sanitized = decode(this.textContent);
+    const language = this.lang;
+
+    if (!language) {
+      this.contentNode.textContent = sanitized;
+      return;
+    }
+
+    const { value: highlighted } = hljs.highlight(sanitized, { language });
+
+    this.contentNode.innerHTML = tpl(highlighted, this.isInline);
+  }
+};
+
+const {
+  root,
+  docTag,
+  keyword,
+  metaKeyword,
+  templateTag,
+  templateVariable,
+  type,
+  variableLanguage,
+  title,
+  titleClass,
+  titleClassInherited,
+  titleFunction,
+  attr,
+  attribute,
+  literal,
+  meta,
+  number,
+  operator,
+  variable,
+  selectorAttr,
+  selectorClass,
+  selectorId,
+  regexp,
+  string,
+  metaString,
+  builtIn,
+  symbol,
+  comment,
+  code,
+  formula,
+  name,
+  quote,
+  selectorTag,
+  selectorPseudo,
+  subst,
+  section,
+  bullet,
+  emphasis,
+  strong,
+  addition,
+  deletion,
+  charEscape,
+  link: link$2,
+  params,
+  property,
+  punctuation,
+  tag,
+} = {
+  root: { selector: () => '.hljs' },
+  docTag: { selector: () => '.hljs-doctag' },
+  keyword: { selector: () => '.hljs-keyword' },
+  metaKeyword: { selector: () => '.hljs-meta .hljs-keyword' },
+  templateTag: { selector: () => '.hljs-template-tag' },
+  templateVariable: { selector: () => '.hljs-template-variable' },
+  type: { selector: () => '.hljs-type' },
+  variableLanguage: { selector: () => '.hljs-variable.language' },
+  title: { selector: () => '.hljs-title' },
+  titleClass: { selector: () => '.hljs-title.class_' },
+  titleClassInherited: { selector: () => '.hljs-title.class_.inherited__' },
+  titleFunction: { selector: () => '.hljs-title.function_' },
+  attr: { selector: () => '.hljs-attr' },
+  attribute: { selector: () => '.hljs-attribute' },
+  literal: { selector: () => '.hljs-literal' },
+  meta: { selector: () => '.hljs-meta' },
+  number: { selector: () => '.hljs-number' },
+  operator: { selector: () => '.hljs-operator' },
+  variable: { selector: () => '.hljs-variable' },
+  selectorAttr: { selector: () => '.hljs-selector-attr' },
+  selectorClass: { selector: () => '.hljs-selector-class' },
+  selectorId: { selector: () => '.hljs-selector-id' },
+  regexp: { selector: () => '.hljs-regexp' },
+  string: { selector: () => '.hljs-string' },
+  metaString: { selector: () => '.hljs-meta .hljs-string' },
+  builtIn: { selector: () => '.hljs-built_in' },
+  symbol: { selector: () => '.hljs-symbol' },
+  comment: { selector: () => '.hljs-comment' },
+  code: { selector: () => '.hljs-code' },
+  formula: { selector: () => '.hljs-formula' },
+  name: { selector: () => '.hljs-name' },
+  quote: { selector: () => '.hljs-quote' },
+  selectorTag: { selector: () => '.hljs-selector-tag' },
+  selectorPseudo: { selector: () => '.hljs-selector-pseudo' },
+  subst: { selector: () => '.hljs-subst' },
+  section: { selector: () => '.hljs-section' },
+  bullet: { selector: () => '.hljs-bullet' },
+  emphasis: { selector: () => '.hljs-emphasis' },
+  strong: { selector: () => '.hljs-strong' },
+  addition: { selector: () => '.hljs-addition' },
+  deletion: { selector: () => '.hljs-deletion' },
+  charEscape: { selector: () => '.hljs-char.escape' },
+  link: { selector: () => '.hljs-link' },
+  params: { selector: () => '.hljs-params' },
+  property: { selector: () => '.hljs-property' },
+  punctuation: { selector: () => '.hljs-punctuation' },
+  tag: { selector: () => '.hljs-tag' },
+};
+
+const CodeSnippetClass = compose(
+  createStyleMixin({
+    mappings: {
+      rootBgColor: { ...root, property: 'background-color' },
+      rootTextColor: { ...root, property: 'color' },
+      docTagTextColor: { ...docTag, property: 'color' },
+      keywordTextColor: { ...keyword, property: 'color' },
+      metaKeywordTextColor: { ...metaKeyword, property: 'color' },
+      templateTagTextColor: { ...templateTag, property: 'color' },
+      templateVariableTextColor: { ...templateVariable, property: 'color' },
+      typeTextColor: { ...type, property: 'color' },
+      variableLanguageTextColor: { ...variableLanguage, property: 'color' },
+      titleTextColor: { ...title, property: 'color' },
+      titleClassTextColor: { ...titleClass, property: 'color' },
+      titleClassInheritedTextColor: { ...titleClassInherited, property: 'color' },
+      titleFunctionTextColor: { ...titleFunction, property: 'color' },
+      attrTextColor: { ...attr, property: 'color' },
+      attributeTextColor: { ...attribute, property: 'color' },
+      literalTextColor: { ...literal, property: 'color' },
+      metaTextColor: { ...meta, property: 'color' },
+      numberTextColor: { ...number, property: 'color' },
+      operatorTextColor: { ...operator, property: 'color' },
+      variableTextColor: { ...variable, property: 'color' },
+      selectorAttrTextColor: { ...selectorAttr, property: 'color' },
+      selectorClassTextColor: { ...selectorClass, property: 'color' },
+      selectorIdTextColor: { ...selectorId, property: 'color' },
+      regexpTextColor: { ...regexp, property: 'color' },
+      stringTextColor: { ...string, property: 'color' },
+      metaStringTextColor: { ...metaString, property: 'color' },
+      builtInTextColor: { ...builtIn, property: 'color' },
+      symbolTextColor: { ...symbol, property: 'color' },
+      commentTextColor: { ...comment, property: 'color' },
+      codeTextColor: { ...code, property: 'color' },
+      formulaTextColor: { ...formula, property: 'color' },
+      nameTextColor: { ...name, property: 'color' },
+      quoteTextColor: { ...quote, property: 'color' },
+      selectorTagTextColor: { ...selectorTag, property: 'color' },
+      selectorPseudoTextColor: { ...selectorPseudo, property: 'color' },
+      substTextColor: { ...subst, property: 'color' },
+      sectionTextColor: { ...section, property: 'color' },
+      bulletTextColor: { ...bullet, property: 'color' },
+      emphasisTextColor: { ...emphasis, property: 'color' },
+      strongTextColor: { ...strong, property: 'color' },
+      additionTextColor: { ...addition, property: 'color' },
+      additionBgColor: { ...addition, property: 'background-color' },
+      deletionTextColor: { ...deletion, property: 'color' },
+      deletionBgColor: { ...deletion, property: 'background-color' },
+      charEscapeTextColor: { ...charEscape, property: 'color' },
+      linkTextColor: { ...link$2, property: 'color' },
+      paramsTextColor: { ...params, property: 'color' },
+      propertyTextColor: { ...property, property: 'color' },
+      punctuationTextColor: { ...punctuation, property: 'color' },
+      tagTextColor: { ...tag, property: 'color' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(CodeSnippet$1);
+
+customElements.define(componentName$1, CodeSnippetClass);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -10956,33 +11204,33 @@ const globals = {
   fonts,
   direction,
 };
-const vars$G = getThemeVars(globals);
+const vars$H = getThemeVars(globals);
 
-const globalRefs$o = getThemeRefs(globals);
+const globalRefs$p = getThemeRefs(globals);
 const compVars$5 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$o.colors.primary,
-  secondary: globalRefs$o.colors.secondary,
-  success: globalRefs$o.colors.success,
-  error: globalRefs$o.colors.error,
-  surface: globalRefs$o.colors.surface,
+  primary: globalRefs$p.colors.primary,
+  secondary: globalRefs$p.colors.secondary,
+  success: globalRefs$p.colors.success,
+  error: globalRefs$p.colors.error,
+  surface: globalRefs$p.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$S);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$T);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$5.fontFamily]: globalRefs$o.fonts.font1.family,
+  [compVars$5.fontFamily]: globalRefs$p.fonts.font1.family,
 
   [compVars$5.cursor]: 'pointer',
   [compVars$5.hostHeight]: '3em',
   [compVars$5.hostWidth]: 'auto',
-  [compVars$5.hostDirection]: globalRefs$o.direction,
+  [compVars$5.hostDirection]: globalRefs$p.direction,
 
-  [compVars$5.borderRadius]: globalRefs$o.radius.sm,
-  [compVars$5.borderWidth]: globalRefs$o.border.xs,
+  [compVars$5.borderRadius]: globalRefs$p.radius.sm,
+  [compVars$5.borderWidth]: globalRefs$p.border.xs,
   [compVars$5.borderStyle]: 'solid',
   [compVars$5.borderColor]: 'transparent',
 
@@ -11025,11 +11273,11 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$o.colors.surface.light,
-    [helperVars$3.dark]: globalRefs$o.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$o.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$o.colors.surface.main,
-    [compVars$5.iconColor]: globalRefs$o.colors.surface.main,
+    [helperVars$3.main]: globalRefs$p.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$p.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$p.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$p.colors.surface.main,
+    [compVars$5.iconColor]: globalRefs$p.colors.surface.main,
   },
 
   variant: {
@@ -11077,7 +11325,7 @@ const button = {
   },
 };
 
-const vars$F = {
+const vars$G = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -11085,28 +11333,28 @@ const vars$F = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$F
+  vars: vars$G
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$n = getThemeRefs(globals);
+const globalRefs$o = getThemeRefs(globals);
 
-const [theme$1, refs, vars$E] = createHelperVars(
+const [theme$1, refs, vars$F] = createHelperVars(
   {
-    labelTextColor: globalRefs$n.colors.surface.dark,
+    labelTextColor: globalRefs$o.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
-    valueTextColor: globalRefs$n.colors.surface.contrast,
-    placeholderTextColor: globalRefs$n.colors.surface.dark,
+    valueTextColor: globalRefs$o.colors.surface.contrast,
+    placeholderTextColor: globalRefs$o.colors.surface.dark,
     requiredIndicator: "'*'",
-    helperTextColor: globalRefs$n.colors.surface.dark,
-    errorMessageTextColor: globalRefs$n.colors.error.main,
-    successMessageTextColor: globalRefs$n.colors.success.main,
+    helperTextColor: globalRefs$o.colors.surface.dark,
+    errorMessageTextColor: globalRefs$o.colors.error.main,
+    successMessageTextColor: globalRefs$o.colors.success.main,
 
-    borderWidth: globalRefs$n.border.xs,
-    borderRadius: globalRefs$n.radius.xs,
+    borderWidth: globalRefs$o.border.xs,
+    borderRadius: globalRefs$o.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$n.border.sm,
+    outlineWidth: globalRefs$o.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
@@ -11117,11 +11365,11 @@ const [theme$1, refs, vars$E] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$n.colors.surface.main,
+    backgroundColor: globalRefs$o.colors.surface.main,
 
-    fontFamily: globalRefs$n.fonts.font1.family,
+    fontFamily: globalRefs$o.fonts.font1.family,
 
-    direction: globalRefs$n.direction,
+    direction: globalRefs$o.direction,
 
     overlayOpacity: '0.3',
 
@@ -11137,28 +11385,28 @@ const [theme$1, refs, vars$E] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$n.colors.surface.light,
+      outlineColor: globalRefs$o.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$n.colors.error.main,
+        outlineColor: globalRefs$o.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$n.border.xs,
-      borderColor: globalRefs$n.colors.surface.light,
+      outlineWidth: globalRefs$o.border.xs,
+      borderColor: globalRefs$o.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$n.colors.error.main,
+        borderColor: globalRefs$o.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$n.colors.surface.light,
-      borderColor: globalRefs$n.colors.surface.light,
-      valueTextColor: globalRefs$n.colors.surface.light,
-      placeholderTextColor: globalRefs$n.colors.surface.light,
-      helperTextColor: globalRefs$n.colors.surface.light,
-      backgroundColor: globalRefs$n.colors.surface.main,
+      labelTextColor: globalRefs$o.colors.surface.light,
+      borderColor: globalRefs$o.colors.surface.light,
+      valueTextColor: globalRefs$o.colors.surface.light,
+      placeholderTextColor: globalRefs$o.colors.surface.light,
+      helperTextColor: globalRefs$o.colors.surface.light,
+      backgroundColor: globalRefs$o.colors.surface.main,
     },
   },
   componentName
@@ -11168,22 +11416,64 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$E
+  vars: vars$F
 });
 
-const vars$D = TextFieldClass.cssVarList;
+const vars$E = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$E.hostWidth]: refs.width,
+  [vars$E.hostMinWidth]: refs.minWidth,
+  [vars$E.hostDirection]: refs.direction,
+  [vars$E.fontSize]: refs.fontSize,
+  [vars$E.fontFamily]: refs.fontFamily,
+  [vars$E.labelTextColor]: refs.labelTextColor,
+  [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$E.inputValueTextColor]: refs.valueTextColor,
+  [vars$E.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$E.inputBorderWidth]: refs.borderWidth,
+  [vars$E.inputBorderStyle]: refs.borderStyle,
+  [vars$E.inputBorderColor]: refs.borderColor,
+  [vars$E.inputBorderRadius]: refs.borderRadius,
+  [vars$E.inputOutlineWidth]: refs.outlineWidth,
+  [vars$E.inputOutlineStyle]: refs.outlineStyle,
+  [vars$E.inputOutlineColor]: refs.outlineColor,
+  [vars$E.inputOutlineOffset]: refs.outlineOffset,
+  [vars$E.inputBackgroundColor]: refs.backgroundColor,
+  [vars$E.inputHeight]: refs.inputHeight,
+  [vars$E.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$E.helperTextColor]: refs.helperTextColor,
+  textAlign: {
+    right: { [vars$E.inputTextAlign]: 'right' },
+    left: { [vars$E.inputTextAlign]: 'left' },
+    center: { [vars$E.inputTextAlign]: 'center' },
+  },
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$E
+});
+
+const globalRefs$n = getThemeRefs(globals);
+const vars$D = PasswordClass.cssVarList;
+
+const password = {
   [vars$D.hostWidth]: refs.width,
-  [vars$D.hostMinWidth]: refs.minWidth,
   [vars$D.hostDirection]: refs.direction,
   [vars$D.fontSize]: refs.fontSize,
   [vars$D.fontFamily]: refs.fontFamily,
   [vars$D.labelTextColor]: refs.labelTextColor,
-  [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$D.inputHeight]: refs.inputHeight,
+  [vars$D.inputBackgroundColor]: refs.backgroundColor,
+  [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$D.inputValueTextColor]: refs.valueTextColor,
-  [vars$D.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$D.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$D.inputBorderWidth]: refs.borderWidth,
   [vars$D.inputBorderStyle]: refs.borderStyle,
   [vars$D.inputBorderColor]: refs.borderColor,
@@ -11192,40 +11482,29 @@ const textField = {
   [vars$D.inputOutlineStyle]: refs.outlineStyle,
   [vars$D.inputOutlineColor]: refs.outlineColor,
   [vars$D.inputOutlineOffset]: refs.outlineOffset,
-  [vars$D.inputBackgroundColor]: refs.backgroundColor,
-  [vars$D.inputHeight]: refs.inputHeight,
-  [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$D.helperTextColor]: refs.helperTextColor,
-  textAlign: {
-    right: { [vars$D.inputTextAlign]: 'right' },
-    left: { [vars$D.inputTextAlign]: 'left' },
-    center: { [vars$D.inputTextAlign]: 'center' },
-  },
+  [vars$D.revealButtonOffset]: globalRefs$n.spacing.md,
+  [vars$D.revealButtonSize]: refs.toggleButtonSize,
+  [vars$D.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$D
 });
 
-const globalRefs$m = getThemeRefs(globals);
-const vars$C = PasswordClass.cssVarList;
+const vars$C = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$C.hostWidth]: refs.width,
+  [vars$C.hostMinWidth]: refs.minWidth,
   [vars$C.hostDirection]: refs.direction,
   [vars$C.fontSize]: refs.fontSize,
   [vars$C.fontFamily]: refs.fontFamily,
   [vars$C.labelTextColor]: refs.labelTextColor,
   [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$C.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$C.inputHeight]: refs.inputHeight,
-  [vars$C.inputBackgroundColor]: refs.backgroundColor,
-  [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$C.inputValueTextColor]: refs.valueTextColor,
-  [vars$C.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$C.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$C.inputBorderWidth]: refs.borderWidth,
   [vars$C.inputBorderStyle]: refs.borderStyle,
   [vars$C.inputBorderColor]: refs.borderColor,
@@ -11234,20 +11513,21 @@ const password = {
   [vars$C.inputOutlineStyle]: refs.outlineStyle,
   [vars$C.inputOutlineColor]: refs.outlineColor,
   [vars$C.inputOutlineOffset]: refs.outlineOffset,
-  [vars$C.revealButtonOffset]: globalRefs$m.spacing.md,
-  [vars$C.revealButtonSize]: refs.toggleButtonSize,
-  [vars$C.revealButtonColor]: refs.placeholderTextColor,
+  [vars$C.inputBackgroundColor]: refs.backgroundColor,
+  [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$C.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$C.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$C
 });
 
-const vars$B = NumberFieldClass.cssVarList;
+const vars$B = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$B.hostWidth]: refs.width,
   [vars$B.hostMinWidth]: refs.minWidth,
   [vars$B.hostDirection]: refs.direction,
@@ -11256,6 +11536,7 @@ const numberField = {
   [vars$B.labelTextColor]: refs.labelTextColor,
   [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$B.inputValueTextColor]: refs.valueTextColor,
+  [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$B.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$B.inputBorderWidth]: refs.borderWidth,
   [vars$B.inputBorderStyle]: refs.borderStyle,
@@ -11266,200 +11547,167 @@ const numberField = {
   [vars$B.inputOutlineColor]: refs.outlineColor,
   [vars$B.inputOutlineOffset]: refs.outlineOffset,
   [vars$B.inputBackgroundColor]: refs.backgroundColor,
-  [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$B.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$B
 });
 
-const vars$A = EmailFieldClass.cssVarList;
+const vars$A = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [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.inputBackgroundColor]: refs.backgroundColor,
   [vars$A.inputValueTextColor]: refs.valueTextColor,
-  [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$A.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$A.inputBorderRadius]: refs.borderRadius,
   [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.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$A.inputHeight]: refs.inputHeight,
+  [vars$A.inputResizeType]: 'vertical',
+  [vars$A.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$A.inputTextAlign]: 'right' },
+    left: { [vars$A.inputTextAlign]: 'left' },
+    center: { [vars$A.inputTextAlign]: 'center' },
+  },
+
+  _readonly: {
+    [vars$A.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$A
 });
 
-const vars$z = TextAreaClass.cssVarList;
+const vars$z = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [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.labelFontWeight]: '400',
+  [vars$z.labelLineHeight]: checkboxSize,
+  [vars$z.labelSpacing]: '1em',
   [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$z.inputBackgroundColor]: refs.backgroundColor,
-  [vars$z.inputValueTextColor]: refs.valueTextColor,
-  [vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$z.inputOutlineWidth]: refs.outlineWidth,
+  [vars$z.inputOutlineOffset]: refs.outlineOffset,
+  [vars$z.inputOutlineColor]: refs.outlineColor,
+  [vars$z.inputOutlineStyle]: refs.outlineStyle,
   [vars$z.inputBorderRadius]: refs.borderRadius,
+  [vars$z.inputBorderColor]: refs.borderColor,
   [vars$z.inputBorderWidth]: refs.borderWidth,
   [vars$z.inputBorderStyle]: refs.borderStyle,
-  [vars$z.inputBorderColor]: refs.borderColor,
-  [vars$z.inputOutlineWidth]: refs.outlineWidth,
-  [vars$z.inputOutlineStyle]: refs.outlineStyle,
-  [vars$z.inputOutlineColor]: refs.outlineColor,
-  [vars$z.inputOutlineOffset]: refs.outlineOffset,
-  [vars$z.inputResizeType]: 'vertical',
-  [vars$z.inputMinHeight]: '5em',
-  textAlign: {
-    right: { [vars$z.inputTextAlign]: 'right' },
-    left: { [vars$z.inputTextAlign]: 'left' },
-    center: { [vars$z.inputTextAlign]: 'center' },
+  [vars$z.inputBackgroundColor]: refs.backgroundColor,
+  [vars$z.inputSize]: checkboxSize,
+
+  _checked: {
+    [vars$z.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$z.inputResizeType]: 'none',
+  _disabled: {
+    [vars$z.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$z
 });
 
-const vars$y = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$m = getThemeRefs(globals);
+const vars$y = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [vars$y.hostWidth]: refs.width,
   [vars$y.hostDirection]: refs.direction,
   [vars$y.fontSize]: refs.fontSize,
   [vars$y.fontFamily]: refs.fontFamily,
-  [vars$y.labelTextColor]: refs.labelTextColor,
-  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$y.labelFontWeight]: '400',
-  [vars$y.labelLineHeight]: checkboxSize,
-  [vars$y.labelSpacing]: '1em',
-  [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$y.inputOutlineWidth]: refs.outlineWidth,
   [vars$y.inputOutlineOffset]: refs.outlineOffset,
   [vars$y.inputOutlineColor]: refs.outlineColor,
   [vars$y.inputOutlineStyle]: refs.outlineStyle,
-  [vars$y.inputBorderRadius]: refs.borderRadius,
-  [vars$y.inputBorderColor]: refs.borderColor,
-  [vars$y.inputBorderWidth]: refs.borderWidth,
-  [vars$y.inputBorderStyle]: refs.borderStyle,
-  [vars$y.inputBackgroundColor]: refs.backgroundColor,
-  [vars$y.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars$y.inputValueTextColor]: refs.valueTextColor,
-  },
 
-  _disabled: {
-    [vars$y.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$y
-});
+  [vars$y.trackBorderStyle]: refs.borderStyle,
+  [vars$y.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$y.trackBorderColor]: refs.borderColor,
+  [vars$y.trackBackgroundColor]: refs.backgroundColor,
+  [vars$y.trackBorderRadius]: globalRefs$m.radius.md,
+  [vars$y.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$y.trackHeight]: checkboxHeight,
+
+  [vars$y.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$y.knobRadius]: '50%',
+  [vars$y.knobTopOffset]: '1px',
+  [vars$y.knobLeftOffset]: knobMargin,
+  [vars$y.knobColor]: refs.labelTextColor,
+  [vars$y.knobTransitionDuration]: '0.3s',
 
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
-
-const globalRefs$l = getThemeRefs(globals);
-const vars$x = SwitchToggleClass.cssVarList;
-
-const switchToggle = {
-  [vars$x.hostWidth]: refs.width,
-  [vars$x.hostDirection]: refs.direction,
-  [vars$x.fontSize]: refs.fontSize,
-  [vars$x.fontFamily]: refs.fontFamily,
-
-  [vars$x.inputOutlineWidth]: refs.outlineWidth,
-  [vars$x.inputOutlineOffset]: refs.outlineOffset,
-  [vars$x.inputOutlineColor]: refs.outlineColor,
-  [vars$x.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$x.trackBorderStyle]: refs.borderStyle,
-  [vars$x.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$x.trackBorderColor]: refs.borderColor,
-  [vars$x.trackBackgroundColor]: refs.backgroundColor,
-  [vars$x.trackBorderRadius]: globalRefs$l.radius.md,
-  [vars$x.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$x.trackHeight]: checkboxHeight,
-
-  [vars$x.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$x.knobRadius]: '50%',
-  [vars$x.knobTopOffset]: '1px',
-  [vars$x.knobLeftOffset]: knobMargin,
-  [vars$x.knobColor]: refs.labelTextColor,
-  [vars$x.knobTransitionDuration]: '0.3s',
-
-  [vars$x.labelTextColor]: refs.labelTextColor,
-  [vars$x.labelFontWeight]: '400',
-  [vars$x.labelLineHeight]: '1.35em',
-  [vars$x.labelSpacing]: '1em',
-  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$y.labelTextColor]: refs.labelTextColor,
+  [vars$y.labelFontWeight]: '400',
+  [vars$y.labelLineHeight]: '1.35em',
+  [vars$y.labelSpacing]: '1em',
+  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$x.trackBorderColor]: refs.borderColor,
-    [vars$x.knobLeftOffset]: `calc(100% - var(${vars$x.knobSize}) - ${knobMargin})`,
-    [vars$x.knobColor]: refs.valueTextColor,
-    [vars$x.knobTextColor]: refs.valueTextColor,
+    [vars$y.trackBorderColor]: refs.borderColor,
+    [vars$y.knobLeftOffset]: `calc(100% - var(${vars$y.knobSize}) - ${knobMargin})`,
+    [vars$y.knobColor]: refs.valueTextColor,
+    [vars$y.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$x.knobColor]: globalRefs$l.colors.surface.light,
-    [vars$x.trackBorderColor]: globalRefs$l.colors.surface.light,
-    [vars$x.trackBackgroundColor]: globalRefs$l.colors.surface.main,
-    [vars$x.labelTextColor]: refs.labelTextColor,
+    [vars$y.knobColor]: globalRefs$m.colors.surface.light,
+    [vars$y.trackBorderColor]: globalRefs$m.colors.surface.light,
+    [vars$y.trackBackgroundColor]: globalRefs$m.colors.surface.main,
+    [vars$y.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$x.knobColor]: globalRefs$l.colors.surface.light,
-      [vars$x.trackBackgroundColor]: globalRefs$l.colors.surface.main,
+      [vars$y.knobColor]: globalRefs$m.colors.surface.light,
+      [vars$y.trackBackgroundColor]: globalRefs$m.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$x.trackBorderColor]: globalRefs$l.colors.error.main,
-    [vars$x.knobColor]: globalRefs$l.colors.error.main,
+    [vars$y.trackBorderColor]: globalRefs$m.colors.error.main,
+    [vars$y.knobColor]: globalRefs$m.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$x
+  vars: vars$y
 });
 
-const globalRefs$k = getThemeRefs(globals);
+const globalRefs$l = getThemeRefs(globals);
 
 const compVars$4 = ContainerClass.cssVarList;
 
@@ -11481,7 +11729,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$M
+  componentName$N
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -11491,10 +11739,10 @@ const container = {
 
   [compVars$4.hostWidth]: '100%',
   [compVars$4.boxShadow]: 'none',
-  [compVars$4.backgroundColor]: globalRefs$k.colors.surface.main,
-  [compVars$4.color]: globalRefs$k.colors.surface.contrast,
+  [compVars$4.backgroundColor]: globalRefs$l.colors.surface.main,
+  [compVars$4.color]: globalRefs$l.colors.surface.contrast,
   [compVars$4.borderRadius]: '0px',
-  [compVars$4.hostDirection]: globalRefs$k.direction,
+  [compVars$4.hostDirection]: globalRefs$l.direction,
 
   verticalPadding: {
     sm: { [compVars$4.verticalPadding]: '5px' },
@@ -11540,34 +11788,34 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.md} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.md} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide['2xl']} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$4.borderRadius]: globalRefs$k.radius.sm },
-    md: { [compVars$4.borderRadius]: globalRefs$k.radius.md },
-    lg: { [compVars$4.borderRadius]: globalRefs$k.radius.lg },
-    xl: { [compVars$4.borderRadius]: globalRefs$k.radius.xl },
-    '2xl': { [compVars$4.borderRadius]: globalRefs$k.radius['2xl'] },
-    '3xl': { [compVars$4.borderRadius]: globalRefs$k.radius['3xl'] },
+    sm: { [compVars$4.borderRadius]: globalRefs$l.radius.sm },
+    md: { [compVars$4.borderRadius]: globalRefs$l.radius.md },
+    lg: { [compVars$4.borderRadius]: globalRefs$l.radius.lg },
+    xl: { [compVars$4.borderRadius]: globalRefs$l.radius.xl },
+    '2xl': { [compVars$4.borderRadius]: globalRefs$l.radius['2xl'] },
+    '3xl': { [compVars$4.borderRadius]: globalRefs$l.radius['3xl'] },
   },
 };
 
-const vars$w = {
+const vars$x = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -11575,252 +11823,252 @@ const vars$w = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$w
+  vars: vars$x
 });
 
-const vars$v = LogoClass.cssVarList;
+const vars$w = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$v.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$w.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$v
+  vars: vars$w
 });
 
-const vars$u = TotpImageClass.cssVarList;
+const vars$v = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$v.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$u
+  vars: vars$v
 });
 
-const vars$t = NotpImageClass.cssVarList;
+const vars$u = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$t
+  vars: vars$u
 });
 
-const globalRefs$j = getThemeRefs(globals);
-const vars$s = TextClass.cssVarList;
+const globalRefs$k = getThemeRefs(globals);
+const vars$t = TextClass.cssVarList;
 
 const text = {
-  [vars$s.hostDirection]: globalRefs$j.direction,
-  [vars$s.textLineHeight]: '1.35em',
-  [vars$s.textAlign]: 'left',
-  [vars$s.textColor]: globalRefs$j.colors.surface.dark,
+  [vars$t.hostDirection]: globalRefs$k.direction,
+  [vars$t.textLineHeight]: '1.35em',
+  [vars$t.textAlign]: 'left',
+  [vars$t.textColor]: globalRefs$k.colors.surface.dark,
   variant: {
     h1: {
-      [vars$s.fontSize]: globalRefs$j.typography.h1.size,
-      [vars$s.fontWeight]: globalRefs$j.typography.h1.weight,
-      [vars$s.fontFamily]: globalRefs$j.typography.h1.font,
+      [vars$t.fontSize]: globalRefs$k.typography.h1.size,
+      [vars$t.fontWeight]: globalRefs$k.typography.h1.weight,
+      [vars$t.fontFamily]: globalRefs$k.typography.h1.font,
     },
     h2: {
-      [vars$s.fontSize]: globalRefs$j.typography.h2.size,
-      [vars$s.fontWeight]: globalRefs$j.typography.h2.weight,
-      [vars$s.fontFamily]: globalRefs$j.typography.h2.font,
+      [vars$t.fontSize]: globalRefs$k.typography.h2.size,
+      [vars$t.fontWeight]: globalRefs$k.typography.h2.weight,
+      [vars$t.fontFamily]: globalRefs$k.typography.h2.font,
     },
     h3: {
-      [vars$s.fontSize]: globalRefs$j.typography.h3.size,
-      [vars$s.fontWeight]: globalRefs$j.typography.h3.weight,
-      [vars$s.fontFamily]: globalRefs$j.typography.h3.font,
+      [vars$t.fontSize]: globalRefs$k.typography.h3.size,
+      [vars$t.fontWeight]: globalRefs$k.typography.h3.weight,
+      [vars$t.fontFamily]: globalRefs$k.typography.h3.font,
     },
     subtitle1: {
-      [vars$s.fontSize]: globalRefs$j.typography.subtitle1.size,
-      [vars$s.fontWeight]: globalRefs$j.typography.subtitle1.weight,
-      [vars$s.fontFamily]: globalRefs$j.typography.subtitle1.font,
+      [vars$t.fontSize]: globalRefs$k.typography.subtitle1.size,
+      [vars$t.fontWeight]: globalRefs$k.typography.subtitle1.weight,
+      [vars$t.fontFamily]: globalRefs$k.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$s.fontSize]: globalRefs$j.typography.subtitle2.size,
-      [vars$s.fontWeight]: globalRefs$j.typography.subtitle2.weight,
-      [vars$s.fontFamily]: globalRefs$j.typography.subtitle2.font,
+      [vars$t.fontSize]: globalRefs$k.typography.subtitle2.size,
+      [vars$t.fontWeight]: globalRefs$k.typography.subtitle2.weight,
+      [vars$t.fontFamily]: globalRefs$k.typography.subtitle2.font,
     },
     body1: {
-      [vars$s.fontSize]: globalRefs$j.typography.body1.size,
-      [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
-      [vars$s.fontFamily]: globalRefs$j.typography.body1.font,
+      [vars$t.fontSize]: globalRefs$k.typography.body1.size,
+      [vars$t.fontWeight]: globalRefs$k.typography.body1.weight,
+      [vars$t.fontFamily]: globalRefs$k.typography.body1.font,
     },
     body2: {
-      [vars$s.fontSize]: globalRefs$j.typography.body2.size,
-      [vars$s.fontWeight]: globalRefs$j.typography.body2.weight,
-      [vars$s.fontFamily]: globalRefs$j.typography.body2.font,
+      [vars$t.fontSize]: globalRefs$k.typography.body2.size,
+      [vars$t.fontWeight]: globalRefs$k.typography.body2.weight,
+      [vars$t.fontFamily]: globalRefs$k.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$s.textColor]: globalRefs$j.colors.surface.contrast,
+      [vars$t.textColor]: globalRefs$k.colors.surface.contrast,
     },
     secondary: {
-      [vars$s.textColor]: globalRefs$j.colors.surface.dark,
+      [vars$t.textColor]: globalRefs$k.colors.surface.dark,
     },
     error: {
-      [vars$s.textColor]: globalRefs$j.colors.error.main,
+      [vars$t.textColor]: globalRefs$k.colors.error.main,
     },
     success: {
-      [vars$s.textColor]: globalRefs$j.colors.success.main,
+      [vars$t.textColor]: globalRefs$k.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$s.textAlign]: 'right' },
-    left: { [vars$s.textAlign]: 'left' },
-    center: { [vars$s.textAlign]: 'center' },
+    right: { [vars$t.textAlign]: 'right' },
+    left: { [vars$t.textAlign]: 'left' },
+    center: { [vars$t.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$s.hostWidth]: '100%',
+    [vars$t.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$s.fontStyle]: 'italic',
+    [vars$t.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$s.textTransform]: 'uppercase',
+    [vars$t.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$s.textTransform]: 'lowercase',
+    [vars$t.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$s
+  vars: vars$t
 });
 
-const globalRefs$i = getThemeRefs(globals);
-const vars$r = EnrichedTextClass.cssVarList;
+const globalRefs$j = getThemeRefs(globals);
+const vars$s = EnrichedTextClass.cssVarList;
 
 const EnrichedText = {
-  [vars$r.hostDirection]: globalRefs$i.direction,
+  [vars$s.hostDirection]: globalRefs$j.direction,
 
-  [vars$r.fontSize]: globalRefs$i.typography.body1.size,
-  [vars$r.fontWeight]: globalRefs$i.typography.body1.weight,
-  [vars$r.fontFamily]: globalRefs$i.typography.body1.font,
+  [vars$s.fontSize]: globalRefs$j.typography.body1.size,
+  [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
+  [vars$s.fontFamily]: globalRefs$j.typography.body1.font,
 
-  [vars$r.textLineHeight]: '1.35em',
-  [vars$r.textAlign]: 'left',
-  [vars$r.textColor]: globalRefs$i.colors.surface.dark,
+  [vars$s.textLineHeight]: '1.35em',
+  [vars$s.textAlign]: 'left',
+  [vars$s.textColor]: globalRefs$j.colors.surface.dark,
 
-  [vars$r.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
+  [vars$s.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
 
   mode: {
     primary: {
-      [vars$r.textColor]: globalRefs$i.colors.surface.contrast,
+      [vars$s.textColor]: globalRefs$j.colors.surface.contrast,
     },
     secondary: {
-      [vars$r.textColor]: globalRefs$i.colors.surface.dark,
+      [vars$s.textColor]: globalRefs$j.colors.surface.dark,
     },
     error: {
-      [vars$r.textColor]: globalRefs$i.colors.error.main,
+      [vars$s.textColor]: globalRefs$j.colors.error.main,
     },
     success: {
-      [vars$r.textColor]: globalRefs$i.colors.success.main,
+      [vars$s.textColor]: globalRefs$j.colors.success.main,
     },
   },
 
   variant: {
     h1: {
-      [vars$r.fontSize]: globalRefs$i.typography.h1.size,
-      [vars$r.fontWeight]: globalRefs$i.typography.h1.weight,
-      [vars$r.fontFamily]: globalRefs$i.typography.h1.font,
+      [vars$s.fontSize]: globalRefs$j.typography.h1.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.h1.weight,
+      [vars$s.fontFamily]: globalRefs$j.typography.h1.font,
     },
     h2: {
-      [vars$r.fontSize]: globalRefs$i.typography.h2.size,
-      [vars$r.fontWeight]: globalRefs$i.typography.h2.weight,
-      [vars$r.fontFamily]: globalRefs$i.typography.h2.font,
+      [vars$s.fontSize]: globalRefs$j.typography.h2.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.h2.weight,
+      [vars$s.fontFamily]: globalRefs$j.typography.h2.font,
     },
     h3: {
-      [vars$r.fontSize]: globalRefs$i.typography.h3.size,
-      [vars$r.fontWeight]: globalRefs$i.typography.h3.weight,
-      [vars$r.fontFamily]: globalRefs$i.typography.h3.font,
+      [vars$s.fontSize]: globalRefs$j.typography.h3.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.h3.weight,
+      [vars$s.fontFamily]: globalRefs$j.typography.h3.font,
     },
     subtitle1: {
-      [vars$r.fontSize]: globalRefs$i.typography.subtitle1.size,
-      [vars$r.fontWeight]: globalRefs$i.typography.subtitle1.weight,
-      [vars$r.fontFamily]: globalRefs$i.typography.subtitle1.font,
+      [vars$s.fontSize]: globalRefs$j.typography.subtitle1.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.subtitle1.weight,
+      [vars$s.fontFamily]: globalRefs$j.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$r.fontSize]: globalRefs$i.typography.subtitle2.size,
-      [vars$r.fontWeight]: globalRefs$i.typography.subtitle2.weight,
-      [vars$r.fontFamily]: globalRefs$i.typography.subtitle2.font,
+      [vars$s.fontSize]: globalRefs$j.typography.subtitle2.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.subtitle2.weight,
+      [vars$s.fontFamily]: globalRefs$j.typography.subtitle2.font,
     },
     body1: {
-      [vars$r.fontSize]: globalRefs$i.typography.body1.size,
-      [vars$r.fontWeight]: globalRefs$i.typography.body1.weight,
-      [vars$r.fontFamily]: globalRefs$i.typography.body1.font,
+      [vars$s.fontSize]: globalRefs$j.typography.body1.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
+      [vars$s.fontFamily]: globalRefs$j.typography.body1.font,
     },
     body2: {
-      [vars$r.fontSize]: globalRefs$i.typography.body2.size,
-      [vars$r.fontWeight]: globalRefs$i.typography.body2.weight,
-      [vars$r.fontFamily]: globalRefs$i.typography.body2.font,
+      [vars$s.fontSize]: globalRefs$j.typography.body2.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.body2.weight,
+      [vars$s.fontFamily]: globalRefs$j.typography.body2.font,
     },
   },
 
   textAlign: {
-    right: { [vars$r.textAlign]: 'right' },
-    left: { [vars$r.textAlign]: 'left' },
-    center: { [vars$r.textAlign]: 'center' },
+    right: { [vars$s.textAlign]: 'right' },
+    left: { [vars$s.textAlign]: 'left' },
+    center: { [vars$s.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$r.hostWidth]: '100%',
+    [vars$s.hostWidth]: '100%',
   },
 };
 
 var EnrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: EnrichedText,
-  vars: vars$r
+  vars: vars$s
 });
 
-const globalRefs$h = getThemeRefs(globals);
-const vars$q = LinkClass.cssVarList;
+const globalRefs$i = getThemeRefs(globals);
+const vars$r = LinkClass.cssVarList;
 
 const link = {
-  [vars$q.hostDirection]: globalRefs$h.direction,
-  [vars$q.cursor]: 'pointer',
+  [vars$r.hostDirection]: globalRefs$i.direction,
+  [vars$r.cursor]: 'pointer',
 
-  [vars$q.textColor]: globalRefs$h.colors.primary.main,
+  [vars$r.textColor]: globalRefs$i.colors.primary.main,
 
   textAlign: {
-    right: { [vars$q.textAlign]: 'right' },
-    left: { [vars$q.textAlign]: 'left' },
-    center: { [vars$q.textAlign]: 'center' },
+    right: { [vars$r.textAlign]: 'right' },
+    left: { [vars$r.textAlign]: 'left' },
+    center: { [vars$r.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$q.hostWidth]: '100%',
+    [vars$r.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$q.textColor]: globalRefs$h.colors.primary.main,
+      [vars$r.textColor]: globalRefs$i.colors.primary.main,
     },
     secondary: {
-      [vars$q.textColor]: globalRefs$h.colors.secondary.main,
+      [vars$r.textColor]: globalRefs$i.colors.secondary.main,
     },
     error: {
-      [vars$q.textColor]: globalRefs$h.colors.error.main,
+      [vars$r.textColor]: globalRefs$i.colors.error.main,
     },
     success: {
-      [vars$q.textColor]: globalRefs$h.colors.success.main,
+      [vars$r.textColor]: globalRefs$i.colors.success.main,
     },
   },
 };
@@ -11828,10 +12076,10 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$q
+  vars: vars$r
 });
 
-const globalRefs$g = getThemeRefs(globals);
+const globalRefs$h = getThemeRefs(globals);
 const compVars$3 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -11839,18 +12087,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$K
+  componentName$L
 );
 
 const divider = {
   ...helperTheme$1,
 
-  [compVars$3.hostDirection]: globalRefs$g.direction,
+  [compVars$3.hostDirection]: globalRefs$h.direction,
   [compVars$3.alignItems]: 'center',
   [compVars$3.flexDirection]: 'row',
   [compVars$3.alignSelf]: 'stretch',
   [compVars$3.hostWidth]: '100%',
-  [compVars$3.stripeColor]: globalRefs$g.colors.surface.light,
+  [compVars$3.stripeColor]: globalRefs$h.colors.surface.light,
   [compVars$3.stripeColorOpacity]: '0.5',
   [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$3.labelTextWidth]: 'fit-content',
@@ -11870,7 +12118,7 @@ const divider = {
   },
 };
 
-const vars$p = {
+const vars$q = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -11878,111 +12126,111 @@ const vars$p = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$p
+  vars: vars$q
 });
 
-const vars$o = PasscodeClass.cssVarList;
+const vars$p = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$o.hostDirection]: refs.direction,
-  [vars$o.fontFamily]: refs.fontFamily,
-  [vars$o.fontSize]: refs.fontSize,
-  [vars$o.labelTextColor]: refs.labelTextColor,
-  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$o.digitValueTextColor]: refs.valueTextColor,
-  [vars$o.digitPadding]: '0',
-  [vars$o.digitTextAlign]: 'center',
-  [vars$o.digitSpacing]: '4px',
-  [vars$o.hostWidth]: refs.width,
-  [vars$o.digitOutlineColor]: 'transparent',
-  [vars$o.digitOutlineWidth]: refs.outlineWidth,
-  [vars$o.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$o.digitSize]: refs.inputHeight,
+  [vars$p.hostDirection]: refs.direction,
+  [vars$p.fontFamily]: refs.fontFamily,
+  [vars$p.fontSize]: refs.fontSize,
+  [vars$p.labelTextColor]: refs.labelTextColor,
+  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$p.digitValueTextColor]: refs.valueTextColor,
+  [vars$p.digitPadding]: '0',
+  [vars$p.digitTextAlign]: 'center',
+  [vars$p.digitSpacing]: '4px',
+  [vars$p.hostWidth]: refs.width,
+  [vars$p.digitOutlineColor]: 'transparent',
+  [vars$p.digitOutlineWidth]: refs.outlineWidth,
+  [vars$p.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$p.digitSize]: refs.inputHeight,
 
   size: {
-    xs: { [vars$o.spinnerSize]: '15px' },
-    sm: { [vars$o.spinnerSize]: '20px' },
-    md: { [vars$o.spinnerSize]: '20px' },
-    lg: { [vars$o.spinnerSize]: '20px' },
+    xs: { [vars$p.spinnerSize]: '15px' },
+    sm: { [vars$p.spinnerSize]: '20px' },
+    md: { [vars$p.spinnerSize]: '20px' },
+    lg: { [vars$p.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$o.digitCaretTextColor]: 'transparent',
+    [vars$p.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$o.overlayOpacity]: refs.overlayOpacity,
+    [vars$p.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$o
+  vars: vars$p
 });
 
-const globalRefs$f = getThemeRefs(globals);
-const vars$n = LoaderLinearClass.cssVarList;
+const globalRefs$g = getThemeRefs(globals);
+const vars$o = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$n.hostDisplay]: 'inline-block',
-  [vars$n.hostWidth]: '100%',
+  [vars$o.hostDisplay]: 'inline-block',
+  [vars$o.hostWidth]: '100%',
 
-  [vars$n.barColor]: globalRefs$f.colors.surface.contrast,
-  [vars$n.barWidth]: '20%',
+  [vars$o.barColor]: globalRefs$g.colors.surface.contrast,
+  [vars$o.barWidth]: '20%',
 
-  [vars$n.barBackgroundColor]: globalRefs$f.colors.surface.light,
-  [vars$n.barBorderRadius]: '4px',
+  [vars$o.barBackgroundColor]: globalRefs$g.colors.surface.light,
+  [vars$o.barBorderRadius]: '4px',
 
-  [vars$n.animationDuration]: '2s',
-  [vars$n.animationTimingFunction]: 'linear',
-  [vars$n.animationIterationCount]: 'infinite',
-  [vars$n.verticalPadding]: '0.25em',
+  [vars$o.animationDuration]: '2s',
+  [vars$o.animationTimingFunction]: 'linear',
+  [vars$o.animationIterationCount]: 'infinite',
+  [vars$o.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$n.barHeight]: '2px' },
-    sm: { [vars$n.barHeight]: '4px' },
-    md: { [vars$n.barHeight]: '6px' },
-    lg: { [vars$n.barHeight]: '8px' },
+    xs: { [vars$o.barHeight]: '2px' },
+    sm: { [vars$o.barHeight]: '4px' },
+    md: { [vars$o.barHeight]: '6px' },
+    lg: { [vars$o.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$n.barColor]: globalRefs$f.colors.primary.main,
+      [vars$o.barColor]: globalRefs$g.colors.primary.main,
     },
     secondary: {
-      [vars$n.barColor]: globalRefs$f.colors.secondary.main,
+      [vars$o.barColor]: globalRefs$g.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$n.hostDisplay]: 'none',
+    [vars$o.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$n
+  vars: vars$o
 });
 
-const globalRefs$e = getThemeRefs(globals);
+const globalRefs$f = getThemeRefs(globals);
 const compVars$2 = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
-    spinnerColor: globalRefs$e.colors.surface.contrast,
+    spinnerColor: globalRefs$f.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$e.colors.primary.main,
+        spinnerColor: globalRefs$f.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$e.colors.secondary.main,
+        spinnerColor: globalRefs$f.colors.secondary.main,
       },
     },
   },
-  componentName$N
+  componentName$O
 );
 
 const loaderRadial = {
@@ -12011,7 +12259,7 @@ const loaderRadial = {
     [compVars$2.hostDisplay]: 'none',
   },
 };
-const vars$m = {
+const vars$n = {
   ...compVars$2,
   ...helperVars,
 };
@@ -12019,78 +12267,114 @@ const vars$m = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$m
+  vars: vars$n
 });
 
-const globalRefs$d = getThemeRefs(globals);
-const vars$l = ComboBoxClass.cssVarList;
+const globalRefs$e = getThemeRefs(globals);
+const vars$m = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$l.hostWidth]: refs.width,
-  [vars$l.hostDirection]: refs.direction,
-  [vars$l.fontSize]: refs.fontSize,
-  [vars$l.fontFamily]: refs.fontFamily,
-  [vars$l.labelTextColor]: refs.labelTextColor,
-  [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$l.inputBorderColor]: refs.borderColor,
-  [vars$l.inputBorderWidth]: refs.borderWidth,
-  [vars$l.inputBorderStyle]: refs.borderStyle,
-  [vars$l.inputBorderRadius]: refs.borderRadius,
-  [vars$l.inputOutlineColor]: refs.outlineColor,
-  [vars$l.inputOutlineOffset]: refs.outlineOffset,
-  [vars$l.inputOutlineWidth]: refs.outlineWidth,
-  [vars$l.inputOutlineStyle]: refs.outlineStyle,
-  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$l.inputValueTextColor]: refs.valueTextColor,
-  [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$l.inputBackgroundColor]: refs.backgroundColor,
-  [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$l.inputHeight]: refs.inputHeight,
-  [vars$l.inputDropdownButtonColor]: globalRefs$d.colors.surface.dark,
-  [vars$l.inputDropdownButtonCursor]: 'pointer',
-  [vars$l.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$l.inputDropdownButtonOffset]: globalRefs$d.spacing.xs,
-  [vars$l.overlayItemPaddingInlineStart]: globalRefs$d.spacing.xs,
-  [vars$l.overlayItemPaddingInlineEnd]: globalRefs$d.spacing.lg,
+  [vars$m.hostWidth]: refs.width,
+  [vars$m.hostDirection]: refs.direction,
+  [vars$m.fontSize]: refs.fontSize,
+  [vars$m.fontFamily]: refs.fontFamily,
+  [vars$m.labelTextColor]: refs.labelTextColor,
+  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$m.inputBorderColor]: refs.borderColor,
+  [vars$m.inputBorderWidth]: refs.borderWidth,
+  [vars$m.inputBorderStyle]: refs.borderStyle,
+  [vars$m.inputBorderRadius]: refs.borderRadius,
+  [vars$m.inputOutlineColor]: refs.outlineColor,
+  [vars$m.inputOutlineOffset]: refs.outlineOffset,
+  [vars$m.inputOutlineWidth]: refs.outlineWidth,
+  [vars$m.inputOutlineStyle]: refs.outlineStyle,
+  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$m.inputValueTextColor]: refs.valueTextColor,
+  [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$m.inputBackgroundColor]: refs.backgroundColor,
+  [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$m.inputHeight]: refs.inputHeight,
+  [vars$m.inputDropdownButtonColor]: globalRefs$e.colors.surface.dark,
+  [vars$m.inputDropdownButtonCursor]: 'pointer',
+  [vars$m.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$m.inputDropdownButtonOffset]: globalRefs$e.spacing.xs,
+  [vars$m.overlayItemPaddingInlineStart]: globalRefs$e.spacing.xs,
+  [vars$m.overlayItemPaddingInlineEnd]: globalRefs$e.spacing.lg,
 
   _readonly: {
-    [vars$l.inputDropdownButtonCursor]: 'default',
+    [vars$m.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$l.overlayFontSize]: refs.fontSize,
-  [vars$l.overlayFontFamily]: refs.fontFamily,
-  [vars$l.overlayCursor]: 'pointer',
-  [vars$l.overlayItemBoxShadow]: 'none',
-  [vars$l.overlayBackground]: refs.backgroundColor,
-  [vars$l.overlayTextColor]: refs.valueTextColor,
+  [vars$m.overlayFontSize]: refs.fontSize,
+  [vars$m.overlayFontFamily]: refs.fontFamily,
+  [vars$m.overlayCursor]: 'pointer',
+  [vars$m.overlayItemBoxShadow]: 'none',
+  [vars$m.overlayBackground]: refs.backgroundColor,
+  [vars$m.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$l.overlay.minHeight]: '400px',
-  [vars$l.overlay.margin]: '0',
+  [vars$m.overlay.minHeight]: '400px',
+  [vars$m.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$l
+  vars: vars$m
 });
 
-const vars$k = ImageClass.cssVarList;
+const vars$l = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$k
+  vars: vars$l
 });
 
-const vars$j = PhoneFieldClass.cssVarList;
+const vars$k = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$j.hostWidth]: refs.width,
+  [vars$k.hostWidth]: refs.width,
+  [vars$k.hostDirection]: refs.direction,
+  [vars$k.fontSize]: refs.fontSize,
+  [vars$k.fontFamily]: refs.fontFamily,
+  [vars$k.labelTextColor]: refs.labelTextColor,
+  [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$k.inputValueTextColor]: refs.valueTextColor,
+  [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$k.inputBorderStyle]: refs.borderStyle,
+  [vars$k.inputBorderWidth]: refs.borderWidth,
+  [vars$k.inputBorderColor]: refs.borderColor,
+  [vars$k.inputBorderRadius]: refs.borderRadius,
+  [vars$k.inputOutlineStyle]: refs.outlineStyle,
+  [vars$k.inputOutlineWidth]: refs.outlineWidth,
+  [vars$k.inputOutlineColor]: refs.outlineColor,
+  [vars$k.inputOutlineOffset]: refs.outlineOffset,
+  [vars$k.phoneInputWidth]: refs.minWidth,
+  [vars$k.countryCodeInputWidth]: '5em',
+  [vars$k.countryCodeDropdownWidth]: '20em',
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$k
+});
+
+const vars$j = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$j.hostWidth]: '16em',
+  [vars$j.hostMinWidth]: refs.minWidth,
   [vars$j.hostDirection]: refs.direction,
   [vars$j.fontSize]: refs.fontSize,
   [vars$j.fontFamily]: refs.fontFamily,
@@ -12107,184 +12391,148 @@ const phoneField = {
   [vars$j.inputOutlineWidth]: refs.outlineWidth,
   [vars$j.inputOutlineColor]: refs.outlineColor,
   [vars$j.inputOutlineOffset]: refs.outlineOffset,
-  [vars$j.phoneInputWidth]: refs.minWidth,
-  [vars$j.countryCodeInputWidth]: '5em',
-  [vars$j.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  _fullWidth: {
+    [vars$j.hostWidth]: refs.width,
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
+  default: phoneInputBoxField,
   vars: vars$j
 });
 
-const vars$i = PhoneFieldInputBoxClass.cssVarList;
+const globalRefs$d = getThemeRefs(globals);
+const vars$i = NewPasswordClass.cssVarList;
 
-const phoneInputBoxField = {
-  [vars$i.hostWidth]: '16em',
+const newPassword = {
+  [vars$i.hostWidth]: refs.width,
   [vars$i.hostMinWidth]: refs.minWidth,
   [vars$i.hostDirection]: refs.direction,
   [vars$i.fontSize]: refs.fontSize,
   [vars$i.fontFamily]: refs.fontFamily,
-  [vars$i.labelTextColor]: refs.labelTextColor,
-  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$i.spaceBetweenInputs]: '1em',
   [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$i.inputValueTextColor]: refs.valueTextColor,
-  [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$i.inputBorderStyle]: refs.borderStyle,
-  [vars$i.inputBorderWidth]: refs.borderWidth,
-  [vars$i.inputBorderColor]: refs.borderColor,
-  [vars$i.inputBorderRadius]: refs.borderRadius,
-  [vars$i.inputOutlineStyle]: refs.outlineStyle,
-  [vars$i.inputOutlineWidth]: refs.outlineWidth,
-  [vars$i.inputOutlineColor]: refs.outlineColor,
-  [vars$i.inputOutlineOffset]: refs.outlineOffset,
-  _fullWidth: {
-    [vars$i.hostWidth]: refs.width,
-  },
-};
-
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$i
-});
-
-const globalRefs$c = getThemeRefs(globals);
-const vars$h = NewPasswordClass.cssVarList;
-
-const newPassword = {
-  [vars$h.hostWidth]: refs.width,
-  [vars$h.hostMinWidth]: refs.minWidth,
-  [vars$h.hostDirection]: refs.direction,
-  [vars$h.fontSize]: refs.fontSize,
-  [vars$h.fontFamily]: refs.fontFamily,
-  [vars$h.spaceBetweenInputs]: '1em',
-  [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$h.policyPreviewBackgroundColor]: 'none',
-  [vars$h.policyPreviewPadding]: globalRefs$c.spacing.lg,
+  [vars$i.policyPreviewBackgroundColor]: 'none',
+  [vars$i.policyPreviewPadding]: globalRefs$d.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$h.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$i.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$h
+  vars: vars$i
 });
 
-const vars$g = UploadFileClass.cssVarList;
+const vars$h = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$g.hostDirection]: refs.direction,
-  [vars$g.labelTextColor]: refs.labelTextColor,
-  [vars$g.fontFamily]: refs.fontFamily,
+  [vars$h.hostDirection]: refs.direction,
+  [vars$h.labelTextColor]: refs.labelTextColor,
+  [vars$h.fontFamily]: refs.fontFamily,
 
-  [vars$g.iconSize]: '2em',
+  [vars$h.iconSize]: '2em',
 
-  [vars$g.hostPadding]: '0.75em',
-  [vars$g.gap]: '0.5em',
+  [vars$h.hostPadding]: '0.75em',
+  [vars$h.gap]: '0.5em',
 
-  [vars$g.fontSize]: '16px',
-  [vars$g.titleFontWeight]: '500',
-  [vars$g.lineHeight]: '1em',
+  [vars$h.fontSize]: '16px',
+  [vars$h.titleFontWeight]: '500',
+  [vars$h.lineHeight]: '1em',
 
-  [vars$g.borderWidth]: refs.borderWidth,
-  [vars$g.borderColor]: refs.borderColor,
-  [vars$g.borderRadius]: refs.borderRadius,
-  [vars$g.borderStyle]: 'dashed',
+  [vars$h.borderWidth]: refs.borderWidth,
+  [vars$h.borderColor]: refs.borderColor,
+  [vars$h.borderRadius]: refs.borderRadius,
+  [vars$h.borderStyle]: 'dashed',
 
   _required: {
-    [vars$g.requiredIndicator]: refs.requiredIndicator,
+    [vars$h.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$g.hostHeight]: '196px',
-      [vars$g.hostWidth]: '200px',
-      [vars$g.titleFontSize]: '0.875em',
-      [vars$g.descriptionFontSize]: '0.875em',
-      [vars$g.lineHeight]: '1.25em',
+      [vars$h.hostHeight]: '196px',
+      [vars$h.hostWidth]: '200px',
+      [vars$h.titleFontSize]: '0.875em',
+      [vars$h.descriptionFontSize]: '0.875em',
+      [vars$h.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$g.hostHeight]: '216px',
-      [vars$g.hostWidth]: '230px',
-      [vars$g.titleFontSize]: '1em',
-      [vars$g.descriptionFontSize]: '0.875em',
-      [vars$g.lineHeight]: '1.25em',
+      [vars$h.hostHeight]: '216px',
+      [vars$h.hostWidth]: '230px',
+      [vars$h.titleFontSize]: '1em',
+      [vars$h.descriptionFontSize]: '0.875em',
+      [vars$h.lineHeight]: '1.25em',
     },
     md: {
-      [vars$g.hostHeight]: '256px',
-      [vars$g.hostWidth]: '312px',
-      [vars$g.titleFontSize]: '1.125em',
-      [vars$g.descriptionFontSize]: '1em',
-      [vars$g.lineHeight]: '1.5em',
+      [vars$h.hostHeight]: '256px',
+      [vars$h.hostWidth]: '312px',
+      [vars$h.titleFontSize]: '1.125em',
+      [vars$h.descriptionFontSize]: '1em',
+      [vars$h.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$g.hostHeight]: '280px',
-      [vars$g.hostWidth]: '336px',
-      [vars$g.titleFontSize]: '1.125em',
-      [vars$g.descriptionFontSize]: '1.125em',
-      [vars$g.lineHeight]: '1.75em',
+      [vars$h.hostHeight]: '280px',
+      [vars$h.hostWidth]: '336px',
+      [vars$h.titleFontSize]: '1.125em',
+      [vars$h.descriptionFontSize]: '1.125em',
+      [vars$h.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$g.hostWidth]: refs.width,
+    [vars$h.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$g
+  vars: vars$h
 });
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
 
-const vars$f = ButtonSelectionGroupItemClass.cssVarList;
+const vars$g = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$f.hostDirection]: 'inherit',
-  [vars$f.backgroundColor]: globalRefs$b.colors.surface.main,
-  [vars$f.labelTextColor]: globalRefs$b.colors.surface.contrast,
-  [vars$f.borderColor]: globalRefs$b.colors.surface.light,
-  [vars$f.borderStyle]: 'solid',
-  [vars$f.borderRadius]: globalRefs$b.radius.sm,
-  [vars$f.outlineColor]: 'transparent',
-  [vars$f.borderWidth]: globalRefs$b.border.xs,
+  [vars$g.hostDirection]: 'inherit',
+  [vars$g.backgroundColor]: globalRefs$c.colors.surface.main,
+  [vars$g.labelTextColor]: globalRefs$c.colors.surface.contrast,
+  [vars$g.borderColor]: globalRefs$c.colors.surface.light,
+  [vars$g.borderStyle]: 'solid',
+  [vars$g.borderRadius]: globalRefs$c.radius.sm,
+  [vars$g.outlineColor]: 'transparent',
+  [vars$g.borderWidth]: globalRefs$c.border.xs,
 
   _hover: {
-    [vars$f.backgroundColor]: globalRefs$b.colors.surface.highlight,
+    [vars$g.backgroundColor]: globalRefs$c.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$f.outlineColor]: globalRefs$b.colors.surface.light,
+    [vars$g.outlineColor]: globalRefs$c.colors.surface.light,
   },
 
   _selected: {
-    [vars$f.borderColor]: globalRefs$b.colors.surface.contrast,
-    [vars$f.backgroundColor]: globalRefs$b.colors.surface.contrast,
-    [vars$f.labelTextColor]: globalRefs$b.colors.surface.main,
+    [vars$g.borderColor]: globalRefs$c.colors.surface.contrast,
+    [vars$g.backgroundColor]: globalRefs$c.colors.surface.contrast,
+    [vars$g.labelTextColor]: globalRefs$c.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$f
+  vars: vars$g
 });
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 
 const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostDirection]: refs.direction,
@@ -12292,84 +12540,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.itemsSpacing]: globalRefs$a.spacing.sm,
+  [vars.itemsSpacing]: globalRefs$b.spacing.sm,
   [vars.hostWidth]: refs.width,
 });
 
-const vars$e = ButtonSelectionGroupClass.cssVarList;
+const vars$f = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$e),
+  ...createBaseButtonSelectionGroupMappings(vars$f),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$e
+  vars: vars$f
 });
 
-const vars$d = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$e = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$d),
+  ...createBaseButtonSelectionGroupMappings(vars$e),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$d
+  vars: vars$e
 });
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 
 const compVars$1 = ModalClass.cssVarList;
 
 const modal = {
-  [compVars$1.overlayBackgroundColor]: globalRefs$9.colors.surface.main,
-  [compVars$1.overlayShadow]: globalRefs$9.shadow.wide['2xl'],
+  [compVars$1.overlayBackgroundColor]: globalRefs$a.colors.surface.main,
+  [compVars$1.overlayShadow]: globalRefs$a.shadow.wide['2xl'],
   [compVars$1.overlayWidth]: '540px',
 };
 
-const vars$c = {
+const vars$d = {
   ...compVars$1,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$c
+  vars: vars$d
 });
 
-const globalRefs$8 = getThemeRefs(globals);
-const vars$b = GridClass.cssVarList;
+const globalRefs$9 = getThemeRefs(globals);
+const vars$c = GridClass.cssVarList;
 
 const grid = {
-  [vars$b.hostWidth]: '100%',
-  [vars$b.hostHeight]: '100%',
-  [vars$b.hostMinHeight]: '400px',
-  [vars$b.fontWeight]: '400',
-  [vars$b.backgroundColor]: globalRefs$8.colors.surface.main,
+  [vars$c.hostWidth]: '100%',
+  [vars$c.hostHeight]: '100%',
+  [vars$c.hostMinHeight]: '400px',
+  [vars$c.fontWeight]: '400',
+  [vars$c.backgroundColor]: globalRefs$9.colors.surface.main,
 
-  [vars$b.fontSize]: refs.fontSize,
-  [vars$b.fontFamily]: refs.fontFamily,
+  [vars$c.fontSize]: refs.fontSize,
+  [vars$c.fontFamily]: refs.fontFamily,
 
-  [vars$b.sortIndicatorsColor]: globalRefs$8.colors.surface.light,
-  [vars$b.activeSortIndicator]: globalRefs$8.colors.surface.dark,
-  [vars$b.resizeHandleColor]: globalRefs$8.colors.surface.light,
+  [vars$c.sortIndicatorsColor]: globalRefs$9.colors.surface.light,
+  [vars$c.activeSortIndicator]: globalRefs$9.colors.surface.dark,
+  [vars$c.resizeHandleColor]: globalRefs$9.colors.surface.light,
 
-  [vars$b.borderWidth]: refs.borderWidth,
-  [vars$b.borderStyle]: refs.borderStyle,
-  [vars$b.borderRadius]: refs.borderRadius,
-  [vars$b.borderColor]: 'transparent',
+  [vars$c.borderWidth]: refs.borderWidth,
+  [vars$c.borderStyle]: refs.borderStyle,
+  [vars$c.borderRadius]: refs.borderRadius,
+  [vars$c.borderColor]: 'transparent',
 
-  [vars$b.headerRowTextColor]: globalRefs$8.colors.surface.dark,
-  [vars$b.separatorColor]: globalRefs$8.colors.surface.light,
+  [vars$c.headerRowTextColor]: globalRefs$9.colors.surface.dark,
+  [vars$c.separatorColor]: globalRefs$9.colors.surface.light,
 
-  [vars$b.valueTextColor]: globalRefs$8.colors.surface.contrast,
-  [vars$b.selectedBackgroundColor]: globalRefs$8.colors.surface.highlight,
+  [vars$c.valueTextColor]: globalRefs$9.colors.surface.contrast,
+  [vars$c.selectedBackgroundColor]: globalRefs$9.colors.surface.highlight,
 
   _bordered: {
-    [vars$b.borderColor]: refs.borderColor,
+    [vars$c.borderColor]: refs.borderColor,
   },
 };
 
@@ -12377,53 +12625,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$b
+  vars: vars$c
 });
 
-const globalRefs$7 = getThemeRefs(globals);
-const vars$a = NotificationCardClass.cssVarList;
+const globalRefs$8 = getThemeRefs(globals);
+const vars$b = NotificationCardClass.cssVarList;
 
 const shadowColor = '#00000020';
 
 const notification = {
-  [vars$a.hostMinWidth]: '415px',
-  [vars$a.fontFamily]: globalRefs$7.fonts.font1.family,
-  [vars$a.fontSize]: globalRefs$7.typography.body1.size,
-  [vars$a.backgroundColor]: globalRefs$7.colors.surface.main,
-  [vars$a.textColor]: globalRefs$7.colors.surface.contrast,
-  [vars$a.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}`,
-  [vars$a.verticalPadding]: '0.625em',
-  [vars$a.horizontalPadding]: '1.5em',
-  [vars$a.borderRadius]: globalRefs$7.radius.xs,
+  [vars$b.hostMinWidth]: '415px',
+  [vars$b.fontFamily]: globalRefs$8.fonts.font1.family,
+  [vars$b.fontSize]: globalRefs$8.typography.body1.size,
+  [vars$b.backgroundColor]: globalRefs$8.colors.surface.main,
+  [vars$b.textColor]: globalRefs$8.colors.surface.contrast,
+  [vars$b.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
+  [vars$b.verticalPadding]: '0.625em',
+  [vars$b.horizontalPadding]: '1.5em',
+  [vars$b.borderRadius]: globalRefs$8.radius.xs,
 
   _bordered: {
-    [vars$a.borderWidth]: globalRefs$7.border.sm,
-    [vars$a.borderStyle]: 'solid',
-    [vars$a.borderColor]: 'transparent',
+    [vars$b.borderWidth]: globalRefs$8.border.sm,
+    [vars$b.borderStyle]: 'solid',
+    [vars$b.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$a.fontSize]: '12px' },
-    sm: { [vars$a.fontSize]: '14px' },
-    md: { [vars$a.fontSize]: '16px' },
-    lg: { [vars$a.fontSize]: '18px' },
+    xs: { [vars$b.fontSize]: '12px' },
+    sm: { [vars$b.fontSize]: '14px' },
+    md: { [vars$b.fontSize]: '16px' },
+    lg: { [vars$b.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$a.backgroundColor]: globalRefs$7.colors.primary.main,
-      [vars$a.textColor]: globalRefs$7.colors.primary.contrast,
-      [vars$a.borderColor]: globalRefs$7.colors.primary.light,
+      [vars$b.backgroundColor]: globalRefs$8.colors.primary.main,
+      [vars$b.textColor]: globalRefs$8.colors.primary.contrast,
+      [vars$b.borderColor]: globalRefs$8.colors.primary.light,
     },
     success: {
-      [vars$a.backgroundColor]: globalRefs$7.colors.success.main,
-      [vars$a.textColor]: globalRefs$7.colors.success.contrast,
-      [vars$a.borderColor]: globalRefs$7.colors.success.light,
+      [vars$b.backgroundColor]: globalRefs$8.colors.success.main,
+      [vars$b.textColor]: globalRefs$8.colors.success.contrast,
+      [vars$b.borderColor]: globalRefs$8.colors.success.light,
     },
     error: {
-      [vars$a.backgroundColor]: globalRefs$7.colors.error.main,
-      [vars$a.textColor]: globalRefs$7.colors.error.contrast,
-      [vars$a.borderColor]: globalRefs$7.colors.error.light,
+      [vars$b.backgroundColor]: globalRefs$8.colors.error.main,
+      [vars$b.textColor]: globalRefs$8.colors.error.contrast,
+      [vars$b.borderColor]: globalRefs$8.colors.error.light,
     },
   },
 };
@@ -12431,128 +12679,128 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$a
+  vars: vars$b
 });
 
-const globalRefs$6 = getThemeRefs(globals);
-const vars$9 = MultiSelectComboBoxClass.cssVarList;
+const globalRefs$7 = getThemeRefs(globals);
+const vars$a = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$9.hostWidth]: refs.width,
-  [vars$9.hostDirection]: refs.direction,
-  [vars$9.fontSize]: refs.fontSize,
-  [vars$9.fontFamily]: refs.fontFamily,
-  [vars$9.labelTextColor]: refs.labelTextColor,
-  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$9.inputBorderColor]: refs.borderColor,
-  [vars$9.inputBorderWidth]: refs.borderWidth,
-  [vars$9.inputBorderStyle]: refs.borderStyle,
-  [vars$9.inputBorderRadius]: refs.borderRadius,
-  [vars$9.inputOutlineColor]: refs.outlineColor,
-  [vars$9.inputOutlineOffset]: refs.outlineOffset,
-  [vars$9.inputOutlineWidth]: refs.outlineWidth,
-  [vars$9.inputOutlineStyle]: refs.outlineStyle,
-  [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$9.inputValueTextColor]: refs.valueTextColor,
-  [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$9.inputBackgroundColor]: refs.backgroundColor,
-  [vars$9.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$9.inputVerticalPadding]: refs.verticalPadding,
-  [vars$9.inputHeight]: refs.inputHeight,
-  [vars$9.inputDropdownButtonColor]: globalRefs$6.colors.surface.dark,
-  [vars$9.inputDropdownButtonCursor]: 'pointer',
-  [vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$9.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
-  [vars$9.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
-  [vars$9.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
-  [vars$9.chipFontSize]: refs.chipFontSize,
-  [vars$9.chipTextColor]: globalRefs$6.colors.surface.contrast,
-  [vars$9.chipBackgroundColor]: globalRefs$6.colors.surface.light,
+  [vars$a.hostWidth]: refs.width,
+  [vars$a.hostDirection]: refs.direction,
+  [vars$a.fontSize]: refs.fontSize,
+  [vars$a.fontFamily]: refs.fontFamily,
+  [vars$a.labelTextColor]: refs.labelTextColor,
+  [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$a.inputBorderColor]: refs.borderColor,
+  [vars$a.inputBorderWidth]: refs.borderWidth,
+  [vars$a.inputBorderStyle]: refs.borderStyle,
+  [vars$a.inputBorderRadius]: refs.borderRadius,
+  [vars$a.inputOutlineColor]: refs.outlineColor,
+  [vars$a.inputOutlineOffset]: refs.outlineOffset,
+  [vars$a.inputOutlineWidth]: refs.outlineWidth,
+  [vars$a.inputOutlineStyle]: refs.outlineStyle,
+  [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$a.inputValueTextColor]: refs.valueTextColor,
+  [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$a.inputBackgroundColor]: refs.backgroundColor,
+  [vars$a.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$a.inputVerticalPadding]: refs.verticalPadding,
+  [vars$a.inputHeight]: refs.inputHeight,
+  [vars$a.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
+  [vars$a.inputDropdownButtonCursor]: 'pointer',
+  [vars$a.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$a.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
+  [vars$a.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
+  [vars$a.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
+  [vars$a.chipFontSize]: refs.chipFontSize,
+  [vars$a.chipTextColor]: globalRefs$7.colors.surface.contrast,
+  [vars$a.chipBackgroundColor]: globalRefs$7.colors.surface.light,
 
   _readonly: {
-    [vars$9.inputDropdownButtonCursor]: 'default',
+    [vars$a.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$9.overlayFontSize]: refs.fontSize,
-  [vars$9.overlayFontFamily]: refs.fontFamily,
-  [vars$9.overlayCursor]: 'pointer',
-  [vars$9.overlayItemBoxShadow]: 'none',
-  [vars$9.overlayBackground]: refs.backgroundColor,
-  [vars$9.overlayTextColor]: refs.valueTextColor,
+  [vars$a.overlayFontSize]: refs.fontSize,
+  [vars$a.overlayFontFamily]: refs.fontFamily,
+  [vars$a.overlayCursor]: 'pointer',
+  [vars$a.overlayItemBoxShadow]: 'none',
+  [vars$a.overlayBackground]: refs.backgroundColor,
+  [vars$a.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$9.overlay.minHeight]: '400px',
-  [vars$9.overlay.margin]: '0',
+  [vars$a.overlay.minHeight]: '400px',
+  [vars$a.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$9
+  vars: vars$a
 });
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$8 = BadgeClass.cssVarList;
+const globalRefs$6 = getThemeRefs(globals);
+const vars$9 = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$8.hostWidth]: 'fit-content',
-  [vars$8.hostDirection]: globalRefs$5.direction,
+  [vars$9.hostWidth]: 'fit-content',
+  [vars$9.hostDirection]: globalRefs$6.direction,
 
-  [vars$8.textAlign]: 'center',
+  [vars$9.textAlign]: 'center',
 
-  [vars$8.fontFamily]: globalRefs$5.fonts.font1.family,
-  [vars$8.fontWeight]: '400',
+  [vars$9.fontFamily]: globalRefs$6.fonts.font1.family,
+  [vars$9.fontWeight]: '400',
 
-  [vars$8.verticalPadding]: '0.25em',
-  [vars$8.horizontalPadding]: '0.5em',
+  [vars$9.verticalPadding]: '0.25em',
+  [vars$9.horizontalPadding]: '0.5em',
 
-  [vars$8.borderWidth]: globalRefs$5.border.xs,
-  [vars$8.borderRadius]: globalRefs$5.radius.xs,
-  [vars$8.borderColor]: 'transparent',
-  [vars$8.borderStyle]: 'solid',
+  [vars$9.borderWidth]: globalRefs$6.border.xs,
+  [vars$9.borderRadius]: globalRefs$6.radius.xs,
+  [vars$9.borderColor]: 'transparent',
+  [vars$9.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$8.hostWidth]: '100%',
+    [vars$9.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$8.fontSize]: '12px' },
-    sm: { [vars$8.fontSize]: '14px' },
-    md: { [vars$8.fontSize]: '16px' },
-    lg: { [vars$8.fontSize]: '18px' },
+    xs: { [vars$9.fontSize]: '12px' },
+    sm: { [vars$9.fontSize]: '14px' },
+    md: { [vars$9.fontSize]: '16px' },
+    lg: { [vars$9.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$8.textColor]: globalRefs$5.colors.surface.dark,
+      [vars$9.textColor]: globalRefs$6.colors.surface.dark,
       _bordered: {
-        [vars$8.borderColor]: globalRefs$5.colors.surface.light,
+        [vars$9.borderColor]: globalRefs$6.colors.surface.light,
       },
     },
     primary: {
-      [vars$8.textColor]: globalRefs$5.colors.primary.main,
+      [vars$9.textColor]: globalRefs$6.colors.primary.main,
       _bordered: {
-        [vars$8.borderColor]: globalRefs$5.colors.primary.light,
+        [vars$9.borderColor]: globalRefs$6.colors.primary.light,
       },
     },
     secondary: {
-      [vars$8.textColor]: globalRefs$5.colors.secondary.main,
+      [vars$9.textColor]: globalRefs$6.colors.secondary.main,
       _bordered: {
-        [vars$8.borderColor]: globalRefs$5.colors.secondary.light,
+        [vars$9.borderColor]: globalRefs$6.colors.secondary.light,
       },
     },
     error: {
-      [vars$8.textColor]: globalRefs$5.colors.error.main,
+      [vars$9.textColor]: globalRefs$6.colors.error.main,
       _bordered: {
-        [vars$8.borderColor]: globalRefs$5.colors.error.light,
+        [vars$9.borderColor]: globalRefs$6.colors.error.light,
       },
     },
     success: {
-      [vars$8.textColor]: globalRefs$5.colors.success.main,
+      [vars$9.textColor]: globalRefs$6.colors.success.main,
       _bordered: {
-        [vars$8.borderColor]: globalRefs$5.colors.success.light,
+        [vars$9.borderColor]: globalRefs$6.colors.success.light,
       },
     },
   },
@@ -12561,19 +12809,19 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$8
+  vars: vars$9
 });
 
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 const compVars = AvatarClass.cssVarList;
 
 const avatar = {
-  [compVars.hostDirection]: globalRefs$4.direction,
-  [compVars.editableIconColor]: globalRefs$4.colors.surface.dark,
-  [compVars.editableBorderColor]: globalRefs$4.colors.surface.dark,
-  [compVars.editableBackgroundColor]: globalRefs$4.colors.surface.main,
-  [compVars.avatarTextColor]: globalRefs$4.colors.surface.main,
-  [compVars.avatarBackgroundColor]: globalRefs$4.colors.surface.dark,
+  [compVars.hostDirection]: globalRefs$5.direction,
+  [compVars.editableIconColor]: globalRefs$5.colors.surface.dark,
+  [compVars.editableBorderColor]: globalRefs$5.colors.surface.dark,
+  [compVars.editableBackgroundColor]: globalRefs$5.colors.surface.main,
+  [compVars.avatarTextColor]: globalRefs$5.colors.surface.main,
+  [compVars.avatarBackgroundColor]: globalRefs$5.colors.surface.dark,
 
   _editable: {
     [compVars.cursor]: 'pointer',
@@ -12599,137 +12847,283 @@ const avatar = {
   },
 };
 
-const vars$7 = {
+const vars$8 = {
   ...compVars,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$7
+  vars: vars$8
 });
 
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 
-const vars$6 = MappingsFieldClass.cssVarList;
+const vars$7 = MappingsFieldClass.cssVarList;
 
 const mappingsField = {
-  [vars$6.hostWidth]: refs.width,
-  [vars$6.hostDirection]: refs.direction,
-  [vars$6.fontSize]: refs.fontSize,
-  [vars$6.fontFamily]: refs.fontFamily,
-  [vars$6.separatorFontSize]: '14px',
-  [vars$6.labelsFontSize]: '14px',
-  [vars$6.labelsLineHeight]: '1',
-  [vars$6.labelsMarginBottom]: '6px',
-  [vars$6.labelTextColor]: refs.labelTextColor,
-  [vars$6.itemMarginBottom]: '1em',
+  [vars$7.hostWidth]: refs.width,
+  [vars$7.hostDirection]: refs.direction,
+  [vars$7.fontSize]: refs.fontSize,
+  [vars$7.fontFamily]: refs.fontFamily,
+  [vars$7.separatorFontSize]: '14px',
+  [vars$7.labelsFontSize]: '14px',
+  [vars$7.labelsLineHeight]: '1',
+  [vars$7.labelsMarginBottom]: '6px',
+  [vars$7.labelTextColor]: refs.labelTextColor,
+  [vars$7.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$6.valueLabelMinWidth]: refs.minWidth,
+  [vars$7.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$6.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$3.border.xs})`,
-  [vars$6.separatorWidth]: '70px',
-  [vars$6.removeButtonWidth]: '60px',
+  [vars$7.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$4.border.xs})`,
+  [vars$7.separatorWidth]: '70px',
+  [vars$7.removeButtonWidth]: '60px',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
-  vars: vars$6
+  vars: vars$7
 });
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$5 = UserAttributeClass.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
+const vars$6 = UserAttributeClass.cssVarList;
 
 const userAttribute = {
-  [vars$5.hostDirection]: globalRefs$2.direction,
-  [vars$5.labelTextWidth]: '150px',
-  [vars$5.valueTextWidth]: '200px',
-  [vars$5.badgeMaxWidth]: '85px',
-  [vars$5.itemsGap]: '16px',
-  [vars$5.hostMinWidth]: '530px',
+  [vars$6.hostDirection]: globalRefs$3.direction,
+  [vars$6.labelTextWidth]: '150px',
+  [vars$6.valueTextWidth]: '200px',
+  [vars$6.badgeMaxWidth]: '85px',
+  [vars$6.itemsGap]: '16px',
+  [vars$6.hostMinWidth]: '530px',
   _fullWidth: {
-    [vars$5.hostWidth]: '100%',
+    [vars$6.hostWidth]: '100%',
   },
 };
 
 var userAttribute$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAttribute,
-  vars: vars$5
+  vars: vars$6
 });
 
-const globalRefs$1 = getThemeRefs(globals);
-const vars$4 = UserAuthMethodClass.cssVarList;
+const globalRefs$2 = getThemeRefs(globals);
+const vars$5 = UserAuthMethodClass.cssVarList;
 
 const userAuthMethod = {
-  [vars$4.hostDirection]: globalRefs$1.direction,
-  [vars$4.labelTextWidth]: '200px',
-  [vars$4.itemsGap]: '16px',
-  [vars$4.hostMinWidth]: '530px',
-  [vars$4.iconSize]: '24px',
+  [vars$5.hostDirection]: globalRefs$2.direction,
+  [vars$5.labelTextWidth]: '200px',
+  [vars$5.itemsGap]: '16px',
+  [vars$5.hostMinWidth]: '530px',
+  [vars$5.iconSize]: '24px',
   _fullWidth: {
-    [vars$4.hostWidth]: '100%',
+    [vars$5.hostWidth]: '100%',
   },
 };
 
 var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAuthMethod,
-  vars: vars$4
+  vars: vars$5
 });
 
-const vars$3 = SamlGroupMappingsClass.cssVarList;
+const vars$4 = SamlGroupMappingsClass.cssVarList;
 
 const samlGroupMappings = {
-  [vars$3.hostWidth]: refs.width,
-  [vars$3.hostDirection]: refs.direction,
-  [vars$3.groupNameInputMarginBottom]: '1em',
+  [vars$4.hostWidth]: refs.width,
+  [vars$4.hostDirection]: refs.direction,
+  [vars$4.groupNameInputMarginBottom]: '1em',
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: samlGroupMappings,
   samlGroupMappings: samlGroupMappings,
-  vars: vars$3
+  vars: vars$4
 });
 
-const globalRefs = getThemeRefs(globals);
-const vars$2 = PolicyValidationClass.cssVarList;
+const globalRefs$1 = getThemeRefs(globals);
+const vars$3 = PolicyValidationClass.cssVarList;
 
 const policyValidation = {
-  [vars$2.fontFamily]: refs.fontFamily,
-  [vars$2.fontSize]: refs.labelFontSize,
-  [vars$2.textColor]: refs.labelTextColor,
-  [vars$2.borderWidth]: refs.borderWidth,
-  [vars$2.borderStyle]: refs.borderStyle,
-  [vars$2.borderColor]: refs.borderColor,
-  [vars$2.borderRadius]: globalRefs.radius.sm,
-  [vars$2.backgroundColor]: 'none',
-  [vars$2.padding]: '0px',
-  [vars$2.labelMargin]: globalRefs.spacing.sm,
-  [vars$2.itemsSpacing]: globalRefs.spacing.lg,
-  [vars$2.itemSymbolDefault]: "'\\2022'", // "•"
-  [vars$2.itemSymbolSuccess]: "'\\2713'", // "✓"
-  [vars$2.itemSymbolError]: "'\\2A09'", // "⨉"
-  [vars$2.itemSymbolSuccessColor]: globalRefs.colors.success.main,
-  [vars$2.itemSymbolErrorColor]: globalRefs.colors.error.main,
+  [vars$3.fontFamily]: refs.fontFamily,
+  [vars$3.fontSize]: refs.labelFontSize,
+  [vars$3.textColor]: refs.labelTextColor,
+  [vars$3.borderWidth]: refs.borderWidth,
+  [vars$3.borderStyle]: refs.borderStyle,
+  [vars$3.borderColor]: refs.borderColor,
+  [vars$3.borderRadius]: globalRefs$1.radius.sm,
+  [vars$3.backgroundColor]: 'none',
+  [vars$3.padding]: '0px',
+  [vars$3.labelMargin]: globalRefs$1.spacing.sm,
+  [vars$3.itemsSpacing]: globalRefs$1.spacing.lg,
+  [vars$3.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars$3.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars$3.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars$3.itemSymbolSuccessColor]: globalRefs$1.colors.success.main,
+  [vars$3.itemSymbolErrorColor]: globalRefs$1.colors.error.main,
 };
 
 var policyValidation$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: policyValidation,
-  vars: vars$2
+  vars: vars$3
 });
 
-const vars$1 = IconClass.cssVarList;
+const vars$2 = IconClass.cssVarList;
 
 const icon = {};
 
 var icon$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon,
+  vars: vars$2
+});
+
+const globalRefs = getThemeRefs(globals);
+
+const vars$1 = CodeSnippetClass.cssVarList;
+
+const light = {
+  color1: '#fa0',
+  color2: '#d73a49',
+  color3: '#6f42c1',
+  color4: '#005cc5',
+  color5: '#e36209',
+  color6: '#6a737d',
+  color7: '#22863a',
+  color8: '#24292e',
+  color9: '#735c0f',
+  color10: '#f0fff4',
+  color11: '#b31d28',
+  color12: '#ffeef0',
+  color13: '#032f62',
+};
+
+const dark = {
+  color1: '#c9d1d9',
+  color2: '#ff7b72',
+  color3: '#d2a8ff',
+  color4: '#79c0ff',
+  color5: '#ffa657',
+  color6: '#8b949e',
+  color7: '#7ee787',
+  color8: '#c9d1d9',
+  color9: '#735c0f',
+  color10: '#f0fff4',
+  color11: '#67060c',
+  color12: '#ffeef0',
+  color13: '#a5d6ff',
+};
+
+const CodeSnippet = {
+  [vars$1.rootBgColor]: globalRefs.colors.surface.main,
+  [vars$1.rootTextColor]: globalRefs.colors.surface.contrast,
+  [vars$1.docTagTextColor]: light.color2,
+  [vars$1.keywordTextColor]: light.color2,
+  [vars$1.metaKeywordTextColor]: light.color2,
+  [vars$1.templateTagTextColor]: light.color2,
+  [vars$1.templateVariableTextColor]: light.color2,
+  [vars$1.typeTextColor]: light.color2,
+  [vars$1.variableLanguageTextColor]: light.color2,
+  [vars$1.titleTextColor]: light.color3,
+  [vars$1.titleClassTextColor]: light.color3,
+  [vars$1.titleClassInheritedTextColor]: light.color3,
+  [vars$1.titleFunctionTextColor]: light.color3,
+  [vars$1.attrTextColor]: light.color4,
+  [vars$1.attributeTextColor]: light.color4,
+  [vars$1.literalTextColor]: light.color4,
+  [vars$1.metaTextColor]: light.color4,
+  [vars$1.numberTextColor]: light.color4,
+  [vars$1.operatorTextColor]: light.color4,
+  [vars$1.variableTextColor]: light.color4,
+  [vars$1.selectorAttrTextColor]: light.color4,
+  [vars$1.selectorClassTextColor]: light.color4,
+  [vars$1.selectorIdTextColor]: light.color4,
+  [vars$1.regexpTextColor]: light.color13,
+  [vars$1.stringTextColor]: light.color13,
+  [vars$1.metaStringTextColor]: light.color13,
+  [vars$1.builtInTextColor]: light.color5,
+  [vars$1.symbolTextColor]: light.color5,
+  [vars$1.commentTextColor]: light.color6,
+  [vars$1.codeTextColor]: light.color6,
+  [vars$1.formulaTextColor]: light.color6,
+  [vars$1.nameTextColor]: light.color7,
+  [vars$1.quoteTextColor]: light.color7,
+  [vars$1.selectorTagTextColor]: light.color7,
+  [vars$1.selectorPseudoTextColor]: light.color7,
+  [vars$1.substTextColor]: light.color8,
+  [vars$1.sectionTextColor]: light.color4,
+  [vars$1.bulletTextColor]: light.color9,
+  [vars$1.emphasisTextColor]: light.color8,
+  [vars$1.strongTextColor]: light.color8,
+  [vars$1.additionTextColor]: light.color7,
+  [vars$1.additionBgColor]: light.color10,
+  [vars$1.deletionTextColor]: light.color2,
+  [vars$1.deletionBgColor]: light.color10,
+  /* purposely ignored */
+  // [vars.charEscapeTextColor]: '',
+  // [vars.linkTextColor]: '',
+  // [vars.paramsTextColor]: '',
+  // [vars.propertyTextColor]: '',
+  // [vars.punctuationTextColor]: '',
+  // [vars.tagTextColor  ]: '',
+};
+
+const codeSnippetDarkThemeOverrides = {
+  codeSnippet: {
+    [vars$1.rootBgColor]: globalRefs.colors.surface.main,
+    [vars$1.rootTextColor]: globalRefs.colors.surface.contrast,
+    [vars$1.docTagTextColor]: dark.color2,
+    [vars$1.keywordTextColor]: dark.color2,
+    [vars$1.metaKeywordTextColor]: dark.color2,
+    [vars$1.templateTagTextColor]: dark.color2,
+    [vars$1.templateVariableTextColor]: dark.color2,
+    [vars$1.typeTextColor]: dark.color2,
+    [vars$1.variableLanguageTextColor]: dark.color2,
+    [vars$1.titleTextColor]: dark.color3,
+    [vars$1.titleClassTextColor]: dark.color3,
+    [vars$1.titleClassInheritedTextColor]: dark.color3,
+    [vars$1.titleFunctionTextColor]: dark.color3,
+    [vars$1.attrTextColor]: dark.color4,
+    [vars$1.attributeTextColor]: dark.color4,
+    [vars$1.literalTextColor]: dark.color4,
+    [vars$1.metaTextColor]: dark.color4,
+    [vars$1.numberTextColor]: dark.color4,
+    [vars$1.operatorTextColor]: dark.color4,
+    [vars$1.variableTextColor]: dark.color4,
+    [vars$1.selectorAttrTextColor]: dark.color4,
+    [vars$1.selectorClassTextColor]: dark.color4,
+    [vars$1.selectorIdTextColor]: dark.color4,
+    [vars$1.regexpTextColor]: dark.color13,
+    [vars$1.stringTextColor]: dark.color13,
+    [vars$1.metaStringTextColor]: dark.color13,
+    [vars$1.builtInTextColor]: dark.color5,
+    [vars$1.symbolTextColor]: dark.color5,
+    [vars$1.commentTextColor]: dark.color6,
+    [vars$1.codeTextColor]: dark.color6,
+    [vars$1.formulaTextColor]: dark.color6,
+    [vars$1.nameTextColor]: dark.color7,
+    [vars$1.quoteTextColor]: dark.color7,
+    [vars$1.selectorTagTextColor]: dark.color7,
+    [vars$1.selectorPseudoTextColor]: dark.color7,
+    [vars$1.substTextColor]: dark.color8,
+    [vars$1.sectionTextColor]: dark.color4,
+    [vars$1.bulletTextColor]: dark.color9,
+    [vars$1.emphasisTextColor]: dark.color8,
+    [vars$1.strongTextColor]: dark.color8,
+    [vars$1.additionTextColor]: dark.color7,
+    [vars$1.additionBgColor]: dark.color10,
+    [vars$1.deletionTextColor]: dark.color2,
+    [vars$1.deletionBgColor]: dark.color10,
+  },
+};
+
+var codeSnippet = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
+  default: CodeSnippet,
   vars: vars$1
 });
 
@@ -12775,6 +13169,7 @@ const components = {
   samlGroupMappings: samlGroupMappings$1,
   policyValidation: policyValidation$1,
   icon: icon$1,
+  codeSnippet,
 };
 
 const theme = Object.keys(components).reduce(
@@ -12787,7 +13182,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$G, components: vars };
+const themeVars = { globals: vars$H, components: vars };
 
 const colors = {
   surface: {
@@ -12831,7 +13226,10 @@ const darkTheme = merge({}, defaultTheme, {
   globals: {
     colors,
   },
+  components: {
+    ...codeSnippetDarkThemeOverrides,
+  },
 });
 
-export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, IconClass, 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, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, CodeSnippetClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, IconClass, 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, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map