@descope/web-components-ui 1.0.386 → 1.0.388

package/dist/cjs/index.cjs.js

@@ -643,7 +643,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$O = getThemeVars(globals);
+const vars$P = getThemeVars(globals);
 
 const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
 
@@ -2935,9 +2935,9 @@ const createIcon = async (src) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$X = getComponentName('icon');
+const componentName$Y = getComponentName('icon');
 
-class RawIcon extends createBaseClass({ componentName: componentName$X, baseSelector: 'slot' }) {
+class RawIcon extends createBaseClass({ componentName: componentName$Y, baseSelector: 'slot' }) {
   static get observedAttributes() {
     return ['src'];
   }
@@ -3022,7 +3022,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$W = getComponentName('button');
+const componentName$X = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -3138,7 +3138,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$W,
+    componentName: componentName$X,
   })
 );
 
@@ -3186,7 +3186,7 @@ const mode = {
   surface: globalRefs$x.colors.surface,
 };
 
-const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$W);
+const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$X);
 
 const button = {
   ...helperTheme$4,
@@ -3298,7 +3298,7 @@ const button = {
   },
 };
 
-const vars$N = {
+const vars$O = {
   ...compVars$6,
   ...helperVars$4,
 };
@@ -3306,7 +3306,7 @@ const vars$N = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$N
+  vars: vars$O
 });
 
 const {
@@ -3599,7 +3599,7 @@ const inputFloatingLabelStyle = () => {
   `;
 };
 
-const componentName$V = getComponentName('text-field');
+const componentName$W = getComponentName('text-field');
 
 const observedAttrs$2 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -3721,14 +3721,14 @@ const TextFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$V,
+    componentName: componentName$W,
   })
 );
 
-const componentName$U = getComponentName('input-wrapper');
+const componentName$V = getComponentName('input-wrapper');
 const globalRefs$w = getThemeRefs(globals);
 
-const [theme$1, refs, vars$M] = createHelperVars(
+const [theme$1, refs, vars$N] = createHelperVars(
   {
     labelTextColor: globalRefs$w.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
@@ -3840,70 +3840,70 @@ const [theme$1, refs, vars$M] = createHelperVars(
       backgroundColor: globalRefs$w.colors.surface.main,
     },
   },
-  componentName$U
+  componentName$V
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$M
+  vars: vars$N
 });
 
 const globalRefs$v = getThemeRefs(globals);
-const vars$L = TextFieldClass.cssVarList;
+const vars$M = TextFieldClass.cssVarList;
 
 const textField$1 = {
-  [vars$L.hostWidth]: refs.width,
-  [vars$L.hostMinWidth]: refs.minWidth,
-  [vars$L.hostDirection]: refs.direction,
-  [vars$L.fontSize]: refs.fontSize,
-  [vars$L.fontFamily]: refs.fontFamily,
-  [vars$L.labelFontSize]: refs.labelFontSize,
-  [vars$L.labelFontWeight]: refs.labelFontWeight,
-  [vars$L.labelTextColor]: refs.labelTextColor,
-  [vars$L.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$L.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$L.inputValueTextColor]: refs.valueTextColor,
-  [vars$L.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$L.inputBorderWidth]: refs.borderWidth,
-  [vars$L.inputBorderStyle]: refs.borderStyle,
-  [vars$L.inputBorderColor]: refs.borderColor,
-  [vars$L.inputBorderRadius]: refs.borderRadius,
-  [vars$L.inputOutlineWidth]: refs.outlineWidth,
-  [vars$L.inputOutlineStyle]: refs.outlineStyle,
-  [vars$L.inputOutlineColor]: refs.outlineColor,
-  [vars$L.inputOutlineOffset]: refs.outlineOffset,
-  [vars$L.inputBackgroundColor]: refs.backgroundColor,
-  [vars$L.inputHeight]: refs.inputHeight,
-  [vars$L.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$L.helperTextColor]: refs.helperTextColor,
-  [vars$L.textAlign]: refs.textAlign,
+  [vars$M.hostWidth]: refs.width,
+  [vars$M.hostMinWidth]: refs.minWidth,
+  [vars$M.hostDirection]: refs.direction,
+  [vars$M.fontSize]: refs.fontSize,
+  [vars$M.fontFamily]: refs.fontFamily,
+  [vars$M.labelFontSize]: refs.labelFontSize,
+  [vars$M.labelFontWeight]: refs.labelFontWeight,
+  [vars$M.labelTextColor]: refs.labelTextColor,
+  [vars$M.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$M.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$M.inputValueTextColor]: refs.valueTextColor,
+  [vars$M.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$M.inputBorderWidth]: refs.borderWidth,
+  [vars$M.inputBorderStyle]: refs.borderStyle,
+  [vars$M.inputBorderColor]: refs.borderColor,
+  [vars$M.inputBorderRadius]: refs.borderRadius,
+  [vars$M.inputOutlineWidth]: refs.outlineWidth,
+  [vars$M.inputOutlineStyle]: refs.outlineStyle,
+  [vars$M.inputOutlineColor]: refs.outlineColor,
+  [vars$M.inputOutlineOffset]: refs.outlineOffset,
+  [vars$M.inputBackgroundColor]: refs.backgroundColor,
+  [vars$M.inputHeight]: refs.inputHeight,
+  [vars$M.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$M.helperTextColor]: refs.helperTextColor,
+  [vars$M.textAlign]: refs.textAlign,
   textAlign: {
-    right: { [vars$L.inputTextAlign]: 'right' },
-    left: { [vars$L.inputTextAlign]: 'left' },
-    center: { [vars$L.inputTextAlign]: 'center' },
+    right: { [vars$M.inputTextAlign]: 'right' },
+    left: { [vars$M.inputTextAlign]: 'left' },
+    center: { [vars$M.inputTextAlign]: 'center' },
   },
-  [vars$L.labelPosition]: refs.labelPosition,
-  [vars$L.labelTopPosition]: refs.labelTopPosition,
-  [vars$L.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$L.inputTransformY]: refs.inputTransformY,
-  [vars$L.inputTransition]: refs.inputTransition,
-  [vars$L.marginInlineStart]: refs.marginInlineStart,
-  [vars$L.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$L.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$L.valueInputHeight]: refs.valueInputHeight,
-  [vars$L.valueInputMarginBottom]: refs.valueInputMarginBottom,
-  [vars$L.inputIconOffset]: globalRefs$v.spacing.md,
-  [vars$L.inputIconSize]: refs.inputIconSize,
-  [vars$L.inputIconColor]: refs.placeholderTextColor,
+  [vars$M.labelPosition]: refs.labelPosition,
+  [vars$M.labelTopPosition]: refs.labelTopPosition,
+  [vars$M.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$M.inputTransformY]: refs.inputTransformY,
+  [vars$M.inputTransition]: refs.inputTransition,
+  [vars$M.marginInlineStart]: refs.marginInlineStart,
+  [vars$M.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$M.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$M.valueInputHeight]: refs.valueInputHeight,
+  [vars$M.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$M.inputIconOffset]: globalRefs$v.spacing.md,
+  [vars$M.inputIconSize]: refs.inputIconSize,
+  [vars$M.inputIconColor]: refs.placeholderTextColor,
 };
 
 var textField$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textField$1,
   textField: textField$1,
-  vars: vars$L
+  vars: vars$M
 });
 
 const passwordDraggableMixin = (superclass) =>
@@ -3945,7 +3945,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$T = getComponentName('password');
+const componentName$U = getComponentName('password');
 
 const customMixin$b = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -4220,58 +4220,58 @@ const PasswordClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$T,
+    componentName: componentName$U,
   })
 );
 
 const globalRefs$u = getThemeRefs(globals);
-const vars$K = PasswordClass.cssVarList;
+const vars$L = PasswordClass.cssVarList;
 
 const password = {
-  [vars$K.hostWidth]: refs.width,
-  [vars$K.hostMinWidth]: refs.minWidth,
-  [vars$K.hostDirection]: refs.direction,
-  [vars$K.fontSize]: refs.fontSize,
-  [vars$K.fontFamily]: refs.fontFamily,
-  [vars$K.labelFontSize]: refs.labelFontSize,
-  [vars$K.labelFontWeight]: refs.labelFontWeight,
-  [vars$K.labelTextColor]: refs.labelTextColor,
-  [vars$K.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$K.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$K.inputHeight]: refs.inputHeight,
-  [vars$K.inputBackgroundColor]: refs.backgroundColor,
-  [vars$K.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$K.inputValueTextColor]: refs.valueTextColor,
-  [vars$K.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [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.revealButtonOffset]: globalRefs$u.spacing.md,
-  [vars$K.revealButtonSize]: refs.toggleButtonSize,
-  [vars$K.revealButtonColor]: refs.placeholderTextColor,
-  [vars$K.labelPosition]: refs.labelPosition,
-  [vars$K.labelTopPosition]: refs.labelTopPosition,
-  [vars$K.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$K.inputTransformY]: refs.inputTransformY,
-  [vars$K.inputTransition]: refs.inputTransition,
-  [vars$K.marginInlineStart]: refs.marginInlineStart,
-  [vars$K.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$K.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$K.valueInputHeight]: refs.valueInputHeight,
+  [vars$L.hostWidth]: refs.width,
+  [vars$L.hostMinWidth]: refs.minWidth,
+  [vars$L.hostDirection]: refs.direction,
+  [vars$L.fontSize]: refs.fontSize,
+  [vars$L.fontFamily]: refs.fontFamily,
+  [vars$L.labelFontSize]: refs.labelFontSize,
+  [vars$L.labelFontWeight]: refs.labelFontWeight,
+  [vars$L.labelTextColor]: refs.labelTextColor,
+  [vars$L.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$L.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$L.inputHeight]: refs.inputHeight,
+  [vars$L.inputBackgroundColor]: refs.backgroundColor,
+  [vars$L.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$L.inputValueTextColor]: refs.valueTextColor,
+  [vars$L.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$L.inputBorderWidth]: refs.borderWidth,
+  [vars$L.inputBorderStyle]: refs.borderStyle,
+  [vars$L.inputBorderColor]: refs.borderColor,
+  [vars$L.inputBorderRadius]: refs.borderRadius,
+  [vars$L.inputOutlineWidth]: refs.outlineWidth,
+  [vars$L.inputOutlineStyle]: refs.outlineStyle,
+  [vars$L.inputOutlineColor]: refs.outlineColor,
+  [vars$L.inputOutlineOffset]: refs.outlineOffset,
+  [vars$L.revealButtonOffset]: globalRefs$u.spacing.md,
+  [vars$L.revealButtonSize]: refs.toggleButtonSize,
+  [vars$L.revealButtonColor]: refs.placeholderTextColor,
+  [vars$L.labelPosition]: refs.labelPosition,
+  [vars$L.labelTopPosition]: refs.labelTopPosition,
+  [vars$L.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$L.inputTransformY]: refs.inputTransformY,
+  [vars$L.inputTransition]: refs.inputTransition,
+  [vars$L.marginInlineStart]: refs.marginInlineStart,
+  [vars$L.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$L.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$L.valueInputHeight]: refs.valueInputHeight,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: password,
-  vars: vars$K
+  vars: vars$L
 });
 
-const componentName$S = getComponentName('number-field');
+const componentName$T = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -4305,55 +4305,55 @@ const NumberFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$S,
+    componentName: componentName$T,
   })
 );
 
-const vars$J = NumberFieldClass.cssVarList;
+const vars$K = NumberFieldClass.cssVarList;
 
 const numberField = {
-  [vars$J.hostWidth]: refs.width,
-  [vars$J.hostMinWidth]: refs.minWidth,
-  [vars$J.hostDirection]: refs.direction,
-  [vars$J.fontSize]: refs.fontSize,
-  [vars$J.fontFamily]: refs.fontFamily,
-  [vars$J.labelFontSize]: refs.labelFontSize,
-  [vars$J.labelFontWeight]: refs.labelFontWeight,
-  [vars$J.labelTextColor]: refs.labelTextColor,
-  [vars$J.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$J.inputValueTextColor]: refs.valueTextColor,
-  [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.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$J.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$J.inputHeight]: refs.inputHeight,
-  [vars$J.labelPosition]: refs.labelPosition,
-  [vars$J.labelTopPosition]: refs.labelTopPosition,
-  [vars$J.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$J.inputTransformY]: refs.inputTransformY,
-  [vars$J.inputTransition]: refs.inputTransition,
-  [vars$J.marginInlineStart]: refs.marginInlineStart,
-  [vars$J.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$J.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$J.valueInputHeight]: refs.valueInputHeight,
-  [vars$J.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$K.hostWidth]: refs.width,
+  [vars$K.hostMinWidth]: refs.minWidth,
+  [vars$K.hostDirection]: refs.direction,
+  [vars$K.fontSize]: refs.fontSize,
+  [vars$K.fontFamily]: refs.fontFamily,
+  [vars$K.labelFontSize]: refs.labelFontSize,
+  [vars$K.labelFontWeight]: refs.labelFontWeight,
+  [vars$K.labelTextColor]: refs.labelTextColor,
+  [vars$K.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$K.inputValueTextColor]: refs.valueTextColor,
+  [vars$K.inputPlaceholderColor]: refs.placeholderTextColor,
+  [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,
+  [vars$K.labelPosition]: refs.labelPosition,
+  [vars$K.labelTopPosition]: refs.labelTopPosition,
+  [vars$K.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$K.inputTransformY]: refs.inputTransformY,
+  [vars$K.inputTransition]: refs.inputTransition,
+  [vars$K.marginInlineStart]: refs.marginInlineStart,
+  [vars$K.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$K.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$K.valueInputHeight]: refs.valueInputHeight,
+  [vars$K.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: numberField,
-  vars: vars$J
+  vars: vars$K
 });
 
-const componentName$R = getComponentName('email-field');
+const componentName$S = getComponentName('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -4421,55 +4421,55 @@ const EmailFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$R,
+    componentName: componentName$S,
   })
 );
 
-const vars$I = EmailFieldClass.cssVarList;
+const vars$J = EmailFieldClass.cssVarList;
 
 const emailField = {
-  [vars$I.hostWidth]: refs.width,
-  [vars$I.hostMinWidth]: refs.minWidth,
-  [vars$I.hostDirection]: refs.direction,
-  [vars$I.fontSize]: refs.fontSize,
-  [vars$I.fontFamily]: refs.fontFamily,
-  [vars$I.labelFontSize]: refs.labelFontSize,
-  [vars$I.labelFontWeight]: refs.labelFontWeight,
-  [vars$I.labelTextColor]: refs.labelTextColor,
-  [vars$I.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$I.inputValueTextColor]: refs.valueTextColor,
-  [vars$I.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$I.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$I.inputBorderWidth]: refs.borderWidth,
-  [vars$I.inputBorderStyle]: refs.borderStyle,
-  [vars$I.inputBorderColor]: refs.borderColor,
-  [vars$I.inputBorderRadius]: refs.borderRadius,
-  [vars$I.inputOutlineWidth]: refs.outlineWidth,
-  [vars$I.inputOutlineStyle]: refs.outlineStyle,
-  [vars$I.inputOutlineColor]: refs.outlineColor,
-  [vars$I.inputOutlineOffset]: refs.outlineOffset,
-  [vars$I.inputBackgroundColor]: refs.backgroundColor,
-  [vars$I.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$I.inputHeight]: refs.inputHeight,
-  [vars$I.labelPosition]: refs.labelPosition,
-  [vars$I.labelTopPosition]: refs.labelTopPosition,
-  [vars$I.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$I.inputTransformY]: refs.inputTransformY,
-  [vars$I.inputTransition]: refs.inputTransition,
-  [vars$I.marginInlineStart]: refs.marginInlineStart,
-  [vars$I.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$I.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$I.valueInputHeight]: refs.valueInputHeight,
-  [vars$I.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$J.hostWidth]: refs.width,
+  [vars$J.hostMinWidth]: refs.minWidth,
+  [vars$J.hostDirection]: refs.direction,
+  [vars$J.fontSize]: refs.fontSize,
+  [vars$J.fontFamily]: refs.fontFamily,
+  [vars$J.labelFontSize]: refs.labelFontSize,
+  [vars$J.labelFontWeight]: refs.labelFontWeight,
+  [vars$J.labelTextColor]: refs.labelTextColor,
+  [vars$J.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,
+  [vars$J.labelPosition]: refs.labelPosition,
+  [vars$J.labelTopPosition]: refs.labelTopPosition,
+  [vars$J.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$J.inputTransformY]: refs.inputTransformY,
+  [vars$J.inputTransition]: refs.inputTransition,
+  [vars$J.marginInlineStart]: refs.marginInlineStart,
+  [vars$J.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$J.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$J.valueInputHeight]: refs.valueInputHeight,
+  [vars$J.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: emailField,
-  vars: vars$I
+  vars: vars$J
 });
 
-const componentName$Q = getComponentName('text-area');
+const componentName$R = getComponentName('text-area');
 
 const {
   host: host$l,
@@ -4545,49 +4545,49 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Q,
+    componentName: componentName$R,
   })
 );
 
-const vars$H = TextAreaClass.cssVarList;
+const vars$I = TextAreaClass.cssVarList;
 
 const textArea = {
-  [vars$H.hostWidth]: refs.width,
-  [vars$H.hostMinWidth]: refs.minWidth,
-  [vars$H.hostDirection]: refs.direction,
-  [vars$H.fontSize]: refs.fontSize,
-  [vars$H.fontFamily]: refs.fontFamily,
-  [vars$H.labelTextColor]: refs.labelTextColor,
-  [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$H.inputBackgroundColor]: refs.backgroundColor,
-  [vars$H.inputValueTextColor]: refs.valueTextColor,
-  [vars$H.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$H.inputBorderRadius]: refs.borderRadius,
-  [vars$H.inputBorderWidth]: refs.borderWidth,
-  [vars$H.inputBorderStyle]: refs.borderStyle,
-  [vars$H.inputBorderColor]: refs.borderColor,
-  [vars$H.inputOutlineWidth]: refs.outlineWidth,
-  [vars$H.inputOutlineStyle]: refs.outlineStyle,
-  [vars$H.inputOutlineColor]: refs.outlineColor,
-  [vars$H.inputOutlineOffset]: refs.outlineOffset,
-  [vars$H.inputResizeType]: 'vertical',
-  [vars$H.inputMinHeight]: '5em',
+  [vars$I.hostWidth]: refs.width,
+  [vars$I.hostMinWidth]: refs.minWidth,
+  [vars$I.hostDirection]: refs.direction,
+  [vars$I.fontSize]: refs.fontSize,
+  [vars$I.fontFamily]: refs.fontFamily,
+  [vars$I.labelTextColor]: refs.labelTextColor,
+  [vars$I.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$I.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',
   textAlign: {
-    right: { [vars$H.inputTextAlign]: 'right' },
-    left: { [vars$H.inputTextAlign]: 'left' },
-    center: { [vars$H.inputTextAlign]: 'center' },
+    right: { [vars$I.inputTextAlign]: 'right' },
+    left: { [vars$I.inputTextAlign]: 'left' },
+    center: { [vars$I.inputTextAlign]: 'center' },
   },
 
   _readonly: {
-    [vars$H.inputResizeType]: 'none',
+    [vars$I.inputResizeType]: 'none',
   },
 };
 
 var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textArea,
-  vars: vars$H
+  vars: vars$I
 });
 
 const createBaseInputClass = (...args) =>
@@ -4598,9 +4598,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$P = getComponentName('boolean-field-internal');
+const componentName$Q = getComponentName('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$P, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$Q, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -4609,14 +4609,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$P}
+				<${componentName$Q}
 					tabindex="-1"
 					slot="input"
-				></${componentName$P}>
+				></${componentName$Q}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$P);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Q);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -4654,8 +4654,7 @@ vaadin-text-field {
 	align-items: flex-start;
 }
 vaadin-text-field::before {
-	height: 0;
-	margin: 0;
+  content: unset;
 }
 vaadin-text-field::part(label) {
   position: absolute;
@@ -4686,7 +4685,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$O = getComponentName('checkbox');
+const componentName$P = getComponentName('checkbox');
 
 const {
   host: host$k,
@@ -4762,6 +4761,7 @@ const CheckboxClass = compose(
       :host {
 				display: inline-flex;
 				max-width: 100%;
+        margin: 1px;
       }
 
       :host ::part(error-message) {
@@ -4785,6 +4785,11 @@ const CheckboxClass = compose(
       vaadin-checkbox::part(checkbox)::after {
         top: 0;
         left: 0;
+        -webkit-text-fill-color: initial;
+      }
+
+       vaadin-checkbox label {
+        -webkit-text-fill-color: initial;
       }
 
       vaadin-text-field::part(input-field)::after {
@@ -4792,51 +4797,44 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$O,
+    componentName: componentName$P,
   })
 );
 
-const vars$G = CheckboxClass.cssVarList;
+const vars$H = CheckboxClass.cssVarList;
 const checkboxSize = '1.35em';
 
 const checkbox = {
-  [vars$G.hostWidth]: refs.width,
-  [vars$G.hostDirection]: refs.direction,
-  [vars$G.fontSize]: refs.fontSize,
-  [vars$G.fontFamily]: refs.fontFamily,
-  [vars$G.labelTextColor]: refs.labelTextColor,
-  [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$G.labelFontWeight]: '400',
-  [vars$G.labelLineHeight]: checkboxSize,
-  [vars$G.labelSpacing]: '1em',
-  [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$G.inputOutlineWidth]: refs.outlineWidth,
-  [vars$G.inputOutlineOffset]: refs.outlineOffset,
-  [vars$G.inputOutlineColor]: refs.outlineColor,
-  [vars$G.inputOutlineStyle]: refs.outlineStyle,
-  [vars$G.inputBorderRadius]: refs.borderRadius,
-  [vars$G.inputBorderColor]: refs.borderColor,
-  [vars$G.inputBorderWidth]: refs.borderWidth,
-  [vars$G.inputBorderStyle]: refs.borderStyle,
-  [vars$G.inputBackgroundColor]: refs.backgroundColor,
-  [vars$G.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars$G.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$G.labelTextColor]: refs.labelTextColor,
-  },
+  [vars$H.hostWidth]: refs.width,
+  [vars$H.hostDirection]: refs.direction,
+  [vars$H.fontSize]: refs.fontSize,
+  [vars$H.fontFamily]: refs.fontFamily,
+  [vars$H.labelTextColor]: refs.labelTextColor,
+  [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$H.labelFontWeight]: '400',
+  [vars$H.labelLineHeight]: checkboxSize,
+  [vars$H.labelSpacing]: '1em',
+  [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$H.inputOutlineWidth]: refs.outlineWidth,
+  [vars$H.inputOutlineOffset]: refs.outlineOffset,
+  [vars$H.inputOutlineColor]: refs.outlineColor,
+  [vars$H.inputOutlineStyle]: refs.outlineStyle,
+  [vars$H.inputBorderRadius]: refs.borderRadius,
+  [vars$H.inputBorderColor]: refs.borderColor,
+  [vars$H.inputBorderWidth]: refs.borderWidth,
+  [vars$H.inputBorderStyle]: refs.borderStyle,
+  [vars$H.inputBackgroundColor]: refs.backgroundColor,
+  [vars$H.inputSize]: checkboxSize,
+  [vars$H.inputValueTextColor]: refs.valueTextColor,
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: checkbox,
-  vars: vars$G
+  vars: vars$H
 });
 
-const componentName$N = getComponentName('switch-toggle');
+const componentName$O = getComponentName('switch-toggle');
 
 const {
   host: host$j,
@@ -4968,7 +4966,7 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$N,
+    componentName: componentName$O,
   })
 );
 
@@ -4976,74 +4974,74 @@ const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
 const globalRefs$t = getThemeRefs(globals);
-const vars$F = SwitchToggleClass.cssVarList;
+const vars$G = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-  [vars$F.hostWidth]: refs.width,
-  [vars$F.hostDirection]: refs.direction,
-  [vars$F.fontSize]: refs.fontSize,
-  [vars$F.fontFamily]: refs.fontFamily,
-
-  [vars$F.inputOutlineWidth]: refs.outlineWidth,
-  [vars$F.inputOutlineOffset]: refs.outlineOffset,
-  [vars$F.inputOutlineColor]: refs.outlineColor,
-  [vars$F.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$F.trackBorderStyle]: refs.borderStyle,
-  [vars$F.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$F.trackBorderColor]: refs.borderColor,
-  [vars$F.trackBackgroundColor]: refs.backgroundColor,
-  [vars$F.trackBorderRadius]: globalRefs$t.radius.md,
-  [vars$F.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$F.trackHeight]: checkboxHeight,
-
-  [vars$F.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$F.knobRadius]: '50%',
-  [vars$F.knobTopOffset]: '1px',
-  [vars$F.knobLeftOffset]: knobMargin,
-  [vars$F.knobColor]: refs.labelTextColor,
-  [vars$F.knobTransitionDuration]: '0.3s',
-
-  [vars$F.labelTextColor]: refs.labelTextColor,
-  [vars$F.labelFontWeight]: '400',
-  [vars$F.labelLineHeight]: '1.35em',
-  [vars$F.labelSpacing]: '1em',
-  [vars$F.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$G.hostWidth]: refs.width,
+  [vars$G.hostDirection]: refs.direction,
+  [vars$G.fontSize]: refs.fontSize,
+  [vars$G.fontFamily]: refs.fontFamily,
+
+  [vars$G.inputOutlineWidth]: refs.outlineWidth,
+  [vars$G.inputOutlineOffset]: refs.outlineOffset,
+  [vars$G.inputOutlineColor]: refs.outlineColor,
+  [vars$G.inputOutlineStyle]: refs.outlineStyle,
+
+  [vars$G.trackBorderStyle]: refs.borderStyle,
+  [vars$G.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$G.trackBorderColor]: refs.borderColor,
+  [vars$G.trackBackgroundColor]: refs.backgroundColor,
+  [vars$G.trackBorderRadius]: globalRefs$t.radius.md,
+  [vars$G.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$G.trackHeight]: checkboxHeight,
+
+  [vars$G.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$G.knobRadius]: '50%',
+  [vars$G.knobTopOffset]: '1px',
+  [vars$G.knobLeftOffset]: knobMargin,
+  [vars$G.knobColor]: refs.labelTextColor,
+  [vars$G.knobTransitionDuration]: '0.3s',
+
+  [vars$G.labelTextColor]: refs.labelTextColor,
+  [vars$G.labelFontWeight]: '400',
+  [vars$G.labelLineHeight]: '1.35em',
+  [vars$G.labelSpacing]: '1em',
+  [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$F.trackBorderColor]: refs.borderColor,
-    [vars$F.knobLeftOffset]: `calc(100% - var(${vars$F.knobSize}) - ${knobMargin})`,
-    [vars$F.knobColor]: refs.valueTextColor,
-    [vars$F.knobTextColor]: refs.valueTextColor,
+    [vars$G.trackBorderColor]: refs.borderColor,
+    [vars$G.knobLeftOffset]: `calc(100% - var(${vars$G.knobSize}) - ${knobMargin})`,
+    [vars$G.knobColor]: refs.valueTextColor,
+    [vars$G.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$F.knobColor]: globalRefs$t.colors.surface.light,
-    [vars$F.trackBorderColor]: globalRefs$t.colors.surface.light,
-    [vars$F.trackBackgroundColor]: globalRefs$t.colors.surface.main,
-    [vars$F.labelTextColor]: refs.labelTextColor,
+    [vars$G.knobColor]: globalRefs$t.colors.surface.light,
+    [vars$G.trackBorderColor]: globalRefs$t.colors.surface.light,
+    [vars$G.trackBackgroundColor]: globalRefs$t.colors.surface.main,
+    [vars$G.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$F.knobColor]: globalRefs$t.colors.surface.light,
-      [vars$F.trackBackgroundColor]: globalRefs$t.colors.surface.main,
+      [vars$G.knobColor]: globalRefs$t.colors.surface.light,
+      [vars$G.trackBackgroundColor]: globalRefs$t.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$F.trackBorderColor]: globalRefs$t.colors.error.main,
-    [vars$F.knobColor]: globalRefs$t.colors.error.main,
+    [vars$G.trackBorderColor]: globalRefs$t.colors.error.main,
+    [vars$G.knobColor]: globalRefs$t.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$F
+  vars: vars$G
 });
 
-const componentName$M = getComponentName('container');
+const componentName$N = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$M, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$N, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -5118,7 +5116,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$M
+  componentName$N
 );
 
 const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -5205,7 +5203,7 @@ const container = {
   },
 };
 
-const vars$E = {
+const vars$F = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -5213,7 +5211,7 @@ const vars$E = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$E
+  vars: vars$F
 });
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -5266,69 +5264,69 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$L = getComponentName('logo');
+const componentName$M = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$L,
+  componentName: componentName$M,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$D = LogoClass.cssVarList;
+const vars$E = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$D.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$E.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$D
+  vars: vars$E
 });
 
-const componentName$K = getComponentName('totp-image');
+const componentName$L = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$K,
+  componentName: componentName$L,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$C = TotpImageClass.cssVarList;
+const vars$D = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$C.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$D.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$C
+  vars: vars$D
 });
 
-const componentName$J = getComponentName('notp-image');
+const componentName$K = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$J,
+  componentName: componentName$K,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$B = NotpImageClass.cssVarList;
+const vars$C = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$B.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$C.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$B
+  vars: vars$C
 });
 
-const componentName$I = getComponentName('text');
+const componentName$J = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -5386,94 +5384,94 @@ const TextClass = compose(
 )(RawText);
 
 const globalRefs$r = getThemeRefs(globals);
-const vars$A = TextClass.cssVarList;
+const vars$B = TextClass.cssVarList;
 
 const text$2 = {
-  [vars$A.hostDirection]: globalRefs$r.direction,
-  [vars$A.textLineHeight]: '1.35em',
-  [vars$A.textAlign]: 'left',
-  [vars$A.textColor]: globalRefs$r.colors.surface.dark,
+  [vars$B.hostDirection]: globalRefs$r.direction,
+  [vars$B.textLineHeight]: '1.35em',
+  [vars$B.textAlign]: 'left',
+  [vars$B.textColor]: globalRefs$r.colors.surface.dark,
 
   variant: {
     h1: {
-      [vars$A.fontSize]: globalRefs$r.typography.h1.size,
-      [vars$A.fontWeight]: globalRefs$r.typography.h1.weight,
-      [vars$A.fontFamily]: globalRefs$r.typography.h1.font,
+      [vars$B.fontSize]: globalRefs$r.typography.h1.size,
+      [vars$B.fontWeight]: globalRefs$r.typography.h1.weight,
+      [vars$B.fontFamily]: globalRefs$r.typography.h1.font,
     },
     h2: {
-      [vars$A.fontSize]: globalRefs$r.typography.h2.size,
-      [vars$A.fontWeight]: globalRefs$r.typography.h2.weight,
-      [vars$A.fontFamily]: globalRefs$r.typography.h2.font,
+      [vars$B.fontSize]: globalRefs$r.typography.h2.size,
+      [vars$B.fontWeight]: globalRefs$r.typography.h2.weight,
+      [vars$B.fontFamily]: globalRefs$r.typography.h2.font,
     },
     h3: {
-      [vars$A.fontSize]: globalRefs$r.typography.h3.size,
-      [vars$A.fontWeight]: globalRefs$r.typography.h3.weight,
-      [vars$A.fontFamily]: globalRefs$r.typography.h3.font,
+      [vars$B.fontSize]: globalRefs$r.typography.h3.size,
+      [vars$B.fontWeight]: globalRefs$r.typography.h3.weight,
+      [vars$B.fontFamily]: globalRefs$r.typography.h3.font,
     },
     subtitle1: {
-      [vars$A.fontSize]: globalRefs$r.typography.subtitle1.size,
-      [vars$A.fontWeight]: globalRefs$r.typography.subtitle1.weight,
-      [vars$A.fontFamily]: globalRefs$r.typography.subtitle1.font,
+      [vars$B.fontSize]: globalRefs$r.typography.subtitle1.size,
+      [vars$B.fontWeight]: globalRefs$r.typography.subtitle1.weight,
+      [vars$B.fontFamily]: globalRefs$r.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$A.fontSize]: globalRefs$r.typography.subtitle2.size,
-      [vars$A.fontWeight]: globalRefs$r.typography.subtitle2.weight,
-      [vars$A.fontFamily]: globalRefs$r.typography.subtitle2.font,
+      [vars$B.fontSize]: globalRefs$r.typography.subtitle2.size,
+      [vars$B.fontWeight]: globalRefs$r.typography.subtitle2.weight,
+      [vars$B.fontFamily]: globalRefs$r.typography.subtitle2.font,
     },
     body1: {
-      [vars$A.fontSize]: globalRefs$r.typography.body1.size,
-      [vars$A.fontWeight]: globalRefs$r.typography.body1.weight,
-      [vars$A.fontFamily]: globalRefs$r.typography.body1.font,
+      [vars$B.fontSize]: globalRefs$r.typography.body1.size,
+      [vars$B.fontWeight]: globalRefs$r.typography.body1.weight,
+      [vars$B.fontFamily]: globalRefs$r.typography.body1.font,
     },
     body2: {
-      [vars$A.fontSize]: globalRefs$r.typography.body2.size,
-      [vars$A.fontWeight]: globalRefs$r.typography.body2.weight,
-      [vars$A.fontFamily]: globalRefs$r.typography.body2.font,
+      [vars$B.fontSize]: globalRefs$r.typography.body2.size,
+      [vars$B.fontWeight]: globalRefs$r.typography.body2.weight,
+      [vars$B.fontFamily]: globalRefs$r.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$A.textColor]: globalRefs$r.colors.surface.contrast,
+      [vars$B.textColor]: globalRefs$r.colors.surface.contrast,
     },
     secondary: {
-      [vars$A.textColor]: globalRefs$r.colors.surface.dark,
+      [vars$B.textColor]: globalRefs$r.colors.surface.dark,
     },
     error: {
-      [vars$A.textColor]: globalRefs$r.colors.error.main,
+      [vars$B.textColor]: globalRefs$r.colors.error.main,
     },
     success: {
-      [vars$A.textColor]: globalRefs$r.colors.success.main,
+      [vars$B.textColor]: globalRefs$r.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$A.textAlign]: 'right' },
-    left: { [vars$A.textAlign]: 'left' },
-    center: { [vars$A.textAlign]: 'center' },
+    right: { [vars$B.textAlign]: 'right' },
+    left: { [vars$B.textAlign]: 'left' },
+    center: { [vars$B.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$A.hostWidth]: '100%',
+    [vars$B.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$A.fontStyle]: 'italic',
+    [vars$B.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$A.textTransform]: 'uppercase',
+    [vars$B.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$A.textTransform]: 'lowercase',
+    [vars$B.textTransform]: 'lowercase',
   },
 };
 
 var text$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$2,
-  vars: vars$A
+  vars: vars$B
 });
 
 const disableRules = [
@@ -5500,9 +5498,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
 
 
-const componentName$H = getComponentName('enriched-text');
+const componentName$I = getComponentName('enriched-text');
 
-class EnrichedText extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -5698,9 +5696,9 @@ const EnrichedTextClass = compose(
   componentNameValidationMixin
 )(EnrichedText);
 
-const componentName$G = getComponentName('link');
+const componentName$H = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$G, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$H, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -5765,37 +5763,37 @@ const LinkClass = compose(
 )(RawLink);
 
 const globalRefs$q = getThemeRefs(globals);
-const vars$z = LinkClass.cssVarList;
+const vars$A = LinkClass.cssVarList;
 
 const link$1 = {
-  [vars$z.hostDirection]: globalRefs$q.direction,
-  [vars$z.cursor]: 'pointer',
+  [vars$A.hostDirection]: globalRefs$q.direction,
+  [vars$A.cursor]: 'pointer',
 
-  [vars$z.textColor]: globalRefs$q.colors.primary.main,
+  [vars$A.textColor]: globalRefs$q.colors.primary.main,
 
   textAlign: {
-    right: { [vars$z.textAlign]: 'right' },
-    left: { [vars$z.textAlign]: 'left' },
-    center: { [vars$z.textAlign]: 'center' },
+    right: { [vars$A.textAlign]: 'right' },
+    left: { [vars$A.textAlign]: 'left' },
+    center: { [vars$A.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$z.hostWidth]: '100%',
+    [vars$A.hostWidth]: '100%',
   },
 
   _hover: {
-    [vars$z.textDecoration]: 'underline',
+    [vars$A.textDecoration]: 'underline',
   },
 
   mode: {
     secondary: {
-      [vars$z.textColor]: globalRefs$q.colors.secondary.main,
+      [vars$A.textColor]: globalRefs$q.colors.secondary.main,
     },
     error: {
-      [vars$z.textColor]: globalRefs$q.colors.error.main,
+      [vars$A.textColor]: globalRefs$q.colors.error.main,
     },
     success: {
-      [vars$z.textColor]: globalRefs$q.colors.success.main,
+      [vars$A.textColor]: globalRefs$q.colors.success.main,
     },
   },
 };
@@ -5803,37 +5801,37 @@ const link$1 = {
 var link$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link$1,
-  vars: vars$z
+  vars: vars$A
 });
 
 const globalRefs$p = getThemeRefs(globals);
-const vars$y = EnrichedTextClass.cssVarList;
+const vars$z = EnrichedTextClass.cssVarList;
 
 const enrichedText = {
-  [vars$y.hostDirection]: globalRefs$p.direction,
-  [vars$y.hostWidth]: useVar(vars$A.hostWidth),
+  [vars$z.hostDirection]: globalRefs$p.direction,
+  [vars$z.hostWidth]: useVar(vars$B.hostWidth),
 
-  [vars$y.textLineHeight]: useVar(vars$A.textLineHeight),
-  [vars$y.textColor]: useVar(vars$A.textColor),
-  [vars$y.textAlign]: useVar(vars$A.textAlign),
+  [vars$z.textLineHeight]: useVar(vars$B.textLineHeight),
+  [vars$z.textColor]: useVar(vars$B.textColor),
+  [vars$z.textAlign]: useVar(vars$B.textAlign),
 
-  [vars$y.fontSize]: useVar(vars$A.fontSize),
-  [vars$y.fontWeight]: useVar(vars$A.fontWeight),
-  [vars$y.fontFamily]: useVar(vars$A.fontFamily),
+  [vars$z.fontSize]: useVar(vars$B.fontSize),
+  [vars$z.fontWeight]: useVar(vars$B.fontWeight),
+  [vars$z.fontFamily]: useVar(vars$B.fontFamily),
 
-  [vars$y.linkColor]: useVar(vars$z.textColor),
-  [vars$y.linkTextDecoration]: 'none',
-  [vars$y.linkHoverTextDecoration]: 'underline',
+  [vars$z.linkColor]: useVar(vars$A.textColor),
+  [vars$z.linkTextDecoration]: 'none',
+  [vars$z.linkHoverTextDecoration]: 'underline',
 
-  [vars$y.fontWeightBold]: '900',
-  [vars$y.minWidth]: '0.25em',
-  [vars$y.minHeight]: '1.35em',
+  [vars$z.fontWeightBold]: '900',
+  [vars$z.minWidth]: '0.25em',
+  [vars$z.minHeight]: '1.35em',
 
-  [vars$y.hostDisplay]: 'inline-block',
+  [vars$z.hostDisplay]: 'inline-block',
 
   _empty: {
     _hideWhenEmpty: {
-      [vars$y.hostDisplay]: 'none',
+      [vars$z.hostDisplay]: 'none',
     },
   },
 };
@@ -5841,11 +5839,11 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$y
+  vars: vars$z
 });
 
-const componentName$F = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > div' }) {
+const componentName$G = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -5952,7 +5950,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$F
+  componentName$G
 );
 
 const divider = {
@@ -5983,7 +5981,7 @@ const divider = {
   },
 };
 
-const vars$x = {
+const vars$y = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -5991,18 +5989,18 @@ const vars$x = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$x
+  vars: vars$y
 });
 
 /* eslint-disable no-param-reassign */
 
-const componentName$E = getComponentName('passcode-internal');
+const componentName$F = getComponentName('passcode-internal');
 
-createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
 
-const componentName$D = getComponentName('loader-radial');
+const componentName$E = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -6046,7 +6044,7 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-const componentName$C = getComponentName('passcode');
+const componentName$D = getComponentName('passcode');
 
 const observedAttributes$3 = ['digits'];
 
@@ -6065,17 +6063,17 @@ const customMixin$9 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$E}
+      <${componentName$F}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$E}>
+      ><slot></slot></${componentName$F}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$E);
+      this.inputElement = this.shadowRoot.querySelector(componentName$F);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -6227,56 +6225,56 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$C,
+    componentName: componentName$D,
   })
 );
 
-const vars$w = PasscodeClass.cssVarList;
+const vars$x = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$w.hostDirection]: refs.direction,
-  [vars$w.fontFamily]: refs.fontFamily,
-  [vars$w.fontSize]: refs.fontSize,
-  [vars$w.labelTextColor]: refs.labelTextColor,
-  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$w.digitValueTextColor]: refs.valueTextColor,
-  [vars$w.digitPadding]: '0',
-  [vars$w.digitTextAlign]: 'center',
-  [vars$w.digitSpacing]: '4px',
-  [vars$w.hostWidth]: refs.width,
-  [vars$w.digitOutlineColor]: 'transparent',
-  [vars$w.digitOutlineWidth]: refs.outlineWidth,
-  [vars$w.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$w.digitSize]: refs.inputHeight,
+  [vars$x.hostDirection]: refs.direction,
+  [vars$x.fontFamily]: refs.fontFamily,
+  [vars$x.fontSize]: refs.fontSize,
+  [vars$x.labelTextColor]: refs.labelTextColor,
+  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$x.digitValueTextColor]: refs.valueTextColor,
+  [vars$x.digitPadding]: '0',
+  [vars$x.digitTextAlign]: 'center',
+  [vars$x.digitSpacing]: '4px',
+  [vars$x.hostWidth]: refs.width,
+  [vars$x.digitOutlineColor]: 'transparent',
+  [vars$x.digitOutlineWidth]: refs.outlineWidth,
+  [vars$x.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$x.digitSize]: refs.inputHeight,
 
   size: {
-    xs: { [vars$w.spinnerSize]: '15px' },
-    sm: { [vars$w.spinnerSize]: '20px' },
-    md: { [vars$w.spinnerSize]: '20px' },
-    lg: { [vars$w.spinnerSize]: '20px' },
+    xs: { [vars$x.spinnerSize]: '15px' },
+    sm: { [vars$x.spinnerSize]: '20px' },
+    md: { [vars$x.spinnerSize]: '20px' },
+    lg: { [vars$x.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$w.digitCaretTextColor]: 'transparent',
+    [vars$x.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$w.overlayOpacity]: refs.overlayOpacity,
+    [vars$x.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$w
+  vars: vars$x
 });
 
-const componentName$B = getComponentName('loader-linear');
+const componentName$C = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$B;
+    return componentName$C;
   }
 
   constructor() {
@@ -6338,48 +6336,48 @@ const LoaderLinearClass = compose(
 )(RawLoaderLinear);
 
 const globalRefs$n = getThemeRefs(globals);
-const vars$v = LoaderLinearClass.cssVarList;
+const vars$w = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$v.hostDisplay]: 'inline-block',
-  [vars$v.hostWidth]: '100%',
+  [vars$w.hostDisplay]: 'inline-block',
+  [vars$w.hostWidth]: '100%',
 
-  [vars$v.barColor]: globalRefs$n.colors.surface.contrast,
-  [vars$v.barWidth]: '20%',
+  [vars$w.barColor]: globalRefs$n.colors.surface.contrast,
+  [vars$w.barWidth]: '20%',
 
-  [vars$v.barBackgroundColor]: globalRefs$n.colors.surface.light,
-  [vars$v.barBorderRadius]: '4px',
+  [vars$w.barBackgroundColor]: globalRefs$n.colors.surface.light,
+  [vars$w.barBorderRadius]: '4px',
 
-  [vars$v.animationDuration]: '2s',
-  [vars$v.animationTimingFunction]: 'linear',
-  [vars$v.animationIterationCount]: 'infinite',
-  [vars$v.verticalPadding]: '0.25em',
+  [vars$w.animationDuration]: '2s',
+  [vars$w.animationTimingFunction]: 'linear',
+  [vars$w.animationIterationCount]: 'infinite',
+  [vars$w.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$v.barHeight]: '2px' },
-    sm: { [vars$v.barHeight]: '4px' },
-    md: { [vars$v.barHeight]: '6px' },
-    lg: { [vars$v.barHeight]: '8px' },
+    xs: { [vars$w.barHeight]: '2px' },
+    sm: { [vars$w.barHeight]: '4px' },
+    md: { [vars$w.barHeight]: '6px' },
+    lg: { [vars$w.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$v.barColor]: globalRefs$n.colors.primary.main,
+      [vars$w.barColor]: globalRefs$n.colors.primary.main,
     },
     secondary: {
-      [vars$v.barColor]: globalRefs$n.colors.secondary.main,
+      [vars$w.barColor]: globalRefs$n.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$v.hostDisplay]: 'none',
+    [vars$w.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$v
+  vars: vars$w
 });
 
 const globalRefs$m = getThemeRefs(globals);
@@ -6397,7 +6395,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
       },
     },
   },
-  componentName$D
+  componentName$E
 );
 
 const loaderRadial = {
@@ -6426,7 +6424,7 @@ const loaderRadial = {
     [compVars$3.hostDisplay]: 'none',
   },
 };
-const vars$u = {
+const vars$v = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -6434,10 +6432,10 @@ const vars$u = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$u
+  vars: vars$v
 });
 
-const componentName$A = getComponentName('combo-box');
+const componentName$B = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -6882,83 +6880,83 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data'],
-    componentName: componentName$A,
+    componentName: componentName$B,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
 const globalRefs$l = getThemeRefs(globals);
-const vars$t = ComboBoxClass.cssVarList;
+const vars$u = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$t.hostWidth]: refs.width,
-  [vars$t.hostDirection]: refs.direction,
-  [vars$t.fontSize]: refs.fontSize,
-  [vars$t.fontFamily]: refs.fontFamily,
-  [vars$t.labelFontSize]: refs.labelFontSize,
-  [vars$t.labelFontWeight]: refs.labelFontWeight,
-  [vars$t.labelTextColor]: refs.labelTextColor,
-  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$t.inputBorderColor]: refs.borderColor,
-  [vars$t.inputBorderWidth]: refs.borderWidth,
-  [vars$t.inputBorderStyle]: refs.borderStyle,
-  [vars$t.inputBorderRadius]: refs.borderRadius,
-  [vars$t.inputOutlineColor]: refs.outlineColor,
-  [vars$t.inputOutlineOffset]: refs.outlineOffset,
-  [vars$t.inputOutlineWidth]: refs.outlineWidth,
-  [vars$t.inputOutlineStyle]: refs.outlineStyle,
-  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$t.inputValueTextColor]: refs.valueTextColor,
-  [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$t.inputBackgroundColor]: refs.backgroundColor,
-  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$t.inputHeight]: refs.inputHeight,
-  [vars$t.inputDropdownButtonColor]: globalRefs$l.colors.surface.dark,
-  [vars$t.inputDropdownButtonCursor]: 'pointer',
-  [vars$t.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$t.inputDropdownButtonOffset]: globalRefs$l.spacing.xs,
-  [vars$t.overlayItemPaddingInlineStart]: globalRefs$l.spacing.xs,
-  [vars$t.overlayItemPaddingInlineEnd]: globalRefs$l.spacing.lg,
-  [vars$t.labelPosition]: refs.labelPosition,
-  [vars$t.labelTopPosition]: refs.labelTopPosition,
-  [vars$t.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$t.inputTransformY]: refs.inputTransformY,
-  [vars$t.inputTransition]: refs.inputTransition,
-  [vars$t.marginInlineStart]: refs.marginInlineStart,
-  [vars$t.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$t.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$t.valueInputHeight]: refs.valueInputHeight,
-  [vars$t.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$u.hostWidth]: refs.width,
+  [vars$u.hostDirection]: refs.direction,
+  [vars$u.fontSize]: refs.fontSize,
+  [vars$u.fontFamily]: refs.fontFamily,
+  [vars$u.labelFontSize]: refs.labelFontSize,
+  [vars$u.labelFontWeight]: refs.labelFontWeight,
+  [vars$u.labelTextColor]: refs.labelTextColor,
+  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$u.inputBorderColor]: refs.borderColor,
+  [vars$u.inputBorderWidth]: refs.borderWidth,
+  [vars$u.inputBorderStyle]: refs.borderStyle,
+  [vars$u.inputBorderRadius]: refs.borderRadius,
+  [vars$u.inputOutlineColor]: refs.outlineColor,
+  [vars$u.inputOutlineOffset]: refs.outlineOffset,
+  [vars$u.inputOutlineWidth]: refs.outlineWidth,
+  [vars$u.inputOutlineStyle]: refs.outlineStyle,
+  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$u.inputValueTextColor]: refs.valueTextColor,
+  [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$u.inputBackgroundColor]: refs.backgroundColor,
+  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$u.inputHeight]: refs.inputHeight,
+  [vars$u.inputDropdownButtonColor]: globalRefs$l.colors.surface.dark,
+  [vars$u.inputDropdownButtonCursor]: 'pointer',
+  [vars$u.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$u.inputDropdownButtonOffset]: globalRefs$l.spacing.xs,
+  [vars$u.overlayItemPaddingInlineStart]: globalRefs$l.spacing.xs,
+  [vars$u.overlayItemPaddingInlineEnd]: globalRefs$l.spacing.lg,
+  [vars$u.labelPosition]: refs.labelPosition,
+  [vars$u.labelTopPosition]: refs.labelTopPosition,
+  [vars$u.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$u.inputTransformY]: refs.inputTransformY,
+  [vars$u.inputTransition]: refs.inputTransition,
+  [vars$u.marginInlineStart]: refs.marginInlineStart,
+  [vars$u.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$u.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$u.valueInputHeight]: refs.valueInputHeight,
+  [vars$u.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
   _readonly: {
-    [vars$t.inputDropdownButtonCursor]: 'default',
+    [vars$u.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$t.overlayFontSize]: refs.fontSize,
-  [vars$t.overlayFontFamily]: refs.fontFamily,
-  [vars$t.overlayCursor]: 'pointer',
-  [vars$t.overlayItemBoxShadow]: 'none',
-  [vars$t.overlayBackground]: refs.backgroundColor,
-  [vars$t.overlayTextColor]: refs.valueTextColor,
+  [vars$u.overlayFontSize]: refs.fontSize,
+  [vars$u.overlayFontFamily]: refs.fontFamily,
+  [vars$u.overlayCursor]: 'pointer',
+  [vars$u.overlayItemBoxShadow]: 'none',
+  [vars$u.overlayBackground]: refs.backgroundColor,
+  [vars$u.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$t.overlay.minHeight]: '400px',
-  [vars$t.overlay.margin]: '0',
+  [vars$u.overlay.minHeight]: '400px',
+  [vars$u.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$t
+  vars: vars$u
 });
 
 const observedAttributes$2 = ['src', 'alt'];
 
-const componentName$z = getComponentName('image');
+const componentName$A = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$z, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$A, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -6998,14 +6996,14 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-const vars$s = ImageClass.cssVarList;
+const vars$t = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$s
+  vars: vars$t
 });
 
 var CountryCodes = [
@@ -8224,14 +8222,14 @@ var CountryCodes = [
   ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 ];
 
-const componentName$y = getComponentName('phone-field-internal');
+const componentName$z = getComponentName('phone-field-internal');
 
-createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$x = getComponentName('phone-field');
+const componentName$y = getComponentName('phone-field');
 
 const customMixin$8 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -8245,15 +8243,15 @@ const customMixin$8 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$y}
+				<${componentName$z}
 					tabindex="-1"
 					slot="input"
-				></${componentName$y}>
+				></${componentName$z}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$y);
+      this.inputElement = this.shadowRoot.querySelector(componentName$z);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -8467,44 +8465,44 @@ const PhoneFieldClass = compose(
       }
       descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
         opacity: 0;
-      }
-
-			vaadin-text-field::part(input-field)::after {
-				border: none;
-			}
-      ${resetInputLabelPosition('vaadin-text-field')}
-		`,
-    excludeAttrsSync: ['tabindex'],
-    componentName: componentName$x,
-  })
-);
-
-const vars$r = PhoneFieldClass.cssVarList;
-
-const phoneField = {
-  [vars$r.hostWidth]: refs.width,
-  [vars$r.hostDirection]: refs.direction,
-  [vars$r.fontSize]: refs.fontSize,
-  [vars$r.fontFamily]: refs.fontFamily,
-  [vars$r.labelTextColor]: refs.labelTextColor,
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$r.inputValueTextColor]: refs.valueTextColor,
-  [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$r.inputBorderStyle]: refs.borderStyle,
-  [vars$r.inputBorderWidth]: refs.borderWidth,
-  [vars$r.inputBorderColor]: refs.borderColor,
-  [vars$r.inputBorderRadius]: refs.borderRadius,
-  [vars$r.inputOutlineStyle]: refs.outlineStyle,
-  [vars$r.inputOutlineWidth]: refs.outlineWidth,
-  [vars$r.inputOutlineColor]: refs.outlineColor,
-  [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.phoneInputWidth]: refs.minWidth,
-  [vars$r.countryCodeInputWidth]: '5em',
-  [vars$r.countryCodeDropdownWidth]: '20em',
-  [vars$r.marginInlineStart]: '-0.25em',
-  [vars$r.valueInputHeight]: refs.valueInputHeight,
-  [vars$r.valueInputMarginBottom]: refs.valueInputMarginBottom,
+      }
+
+			vaadin-text-field::part(input-field)::after {
+				border: none;
+			}
+      ${resetInputLabelPosition('vaadin-text-field')}
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$y,
+  })
+);
+
+const vars$s = PhoneFieldClass.cssVarList;
+
+const phoneField = {
+  [vars$s.hostWidth]: refs.width,
+  [vars$s.hostDirection]: refs.direction,
+  [vars$s.fontSize]: refs.fontSize,
+  [vars$s.fontFamily]: refs.fontFamily,
+  [vars$s.labelTextColor]: refs.labelTextColor,
+  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$s.inputValueTextColor]: refs.valueTextColor,
+  [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$s.inputBorderStyle]: refs.borderStyle,
+  [vars$s.inputBorderWidth]: refs.borderWidth,
+  [vars$s.inputBorderColor]: refs.borderColor,
+  [vars$s.inputBorderRadius]: refs.borderRadius,
+  [vars$s.inputOutlineStyle]: refs.outlineStyle,
+  [vars$s.inputOutlineWidth]: refs.outlineWidth,
+  [vars$s.inputOutlineColor]: refs.outlineColor,
+  [vars$s.inputOutlineOffset]: refs.outlineOffset,
+  [vars$s.phoneInputWidth]: refs.minWidth,
+  [vars$s.countryCodeInputWidth]: '5em',
+  [vars$s.countryCodeDropdownWidth]: '20em',
+  [vars$s.marginInlineStart]: '-0.25em',
+  [vars$s.valueInputHeight]: refs.valueInputHeight,
+  [vars$s.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
@@ -8514,16 +8512,16 @@ const phoneField = {
 var phoneField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneField,
-  vars: vars$r
+  vars: vars$s
 });
 
