@descope/web-components-ui 1.0.282 → 1.0.284

package/dist/cjs/index.cjs.js

@@ -2,6 +2,9 @@
 
 var merge = require('lodash.merge');
 var Color = require('color');
+require('@vaadin/avatar');
+require('@vaadin/icon');
+require('@vaadin/icons');
 
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
@@ -566,7 +569,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$z = getThemeVars(globals);
+const vars$A = getThemeVars(globals);
 
 const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
 
@@ -2505,7 +2508,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$H = getComponentName('button');
+const componentName$I = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -2543,7 +2546,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$i, label: label$a } = {
+const { host: host$j, label: label$a } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
 };
@@ -2555,7 +2558,7 @@ const ButtonClass = compose(
     mappings: {
       hostWidth: { property: 'width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$i, property: 'direction' },
+      hostDirection: { ...host$j, property: 'direction' },
       fontSize: {},
       fontFamily: {},
 
@@ -2607,7 +2610,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$H,
+    componentName: componentName$I,
   })
 );
 
@@ -2644,137 +2647,137 @@ loadingIndicatorStyles = `
 	}
 `;
 
-const globalRefs$i = getThemeRefs(globals);
-const compVars$4 = ButtonClass.cssVarList;
+const globalRefs$j = getThemeRefs(globals);
+const compVars$5 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$i.colors.primary,
-  secondary: globalRefs$i.colors.secondary,
-  success: globalRefs$i.colors.success,
-  error: globalRefs$i.colors.error,
-  surface: globalRefs$i.colors.surface,
+  primary: globalRefs$j.colors.primary,
+  secondary: globalRefs$j.colors.secondary,
+  success: globalRefs$j.colors.success,
+  error: globalRefs$j.colors.error,
+  surface: globalRefs$j.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$H);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$I);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
+  [compVars$5.fontFamily]: globalRefs$j.fonts.font1.family,
 
-  [compVars$4.cursor]: 'pointer',
-  [compVars$4.hostHeight]: '3em',
-  [compVars$4.hostWidth]: 'auto',
-  [compVars$4.hostDirection]: globalRefs$i.direction,
+  [compVars$5.cursor]: 'pointer',
+  [compVars$5.hostHeight]: '3em',
+  [compVars$5.hostWidth]: 'auto',
+  [compVars$5.hostDirection]: globalRefs$j.direction,
 
-  [compVars$4.borderRadius]: globalRefs$i.radius.sm,
-  [compVars$4.borderWidth]: globalRefs$i.border.xs,
-  [compVars$4.borderStyle]: 'solid',
-  [compVars$4.borderColor]: 'transparent',
+  [compVars$5.borderRadius]: globalRefs$j.radius.sm,
+  [compVars$5.borderWidth]: globalRefs$j.border.xs,
+  [compVars$5.borderStyle]: 'solid',
+  [compVars$5.borderColor]: 'transparent',
 
-  [compVars$4.labelSpacing]: '0.25em',
+  [compVars$5.labelSpacing]: '0.25em',
 
-  [compVars$4.textAlign]: 'center', // default text align center
+  [compVars$5.textAlign]: 'center', // default text align center
   textAlign: {
-    right: { [compVars$4.textAlign]: 'right' },
-    left: { [compVars$4.textAlign]: 'left' },
-    center: { [compVars$4.textAlign]: 'center' },
+    right: { [compVars$5.textAlign]: 'right' },
+    left: { [compVars$5.textAlign]: 'left' },
+    center: { [compVars$5.textAlign]: 'center' },
   },
 
-  [compVars$4.verticalPadding]: '1em',
+  [compVars$5.verticalPadding]: '1em',
 
-  [compVars$4.outlineWidth]: globals.border.sm,
-  [compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
-  [compVars$4.outlineStyle]: 'solid',
-  [compVars$4.outlineColor]: 'transparent',
+  [compVars$5.outlineWidth]: globals.border.sm,
+  [compVars$5.outlineOffset]: '0px', // keep `px` unit for external calc
+  [compVars$5.outlineStyle]: 'solid',
+  [compVars$5.outlineColor]: 'transparent',
 
   size: {
-    xs: { [compVars$4.fontSize]: '12px' },
-    sm: { [compVars$4.fontSize]: '14px' },
-    md: { [compVars$4.fontSize]: '16px' },
-    lg: { [compVars$4.fontSize]: '18px' },
+    xs: { [compVars$5.fontSize]: '12px' },
+    sm: { [compVars$5.fontSize]: '14px' },
+    md: { [compVars$5.fontSize]: '16px' },
+    lg: { [compVars$5.fontSize]: '18px' },
   },
 
   _square: {
-    [compVars$4.hostHeight]: '3em',
-    [compVars$4.hostWidth]: '3em',
-    [compVars$4.verticalPadding]: '0',
+    [compVars$5.hostHeight]: '3em',
+    [compVars$5.hostWidth]: '3em',
+    [compVars$5.verticalPadding]: '0',
   },
 
   _fullWidth: {
-    [compVars$4.hostWidth]: '100%',
+    [compVars$5.hostWidth]: '100%',
   },
 
   _loading: {
-    [compVars$4.cursor]: 'wait',
-    [compVars$4.labelTextColor]: helperRefs$3.main,
+    [compVars$5.cursor]: 'wait',
+    [compVars$5.labelTextColor]: helperRefs$3.main,
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$i.colors.surface.light,
-    [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$i.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$i.colors.surface.main,
+    [helperVars$3.main]: globalRefs$j.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$j.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$j.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$j.colors.surface.main,
   },
 
   variant: {
     contained: {
-      [compVars$4.labelTextColor]: helperRefs$3.contrast,
-      [compVars$4.backgroundColor]: helperRefs$3.main,
+      [compVars$5.labelTextColor]: helperRefs$3.contrast,
+      [compVars$5.backgroundColor]: helperRefs$3.main,
       _hover: {
-        [compVars$4.backgroundColor]: helperRefs$3.dark,
+        [compVars$5.backgroundColor]: helperRefs$3.dark,
         _loading: {
-          [compVars$4.backgroundColor]: helperRefs$3.main,
+          [compVars$5.backgroundColor]: helperRefs$3.main,
         },
       },
       _active: {
-        [compVars$4.backgroundColor]: helperRefs$3.main,
+        [compVars$5.backgroundColor]: helperRefs$3.main,
       },
     },
 
     outline: {
-      [compVars$4.labelTextColor]: helperRefs$3.main,
-      [compVars$4.borderColor]: helperRefs$3.main,
+      [compVars$5.labelTextColor]: helperRefs$3.main,
+      [compVars$5.borderColor]: helperRefs$3.main,
       _hover: {
-        [compVars$4.labelTextColor]: helperRefs$3.dark,
-        [compVars$4.borderColor]: helperRefs$3.dark,
+        [compVars$5.labelTextColor]: helperRefs$3.dark,
+        [compVars$5.borderColor]: helperRefs$3.dark,
       },
       _active: {
-        [compVars$4.labelTextColor]: helperRefs$3.main,
-        [compVars$4.borderColor]: helperRefs$3.main,
+        [compVars$5.labelTextColor]: helperRefs$3.main,
+        [compVars$5.borderColor]: helperRefs$3.main,
       },
     },
 
     link: {
-      [compVars$4.labelTextColor]: helperRefs$3.main,
+      [compVars$5.labelTextColor]: helperRefs$3.main,
       _hover: {
-        [compVars$4.labelTextColor]: helperRefs$3.dark,
-        [compVars$4.labelTextDecoration]: 'underline',
+        [compVars$5.labelTextColor]: helperRefs$3.dark,
+        [compVars$5.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars$4.labelTextColor]: helperRefs$3.main,
+        [compVars$5.labelTextColor]: helperRefs$3.main,
       },
     },
   },
 
   _focused: {
-    [compVars$4.outlineColor]: helperRefs$3.light,
+    [compVars$5.outlineColor]: helperRefs$3.light,
   },
 };
 
-const vars$y = {
-  ...compVars$4,
+const vars$z = {
+  ...compVars$5,
   ...helperVars$3,
 };
 
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$y
+  vars: vars$z
 });
 
 const {
-  host: host$h,
+  host: host$i,
   label: label$9,
   placeholder: placeholder$3,
   requiredIndicator: requiredIndicator$b,
@@ -2799,12 +2802,12 @@ const {
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host$h],
+  fontSize: [{}, host$i],
   fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
 
-  hostWidth: { ...host$h, property: 'width' },
-  hostMinWidth: { ...host$h, property: 'min-width' },
-  hostDirection: { ...host$h, property: 'direction' },
+  hostWidth: { ...host$i, property: 'width' },
+  hostMinWidth: { ...host$i, property: 'min-width' },
+  hostDirection: { ...host$i, property: 'direction' },
 
   inputBackgroundColor: { ...inputField$6, property: 'background-color' },
 
@@ -2978,7 +2981,7 @@ const resetInputLabelPosition = (name) => `
     }
 `;
 
-const componentName$G = getComponentName('text-field');
+const componentName$H = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -3028,27 +3031,27 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$G,
+    componentName: componentName$H,
   })
 );
 
-const componentName$F = getComponentName('input-wrapper');
-const globalRefs$h = getThemeRefs(globals);
+const componentName$G = getComponentName('input-wrapper');
+const globalRefs$i = getThemeRefs(globals);
 
-const [theme$1, refs, vars$x] = createHelperVars(
+const [theme$1, refs, vars$y] = createHelperVars(
   {
-    labelTextColor: globalRefs$h.colors.surface.dark,
-    valueTextColor: globalRefs$h.colors.surface.contrast,
-    placeholderTextColor: globalRefs$h.colors.surface.dark,
+    labelTextColor: globalRefs$i.colors.surface.dark,
+    valueTextColor: globalRefs$i.colors.surface.contrast,
+    placeholderTextColor: globalRefs$i.colors.surface.dark,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$h.colors.error.main,
-    helperTextColor: globalRefs$h.colors.surface.dark,
+    errorMessageTextColor: globalRefs$i.colors.error.main,
+    helperTextColor: globalRefs$i.colors.surface.dark,
 
-    borderWidth: globalRefs$h.border.xs,
-    borderRadius: globalRefs$h.radius.xs,
+    borderWidth: globalRefs$i.border.xs,
+    borderRadius: globalRefs$i.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$h.border.sm,
+    outlineWidth: globalRefs$i.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -3059,11 +3062,11 @@ const [theme$1, refs, vars$x] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$h.colors.surface.main,
+    backgroundColor: globalRefs$i.colors.surface.main,
 
-    fontFamily: globalRefs$h.fonts.font1.family,
+    fontFamily: globalRefs$i.fonts.font1.family,
 
-    direction: globalRefs$h.direction,
+    direction: globalRefs$i.direction,
 
     overlayOpacity: '0.3',
 
@@ -3079,69 +3082,69 @@ const [theme$1, refs, vars$x] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$h.colors.surface.light,
+      outlineColor: globalRefs$i.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$h.colors.error.main,
+        outlineColor: globalRefs$i.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$h.border.xs,
-      borderColor: globalRefs$h.colors.surface.light,
+      outlineWidth: globalRefs$i.border.xs,
+      borderColor: globalRefs$i.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$h.colors.error.main,
+        borderColor: globalRefs$i.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$h.colors.surface.light,
-      borderColor: globalRefs$h.colors.surface.light,
-      valueTextColor: globalRefs$h.colors.surface.light,
-      placeholderTextColor: globalRefs$h.colors.surface.light,
-      helperTextColor: globalRefs$h.colors.surface.light,
-      backgroundColor: globalRefs$h.colors.surface.main,
+      labelTextColor: globalRefs$i.colors.surface.light,
+      borderColor: globalRefs$i.colors.surface.light,
+      valueTextColor: globalRefs$i.colors.surface.light,
+      placeholderTextColor: globalRefs$i.colors.surface.light,
+      helperTextColor: globalRefs$i.colors.surface.light,
+      backgroundColor: globalRefs$i.colors.surface.main,
     },
   },
-  componentName$F
+  componentName$G
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$x
+  vars: vars$y
 });
 
-const vars$w = TextFieldClass.cssVarList;
+const vars$x = TextFieldClass.cssVarList;
 
 const textField = {
-  [vars$w.hostWidth]: refs.width,
-  [vars$w.hostMinWidth]: refs.minWidth,
-  [vars$w.hostDirection]: refs.direction,
-  [vars$w.fontSize]: refs.fontSize,
-  [vars$w.fontFamily]: refs.fontFamily,
-  [vars$w.labelTextColor]: refs.labelTextColor,
-  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$w.inputValueTextColor]: refs.valueTextColor,
-  [vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$w.inputBorderWidth]: refs.borderWidth,
-  [vars$w.inputBorderStyle]: refs.borderStyle,
-  [vars$w.inputBorderColor]: refs.borderColor,
-  [vars$w.inputBorderRadius]: refs.borderRadius,
-  [vars$w.inputOutlineWidth]: refs.outlineWidth,
-  [vars$w.inputOutlineStyle]: refs.outlineStyle,
-  [vars$w.inputOutlineColor]: refs.outlineColor,
-  [vars$w.inputOutlineOffset]: refs.outlineOffset,
-  [vars$w.inputBackgroundColor]: refs.backgroundColor,
-  [vars$w.inputHeight]: refs.inputHeight,
-  [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$w.helperTextColor]: refs.helperTextColor,
+  [vars$x.hostWidth]: refs.width,
+  [vars$x.hostMinWidth]: refs.minWidth,
+  [vars$x.hostDirection]: refs.direction,
+  [vars$x.fontSize]: refs.fontSize,
+  [vars$x.fontFamily]: refs.fontFamily,
+  [vars$x.labelTextColor]: refs.labelTextColor,
+  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$x.inputValueTextColor]: refs.valueTextColor,
+  [vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$x.inputBorderWidth]: refs.borderWidth,
+  [vars$x.inputBorderStyle]: refs.borderStyle,
+  [vars$x.inputBorderColor]: refs.borderColor,
+  [vars$x.inputBorderRadius]: refs.borderRadius,
+  [vars$x.inputOutlineWidth]: refs.outlineWidth,
+  [vars$x.inputOutlineStyle]: refs.outlineStyle,
+  [vars$x.inputOutlineColor]: refs.outlineColor,
+  [vars$x.inputOutlineOffset]: refs.outlineOffset,
+  [vars$x.inputBackgroundColor]: refs.backgroundColor,
+  [vars$x.inputHeight]: refs.inputHeight,
+  [vars$x.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$x.helperTextColor]: refs.helperTextColor,
   textAlign: {
-    right: { [vars$w.inputTextAlign]: 'right' },
-    left: { [vars$w.inputTextAlign]: 'left' },
-    center: { [vars$w.inputTextAlign]: 'center' },
+    right: { [vars$x.inputTextAlign]: 'right' },
+    left: { [vars$x.inputTextAlign]: 'left' },
+    center: { [vars$x.inputTextAlign]: 'center' },
   },
 };
 
