@descope/web-components-ui 1.0.177 → 1.0.178

package/dist/index.esm.js

@@ -670,8 +670,13 @@ const createProxy = ({
       super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
 			<style id="create-proxy">${isFunction(style) ? style() : style}</style>
 			<${wrappedEleName}>
-			<slot></slot>
-			${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
+			${slots
+        .map(
+          (
+            slot // when slot is an empty string, we will create the default slot (without a name)
+          ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
+        )
+        .join('')}
 			</${wrappedEleName}>
 		`;
     }
@@ -1185,7 +1190,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$t = getComponentName('button');
+const componentName$w = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1223,7 +1228,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$e, label: label$a } = {
+const { host: host$f, label: label$b } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
 };
@@ -1233,7 +1238,7 @@ let loadingIndicatorStyles;
 const ButtonClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$e, property: 'width' },
+      hostWidth: { ...host$f, property: 'width' },
       hostHeight: { property: 'height' },
       fontSize: {},
       fontFamily: {},
@@ -1254,8 +1259,8 @@ const ButtonClass = compose(
       verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
 
       labelTextColor: { property: 'color' },
-      labelTextDecoration: { ...label$a, property: 'text-decoration' },
-      labelSpacing: { ...label$a, property: 'gap' },
+      labelTextDecoration: { ...label$b, property: 'text-decoration' },
+      labelSpacing: { ...label$b, property: 'gap' },
     },
   }),
   clickableMixin,
@@ -1263,7 +1268,7 @@ const ButtonClass = compose(
   componentNameValidationMixin
 )(
   createProxy({
-    slots: ['prefix', 'label', 'suffix'],
+    slots: ['', 'prefix', 'label', 'suffix'],
     wrappedEleName: 'vaadin-button',
     style: () => `
 			${resetStyles}
@@ -1282,7 +1287,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$t,
+    componentName: componentName$w,
   })
 );
 
@@ -1319,7 +1324,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$t, ButtonClass);
+customElements.define(componentName$w, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1329,11 +1334,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$s = getComponentName('boolean-field-internal');
+const componentName$v = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$5 {
   constructor() {
@@ -1393,14 +1398,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$s}
+				<${componentName$v}
 					tabindex="-1"
 					slot="input"
-				></${componentName$s}>
+				></${componentName$v}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$s);
+      this.inputElement = this.shadowRoot.querySelector(componentName$v);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1580,18 +1585,18 @@ vaadin-checkbox::part(checkbox) {
 }
 `;
 
-const componentName$r = getComponentName('checkbox');
+const componentName$u = getComponentName('checkbox');
 
 const {
-  host: host$d,
+  host: host$e,
   component: component$1,
   checkboxElement,
   checkboxSurface,
   checkboxHiddenLabel: checkboxHiddenLabel$1,
-  label: label$9,
-  requiredIndicator: requiredIndicator$9,
+  label: label$a,
+  requiredIndicator: requiredIndicator$a,
   helperText: helperText$8,
-  errorMessage: errorMessage$9,
+  errorMessage: errorMessage$a,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -1607,25 +1612,25 @@ const {
 const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$d, property: 'width' },
+      hostWidth: { ...host$e, property: 'width' },
 
-      fontSize: [host$d, checkboxElement, label$9, checkboxHiddenLabel$1],
-      fontFamily: [label$9, checkboxHiddenLabel$1, helperText$8, errorMessage$9],
+      fontSize: [host$e, checkboxElement, label$a, checkboxHiddenLabel$1],
+      fontFamily: [label$a, checkboxHiddenLabel$1, helperText$8, errorMessage$a],
 
       labelTextColor: [
-        { ...label$9, property: 'color' },
-        { ...requiredIndicator$9, property: 'color' },
-        { ...label$9, property: '-webkit-text-fill-color' },
+        { ...label$a, property: 'color' },
+        { ...requiredIndicator$a, property: 'color' },
+        { ...label$a, property: '-webkit-text-fill-color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$a, property: 'color' },
 
       labelFontWeight: [
-        { ...label$9, property: 'font-weight' },
+        { ...label$a, property: 'font-weight' },
         { ...checkboxHiddenLabel$1, property: 'font-weight' },
       ],
       labelSpacing: [
-        { ...label$9, property: 'left' },
+        { ...label$a, property: 'left' },
         { ...checkboxHiddenLabel$1, property: 'padding-left' },
       ],
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
@@ -1648,8 +1653,8 @@ const CheckboxClass = compose(
         { ...checkboxSurface, property: 'font-size' },
         { ...component$1, property: 'font-size' },
         { ...checkboxHiddenLabel$1, property: 'line-height' },
-        { ...label$9, property: 'margin-left' },
-        { ...label$9, property: 'line-height' },
+        { ...label$a, property: 'margin-left' },
+        { ...label$a, property: 'line-height' },
       ],
     },
   }),
@@ -1670,26 +1675,26 @@ const CheckboxClass = compose(
 			${useHostExternalPadding(CheckboxClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$r,
+    componentName: componentName$u,
   })
 );
 
-customElements.define(componentName$s, BooleanInputInternal);
+customElements.define(componentName$v, BooleanInputInternal);
 
-customElements.define(componentName$r, CheckboxClass);
+customElements.define(componentName$u, CheckboxClass);
 
-const componentName$q = getComponentName('switch-toggle');
+const componentName$t = getComponentName('switch-toggle');
 
 const {
-  host: host$c,
+  host: host$d,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
   checkboxHiddenLabel,
-  label: label$8,
-  requiredIndicator: requiredIndicator$8,
+  label: label$9,
+  requiredIndicator: requiredIndicator$9,
   helperText: helperText$7,
-  errorMessage: errorMessage$8,
+  errorMessage: errorMessage$9,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -1705,9 +1710,9 @@ const {
 const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$c, property: 'width' },
-      fontSize: [component, label$8, checkboxHiddenLabel],
-      fontFamily: [label$8, helperText$7, errorMessage$8],
+      hostWidth: { ...host$d, property: 'width' },
+      fontSize: [component, label$9, checkboxHiddenLabel],
+      fontFamily: [label$9, helperText$7, errorMessage$9],
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
       trackBorderColor: { ...track, property: 'border-color' },
@@ -1731,24 +1736,24 @@ const SwitchToggleClass = compose(
       knobLeftOffset: { ...knob, property: 'left' },
 
       labelSpacing: [
-        { ...label$8, property: 'padding-left' },
+        { ...label$9, property: 'padding-left' },
         { ...checkboxHiddenLabel, property: 'padding-left' },
       ],
       labelLineHeight: [
-        { ...label$8, property: 'line-height' },
+        { ...label$9, property: 'line-height' },
         { ...checkboxHiddenLabel, property: 'line-height' },
       ],
       labelFontWeight: [
-        { ...label$8, property: 'font-weight' },
+        { ...label$9, property: 'font-weight' },
         { ...checkboxHiddenLabel, property: 'font-weight' },
       ],
       labelTextColor: [
-        { ...label$8, property: 'color' },
-        { ...requiredIndicator$8, property: 'color' },
-        { ...label$8, property: '-webkit-text-fill-color' },
+        { ...label$9, property: 'color' },
+        { ...requiredIndicator$9, property: 'color' },
+        { ...label$9, property: '-webkit-text-fill-color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
       inputOutlineWidth: { ...track, property: 'outline-width' },
       inputOutlineOffset: { ...track, property: 'outline-offset' },
       inputOutlineColor: { ...track, property: 'outline-color' },
@@ -1781,17 +1786,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$t,
   })
 );
 
-customElements.define(componentName$q, SwitchToggleClass);
+customElements.define(componentName$t, SwitchToggleClass);
 
-const componentName$p = getComponentName('loader-linear');
+const componentName$s = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$p;
+    return componentName$s;
   }
 
   constructor() {
@@ -1827,18 +1832,18 @@ const selectors$1 = {
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$b } = selectors$1;
+const { after: after$1, host: host$c } = selectors$1;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$b, property: 'width' },
+      hostWidth: { ...host$c, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$b, property: 'padding-top' },
-        { ...host$b, property: 'padding-bottom' },
+        { ...host$c, property: 'padding-top' },
+        { ...host$c, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after$1, property: 'background-color' },
@@ -1852,11 +1857,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$p, LoaderLinearClass);
+customElements.define(componentName$s, LoaderLinearClass);
 
-const componentName$o = getComponentName('loader-radial');
+const componentName$r = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -1900,11 +1905,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$o, LoaderRadialClass);
+customElements.define(componentName$r, LoaderRadialClass);
 
-const componentName$n = getComponentName('container');
+const componentName$q = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -1956,10 +1961,10 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$n, ContainerClass);
+customElements.define(componentName$q, ContainerClass);
 
-const componentName$m = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
+const componentName$p = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2004,7 +2009,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$m, baseS
   }
 }
 
-const { host: host$a, before, after, text: text$3 } = {
+const { host: host$b, before, after, text: text$3 } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
   after: { selector: '::after' },
@@ -2014,8 +2019,8 @@ const { host: host$a, before, after, text: text$3 } = {
 const DividerClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$a, property: 'width' },
-      hostPadding: { ...host$a, property: 'padding' },
+      hostWidth: { ...host$b, property: 'width' },
+      hostPadding: { ...host$b, property: 'padding' },
 
       minHeight: {},
       alignItems: {},
@@ -2055,9 +2060,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-const componentName$l = getComponentName('text');
+const componentName$o = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2099,11 +2104,11 @@ const TextClass = compose(
   componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$l, TextClass);
+customElements.define(componentName$o, TextClass);
 
-customElements.define(componentName$m, DividerClass);
+customElements.define(componentName$p, DividerClass);
 
-const { host: host$9, label: label$7, placeholder: placeholder$2, requiredIndicator: requiredIndicator$7, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$7 } =
+const { host: host$a, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
   {
     host: { selector: () => ':host' },
     label: { selector: '::part(label)' },
@@ -2117,24 +2122,24 @@ const { host: host$9, label: label$7, placeholder: placeholder$2, requiredIndica
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host$9],
-  fontFamily: [label$7, inputField$5, helperText$6, errorMessage$7],
+  fontSize: [{}, host$a],
+  fontFamily: [label$8, inputField$5, helperText$6, errorMessage$8],
 
-  hostWidth: { ...host$9, property: 'width' },
-  hostMinWidth: { ...host$9, property: 'min-width' },
+  hostWidth: { ...host$a, property: 'width' },
+  hostMinWidth: { ...host$a, property: 'min-width' },
 
   inputBackgroundColor: { ...inputField$5, property: 'background-color' },
 
   labelTextColor: [
-    { ...label$7, property: 'color' },
-    { ...requiredIndicator$7, property: 'color' },
+    { ...label$8, property: 'color' },
+    { ...requiredIndicator$8, property: 'color' },
   ],
-  errorMessageTextColor: { ...errorMessage$7, property: 'color' },
+  errorMessageTextColor: { ...errorMessage$8, property: 'color' },
 
   inputValueTextColor: { ...inputField$5, property: 'color' },
   inputCaretTextColor: { ...input, property: 'color' },
 
-  labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
+  labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
 
   inputBorderColor: { ...inputField$5, property: 'border-color' },
   inputBorderWidth: { ...inputField$5, property: 'border-width' },
@@ -2157,9 +2162,9 @@ var textFieldMappings = {
   inputPlaceholderColor: { ...placeholder$2, property: 'color' },
 };
 
-const componentName$k = getComponentName('email-field');
+const componentName$n = getComponentName('email-field');
 
-const customMixin$5 = (superclass) =>
+const customMixin$6 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
@@ -2173,10 +2178,10 @@ const EmailFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin,
   componentNameValidationMixin,
-  customMixin$5
+  customMixin$6
 )(
   createProxy({
-    slots: ['suffix'],
+    slots: ['', 'suffix'],
     wrappedEleName: 'vaadin-email-field',
     style: () => `
 			:host {
@@ -2187,18 +2192,18 @@ const EmailFieldClass = compose(
         }))
 			}
 			${useHostExternalPadding(EmailFieldClass.cssVarList)}