-const componentName$w = getComponentName('phone-field-internal-input-box');
+const componentName$x = getComponentName('phone-field-internal-input-box');
 
-createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$v = getComponentName('phone-input-box-field');
+const componentName$w = getComponentName('phone-input-box-field');
 
 const customMixin$7 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -8537,15 +8535,15 @@ const customMixin$7 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$w}
+				<${componentName$x}
 					tabindex="-1"
 					slot="input"
-				></${componentName$w}>
+				></${componentName$x}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$w);
+      this.inputElement = this.shadowRoot.querySelector(componentName$x);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -8722,68 +8720,68 @@ const PhoneFieldInputBoxClass = compose(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$v,
+    componentName: componentName$w,
   })
 );
 
-const vars$q = PhoneFieldInputBoxClass.cssVarList;
+const vars$r = PhoneFieldInputBoxClass.cssVarList;
 
 const phoneInputBoxField = {
-  [vars$q.hostWidth]: '16em',
-  [vars$q.hostMinWidth]: refs.minWidth,
-  [vars$q.hostDirection]: refs.direction,
-  [vars$q.fontSize]: refs.fontSize,
-  [vars$q.fontFamily]: refs.fontFamily,
-  [vars$q.labelFontSize]: refs.labelFontSize,
-  [vars$q.labelFontWeight]: refs.labelFontWeight,
-  [vars$q.labelTextColor]: refs.labelTextColor,
-  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$q.inputValueTextColor]: refs.valueTextColor,
-  [vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$q.inputBorderStyle]: refs.borderStyle,
-  [vars$q.inputBorderWidth]: refs.borderWidth,
-  [vars$q.inputBorderColor]: refs.borderColor,
-  [vars$q.inputBorderRadius]: refs.borderRadius,
-  [vars$q.inputOutlineStyle]: refs.outlineStyle,
-  [vars$q.inputOutlineWidth]: refs.outlineWidth,
-  [vars$q.inputOutlineColor]: refs.outlineColor,
-  [vars$q.inputOutlineOffset]: refs.outlineOffset,
-  [vars$q.labelPosition]: refs.labelPosition,
-  [vars$q.labelTopPosition]: refs.labelTopPosition,
-  [vars$q.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$q.inputTransformY]: refs.inputTransformY,
-  [vars$q.inputTransition]: refs.inputTransition,
-  [vars$q.marginInlineStart]: refs.marginInlineStart,
-  [vars$q.valueInputHeight]: refs.valueInputHeight,
-  [vars$q.valueInputMarginBottom]: refs.valueInputMarginBottom,
-  [vars$q.inputHorizontalPadding]: '0',
+  [vars$r.hostWidth]: '16em',
+  [vars$r.hostMinWidth]: refs.minWidth,
+  [vars$r.hostDirection]: refs.direction,
+  [vars$r.fontSize]: refs.fontSize,
+  [vars$r.fontFamily]: refs.fontFamily,
+  [vars$r.labelFontSize]: refs.labelFontSize,
+  [vars$r.labelFontWeight]: refs.labelFontWeight,
+  [vars$r.labelTextColor]: refs.labelTextColor,
+  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$r.inputValueTextColor]: refs.valueTextColor,
+  [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$r.inputBorderStyle]: refs.borderStyle,
+  [vars$r.inputBorderWidth]: refs.borderWidth,
+  [vars$r.inputBorderColor]: refs.borderColor,
+  [vars$r.inputBorderRadius]: refs.borderRadius,
+  [vars$r.inputOutlineStyle]: refs.outlineStyle,
+  [vars$r.inputOutlineWidth]: refs.outlineWidth,
+  [vars$r.inputOutlineColor]: refs.outlineColor,
+  [vars$r.inputOutlineOffset]: refs.outlineOffset,
+  [vars$r.labelPosition]: refs.labelPosition,
+  [vars$r.labelTopPosition]: refs.labelTopPosition,
+  [vars$r.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$r.inputTransformY]: refs.inputTransformY,
+  [vars$r.inputTransition]: refs.inputTransition,
+  [vars$r.marginInlineStart]: refs.marginInlineStart,
+  [vars$r.valueInputHeight]: refs.valueInputHeight,
+  [vars$r.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$r.inputHorizontalPadding]: '0',
 
   _fullWidth: {
-    [vars$q.hostWidth]: refs.width,
+    [vars$r.hostWidth]: refs.width,
   },
 };
 
 var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneInputBoxField,