@@ -3149,7 +3152,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textField,
   textField: textField,
-  vars: vars$w
+  vars: vars$x
 });
 
 const passwordDraggableMixin = (superclass) =>
@@ -3186,10 +3189,10 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$E = getComponentName('password');
+const componentName$F = getComponentName('password');
 
 const {
-  host: host$g,
+  host: host$h,
   inputField: inputField$5,
   inputElement: inputElement$2,
   inputElementPlaceholder,
@@ -3215,10 +3218,10 @@ const {
 const PasswordClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$g, property: 'width' },
-      hostMinWidth: { ...host$g, property: 'min-width' },
-      hostDirection: { ...host$g, property: 'direction' },
-      fontSize: [{}, host$g],
+      hostWidth: { ...host$h, property: 'width' },
+      hostMinWidth: { ...host$h, property: 'min-width' },
+      hostDirection: { ...host$h, property: 'direction' },
+      fontSize: [{}, host$h],
       fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
       inputHeight: { ...inputField$5, property: 'height' },
       inputHorizontalPadding: [
@@ -3315,46 +3318,46 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
-const globalRefs$g = getThemeRefs(globals);
-const vars$v = PasswordClass.cssVarList;
+const globalRefs$h = getThemeRefs(globals);
+const vars$w = PasswordClass.cssVarList;
 
 const password = {
-  [vars$v.hostWidth]: refs.width,
-  [vars$v.hostDirection]: refs.direction,
-  [vars$v.fontSize]: refs.fontSize,
-  [vars$v.fontFamily]: refs.fontFamily,
-  [vars$v.labelTextColor]: refs.labelTextColor,
-  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$v.inputHeight]: refs.inputHeight,
-  [vars$v.inputBackgroundColor]: refs.backgroundColor,
-  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$v.inputValueTextColor]: refs.valueTextColor,
-  [vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$v.inputBorderWidth]: refs.borderWidth,
-  [vars$v.inputBorderStyle]: refs.borderStyle,
-  [vars$v.inputBorderColor]: refs.borderColor,
-  [vars$v.inputBorderRadius]: refs.borderRadius,
-  [vars$v.inputOutlineWidth]: refs.outlineWidth,
-  [vars$v.inputOutlineStyle]: refs.outlineStyle,
-  [vars$v.inputOutlineColor]: refs.outlineColor,
-  [vars$v.inputOutlineOffset]: refs.outlineOffset,
-  [vars$v.revealButtonOffset]: globalRefs$g.spacing.md,
-  [vars$v.revealButtonSize]: refs.toggleButtonSize,
-  [vars$v.revealButtonColor]: refs.placeholderTextColor,
+  [vars$w.hostWidth]: refs.width,
+  [vars$w.hostDirection]: refs.direction,
+  [vars$w.fontSize]: refs.fontSize,
+  [vars$w.fontFamily]: refs.fontFamily,
+  [vars$w.labelTextColor]: refs.labelTextColor,
+  [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$w.inputHeight]: refs.inputHeight,
+  [vars$w.inputBackgroundColor]: refs.backgroundColor,
+  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$w.inputValueTextColor]: refs.valueTextColor,
+  [vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$w.inputBorderWidth]: refs.borderWidth,
+  [vars$w.inputBorderStyle]: refs.borderStyle,
+  [vars$w.inputBorderColor]: refs.borderColor,
+  [vars$w.inputBorderRadius]: refs.borderRadius,
+  [vars$w.inputOutlineWidth]: refs.outlineWidth,
+  [vars$w.inputOutlineStyle]: refs.outlineStyle,
+  [vars$w.inputOutlineColor]: refs.outlineColor,
+  [vars$w.inputOutlineOffset]: refs.outlineOffset,
+  [vars$w.revealButtonOffset]: globalRefs$h.spacing.md,
+  [vars$w.revealButtonSize]: refs.toggleButtonSize,
+  [vars$w.revealButtonColor]: refs.placeholderTextColor,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: password,
-  vars: vars$v
+  vars: vars$w
 });
 
-const componentName$D = getComponentName('number-field');
+const componentName$E = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -3380,43 +3383,43 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
-const vars$u = NumberFieldClass.cssVarList;
+const vars$v = NumberFieldClass.cssVarList;
 
 const numberField = {
-  [vars$u.hostWidth]: refs.width,
-  [vars$u.hostMinWidth]: refs.minWidth,
-  [vars$u.hostDirection]: refs.direction,
-  [vars$u.fontSize]: refs.fontSize,
-  [vars$u.fontFamily]: refs.fontFamily,
-  [vars$u.labelTextColor]: refs.labelTextColor,
-  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$u.inputValueTextColor]: refs.valueTextColor,
-  [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$u.inputBorderWidth]: refs.borderWidth,
-  [vars$u.inputBorderStyle]: refs.borderStyle,
-  [vars$u.inputBorderColor]: refs.borderColor,
-  [vars$u.inputBorderRadius]: refs.borderRadius,
-  [vars$u.inputOutlineWidth]: refs.outlineWidth,
-  [vars$u.inputOutlineStyle]: refs.outlineStyle,
-  [vars$u.inputOutlineColor]: refs.outlineColor,
-  [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.inputBackgroundColor]: refs.backgroundColor,
-  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$u.inputHeight]: refs.inputHeight,
+  [vars$v.hostWidth]: refs.width,
+  [vars$v.hostMinWidth]: refs.minWidth,
+  [vars$v.hostDirection]: refs.direction,
+  [vars$v.fontSize]: refs.fontSize,
+  [vars$v.fontFamily]: refs.fontFamily,
+  [vars$v.labelTextColor]: refs.labelTextColor,
+  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$v.inputValueTextColor]: refs.valueTextColor,
+  [vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$v.inputBorderWidth]: refs.borderWidth,
+  [vars$v.inputBorderStyle]: refs.borderStyle,
+  [vars$v.inputBorderColor]: refs.borderColor,
+  [vars$v.inputBorderRadius]: refs.borderRadius,
+  [vars$v.inputOutlineWidth]: refs.outlineWidth,
+  [vars$v.inputOutlineStyle]: refs.outlineStyle,
+  [vars$v.inputOutlineColor]: refs.outlineColor,
+  [vars$v.inputOutlineOffset]: refs.outlineOffset,
+  [vars$v.inputBackgroundColor]: refs.backgroundColor,
+  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$v.inputHeight]: refs.inputHeight,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: numberField,
-  vars: vars$u
+  vars: vars$v
 });
 
-const componentName$C = getComponentName('email-field');
+const componentName$D = getComponentName('email-field');
 
 const customMixin$6 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -3451,46 +3454,46 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$C,
+    componentName: componentName$D,
   })
 );
 
-const vars$t = EmailFieldClass.cssVarList;
+const vars$u = EmailFieldClass.cssVarList;
 
 const emailField = {
-  [vars$t.hostWidth]: refs.width,
-  [vars$t.hostMinWidth]: refs.minWidth,
-  [vars$t.hostDirection]: refs.direction,
-  [vars$t.fontSize]: refs.fontSize,
-  [vars$t.fontFamily]: refs.fontFamily,
-  [vars$t.labelTextColor]: refs.labelTextColor,
-  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$t.inputValueTextColor]: refs.valueTextColor,
-  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$t.inputBorderWidth]: refs.borderWidth,
-  [vars$t.inputBorderStyle]: refs.borderStyle,
-  [vars$t.inputBorderColor]: refs.borderColor,
-  [vars$t.inputBorderRadius]: refs.borderRadius,
-  [vars$t.inputOutlineWidth]: refs.outlineWidth,
-  [vars$t.inputOutlineStyle]: refs.outlineStyle,
-  [vars$t.inputOutlineColor]: refs.outlineColor,
-  [vars$t.inputOutlineOffset]: refs.outlineOffset,
-  [vars$t.inputBackgroundColor]: refs.backgroundColor,
-  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$t.inputHeight]: refs.inputHeight,
+  [vars$u.hostWidth]: refs.width,
+  [vars$u.hostMinWidth]: refs.minWidth,
+  [vars$u.hostDirection]: refs.direction,
+  [vars$u.fontSize]: refs.fontSize,
+  [vars$u.fontFamily]: refs.fontFamily,
+  [vars$u.labelTextColor]: refs.labelTextColor,
+  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$u.inputValueTextColor]: refs.valueTextColor,
+  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$u.inputBorderWidth]: refs.borderWidth,
+  [vars$u.inputBorderStyle]: refs.borderStyle,
+  [vars$u.inputBorderColor]: refs.borderColor,
+  [vars$u.inputBorderRadius]: refs.borderRadius,
+  [vars$u.inputOutlineWidth]: refs.outlineWidth,
+  [vars$u.inputOutlineStyle]: refs.outlineStyle,
+  [vars$u.inputOutlineColor]: refs.outlineColor,
+  [vars$u.inputOutlineOffset]: refs.outlineOffset,
+  [vars$u.inputBackgroundColor]: refs.backgroundColor,
+  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$u.inputHeight]: refs.inputHeight,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: emailField,
-  vars: vars$t
+  vars: vars$u
 });
 
-const componentName$B = getComponentName('text-area');
+const componentName$C = getComponentName('text-area');
 
 const {
-  host: host$f,
+  host: host$g,
   label: label$7,
   placeholder: placeholder$2,
   inputField: inputField$4,
@@ -3512,10 +3515,10 @@ const {
 const TextAreaClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$f, property: 'width' },
-      hostMinWidth: { ...host$f, property: 'min-width' },
-      hostDirection: { ...host$f, property: 'direction' },
-      fontSize: [host$f, textArea$2],
+      hostWidth: { ...host$g, property: 'width' },
+      hostMinWidth: { ...host$g, property: 'min-width' },
+      hostDirection: { ...host$g, property: 'direction' },
+      fontSize: [host$g, textArea$2],
       fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
       labelTextColor: [
         { ...label$7, property: 'color' },
@@ -3563,49 +3566,49 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$B,
+    componentName: componentName$C,
   })
 );
 
-const vars$s = TextAreaClass.cssVarList;
+const vars$t = TextAreaClass.cssVarList;
 
 const textArea = {
-  [vars$s.hostWidth]: refs.width,
-  [vars$s.hostMinWidth]: refs.minWidth,
-  [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.inputBackgroundColor]: refs.backgroundColor,
-  [vars$s.inputValueTextColor]: refs.valueTextColor,
-  [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$s.inputBorderRadius]: refs.borderRadius,
-  [vars$s.inputBorderWidth]: refs.borderWidth,
-  [vars$s.inputBorderStyle]: refs.borderStyle,
-  [vars$s.inputBorderColor]: refs.borderColor,
-  [vars$s.inputOutlineWidth]: refs.outlineWidth,
-  [vars$s.inputOutlineStyle]: refs.outlineStyle,
-  [vars$s.inputOutlineColor]: refs.outlineColor,
-  [vars$s.inputOutlineOffset]: refs.outlineOffset,
-  [vars$s.inputResizeType]: 'vertical',
-  [vars$s.inputMinHeight]: '5em',
+  [vars$t.hostWidth]: refs.width,
+  [vars$t.hostMinWidth]: refs.minWidth,
+  [vars$t.hostDirection]: refs.direction,
+  [vars$t.fontSize]: refs.fontSize,
+  [vars$t.fontFamily]: refs.fontFamily,
+  [vars$t.labelTextColor]: refs.labelTextColor,
+  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$t.inputBackgroundColor]: refs.backgroundColor,
+  [vars$t.inputValueTextColor]: refs.valueTextColor,
+  [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$t.inputBorderRadius]: refs.borderRadius,
+  [vars$t.inputBorderWidth]: refs.borderWidth,
+  [vars$t.inputBorderStyle]: refs.borderStyle,
+  [vars$t.inputBorderColor]: refs.borderColor,
+  [vars$t.inputOutlineWidth]: refs.outlineWidth,
+  [vars$t.inputOutlineStyle]: refs.outlineStyle,
+  [vars$t.inputOutlineColor]: refs.outlineColor,
+  [vars$t.inputOutlineOffset]: refs.outlineOffset,
+  [vars$t.inputResizeType]: 'vertical',
+  [vars$t.inputMinHeight]: '5em',
   textAlign: {
-    right: { [vars$s.inputTextAlign]: 'right' },
-    left: { [vars$s.inputTextAlign]: 'left' },
-    center: { [vars$s.inputTextAlign]: 'center' },
+    right: { [vars$t.inputTextAlign]: 'right' },
+    left: { [vars$t.inputTextAlign]: 'left' },
+    center: { [vars$t.inputTextAlign]: 'center' },
   },
 
   _readonly: {
-    [vars$s.inputResizeType]: 'none',
+    [vars$t.inputResizeType]: 'none',
   },
 };
 
 var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textArea,