-			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
+			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$k,
+    componentName: componentName$n,
   })
 );
 
-customElements.define(componentName$k, EmailFieldClass);
+customElements.define(componentName$n, EmailFieldClass);
 
-const componentName$j = getComponentName('link');
+const componentName$m = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$j, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$m, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2244,12 +2249,12 @@ const selectors = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$8, wrapper: wrapper$1 } = selectors;
+const { anchor, text: text$2, host: host$9, wrapper: wrapper$1 } = selectors;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$8, property: 'width' },
+      hostWidth: { ...host$9, property: 'width' },
       textAlign: wrapper$1,
       textColor: [
         { ...anchor, property: 'color' },
@@ -2262,7 +2267,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$j, LinkClass);
+customElements.define(componentName$m, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2314,27 +2319,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$i = getComponentName('logo');
+const componentName$l = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$i,
+  componentName: componentName$l,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$i, LogoClass);
+customElements.define(componentName$l, LogoClass);
 
-const componentName$h = getComponentName('totp-image');
+const componentName$k = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$h,
+  componentName: componentName$k,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$h, TotpImageClass);
+customElements.define(componentName$k, TotpImageClass);
 
-const componentName$g = getComponentName('number-field');
+const componentName$j = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2345,7 +2350,7 @@ const NumberFieldClass = compose(
   componentNameValidationMixin
 )(
   createProxy({
-    slots: ['prefix', 'suffix'],
+    slots: ['', 'prefix', 'suffix'],
     wrappedEleName: 'vaadin-number-field',
     style: () => `
 			:host {
@@ -2359,11 +2364,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$g,
+    componentName: componentName$j,
   })
 );
 
-customElements.define(componentName$g, NumberFieldClass);
+customElements.define(componentName$j, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2381,23 +2386,19 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$f = getComponentName('passcode-internal');
+const componentName$i = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$4 {
   static get observedAttributes() {
     return observedAttributes$5.concat(BaseInputClass$4.observedAttributes || []);
   }
 
-  static get componentName() {
-    return componentName$f;
-  }
-
   constructor() {
     super();
 
@@ -2587,11 +2588,11 @@ class PasscodeInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$e = getComponentName('text-field');
+const componentName$h = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
-const customMixin$4 = (superclass) =>
+const customMixin$5 = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2618,7 +2619,7 @@ const TextFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin,
   componentNameValidationMixin,
-  customMixin$4
+  customMixin$5
 )(
   createProxy({
     slots: ['prefix', 'suffix'],
@@ -2635,15 +2636,15 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$e,
+    componentName: componentName$h,
   })
 );
 
-const componentName$d = getComponentName('passcode');
+const componentName$g = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
-const customMixin$3 = (superclass) =>
+const customMixin$4 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
       return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -2658,17 +2659,17 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$f}
+			<${componentName$i}
 				bordered="true"
 				name="code"
 				tabindex="-1"
 				slot="input"
-			></${componentName$f}>
+			><slot></slot></${componentName$i}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$f);
+      this.inputElement = this.shadowRoot.querySelector(componentName$i);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
     }
@@ -2683,13 +2684,13 @@ const customMixin$3 = (superclass) =>
   };
 
 const {
-  host: host$7,
+  host: host$8,
   digitField,
-  label: label$6,
-  requiredIndicator: requiredIndicator$6,
-  internalWrapper,
+  label: label$7,
+  requiredIndicator: requiredIndicator$7,
+  internalWrapper: internalWrapper$1,
   focusedDigitField,
-  errorMessage: errorMessage$6,
+  errorMessage: errorMessage$7,
 } = {
   host: { selector: () => ':host' },
   focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -2705,15 +2706,15 @@ const textVars$2 = TextFieldClass.cssVarList;
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
+      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$8],
       hostWidth: { property: 'width' },
-      fontFamily: host$7,
+      fontFamily: host$8,
       labelTextColor: [
-        { ...label$6, property: 'color' },
-        { ...requiredIndicator$6, property: 'color' },
+        { ...label$7, property: 'color' },
+        { ...requiredIndicator$7, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
         property: textVars$2.inputValueTextColor,
@@ -2725,7 +2726,7 @@ const PasscodeClass = compose(
       digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
       digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
       digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
-      digitSpacing: { ...internalWrapper, property: 'gap' },
+      digitSpacing: { ...internalWrapper$1, property: 'gap' },
       digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
       digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
 
@@ -2735,7 +2736,7 @@ const PasscodeClass = compose(
   draggableMixin,
   composedProxyInputMixin,
   componentNameValidationMixin,
-  customMixin$3
+  customMixin$4
 )(
   createProxy({
     slots: [],
@@ -2806,15 +2807,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$d,
+    componentName: componentName$g,
   })
 );
 
-customElements.define(componentName$e, TextFieldClass);
+customElements.define(componentName$h, TextFieldClass);
 
-customElements.define(componentName$f, PasscodeInternal);
+customElements.define(componentName$i, PasscodeInternal);
 
-customElements.define(componentName$d, PasscodeClass);
+customElements.define(componentName$g, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -2850,18 +2851,18 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$c = getComponentName('password');
+const componentName$f = getComponentName('password');
 
 const {
-  host: host$6,
+  host: host$7,
   inputField: inputField$4,
   inputElement: inputElement$1,
   inputElementPlaceholder,
   revealButtonContainer,
   revealButtonIcon,
-  label: label$5,
-  requiredIndicator: requiredIndicator$5,
-  errorMessage: errorMessage$5,
+  label: label$6,
+  requiredIndicator: requiredIndicator$6,
+  errorMessage: errorMessage$6,
   helperText: helperText$5,
 } = {
   host: { selector: () => ':host' },
@@ -2879,10 +2880,10 @@ const {
 const PasswordClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$6, property: 'width' },
-      hostMinWidth: { ...host$6, property: 'min-width' },
-      fontSize: [{}, host$6],
-      fontFamily: [label$5, inputField$4, errorMessage$5, helperText$5],
+      hostWidth: { ...host$7, property: 'width' },
+      hostMinWidth: { ...host$7, property: 'min-width' },
+      fontSize: [{}, host$7],
+      fontFamily: [label$6, inputField$4, errorMessage$6, helperText$5],
       inputHeight: { ...inputField$4, property: 'height' },
       inputHorizontalPadding: [
         { ...inputElement$1, property: 'padding-left' },
@@ -2901,11 +2902,11 @@ const PasswordClass = compose(
       inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
 
       labelTextColor: [
-        { ...label$5, property: 'color' },
-        { ...requiredIndicator$5, property: 'color' },
+        { ...label$6, property: 'color' },
+        { ...requiredIndicator$6, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
 
       inputValueTextColor: [
         { ...inputElement$1, property: 'color' },
@@ -2926,7 +2927,7 @@ const PasswordClass = compose(
   passwordDraggableMixin
 )(
   createProxy({
-    slots: ['suffix'],
+    slots: ['', 'suffix'],
     wrappedEleName: 'vaadin-password-field',
     style: () => `
 			:host {
@@ -2951,7 +2952,7 @@ const PasswordClass = compose(
 			}
 			vaadin-password-field[focus-ring]::part(input-field) {
 				box-shadow: none;
-			}			
+			}
 			vaadin-password-field > input {
 				min-height: 0;
 				-webkit-mask-image: none;
@@ -2978,23 +2979,23 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$c,
+    componentName: componentName$f,
   })
 );
 
-customElements.define(componentName$c, PasswordClass);
+customElements.define(componentName$f, PasswordClass);
 
-const componentName$b = getComponentName('text-area');
+const componentName$e = getComponentName('text-area');
 
 const {
-  host: host$5,
-  label: label$4,
+  host: host$6,
+  label: label$5,
   placeholder: placeholder$1,
   inputField: inputField$3,
   textArea: textArea$2,
-  requiredIndicator: requiredIndicator$4,
+  requiredIndicator: requiredIndicator$5,
   helperText: helperText$4,
-  errorMessage: errorMessage$4,
+  errorMessage: errorMessage$5,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -3009,16 +3010,16 @@ const {
 const TextAreaClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$5, property: 'width' },
-      hostMinWidth: { ...host$5, property: 'min-width' },
-      fontSize: [host$5, textArea$2],
-      fontFamily: [label$4, inputField$3, helperText$4, errorMessage$4],
+      hostWidth: { ...host$6, property: 'width' },
+      hostMinWidth: { ...host$6, property: 'min-width' },
+      fontSize: [host$6, textArea$2],
+      fontFamily: [label$5, inputField$3, helperText$4, errorMessage$5],
       labelTextColor: [
-        { ...label$4, property: 'color' },
-        { ...requiredIndicator$4, property: 'color' },
+        { ...label$5, property: 'color' },
+        { ...requiredIndicator$5, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
       inputBackgroundColor: { ...inputField$3, property: 'background-color' },
       inputValueTextColor: { ...textArea$2, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
@@ -3056,17 +3057,17 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$b,
+    componentName: componentName$e,
   })
 );
 
-customElements.define(componentName$b, TextAreaClass);
+customElements.define(componentName$e, TextAreaClass);
 
 const observedAttributes$3 = ['src', 'alt'];
 
-const componentName$a = getComponentName('image');
+const componentName$d = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$a, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$d, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3106,9 +3107,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$a, ImageClass);
+customElements.define(componentName$d, ImageClass);
 
-const componentName$9 = getComponentName('combo-box');
+const componentName$c = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3160,15 +3161,15 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$4,
+  host: host$5,
   inputField: inputField$2,
   inputElement,
   placeholder,
   toggle,
-  label: label$3,
-  requiredIndicator: requiredIndicator$3,
+  label: label$4,
+  requiredIndicator: requiredIndicator$4,
   helperText: helperText$3,
-  errorMessage: errorMessage$3,
+  errorMessage: errorMessage$4,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -3189,22 +3190,22 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$4, property: 'width' },
+      hostWidth: { ...host$5, property: 'width' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$4],
-      fontFamily: [label$3, placeholder, inputField$2, helperText$3, errorMessage$3],
+      fontSize: [{}, host$5],
+      fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
       labelTextColor: [
-        { ...label$3, property: 'color' },
-        { ...requiredIndicator$3, property: 'color' },
+        { ...label$4, property: 'color' },
+        { ...requiredIndicator$4, property: 'color' },
       ],
-      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
       inputHeight: { ...inputField$2, property: 'height' },
       inputBackgroundColor: { ...inputField$2, property: 'background-color' },
       inputBorderColor: { ...inputField$2, property: 'border-color' },
       inputBorderWidth: { ...inputField$2, property: 'border-width' },
       inputBorderStyle: { ...inputField$2, property: 'border-style' },
       inputBorderRadius: { ...inputField$2, property: 'border-radius' },
-      labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
+      labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
       inputValueTextColor: { ...inputField$2, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder, property: 'color' },
       inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