-  vars: vars$q
+  vars: vars$r
 });
 
-const componentName$u = getComponentName('new-password-internal');
+const componentName$v = getComponentName('new-password-internal');
 
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$t = getComponentName('policy-validation');
+const componentName$u = getComponentName('policy-validation');
 
 const overrideAttrs = ['data-password-policy-value-minlength'];
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -8991,7 +8989,7 @@ const PolicyValidationClass = compose(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$s = getComponentName('new-password');
+const componentName$t = getComponentName('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -9005,18 +9003,18 @@ const customMixin$6 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$u}
+			<${componentName$v}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$u}>
+      </${componentName$v}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$u);
+      this.inputElement = this.shadowRoot.querySelector(componentName$v);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -9192,40 +9190,40 @@ const NewPasswordClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$s,
+    componentName: componentName$t,
   })
 );
 
 const globalRefs$k = getThemeRefs(globals);
-const vars$p = NewPasswordClass.cssVarList;
+const vars$q = NewPasswordClass.cssVarList;
 
 const newPassword = {
-  [vars$p.hostWidth]: refs.width,
-  [vars$p.hostMinWidth]: refs.minWidth,
-  [vars$p.hostDirection]: refs.direction,
-  [vars$p.fontSize]: refs.fontSize,
-  [vars$p.fontFamily]: refs.fontFamily,
-  [vars$p.labelFontSize]: refs.labelFontSize,
-  [vars$p.labelFontWeight]: refs.labelFontWeight,
-  [vars$p.labelTextColor]: refs.labelTextColor,
-  [vars$p.spaceBetweenInputs]: '1em',
-  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$p.policyPreviewBackgroundColor]: 'none',
-  [vars$p.policyPreviewPadding]: globalRefs$k.spacing.lg,
-  [vars$p.valueInputHeight]: refs.valueInputHeight,
+  [vars$q.hostWidth]: refs.width,
+  [vars$q.hostMinWidth]: refs.minWidth,
+  [vars$q.hostDirection]: refs.direction,
+  [vars$q.fontSize]: refs.fontSize,
+  [vars$q.fontFamily]: refs.fontFamily,
+  [vars$q.labelFontSize]: refs.labelFontSize,
+  [vars$q.labelFontWeight]: refs.labelFontWeight,
+  [vars$q.labelTextColor]: refs.labelTextColor,
+  [vars$q.spaceBetweenInputs]: '1em',
+  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$q.policyPreviewBackgroundColor]: 'none',
+  [vars$q.policyPreviewPadding]: globalRefs$k.spacing.lg,
+  [vars$q.valueInputHeight]: refs.valueInputHeight,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
     // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$p.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$q.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$p