-  vars: vars$s
+  vars: vars$t
 });
 
 const createBaseInputClass = (...args) =>
@@ -3616,9 +3619,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$A = getComponentName('boolean-field-internal');
+const componentName$B = getComponentName('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -3627,14 +3630,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$A}
+				<${componentName$B}
 					tabindex="-1"
 					slot="input"
-				></${componentName$A}>
+				></${componentName$B}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$A);
+      this.inputElement = this.shadowRoot.querySelector(componentName$B);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -3704,10 +3707,10 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$z = getComponentName('checkbox');
+const componentName$A = getComponentName('checkbox');
 
 const {
-  host: host$e,
+  host: host$f,
   component: component$1,
   checkboxElement,
   checkboxSurface,
@@ -3729,10 +3732,10 @@ const {
 const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$e, property: 'width' },
-      hostDirection: { ...host$e, property: 'direction' },
+      hostWidth: { ...host$f, property: 'width' },
+      hostDirection: { ...host$f, property: 'direction' },
 
-      fontSize: [host$e, checkboxElement, checkboxLabel$1],
+      fontSize: [host$f, checkboxElement, checkboxLabel$1],
       fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
@@ -3810,54 +3813,54 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$z,
+    componentName: componentName$A,
   })
 );
 
-const vars$r = CheckboxClass.cssVarList;
+const vars$s = CheckboxClass.cssVarList;
 const checkboxSize = '1.35em';
 
 const checkbox = {
-  [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.labelFontWeight]: '400',
-  [vars$r.labelLineHeight]: checkboxSize,
-  [vars$r.labelSpacing]: '1em',
-  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$r.inputOutlineWidth]: refs.outlineWidth,
-  [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.inputOutlineColor]: refs.outlineColor,
-  [vars$r.inputOutlineStyle]: refs.outlineStyle,
-  [vars$r.inputBorderRadius]: refs.borderRadius,
-  [vars$r.inputBorderColor]: refs.borderColor,
-  [vars$r.inputBorderWidth]: refs.borderWidth,
-  [vars$r.inputBorderStyle]: refs.borderStyle,
-  [vars$r.inputBackgroundColor]: refs.backgroundColor,
-  [vars$r.inputSize]: checkboxSize,
+  [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.labelFontWeight]: '400',
+  [vars$s.labelLineHeight]: checkboxSize,
+  [vars$s.labelSpacing]: '1em',
+  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$s.inputOutlineWidth]: refs.outlineWidth,
+  [vars$s.inputOutlineOffset]: refs.outlineOffset,
+  [vars$s.inputOutlineColor]: refs.outlineColor,
+  [vars$s.inputOutlineStyle]: refs.outlineStyle,
+  [vars$s.inputBorderRadius]: refs.borderRadius,
+  [vars$s.inputBorderColor]: refs.borderColor,
+  [vars$s.inputBorderWidth]: refs.borderWidth,
+  [vars$s.inputBorderStyle]: refs.borderStyle,
+  [vars$s.inputBackgroundColor]: refs.backgroundColor,
+  [vars$s.inputSize]: checkboxSize,
 
   _checked: {
-    [vars$r.inputValueTextColor]: refs.valueTextColor,
+    [vars$s.inputValueTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$r.labelTextColor]: refs.labelTextColor,
+    [vars$s.labelTextColor]: refs.labelTextColor,
   },
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: checkbox,
-  vars: vars$r
+  vars: vars$s
 });
 
-const componentName$y = getComponentName('switch-toggle');
+const componentName$z = getComponentName('switch-toggle');
 
 const {
-  host: host$d,
+  host: host$e,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
@@ -3879,8 +3882,8 @@ const {
 const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$d, property: 'width' },
-      hostDirection: { ...host$d, property: 'direction' },
+      hostWidth: { ...host$e, property: 'width' },
+      hostDirection: { ...host$e, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
       fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
@@ -3986,82 +3989,82 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
-const globalRefs$f = getThemeRefs(globals);
-const vars$q = SwitchToggleClass.cssVarList;
+const globalRefs$g = getThemeRefs(globals);
+const vars$r = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-  [vars$q.hostWidth]: refs.width,
-  [vars$q.hostDirection]: refs.direction,
-  [vars$q.fontSize]: refs.fontSize,
-  [vars$q.fontFamily]: refs.fontFamily,
-
-  [vars$q.inputOutlineWidth]: refs.outlineWidth,
-  [vars$q.inputOutlineOffset]: refs.outlineOffset,
-  [vars$q.inputOutlineColor]: refs.outlineColor,
-  [vars$q.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$q.trackBorderStyle]: refs.borderStyle,
-  [vars$q.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$q.trackBorderColor]: refs.borderColor,
-  [vars$q.trackBackgroundColor]: refs.backgroundColor,
-  [vars$q.trackBorderRadius]: globalRefs$f.radius.md,
-  [vars$q.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$q.trackHeight]: checkboxHeight,
-
-  [vars$q.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$q.knobRadius]: '50%',
-  [vars$q.knobTopOffset]: '1px',
-  [vars$q.knobLeftOffset]: knobMargin,
-  [vars$q.knobColor]: refs.labelTextColor,
-  [vars$q.knobTransitionDuration]: '0.3s',
-
-  [vars$q.labelTextColor]: refs.labelTextColor,
-  [vars$q.labelFontWeight]: '400',
-  [vars$q.labelLineHeight]: '1.35em',
-  [vars$q.labelSpacing]: '1em',
-  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$r.hostWidth]: refs.width,
+  [vars$r.hostDirection]: refs.direction,
+  [vars$r.fontSize]: refs.fontSize,
+  [vars$r.fontFamily]: refs.fontFamily,
+
+  [vars$r.inputOutlineWidth]: refs.outlineWidth,
+  [vars$r.inputOutlineOffset]: refs.outlineOffset,
+  [vars$r.inputOutlineColor]: refs.outlineColor,
+  [vars$r.inputOutlineStyle]: refs.outlineStyle,
+
+  [vars$r.trackBorderStyle]: refs.borderStyle,
+  [vars$r.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$r.trackBorderColor]: refs.borderColor,
+  [vars$r.trackBackgroundColor]: refs.backgroundColor,
+  [vars$r.trackBorderRadius]: globalRefs$g.radius.md,
+  [vars$r.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$r.trackHeight]: checkboxHeight,
+
+  [vars$r.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$r.knobRadius]: '50%',
+  [vars$r.knobTopOffset]: '1px',
+  [vars$r.knobLeftOffset]: knobMargin,
+  [vars$r.knobColor]: refs.labelTextColor,
+  [vars$r.knobTransitionDuration]: '0.3s',
+
+  [vars$r.labelTextColor]: refs.labelTextColor,
+  [vars$r.labelFontWeight]: '400',
+  [vars$r.labelLineHeight]: '1.35em',
+  [vars$r.labelSpacing]: '1em',
+  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$q.trackBorderColor]: refs.borderColor,
-    [vars$q.knobLeftOffset]: `calc(100% - var(${vars$q.knobSize}) - ${knobMargin})`,
-    [vars$q.knobColor]: refs.valueTextColor,
-    [vars$q.knobTextColor]: refs.valueTextColor,
+    [vars$r.trackBorderColor]: refs.borderColor,
+    [vars$r.knobLeftOffset]: `calc(100% - var(${vars$r.knobSize}) - ${knobMargin})`,
+    [vars$r.knobColor]: refs.valueTextColor,
+    [vars$r.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$q.knobColor]: globalRefs$f.colors.surface.light,
-    [vars$q.trackBorderColor]: globalRefs$f.colors.surface.light,
-    [vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
-    [vars$q.labelTextColor]: refs.labelTextColor,
+    [vars$r.knobColor]: globalRefs$g.colors.surface.light,
+    [vars$r.trackBorderColor]: globalRefs$g.colors.surface.light,
+    [vars$r.trackBackgroundColor]: globalRefs$g.colors.surface.main,
+    [vars$r.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$q.knobColor]: globalRefs$f.colors.surface.light,
-      [vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
+      [vars$r.knobColor]: globalRefs$g.colors.surface.light,
+      [vars$r.trackBackgroundColor]: globalRefs$g.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$q.trackBorderColor]: globalRefs$f.colors.error.main,
-    [vars$q.knobColor]: globalRefs$f.colors.error.main,
+    [vars$r.trackBorderColor]: globalRefs$g.colors.error.main,
+    [vars$r.knobColor]: globalRefs$g.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$q
+  vars: vars$r
 });
 
-const componentName$x = getComponentName('container');
+const componentName$y = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$x, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$y, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -4114,9 +4117,9 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-const globalRefs$e = getThemeRefs(globals);
+const globalRefs$f = getThemeRefs(globals);
 