@@ -3252,7 +3253,7 @@ const ComboBoxClass = compose(
   ComboBoxMixin
 )(
   createProxy({
-    slots: ['prefix'],
+    slots: ['', 'prefix'],
     wrappedEleName: 'vaadin-combo-box',
     style: () => `
 		:host {
@@ -3288,12 +3289,12 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size'],
-    componentName: componentName$9,
+    componentName: componentName$c,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$9, ComboBoxClass);
+customElements.define(componentName$c, ComboBoxClass);
 
 var CountryCodes = [
   {
@@ -4533,7 +4534,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$8 = getComponentName('phone-field-internal');
+const componentName$b = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -4545,7 +4546,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -4735,14 +4736,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   }
 };
 
-customElements.define(componentName$8, PhoneFieldInternal$1);
+customElements.define(componentName$b, PhoneFieldInternal$1);
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$7 = getComponentName('phone-field');
+const componentName$a = getComponentName('phone-field');
 
-const customMixin$2 = (superclass) =>
+const customMixin$3 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -4754,15 +4755,15 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$8}
+				<${componentName$b}
 					tabindex="-1"
 					slot="input"
-				></${componentName$8}>
+				></${componentName$b}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$8);
+      this.inputElement = this.shadowRoot.querySelector(componentName$b);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -4782,14 +4783,14 @@ const customMixin$2 = (superclass) =>
   };
 
 const {
-  host: host$3,
-  label: label$2,
-  requiredIndicator: requiredIndicator$2,
+  host: host$4,
+  label: label$3,
+  requiredIndicator: requiredIndicator$3,
   inputField: inputField$1,
   countryCodeInput,
   phoneInput: phoneInput$1,
   separator,
-  errorMessage: errorMessage$2,
+  errorMessage: errorMessage$3,
   helperText: helperText$2,
 } = {
   host: { selector: () => ':host' },
@@ -4807,7 +4808,7 @@ const PhoneFieldClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$3,
+        host$4,
         inputField$1,
         {
           selector: TextFieldClass.componentName,
@@ -4819,8 +4820,8 @@ const PhoneFieldClass = compose(
         },
       ],
       fontFamily: [
-        label$2,
-        errorMessage$2,
+        label$3,
+        errorMessage$3,
         helperText$2,
         {
           ...countryCodeInput,
@@ -4828,7 +4829,7 @@ const PhoneFieldClass = compose(
         },
       ],
       hostWidth: [
-        { ...host$3, property: 'width' },
+        { ...host$4, property: 'width' },
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
@@ -4855,11 +4856,11 @@ const PhoneFieldClass = compose(
       phoneInputWidth: { ...phoneInput$1, property: 'width' },
 
       labelTextColor: [
-        { ...label$2, property: 'color' },
-        { ...requiredIndicator$2, property: 'color' },
+        { ...label$3, property: 'color' },
+        { ...requiredIndicator$3, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$2, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
 
       inputValueTextColor: [
         { ...phoneInput$1, property: textVars$1.inputValueTextColor },
@@ -4881,7 +4882,7 @@ const PhoneFieldClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin,
-  customMixin$2
+  customMixin$3
 )(
   createProxy({
     slots: [],
@@ -4957,17 +4958,17 @@ const PhoneFieldClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$7,
+    componentName: componentName$a,
   })
 );
 
-customElements.define(componentName$7, PhoneFieldClass);
+customElements.define(componentName$a, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
-const componentName$6 = getComponentName('phone-field-internal-input-box');
+const componentName$9 = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$2 = [
   'disabled',
@@ -4981,7 +4982,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -5120,13 +5121,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
   }
 }
 
-customElements.define(componentName$6, PhoneFieldInternal);
+customElements.define(componentName$9, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$5 = getComponentName('phone-input-box-field');
+const componentName$8 = getComponentName('phone-input-box-field');
 
-const customMixin$1 = (superclass) =>
+const customMixin$2 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -5138,15 +5139,15 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$6}
+				<${componentName$9}
 					tabindex="-1"
 					slot="input"
-				></${componentName$6}>
+				></${componentName$9}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$6);
+      this.inputElement = this.shadowRoot.querySelector(componentName$9);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5163,7 +5164,7 @@ const customMixin$1 = (superclass) =>
     }
   };
 
-const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, inputField, phoneInput, errorMessage: errorMessage$1, helperText: helperText$1 } = {
+const { host: host$3, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -5177,16 +5178,16 @@ const PhoneFieldInputBoxClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$2,
+        host$3,
         inputField,
         {
           selector: TextFieldClass.componentName,
           property: TextFieldClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label$1, errorMessage$1, helperText$1],
-      hostWidth: { ...host$2, property: 'width' },
-      hostMinWidth: { ...host$2, property: 'min-width' },
+      fontFamily: [label$2, errorMessage$2, helperText$1],
+      hostWidth: { ...host$3, property: 'width' },
+      hostMinWidth: { ...host$3, property: 'min-width' },
 
       inputBorderStyle: { ...inputField, property: 'border-style' },
       inputBorderWidth: { ...inputField, property: 'border-width' },
@@ -5194,11 +5195,11 @@ const PhoneFieldInputBoxClass = compose(
       inputBorderRadius: { ...inputField, property: 'border-radius' },
 
       labelTextColor: [
-        { ...label$1, property: 'color' },
-        { ...requiredIndicator$1, property: 'color' },
+        { ...label$2, property: 'color' },
+        { ...requiredIndicator$2, property: 'color' },
       ],
-      labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
+      labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
+      errorMessageTextColor: { ...errorMessage$2, property: 'color' },
 
       inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
 
@@ -5212,7 +5213,7 @@ const PhoneFieldInputBoxClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin,
-  customMixin$1
+  customMixin$2
 )(
   createProxy({
     slots: [],
@@ -5278,17 +5279,17 @@ const PhoneFieldInputBoxClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$5,
+    componentName: componentName$8,
   })
 );
 
-customElements.define(componentName$5, PhoneFieldInputBoxClass);
+customElements.define(componentName$8, PhoneFieldInputBoxClass);
 
-const componentName$4 = getComponentName('new-password-internal');
+const componentName$7 = getComponentName('new-password-internal');
 
-const componentName$3 = getComponentName('new-password');
+const componentName$6 = getComponentName('new-password');
 
-const customMixin = (superclass) =>
+const customMixin$1 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
       super.init?.();
@@ -5296,16 +5297,16 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$4}
+			<${componentName$7}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$4}>
+			></${componentName$7}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$4);
+      this.inputElement = this.shadowRoot.querySelector(componentName$7);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5326,7 +5327,7 @@ const customMixin = (superclass) =>
     }
   };
 
-const { host: host$1, label, internalInputsWrapper, errorMessage, helperText } = {
+const { host: host$2, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -5338,24 +5339,24 @@ const NewPasswordClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$1,
+        host$2,
         {},
         {
           selector: PasswordClass.componentName,
           property: PasswordClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label, errorMessage, helperText],
-      errorMessageTextColor: { ...errorMessage, property: 'color' },
-      hostWidth: { ...host$1, property: 'width' },
-      hostMinWidth: { ...host$1, property: 'min-width' },
-      inputsRequiredIndicator: { ...host$1, property: 'content' },
+      fontFamily: [label$1, errorMessage$1, helperText],
+      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
+      hostWidth: { ...host$2, property: 'width' },
+      hostMinWidth: { ...host$2, property: 'min-width' },
+      inputsRequiredIndicator: { ...host$2, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
     },
   }),
   draggableMixin,
   composedProxyInputMixin,
-  customMixin
+  customMixin$1
 )(
   createProxy({
     slots: [],
@@ -5404,7 +5405,7 @@ const NewPasswordClass = compose(
 		},
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$3,
+    componentName: componentName$6,
   })
 );
 
@@ -5428,7 +5429,7 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -5588,16 +5589,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$4, NewPasswordInternal);
+customElements.define(componentName$7, NewPasswordInternal);
 
-customElements.define(componentName$3, NewPasswordClass);
+customElements.define(componentName$6, NewPasswordClass);
 
-const componentName$2 = getComponentName('recaptcha');
+const componentName$5 = getComponentName('recaptcha');
 
 const observedAttributes$1 = ['disabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
-  componentName: componentName$2,
+  componentName: componentName$5,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass {
@@ -5747,7 +5748,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$2, RecaptchaClass);
+customElements.define(componentName$5, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -5761,7 +5762,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$1 = getComponentName('upload-file');
+const componentName$4 = getComponentName('upload-file');
 
 const observedAttributes = [
   'title',
@@ -5776,7 +5777,7 @@ const observedAttributes = [
   'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -5938,7 +5939,7 @@ class RawUploadFile extends BaseInputClass {
   }
 }
 
-const { host, wrapper, icon, title, description, requiredIndicator } = {
+const { host: host$1, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '.icon' },
@@ -5957,8 +5958,8 @@ const UploadFileClass = compose(
       borderWidth: {},
       borderStyle: {},
       borderRadius: {},
-      hostHeight: { ...host, property: 'height' },
-      hostWidth: { ...host, property: 'width' },
+      hostHeight: { ...host$1, property: 'height' },
+      hostWidth: { ...host$1, property: 'width' },
       hostPadding: { property: 'padding' },
       gap: { ...wrapper },
       lineHeight: { ...wrapper, property: 'line-height' },
@@ -5970,107 +5971,452 @@ const UploadFileClass = compose(
         { ...description, property: 'color' },
       ],
       iconSize: { ...icon, property: 'width' },
-      requiredIndicator: { ...requiredIndicator, property: 'content' },
+      requiredIndicator: { ...requiredIndicator$1, property: 'content' },
     },
   }),
   draggableMixin,
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$1, UploadFileClass);
-
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+customElements.define(componentName$4, UploadFileClass);
 
-const transformTheme = (theme, path, getTransformation) => {
-  return Object.entries(theme).reduce((acc, [key, val]) => {
-    if (val?.constructor !== Object) {
-      return merge(acc, getTransformation(path.concat(key), val));
-    }
-    return merge(acc, transformTheme(val, [...path, key], getTransformation));
-  }, {});
-};
+const componentName$3 = getComponentName('single-select-internal');
 
-const stringifyArray = (strArr) =>
-  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+class SingleSelectInternalClass extends createBaseInputClass({
+  componentName: componentName$3,
+  baseSelector: 'slot',
+}) {
+  constructor() {
+    super();
 
-const getCssVarValue = (val) => {
-  switch (true) {
-    case Array.isArray(val):
-      return stringifyArray(val);
-    case isUrl(val):
-      return `url(${val})`;
-    default:
-      return val;
+    this.innerHTML = `
+    <style>
+    slot {
+      box-sizing: border-box;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  </style>
+  <slot part="wrapper"></slot>
+		`;
   }
-};
-
-const themeToCSSVarsObj = (theme) =>
-  transformTheme(theme, [], (path, val) => ({
-    [getVarName(path)]: getCssVarValue(val),
-  }));
 
-const getThemeRefs = (theme, prefix) =>
-  transformTheme(theme, [], (path) =>
-    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
-  );
+  #dispatchChange = createDispatchEvent.bind(this, 'change');
 
-const getThemeVars = (theme, prefix) =>
-  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+  get items() {
+    return this.querySelector('slot').assignedElements();
+  }
 
-const globalsThemeToStyle = (theme, themeName = '') => {
-  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
-    (acc, entry) => `${acc}${entry.join(':')};\n`,
-    ''
-  );
+  get isReadonly() {
+    return this.getAttribute('readonly') === 'true';
+  }
 
-  if (!themeName) return style;
+  getSelectedNode() {
+    return this.items.find((item) => item.hasAttribute('selected'));
+  }
 
-  return `*[data-theme="${themeName}"] {${style}}`;
-};
+  get size() {
+    return this.getAttribute('size') || 'md';
+  }
 
-const componentsThemeToStyleObj = (componentsTheme) =>
-  transformTheme(componentsTheme, [], (path, val) => {
-    const [component, ...restPath] = path;
-    const property = restPath.pop();
-    const componentName = getComponentName(component);
+  removeSelected() {
+    this.getSelectedNode()?.removeAttribute('selected');
+  }
 
-    if (property === 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+  onNodeClick(e) {
+    if (!this.isReadonly) {
+      this.setSelected(e.target);
+      this.#dispatchChange();
     }
+  }
 
-    // we need a support for portal components theme (e.g. overlay)
-    // this allows us to generate those themes under different sections
-    // if the theme has root level attribute that starts with #
-    // we are generating a new theme
-    let themeName = BASE_THEME_SECTION;
-
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-      themeName = restPath.shift();
+  setSelected(node) {
+    if (node !== this.getSelectedNode()) {
+      this.removeSelected();
+      node?.setAttribute('selected', 'true');
     }
+  }
 
-    // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
-    // starts with underscore -> attribute selector
-    const attrsSelector = restPath.reduce((acc, section, idx) => {
-      if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+  get value() {
+    return this.getSelectedNode()?.value;
+  }
 
-      const nextSection = restPath[idx + 1];
+  set value(value) {
+    const node = this.items.find((child) => child.value === value);
+    this.setSelected(node);
+  }
 
-      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
-        // eslint-disable-next-line no-console
-        console.error(
-          'theme generator',
-          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
-        );
-        return acc;
+  get defaultValue() {
+    return this.getAttribute('default-value');
+  }
+
+  setDefaultValue() {
+    // we want to defer this action until all attributes are synched
+    setTimeout(() => {
+      if (this.defaultValue) {
+        this.value = this.defaultValue;
+        this.setCustomValidity();
       }
+    });
+  }
 
-      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
-    }, '');
+  onSizeChange() {
+    this.items.forEach((item) => {
+      item.setAttribute('size', this.size);
+    });
+  }
 
-    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
 
-    return {
+    return {};
+  }
+
+  onObservedAttributeChange(attrs) {
+    attrs.forEach((attr) => {
+      switch (attr) {
+        case 'size':
+          this.onSizeChange();
+          break;
+      }
+    });
+  }
+
+  init() {
+    // we are adding listeners before calling to super because it's stopping the events
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        this.items[0].focus();
+      }
+    });
+
+    super.init?.();
+    this.setDefaultValue();
+
+    observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
+
+    observeChildren(this, ({ addedNodes }) => {
+      addedNodes.forEach((node) => {
+        node.addEventListener('click', this.onNodeClick.bind(this));
+        node.setAttribute('size', this.size);
+      });
+    });
+  }
+}
+
+const componentName$2 = getComponentName('single-select');
+
+const customMixin = (superclass) =>
+  class SingleSelectMixinClass extends superclass {
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+			<${componentName$3}
+				name="single-select"
+				slot="input"
+        tabindex="-1"
+			>
+        <slot></slot>
+      </${componentName$3}>
+			`;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(componentName$3);
+
+      forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
+    }
+  };
+
+const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  internalWrapper: { selector: 'descope-single-select-internal slot' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+const SingleSelectClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      fontFamily: host,
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      itemsSpacing: { ...internalWrapper, property: 'gap' },
+    },
+  }),
+  draggableMixin,
+  composedProxyInputMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+			:host {
+				display: inline-flex;
+				max-width: 100%;
+			}
+			${resetInputFieldDefaultWidth()}
+			:host::after {
+				background-color: transparent;
+			}
+			:host::part(input-field)::after {
+				background-color: transparent;
+			}
+
+			descope-single-select-internal {
+				-webkit-mask-image: none;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+        display:inline-block;
+				min-height: initial;
+			}
+
+			vaadin-text-field::part(input-field) {
+				background-color: transparent;
+				padding: 0;
+				overflow: hidden;
+				-webkit-mask-image: none;
+			}
+
+			vaadin-text-field {
+				margin: 0;
+				padding: 0;
+				width: 100%
+			}
+
+			vaadin-text-field::before {
+				height: 0;
+			}
+
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+
+			vaadin-text-field[readonly]::part(input-field)::after {
+				border: 0 solid;
+			}
+
+			vaadin-text-field::part(input-field) {
+				box-shadow: none;
+			}
+
+			${resetInputCursor('vaadin-text-field')}
+    `,
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$2,
+  })
+);
+
+customElements.define(componentName$3, SingleSelectInternalClass);
+
+customElements.define(componentName$2, SingleSelectClass);
+
+const componentName$1 = getComponentName('select-item');
+
+class RawSelectItem extends createBaseClass({
+  componentName: componentName$1,
+  baseSelector: ':host > descope-button',
+}) {
+  get size() {
+    return this.getAttribute('size') || 'md';
+  }
+
+  get variant() {
+    return this.getAttribute('variant') || 'contained';
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  set value(value) {
+    this.setAttribute('value', value);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      descope-button {
+        max-width: 100%;
+      }
+			descope-button > slot {
+				width: 100%;
+				overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+			}
+			:host {
+				display: inline-block;
+        max-width: 100%
+			}
+		</style>
+    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
+      <slot></slot>
+    </descope-button>
+	`;
+
+    forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
+  }
+
+  handleFocus() {
+    this.shadowRoot.querySelector('descope-button')?.focus();
+  }
+
+  focus() {
+    this.handleFocus();
+  }
+
+  init() {
+    super.init();
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        this.handleFocus();
+      }
+    });
+  }
+}
+
+const SelectItemClass = compose(
+  createStyleMixin({
+    mappings: {
+      backgroundColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.backgroundColor,
+      },
+      labelTextColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.labelTextColor,
+      },
+      borderColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderColor,
+      },
+      borderStyle: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderStyle,
+      },
+      borderRadius: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderRadius,
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawSelectItem);
+
+customElements.define(componentName$1, SelectItemClass);
+
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+
+const transformTheme = (theme, path, getTransformation) => {
+  return Object.entries(theme).reduce((acc, [key, val]) => {
+    if (val?.constructor !== Object) {
+      return merge(acc, getTransformation(path.concat(key), val));
+    }
+    return merge(acc, transformTheme(val, [...path, key], getTransformation));
+  }, {});
+};
+
+const stringifyArray = (strArr) =>
+  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+
+const getCssVarValue = (val) => {
+  switch (true) {
+    case Array.isArray(val):
+      return stringifyArray(val);
+    case isUrl(val):
+      return `url(${val})`;
+    default:
+      return val;
+  }
+};
+
+const themeToCSSVarsObj = (theme) =>
+  transformTheme(theme, [], (path, val) => ({
+    [getVarName(path)]: getCssVarValue(val),
+  }));
+
+const getThemeRefs = (theme, prefix) =>
+  transformTheme(theme, [], (path) =>
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+  );
+
+const getThemeVars = (theme, prefix) =>
+  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+
+const globalsThemeToStyle = (theme, themeName = '') => {
+  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
+    (acc, entry) => `${acc}${entry.join(':')};\n`,
+    ''
+  );
+
+  if (!themeName) return style;
+
+  return `*[data-theme="${themeName}"] {${style}}`;
+};
+
+const componentsThemeToStyleObj = (componentsTheme) =>
+  transformTheme(componentsTheme, [], (path, val) => {
+    const [component, ...restPath] = path;
+    const property = restPath.pop();
+    const componentName = getComponentName(component);
+
+    if (property === 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+    }
+
+    // we need a support for portal components theme (e.g. overlay)
+    // this allows us to generate those themes under different sections
+    // if the theme has root level attribute that starts with #
+    // we are generating a new theme
+    let themeName = BASE_THEME_SECTION;
+
+    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+      themeName = restPath.shift();
+    }
+
+    // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
+    // starts with underscore -> attribute selector
+    const attrsSelector = restPath.reduce((acc, section, idx) => {
+      if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+
+      const nextSection = restPath[idx + 1];
+
+      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+        // eslint-disable-next-line no-console
+        console.error(
+          'theme generator',
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+        );
+        return acc;
+      }
+
+      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+    }, '');
+
+    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+
+    return {
       [componentName]: {
         [themeName]: {
           [selector]: {
@@ -6305,32 +6651,32 @@ const globals = {
   shadow,
   fonts,
 };
-const vars$p = getThemeVars(globals);
+const vars$r = getThemeVars(globals);
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 const compVars$3 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$b.colors.primary,
-  secondary: globalRefs$b.colors.secondary,
-  success: globalRefs$b.colors.success,
-  error: globalRefs$b.colors.error,
-  surface: globalRefs$b.colors.surface,
+  primary: globalRefs$d.colors.primary,
+  secondary: globalRefs$d.colors.secondary,
+  success: globalRefs$d.colors.success,
+  error: globalRefs$d.colors.error,
+  surface: globalRefs$d.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$t);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$w);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$3.fontFamily]: globalRefs$b.fonts.font1.family,
+  [compVars$3.fontFamily]: globalRefs$d.fonts.font1.family,
 
   [compVars$3.cursor]: 'pointer',
   [compVars$3.hostHeight]: '3em',
   [compVars$3.hostWidth]: 'auto',
 
-  [compVars$3.borderRadius]: globalRefs$b.radius.sm,
-  [compVars$3.borderWidth]: globalRefs$b.border.xs,
+  [compVars$3.borderRadius]: globalRefs$d.radius.sm,
+  [compVars$3.borderWidth]: globalRefs$d.border.xs,
   [compVars$3.borderStyle]: 'solid',
   [compVars$3.borderColor]: 'transparent',
 
@@ -6404,11 +6750,11 @@ const button = {
   },
 
   _focused: {
-    [compVars$3.outlineColor]: globalRefs$b.colors.surface.main,
+    [compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
   },
 };
 
-const vars$o = {
+const vars$q = {
   ...compVars$3,
   ...helperVars$3,
 };
@@ -6416,25 +6762,25 @@ const vars$o = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$o
+  vars: vars$q
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
 
-const [theme$1, refs, vars$n] = createHelperVars(
+const [theme$1, refs, vars$p] = createHelperVars(
   {
-    labelTextColor: globalRefs$a.colors.surface.contrast,
-    valueTextColor: globalRefs$a.colors.surface.contrast,
-    placeholderTextColor: globalRefs$a.colors.surface.main,
+    labelTextColor: globalRefs$c.colors.surface.contrast,
+    valueTextColor: globalRefs$c.colors.surface.contrast,
+    placeholderTextColor: globalRefs$c.colors.surface.main,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$a.colors.error.main,
+    errorMessageTextColor: globalRefs$c.colors.error.main,
 
-    borderWidth: globalRefs$a.border.xs,
-    borderRadius: globalRefs$a.radius.xs,
+    borderWidth: globalRefs$c.border.xs,
+    borderRadius: globalRefs$c.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$a.border.sm,
+    outlineWidth: globalRefs$c.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
@@ -6445,9 +6791,9 @@ const [theme$1, refs, vars$n] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$a.colors.surface.light,
+    backgroundColor: globalRefs$c.colors.surface.light,
 
-    fontFamily: globalRefs$a.fonts.font1.family,
+    fontFamily: globalRefs$c.fonts.font1.family,
 
     size: {
       xs: { fontSize: '12px' },
@@ -6461,27 +6807,27 @@ const [theme$1, refs, vars$n] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$a.colors.surface.main,
+      outlineColor: globalRefs$c.colors.surface.main,
       _invalid: {
-        outlineColor: globalRefs$a.colors.error.main,
+        outlineColor: globalRefs$c.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$a.border.xs,
-      borderColor: globalRefs$a.colors.surface.main,
+      outlineWidth: globalRefs$c.border.xs,
+      borderColor: globalRefs$c.colors.surface.main,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$a.colors.error.main,
+        borderColor: globalRefs$c.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$a.colors.surface.main,
-      borderColor: globalRefs$a.colors.surface.main,
-      valueTextColor: globalRefs$a.colors.surface.dark,
-      placeholderTextColor: globalRefs$a.colors.surface.dark,
-      backgroundColor: globalRefs$a.colors.surface.main,
+      labelTextColor: globalRefs$c.colors.surface.main,
+      borderColor: globalRefs$c.colors.surface.main,
+      valueTextColor: globalRefs$c.colors.surface.dark,
+      placeholderTextColor: globalRefs$c.colors.surface.dark,
+      backgroundColor: globalRefs$c.colors.surface.main,
     },
   },
   componentName
@@ -6491,18 +6837,82 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$n
+  vars: vars$p
 });
 
-const vars$m = TextFieldClass.cssVarList;
+const vars$o = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$o.hostWidth]: refs.width,
+  [vars$o.hostMinWidth]: refs.minWidth,
+  [vars$o.fontSize]: refs.fontSize,
+  [vars$o.fontFamily]: refs.fontFamily,
+  [vars$o.labelTextColor]: refs.labelTextColor,
+  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$o.inputValueTextColor]: refs.valueTextColor,
+  [vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$o.inputBorderWidth]: refs.borderWidth,
+  [vars$o.inputBorderStyle]: refs.borderStyle,
+  [vars$o.inputBorderColor]: refs.borderColor,
+  [vars$o.inputBorderRadius]: refs.borderRadius,
+  [vars$o.inputOutlineWidth]: refs.outlineWidth,
+  [vars$o.inputOutlineStyle]: refs.outlineStyle,
+  [vars$o.inputOutlineColor]: refs.outlineColor,
+  [vars$o.inputOutlineOffset]: refs.outlineOffset,
+  [vars$o.inputBackgroundColor]: refs.backgroundColor,
+  [vars$o.inputHeight]: refs.inputHeight,
+  [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$o
+});
+
+const globalRefs$b = getThemeRefs(globals);
+const vars$n = PasswordClass.cssVarList;
+
+const password = {
+  [vars$n.hostWidth]: refs.width,
+  [vars$n.fontSize]: refs.fontSize,
+  [vars$n.fontFamily]: refs.fontFamily,
+  [vars$n.labelTextColor]: refs.labelTextColor,
+  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$n.inputHeight]: refs.inputHeight,
+  [vars$n.inputBackgroundColor]: refs.backgroundColor,
+  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$n.inputValueTextColor]: refs.valueTextColor,
+  [vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$n.inputBorderWidth]: refs.borderWidth,
+  [vars$n.inputBorderStyle]: refs.borderStyle,
+  [vars$n.inputBorderColor]: refs.borderColor,
+  [vars$n.inputBorderRadius]: refs.borderRadius,
+  [vars$n.inputOutlineWidth]: refs.outlineWidth,
+  [vars$n.inputOutlineStyle]: refs.outlineStyle,
+  [vars$n.inputOutlineColor]: refs.outlineColor,
+  [vars$n.inputOutlineOffset]: refs.outlineOffset,
+  [vars$n.revealButtonOffset]: globalRefs$b.spacing.md,
+  [vars$n.revealButtonSize]: refs.toggleButtonSize,
+};
+
+var password$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: password,
+  vars: vars$n
+});
+
+const vars$m = NumberFieldClass.cssVarList;
+
+const numberField = {
   [vars$m.hostWidth]: refs.width,
   [vars$m.hostMinWidth]: refs.minWidth,
   [vars$m.fontSize]: refs.fontSize,
   [vars$m.fontFamily]: refs.fontFamily,
   [vars$m.labelTextColor]: refs.labelTextColor,
-  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$m.inputValueTextColor]: refs.valueTextColor,
   [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
@@ -6515,32 +6925,29 @@ const textField = {
   [vars$m.inputOutlineColor]: refs.outlineColor,
   [vars$m.inputOutlineOffset]: refs.outlineOffset,
   [vars$m.inputBackgroundColor]: refs.backgroundColor,
-  [vars$m.inputHeight]: refs.inputHeight,
+  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$m.inputHeight]: refs.inputHeight,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: numberField,
   vars: vars$m
 });
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$l = PasswordClass.cssVarList;
+const vars$l = EmailFieldClass.cssVarList;
 