+  vars: vars$q
 });
 
 const getFileBase64 = (fileObj) => {
@@ -9240,7 +9238,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$r = getComponentName('upload-file');
+const componentName$s = getComponentName('upload-file');
 
 const observedAttributes$1 = [
   'title',
@@ -9255,7 +9253,7 @@ const observedAttributes$1 = [
   'icon',
 ];
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$r, baseSelector: ':host > div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$s, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -9470,77 +9468,77 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-const vars$o = UploadFileClass.cssVarList;
+const vars$p = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$o.hostDirection]: refs.direction,
-  [vars$o.labelTextColor]: refs.labelTextColor,
-  [vars$o.fontFamily]: refs.fontFamily,
+  [vars$p.hostDirection]: refs.direction,
+  [vars$p.labelTextColor]: refs.labelTextColor,
+  [vars$p.fontFamily]: refs.fontFamily,
 
-  [vars$o.iconSize]: '2em',
+  [vars$p.iconSize]: '2em',
 
-  [vars$o.hostPadding]: '0.75em',
-  [vars$o.gap]: '0.5em',
+  [vars$p.hostPadding]: '0.75em',
+  [vars$p.gap]: '0.5em',
 
-  [vars$o.fontSize]: '16px',
-  [vars$o.titleFontWeight]: '500',
-  [vars$o.lineHeight]: '1em',
+  [vars$p.fontSize]: '16px',
+  [vars$p.titleFontWeight]: '500',
+  [vars$p.lineHeight]: '1em',
 
-  [vars$o.borderWidth]: refs.borderWidth,
-  [vars$o.borderColor]: refs.borderColor,
-  [vars$o.borderRadius]: refs.borderRadius,
-  [vars$o.borderStyle]: 'dashed',
+  [vars$p.borderWidth]: refs.borderWidth,
+  [vars$p.borderColor]: refs.borderColor,
+  [vars$p.borderRadius]: refs.borderRadius,
+  [vars$p.borderStyle]: 'dashed',
 
   _required: {
-    [vars$o.requiredIndicator]: refs.requiredIndicator,
+    [vars$p.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$o.hostHeight]: '196px',
-      [vars$o.hostWidth]: '200px',
-      [vars$o.titleFontSize]: '0.875em',
-      [vars$o.descriptionFontSize]: '0.875em',
-      [vars$o.lineHeight]: '1.25em',
+      [vars$p.hostHeight]: '196px',
+      [vars$p.hostWidth]: '200px',
+      [vars$p.titleFontSize]: '0.875em',
+      [vars$p.descriptionFontSize]: '0.875em',
+      [vars$p.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$o.hostHeight]: '216px',
-      [vars$o.hostWidth]: '230px',
-      [vars$o.titleFontSize]: '1em',
-      [vars$o.descriptionFontSize]: '0.875em',
-      [vars$o.lineHeight]: '1.25em',
+      [vars$p.hostHeight]: '216px',
+      [vars$p.hostWidth]: '230px',
+      [vars$p.titleFontSize]: '1em',
+      [vars$p.descriptionFontSize]: '0.875em',
+      [vars$p.lineHeight]: '1.25em',
     },
     md: {
-      [vars$o.hostHeight]: '256px',
-      [vars$o.hostWidth]: '312px',
-      [vars$o.titleFontSize]: '1.125em',
-      [vars$o.descriptionFontSize]: '1em',
-      [vars$o.lineHeight]: '1.5em',
+      [vars$p.hostHeight]: '256px',
+      [vars$p.hostWidth]: '312px',
+      [vars$p.titleFontSize]: '1.125em',
+      [vars$p.descriptionFontSize]: '1em',
+      [vars$p.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$o.hostHeight]: '280px',
-      [vars$o.hostWidth]: '336px',
-      [vars$o.titleFontSize]: '1.125em',
-      [vars$o.descriptionFontSize]: '1.125em',
-      [vars$o.lineHeight]: '1.75em',
+      [vars$p.hostHeight]: '280px',
+      [vars$p.hostWidth]: '336px',
+      [vars$p.titleFontSize]: '1.125em',
+      [vars$p.descriptionFontSize]: '1.125em',
+      [vars$p.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$o.hostWidth]: refs.width,
+    [vars$p.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$o
+  vars: vars$p
 });
 
-const componentName$q = getComponentName('button-selection-group-item');
+const componentName$r = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$q,
+  componentName: componentName$r,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -9649,37 +9647,37 @@ const ButtonSelectionGroupItemClass = compose(
 
 const globalRefs$j = getThemeRefs(globals);
 
-const vars$n = ButtonSelectionGroupItemClass.cssVarList;
+const vars$o = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$n.hostDirection]: 'inherit',
-  [vars$n.backgroundColor]: globalRefs$j.colors.surface.main,
-  [vars$n.labelTextColor]: globalRefs$j.colors.surface.contrast,
-  [vars$n.borderColor]: globalRefs$j.colors.surface.light,
-  [vars$n.borderStyle]: 'solid',
-  [vars$n.borderRadius]: globalRefs$j.radius.sm,
-  [vars$n.outlineColor]: 'transparent',
-  [vars$n.borderWidth]: globalRefs$j.border.xs,
+  [vars$o.hostDirection]: 'inherit',
+  [vars$o.backgroundColor]: globalRefs$j.colors.surface.main,
+  [vars$o.labelTextColor]: globalRefs$j.colors.surface.contrast,
+  [vars$o.borderColor]: globalRefs$j.colors.surface.light,
+  [vars$o.borderStyle]: 'solid',
+  [vars$o.borderRadius]: globalRefs$j.radius.sm,
+  [vars$o.outlineColor]: 'transparent',
+  [vars$o.borderWidth]: globalRefs$j.border.xs,
 
   _hover: {
-    [vars$n.backgroundColor]: globalRefs$j.colors.surface.highlight,
+    [vars$o.backgroundColor]: globalRefs$j.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$n.outlineColor]: globalRefs$j.colors.surface.light,
+    [vars$o.outlineColor]: globalRefs$j.colors.surface.light,
   },
 
   _selected: {
-    [vars$n.borderColor]: globalRefs$j.colors.surface.contrast,
-    [vars$n.backgroundColor]: globalRefs$j.colors.surface.contrast,
-    [vars$n.labelTextColor]: globalRefs$j.colors.surface.main,
+    [vars$o.borderColor]: globalRefs$j.colors.surface.contrast,
+    [vars$o.backgroundColor]: globalRefs$j.colors.surface.contrast,
+    [vars$o.labelTextColor]: globalRefs$j.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$n
+  vars: vars$o
 });
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -9778,10 +9776,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$p = getComponentName('button-selection-group-internal');
+const componentName$q = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$p
+  componentName$q
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -10013,7 +10011,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$o = getComponentName('button-selection-group');
+const componentName$p = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10022,19 +10020,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$p}
+      <${componentName$q}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$p}>
+      </${componentName$q}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$p);
+      this.inputElement = this.shadowRoot.querySelector(componentName$q);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -10059,7 +10057,7 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$o,
+    componentName: componentName$p,
   })
 );
 
@@ -10075,22 +10073,22 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostWidth]: refs.width,
 });
 
-const vars$m = ButtonSelectionGroupClass.cssVarList;
+const vars$n = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$m),
+  ...createBaseButtonSelectionGroupMappings(vars$n),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$m
+  vars: vars$n
 });
 
-const componentName$n = getComponentName('button-multi-selection-group-internal');
+const componentName$o = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$n
+  componentName$o
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -10193,7 +10191,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$m = getComponentName('button-multi-selection-group');
+const componentName$n = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10202,19 +10200,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$n}
+      <${componentName$o}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$n}>
+      </${componentName$o}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$n);
+      this.inputElement = this.shadowRoot.querySelector(componentName$o);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -10239,23 +10237,23 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$m,
+    componentName: componentName$n,
   })
 );
 
-const vars$l = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$m = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$l),
+  ...createBaseButtonSelectionGroupMappings(vars$m),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$l
+  vars: vars$m
 });
 
-const componentName$l = getComponentName('modal');
+const componentName$m = getComponentName('modal');
 
 const customMixin$5 = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -10354,7 +10352,7 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$l,
+    componentName: componentName$m,
   })
 );
 
@@ -10368,14 +10366,14 @@ const modal = {
   [compVars$2.overlayWidth]: '540px',
 };
 
-const vars$k = {
+const vars$l = {
   ...compVars$2,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$k
+  vars: vars$l
 });
 
 const isValidDataType = (data) => {
@@ -10451,7 +10449,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$k = getComponentName('grid');
+const componentName$l = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -10805,52 +10803,52 @@ const GridClass = compose(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$k,
+    componentName: componentName$l,
   })
 );
 
 const globalRefs$g = getThemeRefs(globals);