-const compVars$3 = ContainerClass.cssVarList;
+const compVars$4 = ContainerClass.cssVarList;
 
 const verticalAlignment = {
   start: { verticalAlignment: 'start' },
@@ -4136,7 +4139,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$x
+  componentName$y
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -4144,31 +4147,31 @@ const { shadowColor: shadowColor$1 } = helperRefs$2;
 const container = {
   ...helperTheme$2,
 
-  [compVars$3.hostWidth]: '100%',
-  [compVars$3.boxShadow]: 'none',
-  [compVars$3.backgroundColor]: globalRefs$e.colors.surface.main,
-  [compVars$3.color]: globalRefs$e.colors.surface.contrast,
-  [compVars$3.borderRadius]: '0px',
-  [compVars$3.hostDirection]: globalRefs$e.direction,
+  [compVars$4.hostWidth]: '100%',
+  [compVars$4.boxShadow]: 'none',
+  [compVars$4.backgroundColor]: globalRefs$f.colors.surface.main,
+  [compVars$4.color]: globalRefs$f.colors.surface.contrast,
+  [compVars$4.borderRadius]: '0px',
+  [compVars$4.hostDirection]: globalRefs$f.direction,
 
   verticalPadding: {
-    sm: { [compVars$3.verticalPadding]: '5px' },
-    md: { [compVars$3.verticalPadding]: '10px' },
-    lg: { [compVars$3.verticalPadding]: '20px' },
+    sm: { [compVars$4.verticalPadding]: '5px' },
+    md: { [compVars$4.verticalPadding]: '10px' },
+    lg: { [compVars$4.verticalPadding]: '20px' },
   },
 
   horizontalPadding: {
-    sm: { [compVars$3.horizontalPadding]: '5px' },
-    md: { [compVars$3.horizontalPadding]: '10px' },
-    lg: { [compVars$3.horizontalPadding]: '20px' },
+    sm: { [compVars$4.horizontalPadding]: '5px' },
+    md: { [compVars$4.horizontalPadding]: '10px' },
+    lg: { [compVars$4.horizontalPadding]: '20px' },
   },
 
   direction: {
     row: {
-      [compVars$3.flexDirection]: 'row',
-      [compVars$3.alignItems]: helperRefs$2.verticalAlignment,
-      [compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
-      [compVars$3.flexWrap]: 'wrap',
+      [compVars$4.flexDirection]: 'row',
+      [compVars$4.alignItems]: helperRefs$2.verticalAlignment,
+      [compVars$4.justifyContent]: helperRefs$2.horizontalAlignment,
+      [compVars$4.flexWrap]: 'wrap',
       horizontalAlignment: {
         spaceBetween: {
           [helperVars$2.horizontalAlignment]: 'space-between',
@@ -4176,9 +4179,9 @@ const container = {
       },
     },
     column: {
-      [compVars$3.flexDirection]: 'column',
-      [compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
-      [compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
+      [compVars$4.flexDirection]: 'column',
+      [compVars$4.alignItems]: helperRefs$2.horizontalAlignment,
+      [compVars$4.justifyContent]: helperRefs$2.verticalAlignment,
       verticalAlignment: {
         spaceBetween: {
           [helperVars$2.verticalAlignment]: 'space-between',
@@ -4188,49 +4191,49 @@ const container = {
   },
 
   spaceBetween: {
-    sm: { [compVars$3.gap]: '10px' },
-    md: { [compVars$3.gap]: '20px' },
-    lg: { [compVars$3.gap]: '30px' },
+    sm: { [compVars$4.gap]: '10px' },
+    md: { [compVars$4.gap]: '20px' },
+    lg: { [compVars$4.gap]: '30px' },
   },
 
   shadow: {
     sm: {
-      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.md} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.md} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide['2xl']} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$3.borderRadius]: globalRefs$e.radius.sm },
-    md: { [compVars$3.borderRadius]: globalRefs$e.radius.md },
-    lg: { [compVars$3.borderRadius]: globalRefs$e.radius.lg },
-    xl: { [compVars$3.borderRadius]: globalRefs$e.radius.xl },
-    '2xl': { [compVars$3.borderRadius]: globalRefs$e.radius['2xl'] },
-    '3xl': { [compVars$3.borderRadius]: globalRefs$e.radius['3xl'] },
+    sm: { [compVars$4.borderRadius]: globalRefs$f.radius.sm },
+    md: { [compVars$4.borderRadius]: globalRefs$f.radius.md },
+    lg: { [compVars$4.borderRadius]: globalRefs$f.radius.lg },
+    xl: { [compVars$4.borderRadius]: globalRefs$f.radius.xl },
+    '2xl': { [compVars$4.borderRadius]: globalRefs$f.radius['2xl'] },
+    '3xl': { [compVars$4.borderRadius]: globalRefs$f.radius['3xl'] },
   },
 };
 
-const vars$p = {
-  ...compVars$3,
+const vars$q = {
+  ...compVars$4,
   ...helperVars$2,
 };
 
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$p
+  vars: vars$q
 });
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4283,71 +4286,71 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$w = getComponentName('logo');
+const componentName$x = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$w,
+  componentName: componentName$x,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$o = LogoClass.cssVarList;
+const vars$p = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$o
+  vars: vars$p
 });
 
-const componentName$v = getComponentName('totp-image');
+const componentName$w = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$v,
+  componentName: componentName$w,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$n = TotpImageClass.cssVarList;
+const vars$o = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$n
+  vars: vars$o
 });
 
-const componentName$u = getComponentName('notp-image');
+const componentName$v = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$u,
+  componentName: componentName$v,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$m = NotpImageClass.cssVarList;
+const vars$n = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$m
+  vars: vars$n
 });
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$t = getComponentName('text');
+const componentName$u = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -4407,99 +4410,99 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const globalRefs$d = getThemeRefs(globals);
-const vars$l = TextClass.cssVarList;
+const globalRefs$e = getThemeRefs(globals);
+const vars$m = TextClass.cssVarList;
 
 const text$2 = {
-  [vars$l.hostDirection]: globalRefs$d.direction,
-  [vars$l.textLineHeight]: '1.35em',
-  [vars$l.textAlign]: 'left',
-  [vars$l.textColor]: globalRefs$d.colors.surface.dark,
+  [vars$m.hostDirection]: globalRefs$e.direction,
+  [vars$m.textLineHeight]: '1.35em',
+  [vars$m.textAlign]: 'left',
+  [vars$m.textColor]: globalRefs$e.colors.surface.dark,
   variant: {
     h1: {
-      [vars$l.fontSize]: globalRefs$d.typography.h1.size,
-      [vars$l.fontWeight]: globalRefs$d.typography.h1.weight,
-      [vars$l.fontFamily]: globalRefs$d.typography.h1.font,
+      [vars$m.fontSize]: globalRefs$e.typography.h1.size,
+      [vars$m.fontWeight]: globalRefs$e.typography.h1.weight,
+      [vars$m.fontFamily]: globalRefs$e.typography.h1.font,
     },
     h2: {
-      [vars$l.fontSize]: globalRefs$d.typography.h2.size,
-      [vars$l.fontWeight]: globalRefs$d.typography.h2.weight,
-      [vars$l.fontFamily]: globalRefs$d.typography.h2.font,
+      [vars$m.fontSize]: globalRefs$e.typography.h2.size,
+      [vars$m.fontWeight]: globalRefs$e.typography.h2.weight,
+      [vars$m.fontFamily]: globalRefs$e.typography.h2.font,
     },
     h3: {
-      [vars$l.fontSize]: globalRefs$d.typography.h3.size,
-      [vars$l.fontWeight]: globalRefs$d.typography.h3.weight,
-      [vars$l.fontFamily]: globalRefs$d.typography.h3.font,
+      [vars$m.fontSize]: globalRefs$e.typography.h3.size,
+      [vars$m.fontWeight]: globalRefs$e.typography.h3.weight,
+      [vars$m.fontFamily]: globalRefs$e.typography.h3.font,
     },
     subtitle1: {
-      [vars$l.fontSize]: globalRefs$d.typography.subtitle1.size,
-      [vars$l.fontWeight]: globalRefs$d.typography.subtitle1.weight,
-      [vars$l.fontFamily]: globalRefs$d.typography.subtitle1.font,
+      [vars$m.fontSize]: globalRefs$e.typography.subtitle1.size,
+      [vars$m.fontWeight]: globalRefs$e.typography.subtitle1.weight,
+      [vars$m.fontFamily]: globalRefs$e.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$l.fontSize]: globalRefs$d.typography.subtitle2.size,
-      [vars$l.fontWeight]: globalRefs$d.typography.subtitle2.weight,
-      [vars$l.fontFamily]: globalRefs$d.typography.subtitle2.font,
+      [vars$m.fontSize]: globalRefs$e.typography.subtitle2.size,
+      [vars$m.fontWeight]: globalRefs$e.typography.subtitle2.weight,
+      [vars$m.fontFamily]: globalRefs$e.typography.subtitle2.font,
     },
     body1: {
-      [vars$l.fontSize]: globalRefs$d.typography.body1.size,
-      [vars$l.fontWeight]: globalRefs$d.typography.body1.weight,
-      [vars$l.fontFamily]: globalRefs$d.typography.body1.font,
+      [vars$m.fontSize]: globalRefs$e.typography.body1.size,
+      [vars$m.fontWeight]: globalRefs$e.typography.body1.weight,
+      [vars$m.fontFamily]: globalRefs$e.typography.body1.font,
     },
     body2: {
-      [vars$l.fontSize]: globalRefs$d.typography.body2.size,
-      [vars$l.fontWeight]: globalRefs$d.typography.body2.weight,
-      [vars$l.fontFamily]: globalRefs$d.typography.body2.font,
+      [vars$m.fontSize]: globalRefs$e.typography.body2.size,
+      [vars$m.fontWeight]: globalRefs$e.typography.body2.weight,
+      [vars$m.fontFamily]: globalRefs$e.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$l.textColor]: globalRefs$d.colors.surface.contrast,
+      [vars$m.textColor]: globalRefs$e.colors.surface.contrast,
     },
     secondary: {
-      [vars$l.textColor]: globalRefs$d.colors.surface.dark,
+      [vars$m.textColor]: globalRefs$e.colors.surface.dark,
     },
     error: {
-      [vars$l.textColor]: globalRefs$d.colors.error.main,
+      [vars$m.textColor]: globalRefs$e.colors.error.main,
     },
     success: {
-      [vars$l.textColor]: globalRefs$d.colors.success.main,
+      [vars$m.textColor]: globalRefs$e.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$l.textAlign]: 'right' },
-    left: { [vars$l.textAlign]: 'left' },
-    center: { [vars$l.textAlign]: 'center' },
+    right: { [vars$m.textAlign]: 'right' },
+    left: { [vars$m.textAlign]: 'left' },
+    center: { [vars$m.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$l.hostWidth]: '100%',
+    [vars$m.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$l.fontStyle]: 'italic',
+    [vars$m.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$l.textTransform]: 'uppercase',
+    [vars$m.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$l.textTransform]: 'lowercase',
+    [vars$m.textTransform]: 'lowercase',
   },
 };
 
 var text$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$2,
-  vars: vars$l
+  vars: vars$m
 });
 
-const componentName$s = getComponentName('link');
+const componentName$t = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$s, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$t, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -4545,12 +4548,12 @@ const selectors$2 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$1, host: host$c, wrapper: wrapper$1 } = selectors$2;
+const { anchor, text: text$1, host: host$d, wrapper: wrapper$1 } = selectors$2;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$c, property: 'width' },
+      hostWidth: { ...host$d, property: 'width' },
       hostDirection: { ...text$1, property: 'direction' },
       textAlign: wrapper$1,
       textColor: [
@@ -4564,37 +4567,37 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-const globalRefs$c = getThemeRefs(globals);
-const vars$k = LinkClass.cssVarList;
+const globalRefs$d = getThemeRefs(globals);
+const vars$l = LinkClass.cssVarList;
 
 const link = {
-  [vars$k.hostDirection]: globalRefs$c.direction,
-  [vars$k.cursor]: 'pointer',
+  [vars$l.hostDirection]: globalRefs$d.direction,
+  [vars$l.cursor]: 'pointer',
 
-  [vars$k.textColor]: globalRefs$c.colors.primary.main,
+  [vars$l.textColor]: globalRefs$d.colors.primary.main,
 
   textAlign: {
-    right: { [vars$k.textAlign]: 'right' },
-    left: { [vars$k.textAlign]: 'left' },
-    center: { [vars$k.textAlign]: 'center' },
+    right: { [vars$l.textAlign]: 'right' },
+    left: { [vars$l.textAlign]: 'left' },
+    center: { [vars$l.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$k.hostWidth]: '100%',
+    [vars$l.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$k.textColor]: globalRefs$c.colors.primary.main,
+      [vars$l.textColor]: globalRefs$d.colors.primary.main,
     },
     secondary: {
-      [vars$k.textColor]: globalRefs$c.colors.secondary.main,
+      [vars$l.textColor]: globalRefs$d.colors.secondary.main,
     },
     error: {
-      [vars$k.textColor]: globalRefs$c.colors.error.main,
+      [vars$l.textColor]: globalRefs$d.colors.error.main,
     },
     success: {
-      [vars$k.textColor]: globalRefs$c.colors.success.main,
+      [vars$l.textColor]: globalRefs$d.colors.success.main,
     },
   },
 };
@@ -4602,11 +4605,11 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$k
+  vars: vars$l
 });
 
-const componentName$r = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
+const componentName$s = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -4652,7 +4655,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$r, baseS
 }
 
 const textVars$3 = TextClass.cssVarList;
-const { host: host$b, before, after: after$1, text } = {
+const { host: host$c, before, after: after$1, text } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
   after: { selector: '::after' },
@@ -4662,8 +4665,8 @@ const { host: host$b, before, after: after$1, text } = {
 const DividerClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$b, property: 'width' },
-      hostPadding: { ...host$b, property: 'padding' },
+      hostWidth: { ...host$c, property: 'width' },
+      hostPadding: { ...host$c, property: 'padding' },
       hostDirection: { ...text, property: 'direction' },
 
       minHeight: {},
@@ -4705,65 +4708,65 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-const globalRefs$b = getThemeRefs(globals);
-const compVars$2 = DividerClass.cssVarList;
+const globalRefs$c = getThemeRefs(globals);
+const compVars$3 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   {
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$r
+  componentName$s
 );
 
 const divider = {
   ...helperTheme$1,
 
-  [compVars$2.hostDirection]: globalRefs$b.direction,
-  [compVars$2.alignItems]: 'center',
-  [compVars$2.flexDirection]: 'row',
-  [compVars$2.alignSelf]: 'stretch',
-  [compVars$2.hostWidth]: '100%',
-  [compVars$2.stripeColor]: globalRefs$b.colors.surface.light,
-  [compVars$2.stripeColorOpacity]: '0.5',
-  [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
-  [compVars$2.labelTextWidth]: 'fit-content',
-  [compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
-  [compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
-  [compVars$2.textAlign]: 'center',
+  [compVars$3.hostDirection]: globalRefs$c.direction,
+  [compVars$3.alignItems]: 'center',
+  [compVars$3.flexDirection]: 'row',
+  [compVars$3.alignSelf]: 'stretch',
+  [compVars$3.hostWidth]: '100%',
+  [compVars$3.stripeColor]: globalRefs$c.colors.surface.light,
+  [compVars$3.stripeColorOpacity]: '0.5',
+  [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
+  [compVars$3.labelTextWidth]: 'fit-content',
+  [compVars$3.labelTextMaxWidth]: 'calc(100% - 100px)',
+  [compVars$3.labelTextHorizontalSpacing]: helperRefs$1.spacing,
+  [compVars$3.textAlign]: 'center',
 
   _vertical: {
-    [compVars$2.minHeight]: '200px',
-    [compVars$2.flexDirection]: 'column',
-    [compVars$2.hostWidth]: 'fit-content',
-    [compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
-    [compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
-    [compVars$2.labelTextWidth]: 'fit-content',
-    [compVars$2.labelTextMaxWidth]: '100%',
-    [compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
+    [compVars$3.minHeight]: '200px',
+    [compVars$3.flexDirection]: 'column',
+    [compVars$3.hostWidth]: 'fit-content',
+    [compVars$3.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
+    [compVars$3.stripeVerticalThickness]: helperRefs$1.thickness,
+    [compVars$3.labelTextWidth]: 'fit-content',
+    [compVars$3.labelTextMaxWidth]: '100%',
+    [compVars$3.labelTextVerticalSpacing]: helperRefs$1.spacing,
   },
 };
 
-const vars$j = {
-  ...compVars$2,
+const vars$k = {
+  ...compVars$3,
   ...helperVars$1,
 };
 
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$j
+  vars: vars$k
 });
 
 /* eslint-disable no-param-reassign */
 
-const componentName$q = getComponentName('passcode-internal');
+const componentName$r = getComponentName('passcode-internal');
 
-createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
 
-const componentName$p = getComponentName('loader-radial');
+const componentName$q = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -4807,7 +4810,7 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-const componentName$o = getComponentName('passcode');
+const componentName$p = getComponentName('passcode');
 
 const observedAttributes$3 = ['digits'];
 
@@ -4826,17 +4829,17 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$q}
+      <${componentName$r}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$q}>
+      ><slot></slot></${componentName$r}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$q);
+      this.inputElement = this.shadowRoot.querySelector(componentName$r);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -4851,7 +4854,7 @@ const customMixin$5 = (superclass) =>
   };
 
 const {
-  host: host$a,
+  host: host$b,
   digitField,
   label: label$6,
   requiredIndicator: requiredIndicator$6,
@@ -4874,10 +4877,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$a],
+      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$b],
       hostWidth: { property: 'width' },
-      hostDirection: { ...host$a, property: 'direction' },
-      fontFamily: [host$a, { ...label$6 }],
+      hostDirection: { ...host$b, property: 'direction' },
+      fontFamily: [host$b, { ...label$6 }],
       labelTextColor: [
         { ...label$6, property: 'color' },
         { ...requiredIndicator$6, property: 'color' },
@@ -4983,56 +4986,56 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$o,
+    componentName: componentName$p,
   })
 );
 
-const vars$i = PasscodeClass.cssVarList;
+const vars$j = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$i.hostDirection]: refs.direction,
-  [vars$i.fontFamily]: refs.fontFamily,
-  [vars$i.fontSize]: refs.fontSize,
-  [vars$i.labelTextColor]: refs.labelTextColor,
-  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$i.digitValueTextColor]: refs.valueTextColor,
-  [vars$i.digitPadding]: '0',
-  [vars$i.digitTextAlign]: 'center',
-  [vars$i.digitSpacing]: '4px',
-  [vars$i.hostWidth]: refs.width,
-  [vars$i.digitOutlineColor]: 'transparent',
-  [vars$i.digitOutlineWidth]: refs.outlineWidth,
-  [vars$i.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$i.digitSize]: refs.inputHeight,
+  [vars$j.hostDirection]: refs.direction,
+  [vars$j.fontFamily]: refs.fontFamily,
+  [vars$j.fontSize]: refs.fontSize,
+  [vars$j.labelTextColor]: refs.labelTextColor,
+  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$j.digitValueTextColor]: refs.valueTextColor,
+  [vars$j.digitPadding]: '0',
+  [vars$j.digitTextAlign]: 'center',
+  [vars$j.digitSpacing]: '4px',
+  [vars$j.hostWidth]: refs.width,
+  [vars$j.digitOutlineColor]: 'transparent',
+  [vars$j.digitOutlineWidth]: refs.outlineWidth,
+  [vars$j.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$j.digitSize]: refs.inputHeight,
 
   size: {
-    xs: { [vars$i.spinnerSize]: '15px' },
-    sm: { [vars$i.spinnerSize]: '20px' },
-    md: { [vars$i.spinnerSize]: '20px' },
-    lg: { [vars$i.spinnerSize]: '20px' },
+    xs: { [vars$j.spinnerSize]: '15px' },
+    sm: { [vars$j.spinnerSize]: '20px' },
+    md: { [vars$j.spinnerSize]: '20px' },
+    lg: { [vars$j.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$i.digitCaretTextColor]: 'transparent',
+    [vars$j.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$i.overlayOpacity]: refs.overlayOpacity,
+    [vars$j.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$i
+  vars: vars$j
 });
 
-const componentName$n = getComponentName('loader-linear');
+const componentName$o = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$n;
+    return componentName$o;
   }
 
   constructor() {
@@ -5068,18 +5071,18 @@ const selectors$1 = {
   host: { selector: () => ':host' },
 };
 
-const { after, host: host$9 } = selectors$1;
+const { after, host: host$a } = selectors$1;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$9, property: 'width' },
+      hostWidth: { ...host$a, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$9, property: 'padding-top' },
-        { ...host$9, property: 'padding-bottom' },
+        { ...host$a, property: 'padding-top' },
+        { ...host$a, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after, property: 'background-color' },
@@ -5093,107 +5096,107 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-const globalRefs$a = getThemeRefs(globals);
-const vars$h = LoaderLinearClass.cssVarList;
+const globalRefs$b = getThemeRefs(globals);
+const vars$i = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$h.hostDisplay]: 'inline-block',
-  [vars$h.hostWidth]: '100%',
+  [vars$i.hostDisplay]: 'inline-block',
+  [vars$i.hostWidth]: '100%',
 