-const password = {
+const emailField = {
   [vars$l.hostWidth]: refs.width,
+  [vars$l.hostMinWidth]: refs.minWidth,
   [vars$l.fontSize]: refs.fontSize,
   [vars$l.fontFamily]: refs.fontFamily,
   [vars$l.labelTextColor]: refs.labelTextColor,
   [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$l.inputHeight]: refs.inputHeight,
-  [vars$l.inputBackgroundColor]: refs.backgroundColor,
-  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$l.inputValueTextColor]: refs.valueTextColor,
-  [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$l.inputBorderWidth]: refs.borderWidth,
   [vars$l.inputBorderStyle]: refs.borderStyle,
   [vars$l.inputBorderColor]: refs.borderColor,
@@ -6549,227 +6956,166 @@ const password = {
   [vars$l.inputOutlineStyle]: refs.outlineStyle,
   [vars$l.inputOutlineColor]: refs.outlineColor,
   [vars$l.inputOutlineOffset]: refs.outlineOffset,
-  [vars$l.revealButtonOffset]: globalRefs$9.spacing.md,
-  [vars$l.revealButtonSize]: refs.toggleButtonSize,
+  [vars$l.inputBackgroundColor]: refs.backgroundColor,
+  [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$l.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: emailField,
   vars: vars$l
 });
 
-const vars$k = NumberFieldClass.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const vars$k = TextAreaClass.cssVarList;
 
-const numberField = {
+const textArea = {
   [vars$k.hostWidth]: refs.width,
   [vars$k.hostMinWidth]: refs.minWidth,
-  [vars$k.fontSize]: refs.fontSize,
+  [vars$k.fontSize]: globalRefs$a.typography.body2.size,
   [vars$k.fontFamily]: refs.fontFamily,
   [vars$k.labelTextColor]: refs.labelTextColor,
+  [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$k.inputBackgroundColor]: refs.backgroundColor,
   [vars$k.inputValueTextColor]: refs.valueTextColor,
-  [vars$k.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$k.inputBorderRadius]: refs.borderRadius,
   [vars$k.inputBorderWidth]: refs.borderWidth,
   [vars$k.inputBorderStyle]: refs.borderStyle,
   [vars$k.inputBorderColor]: refs.borderColor,
-  [vars$k.inputBorderRadius]: refs.borderRadius,
   [vars$k.inputOutlineWidth]: refs.outlineWidth,
   [vars$k.inputOutlineStyle]: refs.outlineStyle,
   [vars$k.inputOutlineColor]: refs.outlineColor,
   [vars$k.inputOutlineOffset]: refs.outlineOffset,
-  [vars$k.inputBackgroundColor]: refs.backgroundColor,
-  [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$k.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$k.inputHeight]: refs.inputHeight,
-};
-
-var numberField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: numberField,
-  vars: vars$k
-});
-
-const vars$j = EmailFieldClass.cssVarList;
-
-const emailField = {
-  [vars$j.hostWidth]: refs.width,
-  [vars$j.hostMinWidth]: refs.minWidth,
-  [vars$j.fontSize]: refs.fontSize,
-  [vars$j.fontFamily]: refs.fontFamily,
-  [vars$j.labelTextColor]: refs.labelTextColor,
-  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$j.inputValueTextColor]: refs.valueTextColor,
-  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$j.inputBorderWidth]: refs.borderWidth,
-  [vars$j.inputBorderStyle]: refs.borderStyle,
-  [vars$j.inputBorderColor]: refs.borderColor,
-  [vars$j.inputBorderRadius]: refs.borderRadius,
-  [vars$j.inputOutlineWidth]: refs.outlineWidth,
-  [vars$j.inputOutlineStyle]: refs.outlineStyle,
-  [vars$j.inputOutlineColor]: refs.outlineColor,
-  [vars$j.inputOutlineOffset]: refs.outlineOffset,
-  [vars$j.inputBackgroundColor]: refs.backgroundColor,
-  [vars$j.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$j.inputHeight]: refs.inputHeight,
-};
-
-var emailField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: emailField,
-  vars: vars$j
-});
-
-const globalRefs$8 = getThemeRefs(globals);
-const vars$i = TextAreaClass.cssVarList;
-
-const textArea = {
-  [vars$i.hostWidth]: refs.width,
-  [vars$i.hostMinWidth]: refs.minWidth,
-  [vars$i.fontSize]: globalRefs$8.typography.body2.size,
-  [vars$i.fontFamily]: refs.fontFamily,
-  [vars$i.labelTextColor]: refs.labelTextColor,
-  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$i.inputBackgroundColor]: refs.backgroundColor,
-  [vars$i.inputValueTextColor]: refs.valueTextColor,
-  [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$i.inputBorderRadius]: refs.borderRadius,
-  [vars$i.inputBorderWidth]: refs.borderWidth,
-  [vars$i.inputBorderStyle]: refs.borderStyle,
-  [vars$i.inputBorderColor]: refs.borderColor,
-  [vars$i.inputOutlineWidth]: refs.outlineWidth,
-  [vars$i.inputOutlineStyle]: refs.outlineStyle,
-  [vars$i.inputOutlineColor]: refs.outlineColor,
-  [vars$i.inputOutlineOffset]: refs.outlineOffset,
-  [vars$i.inputResizeType]: 'vertical',
-  [vars$i.inputMinHeight]: '5em',
+  [vars$k.inputResizeType]: 'vertical',
+  [vars$k.inputMinHeight]: '5em',
 
   _disabled: {
-    [vars$i.inputBackgroundColor]: globalRefs$8.colors.surface.light,
+    [vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
   },
 
   _readonly: {
-    [vars$i.inputResizeType]: 'none',
+    [vars$k.inputResizeType]: 'none',
   },
 };
 
 var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textArea,