-const vars$j = GridClass.cssVarList;
+const vars$k = GridClass.cssVarList;
 
 const grid = {
-  [vars$j.hostWidth]: '100%',
-  [vars$j.hostHeight]: '100%',
-  [vars$j.hostMinHeight]: '400px',
-  [vars$j.fontWeight]: '400',
-  [vars$j.backgroundColor]: globalRefs$g.colors.surface.main,
-
-  [vars$j.fontSize]: refs.fontSize,
-  [vars$j.fontFamily]: refs.fontFamily,
-
-  [vars$j.sortIndicatorsColor]: globalRefs$g.colors.surface.light,
-  [vars$j.activeSortIndicator]: globalRefs$g.colors.surface.dark,
-  [vars$j.resizeHandleColor]: globalRefs$g.colors.surface.light,
-
-  [vars$j.borderWidth]: refs.borderWidth,
-  [vars$j.borderStyle]: refs.borderStyle,
-  [vars$j.borderRadius]: refs.borderRadius,
-  [vars$j.borderColor]: 'transparent',
-
-  [vars$j.headerRowTextColor]: globalRefs$g.colors.surface.dark,
-  [vars$j.separatorColor]: globalRefs$g.colors.surface.light,
-
-  [vars$j.valueTextColor]: globalRefs$g.colors.surface.contrast,
-  [vars$j.selectedBackgroundColor]: globalRefs$g.colors.surface.highlight,
-  [vars$j.hostDirection]: globalRefs$g.direction,
-
-  [vars$j.toggleDetailsPanelButtonSize]: '1em',
-  [vars$j.toggleDetailsPanelButtonOpenedColor]: globalRefs$g.colors.surface.contrast,
-  [vars$j.toggleDetailsPanelButtonClosedColor]: globalRefs$g.colors.surface.light,
-  [vars$j.toggleDetailsPanelButtonCursor]: 'pointer',
-  [vars$j.detailsPanelBackgroundColor]: globalRefs$g.colors.surface.highlight,
-  [vars$j.detailsPanelBorderTopColor]: globalRefs$g.colors.surface.light,
-  [vars$j.detailsPanelLabelsColor]: globalRefs$g.colors.surface.dark,
-  [vars$j.detailsPanelLabelsFontSize]: '0.8em',
-  [vars$j.detailsPanelItemsGap]: '2em',
-  [vars$j.detailsPanelPadding]: '12px 0',
+  [vars$k.hostWidth]: '100%',
+  [vars$k.hostHeight]: '100%',
+  [vars$k.hostMinHeight]: '400px',
+  [vars$k.fontWeight]: '400',
+  [vars$k.backgroundColor]: globalRefs$g.colors.surface.main,
+
+  [vars$k.fontSize]: refs.fontSize,
+  [vars$k.fontFamily]: refs.fontFamily,
+
+  [vars$k.sortIndicatorsColor]: globalRefs$g.colors.surface.light,
+  [vars$k.activeSortIndicator]: globalRefs$g.colors.surface.dark,
+  [vars$k.resizeHandleColor]: globalRefs$g.colors.surface.light,
+
+  [vars$k.borderWidth]: refs.borderWidth,
+  [vars$k.borderStyle]: refs.borderStyle,
+  [vars$k.borderRadius]: refs.borderRadius,
+  [vars$k.borderColor]: 'transparent',
+
+  [vars$k.headerRowTextColor]: globalRefs$g.colors.surface.dark,
+  [vars$k.separatorColor]: globalRefs$g.colors.surface.light,
+
+  [vars$k.valueTextColor]: globalRefs$g.colors.surface.contrast,
+  [vars$k.selectedBackgroundColor]: globalRefs$g.colors.surface.highlight,
+  [vars$k.hostDirection]: globalRefs$g.direction,
+
+  [vars$k.toggleDetailsPanelButtonSize]: '1em',
+  [vars$k.toggleDetailsPanelButtonOpenedColor]: globalRefs$g.colors.surface.contrast,
+  [vars$k.toggleDetailsPanelButtonClosedColor]: globalRefs$g.colors.surface.light,
+  [vars$k.toggleDetailsPanelButtonCursor]: 'pointer',
+  [vars$k.detailsPanelBackgroundColor]: globalRefs$g.colors.surface.highlight,
+  [vars$k.detailsPanelBorderTopColor]: globalRefs$g.colors.surface.light,
+  [vars$k.detailsPanelLabelsColor]: globalRefs$g.colors.surface.dark,
+  [vars$k.detailsPanelLabelsFontSize]: '0.8em',
+  [vars$k.detailsPanelItemsGap]: '2em',
+  [vars$k.detailsPanelPadding]: '12px 0',
 
   _bordered: {
-    [vars$j.borderColor]: refs.borderColor,
+    [vars$k.borderColor]: refs.borderColor,
   },
 };
 
@@ -10858,10 +10856,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$j
+  vars: vars$k
 });
 
-const componentName$j = getComponentName('notification-card');
+const componentName$k = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -10969,54 +10967,54 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$j,
+    componentName: componentName$k,
   })
 );
 
 const globalRefs$f = getThemeRefs(globals);
-const vars$i = NotificationCardClass.cssVarList;
+const vars$j = NotificationCardClass.cssVarList;
 
 const shadowColor$2 = '#00000020';
 
 const notification = {
-  [vars$i.hostMinWidth]: '415px',
-  [vars$i.fontFamily]: globalRefs$f.fonts.font1.family,
-  [vars$i.fontSize]: globalRefs$f.typography.body1.size,
-  [vars$i.backgroundColor]: globalRefs$f.colors.surface.main,
-  [vars$i.textColor]: globalRefs$f.colors.surface.contrast,
-  [vars$i.boxShadow]: `${globalRefs$f.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$f.shadow.narrow.xl} ${shadowColor$2}`,
-  [vars$i.verticalPadding]: '0.625em',
-  [vars$i.horizontalPadding]: '1.5em',
-  [vars$i.borderRadius]: globalRefs$f.radius.xs,
+  [vars$j.hostMinWidth]: '415px',
+  [vars$j.fontFamily]: globalRefs$f.fonts.font1.family,
+  [vars$j.fontSize]: globalRefs$f.typography.body1.size,
+  [vars$j.backgroundColor]: globalRefs$f.colors.surface.main,
+  [vars$j.textColor]: globalRefs$f.colors.surface.contrast,
+  [vars$j.boxShadow]: `${globalRefs$f.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$f.shadow.narrow.xl} ${shadowColor$2}`,
+  [vars$j.verticalPadding]: '0.625em',
+  [vars$j.horizontalPadding]: '1.5em',
+  [vars$j.borderRadius]: globalRefs$f.radius.xs,
 
   _bordered: {
-    [vars$i.borderWidth]: globalRefs$f.border.sm,
-    [vars$i.borderStyle]: 'solid',
-    [vars$i.borderColor]: 'transparent',
+    [vars$j.borderWidth]: globalRefs$f.border.sm,
+    [vars$j.borderStyle]: 'solid',
+    [vars$j.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$i.fontSize]: '12px' },
-    sm: { [vars$i.fontSize]: '14px' },
-    md: { [vars$i.fontSize]: '16px' },
-    lg: { [vars$i.fontSize]: '18px' },
+    xs: { [vars$j.fontSize]: '12px' },
+    sm: { [vars$j.fontSize]: '14px' },
+    md: { [vars$j.fontSize]: '16px' },
+    lg: { [vars$j.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$i.backgroundColor]: globalRefs$f.colors.primary.main,
-      [vars$i.textColor]: globalRefs$f.colors.primary.contrast,
-      [vars$i.borderColor]: globalRefs$f.colors.primary.light,
+      [vars$j.backgroundColor]: globalRefs$f.colors.primary.main,
+      [vars$j.textColor]: globalRefs$f.colors.primary.contrast,
+      [vars$j.borderColor]: globalRefs$f.colors.primary.light,
     },
     success: {
-      [vars$i.backgroundColor]: globalRefs$f.colors.success.main,
-      [vars$i.textColor]: globalRefs$f.colors.success.contrast,
-      [vars$i.borderColor]: globalRefs$f.colors.success.light,
+      [vars$j.backgroundColor]: globalRefs$f.colors.success.main,
+      [vars$j.textColor]: globalRefs$f.colors.success.contrast,
+      [vars$j.borderColor]: globalRefs$f.colors.success.light,
     },
     error: {
-      [vars$i.backgroundColor]: globalRefs$f.colors.error.main,
-      [vars$i.textColor]: globalRefs$f.colors.error.contrast,
-      [vars$i.borderColor]: globalRefs$f.colors.error.light,
+      [vars$j.backgroundColor]: globalRefs$f.colors.error.main,
+      [vars$j.textColor]: globalRefs$f.colors.error.contrast,
+      [vars$j.borderColor]: globalRefs$f.colors.error.light,
     },
   },
 };
@@ -11024,10 +11022,10 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$i
+  vars: vars$j
 });
 
-const componentName$i = getComponentName('multi-select-combo-box');
+const componentName$j = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -11661,93 +11659,93 @@ const MultiSelectComboBoxClass = compose(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-    componentName: componentName$i,
+    componentName: componentName$j,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
 const globalRefs$e = getThemeRefs(globals);
-const vars$h = MultiSelectComboBoxClass.cssVarList;
+const vars$i = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$h.hostWidth]: refs.width,
-  [vars$h.hostDirection]: refs.direction,
-  [vars$h.fontSize]: refs.fontSize,
-  [vars$h.fontFamily]: refs.fontFamily,
-  [vars$h.labelFontSize]: refs.labelFontSize,
-  [vars$h.labelFontWeight]: refs.labelFontWeight,
-  [vars$h.labelTextColor]: refs.labelTextColor,
-  [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$h.inputBorderColor]: refs.borderColor,
-  [vars$h.inputBorderWidth]: refs.borderWidth,
-  [vars$h.inputBorderStyle]: refs.borderStyle,
-  [vars$h.inputBorderRadius]: refs.borderRadius,
-  [vars$h.inputOutlineColor]: refs.outlineColor,
-  [vars$h.inputOutlineOffset]: refs.outlineOffset,
-  [vars$h.inputOutlineWidth]: refs.outlineWidth,
-  [vars$h.inputOutlineStyle]: refs.outlineStyle,
-  [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$h.inputValueTextColor]: refs.valueTextColor,
-  [vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$h.inputBackgroundColor]: refs.backgroundColor,
-  [vars$h.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$h.inputVerticalPadding]: refs.verticalPadding,
-  [vars$h.inputHeight]: refs.inputHeight,
-  [vars$h.inputDropdownButtonColor]: globalRefs$e.colors.surface.dark,
-  [vars$h.inputDropdownButtonCursor]: 'pointer',
-  [vars$h.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$h.inputDropdownButtonOffset]: globalRefs$e.spacing.xs,
-  [vars$h.overlayItemPaddingInlineStart]: globalRefs$e.spacing.xs,
-  [vars$h.overlayItemPaddingInlineEnd]: globalRefs$e.spacing.lg,
-  [vars$h.chipFontSize]: refs.chipFontSize,
-  [vars$h.chipTextColor]: globalRefs$e.colors.surface.contrast,
-  [vars$h.chipBackgroundColor]: globalRefs$e.colors.surface.light,
-  [vars$h.labelPosition]: refs.labelPosition,
-  [vars$h.labelTopPosition]: refs.labelTopPosition,
-  [vars$h.labelLeftPosition]: refs.labelLeftPosition,
-  [vars$h.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$h.inputTransformY]: refs.inputTransformY,
-  [vars$h.inputTransition]: refs.inputTransition,
-  [vars$h.marginInlineStart]: refs.marginInlineStart,
-  [vars$h.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$h.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$i.hostWidth]: refs.width,
+  [vars$i.hostDirection]: refs.direction,
+  [vars$i.fontSize]: refs.fontSize,
+  [vars$i.fontFamily]: refs.fontFamily,
+  [vars$i.labelFontSize]: refs.labelFontSize,
+  [vars$i.labelFontWeight]: refs.labelFontWeight,
+  [vars$i.labelTextColor]: refs.labelTextColor,
+  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$i.inputBorderColor]: refs.borderColor,
+  [vars$i.inputBorderWidth]: refs.borderWidth,
+  [vars$i.inputBorderStyle]: refs.borderStyle,
+  [vars$i.inputBorderRadius]: refs.borderRadius,
+  [vars$i.inputOutlineColor]: refs.outlineColor,
+  [vars$i.inputOutlineOffset]: refs.outlineOffset,
+  [vars$i.inputOutlineWidth]: refs.outlineWidth,
+  [vars$i.inputOutlineStyle]: refs.outlineStyle,
+  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$i.inputValueTextColor]: refs.valueTextColor,
+  [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$i.inputBackgroundColor]: refs.backgroundColor,
+  [vars$i.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$i.inputVerticalPadding]: refs.verticalPadding,
+  [vars$i.inputHeight]: refs.inputHeight,
+  [vars$i.inputDropdownButtonColor]: globalRefs$e.colors.surface.dark,
+  [vars$i.inputDropdownButtonCursor]: 'pointer',
+  [vars$i.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$i.inputDropdownButtonOffset]: globalRefs$e.spacing.xs,
+  [vars$i.overlayItemPaddingInlineStart]: globalRefs$e.spacing.xs,
+  [vars$i.overlayItemPaddingInlineEnd]: globalRefs$e.spacing.lg,
+  [vars$i.chipFontSize]: refs.chipFontSize,
+  [vars$i.chipTextColor]: globalRefs$e.colors.surface.contrast,
+  [vars$i.chipBackgroundColor]: globalRefs$e.colors.surface.light,
+  [vars$i.labelPosition]: refs.labelPosition,
+  [vars$i.labelTopPosition]: refs.labelTopPosition,
+  [vars$i.labelLeftPosition]: refs.labelLeftPosition,
+  [vars$i.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$i.inputTransformY]: refs.inputTransformY,
+  [vars$i.inputTransition]: refs.inputTransition,
+  [vars$i.marginInlineStart]: refs.marginInlineStart,
+  [vars$i.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$i.inputVerticalAlignment]: refs.inputVerticalAlignment,
 
   labelType: {
     floating: {
-      [vars$h.inputHorizontalPadding]: '0.25em',
+      [vars$i.inputHorizontalPadding]: '0.25em',
       _hasValue: {
-        [vars$h.inputHorizontalPadding]: '0.45em',
+        [vars$i.inputHorizontalPadding]: '0.45em',
       },
     },
   },
 
   _readonly: {
-    [vars$h.inputDropdownButtonCursor]: 'default',
+    [vars$i.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$h.overlayFontSize]: refs.fontSize,
-  [vars$h.overlayFontFamily]: refs.fontFamily,
-  [vars$h.overlayCursor]: 'pointer',
-  [vars$h.overlayItemBoxShadow]: 'none',
-  [vars$h.overlayBackground]: refs.backgroundColor,
-  [vars$h.overlayTextColor]: refs.valueTextColor,
+  [vars$i.overlayFontSize]: refs.fontSize,
+  [vars$i.overlayFontFamily]: refs.fontFamily,
+  [vars$i.overlayCursor]: 'pointer',
+  [vars$i.overlayItemBoxShadow]: 'none',
+  [vars$i.overlayBackground]: refs.backgroundColor,
+  [vars$i.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$h.overlay.minHeight]: '400px',
-  [vars$h.overlay.margin]: '0',
+  [vars$i.overlay.minHeight]: '400px',
+  [vars$i.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$h
+  vars: vars$i
 });
 
-const componentName$h = getComponentName('badge');
+const componentName$i = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -11799,65 +11797,65 @@ const BadgeClass = compose(
 )(RawBadge);
 
 const globalRefs$d = getThemeRefs(globals);
-const vars$g = BadgeClass.cssVarList;
+const vars$h = BadgeClass.cssVarList;
 
 const badge$2 = {
-  [vars$g.hostWidth]: 'fit-content',
-  [vars$g.hostDirection]: globalRefs$d.direction,
+  [vars$h.hostWidth]: 'fit-content',
+  [vars$h.hostDirection]: globalRefs$d.direction,
 
-  [vars$g.textAlign]: 'center',
+  [vars$h.textAlign]: 'center',
 
-  [vars$g.fontFamily]: globalRefs$d.fonts.font1.family,
-  [vars$g.fontWeight]: '400',
+  [vars$h.fontFamily]: globalRefs$d.fonts.font1.family,
+  [vars$h.fontWeight]: '400',
 
-  [vars$g.verticalPadding]: '0.25em',
-  [vars$g.horizontalPadding]: '0.5em',
+  [vars$h.verticalPadding]: '0.25em',
+  [vars$h.horizontalPadding]: '0.5em',
 
-  [vars$g.borderWidth]: globalRefs$d.border.xs,
-  [vars$g.borderRadius]: globalRefs$d.radius.xs,
-  [vars$g.borderColor]: 'transparent',
-  [vars$g.borderStyle]: 'solid',
+  [vars$h.borderWidth]: globalRefs$d.border.xs,
+  [vars$h.borderRadius]: globalRefs$d.radius.xs,
+  [vars$h.borderColor]: 'transparent',
+  [vars$h.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$g.hostWidth]: '100%',
+    [vars$h.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$g.fontSize]: '12px' },
-    sm: { [vars$g.fontSize]: '14px' },
-    md: { [vars$g.fontSize]: '16px' },
-    lg: { [vars$g.fontSize]: '18px' },
+    xs: { [vars$h.fontSize]: '12px' },
+    sm: { [vars$h.fontSize]: '14px' },
+    md: { [vars$h.fontSize]: '16px' },
+    lg: { [vars$h.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$g.textColor]: globalRefs$d.colors.surface.dark,
+      [vars$h.textColor]: globalRefs$d.colors.surface.dark,
       _bordered: {
-        [vars$g.borderColor]: globalRefs$d.colors.surface.light,
+        [vars$h.borderColor]: globalRefs$d.colors.surface.light,
       },
     },
     primary: {
-      [vars$g.textColor]: globalRefs$d.colors.primary.main,
+      [vars$h.textColor]: globalRefs$d.colors.primary.main,
       _bordered: {
-        [vars$g.borderColor]: globalRefs$d.colors.primary.light,
+        [vars$h.borderColor]: globalRefs$d.colors.primary.light,
       },
     },
     secondary: {
-      [vars$g.textColor]: globalRefs$d.colors.secondary.main,
+      [vars$h.textColor]: globalRefs$d.colors.secondary.main,
       _bordered: {
-        [vars$g.borderColor]: globalRefs$d.colors.secondary.light,
+        [vars$h.borderColor]: globalRefs$d.colors.secondary.light,
       },
     },
     error: {
-      [vars$g.textColor]: globalRefs$d.colors.error.main,
+      [vars$h.textColor]: globalRefs$d.colors.error.main,
       _bordered: {
-        [vars$g.borderColor]: globalRefs$d.colors.error.light,
+        [vars$h.borderColor]: globalRefs$d.colors.error.light,
       },
     },
     success: {
-      [vars$g.textColor]: globalRefs$d.colors.success.main,
+      [vars$h.textColor]: globalRefs$d.colors.success.main,
       _bordered: {
-        [vars$g.borderColor]: globalRefs$d.colors.success.light,
+        [vars$h.borderColor]: globalRefs$d.colors.success.light,
       },
     },
   },
@@ -11866,11 +11864,11 @@ const badge$2 = {
 var badge$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge$2,
-  vars: vars$g
+  vars: vars$h
 });
 
-const componentName$g = getComponentName('avatar');
-class RawAvatar extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > .wrapper' }) {
+const componentName$h = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > .wrapper' }) {
   constructor() {
     super();
 
@@ -12009,21 +12007,21 @@ const avatar = {
   },
 };
 
-const vars$f = {
+const vars$g = {
   ...compVars$1,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$f
+  vars: vars$g
 });
 
-const componentName$f = getComponentName('mappings-field-internal');
+const componentName$g = getComponentName('mappings-field-internal');
 
-createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
 
-const componentName$e = getComponentName('mappings-field');
+const componentName$f = getComponentName('mappings-field');
 
 const customMixin$4 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -12052,14 +12050,14 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$f}
+      <${componentName$g}
         tabindex="-1"
-      ></${componentName$f}>
+      ></${componentName$g}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$f);
+      this.inputElement = this.shadowRoot.querySelector(componentName$g);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -12191,47 +12189,47 @@ const MappingsFieldClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$e,
+    componentName: componentName$f,
   })
 );
 
 const globalRefs$b = getThemeRefs(globals);
 