-  [vars$h.barColor]: globalRefs$a.colors.surface.contrast,
-  [vars$h.barWidth]: '20%',
+  [vars$i.barColor]: globalRefs$b.colors.surface.contrast,
+  [vars$i.barWidth]: '20%',
 
-  [vars$h.barBackgroundColor]: globalRefs$a.colors.surface.light,
-  [vars$h.barBorderRadius]: '4px',
+  [vars$i.barBackgroundColor]: globalRefs$b.colors.surface.light,
+  [vars$i.barBorderRadius]: '4px',
 
-  [vars$h.animationDuration]: '2s',
-  [vars$h.animationTimingFunction]: 'linear',
-  [vars$h.animationIterationCount]: 'infinite',
-  [vars$h.verticalPadding]: '0.25em',
+  [vars$i.animationDuration]: '2s',
+  [vars$i.animationTimingFunction]: 'linear',
+  [vars$i.animationIterationCount]: 'infinite',
+  [vars$i.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$h.barHeight]: '2px' },
-    sm: { [vars$h.barHeight]: '4px' },
-    md: { [vars$h.barHeight]: '6px' },
-    lg: { [vars$h.barHeight]: '8px' },
+    xs: { [vars$i.barHeight]: '2px' },
+    sm: { [vars$i.barHeight]: '4px' },
+    md: { [vars$i.barHeight]: '6px' },
+    lg: { [vars$i.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$h.barColor]: globalRefs$a.colors.primary.main,
+      [vars$i.barColor]: globalRefs$b.colors.primary.main,
     },
     secondary: {
-      [vars$h.barColor]: globalRefs$a.colors.secondary.main,
+      [vars$i.barColor]: globalRefs$b.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$h.hostDisplay]: 'none',
+    [vars$i.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$h
+  vars: vars$i
 });
 
-const globalRefs$9 = getThemeRefs(globals);
-const compVars$1 = LoaderRadialClass.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const compVars$2 = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
-    spinnerColor: globalRefs$9.colors.surface.contrast,
+    spinnerColor: globalRefs$a.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$9.colors.primary.main,
+        spinnerColor: globalRefs$a.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$9.colors.secondary.main,
+        spinnerColor: globalRefs$a.colors.secondary.main,
       },
     },
   },
-  componentName$p
+  componentName$q
 );
 
 const loaderRadial = {
   ...helperTheme,
 
-  [compVars$1.animationDuration]: '2s',
-  [compVars$1.animationTimingFunction]: 'linear',
-  [compVars$1.animationIterationCount]: 'infinite',
-  [compVars$1.spinnerBorderStyle]: 'solid',
-  [compVars$1.spinnerBorderWidth]: '0.2em',
-  [compVars$1.spinnerBorderRadius]: '50%',
-  [compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
-  [compVars$1.spinnerQuadrant2Color]: 'transparent',
-  [compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
-  [compVars$1.spinnerQuadrant4Color]: 'transparent',
+  [compVars$2.animationDuration]: '2s',
+  [compVars$2.animationTimingFunction]: 'linear',
+  [compVars$2.animationIterationCount]: 'infinite',
+  [compVars$2.spinnerBorderStyle]: 'solid',
+  [compVars$2.spinnerBorderWidth]: '0.2em',
+  [compVars$2.spinnerBorderRadius]: '50%',
+  [compVars$2.spinnerQuadrant1Color]: helperRefs.spinnerColor,
+  [compVars$2.spinnerQuadrant2Color]: 'transparent',
+  [compVars$2.spinnerQuadrant3Color]: helperRefs.spinnerColor,
+  [compVars$2.spinnerQuadrant4Color]: 'transparent',
 
   size: {
-    xs: { [compVars$1.spinnerSize]: '20px' },
-    sm: { [compVars$1.spinnerSize]: '30px' },
-    md: { [compVars$1.spinnerSize]: '40px' },
-    lg: { [compVars$1.spinnerSize]: '60px' },
-    xl: { [compVars$1.spinnerSize]: '80px' },
+    xs: { [compVars$2.spinnerSize]: '20px' },
+    sm: { [compVars$2.spinnerSize]: '30px' },
+    md: { [compVars$2.spinnerSize]: '40px' },
+    lg: { [compVars$2.spinnerSize]: '60px' },
+    xl: { [compVars$2.spinnerSize]: '80px' },
   },
 
   _hidden: {
-    [compVars$1.hostDisplay]: 'none',
+    [compVars$2.hostDisplay]: 'none',
   },
 };
-const vars$g = {
-  ...compVars$1,
+const vars$h = {
+  ...compVars$2,
   ...helperVars,
 };
 
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$g
+  vars: vars$h
 });
 
-const componentName$m = getComponentName('combo-box');
+const componentName$n = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -5419,7 +5422,7 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$8,
+  host: host$9,
   inputField: inputField$3,
   inputElement: inputElement$1,
   placeholder: placeholder$1,
@@ -5445,10 +5448,10 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$8, property: 'width' },
-      hostDirection: { ...host$8, property: 'direction' },
+      hostWidth: { ...host$9, property: 'width' },
+      hostDirection: { ...host$9, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$8],
+      fontSize: [{}, host$9],
       fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
       labelTextColor: [
         { ...label$5, property: 'color' },
@@ -5576,71 +5579,71 @@ 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$m,
+    componentName: componentName$n,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-const globalRefs$8 = getThemeRefs(globals);
-const vars$f = ComboBoxClass.cssVarList;
+const globalRefs$9 = getThemeRefs(globals);
+const vars$g = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$f.hostWidth]: refs.width,
-  [vars$f.hostDirection]: refs.direction,
-  [vars$f.fontSize]: refs.fontSize,
-  [vars$f.fontFamily]: refs.fontFamily,
-  [vars$f.labelTextColor]: refs.labelTextColor,
-  [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$f.inputBorderColor]: refs.borderColor,
-  [vars$f.inputBorderWidth]: refs.borderWidth,
-  [vars$f.inputBorderStyle]: refs.borderStyle,
-  [vars$f.inputBorderRadius]: refs.borderRadius,
-  [vars$f.inputOutlineColor]: refs.outlineColor,
-  [vars$f.inputOutlineOffset]: refs.outlineOffset,
-  [vars$f.inputOutlineWidth]: refs.outlineWidth,
-  [vars$f.inputOutlineStyle]: refs.outlineStyle,
-  [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$f.inputValueTextColor]: refs.valueTextColor,
-  [vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$f.inputBackgroundColor]: refs.backgroundColor,
-  [vars$f.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$f.inputHeight]: refs.inputHeight,
-  [vars$f.inputDropdownButtonColor]: globalRefs$8.colors.surface.dark,
-  [vars$f.inputDropdownButtonCursor]: 'pointer',
-  [vars$f.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$f.inputDropdownButtonOffset]: globalRefs$8.spacing.xs,
-  [vars$f.overlayItemPaddingInlineStart]: globalRefs$8.spacing.xs,
-  [vars$f.overlayItemPaddingInlineEnd]: globalRefs$8.spacing.lg,
+  [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.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$g.inputBorderColor]: refs.borderColor,
+  [vars$g.inputBorderWidth]: refs.borderWidth,
+  [vars$g.inputBorderStyle]: refs.borderStyle,
+  [vars$g.inputBorderRadius]: refs.borderRadius,
+  [vars$g.inputOutlineColor]: refs.outlineColor,
+  [vars$g.inputOutlineOffset]: refs.outlineOffset,
+  [vars$g.inputOutlineWidth]: refs.outlineWidth,
+  [vars$g.inputOutlineStyle]: refs.outlineStyle,
+  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$g.inputValueTextColor]: refs.valueTextColor,
+  [vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$g.inputBackgroundColor]: refs.backgroundColor,
+  [vars$g.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$g.inputHeight]: refs.inputHeight,
+  [vars$g.inputDropdownButtonColor]: globalRefs$9.colors.surface.dark,
+  [vars$g.inputDropdownButtonCursor]: 'pointer',
+  [vars$g.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$g.inputDropdownButtonOffset]: globalRefs$9.spacing.xs,
+  [vars$g.overlayItemPaddingInlineStart]: globalRefs$9.spacing.xs,
+  [vars$g.overlayItemPaddingInlineEnd]: globalRefs$9.spacing.lg,
 
   _readonly: {
-    [vars$f.inputDropdownButtonCursor]: 'default',
+    [vars$g.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$f.overlayFontSize]: refs.fontSize,
-  [vars$f.overlayFontFamily]: refs.fontFamily,
-  [vars$f.overlayCursor]: 'pointer',
-  [vars$f.overlayItemBoxShadow]: 'none',
-  [vars$f.overlayBackground]: refs.backgroundColor,
-  [vars$f.overlayTextColor]: refs.valueTextColor,
+  [vars$g.overlayFontSize]: refs.fontSize,
+  [vars$g.overlayFontFamily]: refs.fontFamily,
+  [vars$g.overlayCursor]: 'pointer',
+  [vars$g.overlayItemBoxShadow]: 'none',
+  [vars$g.overlayBackground]: refs.backgroundColor,
+  [vars$g.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$f.overlay.minHeight]: '400px',
-  [vars$f.overlay.margin]: '0',
+  [vars$g.overlay.minHeight]: '400px',
+  [vars$g.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$f
+  vars: vars$g
 });
 
 const observedAttributes$2 = ['src', 'alt'];
 
-const componentName$l = getComponentName('image');
+const componentName$m = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$l, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$m, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -5680,14 +5683,14 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-const vars$e = ImageClass.cssVarList;
+const vars$f = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$e
+  vars: vars$f
 });
 
 var CountryCodes = [
@@ -6906,14 +6909,14 @@ var CountryCodes = [
   ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 ];
 
-const componentName$k = getComponentName('phone-field-internal');
+const componentName$l = getComponentName('phone-field-internal');
 
-createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$j = getComponentName('phone-field');
+const componentName$k = getComponentName('phone-field');
 
 const customMixin$4 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -6927,15 +6930,15 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$k}
+				<${componentName$l}
 					tabindex="-1"
 					slot="input"
-				></${componentName$k}>
+				></${componentName$l}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$k);
+      this.inputElement = this.shadowRoot.querySelector(componentName$l);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -6955,7 +6958,7 @@ const customMixin$4 = (superclass) =>
   };
 
 const {
-  host: host$7,
+  host: host$8,
   label: label$4,
   requiredIndicator: requiredIndicator$4,
   inputField: inputField$2,
@@ -6980,7 +6983,7 @@ const PhoneFieldClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$7,
+        host$8,
         inputField$2,
         {
           selector: TextFieldClass.componentName,
@@ -7001,11 +7004,11 @@ const PhoneFieldClass = compose(
         },
       ],
       hostWidth: [
-        { ...host$7, property: 'width' },
+        { ...host$8, property: 'width' },
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
-      hostDirection: { ...host$7, property: 'direction' },
+      hostDirection: { ...host$8, property: 'direction' },
 
       inputBorderStyle: [
         { ...inputField$2, property: 'border-style' },
@@ -7131,33 +7134,33 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$j,
+    componentName: componentName$k,
   })
 );
 