-  vars: vars$i
+  vars: vars$k
 });
 
-const vars$h = CheckboxClass.cssVarList;
+const vars$j = CheckboxClass.cssVarList;
 
 const checkbox = {
-  [vars$h.hostWidth]: refs.width,
-  [vars$h.fontSize]: refs.fontSize,
-  [vars$h.fontFamily]: refs.fontFamily,
-  [vars$h.labelTextColor]: refs.labelTextColor,
-  [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$h.labelFontWeight]: '400',
-  [vars$h.labelSpacing]: '0.75em',
-  [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$h.inputOutlineWidth]: refs.outlineWidth,
-  [vars$h.inputOutlineOffset]: refs.outlineOffset,
-  [vars$h.inputOutlineColor]: refs.outlineColor,
-  [vars$h.inputOutlineStyle]: refs.outlineStyle,
-  [vars$h.inputBorderRadius]: refs.borderRadius,
-  [vars$h.inputBorderColor]: refs.borderColor,
-  [vars$h.inputBorderWidth]: refs.borderWidth,
-  [vars$h.inputBorderStyle]: refs.borderStyle,
-  [vars$h.inputBackgroundColor]: refs.inputBackgroundColor,
-  [vars$h.inputSize]: '2em',
+  [vars$j.hostWidth]: refs.width,
+  [vars$j.fontSize]: refs.fontSize,
+  [vars$j.fontFamily]: refs.fontFamily,
+  [vars$j.labelTextColor]: refs.labelTextColor,
+  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$j.labelFontWeight]: '400',
+  [vars$j.labelSpacing]: '0.75em',
+  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$j.inputOutlineWidth]: refs.outlineWidth,
+  [vars$j.inputOutlineOffset]: refs.outlineOffset,
+  [vars$j.inputOutlineColor]: refs.outlineColor,
+  [vars$j.inputOutlineStyle]: refs.outlineStyle,
+  [vars$j.inputBorderRadius]: refs.borderRadius,
+  [vars$j.inputBorderColor]: refs.borderColor,
+  [vars$j.inputBorderWidth]: refs.borderWidth,
+  [vars$j.inputBorderStyle]: refs.borderStyle,
+  [vars$j.inputBackgroundColor]: refs.inputBackgroundColor,
+  [vars$j.inputSize]: '2em',
 
   _checked: {
-    [vars$h.inputBackgroundColor]: refs.backgroundColor,
-    [vars$h.inputValueTextColor]: refs.valueTextColor,
+    [vars$j.inputBackgroundColor]: refs.backgroundColor,
+    [vars$j.inputValueTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$h.labelTextColor]: refs.labelTextColor,
+    [vars$j.labelTextColor]: refs.labelTextColor,
   },
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: checkbox,
-  vars: vars$h
+  vars: vars$j
 });
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
-const globalRefs$7 = getThemeRefs(globals);
-const vars$g = SwitchToggleClass.cssVarList;
+const globalRefs$9 = getThemeRefs(globals);
+const vars$i = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-  [vars$g.fontSize]: refs.fontSize,
-  [vars$g.fontFamily]: refs.fontFamily,
-
-  [vars$g.inputOutlineWidth]: refs.outlineWidth,
-  [vars$g.inputOutlineOffset]: refs.outlineOffset,
-  [vars$g.inputOutlineColor]: refs.outlineColor,
-  [vars$g.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$g.trackBorderStyle]: refs.borderStyle,
-  [vars$g.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$g.trackBorderColor]: refs.borderColor,
-  [vars$g.trackBackgroundColor]: 'none',
-  [vars$g.trackBorderRadius]: globalRefs$7.radius.md,
-  [vars$g.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$g.trackHeight]: checkboxHeight,
-
-  [vars$g.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$g.knobRadius]: '50%',
-  [vars$g.knobTopOffset]: '1px',
-  [vars$g.knobLeftOffset]: knobMargin,
-  [vars$g.knobColor]: refs.valueTextColor,
-  [vars$g.knobTransitionDuration]: '0.3s',
-
-  [vars$g.labelTextColor]: refs.labelTextColor,
-  [vars$g.labelFontWeight]: '400',
-  [vars$g.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
-  [vars$g.labelSpacing]: '0.25em',
-  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
-
-  [vars$g.hostWidth]: refs.width,
+  [vars$i.fontSize]: refs.fontSize,
+  [vars$i.fontFamily]: refs.fontFamily,
+
+  [vars$i.inputOutlineWidth]: refs.outlineWidth,
+  [vars$i.inputOutlineOffset]: refs.outlineOffset,
+  [vars$i.inputOutlineColor]: refs.outlineColor,
+  [vars$i.inputOutlineStyle]: refs.outlineStyle,
+
+  [vars$i.trackBorderStyle]: refs.borderStyle,
+  [vars$i.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$i.trackBorderColor]: refs.borderColor,
+  [vars$i.trackBackgroundColor]: 'none',
+  [vars$i.trackBorderRadius]: globalRefs$9.radius.md,
+  [vars$i.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$i.trackHeight]: checkboxHeight,
+
+  [vars$i.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$i.knobRadius]: '50%',
+  [vars$i.knobTopOffset]: '1px',
+  [vars$i.knobLeftOffset]: knobMargin,
+  [vars$i.knobColor]: refs.valueTextColor,
+  [vars$i.knobTransitionDuration]: '0.3s',
+
+  [vars$i.labelTextColor]: refs.labelTextColor,
+  [vars$i.labelFontWeight]: '400',
+  [vars$i.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
+  [vars$i.labelSpacing]: '0.25em',
+  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
+
+  [vars$i.hostWidth]: refs.width,
 
   _checked: {
-    [vars$g.trackBorderColor]: refs.borderColor,
-    [vars$g.trackBackgroundColor]: refs.backgroundColor,
-    [vars$g.knobLeftOffset]: `calc(100% - var(${vars$g.knobSize}) - ${knobMargin})`,
-    [vars$g.knobColor]: refs.valueTextColor,
-    [vars$g.knobTextColor]: refs.valueTextColor,
+    [vars$i.trackBorderColor]: refs.borderColor,
+    [vars$i.trackBackgroundColor]: refs.backgroundColor,
+    [vars$i.knobLeftOffset]: `calc(100% - var(${vars$i.knobSize}) - ${knobMargin})`,
+    [vars$i.knobColor]: refs.valueTextColor,
+    [vars$i.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$g.knobColor]: globalRefs$7.colors.surface.light,
-    [vars$g.trackBorderColor]: globalRefs$7.colors.surface.main,
-    [vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
-    [vars$g.labelTextColor]: refs.labelTextColor,
+    [vars$i.knobColor]: globalRefs$9.colors.surface.light,
+    [vars$i.trackBorderColor]: globalRefs$9.colors.surface.main,
+    [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
+    [vars$i.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$g.knobColor]: globalRefs$7.colors.surface.light,
-      [vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
+      [vars$i.knobColor]: globalRefs$9.colors.surface.light,
+      [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$g.trackBorderColor]: globalRefs$7.colors.error.main,
-    [vars$g.knobColor]: globalRefs$7.colors.error.main,
+    [vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
+    [vars$i.knobColor]: globalRefs$9.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$g
+  vars: vars$i
 });
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 
 const compVars$2 = ContainerClass.cssVarList;
 
@@ -6791,7 +7137,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$n
+  componentName$q
 );
 
 const { shadowColor } = helperRefs$2;
@@ -6801,8 +7147,8 @@ const container = {
 
   [compVars$2.hostWidth]: '100%',
   [compVars$2.boxShadow]: 'none',
-  [compVars$2.backgroundColor]: globalRefs$6.colors.surface.light,
-  [compVars$2.color]: globalRefs$6.colors.surface.contrast,
+  [compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
+  [compVars$2.color]: globalRefs$8.colors.surface.contrast,
 
   verticalPadding: {
     sm: { [compVars$2.verticalPadding]: '5px' },
@@ -6848,34 +7194,34 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
     },
     md: {
-      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
     },
     lg: {
-      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
     },
     xl: {
-      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$2.borderRadius]: globalRefs$6.radius.sm },
-    md: { [compVars$2.borderRadius]: globalRefs$6.radius.md },
-    lg: { [compVars$2.borderRadius]: globalRefs$6.radius.lg },
-    xl: { [compVars$2.borderRadius]: globalRefs$6.radius.xl },
-    '2xl': { [compVars$2.borderRadius]: globalRefs$6.radius['2xl'] },
-    '3xl': { [compVars$2.borderRadius]: globalRefs$6.radius['3xl'] },
+    sm: { [compVars$2.borderRadius]: globalRefs$8.radius.sm },
+    md: { [compVars$2.borderRadius]: globalRefs$8.radius.md },
+    lg: { [compVars$2.borderRadius]: globalRefs$8.radius.lg },
+    xl: { [compVars$2.borderRadius]: globalRefs$8.radius.xl },
+    '2xl': { [compVars$2.borderRadius]: globalRefs$8.radius['2xl'] },
+    '3xl': { [compVars$2.borderRadius]: globalRefs$8.radius['3xl'] },
   },
 };
 
-const vars$f = {
+const vars$h = {
   ...compVars$2,
   ...helperVars$2,
 };
@@ -6883,152 +7229,152 @@ const vars$f = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$f
+  vars: vars$h
 });
 
-const vars$e = LogoClass.cssVarList;
+const vars$g = LogoClass.cssVarList;
 
 const logo$1 = {
-  [vars$e.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$e
+  vars: vars$g
 });
 
-const vars$d = TotpImageClass.cssVarList;
+const vars$f = TotpImageClass.cssVarList;
 
 const logo = {
-  [vars$d.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$d
+  vars: vars$f
 });
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$c = TextClass.cssVarList;
+const globalRefs$7 = getThemeRefs(globals);
+const vars$e = TextClass.cssVarList;
 
 const text = {
-  [vars$c.textLineHeight]: '1em',
-  [vars$c.textAlign]: 'left',
-  [vars$c.textColor]: globalRefs$5.colors.surface.dark,
+  [vars$e.textLineHeight]: '1em',
+  [vars$e.textAlign]: 'left',
+  [vars$e.textColor]: globalRefs$7.colors.surface.dark,
   variant: {
     h1: {
-      [vars$c.fontSize]: globalRefs$5.typography.h1.size,
-      [vars$c.fontWeight]: globalRefs$5.typography.h1.weight,
-      [vars$c.fontFamily]: globalRefs$5.typography.h1.font,
+      [vars$e.fontSize]: globalRefs$7.typography.h1.size,
+      [vars$e.fontWeight]: globalRefs$7.typography.h1.weight,
+      [vars$e.fontFamily]: globalRefs$7.typography.h1.font,
     },
     h2: {
-      [vars$c.fontSize]: globalRefs$5.typography.h2.size,
-      [vars$c.fontWeight]: globalRefs$5.typography.h2.weight,
-      [vars$c.fontFamily]: globalRefs$5.typography.h2.font,
+      [vars$e.fontSize]: globalRefs$7.typography.h2.size,
+      [vars$e.fontWeight]: globalRefs$7.typography.h2.weight,
+      [vars$e.fontFamily]: globalRefs$7.typography.h2.font,
     },
     h3: {
-      [vars$c.fontSize]: globalRefs$5.typography.h3.size,
-      [vars$c.fontWeight]: globalRefs$5.typography.h3.weight,
-      [vars$c.fontFamily]: globalRefs$5.typography.h3.font,
+      [vars$e.fontSize]: globalRefs$7.typography.h3.size,
+      [vars$e.fontWeight]: globalRefs$7.typography.h3.weight,
+      [vars$e.fontFamily]: globalRefs$7.typography.h3.font,
     },
     subtitle1: {
-      [vars$c.fontSize]: globalRefs$5.typography.subtitle1.size,
-      [vars$c.fontWeight]: globalRefs$5.typography.subtitle1.weight,
-      [vars$c.fontFamily]: globalRefs$5.typography.subtitle1.font,
+      [vars$e.fontSize]: globalRefs$7.typography.subtitle1.size,
+      [vars$e.fontWeight]: globalRefs$7.typography.subtitle1.weight,
+      [vars$e.fontFamily]: globalRefs$7.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$c.fontSize]: globalRefs$5.typography.subtitle2.size,
-      [vars$c.fontWeight]: globalRefs$5.typography.subtitle2.weight,
-      [vars$c.fontFamily]: globalRefs$5.typography.subtitle2.font,
+      [vars$e.fontSize]: globalRefs$7.typography.subtitle2.size,
+      [vars$e.fontWeight]: globalRefs$7.typography.subtitle2.weight,
+      [vars$e.fontFamily]: globalRefs$7.typography.subtitle2.font,
     },
     body1: {
-      [vars$c.fontSize]: globalRefs$5.typography.body1.size,
-      [vars$c.fontWeight]: globalRefs$5.typography.body1.weight,
-      [vars$c.fontFamily]: globalRefs$5.typography.body1.font,
+      [vars$e.fontSize]: globalRefs$7.typography.body1.size,
+      [vars$e.fontWeight]: globalRefs$7.typography.body1.weight,
+      [vars$e.fontFamily]: globalRefs$7.typography.body1.font,
     },
     body2: {
-      [vars$c.fontSize]: globalRefs$5.typography.body2.size,
-      [vars$c.fontWeight]: globalRefs$5.typography.body2.weight,
-      [vars$c.fontFamily]: globalRefs$5.typography.body2.font,
+      [vars$e.fontSize]: globalRefs$7.typography.body2.size,
+      [vars$e.fontWeight]: globalRefs$7.typography.body2.weight,
+      [vars$e.fontFamily]: globalRefs$7.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$c.textColor]: globalRefs$5.colors.primary.main,
+      [vars$e.textColor]: globalRefs$7.colors.primary.main,
     },
     secondary: {
-      [vars$c.textColor]: globalRefs$5.colors.secondary.main,
+      [vars$e.textColor]: globalRefs$7.colors.secondary.main,
     },
     error: {
-      [vars$c.textColor]: globalRefs$5.colors.error.main,
+      [vars$e.textColor]: globalRefs$7.colors.error.main,
     },
     success: {
-      [vars$c.textColor]: globalRefs$5.colors.success.main,
+      [vars$e.textColor]: globalRefs$7.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$c.textAlign]: 'right' },
-    left: { [vars$c.textAlign]: 'left' },
-    center: { [vars$c.textAlign]: 'center' },
+    right: { [vars$e.textAlign]: 'right' },
+    left: { [vars$e.textAlign]: 'left' },
+    center: { [vars$e.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$c.hostWidth]: '100%',
+    [vars$e.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$c.fontStyle]: 'italic',
+    [vars$e.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$c.textTransform]: 'uppercase',
+    [vars$e.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$c.textTransform]: 'lowercase',
+    [vars$e.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$c
+  vars: vars$e
 });
 
-const globalRefs$4 = getThemeRefs(globals);
-const vars$b = LinkClass.cssVarList;
+const globalRefs$6 = getThemeRefs(globals);
+const vars$d = LinkClass.cssVarList;
 
 const link = {
-  [vars$b.cursor]: 'pointer',
+  [vars$d.cursor]: 'pointer',
 
-  [vars$b.textColor]: globalRefs$4.colors.primary.main,
+  [vars$d.textColor]: globalRefs$6.colors.primary.main,
 
   textAlign: {
-    right: { [vars$b.textAlign]: 'right' },
-    left: { [vars$b.textAlign]: 'left' },
-    center: { [vars$b.textAlign]: 'center' },
+    right: { [vars$d.textAlign]: 'right' },
+    left: { [vars$d.textAlign]: 'left' },
+    center: { [vars$d.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$b.hostWidth]: '100%',
+    [vars$d.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$b.textColor]: globalRefs$4.colors.primary.main,
+      [vars$d.textColor]: globalRefs$6.colors.primary.main,
     },
     secondary: {
-      [vars$b.textColor]: globalRefs$4.colors.secondary.main,
+      [vars$d.textColor]: globalRefs$6.colors.secondary.main,
     },
     error: {
-      [vars$b.textColor]: globalRefs$4.colors.error.main,
+      [vars$d.textColor]: globalRefs$6.colors.error.main,
     },
     success: {
-      [vars$b.textColor]: globalRefs$4.colors.success.main,
+      [vars$d.textColor]: globalRefs$6.colors.success.main,
     },
   },
 };
@@ -7036,10 +7382,10 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$b
+  vars: vars$d
 });
 
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 const compVars$1 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -7047,7 +7393,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$m
+  componentName$p
 );
 
 const divider = {
@@ -7057,7 +7403,7 @@ const divider = {
   [compVars$1.flexDirection]: 'row',
   [compVars$1.alignSelf]: 'stretch',
   [compVars$1.hostWidth]: '100%',
-  [compVars$1.stripeColor]: globalRefs$3.colors.surface.main,
+  [compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
   [compVars$1.stripeColorOpacity]: '0.5',
   [compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$1.labelTextWidth]: 'fit-content',
@@ -7076,7 +7422,7 @@ const divider = {
   },
 };
 
-const vars$a = {
+const vars$c = {
   ...compVars$1,
   ...helperVars$1,
 };
@@ -7084,99 +7430,99 @@ const vars$a = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$a
+  vars: vars$c
 });
 
-const vars$9 = PasscodeClass.cssVarList;
+const vars$b = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$9.fontFamily]: refs.fontFamily,
-  [vars$9.fontSize]: refs.fontSize,
-  [vars$9.labelTextColor]: refs.labelTextColor,
-  [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$9.digitValueTextColor]: refs.valueTextColor,
-  [vars$9.digitPadding]: '0',
-  [vars$9.digitTextAlign]: 'center',
-  [vars$9.digitSpacing]: '4px',
-  [vars$9.hostWidth]: refs.width,
-  [vars$9.digitOutlineColor]: 'transparent',
-  [vars$9.digitOutlineWidth]: refs.outlineWidth,
-  [vars$9.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$9.digitSize]: refs.inputHeight,
+  [vars$b.fontFamily]: refs.fontFamily,
+  [vars$b.fontSize]: refs.fontSize,
+  [vars$b.labelTextColor]: refs.labelTextColor,
+  [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$b.digitValueTextColor]: refs.valueTextColor,
+  [vars$b.digitPadding]: '0',
+  [vars$b.digitTextAlign]: 'center',
+  [vars$b.digitSpacing]: '4px',
+  [vars$b.hostWidth]: refs.width,
+  [vars$b.digitOutlineColor]: 'transparent',
+  [vars$b.digitOutlineWidth]: refs.outlineWidth,
+  [vars$b.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$b.digitSize]: refs.inputHeight,
 
   _hideCursor: {
-    [vars$9.digitCaretTextColor]: 'transparent',
+    [vars$b.digitCaretTextColor]: 'transparent',
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$9
+  vars: vars$b
 });
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$8 = LoaderLinearClass.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
+const vars$a = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$8.hostDisplay]: 'inline-block',
-  [vars$8.hostWidth]: '100%',
+  [vars$a.hostDisplay]: 'inline-block',
+  [vars$a.hostWidth]: '100%',
 