-const vars$e = MappingsFieldClass.cssVarList;
+const vars$f = MappingsFieldClass.cssVarList;
 
 const mappingsField = {
-  [vars$e.hostWidth]: refs.width,
-  [vars$e.hostDirection]: refs.direction,
-  [vars$e.fontSize]: refs.fontSize,
-  [vars$e.fontFamily]: refs.fontFamily,
-  [vars$e.separatorFontSize]: '14px',
-  [vars$e.labelsFontSize]: '14px',
-  [vars$e.labelsLineHeight]: '1',
-  [vars$e.labelsMarginBottom]: '6px',
-  [vars$e.labelTextColor]: refs.labelTextColor,
-  [vars$e.itemMarginBottom]: '1em',
+  [vars$f.hostWidth]: refs.width,
+  [vars$f.hostDirection]: refs.direction,
+  [vars$f.fontSize]: refs.fontSize,
+  [vars$f.fontFamily]: refs.fontFamily,
+  [vars$f.separatorFontSize]: '14px',
+  [vars$f.labelsFontSize]: '14px',
+  [vars$f.labelsLineHeight]: '1',
+  [vars$f.labelsMarginBottom]: '6px',
+  [vars$f.labelTextColor]: refs.labelTextColor,
+  [vars$f.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$e.valueLabelMinWidth]: refs.minWidth,
+  [vars$f.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$e.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$b.border.xs})`,
-  [vars$e.separatorWidth]: '70px',
-  [vars$e.removeButtonWidth]: '60px',
+  [vars$f.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$b.border.xs})`,
+  [vars$f.separatorWidth]: '70px',
+  [vars$f.removeButtonWidth]: '60px',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
-  vars: vars$e
+  vars: vars$f
 });
 
 var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$d = getComponentName('user-attribute');
+const componentName$e = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$d,
+  componentName: componentName$e,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -12466,31 +12464,31 @@ const UserAttributeClass = compose(
 )(RawUserAttribute);
 
 const globalRefs$a = getThemeRefs(globals);
-const vars$d = UserAttributeClass.cssVarList;
+const vars$e = UserAttributeClass.cssVarList;
 
 const userAttribute = {
-  [vars$d.hostDirection]: globalRefs$a.direction,
-  [vars$d.labelTextWidth]: '150px',
-  [vars$d.valueTextWidth]: '200px',
-  [vars$d.badgeMaxWidth]: '85px',
-  [vars$d.itemsGap]: '16px',
-  [vars$d.hostMinWidth]: '530px',
+  [vars$e.hostDirection]: globalRefs$a.direction,
+  [vars$e.labelTextWidth]: '150px',
+  [vars$e.valueTextWidth]: '200px',
+  [vars$e.badgeMaxWidth]: '85px',
+  [vars$e.itemsGap]: '16px',
+  [vars$e.hostMinWidth]: '530px',
   _fullWidth: {
-    [vars$d.hostWidth]: '100%',
+    [vars$e.hostWidth]: '100%',
   },
 };
 
 var userAttribute$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAttribute,
-  vars: vars$d
+  vars: vars$e
 });
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$c = getComponentName('user-auth-method');
+const componentName$d = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$c,
+  componentName: componentName$d,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -12683,30 +12681,30 @@ const UserAuthMethodClass = compose(
 )(RawUserAuthMethod);
 
 const globalRefs$9 = getThemeRefs(globals);
-const vars$c = UserAuthMethodClass.cssVarList;
+const vars$d = UserAuthMethodClass.cssVarList;
 
 const userAuthMethod = {
-  [vars$c.hostDirection]: globalRefs$9.direction,
-  [vars$c.labelTextWidth]: '200px',
-  [vars$c.itemsGap]: '16px',
-  [vars$c.hostMinWidth]: '530px',
-  [vars$c.iconSize]: '24px',
+  [vars$d.hostDirection]: globalRefs$9.direction,
+  [vars$d.labelTextWidth]: '200px',
+  [vars$d.itemsGap]: '16px',
+  [vars$d.hostMinWidth]: '530px',
+  [vars$d.iconSize]: '24px',
   _fullWidth: {
-    [vars$c.hostWidth]: '100%',
+    [vars$d.hostWidth]: '100%',
   },
 };
 
 var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAuthMethod,
-  vars: vars$c
+  vars: vars$d
 });
 
-const componentName$b = getComponentName('saml-group-mappings-internal');
+const componentName$c = getComponentName('saml-group-mappings-internal');
 
-createBaseInputClass({ componentName: componentName$b, baseSelector: '' });
+createBaseInputClass({ componentName: componentName$c, baseSelector: '' });
 
-const componentName$a = getComponentName('saml-group-mappings');
+const componentName$b = getComponentName('saml-group-mappings');
 
 const customMixin$3 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -12716,14 +12714,14 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$b}
+      <${componentName$c}
         tabindex="-1"
-      ></${componentName$b}>
+      ></${componentName$c}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$b);
+      this.inputElement = this.shadowRoot.querySelector(componentName$c);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -12800,61 +12798,61 @@ const SamlGroupMappingsClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$a,
+    componentName: componentName$b,
   })
 );
 
-const vars$b = SamlGroupMappingsClass.cssVarList;
+const vars$c = SamlGroupMappingsClass.cssVarList;
 
 const samlGroupMappings = {
-  [vars$b.hostWidth]: refs.width,
-  [vars$b.hostDirection]: refs.direction,
-  [vars$b.groupNameInputMarginBottom]: '1em',
+  [vars$c.hostWidth]: refs.width,
+  [vars$c.hostDirection]: refs.direction,
+  [vars$c.groupNameInputMarginBottom]: '1em',
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: samlGroupMappings,
   samlGroupMappings: samlGroupMappings,
-  vars: vars$b
+  vars: vars$c
 });
 
 const globalRefs$8 = getThemeRefs(globals);
-const vars$a = PolicyValidationClass.cssVarList;
+const vars$b = PolicyValidationClass.cssVarList;
 
 const policyValidation = {
-  [vars$a.fontFamily]: refs.fontFamily,
-  [vars$a.fontSize]: refs.labelFontSize,
-  [vars$a.textColor]: refs.labelTextColor,
-  [vars$a.borderWidth]: refs.borderWidth,
-  [vars$a.borderStyle]: refs.borderStyle,
-  [vars$a.borderColor]: refs.borderColor,
-  [vars$a.borderRadius]: globalRefs$8.radius.sm,
-  [vars$a.backgroundColor]: 'none',
-  [vars$a.padding]: '0px',
-  [vars$a.labelMargin]: globalRefs$8.spacing.sm,
-  [vars$a.itemsSpacing]: globalRefs$8.spacing.lg,
-  [vars$a.itemSymbolDefault]: "'\\2022'", // "•"
-  [vars$a.itemSymbolSuccess]: "'\\2713'", // "✓"
-  [vars$a.itemSymbolError]: "'\\2A09'", // "⨉"
-  [vars$a.itemSymbolSuccessColor]: globalRefs$8.colors.success.main,
-  [vars$a.itemSymbolErrorColor]: globalRefs$8.colors.error.main,
+  [vars$b.fontFamily]: refs.fontFamily,
+  [vars$b.fontSize]: refs.labelFontSize,
+  [vars$b.textColor]: refs.labelTextColor,
+  [vars$b.borderWidth]: refs.borderWidth,
+  [vars$b.borderStyle]: refs.borderStyle,
+  [vars$b.borderColor]: refs.borderColor,
+  [vars$b.borderRadius]: globalRefs$8.radius.sm,
+  [vars$b.backgroundColor]: 'none',
+  [vars$b.padding]: '0px',
+  [vars$b.labelMargin]: globalRefs$8.spacing.sm,
+  [vars$b.itemsSpacing]: globalRefs$8.spacing.lg,
+  [vars$b.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars$b.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars$b.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars$b.itemSymbolSuccessColor]: globalRefs$8.colors.success.main,
+  [vars$b.itemSymbolErrorColor]: globalRefs$8.colors.error.main,
 };
 
 var policyValidation$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: policyValidation,
-  vars: vars$a
+  vars: vars$b
 });
 
-const vars$9 = IconClass.cssVarList;
+const vars$a = IconClass.cssVarList;
 
 const icon = {};
 
 var icon$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon,