-const vars$d = PhoneFieldClass.cssVarList;
+const vars$e = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$d.hostWidth]: refs.width,
-  [vars$d.hostDirection]: refs.direction,
-  [vars$d.fontSize]: refs.fontSize,
-  [vars$d.fontFamily]: refs.fontFamily,
-  [vars$d.labelTextColor]: refs.labelTextColor,
-  [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$d.inputValueTextColor]: refs.valueTextColor,
-  [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$d.inputBorderStyle]: refs.borderStyle,
-  [vars$d.inputBorderWidth]: refs.borderWidth,
-  [vars$d.inputBorderColor]: refs.borderColor,
-  [vars$d.inputBorderRadius]: refs.borderRadius,
-  [vars$d.inputOutlineStyle]: refs.outlineStyle,
-  [vars$d.inputOutlineWidth]: refs.outlineWidth,
-  [vars$d.inputOutlineColor]: refs.outlineColor,
-  [vars$d.inputOutlineOffset]: refs.outlineOffset,
-  [vars$d.phoneInputWidth]: refs.minWidth,
-  [vars$d.countryCodeInputWidth]: '5em',
-  [vars$d.countryCodeDropdownWidth]: '20em',
+  [vars$e.hostWidth]: refs.width,
+  [vars$e.hostDirection]: refs.direction,
+  [vars$e.fontSize]: refs.fontSize,
+  [vars$e.fontFamily]: refs.fontFamily,
+  [vars$e.labelTextColor]: refs.labelTextColor,
+  [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$e.inputValueTextColor]: refs.valueTextColor,
+  [vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$e.inputBorderStyle]: refs.borderStyle,
+  [vars$e.inputBorderWidth]: refs.borderWidth,
+  [vars$e.inputBorderColor]: refs.borderColor,
+  [vars$e.inputBorderRadius]: refs.borderRadius,
+  [vars$e.inputOutlineStyle]: refs.outlineStyle,
+  [vars$e.inputOutlineWidth]: refs.outlineWidth,
+  [vars$e.inputOutlineColor]: refs.outlineColor,
+  [vars$e.inputOutlineOffset]: refs.outlineOffset,
+  [vars$e.phoneInputWidth]: refs.minWidth,
+  [vars$e.countryCodeInputWidth]: '5em',
+  [vars$e.countryCodeDropdownWidth]: '20em',
 
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
@@ -7167,16 +7170,16 @@ const phoneField = {
 var phoneField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneField,
-  vars: vars$d
+  vars: vars$e
 });
 
-const componentName$i = getComponentName('phone-field-internal-input-box');
+const componentName$j = getComponentName('phone-field-internal-input-box');
 
-createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$h = getComponentName('phone-input-box-field');
+const componentName$i = getComponentName('phone-input-box-field');
 
 const customMixin$3 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -7190,15 +7193,15 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$i}
+				<${componentName$j}
 					tabindex="-1"
 					slot="input"
-				></${componentName$i}>
+				></${componentName$j}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$i);
+      this.inputElement = this.shadowRoot.querySelector(componentName$j);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -7215,7 +7218,7 @@ const customMixin$3 = (superclass) =>
     }
   };
 
-const { host: host$6, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
+const { host: host$7, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -7229,7 +7232,7 @@ const PhoneFieldInputBoxClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$6,
+        host$7,
         inputField$1,
         {
           selector: TextFieldClass.componentName,
@@ -7237,9 +7240,9 @@ const PhoneFieldInputBoxClass = compose(
         },
       ],
       fontFamily: [label$3, errorMessage$4, helperText$3],
-      hostWidth: { ...host$6, property: 'width' },
-      hostMinWidth: { ...host$6, property: 'min-width' },
-      hostDirection: { ...host$6, property: 'direction' },
+      hostWidth: { ...host$7, property: 'width' },
+      hostMinWidth: { ...host$7, property: 'min-width' },
+      hostDirection: { ...host$7, property: 'direction' },
 
       inputBorderStyle: { ...inputField$1, property: 'border-style' },
       inputBorderWidth: { ...inputField$1, property: 'border-width' },
@@ -7331,45 +7334,45 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$h,
+    componentName: componentName$i,
   })
 );
 
-const vars$c = PhoneFieldInputBoxClass.cssVarList;
+const vars$d = PhoneFieldInputBoxClass.cssVarList;
 
 const phoneInputBoxField = {
-  [vars$c.hostWidth]: '16em',
-  [vars$c.hostMinWidth]: refs.minWidth,
-  [vars$c.hostDirection]: refs.direction,
-  [vars$c.fontSize]: refs.fontSize,
-  [vars$c.fontFamily]: refs.fontFamily,
-  [vars$c.labelTextColor]: refs.labelTextColor,
-  [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$c.inputValueTextColor]: refs.valueTextColor,
-  [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$c.inputBorderStyle]: refs.borderStyle,
-  [vars$c.inputBorderWidth]: refs.borderWidth,
-  [vars$c.inputBorderColor]: refs.borderColor,
-  [vars$c.inputBorderRadius]: refs.borderRadius,
-  [vars$c.inputOutlineStyle]: refs.outlineStyle,
-  [vars$c.inputOutlineWidth]: refs.outlineWidth,
-  [vars$c.inputOutlineColor]: refs.outlineColor,
-  [vars$c.inputOutlineOffset]: refs.outlineOffset,
+  [vars$d.hostWidth]: '16em',
+  [vars$d.hostMinWidth]: refs.minWidth,
+  [vars$d.hostDirection]: refs.direction,
+  [vars$d.fontSize]: refs.fontSize,
+  [vars$d.fontFamily]: refs.fontFamily,
+  [vars$d.labelTextColor]: refs.labelTextColor,
+  [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$d.inputValueTextColor]: refs.valueTextColor,
+  [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$d.inputBorderStyle]: refs.borderStyle,
+  [vars$d.inputBorderWidth]: refs.borderWidth,
+  [vars$d.inputBorderColor]: refs.borderColor,
+  [vars$d.inputBorderRadius]: refs.borderRadius,
+  [vars$d.inputOutlineStyle]: refs.outlineStyle,
+  [vars$d.inputOutlineWidth]: refs.outlineWidth,
+  [vars$d.inputOutlineColor]: refs.outlineColor,
+  [vars$d.inputOutlineOffset]: refs.outlineOffset,
   _fullWidth: {
-    [vars$c.hostWidth]: refs.width,
+    [vars$d.hostWidth]: refs.width,
   },
 };
 
 var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneInputBoxField,
-  vars: vars$c
+  vars: vars$d
 });
 
-const componentName$g = getComponentName('new-password-internal');
+const componentName$h = getComponentName('new-password-internal');
 
-const componentName$f = getComponentName('new-password');
+const componentName$g = getComponentName('new-password');
 
 const customMixin$2 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
@@ -7379,16 +7382,16 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$g}
+			<${componentName$h}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$g}>
+			></${componentName$h}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$g);
+      this.inputElement = this.shadowRoot.querySelector(componentName$h);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -7409,7 +7412,7 @@ const customMixin$2 = (superclass) =>
     }
   };
 
-const { host: host$5, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
+const { host: host$6, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -7422,7 +7425,7 @@ const NewPasswordClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$5,
+        host$6,
         {},
         {
           selector: PasswordClass.componentName,
@@ -7431,13 +7434,13 @@ const NewPasswordClass = compose(
       ],
       fontFamily: [label$2, errorMessage$3, helperText$2],
       errorMessageTextColor: { ...errorMessage$3, property: 'color' },
-      hostWidth: { ...host$5, property: 'width' },
-      hostMinWidth: { ...host$5, property: 'min-width' },
+      hostWidth: { ...host$6, property: 'width' },
+      hostMinWidth: { ...host$6, property: 'min-width' },
       hostDirection: [
-        { ...host$5, property: 'direction' },
+        { ...host$6, property: 'direction' },
         { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
       ],
-      inputsRequiredIndicator: { ...host$5, property: 'content' },
+      inputsRequiredIndicator: { ...host$6, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
     },
   }),
@@ -7495,33 +7498,33 @@ const NewPasswordClass = compose(
 		}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$f,
+    componentName: componentName$g,
   })
 );
 
-const vars$b = NewPasswordClass.cssVarList;
+const vars$c = NewPasswordClass.cssVarList;
 
 const newPassword = {
-  [vars$b.hostWidth]: refs.width,
-  [vars$b.hostMinWidth]: refs.minWidth,
-  [vars$b.hostDirection]: refs.direction,
-  [vars$b.fontSize]: refs.fontSize,
-  [vars$b.fontFamily]: refs.fontFamily,
-  [vars$b.spaceBetweenInputs]: '1em',
-  [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$c.hostWidth]: refs.width,
+  [vars$c.hostMinWidth]: refs.minWidth,
+  [vars$c.hostDirection]: refs.direction,
+  [vars$c.fontSize]: refs.fontSize,
+  [vars$c.fontFamily]: refs.fontFamily,
+  [vars$c.spaceBetweenInputs]: '1em',
+  [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
     // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$b.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$c.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$b
+  vars: vars$c
 });
 
 const getFileBase64 = (fileObj) => {
@@ -7536,7 +7539,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$e = getComponentName('upload-file');
+const componentName$f = getComponentName('upload-file');
 
 const observedAttributes$1 = [
   'title',
@@ -7551,7 +7554,7 @@ const observedAttributes$1 = [
   'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$e, baseSelector: ':host > div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$f, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -7723,7 +7726,7 @@ class RawUploadFile extends BaseInputClass {
 }
 
 const buttonVars = ButtonClass.cssVarList;
-const { host: host$4, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
+const { host: host$5, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '::slotted(*)' },
@@ -7742,11 +7745,11 @@ const UploadFileClass = compose(
       borderWidth: {},
       borderStyle: {},
       borderRadius: {},
-      hostHeight: { ...host$4, property: 'height' },
-      hostWidth: { ...host$4, property: 'width' },
+      hostHeight: { ...host$5, property: 'height' },
+      hostWidth: { ...host$5, property: 'width' },
       hostPadding: { property: 'padding' },
       hostDirection: [
-        { ...host$4, property: 'direction' },
+        { ...host$5, property: 'direction' },
         { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
       ],
       gap: { ...wrapper },
@@ -7766,77 +7769,77 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-const vars$a = UploadFileClass.cssVarList;
+const vars$b = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$a.hostDirection]: refs.direction,
-  [vars$a.labelTextColor]: refs.labelTextColor,
-  [vars$a.fontFamily]: refs.fontFamily,
+  [vars$b.hostDirection]: refs.direction,
+  [vars$b.labelTextColor]: refs.labelTextColor,
+  [vars$b.fontFamily]: refs.fontFamily,
 
-  [vars$a.iconSize]: '2em',
+  [vars$b.iconSize]: '2em',
 
-  [vars$a.hostPadding]: '0.75em',
-  [vars$a.gap]: '0.5em',
+  [vars$b.hostPadding]: '0.75em',
+  [vars$b.gap]: '0.5em',
 
-  [vars$a.fontSize]: '16px',
-  [vars$a.titleFontWeight]: '500',
-  [vars$a.lineHeight]: '1em',
+  [vars$b.fontSize]: '16px',
+  [vars$b.titleFontWeight]: '500',
+  [vars$b.lineHeight]: '1em',
 
-  [vars$a.borderWidth]: refs.borderWidth,
-  [vars$a.borderColor]: refs.borderColor,
-  [vars$a.borderRadius]: refs.borderRadius,
-  [vars$a.borderStyle]: 'dashed',
+  [vars$b.borderWidth]: refs.borderWidth,
+  [vars$b.borderColor]: refs.borderColor,
+  [vars$b.borderRadius]: refs.borderRadius,
+  [vars$b.borderStyle]: 'dashed',
 
   _required: {
-    [vars$a.requiredIndicator]: refs.requiredIndicator,
+    [vars$b.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$a.hostHeight]: '196px',
-      [vars$a.hostWidth]: '200px',
-      [vars$a.titleFontSize]: '0.875em',
-      [vars$a.descriptionFontSize]: '0.875em',
-      [vars$a.lineHeight]: '1.25em',
+      [vars$b.hostHeight]: '196px',
+      [vars$b.hostWidth]: '200px',
+      [vars$b.titleFontSize]: '0.875em',
+      [vars$b.descriptionFontSize]: '0.875em',
+      [vars$b.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$a.hostHeight]: '216px',
-      [vars$a.hostWidth]: '230px',
-      [vars$a.titleFontSize]: '1em',
-      [vars$a.descriptionFontSize]: '0.875em',
-      [vars$a.lineHeight]: '1.25em',
+      [vars$b.hostHeight]: '216px',
+      [vars$b.hostWidth]: '230px',
+      [vars$b.titleFontSize]: '1em',
+      [vars$b.descriptionFontSize]: '0.875em',
+      [vars$b.lineHeight]: '1.25em',
     },
     md: {
-      [vars$a.hostHeight]: '256px',
-      [vars$a.hostWidth]: '312px',
-      [vars$a.titleFontSize]: '1.125em',
-      [vars$a.descriptionFontSize]: '1em',
-      [vars$a.lineHeight]: '1.5em',
+      [vars$b.hostHeight]: '256px',
+      [vars$b.hostWidth]: '312px',
+      [vars$b.titleFontSize]: '1.125em',
+      [vars$b.descriptionFontSize]: '1em',
+      [vars$b.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$a.hostHeight]: '280px',
-      [vars$a.hostWidth]: '336px',
-      [vars$a.titleFontSize]: '1.125em',
-      [vars$a.descriptionFontSize]: '1.125em',
-      [vars$a.lineHeight]: '1.75em',
+      [vars$b.hostHeight]: '280px',
+      [vars$b.hostWidth]: '336px',
+      [vars$b.titleFontSize]: '1.125em',
+      [vars$b.descriptionFontSize]: '1.125em',
+      [vars$b.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$a.hostWidth]: refs.width,
+    [vars$b.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$a
+  vars: vars$b
 });
 
-const componentName$d = getComponentName('button-selection-group-item');
+const componentName$e = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$d,
+  componentName: componentName$e,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -7939,38 +7942,38 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 
-const vars$9 = ButtonSelectionGroupItemClass.cssVarList;
+const vars$a = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$9.hostDirection]: 'inherit',
-  [vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
-  [vars$9.labelTextColor]: globalRefs$7.colors.surface.contrast,
-  [vars$9.borderColor]: globalRefs$7.colors.surface.light,
-  [vars$9.borderStyle]: 'solid',
-  [vars$9.borderRadius]: globalRefs$7.radius.sm,
-  [vars$9.outlineColor]: 'transparent',
+  [vars$a.hostDirection]: 'inherit',
+  [vars$a.backgroundColor]: globalRefs$8.colors.surface.main,
+  [vars$a.labelTextColor]: globalRefs$8.colors.surface.contrast,
+  [vars$a.borderColor]: globalRefs$8.colors.surface.light,
+  [vars$a.borderStyle]: 'solid',
+  [vars$a.borderRadius]: globalRefs$8.radius.sm,
+  [vars$a.outlineColor]: 'transparent',
 
   _hover: {
-    [vars$9.backgroundColor]: globalRefs$7.colors.surface.highlight,
+    [vars$a.backgroundColor]: globalRefs$8.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$9.outlineColor]: globalRefs$7.colors.surface.light,
+    [vars$a.outlineColor]: globalRefs$8.colors.surface.light,
   },
 
   _selected: {
-    [vars$9.borderColor]: globalRefs$7.colors.surface.contrast,
-    [vars$9.backgroundColor]: globalRefs$7.colors.surface.contrast,
-    [vars$9.labelTextColor]: globalRefs$7.colors.surface.main,
+    [vars$a.borderColor]: globalRefs$8.colors.surface.contrast,
+    [vars$a.backgroundColor]: globalRefs$8.colors.surface.contrast,
+    [vars$a.labelTextColor]: globalRefs$8.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$9
+  vars: vars$a
 });
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -8069,10 +8072,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$c = getComponentName('button-selection-group-internal');
+const componentName$d = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$c
+  componentName$d
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -8228,7 +8231,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
     }
   };
 
-const { host: host$3, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
+const { host: host$4, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -8237,9 +8240,9 @@ const { host: host$3, label: label$1, requiredIndicator: requiredIndicator$1, in
 };
 
 const buttonSelectionGroupMappings = {
-  hostWidth: { ...host$3, property: 'width' },
-  hostDirection: { ...host$3, property: 'direction' },
-  fontFamily: host$3,
+  hostWidth: { ...host$4, property: 'width' },
+  hostDirection: { ...host$4, property: 'direction' },
+  fontFamily: host$4,
   labelTextColor: [
     { ...label$1, property: 'color' },
     { ...requiredIndicator$1, property: 'color' },
@@ -8304,7 +8307,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$b = getComponentName('button-selection-group');
+const componentName$c = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -8313,19 +8316,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$c}
+      <${componentName$d}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$c}>
+      </${componentName$d}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$c);
+      this.inputElement = this.shadowRoot.querySelector(componentName$d);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -8350,11 +8353,11 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$b,
+    componentName: componentName$c,
   })
 );
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 
 const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostDirection]: refs.direction,