-  [vars$8.barColor]: globalRefs$2.colors.surface.contrast,
-  [vars$8.barWidth]: '20%',
+  [vars$a.barColor]: globalRefs$4.colors.surface.contrast,
+  [vars$a.barWidth]: '20%',
 
-  [vars$8.barBackgroundColor]: globalRefs$2.colors.surface.main,
-  [vars$8.barBorderRadius]: '4px',
+  [vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
+  [vars$a.barBorderRadius]: '4px',
 
-  [vars$8.animationDuration]: '2s',
-  [vars$8.animationTimingFunction]: 'linear',
-  [vars$8.animationIterationCount]: 'infinite',
-  [vars$8.verticalPadding]: '0.25em',
+  [vars$a.animationDuration]: '2s',
+  [vars$a.animationTimingFunction]: 'linear',
+  [vars$a.animationIterationCount]: 'infinite',
+  [vars$a.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$8.barHeight]: '2px' },
-    sm: { [vars$8.barHeight]: '4px' },
-    md: { [vars$8.barHeight]: '6px' },
-    lg: { [vars$8.barHeight]: '8px' },
+    xs: { [vars$a.barHeight]: '2px' },
+    sm: { [vars$a.barHeight]: '4px' },
+    md: { [vars$a.barHeight]: '6px' },
+    lg: { [vars$a.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$8.barColor]: globalRefs$2.colors.primary.main,
+      [vars$a.barColor]: globalRefs$4.colors.primary.main,
     },
     secondary: {
-      [vars$8.barColor]: globalRefs$2.colors.secondary.main,
+      [vars$a.barColor]: globalRefs$4.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$8.hostDisplay]: 'none',
+    [vars$a.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$8
+  vars: vars$a
 });
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 const compVars = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
-    spinnerColor: globalRefs$1.colors.surface.contrast,
+    spinnerColor: globalRefs$3.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$1.colors.primary.main,
+        spinnerColor: globalRefs$3.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$1.colors.secondary.main,
+        spinnerColor: globalRefs$3.colors.secondary.main,
       },
     },
   },