-  vars: vars$9
+  vars: vars$a
 });
 
 const decode = (input) => {
@@ -12867,9 +12865,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
 
-const componentName$9 = getComponentName('code-snippet');
+const componentName$a = getComponentName('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$a, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -13101,7 +13099,7 @@ const CodeSnippetClass = compose(
 
 const globalRefs$7 = getThemeRefs(globals);
 
-const vars$8 = CodeSnippetClass.cssVarList;
+const vars$9 = CodeSnippetClass.cssVarList;
 
 const light = {
   color1: '#fa0',
@@ -13136,50 +13134,50 @@ const dark = {
 };
 
 const CodeSnippet = {
-  [vars$8.rootBgColor]: globalRefs$7.colors.surface.main,
-  [vars$8.rootTextColor]: globalRefs$7.colors.surface.contrast,
-  [vars$8.docTagTextColor]: light.color2,
-  [vars$8.keywordTextColor]: light.color2,
-  [vars$8.metaKeywordTextColor]: light.color2,
-  [vars$8.templateTagTextColor]: light.color2,
-  [vars$8.templateVariableTextColor]: light.color2,
-  [vars$8.typeTextColor]: light.color2,
-  [vars$8.variableLanguageTextColor]: light.color2,
-  [vars$8.titleTextColor]: light.color3,
-  [vars$8.titleClassTextColor]: light.color3,
-  [vars$8.titleClassInheritedTextColor]: light.color3,
-  [vars$8.titleFunctionTextColor]: light.color3,
-  [vars$8.attrTextColor]: light.color4,
-  [vars$8.attributeTextColor]: light.color4,
-  [vars$8.literalTextColor]: light.color4,
-  [vars$8.metaTextColor]: light.color4,
-  [vars$8.numberTextColor]: light.color4,
-  [vars$8.operatorTextColor]: light.color4,
-  [vars$8.variableTextColor]: light.color4,
-  [vars$8.selectorAttrTextColor]: light.color4,
-  [vars$8.selectorClassTextColor]: light.color4,
-  [vars$8.selectorIdTextColor]: light.color4,
-  [vars$8.regexpTextColor]: light.color13,
-  [vars$8.stringTextColor]: light.color13,
-  [vars$8.metaStringTextColor]: light.color13,
-  [vars$8.builtInTextColor]: light.color5,
-  [vars$8.symbolTextColor]: light.color5,
-  [vars$8.commentTextColor]: light.color6,
-  [vars$8.codeTextColor]: light.color6,
-  [vars$8.formulaTextColor]: light.color6,
-  [vars$8.nameTextColor]: light.color7,
-  [vars$8.quoteTextColor]: light.color7,
-  [vars$8.selectorTagTextColor]: light.color7,
-  [vars$8.selectorPseudoTextColor]: light.color7,
-  [vars$8.substTextColor]: light.color8,
-  [vars$8.sectionTextColor]: light.color4,
-  [vars$8.bulletTextColor]: light.color9,
-  [vars$8.emphasisTextColor]: light.color8,
-  [vars$8.strongTextColor]: light.color8,
-  [vars$8.additionTextColor]: light.color7,
-  [vars$8.additionBgColor]: light.color10,
-  [vars$8.deletionTextColor]: light.color2,
-  [vars$8.deletionBgColor]: light.color10,
+  [vars$9.rootBgColor]: globalRefs$7.colors.surface.main,
+  [vars$9.rootTextColor]: globalRefs$7.colors.surface.contrast,
+  [vars$9.docTagTextColor]: light.color2,
+  [vars$9.keywordTextColor]: light.color2,
+  [vars$9.metaKeywordTextColor]: light.color2,
+  [vars$9.templateTagTextColor]: light.color2,
+  [vars$9.templateVariableTextColor]: light.color2,
+  [vars$9.typeTextColor]: light.color2,
+  [vars$9.variableLanguageTextColor]: light.color2,
+  [vars$9.titleTextColor]: light.color3,
+  [vars$9.titleClassTextColor]: light.color3,
+  [vars$9.titleClassInheritedTextColor]: light.color3,
+  [vars$9.titleFunctionTextColor]: light.color3,
+  [vars$9.attrTextColor]: light.color4,
+  [vars$9.attributeTextColor]: light.color4,
+  [vars$9.literalTextColor]: light.color4,
+  [vars$9.metaTextColor]: light.color4,
+  [vars$9.numberTextColor]: light.color4,
+  [vars$9.operatorTextColor]: light.color4,
+  [vars$9.variableTextColor]: light.color4,
+  [vars$9.selectorAttrTextColor]: light.color4,
+  [vars$9.selectorClassTextColor]: light.color4,
+  [vars$9.selectorIdTextColor]: light.color4,
+  [vars$9.regexpTextColor]: light.color13,
+  [vars$9.stringTextColor]: light.color13,
+  [vars$9.metaStringTextColor]: light.color13,
+  [vars$9.builtInTextColor]: light.color5,
+  [vars$9.symbolTextColor]: light.color5,
+  [vars$9.commentTextColor]: light.color6,
+  [vars$9.codeTextColor]: light.color6,
+  [vars$9.formulaTextColor]: light.color6,
+  [vars$9.nameTextColor]: light.color7,
+  [vars$9.quoteTextColor]: light.color7,
+  [vars$9.selectorTagTextColor]: light.color7,
+  [vars$9.selectorPseudoTextColor]: light.color7,
+  [vars$9.substTextColor]: light.color8,
+  [vars$9.sectionTextColor]: light.color4,
+  [vars$9.bulletTextColor]: light.color9,
+  [vars$9.emphasisTextColor]: light.color8,
+  [vars$9.strongTextColor]: light.color8,
+  [vars$9.additionTextColor]: light.color7,
+  [vars$9.additionBgColor]: light.color10,
+  [vars$9.deletionTextColor]: light.color2,
+  [vars$9.deletionBgColor]: light.color10,
   /* purposely ignored */
   // [vars.charEscapeTextColor]: '',
   // [vars.linkTextColor]: '',
@@ -13191,50 +13189,50 @@ const CodeSnippet = {
 
 const codeSnippetDarkThemeOverrides = {
   codeSnippet: {
-    [vars$8.rootBgColor]: globalRefs$7.colors.surface.main,
-    [vars$8.rootTextColor]: globalRefs$7.colors.surface.contrast,
-    [vars$8.docTagTextColor]: dark.color2,
-    [vars$8.keywordTextColor]: dark.color2,
-    [vars$8.metaKeywordTextColor]: dark.color2,
-    [vars$8.templateTagTextColor]: dark.color2,
-    [vars$8.templateVariableTextColor]: dark.color2,
-    [vars$8.typeTextColor]: dark.color2,
-    [vars$8.variableLanguageTextColor]: dark.color2,
-    [vars$8.titleTextColor]: dark.color3,
-    [vars$8.titleClassTextColor]: dark.color3,
-    [vars$8.titleClassInheritedTextColor]: dark.color3,
-    [vars$8.titleFunctionTextColor]: dark.color3,
-    [vars$8.attrTextColor]: dark.color4,
-    [vars$8.attributeTextColor]: dark.color4,
-    [vars$8.literalTextColor]: dark.color4,
-    [vars$8.metaTextColor]: dark.color4,
-    [vars$8.numberTextColor]: dark.color4,
-    [vars$8.operatorTextColor]: dark.color4,
-    [vars$8.variableTextColor]: dark.color4,
-    [vars$8.selectorAttrTextColor]: dark.color4,
-    [vars$8.selectorClassTextColor]: dark.color4,
-    [vars$8.selectorIdTextColor]: dark.color4,
-    [vars$8.regexpTextColor]: dark.color13,
-    [vars$8.stringTextColor]: dark.color13,
-    [vars$8.metaStringTextColor]: dark.color13,
-    [vars$8.builtInTextColor]: dark.color5,
-    [vars$8.symbolTextColor]: dark.color5,
-    [vars$8.commentTextColor]: dark.color6,
-    [vars$8.codeTextColor]: dark.color6,
-    [vars$8.formulaTextColor]: dark.color6,
-    [vars$8.nameTextColor]: dark.color7,
-    [vars$8.quoteTextColor]: dark.color7,
-    [vars$8.selectorTagTextColor]: dark.color7,
-    [vars$8.selectorPseudoTextColor]: dark.color7,
-    [vars$8.substTextColor]: dark.color8,
-    [vars$8.sectionTextColor]: dark.color4,
-    [vars$8.bulletTextColor]: dark.color9,
-    [vars$8.emphasisTextColor]: dark.color8,
-    [vars$8.strongTextColor]: dark.color8,
-    [vars$8.additionTextColor]: dark.color7,
-    [vars$8.additionBgColor]: dark.color10,
-    [vars$8.deletionTextColor]: dark.color2,
-    [vars$8.deletionBgColor]: dark.color10,
+    [vars$9.rootBgColor]: globalRefs$7.colors.surface.main,
+    [vars$9.rootTextColor]: globalRefs$7.colors.surface.contrast,
+    [vars$9.docTagTextColor]: dark.color2,
+    [vars$9.keywordTextColor]: dark.color2,
+    [vars$9.metaKeywordTextColor]: dark.color2,
+    [vars$9.templateTagTextColor]: dark.color2,
+    [vars$9.templateVariableTextColor]: dark.color2,
+    [vars$9.typeTextColor]: dark.color2,
+    [vars$9.variableLanguageTextColor]: dark.color2,
+    [vars$9.titleTextColor]: dark.color3,
+    [vars$9.titleClassTextColor]: dark.color3,
+    [vars$9.titleClassInheritedTextColor]: dark.color3,
+    [vars$9.titleFunctionTextColor]: dark.color3,
+    [vars$9.attrTextColor]: dark.color4,
+    [vars$9.attributeTextColor]: dark.color4,
+    [vars$9.literalTextColor]: dark.color4,
+    [vars$9.metaTextColor]: dark.color4,
+    [vars$9.numberTextColor]: dark.color4,
+    [vars$9.operatorTextColor]: dark.color4,
+    [vars$9.variableTextColor]: dark.color4,
+    [vars$9.selectorAttrTextColor]: dark.color4,
+    [vars$9.selectorClassTextColor]: dark.color4,
+    [vars$9.selectorIdTextColor]: dark.color4,
+    [vars$9.regexpTextColor]: dark.color13,
+    [vars$9.stringTextColor]: dark.color13,
+    [vars$9.metaStringTextColor]: dark.color13,
+    [vars$9.builtInTextColor]: dark.color5,
+    [vars$9.symbolTextColor]: dark.color5,
+    [vars$9.commentTextColor]: dark.color6,
+    [vars$9.codeTextColor]: dark.color6,
+    [vars$9.formulaTextColor]: dark.color6,
+    [vars$9.nameTextColor]: dark.color7,
+    [vars$9.quoteTextColor]: dark.color7,
+    [vars$9.selectorTagTextColor]: dark.color7,
+    [vars$9.selectorPseudoTextColor]: dark.color7,
+    [vars$9.substTextColor]: dark.color8,
+    [vars$9.sectionTextColor]: dark.color4,
+    [vars$9.bulletTextColor]: dark.color9,
+    [vars$9.emphasisTextColor]: dark.color8,
+    [vars$9.strongTextColor]: dark.color8,
+    [vars$9.additionTextColor]: dark.color7,
+    [vars$9.additionBgColor]: dark.color10,
+    [vars$9.deletionTextColor]: dark.color2,
+    [vars$9.deletionBgColor]: dark.color10,
   },
 };
 
@@ -13242,10 +13240,10 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
   __proto__: null,
   codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
   default: CodeSnippet,
-  vars: vars$8
+  vars: vars$9
 });
 
-const componentName$8 = getComponentName('radio-button');
+const componentName$9 = getComponentName('radio-button');
 
 const customMixin$2 = (superclass) =>
   class CustomMixin extends superclass {
@@ -13310,11 +13308,11 @@ const RadioButtonClass = compose(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$8,
+    componentName: componentName$9,
   })
 );
 
-const componentName$7 = getComponentName('radio-group');
+const componentName$8 = getComponentName('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -13329,12 +13327,12 @@ const RadioGroupMixin = (superclass) =>
 
       // we are overriding vaadin children getter so it will run on our custom elements
       Object.defineProperty(this.baseElement, 'children', {
-        get: () => this.querySelectorAll(componentName$8),
+        get: () => this.querySelectorAll(componentName$9),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) => {
-        return nodes.filter((node) => node.localName === componentName$8);
+        return nodes.filter((node) => node.localName === componentName$9);
       };
 
       // vaadin radio group missing some input properties
@@ -13484,38 +13482,38 @@ const RadioGroupClass = compose(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
-    componentName: componentName$7,
+    componentName: componentName$8,
     includeForwardProps: ['value'],
   })
 );
 
-const vars$7 = RadioGroupClass.cssVarList;
+const vars$8 = RadioGroupClass.cssVarList;
 const globalRefs$6 = getThemeRefs(globals);
 
 const radioGroup = {
-  [vars$7.buttonsRowGap]: '9px',
-  [vars$7.hostWidth]: refs.width,
-  [vars$7.hostDirection]: refs.direction,
-  [vars$7.fontSize]: refs.fontSize,
-  [vars$7.fontFamily]: refs.fontFamily,
-  [vars$7.labelTextColor]: refs.labelTextColor,
-  [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$7.helperTextColor]: refs.helperTextColor,
-  [vars$7.itemsLabelColor]: globalRefs$6.colors.surface.contrast,
+  [vars$8.buttonsRowGap]: '9px',
+  [vars$8.hostWidth]: refs.width,
+  [vars$8.hostDirection]: refs.direction,
+  [vars$8.fontSize]: refs.fontSize,
+  [vars$8.fontFamily]: refs.fontFamily,
+  [vars$8.labelTextColor]: refs.labelTextColor,
+  [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$8.helperTextColor]: refs.helperTextColor,
+  [vars$8.itemsLabelColor]: globalRefs$6.colors.surface.contrast,
 
   textAlign: {
-    right: { [vars$7.inputTextAlign]: 'right' },
-    left: { [vars$7.inputTextAlign]: 'left' },
-    center: { [vars$7.inputTextAlign]: 'center' },
+    right: { [vars$8.inputTextAlign]: 'right' },
+    left: { [vars$8.inputTextAlign]: 'left' },
+    center: { [vars$8.inputTextAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$7.buttonsSpacing]: 'space-between',
+    [vars$8.buttonsSpacing]: 'space-between',
   },
 
   _disabled: {
-    [vars$7.itemsLabelColor]: globalRefs$6.colors.surface.light,
+    [vars$8.itemsLabelColor]: globalRefs$6.colors.surface.light,
   },
 };
 
@@ -13523,24 +13521,24 @@ var radioGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: radioGroup,
   radioGroup: radioGroup,
-  vars: vars$7
+  vars: vars$8
 });
 
-const vars$6 = RadioButtonClass.cssVarList;
+const vars$7 = RadioButtonClass.cssVarList;
 const globalRefs$5 = getThemeRefs(globals);
 
 const radioButton = {
-  [vars$6.fontFamily]: refs.fontFamily,
-  [vars$6.radioSize]: 'calc(1em + 6px)',
-  [vars$6.radioMargin]: 'auto 4px',
-  [vars$6.radioCheckedSize]: `calc(var(${vars$6.radioSize})/5)`,
-  [vars$6.radioCheckedColor]: globalRefs$5.colors.surface.light,
-  [vars$6.radioBackgroundColor]: globalRefs$5.colors.surface.light,
-  [vars$6.radioBorderColor]: 'none',
-  [vars$6.radioBorderWidth]: 0,
+  [vars$7.fontFamily]: refs.fontFamily,
+  [vars$7.radioSize]: 'calc(1em + 6px)',
+  [vars$7.radioMargin]: 'auto 4px',
+  [vars$7.radioCheckedSize]: `calc(var(${vars$7.radioSize})/5)`,
+  [vars$7.radioCheckedColor]: globalRefs$5.colors.surface.light,
+  [vars$7.radioBackgroundColor]: globalRefs$5.colors.surface.light,
+  [vars$7.radioBorderColor]: 'none',
+  [vars$7.radioBorderWidth]: 0,
 
   _checked: {
-    [vars$6.radioBackgroundColor]: globalRefs$5.colors.surface.contrast,
+    [vars$7.radioBackgroundColor]: globalRefs$5.colors.surface.contrast,
   },
 
   _hover: {
@@ -13549,16 +13547,16 @@ const radioButton = {
 
   size: {
     xs: {
-      [vars$6.fontSize]: '12px',
+      [vars$7.fontSize]: '12px',
     },
     sm: {
-      [vars$6.fontSize]: '14px',
+      [vars$7.fontSize]: '14px',
     },
     md: {
-      [vars$6.fontSize]: '16px',
+      [vars$7.fontSize]: '16px',
     },
     lg: {
-      [vars$6.fontSize]: '18px',
+      [vars$7.fontSize]: '18px',
     },
   },
 };
@@ -13567,7 +13565,7 @@ var radioButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: radioButton,
   radioButton: radioButton,
-  vars: vars$6
+  vars: vars$7
 });
 
 const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
@@ -13885,7 +13883,7 @@ const nextMonth = (timestamp) => {
   return date;
 };
 
-const componentName$6 = getComponentName('calendar');
+const componentName$7 = getComponentName('calendar');
 
 const observedAttrs$1 = [
   'initial-value',
@@ -13902,7 +13900,7 @@ const observedAttrs$1 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
 
 class RawCalendar extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -14386,8 +14384,8 @@ const {
   weekday: { selector: () => '.weekday' },
   navPrev: { selector: () => '.nav-prev' },
   navNext: { selector: () => '.nav-next' },
-  navPrevRTL: { selector: () => ':host(:dir(rtl)) .nav-prev' },
-  navNextRTL: { selector: () => ':host(:dir(rtl)) .nav-next' },
+  navPrevRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-prev' },
+  navNextRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-next' },
   yearInput: { selector: () => '.year-input' },
   monthInput: { selector: () => '.month-input' },
 };
@@ -14517,92 +14515,92 @@ const CalendarClass = compose(
 
 const globalRefs$4 = getThemeRefs(globals);
 
-const vars$5 = CalendarClass.cssVarList;
+const vars$6 = CalendarClass.cssVarList;
 
 const calendar = {
-  [vars$5.fontFamily]: refs.fontFamily,
-  [vars$5.fontSize]: refs.fontSize,
-  [vars$5.hostDirection]: refs.direction,
+  [vars$6.fontFamily]: refs.fontFamily,
+  [vars$6.fontSize]: refs.fontSize,
+  [vars$6.hostDirection]: refs.direction,
 
-  [vars$5.calendarPadding]: '1em',
+  [vars$6.calendarPadding]: '1em',
 
-  [vars$5.topNavVerticalPadding]: '1em',
-  [vars$5.topNavAlignment]: 'space-between',
-  [vars$5.topNavGap]: '0',
-  [vars$5.topNavSelectorsGap]: '0.5em',
+  [vars$6.topNavVerticalPadding]: '1em',
+  [vars$6.topNavAlignment]: 'space-between',
+  [vars$6.topNavGap]: '0',
+  [vars$6.topNavSelectorsGap]: '0.5em',
 
-  [vars$5.bottomNavVerticalPadding]: '0.75em',
-  [vars$5.bottomNavHorizontalPadding]: '1.5em',
-  [vars$5.bottomNavAlignment]: 'space-between',
-  [vars$5.bottomNavGap]: '0.5em',
+  [vars$6.bottomNavVerticalPadding]: '0.75em',
+  [vars$6.bottomNavHorizontalPadding]: '1.5em',
+  [vars$6.bottomNavAlignment]: 'space-between',
+  [vars$6.bottomNavGap]: '0.5em',
 
-  [vars$5.navMarginBottom]: '0.75em',
-  [vars$5.navBorderBottomWidth]: '1px',
-  [vars$5.navBorderBottomColor]: globalRefs$4.colors.surface.highlight,
-  [vars$5.navBorderBottomStyle]: 'solid',
+  [vars$6.navMarginBottom]: '0.75em',
+  [vars$6.navBorderBottomWidth]: '1px',
+  [vars$6.navBorderBottomColor]: globalRefs$4.colors.surface.highlight,
+  [vars$6.navBorderBottomStyle]: 'solid',
 
-  [vars$5.yearInputWidth]: '6em',
-  [vars$5.monthInputWidth]: '8em',
+  [vars$6.yearInputWidth]: '6em',
+  [vars$6.monthInputWidth]: '8em',
 
-  [vars$5.navButtonSize]: '24px',
-  [vars$5.navButtonCursor]: 'pointer',
+  [vars$6.navButtonSize]: '24px',
+  [vars$6.navButtonCursor]: 'pointer',
 
-  [vars$5.weekdayFontSize]: '0.875em',
-  [vars$5.weekdayFontWeight]: '500',
+  [vars$6.weekdayFontSize]: '0.875em',
+  [vars$6.weekdayFontWeight]: '500',
 
   // day table cell
-  [vars$5.dayHeight]: '3.125em',
+  [vars$6.dayHeight]: '3.125em',
 
   // day value
-  [vars$5.daySize]: '2.125em',
-  [vars$5.dayFontSize]: '1em',
-  [vars$5.dayRadius]: '50%',
-  [vars$5.dayTextAlign]: 'center',
-  [vars$5.dayPadding]: '0',
-  [vars$5.dayTextColor]: globalRefs$4.colors.surface.contrast,
-  [vars$5.dayFontWeight]: '500',
-  [vars$5.dayBackgroundColor]: 'transparent',
-  [vars$5.dayCursor]: 'pointer',
-  [vars$5.dayBackgroundColorHover]: globalRefs$4.colors.primary.highlight,
+  [vars$6.daySize]: '2.125em',
+  [vars$6.dayFontSize]: '1em',
+  [vars$6.dayRadius]: '50%',
+  [vars$6.dayTextAlign]: 'center',
+  [vars$6.dayPadding]: '0',
+  [vars$6.dayTextColor]: globalRefs$4.colors.surface.contrast,
+  [vars$6.dayFontWeight]: '500',
+  [vars$6.dayBackgroundColor]: 'transparent',
+  [vars$6.dayCursor]: 'pointer',
+  [vars$6.dayBackgroundColorHover]: globalRefs$4.colors.primary.highlight,
 
   // selected day
-  [vars$5.daySelectedBackgroundColor]: globalRefs$4.colors.primary.main,
-  [vars$5.daySelectedTextdColor]: globalRefs$4.colors.primary.contrast,
+  [vars$6.daySelectedBackgroundColor]: globalRefs$4.colors.primary.main,
+  [vars$6.daySelectedTextdColor]: globalRefs$4.colors.primary.contrast,
 
   // disabled day (out of min/max range)
-  [vars$5.dayDisabledTextdColor]: globalRefs$4.colors.surface.light,
+  [vars$6.dayDisabledTextdColor]: globalRefs$4.colors.surface.light,
 
   // today
-  [vars$5.currentDayBorderColor]: globalRefs$4.colors.surface.light,
-  [vars$5.currentDayBorderWidth]: '1px',
-  [vars$5.currentDayBorderStyle]: 'solid',
+  [vars$6.currentDayBorderColor]: globalRefs$4.colors.surface.light,
+  [vars$6.currentDayBorderWidth]: '1px',
+  [vars$6.currentDayBorderStyle]: 'solid',
 
   size: {
-    xs: { [vars$5.fontSize]: '12px' },
-    sm: { [vars$5.fontSize]: '14px' },
-    md: { [vars$5.fontSize]: '16px' },
-    lg: { [vars$5.fontSize]: '18px' },
+    xs: { [vars$6.fontSize]: '12px' },
+    sm: { [vars$6.fontSize]: '14px' },
+    md: { [vars$6.fontSize]: '16px' },
+    lg: { [vars$6.fontSize]: '18px' },
   },
 
-  [vars$5.navButtonRotation]: 'rotate(180deg)',
+  [vars$6.navButtonRotation]: 'rotate(180deg)',
 
   _disabled: {
-    [vars$5.navButtonOpacity]: '0.5',
-    [vars$5.dayBackgroundColorHover]: 'none',
-    [vars$5.navButtonCursor]: 'default',
-    [vars$5.dayCursor]: 'default',
+    [vars$6.navButtonOpacity]: '0.5',
+    [vars$6.dayBackgroundColorHover]: 'none',
+    [vars$6.navButtonCursor]: 'default',
+    [vars$6.dayCursor]: 'default',
   },
 
   _fullWidth: {
-    [vars$5.hostWidth]: '100%',
-    [vars$5.dayBlockAlign]: '0 auto',
+    [vars$6.hostWidth]: '100%',
+    [vars$6.dayBlockAlign]: '0 auto',
   },
 };
 
 var calendar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: calendar,
-  vars: vars$5
+  vars: vars$6
 });
 
 const patterns = {
@@ -14736,14 +14734,14 @@ class DateCounter {
   }
 }
 
-const componentName$5 = getComponentName('date-field');
+const componentName$6 = getComponentName('date-field');
 
 // we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
 // be able to process this component's overlay. The whole process needs refactoring as soon as possible.
 const BASE_SELECTOR = 'vaadin-popover';
-const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: BASE_SELECTOR });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$6, baseSelector: BASE_SELECTOR });
 
-const dateFieldAttrs = ['format', 'opened', 'initial-value'];
+const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
 const observedAttrs = [...dateFieldAttrs, ...calendarAttrs];
 
@@ -14785,19 +14783,16 @@ class RawDateFieldClass extends BaseInputClass {
         display: flex;
         align-self: center;
         z-index: 1;
+        height: 100%;
+        align-items: center;        
       }
 