@@ -8362,26 +8365,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.itemsSpacing]: globalRefs$6.spacing.sm,
+  [vars.itemsSpacing]: globalRefs$7.spacing.sm,
   [vars.hostWidth]: refs.width,
 });
 
-const vars$8 = ButtonSelectionGroupClass.cssVarList;
+const vars$9 = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$8),
+  ...createBaseButtonSelectionGroupMappings(vars$9),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$8
+  vars: vars$9
 });
 
-const componentName$a = getComponentName('button-multi-selection-group-internal');
+const componentName$b = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$a
+  componentName$b
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -8484,7 +8487,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$9 = getComponentName('button-multi-selection-group');
+const componentName$a = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -8493,19 +8496,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$a}
+      <${componentName$b}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$a}>
+      </${componentName$b}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$a);
+      this.inputElement = this.shadowRoot.querySelector(componentName$b);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -8530,23 +8533,23 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$9,
+    componentName: componentName$a,
   })
 );
 
-const vars$7 = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$8 = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$7),
+  ...createBaseButtonSelectionGroupMappings(vars$8),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$7
+  vars: vars$8
 });
 
-const componentName$8 = getComponentName('modal');
+const componentName$9 = getComponentName('modal');
 
 const customMixin$1 = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -8645,28 +8648,28 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$8,
+    componentName: componentName$9,
   })
 );
 
-const globalRefs$5 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 
-const compVars = ModalClass.cssVarList;
+const compVars$1 = ModalClass.cssVarList;
 
 const modal = {
-  [compVars.overlayBackgroundColor]: globalRefs$5.colors.surface.main,
-  [compVars.overlayShadow]: globalRefs$5.shadow.wide['2xl'],
-  [compVars.overlayWidth]: '540px',
+  [compVars$1.overlayBackgroundColor]: globalRefs$6.colors.surface.main,
+  [compVars$1.overlayShadow]: globalRefs$6.shadow.wide['2xl'],
+  [compVars$1.overlayWidth]: '540px',
 };
 