-  componentName$o
+  componentName$r
 );
 
 const loaderRadial = {
@@ -7205,7 +7551,7 @@ const loaderRadial = {
     [compVars.hostDisplay]: 'none',
   },
 };
-const vars$7 = {
+const vars$9 = {
   ...compVars,
   ...helperVars,
 };
@@ -7213,43 +7559,43 @@ const vars$7 = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$7
+  vars: vars$9
 });
 
-const globalRefs = getThemeRefs(globals);
-const vars$6 = ComboBoxClass.cssVarList;
+const globalRefs$2 = getThemeRefs(globals);
+const vars$8 = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$6.hostWidth]: refs.width,
-  [vars$6.fontSize]: refs.fontSize,
-  [vars$6.fontFamily]: refs.fontFamily,
-  [vars$6.labelTextColor]: refs.labelTextColor,
-  [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$6.inputBorderColor]: refs.borderColor,
-  [vars$6.inputBorderWidth]: refs.borderWidth,
-  [vars$6.inputBorderStyle]: refs.borderStyle,
-  [vars$6.inputBorderRadius]: refs.borderRadius,
-  [vars$6.inputOutlineColor]: refs.outlineColor,
-  [vars$6.inputOutlineOffset]: refs.outlineOffset,
-  [vars$6.inputOutlineWidth]: refs.outlineWidth,
-  [vars$6.inputOutlineStyle]: refs.outlineStyle,
-  [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$6.inputValueTextColor]: refs.valueTextColor,
-  [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$6.inputBackgroundColor]: refs.backgroundColor,
-  [vars$6.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$6.inputHeight]: refs.inputHeight,
-  [vars$6.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
-  [vars$6.inputDropdownButtonCursor]: 'pointer',
-  [vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$6.inputDropdownButtonOffset]: globalRefs.spacing.xs,
+  [vars$8.hostWidth]: refs.width,
+  [vars$8.fontSize]: refs.fontSize,
+  [vars$8.fontFamily]: refs.fontFamily,
+  [vars$8.labelTextColor]: refs.labelTextColor,
+  [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$8.inputBorderColor]: refs.borderColor,
+  [vars$8.inputBorderWidth]: refs.borderWidth,
+  [vars$8.inputBorderStyle]: refs.borderStyle,
+  [vars$8.inputBorderRadius]: refs.borderRadius,
+  [vars$8.inputOutlineColor]: refs.outlineColor,
+  [vars$8.inputOutlineOffset]: refs.outlineOffset,
+  [vars$8.inputOutlineWidth]: refs.outlineWidth,
+  [vars$8.inputOutlineStyle]: refs.outlineStyle,
+  [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$8.inputValueTextColor]: refs.valueTextColor,
+  [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$8.inputBackgroundColor]: refs.backgroundColor,
+  [vars$8.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$8.inputHeight]: refs.inputHeight,
+  [vars$8.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
+  [vars$8.inputDropdownButtonCursor]: 'pointer',
+  [vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$8.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
 
   _readonly: {
-    [vars$6.inputDropdownButtonCursor]: 'default',
+    [vars$8.inputDropdownButtonCursor]: 'default',
   },
 
-  [vars$6.overlay.minHeight]: '400px',
-  [vars$6.overlay.margin]: '0 auto',
+  [vars$8.overlay.minHeight]: '400px',
+  [vars$8.overlay.margin]: '0 auto',
 
   // [vars.overlayCursor]: 'pointer',
   // [vars.overlayBackground]: globalRefs.colors.surface.light,
@@ -7260,41 +7606,41 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$6
+  vars: vars$8
 });
 
-const vars$5 = ImageClass.cssVarList;
+const vars$7 = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$5
+  vars: vars$7
 });
 