-      descope-text-field .overlay-position-anchor {
-        position: absolute;
-        height: 100%;
-        width: 0;
-        z-index: 1;
+      :host([readonly="true"]) .toggle-calendar {
         pointer-events: none;
       }
     </style>
     <div>
       <descope-text-field>
-        <span slot="prefix" class="overlay-position-anchor"></span>
         <span slot="suffix" class="toggle-calendar">
           <descope-icon>${calendarIcon}</descope-icon>
         </span>
@@ -14808,7 +14803,6 @@ class RawDateFieldClass extends BaseInputClass {
 
     this.inputElement = this.shadowRoot.querySelector('descope-text-field');
     this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');
-    this.overlayPositionAnchor = this.inputElement.querySelector('.overlay-position-anchor');
 
     this.oninvalid = () => {
       this.inputElement.setAttribute('invalid', 'true');
@@ -14857,6 +14851,17 @@ class RawDateFieldClass extends BaseInputClass {
     return this.overlay?.querySelector('descope-calendar');
   }
 
+  get isRTL() {
+    const computedStyleDirection = getComputedStyle(this.baseElement).getPropertyValue('direction');
+
+    if (computedStyleDirection) {
+      return computedStyleDirection === 'rtl';
+    }
+
+    // Fallback: If for some reason computed style was not calculated in time, fallback to check on attribute
+    return this.getAttribute('st-host-direction') === 'rtl';
+  }
+
   get value() {
     return this.timestamp;
   }
@@ -14937,10 +14942,8 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   initPopover() {
-    this.baseElement.target = this.overlayPositionAnchor;
     this.baseElement.trigger = ['click'];
     this.baseElement.withBackdrop = true;
-    this.baseElement.noCloseOnOutsideClick = true;
     this.baseElement.renderer = this.#popoverRenderer.bind(this);
 
     // block popover events from focusing/blurring the text-field
@@ -14950,32 +14953,64 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  #popoverPosStylesheet;
+
   #popoverRenderer(root) {
     // popoverRenderer should run only once, when the popover is first rendering.
     if (!root.firstChild) {
+      this.overlay.positionTarget = this.shadowRoot.querySelector('.toggle-calendar');
+
       root.appendChild(this.#getPopoverContent());
+
       // override vaadin's constructed stylesheet which hides the host element
       overrideConstructedStylesheet(this.baseElement);
 
-      // To prevent position flickering of the dialog we set opacity to 0
-      root.style.setProperty('opacity', '0');
+      this.backdrop.addEventListener('click', this.closePopover.bind(this));
+    }
+
+    // Hide overlay before adjusting position to prevent flickering
+    root.style.setProperty('visibility', 'hidden');
 
-      setTimeout(() => {
-        // on first render we adjust the a anchor element in the input
-        // so vaadin computes the popover position according to the anchor position
-        // (otherwise it will simply center the popover below the input).
-        this.#adjustOverlayPosition();
+    // Wait until overlay is ready
+    setTimeout(() => {
+      this.#adjustPopoverPosition(root);
+
+      // Show adjusted overlay
+      root.style.setProperty('visibility', 'visible');
+      this.updateCalendarView(root);
+    }, 100);
+  }
 
-        // remove opacity to show overlay
-        root.style.setProperty('opacity', '1');
+  #adjustPopoverPosition() {
+    const popover = this.shadowRoot.querySelector('vaadin-popover').shadowRoot;
 
-        // on outside click - close popover. this event runs once on popover first render
-        // and does not need to be cleared
-        this.backdrop.addEventListener('click', this.closePopover.bind(this));
-      });
+    // Remove previously added stylesheets
+    this.#popoverPosStylesheet?.remove();
+
+    const windowRect = document.body.getBoundingClientRect();
+    const inputRect = this.getBoundingClientRect();
+    const calendarRect = this.calendar.getBoundingClientRect();
+
+    const side = this.isRTL ? 'right' : 'left';
+    const offset = inputRect[side] - calendarRect[side];
+    const availableLeft = calendarRect.left;
+    const availableRight = windowRect.width - calendarRect.right;
+
+    let newOffset;
+    if (offset > 0) {
+      newOffset = Math.min(offset, availableRight);
+    } else {
+      newOffset = Math.min(Math.abs(offset), availableLeft) * -1;
     }
 
-    this.updateCalendarView();
+    this.#popoverPosStylesheet = document.createElement('style');
+    this.#popoverPosStylesheet.innerHTML = `
+      vaadin-popover-overlay::part(overlay) {
+        transform: translateX(${newOffset}px);
+      }
+    `;
+
+    popover.appendChild(this.#popoverPosStylesheet);
   }
 
   #getPopoverContent() {
@@ -14991,17 +15026,6 @@ class RawDateFieldClass extends BaseInputClass {
     return ele;
   }
 
-  #adjustOverlayPosition() {
-    const { width: inputEleWidth } = this.inputElement.getClientRects()[0];
-    const { width: calendarEleWidth } = this.calendar.getClientRects()[0];
-    const pos = inputEleWidth - calendarEleWidth / 2;
-    /* eslint-disable no-use-before-define */
-    this.overlayPositionAnchor.style.setProperty(
-      DateFieldClass.cssVarList.overlayAnchorPos,
-      `${pos}px`
-    );
-  }
-
   // the default vaadin behavior is to attach the overlay to the body when opened
   // we do not want that because it's difficult to style the overlay in this way
   // so we override it to open inside the shadow DOM
@@ -15085,6 +15109,10 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   onFocus() {
+    if (this.isReadOnly) {
+      return;
+    }
+
     if (!this.inputElement.value) {
       this.inputElement.value = this.format;
       this.setInputSelectionRange();
@@ -15322,12 +15350,10 @@ class RawDateFieldClass extends BaseInputClass {
   }
 }
 
-const { host, input, toggleButton, overlayAnchor, overlayAnchorRTL, overlay, backdrop } = {
+const { host, input, toggleButton, overlay, backdrop } = {
   host: { selector: () => ':host' },
   input: { selector: () => 'descope-text-field' },
   toggleButton: { selector: () => '.toggle-calendar' },
-  overlayAnchor: { selector: () => ':host .overlay-position-anchor' },
-  overlayAnchorRTL: { selector: ':host([st-host-direction="rtl"]) .overlay-position-anchor' },
   overlay: { selector: 'vaadin-popover-overlay::part(overlay)' },
   backdrop: { selector: 'vaadin-popover-overlay::part(backdrop)' },
 };
@@ -15340,14 +15366,9 @@ const DateFieldClass = compose(
       hostWidth: { ...host, property: 'width' },
       hostDirection: { ...host, property: 'direction' },
       textAlign: { ...input, property: 'text-align' },
-      overlayAnchorPos: [
-        { ...overlayAnchor, property: 'right' },
-        { ...overlayAnchorRTL, property: 'left' },
-      ],
       overlayGap: {
         property: () => DateFieldClass.cssVarList.overlayGap,
       },
-
       overlayBackgroundColor: {
         property: () => DateFieldClass.cssVarList.overlayBackgroundColor,
       },
@@ -15379,7 +15400,6 @@ const DateFieldClass = compose(
       outlineWidth: { ...overlay },
       outlineColor: { ...overlay },
       outlineStyle: { ...overlay },
-      direction: { ...overlay },
     },
   }),
   draggableMixin,
@@ -15391,29 +15411,28 @@ const globalRefs$3 = getThemeRefs(globals);
 const shadowColor$1 = '#00000020';
 const { shadow } = globalRefs$3;
 
-const vars$4 = DateFieldClass.cssVarList;
+const vars$5 = DateFieldClass.cssVarList;
 
 const dateField = {
-  [vars$4.hostWidth]: refs.width,
-  [vars$4.hostDirection]: refs.direction,
-  [vars$4.iconMargin]: '0.375em',
-
-  [vars$4.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
-  [vars$4.overlay.backgroundColor]: refs.backgroundColor,
-  [vars$4.overlay.backdropBackgroundColor]: 'transparent',
-  [vars$4.overlay.backdropPointerEvents]: 'all',
-  [vars$4.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$1}, ${shadow.narrow.xl} ${shadowColor$1}`,
-  [vars$4.overlay.outlineWidth]: '0',
-  [vars$4.overlay.outlineColor]: 'transparent',
-  [vars$4.overlay.outlineStyle]: 'none',
-  [vars$4.overlay.direction]: refs.direction,
-  [vars$4.overlay.padding]: '0',
+  [vars$5.hostWidth]: refs.width,
+  [vars$5.hostDirection]: refs.direction,
+  [vars$5.iconMargin]: '0.375em',
+
+  [vars$5.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
+  [vars$5.overlay.backgroundColor]: refs.backgroundColor,
+  [vars$5.overlay.backdropBackgroundColor]: 'transparent',
+  [vars$5.overlay.backdropPointerEvents]: 'all',
+  [vars$5.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$1}, ${shadow.narrow.xl} ${shadowColor$1}`,
+  [vars$5.overlay.outlineWidth]: '0',
+  [vars$5.overlay.outlineColor]: 'transparent',
+  [vars$5.overlay.outlineStyle]: 'none',
+  [vars$5.overlay.padding]: '0',
 };
 
 var dateField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: dateField,
-  vars: vars$4
+  vars: vars$5
 });
 
 const activeableMixin = (superclass) =>
@@ -15431,7 +15450,7 @@ const activeableMixin = (superclass) =>
     }
   };
 
-const componentName$4 = getComponentName('list-item');
+const componentName$5 = getComponentName('list-item');
 
 const customMixin$1 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -15480,11 +15499,11 @@ const ListItemClass = compose(
   componentNameValidationMixin,
   customMixin$1,
   activeableMixin
-)(createBaseClass({ componentName: componentName$4, baseSelector: 'slot' }));
+)(createBaseClass({ componentName: componentName$5, baseSelector: 'slot' }));
 
-const componentName$3 = getComponentName('list');
+const componentName$4 = getComponentName('list');
 
-class RawList extends createBaseClass({ componentName: componentName$3, baseSelector: '.wrapper' }) {
+class RawList extends createBaseClass({ componentName: componentName$4, baseSelector: '.wrapper' }) {
   static get observedAttributes() {
     return ['variant', 'readonly'];
   }
@@ -15637,7 +15656,7 @@ const compVars = ListClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   { shadowColor: '#00000020' },
-  componentName$3
+  componentName$4
 );
 
 const { shadowColor } = helperRefs;
@@ -15677,7 +15696,7 @@ const list$1 = {
   },
 };
 
-const vars$3 = {
+const vars$4 = {
   ...compVars,
   ...helperVars,
 };
@@ -15685,49 +15704,49 @@ const vars$3 = {
 var list$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list$1,
-  vars: vars$3
+  vars: vars$4
 });
 
 const globalRefs$1 = getThemeRefs(globals);
 
-const vars$2 = ListItemClass.cssVarList;
+const vars$3 = ListItemClass.cssVarList;
 
 const list = {
-  [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
-  [vars$2.padding]: globalRefs$1.spacing.lg,
-  [vars$2.gap]: globalRefs$1.spacing.md,
-  [vars$2.borderStyle]: 'solid',
-  [vars$2.borderWidth]: globalRefs$1.border.xs,
-  [vars$2.borderColor]: globalRefs$1.colors.surface.main,
-  [vars$2.borderRadius]: globalRefs$1.radius.sm,
-  [vars$2.cursor]: 'pointer',
-  [vars$2.alignItems]: 'center',
-  [vars$2.flexDirection]: 'row',
-  [vars$2.transition]: 'border-color 0.2s, background-color 0.2s',
+  [vars$3.backgroundColor]: globalRefs$1.colors.surface.main,
+  [vars$3.padding]: globalRefs$1.spacing.lg,
+  [vars$3.gap]: globalRefs$1.spacing.md,
+  [vars$3.borderStyle]: 'solid',
+  [vars$3.borderWidth]: globalRefs$1.border.xs,
+  [vars$3.borderColor]: globalRefs$1.colors.surface.main,
+  [vars$3.borderRadius]: globalRefs$1.radius.sm,
+  [vars$3.cursor]: 'pointer',
+  [vars$3.alignItems]: 'center',
+  [vars$3.flexDirection]: 'row',
+  [vars$3.transition]: 'border-color 0.2s, background-color 0.2s',
 
   variant: {
     tile: {
-      [vars$2.alignItems]: 'flex-start',
-      [vars$2.flexDirection]: 'column',
-      [vars$2.borderColor]: globalRefs$1.colors.surface.light,
+      [vars$3.alignItems]: 'flex-start',
+      [vars$3.flexDirection]: 'column',
+      [vars$3.borderColor]: globalRefs$1.colors.surface.light,
     },
   },
 
   _hover: {
-    [vars$2.backgroundColor]: globalRefs$1.colors.surface.highlight,
+    [vars$3.backgroundColor]: globalRefs$1.colors.surface.highlight,
   },
 
   _active: {
-    [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
-    [vars$2.borderColor]: globalRefs$1.colors.primary.light,
-    [vars$2.outline]: `1px solid ${globalRefs$1.colors.primary.light}`,
+    [vars$3.backgroundColor]: globalRefs$1.colors.surface.main,
+    [vars$3.borderColor]: globalRefs$1.colors.primary.light,
+    [vars$3.outline]: `1px solid ${globalRefs$1.colors.primary.light}`,
   },
 };
 
 var listItem = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list,
-  vars: vars$2
+  vars: vars$3
 });
 
 const defaultValidateSchema = () => true;
@@ -15805,18 +15824,14 @@ const createDynamicDataMixin =
       init() {
         super.init?.();
 
-        if (rerenderAttrsList.length) {
-          observeAttributes(
-            this,
-            (attrs) => {
-              if (attrs.includes('data')) this.#handleDataAttr();
-              if (attrs.some((attr) => attr !== 'data')) this.#renderItems();
-            },
-            { includeAttrs: [...rerenderAttrsList, 'data'] }
-          );
-        } else {
-          this.#renderItems();
-        }
+        observeAttributes(
+          this,
+          (attrs) => {
+            if (attrs.includes('data')) this.#handleDataAttr();
+            else this.#renderItems();
+          },
+          { includeAttrs: [...rerenderAttrsList, 'data'] }
+        );
       }
 
       #handleDataAttr() {
@@ -15825,30 +15840,15 @@ const createDynamicDataMixin =
         if (!dataAttr) return;
 
         try {
-          this.#data = JSON.parse(dataAttr);
+          this.data = JSON.parse(dataAttr);
         } catch (e) {
           // eslint-disable-next-line no-console
           console.warn('Invalid JSON data', dataAttr);
         }
       }
-
-      attributeChangedCallback(name, oldValue, newValue) {
-        super.attributeChangedCallback?.(name, oldValue, newValue);
-
-        if (newValue === oldValue) return;
-
-        if (name === 'data') {
-          try {
-            this.data = JSON.parse(newValue);
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            console.warn('Invalid JSON data', newValue);
-          }
-        }
-      }
     };
 
-const componentName$2 = getComponentName('apps-list');
+const componentName$3 = getComponentName('apps-list');
 
 const limitAbbreviation = (str, limit = 2) =>
   str
@@ -15858,7 +15858,7 @@ const limitAbbreviation = (str, limit = 2) =>
     .map((s) => s[0]?.toUpperCase())
     .join('');
 
-const itemRenderer = ({ name, icon, url }, _, ref) => `
+const itemRenderer$1 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
     <descope-list-item>
     <descope-avatar
@@ -15901,7 +15901,7 @@ const AppsListClass = compose(
       },
     },
   }),
-  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
+  createDynamicDataMixin({ itemRenderer: itemRenderer$1, rerenderAttrsList: ['size'] }),
   draggableMixin,
   componentNameValidationMixin,
   customMixin
@@ -15910,7 +15910,7 @@ const AppsListClass = compose(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty'],
-    componentName: componentName$2,
+    componentName: componentName$3,
     style: () => `
       :host {
         width: 100%;
@@ -15935,33 +15935,33 @@ const AppsListClass = compose(
   })
 );
 
-const vars$1 = AppsListClass.cssVarList;
+const vars$2 = AppsListClass.cssVarList;
 const globalRefs = getThemeRefs(globals);
 
 const defaultHeight = '400px';
 
 const appsList = {
-  [vars$1.itemsFontWeight]: 'normal',
-  [vars$1.itemsTextAlign]: 'start',
-  [vars$1.hostDirection]: globalRefs.direction,
-  [vars$1.maxHeight]: defaultHeight,
+  [vars$2.itemsFontWeight]: 'normal',
+  [vars$2.itemsTextAlign]: 'start',
+  [vars$2.hostDirection]: globalRefs.direction,
+  [vars$2.maxHeight]: defaultHeight,
 
   _empty: {
-    [vars$1.minHeight]: defaultHeight,
+    [vars$2.minHeight]: defaultHeight,
   },
 
   size: {
     xs: {
-      [vars$1.itemsFontSize]: '14px',
+      [vars$2.itemsFontSize]: '14px',
     },
     sm: {
-      [vars$1.itemsFontSize]: '14px',
+      [vars$2.itemsFontSize]: '14px',
     },
     md: {
-      [vars$1.itemsFontSize]: '16px',
+      [vars$2.itemsFontSize]: '16px',
     },
     lg: {
-      [vars$1.itemsFontSize]: '20px',
+      [vars$2.itemsFontSize]: '20px',
     },
   },
 };
@@ -15969,6 +15969,127 @@ const appsList = {
 var appsList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: appsList,
+  vars: vars$2
+});
+
+const componentName$2 = getComponentName('scopes-list');
+const variants = ['checkbox', 'switch'];
+
+const itemRenderer = ({ id, desc, required = false }, _, ref) => {
+  const ComponentClass = ref.variant === 'checkbox' ? CheckboxClass : SwitchToggleClass;
+
+  return `
+    <${ComponentClass.componentName}
+      bordered="true"
+      size=${ref.size}
+      label="${desc}"
+      data-id="${id}"
+      readonly="${required || ref.isReadOnly}"
+      required="${required}"
+      checked="true"
+    ></${ComponentClass.componentName}>
+`;
+};
+
+class RawScopesList extends createBaseClass({ componentName: componentName$2, baseSelector: 'div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+
+      div {
+        display: flex;
+        flex-direction: column;
+      }
+
+		</style>
+    <div></div>
+		`;
+  }
+
+  get isReadOnly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  get size() {
+    return this.getAttribute('size') || 'sm';
+  }
+
+  get value() {
+    return Array.from(this.shadowRoot.querySelector('div').children).reduce(
+      (acc, el) => ({ ...acc, [el.getAttribute('data-id')]: el.checked }),
+      {}
+    );
+  }
+
+  get variant() {
+    const variant = this.getAttribute('variant');
+
+    return variants.includes(variant) ? variant : variants[0];
+  }
+}
+
+const ScopesListClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: [
+        { selector: () => ':host', property: 'direction' },
+        {
+          selector: () => CheckboxClass.componentName,
+          property: CheckboxClass.cssVarList.hostDirection,
+        },
+        {
+          selector: () => SwitchToggleClass.componentName,
+          property: SwitchToggleClass.cssVarList.hostDirection,
+        },
+      ],
+      gap: { selector: () => 'div', property: 'gap' },
+      requiredInputBorderColor: [
+        {
+          selector: `${CheckboxClass.componentName}[required="true"]`,
+          property: CheckboxClass.cssVarList.inputBorderColor,
+        },
+        {
+          selector: `${SwitchToggleClass.componentName}[required="true"]`,
+          property: SwitchToggleClass.cssVarList.inputBorderColor,
+        },
+      ],
+      requiredInputValueTextColor: [
+        {
+          selector: `${CheckboxClass.componentName}[required="true"]`,
+          property: CheckboxClass.cssVarList.inputValueTextColor,
+        },
+        {
+          selector: `${SwitchToggleClass.componentName}[required="true"]`,
+          property: SwitchToggleClass.cssVarList.knobColor,
+        },
+      ],
+    },
+  }),
+  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size', 'variant'] }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawScopesList);
+
+const vars$1 = ScopesListClass.cssVarList;
+
+const scopesList = {
+  [vars$1.requiredInputBorderColor]: theme$1._disabled[vars$N.borderColor],
+  [vars$1.requiredInputValueTextColor]: theme$1._disabled[vars$N.valueTextColor],
+  [vars$1.hostWidth]: '280px',
+  _fullWidth: {
+    [vars$1.hostWidth]: '100%',
+  },
+};
+
+var scopesList$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: scopesList,
   vars: vars$1
 });
 
@@ -16022,6 +16143,7 @@ const components = {
   list: list$2,
   listItem,
   appsList: appsList$1,
+  scopesList: scopesList$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -16034,7 +16156,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$O, components: vars };
+const themeVars = { globals: vars$P, components: vars };
 
 const colors = {
   surface: {
@@ -16413,6 +16535,7 @@ exports.RadioButtonClass = RadioButtonClass;
 exports.RadioGroupClass = RadioGroupClass;
 exports.RecaptchaClass = RecaptchaClass;
 exports.SamlGroupMappingsClass = SamlGroupMappingsClass;
+exports.ScopesListClass = ScopesListClass;
 exports.SwitchToggleClass = SwitchToggleClass;
 exports.TextAreaClass = TextAreaClass;
 exports.TextClass = TextClass;