-const vars$6 = {
-  ...compVars,
+const vars$7 = {
+  ...compVars$1,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$6
+  vars: vars$7
 });
 
 const isValidDataType = (data) => {
@@ -8679,7 +8682,7 @@ const isValidDataType = (data) => {
   return isValid;
 };
 
-const componentName$7 = getComponentName('grid');
+const componentName$8 = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -8839,7 +8842,7 @@ const GridMixin = (superclass) =>
   };
 
 const {
-  host: host$2,
+  host: host$3,
   headerRow,
   headerRowCell,
   contentRow,
@@ -8874,15 +8877,15 @@ const GridClass = compose(
       fontWeight: { ...contentRow },
       valueTextColor: { ...contentRow, property: 'color' },
       backgroundColor: [
-        { ...host$2, property: 'background-color' },
+        { ...host$3, property: 'background-color' },
         { ...contentRow, property: 'background-color' },
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      borderColor: { ...host$2, property: 'border-color' },
-      borderWidth: { ...host$2, property: 'border-width' },
-      borderStyle: { ...host$2, property: 'border-style' },
-      borderRadius: { ...host$2, property: 'border-radius' },
+      borderColor: { ...host$3, property: 'border-color' },
+      borderWidth: { ...host$3, property: 'border-width' },
+      borderStyle: { ...host$3, property: 'border-style' },
+      borderRadius: { ...host$3, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
       headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
@@ -8915,40 +8918,40 @@ const GridClass = compose(
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$7,
+    componentName: componentName$8,
   })
 );
 
-const globalRefs$4 = getThemeRefs(globals);
-const vars$5 = GridClass.cssVarList;
+const globalRefs$5 = getThemeRefs(globals);
+const vars$6 = GridClass.cssVarList;
 
 const grid = {
-  [vars$5.hostWidth]: '100%',
-  [vars$5.hostHeight]: '100%',
-  [vars$5.hostMinHeight]: '400px',
-  [vars$5.fontWeight]: '400',
-  [vars$5.backgroundColor]: globalRefs$4.colors.surface.main,
+  [vars$6.hostWidth]: '100%',
+  [vars$6.hostHeight]: '100%',
+  [vars$6.hostMinHeight]: '400px',
+  [vars$6.fontWeight]: '400',
+  [vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
 
-  [vars$5.fontSize]: refs.fontSize,
-  [vars$5.fontFamily]: refs.fontFamily,
+  [vars$6.fontSize]: refs.fontSize,
+  [vars$6.fontFamily]: refs.fontFamily,
 
-  [vars$5.sortIndicatorsColor]: globalRefs$4.colors.surface.light,
-  [vars$5.activeSortIndicator]: globalRefs$4.colors.surface.dark,
-  [vars$5.resizeHandleColor]: globalRefs$4.colors.surface.light,
+  [vars$6.sortIndicatorsColor]: globalRefs$5.colors.surface.light,
+  [vars$6.activeSortIndicator]: globalRefs$5.colors.surface.dark,
+  [vars$6.resizeHandleColor]: globalRefs$5.colors.surface.light,
 
-  [vars$5.borderWidth]: refs.borderWidth,
-  [vars$5.borderStyle]: refs.borderStyle,
-  [vars$5.borderRadius]: refs.borderRadius,
-  [vars$5.borderColor]: 'transparent',
+  [vars$6.borderWidth]: refs.borderWidth,
+  [vars$6.borderStyle]: refs.borderStyle,
+  [vars$6.borderRadius]: refs.borderRadius,
+  [vars$6.borderColor]: 'transparent',
 
-  [vars$5.headerRowTextColor]: globalRefs$4.colors.surface.dark,
-  [vars$5.separatorColor]: globalRefs$4.colors.surface.light,
+  [vars$6.headerRowTextColor]: globalRefs$5.colors.surface.dark,
+  [vars$6.separatorColor]: globalRefs$5.colors.surface.light,
 
-  [vars$5.valueTextColor]: globalRefs$4.colors.surface.contrast,
-  [vars$5.selectedBackgroundColor]: globalRefs$4.colors.surface.highlight,
+  [vars$6.valueTextColor]: globalRefs$5.colors.surface.contrast,
+  [vars$6.selectedBackgroundColor]: globalRefs$5.colors.surface.highlight,
 
   _bordered: {
-    [vars$5.borderColor]: refs.borderColor,
+    [vars$6.borderColor]: refs.borderColor,
   },
 };
 
@@ -8956,10 +8959,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$5
+  vars: vars$6
 });
 
-const componentName$6 = getComponentName('notification-card');
+const componentName$7 = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -9067,54 +9070,54 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$6,
+    componentName: componentName$7,
   })
 );
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$4 = NotificationCardClass.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
+const vars$5 = NotificationCardClass.cssVarList;
 
 const shadowColor = '#00000020';
 
 const notification = {
-  [vars$4.hostMinWidth]: '415px',
-  [vars$4.fontFamily]: globalRefs$3.fonts.font1.family,
-  [vars$4.fontSize]: globalRefs$3.typography.body1.size,
-  [vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
-  [vars$4.textColor]: globalRefs$3.colors.surface.contrast,
-  [vars$4.boxShadow]: `${globalRefs$3.shadow.wide.xl} ${shadowColor}, ${globalRefs$3.shadow.narrow.xl} ${shadowColor}`,
-  [vars$4.verticalPadding]: '0.625em',
-  [vars$4.horizontalPadding]: '1.5em',
-  [vars$4.borderRadius]: globalRefs$3.radius.xs,
+  [vars$5.hostMinWidth]: '415px',
+  [vars$5.fontFamily]: globalRefs$4.fonts.font1.family,
+  [vars$5.fontSize]: globalRefs$4.typography.body1.size,
+  [vars$5.backgroundColor]: globalRefs$4.colors.surface.main,
+  [vars$5.textColor]: globalRefs$4.colors.surface.contrast,
+  [vars$5.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${shadowColor}`,
+  [vars$5.verticalPadding]: '0.625em',
+  [vars$5.horizontalPadding]: '1.5em',
+  [vars$5.borderRadius]: globalRefs$4.radius.xs,
 
   _bordered: {
-    [vars$4.borderWidth]: globalRefs$3.border.sm,
-    [vars$4.borderStyle]: 'solid',
-    [vars$4.borderColor]: 'transparent',
+    [vars$5.borderWidth]: globalRefs$4.border.sm,
+    [vars$5.borderStyle]: 'solid',
+    [vars$5.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$4.fontSize]: '12px' },
-    sm: { [vars$4.fontSize]: '14px' },
-    md: { [vars$4.fontSize]: '16px' },
-    lg: { [vars$4.fontSize]: '18px' },
+    xs: { [vars$5.fontSize]: '12px' },
+    sm: { [vars$5.fontSize]: '14px' },
+    md: { [vars$5.fontSize]: '16px' },
+    lg: { [vars$5.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$4.backgroundColor]: globalRefs$3.colors.primary.main,
-      [vars$4.textColor]: globalRefs$3.colors.primary.contrast,
-      [vars$4.borderColor]: globalRefs$3.colors.primary.light,
+      [vars$5.backgroundColor]: globalRefs$4.colors.primary.main,
+      [vars$5.textColor]: globalRefs$4.colors.primary.contrast,
+      [vars$5.borderColor]: globalRefs$4.colors.primary.light,
     },
     success: {
-      [vars$4.backgroundColor]: globalRefs$3.colors.success.main,
-      [vars$4.textColor]: globalRefs$3.colors.success.contrast,
-      [vars$4.borderColor]: globalRefs$3.colors.success.light,
+      [vars$5.backgroundColor]: globalRefs$4.colors.success.main,
+      [vars$5.textColor]: globalRefs$4.colors.success.contrast,
+      [vars$5.borderColor]: globalRefs$4.colors.success.light,
     },
     error: {
-      [vars$4.backgroundColor]: globalRefs$3.colors.error.main,
-      [vars$4.textColor]: globalRefs$3.colors.error.contrast,
-      [vars$4.borderColor]: globalRefs$3.colors.error.light,
+      [vars$5.backgroundColor]: globalRefs$4.colors.error.main,
+      [vars$5.textColor]: globalRefs$4.colors.error.contrast,
+      [vars$5.borderColor]: globalRefs$4.colors.error.light,
     },
   },
 };
@@ -9122,10 +9125,10 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$4
+  vars: vars$5
 });
 
-const componentName$5 = getComponentName('multi-select-combo-box');
+const componentName$6 = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -9513,7 +9516,7 @@ const multiSelectComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$1,
+  host: host$2,
   inputField,
   inputElement,
   placeholder,
@@ -9551,10 +9554,10 @@ const {
 const MultiSelectComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$1, property: 'width' },
-      hostDirection: { ...host$1, property: 'direction' },
+      hostWidth: { ...host$2, property: 'width' },
+      hostDirection: { ...host$2, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$1],
+      fontSize: [{}, host$2],
       chipFontSize: { ...chipLabel, property: 'font-size' },
       fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
       labelTextColor: [
@@ -9729,73 +9732,73 @@ 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$5,
+    componentName: componentName$6,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$3 = MultiSelectComboBoxClass.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
+const vars$4 = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$3.hostWidth]: refs.width,
-  [vars$3.hostDirection]: refs.direction,
-  [vars$3.fontSize]: refs.fontSize,
-  [vars$3.fontFamily]: refs.fontFamily,
-  [vars$3.labelTextColor]: refs.labelTextColor,
-  [vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$3.inputBorderColor]: refs.borderColor,
-  [vars$3.inputBorderWidth]: refs.borderWidth,
-  [vars$3.inputBorderStyle]: refs.borderStyle,
-  [vars$3.inputBorderRadius]: refs.borderRadius,
-  [vars$3.inputOutlineColor]: refs.outlineColor,
-  [vars$3.inputOutlineOffset]: refs.outlineOffset,
-  [vars$3.inputOutlineWidth]: refs.outlineWidth,
-  [vars$3.inputOutlineStyle]: refs.outlineStyle,
-  [vars$3.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$3.inputValueTextColor]: refs.valueTextColor,
-  [vars$3.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$3.inputBackgroundColor]: refs.backgroundColor,
-  [vars$3.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$3.inputVerticalPadding]: refs.verticalPadding,
-  [vars$3.inputHeight]: refs.inputHeight,
-  [vars$3.inputDropdownButtonColor]: globalRefs$2.colors.surface.dark,
-  [vars$3.inputDropdownButtonCursor]: 'pointer',
-  [vars$3.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$3.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
-  [vars$3.overlayItemPaddingInlineStart]: globalRefs$2.spacing.xs,
-  [vars$3.overlayItemPaddingInlineEnd]: globalRefs$2.spacing.lg,
-  [vars$3.chipFontSize]: refs.chipFontSize,
-  [vars$3.chipTextColor]: globalRefs$2.colors.surface.contrast,
-  [vars$3.chipBackgroundColor]: globalRefs$2.colors.surface.light,
+  [vars$4.hostWidth]: refs.width,
+  [vars$4.hostDirection]: refs.direction,
+  [vars$4.fontSize]: refs.fontSize,
+  [vars$4.fontFamily]: refs.fontFamily,
+  [vars$4.labelTextColor]: refs.labelTextColor,
+  [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$4.inputBorderColor]: refs.borderColor,
+  [vars$4.inputBorderWidth]: refs.borderWidth,
+  [vars$4.inputBorderStyle]: refs.borderStyle,
+  [vars$4.inputBorderRadius]: refs.borderRadius,
+  [vars$4.inputOutlineColor]: refs.outlineColor,
+  [vars$4.inputOutlineOffset]: refs.outlineOffset,
+  [vars$4.inputOutlineWidth]: refs.outlineWidth,
+  [vars$4.inputOutlineStyle]: refs.outlineStyle,
+  [vars$4.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$4.inputValueTextColor]: refs.valueTextColor,
+  [vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$4.inputBackgroundColor]: refs.backgroundColor,
+  [vars$4.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$4.inputVerticalPadding]: refs.verticalPadding,
+  [vars$4.inputHeight]: refs.inputHeight,
+  [vars$4.inputDropdownButtonColor]: globalRefs$3.colors.surface.dark,
+  [vars$4.inputDropdownButtonCursor]: 'pointer',
+  [vars$4.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$4.inputDropdownButtonOffset]: globalRefs$3.spacing.xs,
+  [vars$4.overlayItemPaddingInlineStart]: globalRefs$3.spacing.xs,
+  [vars$4.overlayItemPaddingInlineEnd]: globalRefs$3.spacing.lg,
+  [vars$4.chipFontSize]: refs.chipFontSize,
+  [vars$4.chipTextColor]: globalRefs$3.colors.surface.contrast,
+  [vars$4.chipBackgroundColor]: globalRefs$3.colors.surface.light,
 
   _readonly: {
-    [vars$3.inputDropdownButtonCursor]: 'default',
+    [vars$4.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$3.overlayFontSize]: refs.fontSize,
-  [vars$3.overlayFontFamily]: refs.fontFamily,
-  [vars$3.overlayCursor]: 'pointer',
-  [vars$3.overlayItemBoxShadow]: 'none',
-  [vars$3.overlayBackground]: refs.backgroundColor,
-  [vars$3.overlayTextColor]: refs.valueTextColor,
+  [vars$4.overlayFontSize]: refs.fontSize,
+  [vars$4.overlayFontFamily]: refs.fontFamily,
+  [vars$4.overlayCursor]: 'pointer',
+  [vars$4.overlayItemBoxShadow]: 'none',
+  [vars$4.overlayBackground]: refs.backgroundColor,
+  [vars$4.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$3.overlay.minHeight]: '400px',
-  [vars$3.overlay.margin]: '0',
+  [vars$4.overlay.minHeight]: '400px',
+  [vars$4.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$3
+  vars: vars$4
 });
 
-const componentName$4 = getComponentName('badge');
+const componentName$5 = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$5, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -9843,66 +9846,66 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
 
-const globalRefs$1 = getThemeRefs(globals);
-const vars$2 = BadgeClass.cssVarList;
+const globalRefs$2 = getThemeRefs(globals);
+const vars$3 = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$2.hostWidth]: 'fit-content',
-  [vars$2.hostDirection]: globalRefs$1.direction,
+  [vars$3.hostWidth]: 'fit-content',
+  [vars$3.hostDirection]: globalRefs$2.direction,
 
-  [vars$2.textAlign]: 'center',
+  [vars$3.textAlign]: 'center',
 
-  [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
-  [vars$2.fontWeight]: '400',
+  [vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
+  [vars$3.fontWeight]: '400',
 
-  [vars$2.verticalPadding]: '0.25em',
-  [vars$2.horizontalPadding]: '0.5em',
+  [vars$3.verticalPadding]: '0.25em',
+  [vars$3.horizontalPadding]: '0.5em',
 
-  [vars$2.borderWidth]: globalRefs$1.border.xs,
-  [vars$2.borderRadius]: globalRefs$1.radius.xs,
-  [vars$2.borderColor]: 'transparent',
-  [vars$2.borderStyle]: 'solid',
+  [vars$3.borderWidth]: globalRefs$2.border.xs,
+  [vars$3.borderRadius]: globalRefs$2.radius.xs,
+  [vars$3.borderColor]: 'transparent',
+  [vars$3.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$2.hostWidth]: '100%',
+    [vars$3.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$2.fontSize]: '12px' },
-    sm: { [vars$2.fontSize]: '14px' },
-    md: { [vars$2.fontSize]: '16px' },
-    lg: { [vars$2.fontSize]: '18px' },
+    xs: { [vars$3.fontSize]: '12px' },
+    sm: { [vars$3.fontSize]: '14px' },
+    md: { [vars$3.fontSize]: '16px' },
+    lg: { [vars$3.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$2.textColor]: globalRefs$1.colors.surface.dark,
+      [vars$3.textColor]: globalRefs$2.colors.surface.dark,
       _bordered: {
-        [vars$2.borderColor]: globalRefs$1.colors.surface.light,
+        [vars$3.borderColor]: globalRefs$2.colors.surface.light,
       },
     },
     primary: {
-      [vars$2.textColor]: globalRefs$1.colors.primary.main,
+      [vars$3.textColor]: globalRefs$2.colors.primary.main,
       _bordered: {
-        [vars$2.borderColor]: globalRefs$1.colors.primary.light,
+        [vars$3.borderColor]: globalRefs$2.colors.primary.light,
       },
     },
     secondary: {
-      [vars$2.textColor]: globalRefs$1.colors.secondary.main,
+      [vars$3.textColor]: globalRefs$2.colors.secondary.main,
       _bordered: {
-        [vars$2.borderColor]: globalRefs$1.colors.secondary.light,
+        [vars$3.borderColor]: globalRefs$2.colors.secondary.light,
       },
     },
     error: {
-      [vars$2.textColor]: globalRefs$1.colors.error.main,
+      [vars$3.textColor]: globalRefs$2.colors.error.main,
       _bordered: {
-        [vars$2.borderColor]: globalRefs$1.colors.error.light,
+        [vars$3.borderColor]: globalRefs$2.colors.error.light,
       },
     },
     success: {
-      [vars$2.textColor]: globalRefs$1.colors.success.main,
+      [vars$3.textColor]: globalRefs$2.colors.success.main,
       _bordered: {
-        [vars$2.borderColor]: globalRefs$1.colors.success.light,
+        [vars$3.borderColor]: globalRefs$2.colors.success.light,
       },
     },
   },
@@ -9911,10 +9914,149 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
+  vars: vars$3
+});
+
+const componentName$4 = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > .wrapper' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+
+        .editable {
+          border: 1px solid;
+          border-radius: 100%;
+          height: fit-content;
+          width: 25%;
+          height: 25%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 5%;
+          box-sizing: border-box;
+          position: absolute;
+          bottom: 0;
+          inset-inline-end: 0;
+        }
+
+        vaadin-icon {
+          color: currentcolor;
+        }
+
+        vaadin-avatar {
+          width: 100%;
+          height: 100%;
+        }
+
+        .wrapper {
+          display: inline-flex;
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+
+
+      <div class="wrapper">
+        <vaadin-avatar></vaadin-avatar>
+        <div class="editable">
+          <vaadin-icon icon="vaadin:pencil"></vaadin-icon>
+        </div>
+      </div>
+		`;
+
+    this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
+
+    forwardAttrs(this, this.avatarComponent, {
+      includeAttrs: ['name', 'img'],
+    });
+
+    const editableIcon = this.shadowRoot.querySelector('.editable');
+
+    observeAttributes(
+      this,
+      () => {
+        editableIcon.style.display = this.isEditable ? '' : 'none';
+      },
+      { includeAttrs: ['editable'] }
+    );
+  }
+
+  get isEditable() {
+    return this.getAttribute('editable') === 'true';
+  }
+}
+
+const { host: host$1, editableBadge, avatar: avatar$2 } = {
+  host: { selector: () => ':host' },
+  editableBadge: { selector: '> .editable' },
+  avatar: { selector: 'vaadin-avatar' },
+};
+
+const AvatarClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host$1, property: 'width' },
+      hostHeight: { ...host$1, property: 'height' },
+      hostDirection: { ...host$1, property: 'direction' },
+      avatarTextColor: { ...avatar$2, property: 'color' },
+      avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
+      editableIconColor: { ...editableBadge, property: 'color' },
+      editableBorderColor: { ...editableBadge, property: 'border-color' },
+      editableBackgroundColor: { ...editableBadge, property: 'background-color' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawAvatar);
+
+const globalRefs$1 = getThemeRefs(globals);
+const compVars = AvatarClass.cssVarList;
+
+const avatar = {
+  [compVars.hostDirection]: globalRefs$1.direction,
+  [compVars.editableIconColor]: globalRefs$1.colors.surface.dark,
+  [compVars.editableBorderColor]: globalRefs$1.colors.surface.dark,
+  [compVars.editableBackgroundColor]: globalRefs$1.colors.surface.main,
+  [compVars.avatarTextColor]: globalRefs$1.colors.surface.main,
+  [compVars.avatarBackgroundColor]: globalRefs$1.colors.surface.dark,
+
+  size: {
+    xs: {
+      [compVars.hostWidth]: '30px',
+      [compVars.hostHeight]: '30px',
+    },
+    sm: {
+      [compVars.hostWidth]: '40px',
+      [compVars.hostHeight]: '40px',
+    },
+    md: {
+      [compVars.hostWidth]: '60px',
+      [compVars.hostHeight]: '60px',
+    },
+    lg: {
+      [compVars.hostWidth]: '98px',
+      [compVars.hostHeight]: '98px',
+    },
+  },
+};
+
+const vars$2 = {
+  ...compVars,
+};
+
+var avatar$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: avatar,
   vars: vars$2
 });
 
-customElements.define(componentName$t, TextClass);
+customElements.define(componentName$u, TextClass);
 
 const componentName$3 = getComponentName('mappings-field-internal');
 
@@ -10125,6 +10267,7 @@ const components = {
   notificationCard,
   multiSelectComboBox: multiSelectComboBox$1,
   badge: badge$1,
+  avatar: avatar$1,
   mappingsField: mappingsField$1,
 };
 
@@ -10138,7 +10281,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$z, components: vars };
+const themeVars = { globals: vars$A, components: vars };
 
 const colors = {
   surface: {
@@ -10440,6 +10583,9 @@ const NotificationClass = compose(
   })
 );
 
+customElements.define(componentName$4, AvatarClass);
+
+exports.AvatarClass = AvatarClass;
 exports.BadgeClass = BadgeClass;
 exports.ButtonClass = ButtonClass;
 exports.ButtonMultiSelectionGroupClass = ButtonMultiSelectionGroupClass;