-const vars$4 = PhoneFieldClass.cssVarList;
+const vars$6 = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$4.hostWidth]: refs.width,
-  [vars$4.fontSize]: refs.fontSize,
-  [vars$4.fontFamily]: refs.fontFamily,
-  [vars$4.labelTextColor]: refs.labelTextColor,
-  [vars$4.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$4.inputValueTextColor]: refs.valueTextColor,
-  [vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$4.inputBorderStyle]: refs.borderStyle,
-  [vars$4.inputBorderWidth]: refs.borderWidth,
-  [vars$4.inputBorderColor]: refs.borderColor,
-  [vars$4.inputBorderRadius]: refs.borderRadius,
-  [vars$4.inputOutlineStyle]: refs.outlineStyle,
-  [vars$4.inputOutlineWidth]: refs.outlineWidth,
-  [vars$4.inputOutlineColor]: refs.outlineColor,
-  [vars$4.inputOutlineOffset]: refs.outlineOffset,
-  [vars$4.phoneInputWidth]: refs.minWidth,
-  [vars$4.countryCodeInputWidth]: '5em',
-  [vars$4.countryCodeDropdownWidth]: '20em',
+  [vars$6.hostWidth]: refs.width,
+  [vars$6.fontSize]: refs.fontSize,
+  [vars$6.fontFamily]: refs.fontFamily,
+  [vars$6.labelTextColor]: refs.labelTextColor,
+  [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$6.inputValueTextColor]: refs.valueTextColor,
+  [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$6.inputBorderStyle]: refs.borderStyle,
+  [vars$6.inputBorderWidth]: refs.borderWidth,
+  [vars$6.inputBorderColor]: refs.borderColor,
+  [vars$6.inputBorderRadius]: refs.borderRadius,
+  [vars$6.inputOutlineStyle]: refs.outlineStyle,
+  [vars$6.inputOutlineWidth]: refs.outlineWidth,
+  [vars$6.inputOutlineColor]: refs.outlineColor,
+  [vars$6.inputOutlineOffset]: refs.outlineOffset,
+  [vars$6.phoneInputWidth]: refs.minWidth,
+  [vars$6.countryCodeInputWidth]: '5em',
+  [vars$6.countryCodeDropdownWidth]: '20em',
 
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
@@ -7304,127 +7650,173 @@ const phoneField = {
 var phoneField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneField,
-  vars: vars$4
+  vars: vars$6
 });
 
-const vars$3 = PhoneFieldInputBoxClass.cssVarList;
+const vars$5 = PhoneFieldInputBoxClass.cssVarList;
 
 const phoneInputBoxField = {
-  [vars$3.hostWidth]: '16em',
-  [vars$3.hostMinWidth]: refs.minWidth,
-  [vars$3.fontSize]: refs.fontSize,
-  [vars$3.fontFamily]: refs.fontFamily,
-  [vars$3.labelTextColor]: refs.labelTextColor,
-  [vars$3.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$3.inputValueTextColor]: refs.valueTextColor,
-  [vars$3.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$3.inputBorderStyle]: refs.borderStyle,
-  [vars$3.inputBorderWidth]: refs.borderWidth,
-  [vars$3.inputBorderColor]: refs.borderColor,
-  [vars$3.inputBorderRadius]: refs.borderRadius,
-  [vars$3.inputOutlineStyle]: refs.outlineStyle,
-  [vars$3.inputOutlineWidth]: refs.outlineWidth,
-  [vars$3.inputOutlineColor]: refs.outlineColor,
-  [vars$3.inputOutlineOffset]: refs.outlineOffset,
+  [vars$5.hostWidth]: '16em',
+  [vars$5.hostMinWidth]: refs.minWidth,
+  [vars$5.fontSize]: refs.fontSize,
+  [vars$5.fontFamily]: refs.fontFamily,
+  [vars$5.labelTextColor]: refs.labelTextColor,
+  [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$5.inputValueTextColor]: refs.valueTextColor,
+  [vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$5.inputBorderStyle]: refs.borderStyle,
+  [vars$5.inputBorderWidth]: refs.borderWidth,
+  [vars$5.inputBorderColor]: refs.borderColor,
+  [vars$5.inputBorderRadius]: refs.borderRadius,
+  [vars$5.inputOutlineStyle]: refs.outlineStyle,
+  [vars$5.inputOutlineWidth]: refs.outlineWidth,
+  [vars$5.inputOutlineColor]: refs.outlineColor,
+  [vars$5.inputOutlineOffset]: refs.outlineOffset,
   _fullWidth: {
-    [vars$3.hostWidth]: refs.width,
+    [vars$5.hostWidth]: refs.width,
   },
 };
 
 var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneInputBoxField,
-  vars: vars$3
+  vars: vars$5
 });
 
-const vars$2 = NewPasswordClass.cssVarList;
+const vars$4 = NewPasswordClass.cssVarList;
 
 const newPassword = {
-  [vars$2.hostWidth]: refs.width,
-  [vars$2.hostMinWidth]: refs.minWidth,
-  [vars$2.fontSize]: refs.fontSize,
-  [vars$2.fontFamily]: refs.fontFamily,
-  [vars$2.spaceBetweenInputs]: '1em',
-  [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$4.hostWidth]: refs.width,
+  [vars$4.hostMinWidth]: refs.minWidth,
+  [vars$4.fontSize]: refs.fontSize,
+  [vars$4.fontFamily]: refs.fontFamily,
+  [vars$4.spaceBetweenInputs]: '1em',
+  [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
     // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$2.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$4.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$2
+  vars: vars$4
 });
 
-const vars$1 = UploadFileClass.cssVarList;
+const vars$3 = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$1.labelTextColor]: refs.labelTextColor,
-  [vars$1.fontFamily]: refs.fontFamily,
+  [vars$3.labelTextColor]: refs.labelTextColor,
+  [vars$3.fontFamily]: refs.fontFamily,
 
-  [vars$1.iconSize]: '2em',
+  [vars$3.iconSize]: '2em',
 
-  [vars$1.hostPadding]: '0.75em',
-  [vars$1.gap]: '0.5em',
+  [vars$3.hostPadding]: '0.75em',
+  [vars$3.gap]: '0.5em',
 
-  [vars$1.fontSize]: '16px',
-  [vars$1.titleFontWeight]: '500',
-  [vars$1.lineHeight]: '1em',
+  [vars$3.fontSize]: '16px',
+  [vars$3.titleFontWeight]: '500',
+  [vars$3.lineHeight]: '1em',
 
-  [vars$1.borderWidth]: refs.borderWidth,
-  [vars$1.borderColor]: refs.borderColor,
-  [vars$1.borderRadius]: refs.borderRadius,
-  [vars$1.borderStyle]: 'dashed',
+  [vars$3.borderWidth]: refs.borderWidth,
+  [vars$3.borderColor]: refs.borderColor,
+  [vars$3.borderRadius]: refs.borderRadius,
+  [vars$3.borderStyle]: 'dashed',
 
   _required: {
-    [vars$1.requiredIndicator]: refs.requiredIndicator,
+    [vars$3.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$1.hostHeight]: '196px',
-      [vars$1.hostWidth]: '200px',
-      [vars$1.titleFontSize]: '0.875em',
-      [vars$1.descriptionFontSize]: '0.875em',
-      [vars$1.lineHeight]: '1.25em',
+      [vars$3.hostHeight]: '196px',
+      [vars$3.hostWidth]: '200px',
+      [vars$3.titleFontSize]: '0.875em',
+      [vars$3.descriptionFontSize]: '0.875em',
+      [vars$3.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$1.hostHeight]: '216px',
-      [vars$1.hostWidth]: '230px',
-      [vars$1.titleFontSize]: '1em',
-      [vars$1.descriptionFontSize]: '0.875em',
-      [vars$1.lineHeight]: '1.25em',
+      [vars$3.hostHeight]: '216px',
+      [vars$3.hostWidth]: '230px',
+      [vars$3.titleFontSize]: '1em',
+      [vars$3.descriptionFontSize]: '0.875em',
+      [vars$3.lineHeight]: '1.25em',
     },
     md: {
-      [vars$1.hostHeight]: '256px',
-      [vars$1.hostWidth]: '312px',
-      [vars$1.titleFontSize]: '1.125em',
-      [vars$1.descriptionFontSize]: '1em',
-      [vars$1.lineHeight]: '1.5em',
+      [vars$3.hostHeight]: '256px',
+      [vars$3.hostWidth]: '312px',
+      [vars$3.titleFontSize]: '1.125em',
+      [vars$3.descriptionFontSize]: '1em',
+      [vars$3.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$1.hostHeight]: '280px',
-      [vars$1.hostWidth]: '336px',
-      [vars$1.titleFontSize]: '1.125em',
-      [vars$1.descriptionFontSize]: '1.125em',
-      [vars$1.lineHeight]: '1.75em',
+      [vars$3.hostHeight]: '280px',
+      [vars$3.hostWidth]: '336px',
+      [vars$3.titleFontSize]: '1.125em',
+      [vars$3.descriptionFontSize]: '1.125em',
+      [vars$3.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$1.hostWidth]: refs.width,
+    [vars$3.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
+  vars: vars$3
+});
+
+const globalRefs$1 = getThemeRefs(globals);
+
+const vars$2 = SelectItemClass.cssVarList;
+
+const selectItem = {
+  [vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
+  [vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
+  [vars$2.borderColor]: globalRefs$1.colors.surface.main,
+  [vars$2.borderStyle]: 'solid',
+  [vars$2.borderRadius]: globalRefs$1.radius.sm,
+
+  _hover: {
+    [vars$2.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+  },
+
+  _selected: {
+    [vars$2.borderColor]: globalRefs$1.colors.surface.contrast,
+    [vars$2.backgroundColor]: globalRefs$1.colors.surface.contrast,
+    [vars$2.labelTextColor]: globalRefs$1.colors.surface.light,
+  },
+};
+
+var selectItem$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: selectItem,
+  vars: vars$2
+});
+
+const globalRefs = getThemeRefs(globals);
+const vars$1 = SingleSelectClass.cssVarList;
+
+const singleSelect = {
+  [vars$1.fontFamily]: refs.fontFamily,
+  [vars$1.labelTextColor]: refs.labelTextColor,
+  [vars$1.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$1.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$1.itemsSpacing]: globalRefs.spacing.sm,
+  [vars$1.hostWidth]: refs.width,
+};
+
+var singleSelect$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: singleSelect,
   vars: vars$1
 });
 
@@ -7453,6 +7845,8 @@ const components = {
   newPassword: newPassword$1,
   inputWrapper,
   uploadFile: uploadFile$1,
+  selectItem: selectItem$1,
+  singleSelect: singleSelect$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -7465,7 +7859,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$p, components: vars };
+const themeVars = { globals: vars$r, components: vars };
 
-export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SelectItemClass, SingleSelectClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map