@descope/web-components-ui 1.0.234 → 1.0.236

package/dist/cjs/index.cjs.js

@@ -499,7 +499,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$u = getThemeVars(globals);
+const vars$v = getThemeVars(globals);
 
 const createCssVarFallback = (first, ...rest) =>
   `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
@@ -2367,7 +2367,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$A = getComponentName('button');
+const componentName$B = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -2468,7 +2468,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
 
@@ -2505,31 +2505,31 @@ loadingIndicatorStyles = `
 	}
 `;
 
-const globalRefs$f = getThemeRefs(globals);
+const globalRefs$g = getThemeRefs(globals);
 const compVars$4 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$f.colors.primary,
-  secondary: globalRefs$f.colors.secondary,
-  success: globalRefs$f.colors.success,
-  error: globalRefs$f.colors.error,
-  surface: globalRefs$f.colors.surface,
+  primary: globalRefs$g.colors.primary,
+  secondary: globalRefs$g.colors.secondary,
+  success: globalRefs$g.colors.success,
+  error: globalRefs$g.colors.error,
+  surface: globalRefs$g.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$A);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$B);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$4.fontFamily]: globalRefs$f.fonts.font1.family,
+  [compVars$4.fontFamily]: globalRefs$g.fonts.font1.family,
 
   [compVars$4.cursor]: 'pointer',
   [compVars$4.hostHeight]: '3em',
   [compVars$4.hostWidth]: 'auto',
-  [compVars$4.hostDirection]: globalRefs$f.direction,
+  [compVars$4.hostDirection]: globalRefs$g.direction,
 
-  [compVars$4.borderRadius]: globalRefs$f.radius.sm,
-  [compVars$4.borderWidth]: globalRefs$f.border.xs,
+  [compVars$4.borderRadius]: globalRefs$g.radius.sm,
+  [compVars$4.borderWidth]: globalRefs$g.border.xs,
   [compVars$4.borderStyle]: 'solid',
   [compVars$4.borderColor]: 'transparent',
 
@@ -2565,10 +2565,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$f.colors.surface.main,
-    [helperVars$3.dark]: globalRefs$f.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$f.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$f.colors.surface.contrast,
+    [helperVars$3.main]: globalRefs$g.colors.surface.main,
+    [helperVars$3.dark]: globalRefs$g.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$g.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$g.colors.surface.contrast,
   },
 
   variant: {
@@ -2610,11 +2610,11 @@ const button = {
   },
 
   _focused: {
-    [compVars$4.outlineColor]: globalRefs$f.colors.surface.main,
+    [compVars$4.outlineColor]: globalRefs$g.colors.surface.main,
   },
 };
 
-const vars$t = {
+const vars$u = {
   ...compVars$4,
   ...helperVars$3,
 };
@@ -2622,7 +2622,7 @@ const vars$t = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$t
+  vars: vars$u
 });
 
 const { host: host$f, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
@@ -2809,7 +2809,7 @@ const resetInputLabelPosition = (name) => `
     }
 `;
 
-const componentName$z = getComponentName('text-field');
+const componentName$A = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -2859,26 +2859,26 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$z,
+    componentName: componentName$A,
   })
 );
 
-const componentName$y = getComponentName('input-wrapper');
-const globalRefs$e = getThemeRefs(globals);
+const componentName$z = getComponentName('input-wrapper');
+const globalRefs$f = getThemeRefs(globals);
 
-const [theme$1, refs, vars$s] = createHelperVars(
+const [theme$1, refs, vars$t] = createHelperVars(
   {
-    labelTextColor: globalRefs$e.colors.surface.contrast,
-    valueTextColor: globalRefs$e.colors.surface.contrast,
-    placeholderTextColor: globalRefs$e.colors.surface.main,
+    labelTextColor: globalRefs$f.colors.surface.contrast,
+    valueTextColor: globalRefs$f.colors.surface.contrast,
+    placeholderTextColor: globalRefs$f.colors.surface.main,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$e.colors.error.main,
+    errorMessageTextColor: globalRefs$f.colors.error.main,
 
-    borderWidth: globalRefs$e.border.xs,
-    borderRadius: globalRefs$e.radius.xs,
+    borderWidth: globalRefs$f.border.xs,
+    borderRadius: globalRefs$f.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$e.border.sm,
+    outlineWidth: globalRefs$f.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
@@ -2889,11 +2889,11 @@ const [theme$1, refs, vars$s] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$e.colors.surface.light,
+    backgroundColor: globalRefs$f.colors.surface.light,
 
-    fontFamily: globalRefs$e.fonts.font1.family,
+    fontFamily: globalRefs$f.fonts.font1.family,
 
-    direction: globalRefs$e.direction,
+    direction: globalRefs$f.direction,
 
     size: {
       xs: { fontSize: '12px' },
@@ -2907,70 +2907,70 @@ const [theme$1, refs, vars$s] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$e.colors.surface.main,
+      outlineColor: globalRefs$f.colors.surface.main,
       _invalid: {
-        outlineColor: globalRefs$e.colors.error.main,
+        outlineColor: globalRefs$f.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$e.border.xs,
-      borderColor: globalRefs$e.colors.surface.main,
+      outlineWidth: globalRefs$f.border.xs,
+      borderColor: globalRefs$f.colors.surface.main,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$e.colors.error.main,
+        borderColor: globalRefs$f.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$e.colors.surface.main,
-      borderColor: globalRefs$e.colors.surface.main,
-      valueTextColor: globalRefs$e.colors.surface.dark,
-      placeholderTextColor: globalRefs$e.colors.surface.dark,
-      backgroundColor: globalRefs$e.colors.surface.main,
+      labelTextColor: globalRefs$f.colors.surface.main,
+      borderColor: globalRefs$f.colors.surface.main,
+      valueTextColor: globalRefs$f.colors.surface.dark,
+      placeholderTextColor: globalRefs$f.colors.surface.dark,
+      backgroundColor: globalRefs$f.colors.surface.main,
     },
   },
-  componentName$y
+  componentName$z
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$s
+  vars: vars$t
 });
 
-const vars$r = TextFieldClass.cssVarList;
+const vars$s = TextFieldClass.cssVarList;
 
 const textField = {
-  [vars$r.hostWidth]: refs.width,
-  [vars$r.hostMinWidth]: refs.minWidth,
-  [vars$r.hostDirection]: refs.direction,
-  [vars$r.fontSize]: refs.fontSize,
-  [vars$r.fontFamily]: refs.fontFamily,
-  [vars$r.labelTextColor]: refs.labelTextColor,
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$r.inputValueTextColor]: refs.valueTextColor,
-  [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$r.inputBorderWidth]: refs.borderWidth,
-  [vars$r.inputBorderStyle]: refs.borderStyle,
-  [vars$r.inputBorderColor]: refs.borderColor,
-  [vars$r.inputBorderRadius]: refs.borderRadius,
-  [vars$r.inputOutlineWidth]: refs.outlineWidth,
-  [vars$r.inputOutlineStyle]: refs.outlineStyle,
-  [vars$r.inputOutlineColor]: refs.outlineColor,
-  [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.inputBackgroundColor]: refs.backgroundColor,
-  [vars$r.inputHeight]: refs.inputHeight,
-  [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
+  [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.inputValueTextColor]: refs.valueTextColor,
+  [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$s.inputBorderWidth]: refs.borderWidth,
+  [vars$s.inputBorderStyle]: refs.borderStyle,
+  [vars$s.inputBorderColor]: refs.borderColor,
+  [vars$s.inputBorderRadius]: refs.borderRadius,
+  [vars$s.inputOutlineWidth]: refs.outlineWidth,
+  [vars$s.inputOutlineStyle]: refs.outlineStyle,
+  [vars$s.inputOutlineColor]: refs.outlineColor,
+  [vars$s.inputOutlineOffset]: refs.outlineOffset,
+  [vars$s.inputBackgroundColor]: refs.backgroundColor,
+  [vars$s.inputHeight]: refs.inputHeight,
+  [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
 };
 
 var textField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textField,
   textField: textField,
-  vars: vars$r
+  vars: vars$s
 });
 
 const passwordDraggableMixin = (superclass) =>
@@ -3007,7 +3007,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$x = getComponentName('password');
+const componentName$y = getComponentName('password');
 
 const {
   host: host$e,
@@ -3138,45 +3138,45 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$x,
+    componentName: componentName$y,
   })
 );
 
-const globalRefs$d = getThemeRefs(globals);
-const vars$q = PasswordClass.cssVarList;
+const globalRefs$e = getThemeRefs(globals);
+const vars$r = PasswordClass.cssVarList;
 
 const password = {
-  [vars$q.hostWidth]: refs.width,
-  [vars$q.hostDirection]: refs.direction,
-  [vars$q.fontSize]: refs.fontSize,
-  [vars$q.fontFamily]: refs.fontFamily,
-  [vars$q.labelTextColor]: refs.labelTextColor,
-  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$q.inputHeight]: refs.inputHeight,
-  [vars$q.inputBackgroundColor]: refs.backgroundColor,
-  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$q.inputValueTextColor]: refs.valueTextColor,
-  [vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$q.inputBorderWidth]: refs.borderWidth,
-  [vars$q.inputBorderStyle]: refs.borderStyle,
-  [vars$q.inputBorderColor]: refs.borderColor,
-  [vars$q.inputBorderRadius]: refs.borderRadius,
-  [vars$q.inputOutlineWidth]: refs.outlineWidth,
-  [vars$q.inputOutlineStyle]: refs.outlineStyle,
-  [vars$q.inputOutlineColor]: refs.outlineColor,
-  [vars$q.inputOutlineOffset]: refs.outlineOffset,
-  [vars$q.revealButtonOffset]: globalRefs$d.spacing.md,
-  [vars$q.revealButtonSize]: refs.toggleButtonSize,
+  [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.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$r.inputHeight]: refs.inputHeight,
+  [vars$r.inputBackgroundColor]: refs.backgroundColor,
+  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$r.inputValueTextColor]: refs.valueTextColor,
+  [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$r.inputBorderWidth]: refs.borderWidth,
+  [vars$r.inputBorderStyle]: refs.borderStyle,
+  [vars$r.inputBorderColor]: refs.borderColor,
+  [vars$r.inputBorderRadius]: refs.borderRadius,
+  [vars$r.inputOutlineWidth]: refs.outlineWidth,
+  [vars$r.inputOutlineStyle]: refs.outlineStyle,
+  [vars$r.inputOutlineColor]: refs.outlineColor,
+  [vars$r.inputOutlineOffset]: refs.outlineOffset,
+  [vars$r.revealButtonOffset]: globalRefs$e.spacing.md,
+  [vars$r.revealButtonSize]: refs.toggleButtonSize,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: password,
-  vars: vars$q
+  vars: vars$r
 });
 
-const componentName$w = getComponentName('number-field');
+const componentName$x = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -3202,43 +3202,43 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$w,
+    componentName: componentName$x,
   })
 );
 
-const vars$p = NumberFieldClass.cssVarList;
+const vars$q = NumberFieldClass.cssVarList;
 
 const numberField = {
-  [vars$p.hostWidth]: refs.width,
-  [vars$p.hostMinWidth]: refs.minWidth,
-  [vars$p.hostDirection]: refs.direction,
-  [vars$p.fontSize]: refs.fontSize,
-  [vars$p.fontFamily]: refs.fontFamily,
-  [vars$p.labelTextColor]: refs.labelTextColor,
-  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$p.inputValueTextColor]: refs.valueTextColor,
-  [vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$p.inputBorderWidth]: refs.borderWidth,
-  [vars$p.inputBorderStyle]: refs.borderStyle,
-  [vars$p.inputBorderColor]: refs.borderColor,
-  [vars$p.inputBorderRadius]: refs.borderRadius,
-  [vars$p.inputOutlineWidth]: refs.outlineWidth,
-  [vars$p.inputOutlineStyle]: refs.outlineStyle,
-  [vars$p.inputOutlineColor]: refs.outlineColor,
-  [vars$p.inputOutlineOffset]: refs.outlineOffset,
-  [vars$p.inputBackgroundColor]: refs.backgroundColor,
-  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$p.inputHeight]: refs.inputHeight,
+  [vars$q.hostWidth]: refs.width,
+  [vars$q.hostMinWidth]: refs.minWidth,
+  [vars$q.hostDirection]: refs.direction,
+  [vars$q.fontSize]: refs.fontSize,
+  [vars$q.fontFamily]: refs.fontFamily,
+  [vars$q.labelTextColor]: refs.labelTextColor,
+  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$q.inputValueTextColor]: refs.valueTextColor,
+  [vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$q.inputBorderWidth]: refs.borderWidth,
+  [vars$q.inputBorderStyle]: refs.borderStyle,
+  [vars$q.inputBorderColor]: refs.borderColor,
+  [vars$q.inputBorderRadius]: refs.borderRadius,
+  [vars$q.inputOutlineWidth]: refs.outlineWidth,
+  [vars$q.inputOutlineStyle]: refs.outlineStyle,
+  [vars$q.inputOutlineColor]: refs.outlineColor,
+  [vars$q.inputOutlineOffset]: refs.outlineOffset,
+  [vars$q.inputBackgroundColor]: refs.backgroundColor,
+  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$q.inputHeight]: refs.inputHeight,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: numberField,
-  vars: vars$p
+  vars: vars$q
 });
 
-const componentName$v = getComponentName('email-field');
+const componentName$w = getComponentName('email-field');
 
 const customMixin$6 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -3273,43 +3273,43 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$v,
+    componentName: componentName$w,
   })
 );
 
-const vars$o = EmailFieldClass.cssVarList;
+const vars$p = EmailFieldClass.cssVarList;
 
 const emailField = {
-  [vars$o.hostWidth]: refs.width,
-  [vars$o.hostMinWidth]: refs.minWidth,
-  [vars$o.hostDirection]: refs.direction,
-  [vars$o.fontSize]: refs.fontSize,
-  [vars$o.fontFamily]: refs.fontFamily,
-  [vars$o.labelTextColor]: refs.labelTextColor,
-  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$o.inputValueTextColor]: refs.valueTextColor,
-  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$o.inputBorderWidth]: refs.borderWidth,
-  [vars$o.inputBorderStyle]: refs.borderStyle,
-  [vars$o.inputBorderColor]: refs.borderColor,
-  [vars$o.inputBorderRadius]: refs.borderRadius,
-  [vars$o.inputOutlineWidth]: refs.outlineWidth,
-  [vars$o.inputOutlineStyle]: refs.outlineStyle,
-  [vars$o.inputOutlineColor]: refs.outlineColor,
-  [vars$o.inputOutlineOffset]: refs.outlineOffset,
-  [vars$o.inputBackgroundColor]: refs.backgroundColor,
-  [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$o.inputHeight]: refs.inputHeight,
+  [vars$p.hostWidth]: refs.width,
+  [vars$p.hostMinWidth]: refs.minWidth,
+  [vars$p.hostDirection]: refs.direction,
+  [vars$p.fontSize]: refs.fontSize,
+  [vars$p.fontFamily]: refs.fontFamily,
+  [vars$p.labelTextColor]: refs.labelTextColor,
+  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$p.inputValueTextColor]: refs.valueTextColor,
+  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$p.inputBorderWidth]: refs.borderWidth,
+  [vars$p.inputBorderStyle]: refs.borderStyle,
+  [vars$p.inputBorderColor]: refs.borderColor,
+  [vars$p.inputBorderRadius]: refs.borderRadius,
+  [vars$p.inputOutlineWidth]: refs.outlineWidth,
+  [vars$p.inputOutlineStyle]: refs.outlineStyle,
+  [vars$p.inputOutlineColor]: refs.outlineColor,
+  [vars$p.inputOutlineOffset]: refs.outlineOffset,
+  [vars$p.inputBackgroundColor]: refs.backgroundColor,
+  [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$p.inputHeight]: refs.inputHeight,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: emailField,
-  vars: vars$o
+  vars: vars$p
 });
 
-const componentName$u = getComponentName('text-area');
+const componentName$v = getComponentName('text-area');
 
 const {
   host: host$d,
@@ -3384,49 +3384,49 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$u,
+    componentName: componentName$v,
   })
 );
 
-const globalRefs$c = getThemeRefs(globals);
-const vars$n = TextAreaClass.cssVarList;
+const globalRefs$d = getThemeRefs(globals);
+const vars$o = TextAreaClass.cssVarList;
 
 const textArea = {
-  [vars$n.hostWidth]: refs.width,
-  [vars$n.hostMinWidth]: refs.minWidth,
-  [vars$n.hostDirection]: refs.direction,
-  [vars$n.fontSize]: refs.fontSize,
-  [vars$n.fontFamily]: refs.fontFamily,
-  [vars$n.labelTextColor]: refs.labelTextColor,
-  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$n.inputBackgroundColor]: refs.backgroundColor,
-  [vars$n.inputValueTextColor]: refs.valueTextColor,
-  [vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$n.inputBorderRadius]: refs.borderRadius,
-  [vars$n.inputBorderWidth]: refs.borderWidth,
-  [vars$n.inputBorderStyle]: refs.borderStyle,
-  [vars$n.inputBorderColor]: refs.borderColor,
-  [vars$n.inputOutlineWidth]: refs.outlineWidth,
-  [vars$n.inputOutlineStyle]: refs.outlineStyle,
-  [vars$n.inputOutlineColor]: refs.outlineColor,
-  [vars$n.inputOutlineOffset]: refs.outlineOffset,
-  [vars$n.inputResizeType]: 'vertical',
-  [vars$n.inputMinHeight]: '5em',
+  [vars$o.hostWidth]: refs.width,
+  [vars$o.hostMinWidth]: refs.minWidth,
+  [vars$o.hostDirection]: refs.direction,
+  [vars$o.fontSize]: refs.fontSize,
+  [vars$o.fontFamily]: refs.fontFamily,
+  [vars$o.labelTextColor]: refs.labelTextColor,
+  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$o.inputBackgroundColor]: refs.backgroundColor,
+  [vars$o.inputValueTextColor]: refs.valueTextColor,
+  [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$o.inputBorderRadius]: refs.borderRadius,
+  [vars$o.inputBorderWidth]: refs.borderWidth,
+  [vars$o.inputBorderStyle]: refs.borderStyle,
+  [vars$o.inputBorderColor]: refs.borderColor,
+  [vars$o.inputOutlineWidth]: refs.outlineWidth,
+  [vars$o.inputOutlineStyle]: refs.outlineStyle,
+  [vars$o.inputOutlineColor]: refs.outlineColor,
+  [vars$o.inputOutlineOffset]: refs.outlineOffset,
+  [vars$o.inputResizeType]: 'vertical',
+  [vars$o.inputMinHeight]: '5em',
 
   _disabled: {
-    [vars$n.inputBackgroundColor]: globalRefs$c.colors.surface.light,
+    [vars$o.inputBackgroundColor]: globalRefs$d.colors.surface.light,
   },
 
   _readonly: {
-    [vars$n.inputResizeType]: 'none',
+    [vars$o.inputResizeType]: 'none',
   },
 };
 
 var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textArea,
-  vars: vars$n
+  vars: vars$o
 });
 
 const createBaseInputClass = (...args) =>
@@ -3437,9 +3437,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$t = getComponentName('boolean-field-internal');
+const componentName$u = getComponentName('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -3448,14 +3448,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$t}
+				<${componentName$u}
 					tabindex="-1"
 					slot="input"
-				></${componentName$t}>
+				></${componentName$u}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$t);
+      this.inputElement = this.shadowRoot.querySelector(componentName$u);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -3525,7 +3525,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$s = getComponentName('checkbox');
+const componentName$t = getComponentName('checkbox');
 
 const {
   host: host$c,
@@ -3631,51 +3631,51 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$s,
+    componentName: componentName$t,
   })
 );
 
-const vars$m = CheckboxClass.cssVarList;
+const vars$n = CheckboxClass.cssVarList;
 const checkboxSize = '1.35em';
 
 const checkbox = {
-  [vars$m.hostWidth]: refs.width,
-  [vars$m.hostDirection]: refs.direction,
-  [vars$m.fontSize]: refs.fontSize,
-  [vars$m.fontFamily]: refs.fontFamily,
-  [vars$m.labelTextColor]: refs.labelTextColor,
-  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$m.labelFontWeight]: '400',
-  [vars$m.labelLineHeight]: checkboxSize,
-  [vars$m.labelSpacing]: '1em',
-  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$m.inputOutlineWidth]: refs.outlineWidth,
-  [vars$m.inputOutlineOffset]: refs.outlineOffset,
-  [vars$m.inputOutlineColor]: refs.outlineColor,
-  [vars$m.inputOutlineStyle]: refs.outlineStyle,
-  [vars$m.inputBorderRadius]: refs.borderRadius,
-  [vars$m.inputBorderColor]: refs.borderColor,
-  [vars$m.inputBorderWidth]: refs.borderWidth,
-  [vars$m.inputBorderStyle]: refs.borderStyle,
-  [vars$m.inputBackgroundColor]: refs.backgroundColor,
-  [vars$m.inputSize]: checkboxSize,
+  [vars$n.hostWidth]: refs.width,
+  [vars$n.hostDirection]: refs.direction,
+  [vars$n.fontSize]: refs.fontSize,
+  [vars$n.fontFamily]: refs.fontFamily,
+  [vars$n.labelTextColor]: refs.labelTextColor,
+  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$n.labelFontWeight]: '400',
+  [vars$n.labelLineHeight]: checkboxSize,
+  [vars$n.labelSpacing]: '1em',
+  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$n.inputOutlineWidth]: refs.outlineWidth,
+  [vars$n.inputOutlineOffset]: refs.outlineOffset,
+  [vars$n.inputOutlineColor]: refs.outlineColor,
+  [vars$n.inputOutlineStyle]: refs.outlineStyle,
+  [vars$n.inputBorderRadius]: refs.borderRadius,
+  [vars$n.inputBorderColor]: refs.borderColor,
+  [vars$n.inputBorderWidth]: refs.borderWidth,
+  [vars$n.inputBorderStyle]: refs.borderStyle,
+  [vars$n.inputBackgroundColor]: refs.backgroundColor,
+  [vars$n.inputSize]: checkboxSize,
 
   _checked: {
-    [vars$m.inputValueTextColor]: refs.valueTextColor,
+    [vars$n.inputValueTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$m.labelTextColor]: refs.labelTextColor,
+    [vars$n.labelTextColor]: refs.labelTextColor,
   },
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: checkbox,
-  vars: vars$m
+  vars: vars$n
 });
 
-const componentName$r = getComponentName('switch-toggle');
+const componentName$s = getComponentName('switch-toggle');
 
 const {
   host: host$b,
@@ -3807,83 +3807,83 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$r,
+    componentName: componentName$s,
   })
 );
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
-const globalRefs$b = getThemeRefs(globals);
-const vars$l = SwitchToggleClass.cssVarList;
+const globalRefs$c = getThemeRefs(globals);
+const vars$m = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-  [vars$l.hostWidth]: refs.width,
-  [vars$l.hostDirection]: refs.direction,
-  [vars$l.fontSize]: refs.fontSize,
-  [vars$l.fontFamily]: refs.fontFamily,
-
-  [vars$l.inputOutlineWidth]: refs.outlineWidth,
-  [vars$l.inputOutlineOffset]: refs.outlineOffset,
-  [vars$l.inputOutlineColor]: refs.outlineColor,
-  [vars$l.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$l.trackBorderStyle]: refs.borderStyle,
-  [vars$l.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$l.trackBorderColor]: refs.borderColor,
-  [vars$l.trackBackgroundColor]: 'none',
-  [vars$l.trackBorderRadius]: globalRefs$b.radius.md,
-  [vars$l.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$l.trackHeight]: checkboxHeight,
-
-  [vars$l.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$l.knobRadius]: '50%',
-  [vars$l.knobTopOffset]: '1px',
-  [vars$l.knobLeftOffset]: knobMargin,
-  [vars$l.knobColor]: refs.valueTextColor,
-  [vars$l.knobTransitionDuration]: '0.3s',
-
-  [vars$l.labelTextColor]: refs.labelTextColor,
-  [vars$l.labelFontWeight]: '400',
-  [vars$l.labelLineHeight]: '1.35em',
-  [vars$l.labelSpacing]: '1em',
-  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$m.hostWidth]: refs.width,
+  [vars$m.hostDirection]: refs.direction,
+  [vars$m.fontSize]: refs.fontSize,
+  [vars$m.fontFamily]: refs.fontFamily,
+
+  [vars$m.inputOutlineWidth]: refs.outlineWidth,
+  [vars$m.inputOutlineOffset]: refs.outlineOffset,
+  [vars$m.inputOutlineColor]: refs.outlineColor,
+  [vars$m.inputOutlineStyle]: refs.outlineStyle,
+
+  [vars$m.trackBorderStyle]: refs.borderStyle,
+  [vars$m.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$m.trackBorderColor]: refs.borderColor,
+  [vars$m.trackBackgroundColor]: 'none',
+  [vars$m.trackBorderRadius]: globalRefs$c.radius.md,
+  [vars$m.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$m.trackHeight]: checkboxHeight,
+
+  [vars$m.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$m.knobRadius]: '50%',
+  [vars$m.knobTopOffset]: '1px',
+  [vars$m.knobLeftOffset]: knobMargin,
+  [vars$m.knobColor]: refs.valueTextColor,
+  [vars$m.knobTransitionDuration]: '0.3s',
+
+  [vars$m.labelTextColor]: refs.labelTextColor,
+  [vars$m.labelFontWeight]: '400',
+  [vars$m.labelLineHeight]: '1.35em',
+  [vars$m.labelSpacing]: '1em',
+  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$l.trackBorderColor]: refs.borderColor,
-    [vars$l.trackBackgroundColor]: refs.backgroundColor,
-    [vars$l.knobLeftOffset]: `calc(100% - var(${vars$l.knobSize}) - ${knobMargin})`,
-    [vars$l.knobColor]: refs.valueTextColor,
-    [vars$l.knobTextColor]: refs.valueTextColor,
+    [vars$m.trackBorderColor]: refs.borderColor,
+    [vars$m.trackBackgroundColor]: refs.backgroundColor,
+    [vars$m.knobLeftOffset]: `calc(100% - var(${vars$m.knobSize}) - ${knobMargin})`,
+    [vars$m.knobColor]: refs.valueTextColor,
+    [vars$m.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$l.knobColor]: globalRefs$b.colors.surface.light,
-    [vars$l.trackBorderColor]: globalRefs$b.colors.surface.main,
-    [vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
-    [vars$l.labelTextColor]: refs.labelTextColor,
+    [vars$m.knobColor]: globalRefs$c.colors.surface.light,
+    [vars$m.trackBorderColor]: globalRefs$c.colors.surface.main,
+    [vars$m.trackBackgroundColor]: globalRefs$c.colors.surface.main,
+    [vars$m.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$l.knobColor]: globalRefs$b.colors.surface.light,
-      [vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
+      [vars$m.knobColor]: globalRefs$c.colors.surface.light,
+      [vars$m.trackBackgroundColor]: globalRefs$c.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$l.trackBorderColor]: globalRefs$b.colors.error.main,
-    [vars$l.knobColor]: globalRefs$b.colors.error.main,
+    [vars$m.trackBorderColor]: globalRefs$c.colors.error.main,
+    [vars$m.knobColor]: globalRefs$c.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$l
+  vars: vars$m
 });
 
-const componentName$q = getComponentName('container');
+const componentName$r = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$q, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$r, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -3935,7 +3935,7 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 
 const compVars$3 = ContainerClass.cssVarList;
 
@@ -3957,7 +3957,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$q
+  componentName$r
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -3967,8 +3967,8 @@ const container = {
 
   [compVars$3.hostWidth]: '100%',
   [compVars$3.boxShadow]: 'none',
-  [compVars$3.backgroundColor]: globalRefs$a.colors.surface.light,
-  [compVars$3.color]: globalRefs$a.colors.surface.contrast,
+  [compVars$3.backgroundColor]: globalRefs$b.colors.surface.light,
+  [compVars$3.color]: globalRefs$b.colors.surface.contrast,
   [compVars$3.borderRadius]: '0px',
 
   verticalPadding: {
@@ -4015,34 +4015,34 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.md} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.md} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide['2xl']} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$3.borderRadius]: globalRefs$a.radius.sm },
-    md: { [compVars$3.borderRadius]: globalRefs$a.radius.md },
-    lg: { [compVars$3.borderRadius]: globalRefs$a.radius.lg },
-    xl: { [compVars$3.borderRadius]: globalRefs$a.radius.xl },
-    '2xl': { [compVars$3.borderRadius]: globalRefs$a.radius['2xl'] },
-    '3xl': { [compVars$3.borderRadius]: globalRefs$a.radius['3xl'] },
+    sm: { [compVars$3.borderRadius]: globalRefs$b.radius.sm },
+    md: { [compVars$3.borderRadius]: globalRefs$b.radius.md },
+    lg: { [compVars$3.borderRadius]: globalRefs$b.radius.lg },
+    xl: { [compVars$3.borderRadius]: globalRefs$b.radius.xl },
+    '2xl': { [compVars$3.borderRadius]: globalRefs$b.radius['2xl'] },
+    '3xl': { [compVars$3.borderRadius]: globalRefs$b.radius['3xl'] },
   },
 };
 
-const vars$k = {
+const vars$l = {
   ...compVars$3,
   ...helperVars$2,
 };
@@ -4050,7 +4050,7 @@ const vars$k = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$k
+  vars: vars$l
 });
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4103,51 +4103,51 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$p = getComponentName('logo');
+const componentName$q = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$p,
+  componentName: componentName$q,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$j = LogoClass.cssVarList;
+const vars$k = LogoClass.cssVarList;
 
 const logo$1 = {
-  [vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$j
+  vars: vars$k
 });
 
-const componentName$o = getComponentName('totp-image');
+const componentName$p = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$o,
+  componentName: componentName$p,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$i = TotpImageClass.cssVarList;
+const vars$j = TotpImageClass.cssVarList;
 
 const logo = {
-  [vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$i
+  vars: vars$j
 });
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$n = getComponentName('text');
+const componentName$o = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -4207,99 +4207,99 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$h = TextClass.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const vars$i = TextClass.cssVarList;
 
 const text$2 = {
-  [vars$h.hostDirection]: globalRefs$9.direction,
-  [vars$h.textLineHeight]: '1.35em',
-  [vars$h.textAlign]: 'left',
-  [vars$h.textColor]: globalRefs$9.colors.surface.dark,
+  [vars$i.hostDirection]: globalRefs$a.direction,
+  [vars$i.textLineHeight]: '1.35em',
+  [vars$i.textAlign]: 'left',
+  [vars$i.textColor]: globalRefs$a.colors.surface.dark,
   variant: {
     h1: {
-      [vars$h.fontSize]: globalRefs$9.typography.h1.size,
-      [vars$h.fontWeight]: globalRefs$9.typography.h1.weight,
-      [vars$h.fontFamily]: globalRefs$9.typography.h1.font,
+      [vars$i.fontSize]: globalRefs$a.typography.h1.size,
+      [vars$i.fontWeight]: globalRefs$a.typography.h1.weight,
+      [vars$i.fontFamily]: globalRefs$a.typography.h1.font,
     },
     h2: {
-      [vars$h.fontSize]: globalRefs$9.typography.h2.size,
-      [vars$h.fontWeight]: globalRefs$9.typography.h2.weight,
-      [vars$h.fontFamily]: globalRefs$9.typography.h2.font,
+      [vars$i.fontSize]: globalRefs$a.typography.h2.size,
+      [vars$i.fontWeight]: globalRefs$a.typography.h2.weight,
+      [vars$i.fontFamily]: globalRefs$a.typography.h2.font,
     },
     h3: {
-      [vars$h.fontSize]: globalRefs$9.typography.h3.size,
-      [vars$h.fontWeight]: globalRefs$9.typography.h3.weight,
-      [vars$h.fontFamily]: globalRefs$9.typography.h3.font,
+      [vars$i.fontSize]: globalRefs$a.typography.h3.size,
+      [vars$i.fontWeight]: globalRefs$a.typography.h3.weight,
+      [vars$i.fontFamily]: globalRefs$a.typography.h3.font,
     },
     subtitle1: {
-      [vars$h.fontSize]: globalRefs$9.typography.subtitle1.size,
-      [vars$h.fontWeight]: globalRefs$9.typography.subtitle1.weight,
-      [vars$h.fontFamily]: globalRefs$9.typography.subtitle1.font,
+      [vars$i.fontSize]: globalRefs$a.typography.subtitle1.size,
+      [vars$i.fontWeight]: globalRefs$a.typography.subtitle1.weight,
+      [vars$i.fontFamily]: globalRefs$a.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$h.fontSize]: globalRefs$9.typography.subtitle2.size,
-      [vars$h.fontWeight]: globalRefs$9.typography.subtitle2.weight,
-      [vars$h.fontFamily]: globalRefs$9.typography.subtitle2.font,
+      [vars$i.fontSize]: globalRefs$a.typography.subtitle2.size,
+      [vars$i.fontWeight]: globalRefs$a.typography.subtitle2.weight,
+      [vars$i.fontFamily]: globalRefs$a.typography.subtitle2.font,
     },
     body1: {
-      [vars$h.fontSize]: globalRefs$9.typography.body1.size,
-      [vars$h.fontWeight]: globalRefs$9.typography.body1.weight,
-      [vars$h.fontFamily]: globalRefs$9.typography.body1.font,
+      [vars$i.fontSize]: globalRefs$a.typography.body1.size,
+      [vars$i.fontWeight]: globalRefs$a.typography.body1.weight,
+      [vars$i.fontFamily]: globalRefs$a.typography.body1.font,
     },
     body2: {
-      [vars$h.fontSize]: globalRefs$9.typography.body2.size,
-      [vars$h.fontWeight]: globalRefs$9.typography.body2.weight,
-      [vars$h.fontFamily]: globalRefs$9.typography.body2.font,
+      [vars$i.fontSize]: globalRefs$a.typography.body2.size,
+      [vars$i.fontWeight]: globalRefs$a.typography.body2.weight,
+      [vars$i.fontFamily]: globalRefs$a.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$h.textColor]: globalRefs$9.colors.primary.main,
+      [vars$i.textColor]: globalRefs$a.colors.primary.main,
     },
     secondary: {
-      [vars$h.textColor]: globalRefs$9.colors.secondary.main,
+      [vars$i.textColor]: globalRefs$a.colors.secondary.main,
     },
     error: {
-      [vars$h.textColor]: globalRefs$9.colors.error.main,
+      [vars$i.textColor]: globalRefs$a.colors.error.main,
     },
     success: {
-      [vars$h.textColor]: globalRefs$9.colors.success.main,
+      [vars$i.textColor]: globalRefs$a.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$h.textAlign]: 'right' },
-    left: { [vars$h.textAlign]: 'left' },
-    center: { [vars$h.textAlign]: 'center' },
+    right: { [vars$i.textAlign]: 'right' },
+    left: { [vars$i.textAlign]: 'left' },
+    center: { [vars$i.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$h.hostWidth]: '100%',
+    [vars$i.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$h.fontStyle]: 'italic',
+    [vars$i.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$h.textTransform]: 'uppercase',
+    [vars$i.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$h.textTransform]: 'lowercase',
+    [vars$i.textTransform]: 'lowercase',
   },
 };
 
 var text$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$2,
-  vars: vars$h
+  vars: vars$i
 });
 
-const componentName$m = getComponentName('link');
+const componentName$n = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$m, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$n, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -4364,37 +4364,37 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-const globalRefs$8 = getThemeRefs(globals);
-const vars$g = LinkClass.cssVarList;
+const globalRefs$9 = getThemeRefs(globals);
+const vars$h = LinkClass.cssVarList;
 
 const link = {
-  [vars$g.hostDirection]: globalRefs$8.direction,
-  [vars$g.cursor]: 'pointer',
+  [vars$h.hostDirection]: globalRefs$9.direction,
+  [vars$h.cursor]: 'pointer',
 
-  [vars$g.textColor]: globalRefs$8.colors.primary.main,
+  [vars$h.textColor]: globalRefs$9.colors.primary.main,
 
   textAlign: {
-    right: { [vars$g.textAlign]: 'right' },
-    left: { [vars$g.textAlign]: 'left' },
-    center: { [vars$g.textAlign]: 'center' },
+    right: { [vars$h.textAlign]: 'right' },
+    left: { [vars$h.textAlign]: 'left' },
+    center: { [vars$h.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$g.hostWidth]: '100%',
+    [vars$h.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$g.textColor]: globalRefs$8.colors.primary.main,
+      [vars$h.textColor]: globalRefs$9.colors.primary.main,
     },
     secondary: {
-      [vars$g.textColor]: globalRefs$8.colors.secondary.main,
+      [vars$h.textColor]: globalRefs$9.colors.secondary.main,
     },
     error: {
-      [vars$g.textColor]: globalRefs$8.colors.error.main,
+      [vars$h.textColor]: globalRefs$9.colors.error.main,
     },
     success: {
-      [vars$g.textColor]: globalRefs$8.colors.success.main,
+      [vars$h.textColor]: globalRefs$9.colors.success.main,
     },
   },
 };
@@ -4402,11 +4402,11 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$g
+  vars: vars$h
 });
 
-const componentName$l = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
+const componentName$m = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -4505,7 +4505,7 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 const compVars$2 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -4513,18 +4513,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$l
+  componentName$m
 );
 
 const divider = {
   ...helperTheme$1,
 
-  [compVars$2.hostDirection]: globalRefs$7.direction,
+  [compVars$2.hostDirection]: globalRefs$8.direction,
   [compVars$2.alignItems]: 'center',
   [compVars$2.flexDirection]: 'row',
   [compVars$2.alignSelf]: 'stretch',
   [compVars$2.hostWidth]: '100%',
-  [compVars$2.stripeColor]: globalRefs$7.colors.surface.main,
+  [compVars$2.stripeColor]: globalRefs$8.colors.surface.main,
   [compVars$2.stripeColorOpacity]: '0.5',
   [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$2.labelTextWidth]: 'fit-content',
@@ -4544,7 +4544,7 @@ const divider = {
   },
 };
 
-const vars$f = {
+const vars$g = {
   ...compVars$2,
   ...helperVars$1,
 };
@@ -4552,16 +4552,16 @@ const vars$f = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$f
+  vars: vars$g
 });
 
 /* eslint-disable no-param-reassign */
 
-const componentName$k = getComponentName('passcode-internal');
+const componentName$l = getComponentName('passcode-internal');
 
-createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
 
-const componentName$j = getComponentName('passcode');
+const componentName$k = getComponentName('passcode');
 
 const observedAttributes$3 = ['digits'];
 
@@ -4580,17 +4580,17 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$k}
+      <${componentName$l}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$k}>
+      ><slot></slot></${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, this.inputElement, { includeAttrs: ['digits', 'size'] });
     }
@@ -4730,45 +4730,45 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$j,
+    componentName: componentName$k,
   })
 );
 
-const vars$e = PasscodeClass.cssVarList;
+const vars$f = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$e.hostDirection]: refs.direction,
-  [vars$e.fontFamily]: refs.fontFamily,
-  [vars$e.fontSize]: refs.fontSize,
-  [vars$e.labelTextColor]: refs.labelTextColor,
-  [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$e.digitValueTextColor]: refs.valueTextColor,
-  [vars$e.digitPadding]: '0',
-  [vars$e.digitTextAlign]: 'center',
-  [vars$e.digitSpacing]: '4px',
-  [vars$e.hostWidth]: refs.width,
-  [vars$e.digitOutlineColor]: 'transparent',
-  [vars$e.digitOutlineWidth]: refs.outlineWidth,
-  [vars$e.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$e.digitSize]: refs.inputHeight,
+  [vars$f.hostDirection]: refs.direction,
+  [vars$f.fontFamily]: refs.fontFamily,
+  [vars$f.fontSize]: refs.fontSize,
+  [vars$f.labelTextColor]: refs.labelTextColor,
+  [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$f.digitValueTextColor]: refs.valueTextColor,
+  [vars$f.digitPadding]: '0',
+  [vars$f.digitTextAlign]: 'center',
+  [vars$f.digitSpacing]: '4px',
+  [vars$f.hostWidth]: refs.width,
+  [vars$f.digitOutlineColor]: 'transparent',
+  [vars$f.digitOutlineWidth]: refs.outlineWidth,
+  [vars$f.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$f.digitSize]: refs.inputHeight,
 
   _hideCursor: {
-    [vars$e.digitCaretTextColor]: 'transparent',
+    [vars$f.digitCaretTextColor]: 'transparent',
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$e
+  vars: vars$f
 });
 
-const componentName$i = getComponentName('loader-linear');
+const componentName$j = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$i;
+    return componentName$j;
   }
 
   constructor() {
@@ -4829,54 +4829,54 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-const globalRefs$6 = getThemeRefs(globals);
-const vars$d = LoaderLinearClass.cssVarList;
+const globalRefs$7 = getThemeRefs(globals);
+const vars$e = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$d.hostDisplay]: 'inline-block',
-  [vars$d.hostWidth]: '100%',
+  [vars$e.hostDisplay]: 'inline-block',
+  [vars$e.hostWidth]: '100%',
 
-  [vars$d.barColor]: globalRefs$6.colors.surface.contrast,
-  [vars$d.barWidth]: '20%',
+  [vars$e.barColor]: globalRefs$7.colors.surface.contrast,
+  [vars$e.barWidth]: '20%',
 
-  [vars$d.barBackgroundColor]: globalRefs$6.colors.surface.main,
-  [vars$d.barBorderRadius]: '4px',
+  [vars$e.barBackgroundColor]: globalRefs$7.colors.surface.main,
+  [vars$e.barBorderRadius]: '4px',
 
-  [vars$d.animationDuration]: '2s',
-  [vars$d.animationTimingFunction]: 'linear',
-  [vars$d.animationIterationCount]: 'infinite',
-  [vars$d.verticalPadding]: '0.25em',
+  [vars$e.animationDuration]: '2s',
+  [vars$e.animationTimingFunction]: 'linear',
+  [vars$e.animationIterationCount]: 'infinite',
+  [vars$e.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$d.barHeight]: '2px' },
-    sm: { [vars$d.barHeight]: '4px' },
-    md: { [vars$d.barHeight]: '6px' },
-    lg: { [vars$d.barHeight]: '8px' },
+    xs: { [vars$e.barHeight]: '2px' },
+    sm: { [vars$e.barHeight]: '4px' },
+    md: { [vars$e.barHeight]: '6px' },
+    lg: { [vars$e.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$d.barColor]: globalRefs$6.colors.primary.main,
+      [vars$e.barColor]: globalRefs$7.colors.primary.main,
     },
     secondary: {
-      [vars$d.barColor]: globalRefs$6.colors.secondary.main,
+      [vars$e.barColor]: globalRefs$7.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$d.hostDisplay]: 'none',
+    [vars$e.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$d
+  vars: vars$e
 });
 
-const componentName$h = getComponentName('loader-radial');
+const componentName$i = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -4920,22 +4920,22 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-const globalRefs$5 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 const compVars$1 = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
-    spinnerColor: globalRefs$5.colors.surface.contrast,
+    spinnerColor: globalRefs$6.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$5.colors.primary.main,
+        spinnerColor: globalRefs$6.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$5.colors.secondary.main,
+        spinnerColor: globalRefs$6.colors.secondary.main,
       },
     },
   },
-  componentName$h
+  componentName$i
 );
 
 const loaderRadial = {
@@ -4964,7 +4964,7 @@ const loaderRadial = {
     [compVars$1.hostDisplay]: 'none',
   },
 };
-const vars$c = {
+const vars$d = {
   ...compVars$1,
   ...helperVars,
 };
@@ -4972,10 +4972,10 @@ const vars$c = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$c
+  vars: vars$d
 });
 
-const componentName$g = getComponentName('combo-box');
+const componentName$h = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -5339,69 +5339,69 @@ 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$g,
+    componentName: componentName$h,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-const globalRefs$4 = getThemeRefs(globals);
-const vars$b = ComboBoxClass.cssVarList;
+const globalRefs$5 = getThemeRefs(globals);
+const vars$c = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$b.hostWidth]: refs.width,
-  [vars$b.hostDirection]: refs.direction,
-  [vars$b.fontSize]: refs.fontSize,
-  [vars$b.fontFamily]: refs.fontFamily,
-  [vars$b.labelTextColor]: refs.labelTextColor,
-  [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$b.inputBorderColor]: refs.borderColor,
-  [vars$b.inputBorderWidth]: refs.borderWidth,
-  [vars$b.inputBorderStyle]: refs.borderStyle,
-  [vars$b.inputBorderRadius]: refs.borderRadius,
-  [vars$b.inputOutlineColor]: refs.outlineColor,
-  [vars$b.inputOutlineOffset]: refs.outlineOffset,
-  [vars$b.inputOutlineWidth]: refs.outlineWidth,
-  [vars$b.inputOutlineStyle]: refs.outlineStyle,
-  [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$b.inputValueTextColor]: refs.valueTextColor,
-  [vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$b.inputBackgroundColor]: refs.backgroundColor,
-  [vars$b.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$b.inputHeight]: refs.inputHeight,
-  [vars$b.inputDropdownButtonColor]: globalRefs$4.colors.surface.contrast,
-  [vars$b.inputDropdownButtonCursor]: 'pointer',
-  [vars$b.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$b.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
-  [vars$b.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
-  [vars$b.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
+  [vars$c.hostWidth]: refs.width,
+  [vars$c.hostDirection]: refs.direction,
+  [vars$c.fontSize]: refs.fontSize,
+  [vars$c.fontFamily]: refs.fontFamily,
+  [vars$c.labelTextColor]: refs.labelTextColor,
+  [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$c.inputBorderColor]: refs.borderColor,
+  [vars$c.inputBorderWidth]: refs.borderWidth,
+  [vars$c.inputBorderStyle]: refs.borderStyle,
+  [vars$c.inputBorderRadius]: refs.borderRadius,
+  [vars$c.inputOutlineColor]: refs.outlineColor,
+  [vars$c.inputOutlineOffset]: refs.outlineOffset,
+  [vars$c.inputOutlineWidth]: refs.outlineWidth,
+  [vars$c.inputOutlineStyle]: refs.outlineStyle,
+  [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$c.inputValueTextColor]: refs.valueTextColor,
+  [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$c.inputBackgroundColor]: refs.backgroundColor,
+  [vars$c.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$c.inputHeight]: refs.inputHeight,
+  [vars$c.inputDropdownButtonColor]: globalRefs$5.colors.surface.contrast,
+  [vars$c.inputDropdownButtonCursor]: 'pointer',
+  [vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$c.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
+  [vars$c.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
+  [vars$c.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
 
   _readonly: {
-    [vars$b.inputDropdownButtonCursor]: 'default',
+    [vars$c.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$b.overlayFontSize]: refs.fontSize,
-  [vars$b.overlayFontFamily]: refs.fontFamily,
-  [vars$b.overlayCursor]: 'pointer',
-  [vars$b.overlayItemBoxShadow]: 'none',
+  [vars$c.overlayFontSize]: refs.fontSize,
+  [vars$c.overlayFontFamily]: refs.fontFamily,
+  [vars$c.overlayCursor]: 'pointer',
+  [vars$c.overlayItemBoxShadow]: 'none',
 
   // Overlay direct theme:
-  [vars$b.overlay.minHeight]: '400px',
-  [vars$b.overlay.margin]: '0',
+  [vars$c.overlay.minHeight]: '400px',
+  [vars$c.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$b
+  vars: vars$c
 });
 
 const observedAttributes$2 = ['src', 'alt'];
 
-const componentName$f = getComponentName('image');
+const componentName$g = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$f, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$g, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -5441,14 +5441,14 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-const vars$a = ImageClass.cssVarList;
+const vars$b = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$a
+  vars: vars$b
 });
 
 var CountryCodes = [
@@ -6664,14 +6664,14 @@ var CountryCodes = [
   },
 ].sort((a, b) => (a.name < b.name ? -1 : 1));
 
-const componentName$e = getComponentName('phone-field-internal');
+const componentName$f = getComponentName('phone-field-internal');
 
-createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$d = getComponentName('phone-field');
+const componentName$e = getComponentName('phone-field');
 
 const customMixin$4 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -6685,15 +6685,15 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$e}
+				<${componentName$f}
 					tabindex="-1"
 					slot="input"
-				></${componentName$e}>
+				></${componentName$f}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$e);
+      this.inputElement = this.shadowRoot.querySelector(componentName$f);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -6889,33 +6889,33 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$d,
+    componentName: componentName$e,
   })
 );
 
-const vars$9 = PhoneFieldClass.cssVarList;
+const vars$a = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$9.hostWidth]: refs.width,
-  [vars$9.hostDirection]: refs.direction,
-  [vars$9.fontSize]: refs.fontSize,
-  [vars$9.fontFamily]: refs.fontFamily,
-  [vars$9.labelTextColor]: refs.labelTextColor,
-  [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$9.inputValueTextColor]: refs.valueTextColor,
-  [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$9.inputBorderStyle]: refs.borderStyle,
-  [vars$9.inputBorderWidth]: refs.borderWidth,
-  [vars$9.inputBorderColor]: refs.borderColor,
-  [vars$9.inputBorderRadius]: refs.borderRadius,
-  [vars$9.inputOutlineStyle]: refs.outlineStyle,
-  [vars$9.inputOutlineWidth]: refs.outlineWidth,
-  [vars$9.inputOutlineColor]: refs.outlineColor,
-  [vars$9.inputOutlineOffset]: refs.outlineOffset,
-  [vars$9.phoneInputWidth]: refs.minWidth,
-  [vars$9.countryCodeInputWidth]: '5em',
-  [vars$9.countryCodeDropdownWidth]: '20em',
+  [vars$a.hostWidth]: refs.width,
+  [vars$a.hostDirection]: refs.direction,
+  [vars$a.fontSize]: refs.fontSize,
+  [vars$a.fontFamily]: refs.fontFamily,
+  [vars$a.labelTextColor]: refs.labelTextColor,
+  [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$a.inputValueTextColor]: refs.valueTextColor,
+  [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$a.inputBorderStyle]: refs.borderStyle,
+  [vars$a.inputBorderWidth]: refs.borderWidth,
+  [vars$a.inputBorderColor]: refs.borderColor,
+  [vars$a.inputBorderRadius]: refs.borderRadius,
+  [vars$a.inputOutlineStyle]: refs.outlineStyle,
+  [vars$a.inputOutlineWidth]: refs.outlineWidth,
+  [vars$a.inputOutlineColor]: refs.outlineColor,
+  [vars$a.inputOutlineOffset]: refs.outlineOffset,
+  [vars$a.phoneInputWidth]: refs.minWidth,
+  [vars$a.countryCodeInputWidth]: '5em',
+  [vars$a.countryCodeDropdownWidth]: '20em',
 
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
@@ -6925,16 +6925,16 @@ const phoneField = {
 var phoneField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneField,
-  vars: vars$9
+  vars: vars$a
 });
 
-const componentName$c = getComponentName('phone-field-internal-input-box');
+const componentName$d = getComponentName('phone-field-internal-input-box');
 
-createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$b = getComponentName('phone-input-box-field');
+const componentName$c = getComponentName('phone-input-box-field');
 
 const customMixin$3 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -6948,15 +6948,15 @@ const customMixin$3 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$c}
+				<${componentName$d}
 					tabindex="-1"
 					slot="input"
-				></${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.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -7089,45 +7089,45 @@ const PhoneFieldInputBoxClass = compose(
     ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$b,
+    componentName: componentName$c,
   })
 );
 
-const vars$8 = PhoneFieldInputBoxClass.cssVarList;
+const vars$9 = PhoneFieldInputBoxClass.cssVarList;
 
 const phoneInputBoxField = {
-  [vars$8.hostWidth]: '16em',
-  [vars$8.hostMinWidth]: refs.minWidth,
-  [vars$8.hostDirection]: refs.direction,
-  [vars$8.fontSize]: refs.fontSize,
-  [vars$8.fontFamily]: refs.fontFamily,
-  [vars$8.labelTextColor]: refs.labelTextColor,
-  [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$8.inputValueTextColor]: refs.valueTextColor,
-  [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$8.inputBorderStyle]: refs.borderStyle,
-  [vars$8.inputBorderWidth]: refs.borderWidth,
-  [vars$8.inputBorderColor]: refs.borderColor,
-  [vars$8.inputBorderRadius]: refs.borderRadius,
-  [vars$8.inputOutlineStyle]: refs.outlineStyle,
-  [vars$8.inputOutlineWidth]: refs.outlineWidth,
-  [vars$8.inputOutlineColor]: refs.outlineColor,
-  [vars$8.inputOutlineOffset]: refs.outlineOffset,
+  [vars$9.hostWidth]: '16em',
+  [vars$9.hostMinWidth]: refs.minWidth,
+  [vars$9.hostDirection]: refs.direction,
+  [vars$9.fontSize]: refs.fontSize,
+  [vars$9.fontFamily]: refs.fontFamily,
+  [vars$9.labelTextColor]: refs.labelTextColor,
+  [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$9.inputValueTextColor]: refs.valueTextColor,
+  [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$9.inputBorderStyle]: refs.borderStyle,
+  [vars$9.inputBorderWidth]: refs.borderWidth,
+  [vars$9.inputBorderColor]: refs.borderColor,
+  [vars$9.inputBorderRadius]: refs.borderRadius,
+  [vars$9.inputOutlineStyle]: refs.outlineStyle,
+  [vars$9.inputOutlineWidth]: refs.outlineWidth,
+  [vars$9.inputOutlineColor]: refs.outlineColor,
+  [vars$9.inputOutlineOffset]: refs.outlineOffset,
   _fullWidth: {
-    [vars$8.hostWidth]: refs.width,
+    [vars$9.hostWidth]: refs.width,
   },
 };
 
 var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneInputBoxField,
-  vars: vars$8
+  vars: vars$9
 });
 
-const componentName$a = getComponentName('new-password-internal');
+const componentName$b = getComponentName('new-password-internal');
 
-const componentName$9 = getComponentName('new-password');
+const componentName$a = getComponentName('new-password');
 
 const customMixin$2 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
@@ -7137,16 +7137,16 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$a}
+			<${componentName$b}
 				name="new-password"
 				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);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -7253,33 +7253,33 @@ const NewPasswordClass = compose(
 		}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$9,
+    componentName: componentName$a,
   })
 );
 
-const vars$7 = NewPasswordClass.cssVarList;
+const vars$8 = NewPasswordClass.cssVarList;
 
 const newPassword = {
-  [vars$7.hostWidth]: refs.width,
-  [vars$7.hostMinWidth]: refs.minWidth,
-  [vars$7.hostDirection]: refs.direction,
-  [vars$7.fontSize]: refs.fontSize,
-  [vars$7.fontFamily]: refs.fontFamily,
-  [vars$7.spaceBetweenInputs]: '1em',
-  [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$8.hostWidth]: refs.width,
+  [vars$8.hostMinWidth]: refs.minWidth,
+  [vars$8.hostDirection]: refs.direction,
+  [vars$8.fontSize]: refs.fontSize,
+  [vars$8.fontFamily]: refs.fontFamily,
+  [vars$8.spaceBetweenInputs]: '1em',
+  [vars$8.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$7.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$8.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$7
+  vars: vars$8
 });
 
 const getFileBase64 = (fileObj) => {
@@ -7294,7 +7294,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$8 = getComponentName('upload-file');
+const componentName$9 = getComponentName('upload-file');
 
 const observedAttributes$1 = [
   'title',
@@ -7309,7 +7309,7 @@ const observedAttributes$1 = [
   'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$8, baseSelector: ':host > div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$9, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -7524,77 +7524,77 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-const vars$6 = UploadFileClass.cssVarList;
+const vars$7 = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$6.hostDirection]: refs.direction,
-  [vars$6.labelTextColor]: refs.labelTextColor,
-  [vars$6.fontFamily]: refs.fontFamily,
+  [vars$7.hostDirection]: refs.direction,
+  [vars$7.labelTextColor]: refs.labelTextColor,
+  [vars$7.fontFamily]: refs.fontFamily,
 
-  [vars$6.iconSize]: '2em',
+  [vars$7.iconSize]: '2em',
 
-  [vars$6.hostPadding]: '0.75em',
-  [vars$6.gap]: '0.5em',
+  [vars$7.hostPadding]: '0.75em',
+  [vars$7.gap]: '0.5em',
 
-  [vars$6.fontSize]: '16px',
-  [vars$6.titleFontWeight]: '500',
-  [vars$6.lineHeight]: '1em',
+  [vars$7.fontSize]: '16px',
+  [vars$7.titleFontWeight]: '500',
+  [vars$7.lineHeight]: '1em',
 
-  [vars$6.borderWidth]: refs.borderWidth,
-  [vars$6.borderColor]: refs.borderColor,
-  [vars$6.borderRadius]: refs.borderRadius,
-  [vars$6.borderStyle]: 'dashed',
+  [vars$7.borderWidth]: refs.borderWidth,
+  [vars$7.borderColor]: refs.borderColor,
+  [vars$7.borderRadius]: refs.borderRadius,
+  [vars$7.borderStyle]: 'dashed',
 
   _required: {
-    [vars$6.requiredIndicator]: refs.requiredIndicator,
+    [vars$7.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$6.hostHeight]: '196px',
-      [vars$6.hostWidth]: '200px',
-      [vars$6.titleFontSize]: '0.875em',
-      [vars$6.descriptionFontSize]: '0.875em',
-      [vars$6.lineHeight]: '1.25em',
+      [vars$7.hostHeight]: '196px',
+      [vars$7.hostWidth]: '200px',
+      [vars$7.titleFontSize]: '0.875em',
+      [vars$7.descriptionFontSize]: '0.875em',
+      [vars$7.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$6.hostHeight]: '216px',
-      [vars$6.hostWidth]: '230px',
-      [vars$6.titleFontSize]: '1em',
-      [vars$6.descriptionFontSize]: '0.875em',
-      [vars$6.lineHeight]: '1.25em',
+      [vars$7.hostHeight]: '216px',
+      [vars$7.hostWidth]: '230px',
+      [vars$7.titleFontSize]: '1em',
+      [vars$7.descriptionFontSize]: '0.875em',
+      [vars$7.lineHeight]: '1.25em',
     },
     md: {
-      [vars$6.hostHeight]: '256px',
-      [vars$6.hostWidth]: '312px',
-      [vars$6.titleFontSize]: '1.125em',
-      [vars$6.descriptionFontSize]: '1em',
-      [vars$6.lineHeight]: '1.5em',
+      [vars$7.hostHeight]: '256px',
+      [vars$7.hostWidth]: '312px',
+      [vars$7.titleFontSize]: '1.125em',
+      [vars$7.descriptionFontSize]: '1em',
+      [vars$7.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$6.hostHeight]: '280px',
-      [vars$6.hostWidth]: '336px',
-      [vars$6.titleFontSize]: '1.125em',
-      [vars$6.descriptionFontSize]: '1.125em',
-      [vars$6.lineHeight]: '1.75em',
+      [vars$7.hostHeight]: '280px',
+      [vars$7.hostWidth]: '336px',
+      [vars$7.titleFontSize]: '1.125em',
+      [vars$7.descriptionFontSize]: '1.125em',
+      [vars$7.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$6.hostWidth]: refs.width,
+    [vars$7.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$6
+  vars: vars$7
 });
 
-const componentName$7 = getComponentName('button-selection-group-item');
+const componentName$8 = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$7,
+  componentName: componentName$8,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -7692,39 +7692,39 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 
-const vars$5 = ButtonSelectionGroupItemClass.cssVarList;
+const vars$6 = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$5.hostDirection]: 'inherit',
-  [vars$5.backgroundColor]: globalRefs$3.colors.surface.light,
-  [vars$5.labelTextColor]: globalRefs$3.colors.surface.contrast,
-  [vars$5.borderColor]: globalRefs$3.colors.surface.main,
-  [vars$5.borderStyle]: 'solid',
-  [vars$5.borderRadius]: globalRefs$3.radius.sm,
+  [vars$6.hostDirection]: 'inherit',
+  [vars$6.backgroundColor]: globalRefs$4.colors.surface.light,
+  [vars$6.labelTextColor]: globalRefs$4.colors.surface.contrast,
+  [vars$6.borderColor]: globalRefs$4.colors.surface.main,
+  [vars$6.borderStyle]: 'solid',
+  [vars$6.borderRadius]: globalRefs$4.radius.sm,
 
   _hover: {
-    [vars$5.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+    [vars$6.backgroundColor]: '#f4f5f5', // can we take it from the palette?
   },
 
   _selected: {
-    [vars$5.borderColor]: globalRefs$3.colors.surface.contrast,
-    [vars$5.backgroundColor]: globalRefs$3.colors.surface.contrast,
-    [vars$5.labelTextColor]: globalRefs$3.colors.surface.light,
+    [vars$6.borderColor]: globalRefs$4.colors.surface.contrast,
+    [vars$6.backgroundColor]: globalRefs$4.colors.surface.contrast,
+    [vars$6.labelTextColor]: globalRefs$4.colors.surface.light,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$5
+  vars: vars$6
 });
 
-const componentName$6 = getComponentName('button-selection-group-internal');
+const componentName$7 = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseInputClass({
-  componentName: componentName$6,
+  componentName: componentName$7,
   baseSelector: 'slot',
 }) {
   constructor() {
@@ -7861,7 +7861,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
   }
 }
 
-const componentName$5 = getComponentName('button-selection-group');
+const componentName$6 = getComponentName('button-selection-group');
 
 const customMixin$1 = (superclass) =>
   class ButtonSelectionGroupMixinClass extends superclass {
@@ -7936,18 +7936,18 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$6}
+			<${componentName$7}
 				name="button-selection-group"
 				slot="input"
         tabindex="-1"
 			>
         <slot></slot>
-      </${componentName$6}>
+      </${componentName$7}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$6);
+      this.inputElement = this.shadowRoot.querySelector(componentName$7);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -8052,30 +8052,30 @@ const ButtonSelectionGroupClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$5,
+    componentName: componentName$6,
   })
 );
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$4 = ButtonSelectionGroupClass.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
+const vars$5 = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  [vars$4.hostDirection]: refs.direction,
-  [vars$4.fontFamily]: refs.fontFamily,
-  [vars$4.labelTextColor]: refs.labelTextColor,
-  [vars$4.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$4.itemsSpacing]: globalRefs$2.spacing.sm,
-  [vars$4.hostWidth]: refs.width,
+  [vars$5.hostDirection]: refs.direction,
+  [vars$5.fontFamily]: refs.fontFamily,
+  [vars$5.labelTextColor]: refs.labelTextColor,
+  [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$5.itemsSpacing]: globalRefs$3.spacing.sm,
+  [vars$5.hostWidth]: refs.width,
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$4
+  vars: vars$5
 });
 
-const componentName$4 = getComponentName('modal');
+const componentName$5 = getComponentName('modal');
 
 const customMixin = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -8171,7 +8171,7 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$4,
+    componentName: componentName$5,
   })
 );
 
@@ -8182,14 +8182,14 @@ const modal = {
   [compVars.overlayWidth]: '700px',
 };
 
-const vars$3 = {
+const vars$4 = {
   ...compVars,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$3
+  vars: vars$4
 });
 
 const isValidDataType = (data) => {
@@ -8202,7 +8202,7 @@ const isValidDataType = (data) => {
   return isValid;
 };
 
-const componentName$3 = getComponentName('grid');
+const componentName$4 = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -8427,38 +8427,38 @@ const GridClass = compose(
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$3,
+    componentName: componentName$4,
   })
 );
 
-const globalRefs$1 = getThemeRefs(globals);
-const vars$2 = GridClass.cssVarList;
+const globalRefs$2 = getThemeRefs(globals);
+const vars$3 = GridClass.cssVarList;
 
 const grid = {
-  [vars$2.hostWidth]: '100%',
-  [vars$2.hostHeight]: '100%',
-  [vars$2.hostMinHeight]: '400px',
+  [vars$3.hostWidth]: '100%',
+  [vars$3.hostHeight]: '100%',
+  [vars$3.hostMinHeight]: '400px',
 
-  [vars$2.fontSize]: refs.fontSize,
-  [vars$2.fontFamily]: refs.fontFamily,
+  [vars$3.fontSize]: refs.fontSize,
+  [vars$3.fontFamily]: refs.fontFamily,
 
-  [vars$2.sortIndicatorsColor]: globalRefs$1.colors.primary.main,
-  [vars$2.activeSortIndicator]: globalRefs$1.colors.primary.main,
-  [vars$2.resizeHandleColor]: globalRefs$1.colors.surface.main,
+  [vars$3.sortIndicatorsColor]: globalRefs$2.colors.primary.main,
+  [vars$3.activeSortIndicator]: globalRefs$2.colors.primary.main,
+  [vars$3.resizeHandleColor]: globalRefs$2.colors.surface.main,
 
-  [vars$2.inputBorderWidth]: refs.borderWidth,
-  [vars$2.inputBorderStyle]: refs.borderStyle,
-  [vars$2.inputBorderRadius]: refs.borderRadius,
-  [vars$2.inputBorderColor]: 'transparent',
+  [vars$3.inputBorderWidth]: refs.borderWidth,
+  [vars$3.inputBorderStyle]: refs.borderStyle,
+  [vars$3.inputBorderRadius]: refs.borderRadius,
+  [vars$3.inputBorderColor]: 'transparent',
 
-  [vars$2.separatorColor]: refs.borderColor,
+  [vars$3.separatorColor]: refs.borderColor,
 
-  [vars$2.valueTextColor]: globalRefs$1.colors.surface.contrast,
-  [vars$2.selectedBackgroundColor]: globalRefs$1.colors.primary.main,
-  [vars$2.selectedTextColor]: globalRefs$1.colors.primary.contrast,
+  [vars$3.valueTextColor]: globalRefs$2.colors.surface.contrast,
+  [vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.main,
+  [vars$3.selectedTextColor]: globalRefs$2.colors.primary.contrast,
 
   _bordered: {
-    [vars$2.inputBorderColor]: refs.borderColor,
+    [vars$3.inputBorderColor]: refs.borderColor,
   },
 };
 
@@ -8466,10 +8466,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$2
+  vars: vars$3
 });
 
-const componentName$2 = getComponentName('notification-card');
+const componentName$3 = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -8577,30 +8577,136 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$2,
+    componentName: componentName$3,
   })
 );
 
-const globalRefs = getThemeRefs(globals);
-const vars$1 = NotificationCardClass.cssVarList;
+const globalRefs$1 = getThemeRefs(globals);
+const vars$2 = NotificationCardClass.cssVarList;
 
 const shadowColor = '#00000020';
 
 const notification = {
-  [vars$1.hostMinWidth]: '415px',
-  [vars$1.fontFamily]: globalRefs.fonts.font1.family,
-  [vars$1.fontSize]: globalRefs.typography.body1.size,
-  [vars$1.backgroundColor]: globalRefs.colors.surface.main,
-  [vars$1.textColor]: globalRefs.colors.surface.contrast,
-  [vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
-  [vars$1.verticalPadding]: '0.45em',
-  [vars$1.horizontalPadding]: '1em',
-  [vars$1.borderRadius]: globalRefs.radius.md,
+  [vars$2.hostMinWidth]: '415px',
+  [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
+  [vars$2.fontSize]: globalRefs$1.typography.body1.size,
+  [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
+  [vars$2.textColor]: globalRefs$1.colors.surface.contrast,
+  [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${shadowColor}`,
+  [vars$2.verticalPadding]: '0.45em',
+  [vars$2.horizontalPadding]: '1em',
+  [vars$2.borderRadius]: globalRefs$1.radius.md,
 
   _bordered: {
-    [vars$1.borderWidth]: globalRefs.border.sm,
-    [vars$1.borderStyle]: 'solid',
-    [vars$1.borderColor]: 'transparent',
+    [vars$2.borderWidth]: globalRefs$1.border.sm,
+    [vars$2.borderStyle]: 'solid',
+    [vars$2.borderColor]: 'transparent',
+  },
+
+  size: {
+    xs: { [vars$2.fontSize]: '12px' },
+    sm: { [vars$2.fontSize]: '14px' },
+    md: { [vars$2.fontSize]: '16px' },
+    lg: { [vars$2.fontSize]: '18px' },
+  },
+
+  mode: {
+    primary: {
+      [vars$2.backgroundColor]: globalRefs$1.colors.primary.main,
+      [vars$2.textColor]: globalRefs$1.colors.primary.contrast,
+      [vars$2.borderColor]: globalRefs$1.colors.primary.light,
+    },
+    success: {
+      [vars$2.backgroundColor]: globalRefs$1.colors.success.main,
+      [vars$2.textColor]: globalRefs$1.colors.success.contrast,
+      [vars$2.borderColor]: globalRefs$1.colors.success.light,
+    },
+    error: {
+      [vars$2.backgroundColor]: globalRefs$1.colors.error.main,
+      [vars$2.textColor]: globalRefs$1.colors.error.contrast,
+      [vars$2.borderColor]: globalRefs$1.colors.error.light,
+    },
+  },
+};
+
+var notificationCard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: notification,
+  vars: vars$2
+});
+
+const componentName$2 = getComponentName('badge');
+
+class RawBadge extends createBaseClass({ componentName: componentName$2, baseSelector: ':host > div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+      :host > div {
+        width: 100%;
+      }
+		</style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+  }
+}
+
+const BadgeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostDirection: { property: 'direction' },
+
+      fontFamily: {},
+      fontSize: {},
+      fontWeight: {},
+
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+      borderRadius: {},
+
+      backgroundColor: {},
+
+      textColor: { property: 'color' },
+      textAlign: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawBadge);
+
+const globalRefs = getThemeRefs(globals);
+const vars$1 = BadgeClass.cssVarList;
+
+const badge = {
+  [vars$1.hostWidth]: 'fit-content',
+  [vars$1.hostDirection]: globalRefs.direction,
+
+  [vars$1.textAlign]: 'center',
+
+  [vars$1.fontFamily]: globalRefs.fonts.font1.family,
+  [vars$1.fontWeight]: '400',
+
+  [vars$1.verticalPadding]: '0.25em',
+  [vars$1.horizontalPadding]: '0.5em',
+
+  [vars$1.borderWidth]: globalRefs.border.xs,
+  [vars$1.borderRadius]: globalRefs.radius.sm,
+  [vars$1.borderColor]: 'transparent',
+  [vars$1.borderStyle]: 'solid',
+
+  _fullWidth: {
+    [vars$1.hostWidth]: '100%',
   },
 
   size: {
@@ -8611,27 +8717,42 @@ const notification = {
   },
 
   mode: {
+    default: {
+      [vars$1.textColor]: globalRefs.colors.surface.dark,
+      _bordered: {
+        [vars$1.borderColor]: globalRefs.colors.surface.main,
+      },
+    },
     primary: {
-      [vars$1.backgroundColor]: globalRefs.colors.primary.main,
-      [vars$1.textColor]: globalRefs.colors.primary.contrast,
-      [vars$1.borderColor]: globalRefs.colors.primary.light,
+      [vars$1.textColor]: globalRefs.colors.primary.main,
+      _bordered: {
+        [vars$1.borderColor]: globalRefs.colors.primary.light,
+      },
     },
-    success: {
-      [vars$1.backgroundColor]: globalRefs.colors.success.main,
-      [vars$1.textColor]: globalRefs.colors.success.contrast,
-      [vars$1.borderColor]: globalRefs.colors.success.light,
+    secondary: {
+      [vars$1.textColor]: globalRefs.colors.secondary.main,
+      _bordered: {
+        [vars$1.borderColor]: globalRefs.colors.secondary.light,
+      },
     },
     error: {
-      [vars$1.backgroundColor]: globalRefs.colors.error.main,
-      [vars$1.textColor]: globalRefs.colors.error.contrast,
       [vars$1.borderColor]: globalRefs.colors.error.light,
+      _bordered: {
+        [vars$1.textColor]: globalRefs.colors.error.main,
+      },
+    },
+    success: {
+      [vars$1.textColor]: globalRefs.colors.success.main,
+      _bordered: {
+        [vars$1.borderColor]: globalRefs.colors.success.light,
+      },
     },
   },
 };
 
-var notificationCard = /*#__PURE__*/Object.freeze({
+var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: notification,
+  default: badge,
   vars: vars$1
 });
 
@@ -8665,6 +8786,7 @@ const components = {
   modal: modal$1,
   grid: grid$1,
   notificationCard,
+  badge: badge$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -8677,7 +8799,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$u, components: vars };
+const themeVars = { globals: vars$v, components: vars };
 
 const componentName$1 = getComponentName('recaptcha');
 
@@ -8932,6 +9054,7 @@ const NotificationClass = compose(
   })
 );
 
+exports.BadgeClass = BadgeClass;
 exports.ButtonClass = ButtonClass;
 exports.ButtonSelectionGroupClass = ButtonSelectionGroupClass;
 exports.ButtonSelectionGroupItemClass = ButtonSelectionGroupItemClass;